Spring 2009 week 10: 3/25

Hi everybody, What you are going to start this week at home is the beginning of your final project.    I will give you input over the next four weeks on your color schemes, on your layouts, and on the code that you produce for me. If you show me something new each week, I will let you know what I think of your designs. If you don't produce anything for me in any of the remaining weeks, I will have nothing to say. Each week we will produce a part of the project, which you will complete as homework. You will get a homework grade each week according to how much of the week's work you completed. If you complete it all, then, and at the end of the next four weeks, you should have most of the project completed as well as a decent homework grade.    For this week's class, even if you didn't realize it, we began to create the template that we will use for all the pages of the project. What I wanted you to do was to focus on the design of title of the site and the navigation. Each page will follow the design of this that you produce. In any decent design, the navigation remains constant. This means that you only need to design and make the navigation ONE TIME, and then all you have to do is copy and pste it. After that, all you have to do is add the content for each page. Each page will begin with this template so that all pages will look identical at first. This will make certain that the most important information, as well as the links, remain in the same place on every page. Carter-

1. TOPICS:
   1. Final Project;
      • LINK   Content Requirements;
      • LINK   Technical Requirements;
      • LINK   Design Requirements;
2. HOMEWORK—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. If you produce these assignments on time each week, you will have accumulated you will receive a decent homework grade.    The site that we are going to produce, as you should know, is for an ART GALLERY named Alpha Gallery. This week, you should design the title and the navigation for the site and keep in mind the comments that I made during class this week.    If you did NOT print out your mockups, if you were late to class and didn't tape up your mockups, or if you were absent, then you must make certain that you bring one printed mockup to tape up at the beginning of class for us to discuss.    If you brought one this week and taped it up and showed it to me and the rest of the class, then you should just continue working on producing your design in HTML and CSS.
   1. Due in class next week: You must produce your design in XHTML and CSS and name it index.html.
   2. Due in class next week: when complete, you must make seven (7) ADDITIONAL copies of this file (copy & paste them) and give them the following names: gal_01.html, gal_02.html, artists_01.html, artists_02.html, about.html, visit.html, and exhib.html. As a result, all the pages will be exactly alike for the time being.
   3. Due in class next week: when you complete the above two steps, you must attempt to design the index page, otherwise known as the home page. SEE BELOW FOR FURTHER INFORMATION ABOUT THE INDEX/HOME PAGE as well as all of the other pages.
3. FINAL PROJECT: Information
   • The site that you are going to produce is for an art gallery and it will have six main parts: the home/index page, two gallery pages, two artist pages, an about page, a visit page, and an exhibit page. Please read the information provided.
     1. CONTENT REQUIREMENTS: 
        1. Part 1: HOME PAGE—this page includes the following:
           1. In this page, you should establish the color scheme that you will use throughout your design for this site. This includes the colors, the fonts, and the particular imagery that you will choose.
           2. The name of the current exhibit: "ART:21 -- Art in the 21st Century;"
           3. Some kind of appropriate imagery of your choice and of your design;
           4. A brief summary, one paragraph of text, of what this current exhibit is about. You should use some of the text from the exhibit page (see below).
        2. Part 2: ARTIST PAGES—these TWO pages will look identical. Essentially, what you will do is have a small picture of one of the works by the artist, his/her name, and a blurb of text about the artist. I will provide you with the text for these two pages in our next class. Each page will contain 10 artists.
        3. Part 3: GALLERY PAGES—These TWO pages will also look identical. They will have thumbnail images of the pictures that I have given you of the artwork. I gave you half of the images in our last class and will give you the remaining images in our next class. Each image should be clickable. When you click on the small thumbnail images, you are linked to a page with a much larger version of the image. Accompanying each large image should be the name of the artist and the title of the work as a caption. Also, when you click on the thumbnail images in the gallery, the pages with the larger image should open up in a separate browser window or tab.
        4. Part 4: CURRENT EXHIBIT PAGE—This page will contain some appropriate imagery (you may use more than one image if you like), the title of the exhibit, and all the text that I provide to you about the exhibit here: Contemporary art speaks directly to the important questions of our time, as well as to the changing landscape of American identity. It is both a mirror of contemporary society and a window through with we view and deepen our understanding of life as it exists today. Who are today's artists? What are they thinking about? How do they describe their work? Why do they do what they do? These are some of the questions addressed in the exhibition: ART:21 Art in the Twenty-First Century. This show presents the artists without interpretive mediation through large presentations of their work. If the unknown is the space in which creativity flourishes, This exhibit desires to bring it forward, illuminate it for others, and revel in it. This is ART:21's work—to reveal the existence of those regions which all the artists traverse, forging paths of exploration and study that take them into uncharted realms of creativity. By revealing the existence of those unknown territories, inhabited by all creative thinkers, I hope to educate, delight, and to provoke the viewers. It is difficult to imagine that anyone works harder than an artist. This—the non-stop work, accumulation of information, concentration, the need to be in the studio—is a continuing mini-theme for ART:21. Most artists experience intuitive leaps of recognition and connection, and find new ideas through introspection and research in many fields beyond art, although the art of the past remains a profound resource. One might say that in order to draw, you have to learn how to see first. Well, what about making drawings and other works of art about areas, about zones and realms that you CANNOT see, about areas hidden from view, about secret realms and invisible places? This is what many of these artists have in common: they are attempting to bring to light and view things that were previously unseen.
        5. Part 5: ABOUT & VISIT PAGES—These TWO pages are NOT required but will be considered extra credit. If you decide to do these pages, the about page should have at least 3 or 4 paragraphs of text as well as an image or two. The visit page should have the gallery hours, it's address, how to get there via auto and public transportation, as well as a map. I don't care where you locate the gallery so long as it is in New York City somewhere. Most galleries in New York are located in Chelsea, not far from TCI.
         
     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 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.

Spring 2009 week 9: 3/18

Hi everyone, I'm sorry that this posting has taken me so long this week. The class went better this week than it did last week, at least as far as printing your designs were concerned. Let's hope that the upcoming class will be the same. I am not as certain that things went as well regarding the demonstration of CSS that I began. In this posting, you will find the entire discussion that I did not quite finish in class on Wednesday. What we have done in our last two classes are what we call case-studies, in which there is a design that we aim for and then go about figuring out how to produce it in HTML and CSS. We will complete, very quickly, the one I started last week in class, and then I will begin another one. The reason we do this is so that you can begin to work on your own web pages, to see how you integrate HTML and CSS to produce the web pages that you have designed in your mockups. The only homework you will see below that you have this week are to work on your mockups. Because of this, I want you all to consider them thoroughly and not to rush through them. The more time you have to spend in the design phase, the less time you will have to work on producing your site. I suggest that you keep things simple and elegant, avoiding overly complex schemes. Please use the other sites that I provided to you as a source of inspiration. There is no sense in reinventing the wheel. I was going to provide the content this week via this blog, all the text and especially all the images that you would need for the site this week; however, the files have ended up far to large, so I will give them to you in class this week, so please make certain that you have considerable space on your USB drives this week. Carter-

1. TOPICS:
   • Creating a Basic Webpage with CSS
