No Code Web Pages
The first step in developing web pages is to plan how you want the page to look.
A common page type configuration would have a series of links down the left hand column, and text or graphics appearing on the right side. See Example 1 below:
Example 1
Links do not have to appear on the left only; the following page is from the College Website (Example 2) and contains a series of links to important college information:
Example 2
Another information page show below (Example 3), is a text document designed to give information only. A page like this may contain imbedded links within the text.
Example 3
You are not limited to any one design. Each one of your web pages can have it’s own look depending on the purpose of the page. In this workshop, we will make each type of page and link them together to form a web.
Let’s start with the introduction page. The most common design for this type of page is shown in Example 1.
Anytime you want information to stay in a column format, you must use tables. This is true for the web page that separates the links from the text such as in Example 1, or for any page where you want to separate information into orderly columns. Web pages do not like the tab key. Columns made using tabs will not appear correctly when converted to a web page.
Lets begin by inserting a table. On the toolbar at the top of your screen, select Table – Insert –table.
A popup window will appear and allow you to select the number of rows and columns for your table.
For this web page, we will have 2 columns; this will separate the links from the general information. We only have one row of data in each column. Later on we will insert a table using multiple rows.
Your table will appear similar to the picture above. If you click the mouse into the center of left column, you can hit the enter command a few time and your table will expand vertically. Hit the enter command about three times.
Next, we can alter the size of the columns. The links section is usually narrower than the main body of the document. To change the column width, move the mouse over the centerline of the table. Notice the curser changes to a line with two arrows on either side of the line.
By holding down the mouse button, you can drag the line from left to right thus changing the position of the line. If you notice the ruler just above the window, the ruler on the picture above show the column located at position 2. In the first picture of the table, the column was in the center at position 3. The ruler toolbar comes in handy when selecting position placement for your page items.
Ok, we said the left hand side of the page should contain links. Let’s add some links. With your mouse cursor, click back into the first column, and select enter to move the column down.
Type the full web address of a website you know. I used Google.com, at http://www.google.com.
As soon as you hit the enter key, the web address will be converted automatically to a hyperlink.
If Microsoft recognizes the web address format you use, it will automatically add the necessary code to make the address a hyperlink. In this example, we could have typed www.google.com and Microsoft will recognize the www as being a web address and make the conversion. Not all web addresses begin with WWW. For example, the faculty web server begins the address with faculty.ccp.cc.pa.us/faculty/dfriel this is not automatically recognized. If I give the full address http://faculty.ccp.cc.pa.us/faculty/dfriel Microsoft will recognize the web address because it begins with http://. It is probably a good habit to type the complete web address beginning with the http:// to avoid any confusion about what will convert and what won’t.
You can always make a hyperlink link yourself. If you type in a website name, see below:
I typed the words “College Staff Page” then I selected all the text by holding down the right mouse button and dragging the curser over the text. While the text is still highlighted, select the insert tab. Then select Hyperlink
A pop up window will appear that will allow you to type in the address of the hyperlink or to select the link from a list of previously used links, or to select a bookmark on the page.
I selected the College staff page link from a list of previously used links. You can even use the web page button to browse the Internet for a web address to link to.
Ok, we have the beginning of a page except it has no color. Adding color to your pages can get a little confusing. There are really a number of objects already on this page. There is the main page. On the main page, we inserted a table. We divided the table into two columns. Each of these objects has a color property.
Lets start with the main page property. If you select the Format button from the toolbar at the top of your page, one of the Format options is background. The picture below shows the background changed after selecting the plum color option.
Not exactly what you were expecting was it? The background option will change the color for everything on the page that does not contain a color of it’s own. Let’s add some more color. With the mouse inside the table column, select Table – Table Properties.
The Popup window for table properties will appear: Select borders and shading from this popup window.
Borders and shading will be used to give color to the columns in your table. First add a color to the entire table. Then move your cursor into one of the columns, and now select another color and give it to the cell only. Using this technique I created the following table.
The hard part is over. The page is coming together except I don’t like the light blue links. Have you ever wanted to change the links color or even get rid of the underline? You can. Select Format style from the drop down tabs.
A pop up window named style will appear. Select the word hyperlink then select modify at the Bottom of the screen. Another popup will appear which allows you to select format. You can now format the hyperlinks in you page.
You can change the color of the links, make them bold, and take off the underline command. This area gives you a lot of control over the look of your hyperlinks.
We can now go back to our original page and add some more items.
Let’s add a picture to the page. If you select the Insert tab and then picture, you get a choice of selecting the picture from the Microsoft clipart collection or you can insert a picture from a file. It is best to only use GIF or JPG picture file formats. There are a few other file types that will work in all web browsers, but these two are the most common. Microsoft clip art pictures usually come in as GIF files.
The picture I inserted came from the clipart Cartoon section.
You are free to type into the document and use all of the text formatting options nomally available in Microsoft Word. You can change the font type, you can add color to your font. You can add ordered list and unordered list. In the picture below, I used the font color drop down to change the color of the highlighted text on my page.
You can also select the word art command from the Drawing toolbar. This is show above at the bottom of the page. The big slanted A on the tool bar is the wordart icon. It will bring up the following popup window.
You can select the type of word art you want to use and another window will popup asking you to select the font size and allows you to insert the text you want to display.
I created a heading image with the wordart tool. This image is saved separately in a folder of its own when we save our final document.
Speaking of saving our final document, here is how my page looks so far.
Check all of your materials make sure your page appears the way you want it. We are now ready to save our work.
Select the file drop down menu from the toolbar. One of the save choices is “Save as Web Page” This is the terminology used in the Office 2000 version of Word. You can save as a web page in older versions as well. The Office 97 version of Word used the “save as HTML” command to convert your word document to a web page. For those of you who are not Windows users, Mac machines have comparable word-processing software that will allow you to save your files as web pages. Most modern word-processing software has this feature.
After you click the “Save as Web Page” choice, a new pop up window will open allowing you to name your web page. I used the name “index.htm” for my webpage. Notice, after saving your file, you have a folder called “index_files” created on your disk as well. This folder contains your picture files along with an XML file that helps the browser view your page. When you place you webpage on the web server, this folder must be with it.
There is a reason for choosing the name index for this file. When you design a web site, the first file that will be opened automatically by a web browser, is the file named index. Your main navigation page should be called index. This explains why you can see my website by typing my address http://faculty.ccp.cc.pa.us/faculty/dfriel This address will take you to the same place as the following: http://faculty.ccp.cc.pa.us/faculty/dfriel/index.html
You do not have to type the file name “index” and the file extension “.html” because by default, the browser will open any page called index in your folder. You will frequently see two different file extensions used with web pages. In the beginning, the file extension most often used was HTML. Thus the Internet started accepting .html as the primary file extension. With Microsoft products, it is common to use 3 digit file extensions. For example, a Word document has a .doc extension. A text document has a .txt extension. When Microsoft started saving as html, they started using the .htm extension. The browsers will open either type. Be careful about this, it is best to be consistent with your file extension choice. If you type my complete address and call my index file index.htm, the file will not open because the name of the file is index.html.
Well, after you have saved you file, you have a web page that looks almost exactly like the Word document you have been working on. If you close your word file, and open your web page in Internet Explorer, it will look like this.
Now, let’s make a few pages to link to.