Fall 2007 week 10: 11/21

Hello everybody, I hope that I haven't disappointed you by not putting up the blog posting until now. I figured that I'd give you a break this week with regard to homework because of the holiday. So, this week there won't be any official homework that I will check. I will recommend, however, that you do continue to work on the site that is due in just a few short weeks. The next two classes will cover what I call case-studies which give examples of pages to create and how to create them. The two classes will deal primarily with how to create a pleasing layout in a web-page. At this point in the course I have covered all that I am going to cover in both XHTML and CSS. The rest of the term is going to be geared toward practical application of what we have learned in this class about CSS and HTML and how we can get them to work well together in a design so that it is pleasing. Basically, for the rest of the class I will be teaching you real design for the first time, and this is not something that you can get in a step-by-step fashion the way that I have given you all other material up until now. You will have to come to class for it and talk to me individually about your own project. Therefore, this blog will from now on will not recap a tutorial of each week's class anymore, but will simply serve as a place to read anything that I might need to tell you, for updates on the class, to find out what the homework is, and to get all the information about the final project. Carter-

1. HOMEWORK —Final Project, Part III: Starting two weeks ago, the homework for each class has been part of the final project. It has not been extraneous to what you will be required to do and what will be due the last day of class. If you produce your homework during these last two weeks, you will be largely finished with the project well before it is due.
   So far you should have completed part A below by last week. This week, although I will not check it for credit, you should at least start on part B for class on Wednesday of this week, and I will look at it if you wish. Then try to have both B and C complete for next week.
   1. Create the Introductory Page for the final project website—page 1 of the site;
   2. Create the Two (2) Form Pages for the final project website—pages 5 & 6 of the site:
      1. Page 5: FORM I PAGE—Mailing List (form) The elements required for this form are as follows:
         • title (ms./mrs./ms.)—radio buttons;
         • first name—text box;
         • middle initial—text box;
         • last name—text box;
         • address—text box;
         • city—text box;
         • state—drop-down menu;
         • zip code—text box;
         • day telephone number—text boxes;
         • evening telephone number—text boxes;
         • email address—text box;
         • submit button—button;
      2. Page 6: FORM II PAGE—Order Information (form) The elements required for this form are as follows:
         • which books you wish to order—radio buttons;
         • title (ms./mrs./ms.)—radio buttons;
         • first name—text box;
         • middle initial—text box;
         • last name—text box;
         • age—text box;
         • address—text box;
         • city—text box;
         • state—drop-down menu;
         • zip code—text box;
         • day telephone number—text boxes;
         • evening telephone number—text boxes;
         • email address—text box;
         • credit card type—radio buttons;
         • credit card number—text box;
         • credit card expiration date—drop-down menus;
         • credit card security code—text box;
         • submit button—button;
   3. Create the His Books Page for the final project website—page 2 of the site; see below all the information that this requires.
