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

Sunday, July 04, 2010

Summer 2010 week 8:
—7/01/10: Wednesdays 6:00 - 9:00

  1. TOPICS:
    1. Introduce: Liquid Layout I:
      1. LINK   Basic Structure
      2. LINK   Adding Content
      3. LINK    Basic Divisions
      4. LINK   Wrapper Division
      5. LINK   Primary CSS
      6. LINK   Wrapper ID
      7. LINK   Column IDs
      8. LINK   Secondary CSS
  2. HOMEWORK I—Final Project, Part I:

    Starting this week, the homework for each class is part of the final project. Each part will be do one week from the time that it was assigned. This means that the assignment for this week will be due in the next class. Each week I will assign a new part to the website design. If you produce these assignments on time each week, you will have accumulated a small website and you will receive a decent homework grade.

    The site that we are going to produce is for an Art Gallery named Alpha Gallery. You should use dummy text somewhere on the page for a block of text. Remember, a good site for this is lipsum.com. You should use images, but keep in mind that the images that you use for this mockup will NOT be the ones you will use in the final. These are just placeholders until you get the real images next week.



    1. Step 1: Open up your 2-D design in PhotoShop or Illustrator.



      2. Photoshop
    2. Step 2a: If you open it in PhotoShop, go to the IMAGE Menu and select IMAGE SIZE.
    3. Step 3a: At the bottom of the little window that pops up, UNCHECK the option that says CONSTRAIN PROPORTIONS.
    4. Step 4a: Next, at the top, change the WIDTH & HEIGHT to 1000px X 700px. This is going to stretch out your image horizontally.
    5. Step 5a: Save this new image with a DIFFERENT name so that you don't save it over your original 2-D design.

      6. Illustrator
    6. Step 1b: If you open it up on Illustrator, unlock all your layers in the LAYERS PANEL.
    7. Step 2b: Next, COPY everything (ctrl or cmd-C).
    8. Step 3b: Now, create a new document, and, when deciding the layout in the beginning, make certain it has a WIDTH of 1000px, and a HEIGHT of 700px.
    9. Step 4b: Once the window opens up, PASTE everything (ctrl or cmd-V).
    10. Step 5b: Once again, select everything and then stretch everything to fit the new rectangular format.



      11. Photoshop & Illustrator
    11. Step 6: Now that everything has been stretched to the right size, create a new document the same size and in the new blank document, create your mockup. Keep an eye on the layout, making certain there is strong relationship between the two.




  3. EXTRA CREDIT: Do the steps below to create a webpage;

    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.       <h3>sidebar one</h3>
      9.       <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>
      10.       <h2>sidebar heading 2</h2>
      11.       <h3>sidebar two</h3>
      12.       <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>
      13.     </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)