CS-081 Assignment 2

For this assignment you are to set up your web site for the course in the lab and to create a text-only web page, using CSS to manage the page’s appearance.

1. Check your account setup in the lab.

   If you have not already done so, follow the instructions in Assignment 1 for logging into your account in the lab.

   Each computer in the lab has a file named template.xhtml in the web server’s document root, C:\htdocs. This file contains boilerplate code for properly-structured web pages, including the DOCTYPE for XHTML 1.1 and basic tags for the contents of a web page that has three sections (div tags): a “header”, a “content” section, and a “footer.” By default the header should hold an h1 tag for the page’s title; the footer is a place to put the “little stuff” that often goes at the bottom of a page, like copyright information (we use it for links to the W3C validators); and the content section is where the actual content of the page goes. There are no strict rules about these three sections, but they can provide a convenient starting point for setting up your pages’ structure.

   Copy template.xhtml to the My Website folder that should already be present under the My Documents directory for your account. Rename it to index.xhtml. The Apache servers in the lab are configured to use your My Website directory as a secondary document root that can be accessed when you are logged into your account using “tilde notation.” For example, if your account name is astudent81, and you are logged the computer named ginkgo, the URL http://ginkgo.cs.qc.edu/~astudent81 (or http://ginkgo.cs.qc.edu/~astudent81/) would refer to the contents of your My Website directory.

   Verify that the URLs http://ginkgo.cs.qc.edu/template.xhtml and http://ginkgo.cs.qc.edu/~astudent81 both show the same thing when you open them in a web browser (assuming your account name is astudent81 and you are logged into ginkgo).