2. FINAL PROJECT
   • LINK   click here for information about the Final Project, or read below. Starting this week we will be working on the final project which is a website for a Children's Book Writer, Bruce Goldstone. Please read the information provided, and click on the links to download additional information and the images.
   • LINK   images 1 click here and below to download images. PLEASE NOTE These are very large files.
   • LINK   images 2
   • LINK   images 3
   • LINK   images 4
   • LINK   images 5
   • LINK   images 6
   1. CONTENT REQUIREMENTS: 
      1. Page 1: INTRO PAGE—this page includes some kind of appropriate imagery of your choice with a series of links: About Bruce, His Books, Image Gallery, Mailing List, Order Form . In this page, you should establish the color scheme that you will use throughout your design for this site. You should also establish ‘the look’ you are going for with the sort of imagery you choose and the fonts you select.
         1. In addition to the imagery here, and the links, we should also see the name of the website Bruce_Goldstone.com.
         2. It should say somewhere that he is a children's book writer.
         3. You should also place an image from his new book (all the images that I gave you are from the same book—Great Estimations).
         4. Also necessary, is the the title of the new book, Great Estimations.
         5. And finally, in addition to all of this in the Intro page, you also need to mention that it is available in bookstores everywhere.
      2. Page 2: 'ABOUT BRUCE' PAGE—this page includes one image of the author, and text about him (to be furnished at a later time). The main thing you need to know about him right now to start your site is that he is a children’s book author.
      3. Page 3: 'HIS BOOKS' PAGE—This page includes a thumbnail image of each book (all of which you can download online; and, the thumbnail should also be clickable to get to a larger image that pops up in a different window) along with the following text.
         • Great Estimations (his latest book)—thanks to jaw-dropping color photos, the author, Bruce Goldstone, lays out a mixed assemblage of toys, pipe cleaners, marbles, peanuts, and other small items. He helps viewers train themselves to estimate the size of groups of about 10 things on sight, then goes on to present similar, often fetchingly arranged, materials by hundreds and (!) thousands. He also describes "clump counting" and "box and count" methods, offering pages chock-full of plastic bugs ("It isn't gross--it's a gross."), dog and cat stamps, a penguin colony, tiny rice grains, a bowl of jellybeans, and more. Including hints for each exercise, and frequent reminders that the goal is a "reasonable estimate," not an exact number, this book lends itself equally well to skill building and to casual reading.
         • The Beastly Feast—The centerpiece is arranged and the table is set, ready for The Beastly Feast. Fishes bring knishes, puffins come bearing muffins, and mosquitoes bring burritos as the guests prance and zip across the pages to this deliriously raucous food fest. Young readers will delight in the chaos that ensues when the flies' pie crashes onto the festive table loaded with parrots' carrots, antelopes' cantaloupe, and other potluck dishes. They also will find it hard to resist manipulating the delicious word pairs and adding their own silly rhymes. Goldstone has created a rhyming story with a minimum of words that may remind readers of Bill Martin's Chicka Chicka Boom Boom (S & S, 1989) in its exuberant beat and topsy-turvy outcome. It is Lent's fabulous illustrations, however, that place this book in its own unique class. The artist made his own paper and then printed it with colorful patterns using cut cardboard and linoleum. The resulting lively collages and layout convey a sense of movement and excitement. The rich visual details nicely balance the simple words and add complexity to an otherwise straightforward plot. This collaboration is cause for celebration; The Beastly Feast will give youngsters lots of reasons to rejoice.
         • Ten Friends—"If you could ask 10 friends to tea, tell me who your friends would be," begins Goldstone's rollicking, rhyming approach to addition and multiplication. In each of 10 spreads, the unseen narrator suggests different combinations that add up to 10, which Cahoon (Word Play ABC) interprets in vibrantly saturated spreads of an anthropomorphized menagerie. A rose-hued stage scene featuring a sextet of flamingos en pointe, partnered with four leaping frogs, for instance, illustrates the equation 6 + 4; while 8 + 2 translates into eight mouse tailors cavorting among spools and thread, joined by two plunger-toting elephant plumbers. Whenever the equations lengthen beyond two addends, the rhyming text takes on jovial patter-song silliness: "How about 1 prince, 1 painter, and 2 potters, 1 diner, 1 miner, 1 major, and 3 otters?" Finally, the book offers up the cumulative possibility of what would happen "if ALL your friends show up": it's the number 100, the magnitude of which is driven home by a page filled with thumbnail portraits of every one of the participants. Exuberantly stylish, this painless introduction to the power of 10 should prove to be many aspiring mathematicians' cup of tea.
         • Bip in a Book—Marcel Marceau's genius for the art of silence has astonished and delighted audiences of all ages for more than 50 years. Bip is Marceau's beloved alter ego, a hapless clown with unlimited curiosity and compassion. Since his debut in 1947, Bip has bravely explored every imaginable location, from a skating rink to a lion cage. But he has never been trapped inside the pages of a book... until now. In Bip in a Book, this richly evocative drama is reinterpreted for a new generation. Once again Marceau's famous innocent is trapped, but this time he is confined not by an imaginary cage, but by a page. Dressed in his signature striped pullover and battered opera hat, Bip is happily oblivious to his plight until he walks smack into the right edge of the page. As the reader turns the pages, Bip's imaginative exploration of this unexpected situation is told through 32 vivid photographs, each underscoring Marceau's outstanding gift of expression. Anyone who loves the theater will cherish these playful photographs of a modern master at work, but even readers who have never seen Bip will be drawn to the creativity and suspense of this one-of-a-kind story.
         • Why is Blue Dog Blue?—for years Blue Dog's bold blueness has captivated adults. Now children get to join in the fun when they open this vibrant book, which finally answers the question we've all wondered about since we first met Blue Dog's riveting stare: Why is Blue Dog blue? Blue Dog's creator, George Rodrigue, takes readers on a playful tour of his unique color world. In it, he combines preposterous puns with all-new whimsical Blue Dog silkscreens to go where other color guides are too yellow-bellied to tread. Readers of all ages will giggle as Blue Dog changes color from red or green to auburn or chartreuse. By the end of the book, they will see that the artist's reasoning is both logical and magical: Blue Dog simply had to be blue.
         • A Gnome’s Christmas—When a mysterious greenwood box is discovered in the rafters of an old barn in northern Finland, it is found to contain tiny bundles of paper, each revealing remarkable descriptions of the Christmas rituals of the gnomes. In every gnome home around the world, Christmas lasts an entire month, and it signals the coming of a new year, which the gnomes ring in with a blessing: "May this year be full of proud deeds and silly games, beautiful songs and hearty feasts, clever jokes, loving friends, and enough surprises to keep us on our toes."     Following in the tradition of Gnomes (which sold one million copies), The Complete Gnomes, and The Secret Lives of Gnomes, A Gnome's Christmas is the latest study on the lives and cultural habits of gnomes. This delightful book features songs, stories, games, and recipes for holiday treats, as well as captivating artwork by celebrated artist Rien Poortvliet. Including a special holiday ornament, A Gnome's Christmas is a must-have for gnomeophiles and Christmas fans of all ages.
      4. Page 4: IMAGE GALLERY PAGE—a whole series of photographic images used in his latest book placed in a thumbnail gallery. These thumbnails should be clickable to get to larger versions of the same images that pop up in a new window.
      5. Page 5: FORM I PAGE—Mailing List (form) Page, specific form elements to be given at a later date.
      6. Page 6: FORM II PAGE—Order Information (form) Page, specific form elements to be given at a later date.
       
   2. DESIGN REQUIREMENTS: 
      1. Color Scheme—you must choose a color scheme for your web-site that you can show to me or describe to me. My suggestions are to keep it simple, easy, non-complicated. Keep in mind who your audience is and what the subject matter is.
      2. Page Layout—you must use CSS and/or tables to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
   3. TECHNICAL REQUIREMENTS: 
      1. XHTML—ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
         • that all tags and their attributes must be typed in lower case;
         • that all attribute values must be typed in quotes and with units;
         • that the DTD for strict XHTML must be typed at the top of the document;
         • that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
         • that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
         • and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
             If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.
      2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, so it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
      3. Frameset—EVERYONE must utilize a frameset for this site with at least TWO FRAMES, one for content and one for navigation.

