Northlite Designs

Getting started with GoLive CS

| Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Home
Photos
Classes I Teach
Tutorials
Reviews
Good Thunder
Terry Pratchett
About Me
Cards & Prints
SabreQuill Editing
Eclectic Academy
LVS Online
Contact Me

pixelparity.org

 Member of National Association of Photoshop Professionals

 

Constructing lesson pages

 

Now that your index page is complete, open lesson1.htm. To open this file, double click on it in the Site Window. You can add a headline, comments about the work you did, and images to show your work.

For simplicity's sake I have already saved my lesson 1 images. I have also imported the images to the images folder as we learned earlier.

Using what you have learned so far:

  1. Set a title for lesson1.html in the area just under the tabs in the document window.
  2. Make a headline for the page
  3. If you wish, make a heading image.
  4. Insert your homework images, and any content you wish.
  5. Add a horizontal line to divide the content from the contact info, logos and copyright info.

 

You can see my lesson 1 page here. It will open in a new browser window.

  

Setting page properties

 

Everyone has their own personalities. Web pages can have their own personalities too. Click the Properties button at the top the document to open the Page Properties.

 

page properties

 

In the page properties box we can set text and link colors as well as the background image or a background color for pages.

 

Page properties

 

 

Text colors

  

Set text colors by clicking the color chip to open the color picker of your choice.

Text color: This is the default color of the text. If nothing is selected here, black will be used.

Link color: All links will be this color to distinguish them as links.

Active link color is the color links turn as they are being loaded. With DSL and cable, many people never see active link colors but you may set this if you like.

Visited link color is the color the text link will turn after it has been visited. On a page with a lot of links, this is a helpful way to keep track of where you have already been.

 

Setting your page background

 

 Pages can have a tiled image background, or a solid color background. We will look briefly at how to add both.

  

Set a background color

 

First, set a background color using the color chips.

 

choose background color

 

 

Add a background image

 

Add a background image if desired. Import the background tile to the images folder. Click the browse button and choose the image you want for a background. Make sure it tiles (repeats seamlessly) and that it does not clash with or cover up your text and link colors. Always consider legibility!

 

choose background image

 

Tip! Always set a background color. On your screen you may be seeing a white page and black text without setting the background color to white. But if you do not have a background page color set, the browser will use the user's default color. That could be something that clashes with or even hides your text. If they have their browser default black...your black text will never be seen. Even if you use a background image, set a background color. It's another one of those good habits.

 

Margins

  

Setting a margin will keep the text and images away from the edge of the page. I used 25 for both.

Width is the pixel value the text and images (not the background, but inserted images) will stay away from the left and right edges of the page.

Height is the pixel value the text and images will stay away from the top and the bottom of the page.

 

margins

 

margins

 

Preview your page in at least one browser and see how you have done so far! 

 

Click here to see my finished page. It will open in a new browser window. As you complete your homework assignments each week, complete the corresponding week's lesson page and upload it as we learned in this tutorial.

This is a very simple page with no frills. While it may not win any design prizes, it is functional, and will display your homework.

It may also whet your appetite to see what else Golive can do. The answer to that is the sky's the limit. The more you learn, the more you will be able to stretch what you have learned here to make sensational pages. When you are ready to spread your wings, CSS is the next thing I encourage you to discover! It makes updating a single page or a thousand as simple as editing and saving one file. Now let's upload your first web page!

 

Go to the next page to see how to upload the page.

Index 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Links
GoLive for Dreamweaver Users: Making the Transition


Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Northlite Designs