1. week 1
  2. week 2
  3. week 3
  4. week 4
  5. week 5
  6. week 6
  7. week 7
  8. week 8
  9. week 9
  10. week 10
  11. week 11
  12. week 12
  13. week 13

Friday, November 06, 2009

Fall 2009

week 8: 11/05, Wed 6:00 - 9:00

  1. First, type the basic structure of all web pages and save into your primary folder. Since this is the 8th week fo class, I'd suggest naming your folder wk8 and your file, as always, index.html:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.   <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <head>
    4.       <title>... </title>
    5.     </head>
    6.     <body> ... </body>
    7.   </html>



  2. Now let's add some content to the body, some headings, subheadings, and paragraphs to fill things out:

    1.     <body>
    2.       <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
    3.       <h2>division 1</h2>
    4.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus velit a justo blandit vehicula. Nullam fermentum risus non libero euismod condimentum. Suspendisse dui tellus, tincidunt non pellentesque at, porttitor sed felis. Duis dui enim, molestie non fringilla non, viverra vitae urna. Morbi imperdiet volutpat euismod. Sed sem lorem, suscipit non pellentesque in, sagittis at felis. Aenean erat turpis, porta eu ullamcorper eget, consectetur ut urna. Nunc hendrerit, ante a gravida vestibulum, dui mauris volutpat arcu, et dictum nulla orci non mauris. Sed a est mi, at feugiat tortor. Proin aliquam nibh at odio vestibulum commodo. Nulla adipiscing fermentum vestibulum. Suspendisse potenti. Aenean suscipit erat dapibus eros tempor eget tincidunt tortor aliquam. </p>
    5.       <p>Nulla facilisi. Donec bibendum, neque sit amet gravida pharetra, nunc arcu euismod nisl, id porttitor nulla tellus ac arcu. Phasellus sapien odio, eleifend non hendrerit non, consequat sit amet risus. Phasellus aliquam laoreet mauris, eget accumsan turpis commodo et. Donec mattis tortor lacus. Etiam aliquet ullamcorper mauris, sit amet viverra sem semper nec. Nullam arcu nunc, dictum sit amet sollicitudin id, fermentum quis nisl. Vivamus elementum ornare dolor eu rutrum. Vestibulum non venenatis odio. Ut tellus risus, pretium ut porta a, pharetra tempus velit. Aenean nec adipiscing arcu. Integer mi nunc, gravida eu porta quis, accumsan ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dictum lacus quis magna dignissim vehicula. Maecenas elementum luctus suscipit. Aliquam facilisis lobortis odio, eget tempus nulla rhoncus eu. Morbi tellus nulla, cursus nec viverra id, venenatis sit amet ipsum. Phasellus mattis aliquet tincidunt. </p>
    6.       <p>Vestibulum et neque et elit rhoncus lobortis. Fusce auctor neque a purus imperdiet mattis. Donec ac felis a arcu tempus malesuada. Integer ultrices congue nisl, eget rhoncus dui accumsan eget. Aliquam quis ligula sit amet eros malesuada facilisis. Praesent at auctor sapien. Sed fermentum dolor quis nibh mattis tincidunt. Curabitur eu urna vel turpis pulvinar molestie. Etiam egestas, lacus non tincidunt egestas, odio mauris suscipit libero, vitae pharetra lectus nisl eu lorem. Suspendisse potenti. Vivamus consequat, arcu nec elementum condimentum, dui diam ornare orci, sit amet bibendum sapien mi quis leo. Integer id gravida massa. Aliquam non urna ut orci viverra imperdiet quis vel arcu. Donec sagittis molestie neque. Sed fringilla felis sed lorem laoreet ultricies condimentum mauris consequat. Sed fermentum fringilla enim ut blandit. Aenean quam dui, consectetur et adipiscing ut, congue et dui. Etiam porta tempus tellus, nec consequat libero pretium a. Vivamus condimentum magna ut tellus porttitor feugiat. Aliquam sed purus massa. </p>
    7.       <h2>division 2</h2>
    8.       <h2>division 2</h2>
    9.       <h3>sidebar one</h3>
    10.       <p>Nullam nec mauris nec mi vulputate rhoncus id sed nulla. Donec tempus imperdiet dui in gravida. Nulla vulputate gravida sem at condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id massa erat, quis interdum elit. Donec fermentum sollicitudin dui id condimentum. Vestibulum consequat ullamcorper ornare. Suspendisse potenti. Phasellus egestas leo vel justo aliquam eu eleifend neque egestas. Nam ut tellus at risus interdum fringilla mollis eget justo. Vivamus egestas interdum ipsum sit amet blandit. Nunc viverra turpis ut turpis cursus congue rutrum dui fringilla. Phasellus venenatis rhoncus purus vitae interdum. Pellentesque et ultrices orci. Morbi placerat, felis porta sollicitudin rhoncus, urna massa hendrerit nulla, a imperdiet sem lectus id tellus. Quisque accumsan neque id felis mollis nec viverra urna faucibus. Cras sit amet ante massa, et viverra lectus. Aenean neque arcu, tempor in eleifend ut, luctus sed nibh. Maecenas felis risus, molestie quis tempor ut, ornare eu urna.</p>
    11.       <h3>sidebar heading 2</h2>
    12.       <h3>sidebar two</h3>
    13.       <p>Proin commodo mollis viverra. Pellentesque aliquet lorem egestas justo scelerisque sit amet auctor quam aliquam. Donec interdum ligula a mauris sagittis lacinia. Sed bibendum tempus faucibus. Curabitur eu lectus sed mauris cursus dapibus vitae sit amet est. Morbi massa eros, accumsan a gravida in, feugiat sit amet libero. Integer rhoncus, tortor eget vestibulum vestibulum, diam nisl auctor augue, a dignissim velit turpis sed sapien. Vivamus rhoncus massa suscipit tellus consectetur consectetur. Donec id augue ac nisl pretium pretium non et ligula. Donec sed odio aliquet libero vehicula sollicitudin quis eget mauris. Nullam nec tortor vestibulum enim condimentum scelerisque. Aliquam in aliquet risus. Nulla ornare tempor dapibus. </p>
    14.     </body>



  3. Next, we have to add <div> tag pairs to separate out the two future columns.

    1.     <body>
    2.       <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
    3.       <div>
    4.         <h2>division 1</h2>
    5.         <p>Lorem ipsum dolor sit amet. . . </p>
    6.         <p>Nulla facilisi. Donec bibendum. . . </p>
    7.         <p>Vestibulum et neque et elit rhoncus lobortis. . . </p>
    8.       </div>
    9.       <div>
    10.         <h2>division 2</h2>
    11.         <h3>sidebar one</h3>
    12.         <p>Nullam nec mauris nec mi vulputate. . . </p>
    13.         <h3>sidebar two</h3>
    14.         <p>Proin commodo mollis viverra. . . </p>
    15.       </div>
    16.     </body>



  4. Those two pairs of new tags will establish the columns of the document once we add the CSS; however, we also need to establish the limits of the entire document's content. We do this by creating a wrapper division in which we nestthe current divisions and content within another pair of <div> tags.

    1.     <body>
    2.       <div>
    3.         <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
    4.         <div>
    5.           <h2>division 1</h2>
    6.           <p>Lorem ipsum dolor sit amet. . . </p>
    7.           <p>Nulla facilisi. Donec bibendum. . . </p>
    8.           <p>Vestibulum et neque et elit rhoncus lobortis. . . </p>
    9.         </div>
    10.         <div>
    11.           <h2>division 2</h2>
    12.           <h3>sidebar one</h3>
    13.           <p>Nullam nec mauris nec mi vulputate. . . </p>
    14.           <h3>sidebar two</h3>
    15.           <p>Proin commodo mollis viverra. . . </p>
    16.         </div>
    17.       </div>
    18.     </body>



  5. Now that we have all the content in place, now that we have all of that content organized into it's appropriate block tags, and now that we have all of it together orgainzed into divisions, it is time for us to style the page with CSS. We can start by adding the familiar stuff: some styles for the body and the page in general:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.   <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <head>
    4.       <title>. . . </title>
    5.       <style type="text/css">
    6.         body        {background-color:#ffaabb;
    7.                      margin:0px;}
    8.           h1        {font-family:Arial, Helvetica, sans-serif;
    9.                      font-size:36pt;
    10.                      color:#aa0000;
    11.                      padding-left:10px;
    12.                      line-height:32pt;}
    13.           h2        {font-family:Arial, Helvetica, sans-serif;
    14.                      font-size:24pt;
    15.                      color#aa6633;
    16.                      line-height:22pt;}
    17.       </style>
    18.     </head>



  6. The next step is to add the styles for the exterior set of <div> tags, otherwise known as the wrapper. This tag and these styles will allow us to shape the content within the window in anyway we want, to compress it if we want, to expand it to fill the entire window, and even to center it all.

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.   <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <head>
    4.       <title>. . . </title>
    5.       <style type="text/css">
    6.         body        {background-color:#ffaabb;
    7.                      margin:0px;}
    8.           h1        {font-family:Arial, Helvetica, sans-serif;
    9.                      font-size:36pt;
    10.                      color:#aa0000;
    11.                      padding-left:10px;
    12.                      line-height:32pt;}
    13.           h2        {font-family:Arial, Helvetica, sans-serif;
    14.                      font-size:24pt;
    15.                      color#aa6633;
    16.                      line-height:22pt;}
    17.     #wrapper        {float:left;
    18.                      width:1100px;}
    19.       </style>
    20.     </head>



  7. Now we can add the styles for the inner <div> tags, the two columns that will make up the layout. The first division will be the wider column on the left, and the second division will be the narrower column on the right.

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.   <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <head>
    4.       <title>. . . </title>
    5.       <style type="text/css">
    6.         body        {background-color:#ffaabb;
    7.                      margin:0px;}
    8.           h1        {font-family:Arial, Helvetica, sans-serif;
    9.                      font-size:36pt;
    10.                      color:#aa0000;
    11.                      padding-left:10px;
    12.                      line-height:32pt;}
    13.           h2        {font-family:Arial, Helvetica, sans-serif;
    14.                      font-size:24pt;
    15.                      color#aa6633;
    16.                      line-height:22pt;}
    17.     #wrapper        {float:left;
    18.                      width:1100px;}
    19.        #main        {float:left;
    20.                      width:700px;
    21.                      margin-left:50px;}
    22.     #sidebar        {float:left;
    23.                      width:250px;
    24.                      padding-left:10px;}
    25.       </style>
    26.     </head>



  8. The final step in this exercise is to add the styles to the text, the <h1> tags, the <h2> tags, and the <p> tags. These tags present us with a problem, however: since we want to differentiate the styling in the two columns, we have to add different styles to the tags in one column from the same tags in the other column. We do this by specifying in our styles the particular <p> tags or the particular <h2> tags by one of IDs first as part of the selector. Recall, that the first term of a CSS style definition is always the selector; so, since we are selecting to style the <p> tag within the main ID, for instance, we must name that ID too:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.   <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <head>
    4.       <title>. . . </title>
    5.       <style type="text/css">
    6.         body        {background-color:#ffaabb;
    7.                      margin:0px;}
    8.           h1        {font-family:Arial, Helvetica, sans-serif;
    9.                      font-size:36pt;
    10.                      color:#aa0000;
    11.                      padding-left:10px;
    12.                      line-height:32pt;}
    13.           h2        {font-family:Arial, Helvetica, sans-serif;
    14.                      font-size:24pt;
    15.                      color#aa6633;
    16.                      line-height:22pt;}
    17.     #wrapper        {float:left;
    18.                      width:1100px;}
    19.        #main        {float:left;
    20.                      width:700px;
    21.                      margin-left:50px;}
    22.      #main p        {font-family:Arial, Helvetica, sans-serif;
    23.                      font-size:12pt;
    24.                      line-height:11pt;
    25.                      color:#aa3333;
    26.                      text-align:justify;}
    27.     #sidebar        {float:left;
    28.                      width:250px;
    29.                      padding-left:10px;}
    30.  #sidebar h3        {font-family:Arial, Helvetica, sans-serif;
    31.                      font-size:12pt;
    32.                      line-height:9pt;
    33.                      color:#ffcc99;
    34.                      background-color:#cc9966;
    35.                      border-color:#aa6633;
    36.                      border-style:solid;
    37.                      border-width:1px;
    38.                      padding:5px}
    39.   #sidebar p        {font-family:Arial, Helvetica, sans-serif;
    40.                      font-size:9pt;
    41.                      line-height:9pt;
    42.                      color:#990000;
    43.                      font-style:italic;}
    44.       </style>
    45.     </head>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)