Fall 2007 week 9: 11/14

Hi everybody, Everything we do in class from here on out, all the classwork and all the homework, will be geared to producing your final project. From here on out, everything I assign as homework, you will be able to use directly in the project you turn into me the last day of class. This week's homework is PART I of your final project. Therefore, if you do not do your homework, you're actually hurting the chance that your final project will receive an A or B. This final project consists of a small web-site of six (6) pages of content. This does not mean six html files, no, but six pages OF CONTENT. There may be other files that you will produce that do not contain any content (or very little), such as the frameset files I introduced last night, or the navigation file with the links—the .html file that contains the menu navigation does not officially count as a page of your site even if the links are technically content. Carter-

1. TOPICS:
   1. Final Project;
      • LINK   Content Requirements;
      • LINK   Technical Requirements;
      • LINK   Design Requirements;
   2. Classwork:
      1. Review:
         • LINK   Creating a simple table;
         • LINK   Modifying the table;
         • LINK   Adding colspan;
         • LINK   Adding CSS styles—using an embedded stylesheet for the background color, margins, and links.
      2. Introduce:
         • LINK   Using CSS Class Selectors;
         • LINK   Creating HTML Framesets;
         • LINK   Using the Frame Tag;
2. HOMEWORK —Final Project, Part I: Starting this week, the homework for each class is part of the final project. It is not extraneous to what you will be required to do and what will be due the last day of class. If you produce your homework each week, you will be largely finished with the project well before it is due.
   1. Create the Introductory Page for the final project website. See the downloads below for more information.     Since you're creating the first 'page' of the site, and since this site MUST make use of a frameset, you must create a frameset document and a navigation document as well. Therefore, the actual Introductory Page will fit into the larger frame of your frameset when you open everything up.
   2. QUIZ next week covering CSS. Review the questions from last week's post as well as those from the posts of the following weeks:     from week 6 and week 2.
   3. Create a new HTML Document as the directions below indicate and which employs an EMBEDDED STYLESHEET: Click here: LINK; Instead of using orange and red, however, use blues and greens