2. Set up your web site using Dreamweaver.

   Open Dreamweaver (there should be an icon on your desktop: a green circle with a white 'd' in the middle), and select New Site from the Site menu. This will bring up a big panel with tabs named “Basic” and “Advanced;” select the Advanced tab, and enter a name for your web site in the “Site name:” text box. (You can use any name you like for your site, but it should be something meaningful, such as “My CS-081 Web Site.”) Browse to your My Website directory to fill in the “Local root folder:” box. To fill in the “Default images folder:” text box, browse to My Website again, create a new directory named images there, and select it. Be sure to select the “Links relative to document” and “Case-sensitive links” options. The other settings on this pane are not important: you can clear the “HTTP address:” field and leave the Cache option checked.

   Go to the “Remote Info” category and set set the Access value to “Local/Network”. Make the “Remote folder:” be C:\htdocs\. Be sure the “Maintain synchronization” option is checked, and that the other two options are not checked.

   Once you click your way out of the site setup wizard, the files panel on the right should show your site using green folders. You should now be able to click on your index.xhtml file to open it up in Dreamweaver’s editing pane. In the top left corner of this pane you will see three buttons, labelled “Code,” “Split,” and “Design.” Click on the Code button: the Design and Split views are not reliable enough to use in this course.

   There is a box where you can type in the web page’s title next to the Design button. Type in a meaningful title for your web site’s home page. For maximum browser compatibility, I suggest you don’t use any punctuation symbols in the title. When you type Enter, you will see that the title tag in the document updates with the the title you entered.

   Now change the contents of the h1 element in the template to match the web page’s title. (The title appears in the browser’s title bar; the heading appears as part of the page’s content in the web page itself.) Normally, you should make the top-level heading match the page title, but because the heading will appear as part of the web page, you might want to add some punctuation symbols, such as an apostrophe. Note: if you do put an apostrophe in your page heading (such as “A Student’s Home Page,” you have to use an HTML character entity to get it to display reliably. The character entity for an apostrophe is ’ (which stands for “right single quote.”) We went over character entities in class; check your notes if you are not clear on this. The topic is not covered in the textbook, but there are web sites that can help, such as this SitePoint article. That article suggests not using character entities because they are a bother to type, but I recommend that you do use them for two reasons: (1) With Dreamweaver’s code assistance they are actually easy to remember and easy to type, and (2) character entities are never wrong, but character repertoirs and encodings can easily go wrong. As long as you use a good programmer’s editor (such as the code editor in Dreamweaver or Notepad++) your web pages should show the characters you type correctly. But if you want your text to look good by using typographically correct quotation symbols, for example, use character entities.

   Now you are ready to test your site setup. Be sure to save your web page to disk (type Control-S), open Firefox, and browse to http://<computer>.cs.qc.edu/~<accountname>/ (use the correct computer name and account name), and you should see your web page with your new title in the browser’s title bar and your new heading in the browser window. If not, fix the problem before proceeding.

   Next, browse to http://<computer>.cs.qc.edu/, which is the document root of your testing server. At this point you should see either a directory listing of C:\htdocs or somebody else’s web page because you have not “published” your web page to the testing server yet. To publish your page, right-click on it in the Files panel, and select the “Put” option. Alternatively, you can click on the blue Put button in the Files panel’s tool bar. Reload the browser window (Control-R), and your web page should now show up.

3. Add dummy content to your web page.

   Substitute the following for the contents of the “content” div of your page: Get ten paragraphs of dummy text from Lipsum.com and paste them below the h2 heading that is already there. Surround each paragraph with <p> and </p> tags so they don’t all run together when displayed in a browser window. Go back to Lipsom.com and get four sentences of dummy text. Use the first sentence as the content of the existing level-2 heading, insert the second sentence as a second level-2 heading between the third and fouth paragraphs, and insert the other two as level-3 headings between any two pairs of paragraphs that follow the second level-2 heading. Your document structure should end up looking something like this:

   <html> <head> <title> … </title> </head> <body> <div id="heading"> <h1> … </h1> </div> <div id="content"> <h2> … </h2> <p> … </p> <p> … </p> <p> … </p> <h2> … </h2> <p> … </p> <h3> … </h3> <p> … </p> <p> … </p> <p> … </p> <h3> … </h3> <p> … </p> <p> … </p> <p> … </p> </div> <div id="footer"> … </div> </body> </html>

   The structure above uses indentation to show the containment relationship among the XHTML tags. The html tag contains the head and the body, the head contains the title, etc. But notice that the logical structure of the text is not the same as the structure of the XHTML nodes: the paragraphs are not contained by the headings, and the third-level headings are not contained inside the second-level headings in any way. A new web standard, HTML 5, is being considered that would add tags that can be used to give a more meaningful outline structure to documents.

4. Add a style sheet to your web page.

   The template.xhtml file has a link in the head to a stylesheet. The stylesheet might be named either css/style-all.css or just css/all.css depending on which computer you happen to get it from. (I like the shorter form a little better, but the name doesn’t really matter much.) Use Dreamweaver’s File->New menu item (Control-N) to create a new CSS file (select it from the choices under “Blank Page”), and type the following rule into it:

   html, body { margin: 0; padding: 0; background-color: red; color: white; }

   When you save the file, you will need to create a css directory under My WebSite, and save your stylesheet there. Try your web page using the tilde URL, publish your site to the testing server, and try it there. Make sure the page comes up in all its gaudy glory using both URLs!

5. Look at an example of a web page with alternate style sheets.

   My home page (http://babbage.cs.qc.edu) now has three alternate style sheets attached to it. Browse to it using Firefox, and use the View->Page Style menu to try the three alternate style sheets. As their names indicate (“Sizes in percentages,” “Sizes in ems,” and “Sizes in pixels”), each one uses a different unit of measure for the sizes of the text, picture, and boxes. Select each sheet and observe what happens when you change the size of the text (use the Control_+ and Control_- keys) and/or the size and shape of your browser window.

   Unfortunately, Safari and Internet Explorer do not let you use alternate style sheets, but Opera does. Start Opera (the red 'O' icon) and use it see the effects of the alternate sheets using that browser. Changing the text size in Opera is awkward: the keyboard shortcuts make the size jump to plus or minus 100% (I’m not sure what they mean by minus 100%!), and you have to use the View->Zoom menu to change things in smaller increments.

6. Create three style sheets for your home page and test them.

   Using the information on pages 48-60 of the textbook as a guide, create three different appearances for your web page: a “standard” appearance, using rules in all.css, and two alternates. You can look at the source code for my home page to see how to set up the link tags for the stylesheets. You are free to use whatever background-color and color values for the html, body, and div elements of the three sheets that you want, but each stylesheet must use a different color scheme. Then apply different values for the following properties for the h1, h2, h3, and p elements:

   • font-family
   • font-size
   • font-weight
   • text-align
   • line-height
   • color
   • background-color

   Try to make the three views of the page look as different from each other as possible while making each view look internally consistent. For example, you might use sans-serif fonts for the headings and serif for the paragraphs in one sheet, and reverse that arrangement in another one.

Before you submit the assignment, be sure you perform the following four tests:

1. Publish your page and all the style sheets to the server’s document root

   Verify that everything looks right.

2. Perform a link check on your site to make sure there are no mistakes due to capitalization problems.

   (Remember, you checked the "case-sensitive link checking" option when setting up your site.) Right click on the site folder in Dreamweaver, and select “check links”. If there are any problems, they will show up in a separate window. Fix them and do another check until there are no problems left.

3. Validate the XHTML.

   You should have been looking at the TIDY and Firebug icons in the Firefox status bar as you were testing your code to be sure they both are green circles with white checkmarks inside them. Now, click on the XHTML link in the footer of your web page to get a full W3C validation check. Fix any warnings (or errors) that the validator reports.

4. Validate the CSS.

   Once the XTML validates successfully, check the CSS using the other link in the footer of your page. Again, fix any warnings or errors that the validator reports.

A final check before you submit your assigment is to view the page using Internet Explorer instead of Firefox to make sure there are no problems when using that browser. You should also check the page using Opera and Safari. You may ignore minor differences, but correct any big discrepancies.

Once you have completely tested and fixed your web page, send me an email message telling me it is ready for me to review. I will get a copy of your entire site from the copy of your profile that is saved on maple, so there is no need to tell me which computer you were working on. Just tell me that the site is ready for me to look at.

Send your email to me by midnight of the due date. My email address is: vickery at babbage.cs.qc.edu.

You must use exactly this Subject line for your email to be sure I actually receive it: CS-081 Assignment 2. (Include the "CS-081" part in the subject line of all messages you send to me this semester.)

If you do not receive an “OK, I’ll check it out!” reply from me within a day or two of submitting the assignment, it means I did not receive it. But I will be sending that acknowledgement manually, so don’t resubmit the assignment until I have had a chance to reply to the first one.