Assignment #2 - Lighthouses and Layouts

Create a webpage about Lighthouses using a "layout"...

1. Create a folder on your website called "lighthouses" (no quotes).

2. Inside this folder, create another folder called "photos". (This is where your lighthouse images will go.)

3. In the "lighthouse" folder, create a webpage called "index.html" using the following layout: "three-column liquid header & footer".

Dreamweaver will put the styles inside your document.

Let's move the internal style sheet to an external one (lighthouses.css) and save it in the same folder as the html file. (This makes it possible to share the style sheet with other webpages.)

4. Put a link on your home page to your new "index.html" file -- label the link "Lighthouses". It should open a new browser window (or tab) when clicked.

5. Google for a few images of lighthouses (Oregon and California have lots!) and save them in your new "photos" folder.

You can save them on your desktop and drag them onto your page -- OR -- save them directy into the new "photos" folder using Windows Explorer.

Now let's customize the page...

6. Your page should have a main header main (e.g., "Lighthouses"). Format it using a "heading 1" (H1) tag (highlight the text and select "heading 1" from the "format" menu.

7.  Add "sections" for each lighthouse. Use an H2 ("heading 2") tag for the name of each lighthouse.
Follow this with a short description of the lighthouse and include a photo of the lighthouse. (Resize as needed using "image" properties.)

8. Create CSS rules that change the behavior of the H1 and H2 tags. Experiment with changing the fonts and size. (I think the default size for H1 is usually too large.)

9. Change some of the links in the left panel to point to other websites about lighthouses.

10. In the footer, center your name and the date you made the page.

Put this into your footer (in code view), but don't change the date. ( What happens when you save your page?)

<!-- #BeginDate format:Am1 -->February 1, 2011<!-- #EndDate -->


11. Customize the page! (What do you want to put in the right panel?)

• Try changing background colors, fonts, etc. Have fun!!
  
  
• How do you change the default font (size, color) for the entire page?
  
  
• Do you have any styles from last time that you like? Try linking in the stylesheet and use them. (You can have more than one stylesheet linked to your page.)

When you're done, let me know and I'll check it out.

Before you go, don't forget to push all of your files to your website...