3. FINAL PROJECT
   • LINK   click here for information about the Final Project, or read below. Starting this week we will be working on the final project which is a website for a Children's Book Writer, Bruce Goldstone. Please read the information provided, and click on the links to download additional information and the images.
   • LINK   images 1 click here and below to download images. PLEASE NOTE These are very large files.
   • LINK   images 2
   • LINK   images 3
   • LINK   images 4
   • LINK   images 5
   • LINK   images 6
   1. CONTENT REQUIREMENTS: 
      1. Page 1: INTRO PAGE—this page includes some kind of appropriate imagery of your choice. In this page, you should establish the color scheme that you will use throughout your design for this site. You should also establish ‘the look’ you are going for with the sort of imagery you choose and the fonts you select.
         1. In addition to the imagery here, and the links, we should also see the name of the website Bruce_Goldstone.com.
         2. It should say somewhere that he is a children's book writer.
         3. You should also place an image from his new book (all the images that I gave you are from the same book—Great Estimations).
         4. Also necessary, is the the title of the new book, Great Estimations.
         5. And finally, in addition to all of this in the Intro page, you also need to mention that it is available in bookstores everywhere.
      2. Page 2: 'ABOUT BRUCE' PAGE—this page includes one image of the author, and text about him (to be furnished at a later time). The main thing you need to know about him right now to start your site is that he is a children’s book author.
      3. Page 3: 'HIS BOOKS' PAGE—This page includes a thumbnail image of each book (all of which you can download online; and, the thumbnail should also be clickable to get to a larger image that pops up in a different window) along with the following text.
         • Great Estimations (his latest book)—thanks to jaw-dropping color photos, the author, Bruce Goldstone, lays out a mixed assemblage of toys, pipe cleaners, marbles, peanuts, and other small items. He helps viewers train themselves to estimate the size of groups of about 10 things on sight, then goes on to present similar, often fetchingly arranged, materials by hundreds and (!) thousands. He also describes "clump counting" and "box and count" methods, offering pages chock-full of plastic bugs ("It isn't gross--it's a gross."), dog and cat stamps, a penguin colony, tiny rice grains, a bowl of jellybeans, and more. Including hints for each exercise, and frequent reminders that the goal is a "reasonable estimate," not an exact number, this book lends itself equally well to skill building and to casual reading.
         • The Beastly Feast—The centerpiece is arranged and the table is set, ready for The Beastly Feast. Fishes bring knishes, puffins come bearing muffins, and mosquitoes bring burritos as the guests prance and zip across the pages to this deliriously raucous food fest. Young readers will delight in the chaos that ensues when the flies' pie crashes onto the festive table loaded with parrots' carrots, antelopes' cantaloupe, and other potluck dishes. They also will find it hard to resist manipulating the delicious word pairs and adding their own silly rhymes. Goldstone has created a rhyming story with a minimum of words that may remind readers of Bill Martin's Chicka Chicka Boom Boom (S & S, 1989) in its exuberant beat and topsy-turvy outcome. It is Lent's fabulous illustrations, however, that place this book in its own unique class. The artist made his own paper and then printed it with colorful patterns using cut cardboard and linoleum. The resulting lively collages and layout convey a sense of movement and excitement. The rich visual details nicely balance the simple words and add complexity to an otherwise straightforward plot. This collaboration is cause for celebration; The Beastly Feast will give youngsters lots of reasons to rejoice.
         • Ten Friends—"If you could ask 10 friends to tea, tell me who your friends would be," begins Goldstone's rollicking, rhyming approach to addition and multiplication. In each of 10 spreads, the unseen narrator suggests different combinations that add up to 10, which Cahoon (Word Play ABC) interprets in vibrantly saturated spreads of an anthropomorphized menagerie. A rose-hued stage scene featuring a sextet of flamingos en pointe, partnered with four leaping frogs, for instance, illustrates the equation 6 + 4; while 8 + 2 translates into eight mouse tailors cavorting among spools and thread, joined by two plunger-toting elephant plumbers. Whenever the equations lengthen beyond two addends, the rhyming text takes on jovial patter-song silliness: "How about 1 prince, 1 painter, and 2 potters, 1 diner, 1 miner, 1 major, and 3 otters?" Finally, the book offers up the cumulative possibility of what would happen "if ALL your friends show up": it's the number 100, the magnitude of which is driven home by a page filled with thumbnail portraits of every one of the participants. Exuberantly stylish, this painless introduction to the power of 10 should prove to be many aspiring mathematicians' cup of tea.
         • Bip in a Book—Marcel Marceau's genius for the art of silence has astonished and delighted audiences of all ages for more than 50 years. Bip is Marceau's beloved alter ego, a hapless clown with unlimited curiosity and compassion. Since his debut in 1947, Bip has bravely explored every imaginable location, from a skating rink to a lion cage. But he has never been trapped inside the pages of a book... until now. In Bip in a Book, this richly evocative drama is reinterpreted for a new generation. Once again Marceau's famous innocent is trapped, but this time he is confined not by an imaginary cage, but by a page. Dressed in his signature striped pullover and battered opera hat, Bip is happily oblivious to his plight until he walks smack into the right edge of the page. As the reader turns the pages, Bip's imaginative exploration of this unexpected situation is told through 32 vivid photographs, each underscoring Marceau's outstanding gift of expression. Anyone who loves the theater will cherish these playful photographs of a modern master at work, but even readers who have never seen Bip will be drawn to the creativity and suspense of this one-of-a-kind story.
         • Why is Blue Dog Blue?—for years Blue Dog's bold blueness has captivated adults. Now children get to join in the fun when they open this vibrant book, which finally answers the question we've all wondered about since we first met Blue Dog's riveting stare: Why is Blue Dog blue? Blue Dog's creator, George Rodrigue, takes readers on a playful tour of his unique color world. In it, he combines preposterous puns with all-new whimsical Blue Dog silkscreens to go where other color guides are too yellow-bellied to tread. Readers of all ages will giggle as Blue Dog changes color from red or green to auburn or chartreuse. By the end of the book, they will see that the artist's reasoning is both logical and magical: Blue Dog simply had to be blue.
         • A Gnome’s Christmas—When a mysterious greenwood box is discovered in the rafters of an old barn in northern Finland, it is found to contain tiny bundles of paper, each revealing remarkable descriptions of the Christmas rituals of the gnomes. In every gnome home around the world, Christmas lasts an entire month, and it signals the coming of a new year, which the gnomes ring in with a blessing: "May this year be full of proud deeds and silly games, beautiful songs and hearty feasts, clever jokes, loving friends, and enough surprises to keep us on our toes."     Following in the tradition of Gnomes (which sold one million copies), The Complete Gnomes, and The Secret Lives of Gnomes, A Gnome's Christmas is the latest study on the lives and cultural habits of gnomes. This delightful book features songs, stories, games, and recipes for holiday treats, as well as captivating artwork by celebrated artist Rien Poortvliet. Including a special holiday ornament, A Gnome's Christmas is a must-have for gnomeophiles and Christmas fans of all ages.
      4. Page 4: IMAGE GALLERY PAGE—a whole series of photographic images used in his latest book placed in a thumbnail gallery. These thumbnails should be clickable to get to larger versions of the same images that pop up in a new window.
      5. Page 5: FORM I PAGE—Mailing List (form) Page, specific form elements to be given at a later date.
      6. Page 6: FORM II PAGE—Order Information (form) Page, specific form elements to be given at a later date.
       
   2. DESIGN REQUIREMENTS: 
      1. Color Scheme—you must choose a color scheme for your web-site that you can show to me or describe to me. My suggestions are to keep it simple, easy, non-complicated. Keep in mind who your audience is and what the subject matter is.
      2. Page Layout—you must use CSS and/or tables to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
   3. TECHNICAL REQUIREMENTS: 
      1. XHTML—ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
         • that all tags and their attributes must be typed in lower case;
         • that all attribute values must be typed in quotes and with units;
         • that the DTD for strict XHTML must be typed at the top of the document;
         • that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
         • that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
         • and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
             If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.
      2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, so it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
