Fundamentals of Internet Applications: Summer 2009 week 12: 7/29, Wed 6:00

Hi everyone, Below you will find a posting for another use of CSS in PAGE LAYOUT. Once again, many of you found the design 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 another example of what could be achieved by using CSS. Below, in this week's posting, is yet another. I promise that the example below is very similar to what we did in class. 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 III: Starting the week before last, 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. This week I will check homework for the past three classes. 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 GALLERY PAGES. For more information of what exactly should be on these pages, see below the heading of that name.

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 the previous two weeks, 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, but a little less complex. Hopefully, the use of CSS to layout pages is beginning to be a bit more clear to you.
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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. the <html> tag and the additional code that goes inside of that that I gave you a couple weeks ago: <html xmlns="http://www.w3.org/1999/html">
  3. the Head section: 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. This contains the title and the new meta tags: <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> </style> </head>
  4. 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> <meta ... /> <meta ... /> <meta ... /> <style ...> ... </style> </head> <body> ... </body> </html>
2. In the following step, you will find a document very similar, but not exactly like the page that we designed in class this week.. <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> <div> <div> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div> <div> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div> <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div> <div>Copyright 2009 by Carter Johnson</div> </div> </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>  <div>  <div> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <div> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div>Copyright 2009 by Carter Johnson</div> </div> </body> </html>
4. Next, I wanted to add some of the standard CSS to the page. This first bit of CSS is simply to style the body and the text in the page, along with the links. This should be very familiar to you all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> body {margin:0px; background:#e9e9e9;} h1 {margin:0px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#0066aa;} p {color:#666633; font-size:10pt; font-family:Arial, Helvetica, sans-serif; line-height:10pt;} img {border-style:solid; border-width:2px; border-color:#999966;} a:link {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704a21;} a:visited {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704A21;} a:hover {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:underline; color:#000000;} </style> </head> <body>  <div>  <div> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <div> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div>Copyright 2009 by Carter Johnson</div> </div> </body> </html>
5. Now that we have all the basic CSS, let's add our first class. Recall, these are similar to IDs, but unlike IDs they may be applied in the page many times if necessary. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> body {margin:0px; background:#e9e9e9;} h1 {margin:0px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#0066aa;} p {color:#666633; font-size:10pt; font-family:Arial, Helvetica, sans-serif; line-height:10pt;} img {border-style:solid; border-width:2px; border-color:#999966;} a:link {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704a21;} a:visited {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704A21;} a:hover {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:underline; color:#000000;} .wrapper {font-weight:bold; width:100%; margin:0px; background-color:#cccc99; line-height:150%;} </style> </head> <body>  <div class="wrapper">  <div> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <div> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div>Copyright 2009 by Carter Johnson</div> </div> </body> </html>
6. Now that we have applied the styles to the wrapper class, let's continue with the next one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> body {margin:0px; background:#e9e9e9;} h1 {margin:0px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#0066aa;} p {color:#666633; font-size:10pt; font-family:Arial, Helvetica, sans-serif; line-height:10pt;} img {border-style:solid; border-width:2px; border-color:#999966;} a:link {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704a21;} a:visited {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704A21;} a:hover {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:underline; color:#000000;} .wrapper {font-weight:bold; width:100%; margin:0px; background-color:#cccc99; line-height:150%;} .menu {width:100%; text-align:center;; padding-top:20px;; background-color:#66aacc; border-bottom-style:solid; border-border-bottom-width:10px; border-border-bottom-color:#0066aa; border-word-spacing:10pt;} </style> </head> <body>  <div class="wrapper">  <div class="menu"> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <div> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div>Copyright 2009 by Carter Johnson</div> </div> </body> </html>
7. Now that we have applied the styles to the wrapper class, let's continue with the next one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> body {margin:0px; background:#e9e9e9;} h1 {margin:0px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#0066aa;} p {color:#666633; font-size:10pt; font-family:Arial, Helvetica, sans-serif; line-height:10pt;} img {border-style:solid; border-width:2px; border-color:#999966;} a:link {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704a21;} a:visited {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704A21;} a:hover {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:underline; color:#000000;} .wrapper {font-weight:bold; width:100%; margin:0px; background-color:#cccc99; line-height:150%;} .menu {width:100%; text-align:center;; padding-top:20px;; background-color:#66aacc; border-bottom-style:solid; border-border-bottom-width:10px; border-border-bottom-color:#0066aa; border-word-spacing:10pt;} .footer {padding:0.5em; padding-left:15px; color:#cccc99; font-family:Arial, Helvetica, sans-serif; background-color:#0066aa; clear:left; </style> </head> <body>  <div class="wrapper">  <div class="menu"> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <div> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div class="footer">Copyright 2009 by Carter Johnson</div> </div> </body> </html>
8. Next, we will create and apply the styles for the rows of images. We only need apply it one time: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> body {margin:0px; background:#e9e9e9;} h1 {margin:0px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#0066aa;} p {color:#666633; font-size:10pt; font-family:Arial, Helvetica, sans-serif; line-height:10pt;} img {border-style:solid; border-width:2px; border-color:#999966;} a:link {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704a21;} a:visited {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704A21;} a:hover {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:underline; color:#000000;} .wrapper {font-weight:bold; width:100%; margin:0px; background-color:#cccc99; line-height:150%;} .menu {width:100%; text-align:center;; padding-top:20px;; background-color:#66aacc; border-bottom-style:solid; border-border-bottom-width:10px; border-border-bottom-color:#0066aa; border-word-spacing:10pt;} .footer {padding:0.5em; padding-left:15px; color:#cccc99; font-family:Arial, Helvetica, sans-serif; background-color:#0066aa; clear:left;} .row {float:left; padding-width:660px; margin:0px; padding:1em; </style> </head> <body>  <div class="wrapper">  <div class="menu"> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <divclass="row"> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div class="footer">Copyright 2009 by Carter Johnson</div> </div> </body> </html> The last class we will add is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <meta name=quot;keywords" content="dma110, html, css, tci, web design"/> <meta name=quot;description" content="dma110, week11, class exercise"/> <meta http-equiv=quot;content-type" content="text/html; charset=utf-8"/> <title<midterm project> <style type="text/css"> body {margin:0px; background:#e9e9e9;} h1 {margin:0px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#0066aa;} p {color:#666633; font-size:10pt; font-family:Arial, Helvetica, sans-serif; line-height:10pt;} img {border-style:solid; border-width:2px; border-color:#999966;} a:link {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704a21;} a:visited {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:none; color:#704A21;} a:hover {font-weight:bold; font-family:"Arial Black"; font-size:22pt; text-decoration:underline; color:#000000;} .wrapper {font-weight:bold; width:100%; margin:0px; background-color:#cccc99; line-height:150%;} .menu {width:100%; text-align:center;; padding-top:20px;; background-color:#66aacc; border-bottom-style:solid; border-border-bottom-width:10px; border-border-bottom-color:#0066aa; border-word-spacing:10pt;} .footer {padding:0.5em; padding-left:15px; color:#cccc99; font-family:Arial, Helvetica, sans-serif; background-color:#0066aa; clear:left;} .row {float:left; padding-width:660px; margin:0px; padding:1em; .sidebar {border-left:1px solid #0066aa; margin-left:690px; padding:1em; text-align:justify; </style> </head> <body>  <div class="wrapper">  <div class="menu"> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> <a href="#">five</a> </div>  <divclass="row"> <img src="images/small/p4sm1.gif"/> <img src="images/small/p5sm1.gif"/> <img src="images/small/p6sm1.gif"/> <img src="images/small/p7sm1.gif"/> <img src="images/small/p8sm1.gif"/> <img src="images/small/p9sm1.gif"/> <br/> <br/> <img src="images/small/p10sm1.gif"/> <img src="images/small/p11Asm1.gif"/> <img src="images/small/p11Bsm1.gif"/> <img src="images/small/p12sm1.gif"/> <img src="images/small/p13sm1.gif"/> <img src="images/small/p14sm1.gif"/> <br/> <br/> <img src="images/small/p16sm1.gif"/> <img src="images/small/p20sm1.gif"/> <img src="images/small/p21sm1.gif"/> <img src="images/small/p28sm1.gif"/> <img src="images/small/p29sm1.gif"/> <img src="images/small/p31sm1.gif"/> </div>  <div class="sidebar"> <h1>image gallery 1</h1> <p>Pellentesque justo nulla, bibendum quis vulputate sit amet, rhoncus et justo. Vivamus at ante a dui tincidunt iaculis sit amet et nisi. Etiam dolor tellus, ultricies id malesuada a, mattis sit amet metus. Sed tellus mi, ornare fermentum posuere at, dapibus at quam. Sed ac lorem eu augue tincidunt consectetur ac gravida ante. Nulla ac gravida nulla. In nec lorem eget nibh egestas adipiscing id sit amet nibh. Suspendisse congue ante non sem dictum dignissim. Sed feugiat ante risus, quis consectetur libero. In tellus lectus, vestibulum sit amet tristique at, adipiscing ut sapien. Curabitur est ipsum, fringilla ut congue ut, sollicitudin sed augue. Vivamus ut justo enim, a venenatis ligula. Aliquam erat volutpat. Phasellus et ante in mauris auctor condimentum. Nunc imperdiet iaculis dui id pellentesque. Duis mattis faucibus augue, sit amet bibendum ante vulputate nec. Praesent justo orci, dapibus a rhoncus at, tincidunt ac nunc. Vivamus purus risus, vehicula ut tincidunt sit amet, viverra vel diam. Praesent tristique ullamcorper feugiat. Duis euismod egestas mauris, eu dignissim risus feugiat vitae.</p> </div>  <div class="footer">Copyright 2009 by Carter Johnson</div> </div> </body> </html>

Fundamentals of Internet Applications

Saturday, August 01, 2009

Summer 2009

week 12: 7/29, Wed 6:00 - 9:00

No comments:

Post a Comment

Google Analytics

Saturday, August 01, 2009

Summer 2009 week 12: 7/29, Wed 6:00 - 9:00

No comments:

Post a Comment

Google Analytics

Summer 2009

week 12: 7/29, Wed 6:00 - 9:00