Page 3: Page Content

 

Now for the main event!

In this section, we'll add the most common webpage elements to our page.

 

1. Background Color: First, let's get rid of this blinding white background. The top half of your screen is the code view. You can basically ignore this for now. In fact, let's click the Design button near the top of the page. That will make it so you can only see your new page. Right-click the empty page and click Page Properties.

Left-click the icon next to Background color. Choose a (light) color from the palette. If you choose a dark color, and put black text on top of it, the text will be increasingly difficult to read. Click OK.

 

2. Page Header: Every page needs a header, so we know what we're (supposed to be) looking at. Type in the page header - something like "Michael's HomePage". Next, click the center icon at the bottom of the page, to center the text. Finally, click the drop-down next to Format, and choose Heading 2.

 

3. Hyperlinks: One of the most commonly used features of webpages is their ability to directly link to other pages. Let's make 3 links for now to your most commonly used pages. Hit Enter a few times to move the cursor down from the header. Click the left align button to move the cursor back to the left side of the screen.

Type in a few websites, one on each line. I'll type in WOU, Google and Wikipedia.

Now, for each website, select the text and type the URL for that website into the Link box at the bottom of this page. (http://www.google.com, etc...)

 

4. Images: Color and text is nice, but often pictures are the things that draw us to websites. Let's add a picture to our website. Open a browser, and let's go to http://images.google.com

Do a search for something, click the link and find the picture on that page. Right-click the picture and click Save-As. Again, choose "public_html .... P:" and save the image with a name you can remember. Now to add this image to our page, click the Image button and choose the picture from your P Drive. Feel free to resize the picture once it's on your webpage. Please note: making images smaller will often make them fuzzy or hard to view.

 

5. Tables, fonts and colors (oh my!): Often you will end up wanting to organize information on a webpage, and you want corresponding information to be aligned. We do that with tables. Let's make a mini-directory listing for each of us.

Click the Table icon at the top of the screen , and choose 3 columns and 3 rows. Click OK.

Enter a name/department into column1, a phone number into column2, and an email address into column3. You'll probably need to stretch the table out, so it is wider. Mouse-over the side of the table and stretch it out to make additional room.

Select each name/department in column1 and click the Bold button at the bottom of the page. This is one example of a way to emphasize certain text on a webpage. You can change the text size, font and color of text all over each page. Let's also change the font of the names/departments by selecting a different font from the Font drop-down at the bottom of the page.

Select each telephone number in column2 and click the color icon at the bottom of the page. Choose a dark color for the phone numbers and do this for all numbers in column2.

Select each email address and type the following into the Link box at the bottom of the page:

mailto: ellism@wou.edu

, replacing "ellism@wou.edu" with the email address you typed onto the webpage.

 

 

<< Page 2: Dreamweaver --- Page 4: Homepages >>