4. QUESTIONS—Here are some questions to help guide you through this weeks' material:
   • What is the one type of XHTML document that does not have a body section? In place of the body section, what is used? What is the purpose of this sort of document?
   • What are four attributes that may be used with a <frameset> tag?
   • What are four attributes that may be used with the <frame/> tag?
   • Of the three kinds of tags—inline, block, empty—which sort is the <frame/> tag?
   • What kind of content is contained within a frameset document? Why?
   • If you wish to create a webpage with a two-frame frameset, how many documents do you need to create at a minimum? Why?
   • Which attribute for the <frameset> tag causes the frames to divide up the browser window horizontally?
   • What is the purpose of naming frames?
    
5. INTRODUCE—As usual, we started last Wednesday's class with a review of a familiar topic. This time (again) it was HTML tables. This was the fifth week in a row that we have been working on tables, and I hope that fact alone indicates their importance to creating effective, and well-designed web-pages. I will not discuss the topic at much length this time, however, and instead will demonstrate with examples of code and the resulting tables.     LINK     Click here     LINK     and here for a more thorough introduction, discussion and demonstration on the topic of tables.
   1. A Simple Table—We shall begin the class be creating a simple table of three (3) rows with six (6) cells in each row: And here is the code for this table: <table border="1px" width="100%">         // below here is row 1  <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr>         // below here is row 2  <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr>         // below here is row 3  <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr> </table>  
   2. Modifying the Table—Next, I add a few attributes and some text to the table: <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px">         // below here is row 1  <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr>         // below here is row 2  <tr>     <td>&nbsp;</td>     <td align="center" valign="middle">one</td>     <td align="center" valign="middle">two</td>     <td align="center" valign="middle">three</td>     <td align="center" valign="middle">four</td>     <td>&nbsp;</td>  </tr>         // below here is row 3  <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr> </table>

      	one	two	three	four

       
   3. Adding colspan—To complete the table modifications, I add the colspan attribute to rows 1 and 3, and I delete some cells as well from the same rows:

      	one	two	three	four

      <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px">         // below here is row 1  <tr>     <td colspan="6">&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr>         // below here is row 2  <tr>     <td>&nbsp;</td>     <td align="center" valign="middle">one</td>     <td align="center" valign="middle">two</td>     <td align="center" valign="middle">three</td>     <td align="center" valign="middle">four</td>     <td>&nbsp;</td>  </tr>         // below here is row 3  <tr>     <td colspan="6">&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>  </tr> </table>  
   4. Adding CSS Styles—To begin to design the page, I will add some styling to the page using an embedded stylesheet. Recall, that an embedded stylesheet are CSS styles that are defined within the HEAD SECTION of the document, between a pair of <style> tags. To see further discussion on the topic of CSS, please see last week's posting: <style type="text/css">   <!-- // sets styles for entire document window     body          {background-color:#000000;           margin-top:0px;           margin-bottom:0px;           margin-left:0px;           margin-right:0px;} // un-clicked links     a:link          {color:#aaaaff;           text-decoration:none;} // already clicked links     a:visited          {color:#9999cc;           text-decoration:none;} // as links are being clicked     a:active          {color:#cc0000;           text-decoration:underline;} // as the mouse passes over links     a:hover          {color:#aaffaa;           text-decoration:underline;}   //--> </style> Since we have styles for links, we are going to turn the text in the table, the words one, two, three, four into links. You can make them link to anything you want for now: <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px">         // below here is row 1  <tr>     <td colspan="6">&nbsp;</td>  </tr>         // below here is row 2  <tr>     <td>&nbsp;</td>     <td align="center" valign="middle">       <a href="http://www.yahoo.com" target="_blank">one</a>     </td>     <td align="center" valign="middle">       <a href="http://www.google.com" target="_blank">two</a>     </td>     <td align="center" valign="middle">       <a href="http://www.msn.com" target="_blank">three</a>     </td>     <td align="center" valign="middle">       <a href="http://www.w3schools.com" target="_blank">four</a>     </td>     <td>&nbsp;</td>  </tr>         // below here is row 3  <tr>     <td colspan="6">&nbsp;</td>  </tr> </table>  
   5. CSS Class Selectors—Using a CSS Class is a special way to attach styles to an element in a page of HTML. Let's review, a CSS style definition consists of three (3) basic terms:     ¹selector      {²property: ³value;} The selector determines to which HTML element the style will be applied, as in the following example:       h1           {font-size:28pt;} In the above example, the selector is the h1. It selects, or indicates that the following styles are to be applied to all<h1> tags. The following two terms after the selector should be self-explanatory, they are the property of the tag being styled, font-size, and then the particular value or setting for that property, 28pt.     Up to now, this is the only sort of style definition we have considered, those that match a particular HTML tag; however, there are selectors which may be used for any tag. This makes the style definition very flexible, as it can be applied as often or seldom as necessary. They are known as classes. and the selector, since it is not given a particular tag name such as body or h1, must have unique names. These names are preceded by a dot (.).       .red         {color:#ff0000; font-weight:bold;} Once created, the class is applied like all attributes are, and to any tag that is necessary, such as the two examples that follow:       <p class="red">hello!</p>       <td class="red">cell 1</td> With this understanding, we will create three (3) classes to be applied immediately to our table, one for each row. Later, we may use these classes again if we need to. <style type="text/css">   <!--     body          {background-color:#000000;           margin-top:0px;           margin-bottom:0px;           margin-left:0px;           margin-right:0px;}     a:link          {color:#660000;           text-decoration:none;}     a:visited          {color:#990000;           text-decoration:none;}     a:active          {color:#ffaacc;           text-decoration:underline;}     a:hover          {color:#ff0000;           text-decoration:underline;} // class number 1     .color1          {background-color:#990000;} // class number 2     .color2          {background-color:#660000;} // class number 3     .menu          {background-color:#cc6600;           font-size:12pt;           font-weight:bold;           font-family:Arial,               Helvetica,               sans serif;}   //--> </style> These styles can then be applied to the table rows: <table border="0px" width="100%" cellspacing="0px;" cellpadding="3px">         // below here is row 1  <tr class="color1">     <td colspan="6">&nbsp;</td>  </tr>         // below here is row 2  <tr class="menu">     <td>&nbsp;</td>     <td align="center" valign="middle">       <a href="http://www.yahoo.com" target="_blank">one</a>     </td>     <td align="center" valign="middle">       <a href="http://www.google.com" target="_blank">two</a>     </td>     <td align="center" valign="middle">       <a href="http://www.msn.com" target="_blank">three</a>     </td>     <td align="center" valign="middle">       <a href="http://www.w3schools.com" target="_blank">four</a>     </td>     <td>&nbsp;</td>  </tr>         // below here is row 3  <tr class="color2">     <td colspan="6">&nbsp;</td>  </tr> </table> This code produces the following results:

      	one	two	three	four

       
   6. Framesets—In this week's class we saw the introduction of the issue of one of the final and more advanced issues of HTML, frames and framesets. Essentially, a frameset is a series of documents, held together by a frame , that work together to break apart the browser window into multiple browser window. In each window, or frame, a different web-document or web-site may be viewed.     There is virtually no limit to the number of frames that may be contained within a frameset, as it depends on how many are programmed into the frameset document; however, design and function are first and foremost the constraints that should guide you when attempting to determine how many frames are necessary and practical. As mentioned, the guiding document is the frameset document: this document works much as a window frame. I do not mean the panes of glass, but rather the frame that binds the panes together. As it is merely a frame, this document, the frameset document, has no content. Furthermore, as it has no content, it has no body section. Instead, replacing the body section, it has a frameset section that sets up parameters of the frameset, exactly how many frames and what their orientation will be. Therefore, a frameset document starts out pretty much the same as an ordinary HTML document, but diverges with the second section: <html>   <head>     <title>frameset document</title>   </head>   <frameset>   </frameset> </html> Above, you can see that the frameset section, instead of the body section, follows the head section instead in the document. This is where the browser window is carved up into frames. For horizontal frames, the attribute rows is used; and for vertical frames, the attribute cols is used.   <frameset cols="150px, *"> In the above frameset tag, a two-frame frameset is created, where the first frame (the first column) is 150 pixels wide, and the second one, indicated by the asterisk, is whatever remains of the open browser window.     To complete the frameset, however, there must be a <frame/> tag for each frame. Since there are two measurements (150, *) in the above setup there must also be two frame tags. <html>   <head>     <title>frameset document</title>   </head>   <frameset cols="150px, *">     <frame/>     <frame/>   </frameset> </html> The <frame/> tags are empty tags, but there are nonetheless still two tags, one for each frame in the frameset. Furthermore, each must be accompanied with the src attribute in order to place another document within the frameset: <frame src="nav.html"/> <frame src="content.html"/> In this example, another document named nav.html will appear in the first frame of the frameset, and another named content.html will appear in the second frame.     To remove the borders between frames, the <frameset> tag require two additional attributes and values: frameborder="no" border="0px".     If we change the orientation of our frames to rows (horizontal), and rename our original document above nav.html (the one with the table background colors above of red and orange), we can start to create our first frameset document. <html>   <head>     <title>frameset document</title>   </head>   <frameset rows="150px, *" frameborder="no" border="0px">     <frame src="nav.html" name="nav"/>     <frame src="content.html" name="content"/>   </frameset> </html> You should notice above, that in addition to the attributes regulating the border, and indicating the source files for the frames, that there is a name attribute for each frame. There is an important reason for giving names to frames, particularly the frame where the primary content of the website will go. Primary content here refers to those documents that contain most of the content of the site, the images and text, as opposed to the document that contains the navigation, or the frameset document itself. This is so that the frame can be targeted. This can be done with links, for example, so that linked documents can be targeted to open up into a particular frame.     LINK   In our first document, we created a menu of links. These links targeted a value, "_blank", which targets a new browser window, opens up the document in a new blank window. If, however, the value we choose is the name of one of our frames in the frameset document, content for example, instead of opening up in a separate new browser window, the documents will open up in another window of our frameset. Our link would then look like so:  <a href="one.html" target="content">one</a>

