1. Create a "home page" and name it index.html. Save it in your "main" website folder -- this is known as the "web root" folder.
2. Add a header to the page, centered, that says something like "Welcome to <your name here>'s Website".
Style the page -- set a "default" font for the page, try changing the background color, etc.
3. Create an "photos" folder (it goes in your "web root" folder).
4. Download these photos, unzip them, and copy the files to the "photos" folder. (You can either drag them into the "photos" folder in DW or simply copy them to the local website folder. Remember, it's stored in the "My Documents" folder under the name of your site.)
5. Inside the "photos" folder, create an index.html file -- this is going to be your "photos" page.
Did you know that every folder can possibly have an index.html? If you browse to the "images" folder, what happens?
6. On your "photos" page, create a style for a "header".
The header should be centered. (Specify a font, color, and size for your new style. How can you center the text using CSS?)
Enter a paragraph of text on your page. (It can even be Latin text from http://lipsum.com/).
7. Create a table of the thumbnails (they have _small in the filename).
a) Add links to the thumbnails so that when you click on them, the fullsize version is launched in a new browser window.
b) Center the table on the page. (Hint: set margins to "auto".)
c) Experiment with styling your table using "collapsed" borders. (example)
8. Add captions to the thumbs. Create a style called "captions" and apply it to the captions.
9. Create a styles.css file (this is a stylesheet file) in the "root" folder.
Move the "common" styles you wish to share between pages on your site to this "external" stylesheet. (We'll be adding more to it throughout the term.)
10. Add a link on your homepage to your "photos" page. Attach the sheet to your homepage (index.html) and use some of the styles (e.g., the header).
As you plan your website, it is useful to share styles for "common" elements between pages. When you decide to re-style your site in the future, all you have to do is change/update the stylesheet.
11. Create a "footer" style and use it to center your name and date (use the one from the "insert" menu) at the bottom of your page.
I'll visit during class to check on your progress and to check off your assignment.
Assignment #1