In this lab you will deal with style issues and work with cascading style sheets (CSS).
Cascading style sheets (CSS) is a way to save formatting in one file and use it others. With CSS you can change the way that existing formats are displayed. You can even create you own formats.
Since word processors do not really have anything like CSS, you may find it useful to read over Chapter 8 of our textbook.
Open up your home page index.htm. Make sure you have a
Heading 1 somewhere on your page. The Heading 1 format is
accomplished with the H1 HTML tag.
Using the instructions starting on page 212 of our text book, change the formating of the H1 HTML tag.
Create this format change in an external CSS file named homepages.css. Note: you will have to add the .css to the end of this file name. This is standard practice, and
it's unfortunate that Dreamweaver doesn't do this automatically.
The exact change you make to the H1 tag is up to you, but it should be significantly different than before.
Note how your Heading 1 format changes on your page.
Save and publish this home page as index.htm and indexlab3.htm.
Open your schedule page schedule.htm. Using the instructions
on page 215 of our textbook, attach the homepages.css CSS external
file to your schedule page.
Now, as you add, change, or remove the styles in homepages.css,
these additions, changes, and removals will be seen in both of these
files without doing anything special.
Custom styles allow you to create your own named formats and apply them anywhere in your document. It frees you from changing just headings and other official HTML tags. For example, on your schedule page, you undoubtedly have several entries for the courses that you are taking. There is no HTML tag to distinguish these courses from the hours you work at a job or the time doing other things. Yet, it would be best to format the courses similarly to make the schedule easier to read. Rather than set the style of each course separately, you can create a custom style and essentially format them all once.
Follow the instructions starting on page 212 again, this time to
create a custom style. Call the custom style .course; set
the style to anything distinctive; add this style to the homepages.css external file.
Pages 216 and following describe how you can apply custom styles.
Use the .course custom style in your schedule.htm
file to format each of the courses.
Make some more CSS style changes to make your Web pages look better
(or at least different). Add all of the changes in the homepages.css CSS external file.
Publish your home pages again. Your homepages.css file
should be published automatically. Be sure to check the page of
links to make sure everything published correctly.
Creating good Web pages is partially an art, but there are some good rules to follow. Start to read over the style issues on this local style page.
There is nothing you have to physically turn in for this lab. If you can get to your pages from The Lab #3 Page of Links, then you're all set. If the grader cannot access your pages from the page of links, you will receive no credit for this assignment. You do not have to include your name, course number (i.e., "110"), section letter, or even "Lab #3" on these pages since it's all very explicit from the page of links. This lab is worth 10 points. See the schedule page for the due date.
Continue working on the email project. Continue thinking about the Web project.
Schedule page --- Project #3 --- email project --- Web project
Last modified: Thu Feb 21 15:08:07 EST 2002
This document was
prepared with Latte, the best
text processing language for the Web.
Every attempt has
been made to validate the HTML on this page.
© Copyright 2001--2002, Jeremy D. Frens & Calvin College. Permission to
copy by any means is granted as long as this copyright is
preserved.