Fall 2007 week 8: 11/07

Hi class, I won't reiterate my disappointment at the midterms, or now that quiz I gave you last week. However, I want to make a point, that if you think you did poorly, and if you discover from next week when I give you all your grades back on your midterm that you did indeed do poorly, or at least not as well as you'd wanted, that you at least you have another 5 weeks of class, the homework I assign each week, the final exam and the final project to bring up your grades. Try to remember that homework is important, and helps you on the exams and the projects. Starting with the next week, each homework will be building a different part of your final project. As you will probably notice below, the posting only covers a portion of what we did in class. Below, you will not see anything regarding framesets. All I mention down below is the issue of CSS that we covered in the second half of last week's class. This is because this was the beginning of the 2nd part of the term, and during this part of the term we will be focusing on CSS. Therefore, I emphasize its importance by devoting this entire posting to it.     But don't worry, I will spend some time during next week's posting discussing framesets. By then, we'll have already spent two weeks on that topic, so when you see my posting on it, it will be a simple review.     Believe it or not, our next class will be our ninth. That means there will only be five more weeks until the last class. So, catch a brief rest here and there when you can. There will be plenty of work to do over the next several weeks in this class, and I've no doubt in your other classes as well. Don't put things off.     Next week, I will be assigning the final project, so you should start working as soon as I assign it if you want to do well and complete it sufficiently. Carter-

