CSS Selectors and Forms due Thu 14 Sep 13:20

In this assignment you will:
\item Use only ...
...em Continue practice creating fixed-width layouts.

Preparation for Lab Day

In preparation for lab day, do these actions:
  1. In your webspace on csci.hsutx.edu create a directory named hw03 and work in it.
  2. Download/copy http://josephus.hsutx.edu/classes/w1/source/poemlayout.html into your hw03 web space. (NOTE: To do this from the command-line use the wget command as we did in the first assignment).

  3. Take a look at the basic design we will be moving towards: http://josephus.hsutx.edu/classes/w1/source/poemlayout.jpg. NOTE: Don't jump into trying to create the design directly. Instead follow the instructions below and use that diagram as a guide to fill in the blanks.
  4. In hw03 create a CSS document named poemlayout.css and it it put a command that will assign properties to the body to give it a fixed width of 800px and to center it on the page.
  5. Now modify poemlayout.html to include a link tag in the head which will utilize the CSS document you just created. Don't move on to the next steps until the code in the CSS document is affecting the HTML document.
  6. Add CSS commands to give background colors to each of the block-level elements on the page (header, nav, section, section, aside, and footer). They should each have slightly different color and be light enough for black text to be easily legible on them. They should also have a different background color than the body. That is, we want to be able to easily visually identify where each block begins and ends.

On Lab Day

  1. Begin by showing your prep work to the instructor.

  2. Briefly take a look at the basic design we will be moving towards: http://josephus.hsutx.edu/classes/w1/source/poemlayout.jpg. REMEMBER: Follow the instructions first, and use the diagram to fill in gaps.

  3. Give proper widths to nav, the two sections, and aside to get them oriented approximately like the picture. You may find it helpful to put the two sections and the aside inside a single div/block and to give that block an id of ``content''. All CSS commands should be placed in the poemlayout.css document. Do not use any inline CSS commands in this exercise.

  4. Now add margins to get each div to line up nicely. When you are finished with this step your page should like like this (but with your own color choices):


    NOTE: We are focusing on getting the basic layout in place before we are concerning ourselves with the content!

  5. Focus on the header layout for a moment. You want to divide it into three parts having widths specified in the original drawing. Put simple text in each div and give each div a slightly different color so you can see where each begins and ends.

  6. Have the instructor look at your work so far and give feedback.

  7. Now we are ready to begin adding content. Start with the section containing the text ``Amazing form!'' and replace it with a form that will allow the page visitor to send you a poem. The form should allow them enter their name in a text box and select the type of poem from a drop-down list having at least 5 choices. Then, of course, they should be given a text area in which they can put their poem along with a button which will cause a mailto action of the form contents. The form elements should be arranged nicely. Consider using a table to align elements. Another idea is to allow the submit button to have a width matching the text area.

  8. Show your work to the instructor. If you finish early you can start work on the homework assignment which is a continuation of this project.

Quick Links