2. HOMEWORK: Please work on your mockups for your final projects. For those of you who printed out and showed three (3) mockups last week, all you need to do is work on one (1) this week. Consider all of the comments that I made about your design as well as the others when refining your design to print out for this week's class. For those of you who have yet to print anything out, you must show three (3) mockups in our upcoming class. These mockups are to be printed out in color and they must be ready at the beginning of class. Remember, class begins at 6:05pm.
3. INTRODUCE —Creating a simple page layout using CSS: In this week's class, like last week, what I did was lead you through steps to creating a web page using only CSS to lay it out. It is very similar to something we did in class last week, only a little more complex with a few new things thrown into the mix. Even if you found it a bit confusing, hopefully it will all become more clear in the upcoming weeks.
   1. As we have learned up to now, we began with the basic elements of any webpage:
      1. the DOCTYPE: The DOCTYPE declaration defines the document type, which means what type of code you will be typing. For the purposes of this class, we will be typing XHTML strict, and the particular DOCTYPE declaration for this kind of document is:
      2. the Head section: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This section is where information about the document might appear: the subject (title), the date, who created it, and various other data about the document that follows.
      3. the Body section: This section is where all the information of the document itself appears: all the text, the images, and any other multimedia content is referenced here between the body tags.
      The basic document structure is as follows: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body> ... </body>   </html>
   2. In the following step, I typed some text into the document to demonstrate how you could lay out a page using CSS. <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body> by Caroline Archer All decades have a delusive face. Viewed from a distance we are captured by their different names, ascribe each with sundry characteristics, and label them. They are not, of course, really periods at all, no more than any other ten-year span would be.
                The Swinging 60sí started to sway somewhere in the 50s and continued to reverberate to the 70s. It was a time when Britain rocked to the Beatles and Rolling Stones; was alarmed at the Great Train Robbery; and scandalized by the Frofumo affair. Mary Quant dressed the nationís youth and Terence Conran furnished their homes. David Bailey and Terence Donovan captured it all on camera and Oz magazine satirized it in print.
                While 60s society was swinging, typography was not idle. A succession of sans serif typefaces arrived quickly on the scene: Helvetica, Optima, Folio, Univers, and Eurostile. New magazines were launched: Neue Graphik Design, Communications Arts, and Herb Lubalinís Eros started in New York. The Fletcher |Forbes| Gill design agency was formed in London, and Adrian Frutiger joined Deberny & Peignot in Paris. There were new tools for the designer when the fibre tip pen was invented, and Letraset retailed its first sheet of dry transfer lettering. Offset lithography started its rise to pre-eminence and the first phototypeset book was produced; graphic reproduction techniques were refined, and computers became an industry reality.
                In 1962 the British Design & Art Direction [D&AD] was founded as a professional association representing the UKís thriving design and advertising communities. It aimed to set creative standards, educate and inspire the next generation, and promote the importance of good design. At the same time the Kynoch Press in Birmingham was forging its post-war typographic reputation. Started in the 19th century the Press had evolved with the times, updated its fonts, equipped its pressroom with modern machines, and set-up a forward looking design studio run by Roger Denning.
                In 1963 the D&AD and the Kynoch Press started collaborating on a short series of publications called Essays in design. Viewed retrospectively the Essays serve to mirror 60s graphic trends, form a microcosm of varying tastes and techniques, and reflect the diversity of graphic communication of that period. The Essays were produced because the well-respected Kynoch Press wanted to create a more contemporary image for itself, prove it was in the vanguard of post-war printing developments, and show it was daring enough to support and court controversy in design. On the other hand, the newly created D&AD still had to establish its reputation. Working on innovative publications with a quality printer such as the Kynoch Press helped consolidate the D&ADís place in 60s graphic design culture.
                The Essays coincided with the launch of the annual influential D&AD exhibition. Each Essay was handed over either to award winners at the D&AD exhibition or to other carefully selected designers both known and those still to rise to eminence. The designers were not constrained by any brief and were given a free platform to express their views on any subject about which they felt something should be said.
      Any medium could be used and normal commercial considerations were disregarded. Only two constraints were imposed: a page format of A4 and a top limit on production costs. The Essays in design were published quarterly; a complimentary copy was given to customers and prospective customers who took an interest in design for printing. Additional copies were available at 6s (30 pence) each, or one guinea for four issues.
                A glittering selection of 60s ëití people made up the contributors to the Essays in design. Tom Wolsely and William Klein produced the first of the Essays. Wolsely was a leading 60s advertising figure who art direct Michael Heseltineís Man about Town. Town as a rumbustious life-style magazine that epitomized 60s culture and which was the epicenter for the designer jet set including David Baily, Terence Donovan, Mary Quant and Twiggy. William Klein was the most important photographers in the 1960s and famous for his strikingly intense book of photographs, Life is good for you in New York. He also produced bizarrely original photography for Vogue where he took fashion out of the studio and into the streets. Terence Donovan contributed to the Essays in design as one of Britainís greatest photographers whose fashion shots revealed the changing face of London. Working for Elle and Marie-Claire in Paris, and Harperís Bazaar in Milan and New York, he created the 60s look with wonderful portraits that became the faces of their time.
                Three British designers were persuaded to contribute to the Essays, they included: Derek Birdsall of BDMW Associates, a distinguished graphic designer of the 1960s who was responsible for the first Pirelli Calendar in 1964, the Monty Python books, and a large number of Penguin book jackets; Anthony Froshaug, a typographer who taught at the Watford School of Art, the Royal College of Art and the Central Schools of Arts and Crafts in London before setting-up as a one-man printer in Cornwall; and John Donegau, a London based art director.
                Two North Americans each produced an Essay in design. Bob Gill was a graphic designer who started the London design office of Fletcher |Forbes| Gill, later returning to New York to write and design Beatlemania, a multi-media Broadway musical. He was given a D&AD Lifetime Achievement Award. Triple Oscar winner Richard Williams produced the final Essay. Williams was a Canadian animator, who found fame with his films Who Framed Roger Rabbit, The Return of the Pink Panther, and A Christmas Carol and who won over 250 international awards including three Oscars, three British Academy Awards, and an Emmy.
                Thomas Wolsey and William Klein created the first Essay in design. They took the words of Ogden Nash as the title for their work:
      I think that I shall never see
      A billboard lovely as a tree.
      Indeed, unless the billboards fall
      Iíll never see a tree at all.
      Their response was a visual essay on advertising and the environment and comprised a montage of expressive city images from around the world. Each image contained letterforms generated by print. Essays in design     </body>   </html>
   3. After this, I wanted to label each part of the body of the document that I had typed. This is done for two reasons: later on, after some time has passed, I might forget what I had intended to do, so typing myself some notes within the code is often very useful. Also, it helps me to organize the body into different sections in my own head so that later on I might be able to treat each of them differently. Usually, this is a very logical and straightforward process as follows: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <!--         layer one       //--> by Caroline Archer       <!--         layer two       //--> All decades have a delusive face. Viewed from a distance we are captured by their different names, ascribe each with sundry characteristics, and label them. They are not, of course, really periods at all, no more than any other ten-year span would be.<br/>           The Swinging 60sí started to sway somewhere in the 50s and continued to reverberate to the 70s. It was a time when Britain rocked to the Beatles and Rolling Stones; was alarmed at the Great Train Robbery; and scandalized by the Frofumo affair. Mary Quant dressed the nationís youth and Terence Conran furnished their homes. David Bailey and Terence Donovan captured it all on camera and Oz magazine satirized it in print.<br/>           While 60s society was swinging, typography was not idle. A succession of sans serif typefaces arrived quickly on the scene: Helvetica, Optima, Folio, Univers, and Eurostile. New magazines were launched: Neue Graphik Design, Communications Arts, and Herb Lubalinís Eros started in New York. The Fletcher |Forbes| Gill design agency was formed in London, and Adrian Frutiger joined Deberny & Peignot in Paris. There were new tools for the designer when the fibre tip pen was invented, and Letraset retailed its first sheet of dry transfer lettering. Offset lithography started its rise to pre-eminence and the first phototypeset book was produced; graphic reproduction techniques were refined, and computers became an industry reality.<br/>           In 1962 the British Design & Art Direction [D&AD] was founded as a professional association representing the UKís thriving design and advertising communities. It aimed to set creative standards, educate and inspire the next generation, and promote the importance of good design. At the same time the Kynoch Press in Birmingham was forging its post-war typographic reputation. Started in the 19th century the Press had evolved with the times, updated its fonts, equipped its pressroom with modern machines, and set-up a forward looking design studio run by Roger Denning.<br/>           In 1963 the D&AD and the Kynoch Press started collaborating on a short series of publications called Essays in design. Viewed retrospectively the Essays serve to mirror 60s graphic trends, form a microcosm of varying tastes and techniques, and reflect the diversity of graphic communication of that period. The Essays were produced because the well-respected Kynoch Press wanted to create a more contemporary image for itself, prove it was in the vanguard of post-war printing developments, and show it was daring enough to support and court controversy in design. On the other hand, the newly created D&AD still had to establish its reputation. Working on innovative publications with a quality printer such as the Kynoch Press helped consolidate the D&ADís place in 60s graphic design culture.<br/>           The Essays coincided with the launch of the annual influential D&AD exhibition. Each Essay was handed over either to award winners at the D&AD exhibition or to other carefully selected designers both known and those still to rise to eminence. The designers were not constrained by any brief and were given a free platform to express their views on any subject about which they felt something should be said.<br/>       <!--         layer three       //--> Any medium could be used and normal commercial considerations were disregarded. Only two constraints were imposed: a page format of A4 and a top limit on production costs. The Essays in design were published quarterly; a complimentary copy was given to customers and prospective customers who took an interest in design for printing. Additional copies were available at 6s (30 pence) each, or one guinea for four issues.<br/>           A glittering selection of 60s ëití people made up the contributors to the Essays in design. Tom Wolsely and William Klein produced the first of the Essays. Wolsely was a leading 60s advertising figure who art direct Michael Heseltineís Man about Town. Town as a rumbustious life-style magazine that epitomized 60s culture and which was the epicenter for the designer jet set including David Baily, Terence Donovan, Mary Quant and Twiggy. William Klein was the most important photographers in the 1960s and famous for his strikingly intense book of photographs, Life is good for you in New York. He also produced bizarrely original photography for Vogue where he took fashion out of the studio and into the streets. Terence Donovan contributed to the Essays in design as one of Britainís greatest photographers whose fashion shots revealed the changing face of London. Working for Elle and Marie-Claire in Paris, and Harperís Bazaar in Milan and New York, he created the 60s look with wonderful portraits that became the faces of their time.<br/>           Three British designers were persuaded to contribute to the Essays, they included: Derek Birdsall of BDMW Associates, a distinguished graphic designer of the 1960s who was responsible for the first Pirelli Calendar in 1964, the Monty Python books, and a large number of Penguin book jackets; Anthony Froshaug, a typographer who taught at the Watford School of Art, the Royal College of Art and the Central Schools of Arts and Crafts in London before setting-up as a one-man printer in Cornwall; and John Donegau, a London based art director.<br/>           Two North Americans each produced an Essay in design. Bob Gill was a graphic designer who started the London design office of Fletcher |Forbes| Gill, later returning to New York to write and design Beatlemania, a multi-media Broadway musical. He was given a D&AD Lifetime Achievement Award. Triple Oscar winner Richard Williams produced the final Essay. Williams was a Canadian animator, who found fame with his films Who Framed Roger Rabbit, The Return of the Pink Panther, and A Christmas Carol and who won over 250 international awards including three Oscars, three British Academy Awards, and an Emmy.<br/>           Thomas Wolsey and William Klein created the first Essay in design. They took the words of Ogden Nash as the title for their work:<br/> I think that I shall never see<br/> A billboard lovely as a tree.<br/> Indeed, unless the billboards fall<br/> Iíll never see a tree at all.<br/> Their response was a visual essay on advertising and the environment and comprised a montage of expressive city images from around the world. Each image contained letterforms generated by print.       <!--         layer four       //--> Essays in       <!--         layer five       //--> design     </body>   </html>
   4. And here is where I made a mistake in class: the two words 'Essays' and 'In' should have been noted as two separate future layers as follows:       <!--         layer four       //--> Essays       <!--         layer five       //--> in       <!--         layer six       //--> design
   5. As we did in our previous class, next, I wanted to create and formalize these sections that I have mapped out in my head by placing <div></div> tag pairs around each section. By doing so, I will be able to manipulate each section or division separately later on when working with CSS. Recall that these tags do very little on their own, so until we add the CSS, the appearance of the page will change very little: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <!--         layer one       //-->       <div>by Caroline Archer<</div>       <!--         layer two       //-->       <div> All decades have a delusive face. Viewed from a distance we are captured by their different names, ascribe each with sundry characteristics, and label them. They are not, of course, really periods at all, no more than any other ten-year span would be.<br/>           The Swinging 60sí started to sway somewhere in the 50s and continued to reverberate to the 70s. It was a time when Britain rocked to the Beatles and Rolling Stones; was alarmed at the Great Train Robbery; and scandalized by the Frofumo affair. Mary Quant dressed the nationís youth and Terence Conran furnished their homes. David Bailey and Terence Donovan captured it all on camera and Oz magazine satirized it in print.<br/>           While 60s society was swinging, typography was not idle. A succession of sans serif typefaces arrived quickly on the scene: Helvetica, Optima, Folio, Univers, and Eurostile. New magazines were launched: Neue Graphik Design, Communications Arts, and Herb Lubalinís Eros started in New York. The Fletcher |Forbes| Gill design agency was formed in London, and Adrian Frutiger joined Deberny & Peignot in Paris. There were new tools for the designer when the fibre tip pen was invented, and Letraset retailed its first sheet of dry transfer lettering. Offset lithography started its rise to pre-eminence and the first phototypeset book was produced; graphic reproduction techniques were refined, and computers became an industry reality.<br/>           In 1962 the British Design & Art Direction [D&AD] was founded as a professional association representing the UKís thriving design and advertising communities. It aimed to set creative standards, educate and inspire the next generation, and promote the importance of good design. At the same time the Kynoch Press in Birmingham was forging its post-war typographic reputation. Started in the 19th century the Press had evolved with the times, updated its fonts, equipped its pressroom with modern machines, and set-up a forward looking design studio run by Roger Denning.<br/>           In 1963 the D&AD and the Kynoch Press started collaborating on a short series of publications called Essays in design. Viewed retrospectively the Essays serve to mirror 60s graphic trends, form a microcosm of varying tastes and techniques, and reflect the diversity of graphic communication of that period. The Essays were produced because the well-respected Kynoch Press wanted to create a more contemporary image for itself, prove it was in the vanguard of post-war printing developments, and show it was daring enough to support and court controversy in design. On the other hand, the newly created D&AD still had to establish its reputation. Working on innovative publications with a quality printer such as the Kynoch Press helped consolidate the D&ADís place in 60s graphic design culture.<br/>           The Essays coincided with the launch of the annual influential D&AD exhibition. Each Essay was handed over either to award winners at the D&AD exhibition or to other carefully selected designers both known and those still to rise to eminence. The designers were not constrained by any brief and were given a free platform to express their views on any subject about which they felt something should be said.<br/>       </div>       <!--         layer three       //-->       <div> Any medium could be used and normal commercial considerations were disregarded. Only two constraints were imposed: a page format of A4 and a top limit on production costs. The Essays in design were published quarterly; a complimentary copy was given to customers and prospective customers who took an interest in design for printing. Additional copies were available at 6s (30 pence) each, or one guinea for four issues.<br/>           A glittering selection of 60s ëití people made up the contributors to the Essays in design. Tom Wolsely and William Klein produced the first of the Essays. Wolsely was a leading 60s advertising figure who art direct Michael Heseltineís Man about Town. Town as a rumbustious life-style magazine that epitomized 60s culture and which was the epicenter for the designer jet set including David Baily, Terence Donovan, Mary Quant and Twiggy. William Klein was the most important photographers in the 1960s and famous for his strikingly intense book of photographs, Life is good for you in New York. He also produced bizarrely original photography for Vogue where he took fashion out of the studio and into the streets. Terence Donovan contributed to the Essays in design as one of Britainís greatest photographers whose fashion shots revealed the changing face of London. Working for Elle and Marie-Claire in Paris, and Harperís Bazaar in Milan and New York, he created the 60s look with wonderful portraits that became the faces of their time.<br/>           Three British designers were persuaded to contribute to the Essays, they included: Derek Birdsall of BDMW Associates, a distinguished graphic designer of the 1960s who was responsible for the first Pirelli Calendar in 1964, the Monty Python books, and a large number of Penguin book jackets; Anthony Froshaug, a typographer who taught at the Watford School of Art, the Royal College of Art and the Central Schools of Arts and Crafts in London before setting-up as a one-man printer in Cornwall; and John Donegau, a London based art director.<br/>           Two North Americans each produced an Essay in design. Bob Gill was a graphic designer who started the London design office of Fletcher |Forbes| Gill, later returning to New York to write and design Beatlemania, a multi-media Broadway musical. He was given a D&AD Lifetime Achievement Award. Triple Oscar winner Richard Williams produced the final Essay. Williams was a Canadian animator, who found fame with his films Who Framed Roger Rabbit, The Return of the Pink Panther, and A Christmas Carol and who won over 250 international awards including three Oscars, three British Academy Awards, and an Emmy.<br/>           Thomas Wolsey and William Klein created the first Essay in design. They took the words of Ogden Nash as the title for their work:<br/> I think that I shall never see<br/> A billboard lovely as a tree.<br/> Indeed, unless the billboards fall<br/> Iíll never see a tree at all.<br/> Their response was a visual essay on advertising and the environment and comprised a montage of expressive city images from around the world. Each image contained letterforms generated by print.       </div>       <!--         layer four       //-->       <div>Essays</div>       <!--         layer five       //-->       <div>in</div>       <!--         layer six       //-->       <div>Design</div>     </body>   </html>
   6. Now that we have all the HTML on the page, we can begin to work on the CSS. As you recall, we have been typing our CSS in the head section of our document below the title between a pair of <style></style> tags. Although this has been the only place that we have typed CSS in class, it is possible, in fact, to put CSS in two other places: in separate CSS documents that are linked to the HTML document; and directly within a specific HTML tag within the body of a document. We continued with placing the CSS code in the head section. This sort of CSS is known as an embedded stylesheet; however, later on in this class, I will demonstrate the inline styles in this class also. The styles below should look familiar for the body selector. The second style, however, as mentioned in class this past week is a new type of style called a class. A class is very similar to an ID, which I have mentioned in class before. Recall, an ID is a style that may be applied to any tag, but which may be only used one time in a page of html. IDs are often reserved for free-floating layers in a page of HTML, but may be used in other tags as well. Think of an ID as like a name tag that is given out to employees in a company: each person is given a unique ID tag. Much confusions would ensue if various people had the same ID tag. Similarly, a class may be applied to any tag; however, unlike IDs, a class may be applied as many times in a page as you like. To continue the analogy that I started above: in a company, a class is like a group, or a section. In a school, the faculty may be one group, the administrative staff may be another group, as might be the maintenance staff. These would be the different classes. In a page of HTML, there may, in fact, be only one time that you use a particular class, but you may just as well use it many times. A case in point in the page below, you will see that we actually apply the column class two times to two different <div> tags. <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#000033;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         .column {font-family:Arial, Helvetica, sans-serif;                    font-size:8pt;                    color:#33aaff;                    word-spacing:#1pt;                    line-height:8pt;                    text-align:justify;}       </style>     </head>     <body>       <!--         layer one       //-->       <div>by Caroline Archer<</div>       <!--         layer two       //-->       <div class="column"> All decades have a delusive face. Viewed from a distance we are captured by their different names, ascribe each with sundry characteristics, and label them. They are not, of course, really periods at all, no more than any other ten-year span would be.<br/>           The Swinging 60sí started to sway somewhere in the 50s and continued to reverberate to the 70s. It was a time when Britain rocked to the Beatles and Rolling Stones; was alarmed at the Great Train Robbery; and scandalized by the Frofumo affair. Mary Quant dressed the nationís youth and Terence Conran furnished their homes. David Bailey and Terence Donovan captured it all on camera and Oz magazine satirized it in print.<br/>           While 60s society was swinging, typography was not idle. A succession of sans serif typefaces arrived quickly on the scene: Helvetica, Optima, Folio, Univers, and Eurostile. New magazines were launched: Neue Graphik Design, Communications Arts, and Herb Lubalinís Eros started in New York. The Fletcher |Forbes| Gill design agency was formed in London, and Adrian Frutiger joined Deberny & Peignot in Paris. There were new tools for the designer when the fibre tip pen was invented, and Letraset retailed its first sheet of dry transfer lettering. Offset lithography started its rise to pre-eminence and the first phototypeset book was produced; graphic reproduction techniques were refined, and computers became an industry reality.<br/>           In 1962 the British Design & Art Direction [D&AD] was founded as a professional association representing the UKís thriving design and advertising communities. It aimed to set creative standards, educate and inspire the next generation, and promote the importance of good design. At the same time the Kynoch Press in Birmingham was forging its post-war typographic reputation. Started in the 19th century the Press had evolved with the times, updated its fonts, equipped its pressroom with modern machines, and set-up a forward looking design studio run by Roger Denning.<br/>           In 1963 the D&AD and the Kynoch Press started collaborating on a short series of publications called Essays in design. Viewed retrospectively the Essays serve to mirror 60s graphic trends, form a microcosm of varying tastes and techniques, and reflect the diversity of graphic communication of that period. The Essays were produced because the well-respected Kynoch Press wanted to create a more contemporary image for itself, prove it was in the vanguard of post-war printing developments, and show it was daring enough to support and court controversy in design. On the other hand, the newly created D&AD still had to establish its reputation. Working on innovative publications with a quality printer such as the Kynoch Press helped consolidate the D&ADís place in 60s graphic design culture.<br/>           The Essays coincided with the launch of the annual influential D&AD exhibition. Each Essay was handed over either to award winners at the D&AD exhibition or to other carefully selected designers both known and those still to rise to eminence. The designers were not constrained by any brief and were given a free platform to express their views on any subject about which they felt something should be said.<br/>       </div>       <!--         layer three       //-->       <div class="column"> Any medium could be used and normal commercial considerations were disregarded. Only two constraints were imposed: a page format of A4 and a top limit on production costs. The Essays in design were published quarterly; a complimentary copy was given to customers and prospective customers who took an interest in design for printing. Additional copies were available at 6s (30 pence) each, or one guinea for four issues.<br/>           A glittering selection of 60s ëití people made up the contributors to the Essays in design. Tom Wolsely and William Klein produced the first of the Essays. Wolsely was a leading 60s advertising figure who art direct Michael Heseltineís Man about Town. Town as a rumbustious life-style magazine that epitomized 60s culture and which was the epicenter for the designer jet set including David Baily, Terence Donovan, Mary Quant and Twiggy. William Klein was the most important photographers in the 1960s and famous for his strikingly intense book of photographs, Life is good for you in New York. He also produced bizarrely original photography for Vogue where he took fashion out of the studio and into the streets. Terence Donovan contributed to the Essays in design as one of Britainís greatest photographers whose fashion shots revealed the changing face of London. Working for Elle and Marie-Claire in Paris, and Harperís Bazaar in Milan and New York, he created the 60s look with wonderful portraits that became the faces of their time.<br/>           Three British designers were persuaded to contribute to the Essays, they included: Derek Birdsall of BDMW Associates, a distinguished graphic designer of the 1960s who was responsible for the first Pirelli Calendar in 1964, the Monty Python books, and a large number of Penguin book jackets; Anthony Froshaug, a typographer who taught at the Watford School of Art, the Royal College of Art and the Central Schools of Arts and Crafts in London before setting-up as a one-man printer in Cornwall; and John Donegau, a London based art director.<br/>           Two North Americans each produced an Essay in design. Bob Gill was a graphic designer who started the London design office of Fletcher |Forbes| Gill, later returning to New York to write and design Beatlemania, a multi-media Broadway musical. He was given a D&AD Lifetime Achievement Award. Triple Oscar winner Richard Williams produced the final Essay. Williams was a Canadian animator, who found fame with his films Who Framed Roger Rabbit, The Return of the Pink Panther, and A Christmas Carol and who won over 250 international awards including three Oscars, three British Academy Awards, and an Emmy.<br/>           Thomas Wolsey and William Klein created the first Essay in design. They took the words of Ogden Nash as the title for their work:<br/> I think that I shall never see<br/> A billboard lovely as a tree.<br/> Indeed, unless the billboards fall<br/> Iíll never see a tree at all.<br/> Their response was a visual essay on advertising and the environment and comprised a montage of expressive city images from around the world. Each image contained letterforms generated by print.       </div>       <!--         layer four       //-->       <div>Essays</div>       <!--         layer five       //-->       <div>in</div>       <!--         layer six       //-->       <div>Design</div>     </body>   </html>
   7. Above, we have completed the basic CSS for the page. It should style the background color for the body, its margins, as well as the styles for the paragraphs (by adding the styles of the class). Now that we know what a class is, let's do another: there are two places where in the design below I want to make the text green. This will fit into my larger design for the page which you will see at the end. The first place is that little poem near the end of the paragraph text where it says: I think that I shall never see<br/> A billboard lovely as a tree.<br/> Indeed, unless the billboards fall<br/> Iíll never see a tree at all.<br/> And the second place is the word design at the very bottom of the page, but ONLY the word design. You might ask, therefore: How would we design only one word, or only certain lines of text within a paragraph and NOT the entire paragraph? The answer to that would be to use the <span></span> tag pair. This is a unique pair of tags that operates much like the <div></div> tag pair, in that they do little to alter the appearance of a page; however, whereas the <div></div> tag pair operates as a block level tag, the <span></span> tag pair operates as an inline level tag. Try to remember that a block tag is a tag that separates out text as a discreet blog, much like the <p></p> tag pair does, or the <h1></h1> tag pair does. These tags add space above and below the text between them and anything that comes after starts anew at the margin. An inline tag is a tag that does NOT do this: it does NOT separate out distinct blocks of text with spaces above and below but may operate within a line of text, as the deprecated <b></b> tag pair and the <i></i> tag pair do. The <span></span> tag pair allows us to mark a bit of text within a block and design it as we wish. Therefore, we can mark off those four lines at the end of that paragraph, or the one word 'design' as a span and then design it with a class. In a way, what we are doing then is creating a custom HTML tag by combining the <span></span> tag with some CSS. <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#000033;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         .column {font-family:Arial, Helvetica, sans-serif;                    font-size:8pt;                    color:#33aaff;                    word-spacing:#1pt;                    line-height:8pt;                    text-align:justify;}         .green {color:#00dd66;}       </style>     </head>     <body>       <!--         layer one       //-->       <div>by Caroline Archer<</div>       <!--         layer two       //-->       <div class="column"> All decades have a delusive face. Viewed from a distance we are captured by their different names, ascribe each with sundry characteristics, and label them. They are not, of course, really periods at all, no more than any other ten-year span would be.<br/>           The Swinging 60sí started to sway somewhere in the 50s and continued to reverberate to the 70s. It was a time when Britain rocked to the Beatles and Rolling Stones; was alarmed at the Great Train Robbery; and scandalized by the Frofumo affair. Mary Quant dressed the nationís youth and Terence Conran furnished their homes. David Bailey and Terence Donovan captured it all on camera and Oz magazine satirized it in print.<br/>           While 60s society was swinging, typography was not idle. A succession of sans serif typefaces arrived quickly on the scene: Helvetica, Optima, Folio, Univers, and Eurostile. New magazines were launched: Neue Graphik Design, Communications Arts, and Herb Lubalinís Eros started in New York. The Fletcher |Forbes| Gill design agency was formed in London, and Adrian Frutiger joined Deberny & Peignot in Paris. There were new tools for the designer when the fibre tip pen was invented, and Letraset retailed its first sheet of dry transfer lettering. Offset lithography started its rise to pre-eminence and the first phototypeset book was produced; graphic reproduction techniques were refined, and computers became an industry reality.<br/>           In 1962 the British Design & Art Direction [D&AD] was founded as a professional association representing the UKís thriving design and advertising communities. It aimed to set creative standards, educate and inspire the next generation, and promote the importance of good design. At the same time the Kynoch Press in Birmingham was forging its post-war typographic reputation. Started in the 19th century the Press had evolved with the times, updated its fonts, equipped its pressroom with modern machines, and set-up a forward looking design studio run by Roger Denning.<br/>           In 1963 the D&AD and the Kynoch Press started collaborating on a short series of publications called Essays in design. Viewed retrospectively the Essays serve to mirror 60s graphic trends, form a microcosm of varying tastes and techniques, and reflect the diversity of graphic communication of that period. The Essays were produced because the well-respected Kynoch Press wanted to create a more contemporary image for itself, prove it was in the vanguard of post-war printing developments, and show it was daring enough to support and court controversy in design. On the other hand, the newly created D&AD still had to establish its reputation. Working on innovative publications with a quality printer such as the Kynoch Press helped consolidate the D&ADís place in 60s graphic design culture.<br/>           The Essays coincided with the launch of the annual influential D&AD exhibition. Each Essay was handed over either to award winners at the D&AD exhibition or to other carefully selected designers both known and those still to rise to eminence. The designers were not constrained by any brief and were given a free platform to express their views on any subject about which they felt something should be said.<br/>       </div>       <!--         layer three       //-->       <div class="column"> Any medium could be used and normal commercial considerations were disregarded. Only two constraints were imposed: a page format of A4 and a top limit on production costs. The Essays in design were published quarterly; a complimentary copy was given to customers and prospective customers who took an interest in design for printing. Additional copies were available at 6s (30 pence) each, or one guinea for four issues.<br/>           A glittering selection of 60s ëití people made up the contributors to the Essays in design. Tom Wolsely and William Klein produced the first of the Essays. Wolsely was a leading 60s advertising figure who art direct Michael Heseltineís Man about Town. Town as a rumbustious life-style magazine that epitomized 60s culture and which was the epicenter for the designer jet set including David Baily, Terence Donovan, Mary Quant and Twiggy. William Klein was the most important photographers in the 1960s and famous for his strikingly intense book of photographs, Life is good for you in New York. He also produced bizarrely original photography for Vogue where he took fashion out of the studio and into the streets. Terence Donovan contributed to the Essays in design as one of Britainís greatest photographers whose fashion shots revealed the changing face of London. Working for Elle and Marie-Claire in Paris, and Harperís Bazaar in Milan and New York, he created the 60s look with wonderful portraits that became the faces of their time.<br/>           Three British designers were persuaded to contribute to the Essays, they included: Derek Birdsall of BDMW Associates, a distinguished graphic designer of the 1960s who was responsible for the first Pirelli Calendar in 1964, the Monty Python books, and a large number of Penguin book jackets; Anthony Froshaug, a typographer who taught at the Watford School of Art, the Royal College of Art and the Central Schools of Arts and Crafts in London before setting-up as a one-man printer in Cornwall; and John Donegau, a London based art director.<br/>           Two North Americans each produced an Essay in design. Bob Gill was a graphic designer who started the London design office of Fletcher |Forbes| Gill, later returning to New York to write and design Beatlemania, a multi-media Broadway musical. He was given a D&AD Lifetime Achievement Award. Triple Oscar winner Richard Williams produced the final Essay. Williams was a Canadian animator, who found fame with his films Who Framed Roger Rabbit, The Return of the Pink Panther, and A Christmas Carol and who won over 250 international awards including three Oscars, three British Academy Awards, and an Emmy.<br/>           Thomas Wolsey and William Klein created the first Essay in design. They took the words of Ogden Nash as the title for their work:<br/> <span class="green">I think that I shall never see<br/> A billboard lovely as a tree.<br/> Indeed, unless the billboards fall Iíll never see a tree at all.</span><br/> Their response was a visual essay on advertising and the environment and comprised a montage of expressive city images from around the world. Each image contained letterforms generated by print.       </div>       <!--         layer four       //-->       <div>Essays</div>       <!--         layer five       //-->       <div>in</div>       <!--         layer six       //-->       <div class="green">Design</div>     </body>   </html>
   8. The next step also involves something new, a completely new kind of stylesheet. So far, we have worked with only one type of CSS styles, those known as embedded styles, which are when the styles are typed in the head section between <span></span> tags. These styles are very efficient and useful when you want to style document-wide styles. What does that mean? Well, document-wide styles refer to those styles that affect the entire document, styles attached to selectors that are used throughout a particular webpage, such as the body selector, or tag selectors, such as when you create styles for all of a particular tag on the page. We do this when in our embedded stylesheet we type h1 or p as selectors. These two selectors will apply styles to ALL <h1> and <p> tags respectively on the page. Sometimes, however, you want a style or set of styles to occur only one time in one place. To set these styles, then, it makes no sense to use an embedded stylesheet for such styles. Instead, we use what are known as inline styles, and we type them directly within the particular tag where we want the style applied. In our design below, there is one instance where it would be most beneficial to use an inline style such as this, and that is in the first layer, in the first pair of <div></div> tags as the code below demonstrates:       <!--         layer one       //-->       <div style="font-family:Arial, Helvetica, sans serif; font-size:8pt; color:#0066ff;">by Caroline Archer<</div> Notice that the style above in red is typed directly within the <div> tag following the style attribute and that the entire set of styles is set within quotes and typed as you normally would type it above in an embedded stylesheet with the same punctuation.
   9. The next step should be familiar, we are going to create free-floating layers with CSS IDs. We are going to skip the first layer, the one above, which really isn't a layer at all, and begin with layer two. Following that logic, we will name our IDs starting with #layerTwo. Let's begin by typing our IDs in the embedded stylesheet at the top in the head section: <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#000033;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         .column {font-family:Arial, Helvetica, sans-serif;                    font-size:8pt;                    color:#33aaff;                    word-spacing:#1pt;                    line-height:8pt;                    text-align:justify;}         .green {color:#00dd66;}         #layerTwo {width:430px;                    height:550px;                    top:20px;                    left:100px;                    position:absolute;                    z-Index:2;                    border-style:solid;                    border-width:1px;                    border-color:#ff0000;}         #layerThree {width:450px;                    height:550px;                    top:20px;                    left:545px;                    position:absolute;                    z-Index:3;                    border-style:solid;                    border-width:1px;                    border-color:#ff0000;}         #layerFour {width:525px;                    height:30px;                    top:440px;                    left:5px;                    position:absolute;                    z-Index:4;                    color:#66ccff;                    font-family:Arial,Helvetica,sans-serif;                    font-size:18pt;                    font-weight:bold;                    letter-spacing:59pt;                    text-align:right;                    border-style:solid;                    border-width:1px;                    border-color:#ff0000;}         #layerFive {width:60px;                    height:30px;                    top:440px;                    left:545px;                    position:absolute;                    z-Index:5;                    color:#33aaff;                    font-family:Arial,Helvetica,sans-serif;                    font-size:16pt;                    font-weight:bold;                    letter-spacing:10pt;                    text-align:left;                    border-style:solid;                    border-width:1px;                    border-color:#ff0000;}         #layerSix {width:450px;                    height:120px;                    top:460px;                    left:545px;                    position:absolute;                    z-Index:6;                    font-family:Arial, Helvetica, sans-serif;                    font-size:76pt;                    letter-spacing:20pt;                    text-align:left;                    border-style:solid;                    border-width:1px;                    border-color:#ff0000;}       </style>     </head>
   10. Now, let us apply these styles using IDs applied to the tags below:     <body>       <!--         layer one       //-->       <div style="font-family:Arial, Helvetica, sans serif; font-size:8pt; color:#0066ff;">by Caroline Archer<</div>       <!--         layer two       //-->       <div id="layerTwo" class="column"> All decades have a delusive face. Viewed from a distance we are captured by their different names, ascribe each with sundry characteristics, and label them. They are not, of course, really periods at all, no more than any other ten-year span would be.<br/>           The Swinging 60sí started to sway somewhere in the 50s and continued to reverberate to the 70s. It was a time when Britain rocked to the Beatles and Rolling Stones; was alarmed at the Great Train Robbery; and scandalized by the Frofumo affair. Mary Quant dressed the nationís youth and Terence Conran furnished their homes. David Bailey and Terence Donovan captured it all on camera and Oz magazine satirized it in print.<br/>           While 60s society was swinging, typography was not idle. A succession of sans serif typefaces arrived quickly on the scene: Helvetica, Optima, Folio, Univers, and Eurostile. New magazines were launched: Neue Graphik Design, Communications Arts, and Herb Lubalinís Eros started in New York. The Fletcher |Forbes| Gill design agency was formed in London, and Adrian Frutiger joined Deberny & Peignot in Paris. There were new tools for the designer when the fibre tip pen was invented, and Letraset retailed its first sheet of dry transfer lettering. Offset lithography started its rise to pre-eminence and the first phototypeset book was produced; graphic reproduction techniques were refined, and computers became an industry reality.<br/>           In 1962 the British Design & Art Direction [D&AD] was founded as a professional association representing the UKís thriving design and advertising communities. It aimed to set creative standards, educate and inspire the next generation, and promote the importance of good design. At the same time the Kynoch Press in Birmingham was forging its post-war typographic reputation. Started in the 19th century the Press had evolved with the times, updated its fonts, equipped its pressroom with modern machines, and set-up a forward looking design studio run by Roger Denning.<br/>           In 1963 the D&AD and the Kynoch Press started collaborating on a short series of publications called Essays in design. Viewed retrospectively the Essays serve to mirror 60s graphic trends, form a microcosm of varying tastes and techniques, and reflect the diversity of graphic communication of that period. The Essays were produced because the well-respected Kynoch Press wanted to create a more contemporary image for itself, prove it was in the vanguard of post-war printing developments, and show it was daring enough to support and court controversy in design. On the other hand, the newly created D&AD still had to establish its reputation. Working on innovative publications with a quality printer such as the Kynoch Press helped consolidate the D&ADís place in 60s graphic design culture.<br/>           The Essays coincided with the launch of the annual influential D&AD exhibition. Each Essay was handed over either to award winners at the D&AD exhibition or to other carefully selected designers both known and those still to rise to eminence. The designers were not constrained by any brief and were given a free platform to express their views on any subject about which they felt something should be said.<br/>       </div>       <!--         layer three       //-->       <div id="layerThree" class="column"> Any medium could be used and normal commercial considerations were disregarded. Only two constraints were imposed: a page format of A4 and a top limit on production costs. The Essays in design were published quarterly; a complimentary copy was given to customers and prospective customers who took an interest in design for printing. Additional copies were available at 6s (30 pence) each, or one guinea for four issues.<br/>           A glittering selection of 60s ëití people made up the contributors to the Essays in design. Tom Wolsely and William Klein produced the first of the Essays. Wolsely was a leading 60s advertising figure who art direct Michael Heseltineís Man about Town. Town as a rumbustious life-style magazine that epitomized 60s culture and which was the epicenter for the designer jet set including David Baily, Terence Donovan, Mary Quant and Twiggy. William Klein was the most important photographers in the 1960s and famous for his strikingly intense book of photographs, Life is good for you in New York. He also produced bizarrely original photography for Vogue where he took fashion out of the studio and into the streets. Terence Donovan contributed to the Essays in design as one of Britainís greatest photographers whose fashion shots revealed the changing face of London. Working for Elle and Marie-Claire in Paris, and Harperís Bazaar in Milan and New York, he created the 60s look with wonderful portraits that became the faces of their time.<br/>           Three British designers were persuaded to contribute to the Essays, they included: Derek Birdsall of BDMW Associates, a distinguished graphic designer of the 1960s who was responsible for the first Pirelli Calendar in 1964, the Monty Python books, and a large number of Penguin book jackets; Anthony Froshaug, a typographer who taught at the Watford School of Art, the Royal College of Art and the Central Schools of Arts and Crafts in London before setting-up as a one-man printer in Cornwall; and John Donegau, a London based art director.<br/>           Two North Americans each produced an Essay in design. Bob Gill was a graphic designer who started the London design office of Fletcher |Forbes| Gill, later returning to New York to write and design Beatlemania, a multi-media Broadway musical. He was given a D&AD Lifetime Achievement Award. Triple Oscar winner Richard Williams produced the final Essay. Williams was a Canadian animator, who found fame with his films Who Framed Roger Rabbit, The Return of the Pink Panther, and A Christmas Carol and who won over 250 international awards including three Oscars, three British Academy Awards, and an Emmy.<br/>           Thomas Wolsey and William Klein created the first Essay in design. They took the words of Ogden Nash as the title for their work:<br/> <span class="green">I think that I shall never see<br/> A billboard lovely as a tree.<br/> Indeed, unless the billboards fall Iíll never see a tree at all.</span><br/> Their response was a visual essay on advertising and the environment and comprised a montage of expressive city images from around the world. Each image contained letterforms generated by print.       </div>       <!--         layer four       //-->       <div id="layerFour">Essays</div>       <!--         layer five       //-->       <div id="layerFive">in</div>       <!--         layer six       //-->       <div id="layerSix" class="green">Design</div>     </body>   </html> And that is that. Voila! Well, almost. Those red borders around the layers will have to go. I only put them there so that you could see the particular layers and how they floated above and around the page. We don't really want them there. The viewer does NOT have to see how the page is constructed. To eliminate them, in each of the IDs in the embedded stylesheet just make the border-width equal to 0px and the red boxes will disappear from view, although the layers will remain.

Spring 2009 week 8: 3/11

Hi everybody, So, it was a very strange class this week. Hopefully, our next class will not be so strange and limited. We will spend part of the class covering and discussing your design work again by putting up the work on the board. I expect everyone to participate in this and I will not approve the design of a final project until the idea is presented to the class this way at least two times. This means that those of you who put three examples up this past week are only required to display your work one more time and you only have to show me one example of a design. You may print out and show more examples to me and the class if you wish to have more comments, but it is not required.   Those of you who did not put up work this week still have to do so two more times, hopefully next week and the week after. The longer you wait, the less time you will have to complete your final projects. After the two times, I will speak to you individually about the progress of your projects over the remaining weeks of the term.   For next week's class, I will NOT wait to begin. I will expect all of you to have your work printed out by the time class begins (at 6:05pm) and we will start at the normal time, usually about 10 or 15 minutes later. We will discuss whatever work is up on the board and then proceed onto the lesson. See you all next week, Carter-

1. TOPICS:
   • Creating a Basic Webpage with CSS
2. HOMEWORK: Do the questions below as this week's homework;
3. QUESTIONS: Here are some questions to help guide you through this weeks' material—chapters 3, 5, and 7 on CSS:
   1. How many fonts can you specify for the font-family CSS property?
   2. According to the book (chapter 5), what are the four most widely supported fonts on computers?
   3. Of the two codes we have been covering in class up to now, which one is to be used mainly for structuring or organizing the page content and which is to be used mainly for designing or presenting the page content?
   4. What would the purpose of consistent presentation of your individual web pages throughout your site be—for example: designing the text in the paragraphs the same in all the pages, designing the main headings in all the pages the same, making the links in all the pages the same?
   5. What is the difference between an internal and an external style sheet in where they are typed?
   6. What are two ways to link style sheets to a web page?
   7. What is a CSS rule?
   8. What are the two main parts of any CSS rule?
   9. What is a selector in CSS?
   10. Other than tag names, what are two other types of CSS selectors?
   11. What are two differences between IDs and Classes?
   12. What character must be typed before the name of an ID? Before the name of a class?
   13. How do you apply a class or an id so that the styles show up in a page?
   14. Name five (5) examples of CSS properties that we have used in class.
   15. Name three (3) examples of CSS selectors that we have used in class.
   16. What does the <div>≶/div> tag pair do?
   17. How many different types of borders can you create with CSS? What are they?
   18. What is padding?
   19. Name three (3) places in a web page that you can set the background color.
   20. Type an example of the code for setting a background image using CSS. In this code, you must also determine if the image is to be repeated, and where it is to be positioned on the page.
4. INTRODUCE —Creating a simple page layout using CSS: In this week's class, what I did was quickly lead you through steps to creating a very simple page using only CSS. It is very similar to something we did in class a couple weeks ago, so hopefully it wasn't completely unfamiliar to many of you. Some of the concepts we are covering are not easy to grasp at first, but once you start doing so, I believe they will become more and more obvious and, therefore, much easier.
   1. As we have learned up to now, we began with the basic elements of any webpage:
      1. the DOCTYPE: The DOCTYPE declaration defines the document type, which means what type of code you will be typing. For the purposes of this class, we will be typing XHTML strict, and the particular DOCTYPE declaration for this kind of document is:
      2. the Head section: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This section is where information about the document might appear: the subject (title), the date, who created it, and various other data about the document that follows.
      3. the Body section: This section is where all the information of the document itself appears: all the text, the images, and any other multimedia content is referenced here between the body tags.
      The basic document structure is as follows: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body> ... </body>   </html>
   2. In the following step, I typed some basic text elements into the document: a heading, a couple of paragraphs, and a few links to other pages (I didn't demonstrate the other pages, but they would have been created similarly). <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <a href="one.html">one</a>       <a href="two.html">two</a>       <a href="three.html">three</a>       <h1>Example Heading Here>/h1>       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>       <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>     </body>   </html>
   3. After this, I wanted to label each part of the body of the document that I had typed. This is done for two reasons: later on, after some time has passed, I might forget what I had intended, so typing myself some notes within the code is often very useful. Also, it helps me to organize the body into different sections in my own head so that later on I might be able to treat them differently. Usually, this is a very logical and straightforward process as follows: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <a href="one.html">one</a>       <a href="two.html">two</a>       <a href="three.html">three</a>       <!--         below here is         the main heading         of the page       //-->       <h1>Example Heading Here>/h1>       <!--         below here are         the paragraphs         of the page       //-->       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>       <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>     </body>   </html>
   4. Next, I create and formalize these sections that I have mapped out in my head by placing <div></div> tag pairs around each section. By doing so, I will be able to manipulate each section or division separately later on when working with CSS. Recall that these tags do very little on their own, so until we add the CSS, the appearance of the page will change very little: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div>         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div>       <!--         below here is         the main heading         of the page         //-->       <div>         <h1>Example Heading Here>/h1>       </div>       <!--         below here are         the paragraphs         of the page       //-->       <div>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>         <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>       </div>     </body>   </html>
   5. Now that we have all the HTML on the page, we can begin to work on the CSS. As you recall, we have been typing our CSS in the head section of our document below the title between a pair of <style></style> tags. Although this has been the only place that we have typed CSS in class, it is possible, in fact, to put CSS in two other places: in separate CSS documents that are linked to the HTML document; and directly within a specific HTML tag within the body of a document. Nonetheless, in this class, we continued with placing the CSS code in the head section. This sort of CSS is known as an embedded stylesheet: <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#ffffaa;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         a:link    {color:#000000;                    text-decoration:none;}         a:visited {color:#660000;                    text-decoration:none;}         a:hover   {color:#000000;                    text-decoration:underline;}         a:active  {color:#ff0000;                    text-decoration:underline;}         h1        {color:#ffaa00;                    font-family:Arial, Helvetica, sans-serif;                    font-size:36pt;                    letter-spacing:5pt;                    word-spacing:10pt;                    text-align:right;}         p         {color:#666600;                    font-family:Arial, Helvetica, sans-serif;                    font-size:20pt;                    line-height:9pt;}                    text-align:justify;}       </style>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div>         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div>       <!--         below here is         the main heading         of the page         //-->       <div>         <h1>Example Heading Here>/h1>       </div>       <!--         below here are         the paragraphs         of the page       //-->       <div>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>         <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>       </div>     </body>   </html>
   6. Above, we have completed the basic CSS for the page. It should style the background color for the body, its margins, the styles for the links, as well as the stlyes for the main heading and the paragraph.   All seems fairly ordinary; however, one thing you might have noticed that seemed peculiar: the fact that the heading is aligned to the right. There is a reason for that: in preparing this exercise for the class, I had an idea of how the page would end up looking. Since we are not yet done with the design, you do not yet have the whole picture of the site. Once complete, you will see that the best alignment for the heading is indeed to the right.   Next, we are going to design the menu bar at the top of the page. I have done this once before a few weeks ago in class. To do so, I created what is known as a CSS ID. An id is a selector that is NOT connected with any particular HTML tag. Therefore, when used, it does NOT style anything at first. It, along with CSS CLASSES have the unique ability to style ANY TAG YOU WANT. The difference between IDs and Classes is that IDs may only be applied once; whereas, classes may be applied as many times to as many different tags as you like. We will cover classes another week, so here we will stick our demonstration to IDs.   To make the explanation brief about why I chose one over the other, hwoever, I determined that since there would only be one menu bar, and since IDs may only be used once in a page, I thought my menu bar a perfect use for an ID. Let us first then type the styles that go with the ID selector: <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#ffffaa;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         a:link    {color:#000000;                    text-decoration:none;}         a:visited {color:#660000;                    text-decoration:none;}         a:hover   {color:#000000;                    text-decoration:underline;}         a:active  {color:#ff0000;                    text-decoration:underline;}         h1        {color:#ffaa00;                    font-family:Arial, Helvetica, sans-serif;                    font-size:36pt;                    letter-spacing:5pt;                    word-spacing:10pt;                    text-align:right;}         p         {color:#666600;                    font-family:Arial, Helvetica, sans-serif;                    font-size:10pt;                    line-height:9pt;                    text-align:justify;}         #menu     {background-color:#ffcc00;                    font-family:Courier, Courier New, monospace;                    font-size:16pt;                    font-weight:bold;                    letter-spacing:5pt;                    word-spacing:10pt;                    padding-top:20px;                    padding-bottom:20px;                    padding-left:120px;                    border-bottom-width:10px;                    border-bottom-style:dashed;                    border-bottom-color:#000000;}       </style>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div>         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div>       <!--         below here is         the main heading         of the page         //-->       <div>         <h1>Example Heading Here</h1>       </div>       <!--         below here are         the paragraphs         of the page       //-->       <div>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>         <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.</p>       </div>     </body>   </html>
   7. The next step is simple: all we have to do is APPLY the ID to an appropriate and particular tag below. You may ask, 'What makes a particular tag the appropriate one?' and my response would simply be that IDs are generally applied to <div></div> tags. Those tags below, as I have mentioned, do very little by themselves. They haven't done much to the way the page looks when viewed with the browser. They don't hold any particular set of instructions for the browser to format the page in any particular way. In a way they are blank tags put there for YOU, the designer, to format the way you want.   Let us look at it this way: we know that we want a menu bar at the top of the page. We also know that what we want in the menu bar are the links. Furthermore, in our code, the links are set between the <div></div> tags. That means that if I apply the menu id styles above to the <div></div> tags, then I will magically have my menu bar.   Great, so let's apply the ID to the tag. The way we do this is by setting an attribute within the <div></div> tag as demonstrated below (since our code is getting quite long, I am only going to put the necessary tags below each time from now on instead of all of it each time I need to modify it):     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div id="menu">         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div> And that is that. Voila! We have a menu bar! Just save this code and refresh your browser.
   8. But now I would like to further design the way the text in the body section looks; more specifically, the main heading and the paragraphs. What I would like to do is to move them around on the page into EXACTLY THE SPOT THAT I WANT, and the only way to do this is to create even more IDS that I will apply to the <div></div> tags:       <style type="text/css">         body     {background-color:#ffffaa;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         a:link    {color:#000000;                    text-decoration:none;}         a:visited {color:#660000;                    text-decoration:none;}         a:hover   {color:#000000;                    text-decoration:underline;}         a:active  {color:#ff0000;                    text-decoration:underline;}         h1        {color:#ffaa00;                    font-family:Arial, Helvetica, sans-serif;                    font-size:36pt;                    letter-spacing:5pt;                    word-spacing:10pt;                    text-align:right;}         p         {color:#666600;                    font-family:Arial, Helvetica, sans-serif;                    font-size:20pt;                    line-height:9pt;}                    text-align:justify;}         #menu     {background-color:#ffcc00;                    font-family:Courier, Courier New, monospace;                    font-size:16pt;                    font-weight:bold;                    letter-spacing:5pt;                    word-spacing:10pt;                    padding-top:20px;                    padding-bottom:20px;                    padding-left:120px;                    border-bottom-width:10px;                    border-bottom-style:dashed;                    border-bottom-color:#000000;}       #title     {position:absolute;                    width:200px;                    height:150px;                    top:50px;                    left:120px;                    z-index:2;}       #paragraph    {position:absolute;                    width:500px;                    top:170px;                    left:350px;                    z-index:3;}       </style> And these can be applied just as the previous id, only to the other two <div></div> tags, the title to the heading, and the paragraph to the paragraphs.