1. TOPICS:
   1. LINK   CSS: What?
   2. LINK   CSS: Where?
   3. LINK   CSS: How?
   4. LINK   CSS: Why?
2. HOMEWORK—
       —QUESTIONS: answer the questions below as your homework.
           Type the questions and answers in an HTML document for the next class.
       —QUIZ over CSS a week from next Wednesday (a week from the next class);
3. QUESTIONS—Here are some questions to help guide you through this weeks' material:
   • What does the abbreviation CSS stand for?
   • What does CSS do?
   • What is a style definition?
   • What are the three parts of a style definition?
   • Which two parts of the style definition fall between the curly brackets?
   • What does a selector do?
   • May there be more than one property defined in a style definition? If so, what is the limit on how many properties may be defined in any given style definition?
   • What attributes must be used with the <style> tags in order to place a CSS Stylesheet into a web page?
   • In which section must the <style> be typed into a web page?
   • What is one advantage to an embedded stylesheet and therefore typing all the styles at the top of the page together in the head section?
   • What are the three types of CSS styles?
   • Where are the various types of CSS styles typed?
   • What are the four link states as they are defined by CSS, what do they refer to, and what order must they be typed?
4. INTRODUCE:
   1. Cascading Style Sheets (CSS)—in this week’s class we saw the introduction of the issue Cascading Style Sheets used together with HTML in order to style the text and colors of a page. CSS works often in much the same way that the in-line HTML tags (<b>, <i>, <u>, <font>, etc.) do to bring some styling onto an otherwise dull page of text. For this reason and from this point on, CSS will completely supplant those in-line tags for our uses in this class. In-line tags are not considered proper when following strict XHTML guidelines (and as a result will not pass the test when the code is validated); therefore, our job is to determine how to best configure our pages without them. In other words, from this point on, we will no longer be using many of those inline tags, and heretofore use only CSS; thereby, at last adherely completely to XHTML Strict standards.
   2. What is CSS? To begin with, CSS is another type of code used only to style a page of content (mostly text and images). It is used for two reasons.
      • First, it is vastly more extensive and, thereby, flexible. There are many more aspects of style that you can control with CSS than without it, as you will find out in the weeks to come. You can therefore control the look of your pages much more thoroughly. As a result, you will have many more options of how to style a page, using your own design sense of how to emphasize various elements in the site.
      • Second, as it considers a web-site as a living, changing object rather than 100% complete and fully-formed when it is uploaded onto a server, it is much more efficient to use and, therefore, allows you to update your pages much more quickly and completely.
   3. Where is CSS placed? depending on what kind of CSS you are typing (yes, there is more than one kind), you will type it in different places. Up to this point, we have been typing our code in the <head> section of our document. When typed here, it is known as an embedded stylesheet.
   4. How is CSS used? As we have been using it up to know, as mentioned above, we have been typing what is known as embedded stylesheets, but all types of CSS follow the same basic format.     In the past, we have styled our pages by using the in-line tags throughout our document to change the way the text looks. With an embedded stylesheet, we put all the styles into a central location embedded in the <head> section. That way, if ever we need to change something or update the page, all we must do is go to the <head> section at the very top of the document rather than go searching around all the code of the page to make the change. This is especially useful, if, like the mid-term project, we must type a long and complicated web-page filled with much text and a complex set of tables that we do not want to accidentally mess up.     As mentioned, the styles are embedded directly into the code in the <head> section of a document, and they are placed between a pair of <style> tags. This is the type of stylesheet that we looked at in last week’s class.
      1. In the first part of the class demonstration, we constructed a basic web-page with text only using only block tags, <h1>, <h2>, <p>. In some cases, we used these tags more than once each. We used the <h2> tag twice.
      2. In the second part of the demonstration, we created and applied the styles in an embedded stylesheet and applied them to the various block tags we used in the page. Where we used a tag more than once, such as the styles we attached to the <h2> tag, the styles were applied to each instance automatically by only typing them once.
         1. To create an embedded stylesheet we use the <style> tag pair.
         2. The <style> tag requires the <type> attribute with the value "text/css" applied.
         3. Inside the <style> tag pair, it is necessary to place a series of characters to convince the browsers to hide the code. While not strictly required anymore, in some old browsers, CSS code is not recognized and neither is the <style> tag. For this reason, when the code is read by these old browsers, it is mistaken for plain text and therefore displayed in the page, displacing all the actual content. Therefore, in order to prevent the browsers from doing this, it is necessary to disguise the code as HTML notes, notes that the writer of the code composes to himself or others who read the code when he wishes to identify it without having it appear in the page itself. To do this, you must type the following to open the notes: <!— — ; and the following to close the notes: //— —>.
         4. When typing CSS code, there are three (3) parts that makes up what is known as a style definition.
            1. the selector refers to the term that determines to which block of text or element the style will be applied, such as a heading or a paragraph;
            2. the property refers to the term that identifies which aspect will be styled, such as the size or color or typeface;
            3. the value refers to the term that supplies a particular quantity for a property, as the background-color property might have the value of red, or the width property might have a value of 500px;
            4. example:  selector         property               value  body   { background-color : #aa0000 ;}
   5. And, finally, why is CSS called Cascading Style Sheets? Where does the Cascading fit in? It is because CSS is implemented on three (3) levels. This is why it is called cascading, as it begins by adding style to the widest, most general location, and ends by adding it in the narrowest, most specific location. All three may be used together to style your pages in the most efficient and effective way possible.
      • linked/attached/external styles—First, for those styles that will be applied throughout your site—not only on a single page—such as a common background color, or a common set of margins, or link colors for all of the pages on your site, it is best to apply them to all pages at the same time, rather than on one page at a time. This is better because, for one thing, it is more efficient as all the styles are applied at once and centralized in one location; but by catching things in a single instance, it also prevents you from making more mistakes.     The more you have to type the more opportunities you will have for making errors. Therefore, since you will only have to type these styles in one place for the entire site rather than on every single page, your chances for making errors are greatly reduced. For such styles as these, the most general to be applied to all, or most, pages of your web-site, you will type on a single separate document. This document will only have CSS code in it, and it will be attached, or linked, to each of the pages that will receive the stylings that it dictates. This is called a linked or attached or external stylesheet, and the document gets the extension .css.
      • embedded styles—Second, for those styles that will be applied to only a single page—you will use what’s called an embedded stylesheet. If you have a single page in a multi-page web-site that is something of an anomaly in that it must be somehow and for some reason different from the other pages (must have a different background color, or have different stylings than other pages in your web-site, for example) then you will use this type of stylesheet for those styles that must be different. These are called embedded styles because rather than being typed in a separate .css document, they are typed, embedded, directly into the HTML & centralized in the head section. This type of stylesheet is meant to style a single page, which is what makes it ideal for a page that has a number of styles that are markedly different from the general styles placed on all the pages. It is also very efficient, as it places all the styles together in the head section.
      • in-line styles—Third, for those styles that occur only one time in one particular location in one page, we tend to use what are called in-line styles. These styles are applied directly into a particular HTML tag via the style attribute. They work very much the same as in-line tags do, but are much more versatile and thorough in what types of styling you may apply in that you can do much more with them. These styles are normally used for one-time styling. If you plan on using the same styles in more than one location, then in-line styles are probably not the right CSS to use.