- TOPICS:
- Creating a Basic Webpage with CSS
- 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.
- 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.
- As we have learned up to now, we began with the basic elements of any webpage:
- 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:
- 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.
- 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.
- 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> - 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>
- 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
- 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>
- 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>
- 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>
- 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.
- 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>
- 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.
- As we have learned up to now, we began with the basic elements of any webpage:
Sunday, March 22, 2009
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-
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment