-
Set up the content of the web page.
This assignment requires your term paper to have the heading and paragraph structure specified in the web page for Assignment 3. If your index.xhtml does not already have that structure, get it set up correctly before proceeding.
-
Set up a stylesheet for this assignment.
The stylesheet for this assignment is to be named assignment_04.css. You may use the stylesheet for Assignment 3 as a starting point, if you wish: in Dreamweaver, duplicate assignment_03.css by selecting it, and typing Ctrl-D. The new file will be named “Copy of assignment_03.css,” and you can rename it by clicking on it twice (slowly) and typing in the new name.
Feel free to change the various colors that were used in Assignment 3 if you would like to experiment. Also, you no longer have to use the CSS rules for spans and the div that you used for Assignment 3. But it is okay to leave them in.
Change the link to the stylesheet to point to assignment_04.css, and verify that the page still passes both validation tests and that all the CSS rules defined so far still work.
-
Add two pictures to your term paper.
Download the two pictures I am supplying into your site’s images directory: big-pipe.jpg and big-leaf.jpg.
These are big pictures in two ways: both have large intrinsic sizes (2-3 thousand pixels on each edge), and neither has been very heavily compressed. If you left-click on these images (instead of right-clicking so you can download them), you should see that it takes an appreciable amount of time for them to appear in your browser window the first time you do so. (After that, the browser keeps them in its “cache” on your computer’s hard drive and avoids downoading them from the server again if possible.
Your first job is to reduce the size of the picture files without impacting their appearances too much. For this, you will have to open the pictures in Photoshop, which is installed on all the computers in the lab. (From the Start menu, go to .
Once you have a picture open, use the menu item to open up the big control panel demonstrated in class on October 13. First reduce the intrinsic dimensions of the picture using the image size subpanel in the lower right part of the big panel. Make the larger dimension 450 pixels, making sure the aspect ratio remains unchanged (just don’t click on the chain icon linking the height and width). I picked the number 450 as the maximum size at which the pictures will be displayed on a web page. If I knew they would be made larger (by the browser when the CSS width or height property is greater than that), the value would have to be larger to avoid the image degradation that happens when pictures are enlarged to a fill a rectangle with more pixels than there are in the image file. These are fanatastic pictures (I took them myself), but even I know they don’t warrant more than 450 pixels on a side for display in a term paper.
You can experiment with different image file formats (GIF, PNG-8, or PNG-24) in the three “experiment” panels of the big control panel, but these are photographs, and JPEG will undoubtedly give the best trade-off between image file size and picture quality. Try different compression settings in the three picture panels by clicking on each one and adjusting the JPEG quality in the upper right side of the panel. Use the hand icon you get when you mouse over one of the images to drag an “interesting” part of the picture into view (like the top of the pipe) so you can see the effect of the compression setting on the level of detail in the image. You may be surprised (or not) at how much you can compress a JPEG image and still retain satisfactory image quality for web pictures. I found that I could not see a difference between quality levels between 0 and 100 for these images at 100% magnification. At higher magnifications, the differences show up, but that doesn't matter if the pictures will never be magnified on your web page.
Save both pictures in your site’s imageswith new names (so you do not overwrite the precious originals). Chage big-pipe.jpg to pipe.jpg, for example.
Now insert two div elements to hold the pictures: one between the second h2 and the paragraph following it, and the other between the third h2 and the paragraph following it. Put an img tag inside each div, one for the pipe and one for the leaf. The alt value should be something meaningful (not empty) for these two images. The reason for putting the images inside divs is to avoid an XHTML validation error: you cannot put an inline element between two block elements.
id
It should look weird, but you should be able to view your web page now and see both pictures; there should be no XHTML and/or CSS validation errors or warnings.
-
Use CSS to float the pictures left and right.
Add a rule to assignment_04.css to float one picture to the left and the other one to the right. Actually, the images are inside divs, so the way to do this is to float the divs, and their contents will float with them. Since you put ids on the divs in the previous step, the code will look something like this:
#pipe-picture { float:right; }
Load the page and observe that the pictures have indeed floated out of the normal flow of the web page and that the headings and paragraphs that follow them in your code now flow around them.
The intrinsic dimensions for the pictures probably looks too large for the web page. But even if you like their sizes, make the pictures smaller. Without adding any more attributes to the XHTML, use CSS to adjust the pipe picture so its height is 200 pixels and the leaf picture so its width is 200 pixels. Reload the page and verify that the pictures get smaller. Be sure your XHTML and CSS still validate perfectly.
-
Adjust margins, borders, and padding to improve the appearance of the web page.
This part of the assignment is somewhat flexible. You must do all of the following adjustments, but you can use different dimensions to create a more pleasing effect. And you may add other adjustments if you would like to experiment.
-
Create some space around the text in the paragraphs.
In general, you can do this step by changing either the margins or the padding for all the paragraphs, but we will use margins for two reasons: one is that the goal here is to move the paragraphs away from the boxes next to them (headings and other paragraphs), and the other is that we will be able to see the effect of adding padding in the next step.
Add a 0.5em margin to the top and bottom of each paragraph, and a 2em margin on their left and right sides. Use Firebug to verify that the total space between paragraphs is just 0.5em because of collapsing margins. (Look at the yellow bars around the paragraphs.)
-
Put padding around the content area of the first paragraph after each h2.
You already have a rule that gives a yellow background on the first paragraph following each level-2 heading that you put in for Assignment 3. Now add half an em of padding to those paragraphs, and observe that the space between the text and the edges of the colored background. (Because of the divs we added for this assignment, only one paragraph, the first one of the Introduction, would still be affected by this rule.)
-
“Pretty up” the pictures.
Use margins to create space between the pictures and the text that wraps around them, as well as between the pictures and the sides of the web browser “viewport.” Add an em of padding to the divs that hold the pictures, and make their backgrounds white to create a “border” for the pictures, and add a 5 pixel border to the divs, creating a “frame” for the pictures.
Adjust the size of one of the pictures (or both) and observe that the sizes of the floated divs automatically adjust to the sizes of their contents.
-
Limit the extent of the floated divs.
Set up a rule for all the h3 elements so they cancel any floats in effect. (clear:both) Observe that the level-3 headings always appear below the bottoms of the pictures instead of wrapping around them.
-
Here is a screen shot showing approximately what your web page should look like:
