Fundamentals of Internet Applications: Summer 2009 week 11: 7/22, Wed 6:00

Hi everyone, Below you will find a posting for another use of CSS. In our last class, I am certain that many of you found the whole process a bit complicated and confusing; but please do not allow that fact to discourage you. Please just be diligent and try to apply WHAT YOU DO UNDERSTAND AND KNOW. Our last class was just to show you one example of what could be achieved by using CSS. Below, in this week's posting, is another. I promise that the example below is much easier to follow and understand. Due in our next class is what you see in the RED BOXES below. Carter-

TOPICS:
- Creating a Basic Webpage with CSS
HOMEWORK—Final Project, Part II: Starting last week, the homework for each class is part of the final project. Each part will be due 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 ARTISTS PAGES. For more information of what exactly should be on these pages, see below the heading of that name. SEE BELOW FOR FURTHER INFORMATION ABOUT THE ARTISTS PAGES as well as all of the other pages.

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.

CONTENT REQUIREMENTS:

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).
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. The text for these two pages is at the link below. Each page will contain half of the artists. LINK CLICK HERE for the text for the ARTISTS PAGES;

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.

LINK image 1;		LINK image 2;
LINK image 3;		LINK image 4;
LINK image 5;		LINK image 6;
LINK image 7;		LINK image 8;
LINK image 9;		LINK image 10;
LINK image 11;		LINK image 12;
LINK image 13;		LINK image 14;
LINK image 15;		LINK image 16;
LINK image 17;		LINK image 18;
LINK image 19;		LINK image 20;

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.
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.

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.
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.

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>  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.<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/>  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.  Essays in  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:  Essays  in  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>  <div>by Caroline Archer<</div>  <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>  <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>  <div>Essays</div>  <div>in</div>  <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>  <div>by Caroline Archer<</div>  <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>  <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>  <div>Essays</div>  <div>in</div>  <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>  <div>by Caroline Archer<</div>  <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>  <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>  <div>Essays</div>  <div>in</div>  <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:  <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>  <div style="font-family:Arial, Helvetica, sans serif; font-size:8pt; color:#0066ff;">by Caroline Archer<</div>  <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>  <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>  <div id="layerFour">Essays</div>  <div id="layerFive">in</div>  <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.

Fundamentals of Internet Applications

Sunday, July 26, 2009

Summer 2009

week 11: 7/22, Wed 6:00 - 9:00

No comments:

Post a Comment

Google Analytics

Sunday, July 26, 2009

Summer 2009 week 11: 7/22, Wed 6:00 - 9:00

No comments:

Post a Comment

Google Analytics

Summer 2009

week 11: 7/22, Wed 6:00 - 9:00