4.5: A few garnishments

Here are a few interesting hacks that you might use with your web pages.

Wrapped text around a picture with a caption

To wrap text around a picture, first get an idea of what you want the final result to look like. Let’s set up a div specification that will float an image to the right 10 pixels of space on the top, bottom and left sides. Let’s make a special size for the caption, add a border on the bottom and some spacing:

See how it looks with the image to the right.

IMPORTANT: The beginning div tag has a piece of local style that sets the width equal to the width of the picture. When you use a float property, you must specify a width. We do it right in the tag to match the image.

For an image to the left, create a new specification, change the name, change to float:left; and change the margin settings:

margin:10px 10px 10px 0;
border-bottom:1px solid #000;
#imgleft p

The online résumé

Part of your assignment for the midterm is to post your résumé online as part of your personal website. To do this, you will create a special stylesheet just for this purpose.

A résumé requires a different approach from the regular web page. You want to set it up so that a potential employer can print it out. The style specifications, then, will set up a narrower page with plain but attractive typography.

Converting Microsoft Word files to html

Step 1:

Step 2:

Step 3:




  • What things go in the page header? Explain the main functions of the header.
  • What things go in the page footer? Explain the main function of the footer.
  • What are some of the main concerns about how we arrange content in the main content area of the page?
  • Explain the CSS box model. What things do we add up to come up with a true width for a CSS box?
  • What is architecture? What are the three characteristics of good page architecture?
  • What are some ways we can achieve consistency and contrast in page design?
  • Explain the Gestalt rule of proximity. How can this rule guide us in designing our web pages?
  • What is a grid?
  • Building and using a page template is a great example of Creative Laziness™. Can you explain why?
  • How are the selector, property and value arranged in a CSS specification?