1. week 1
  2. week 2
  3. week 3
  4. week 4
  5. week 5
  6. week 6
  7. week 7
  8. week 8
  9. week 9
  10. week 10
  11. week 11
  12. week 12
  13. week 13

Thursday, July 16, 2009

Summer 2009

week 10: 7/15, Wed 6:00 - 9:00

Hi everybody, I spoke with about half of you in class this last night, and for those of you with whom I did not speak, we will talk at the beginning of our next class about your designs so far. That does not mean you should delay beginning. On the contrary, you should take off, full-speed-ahead. I will work with you in class to make whatever improvements or corrections you think you will need to make. This weeks posting consists of an example of how to create a VERY basic page using CSS. Use it as a guide. For most of you, your sites will be significantly more complex than this. Please notice below all of the guidelines, including text and images for the website that you will be creating for me. Let me know if you have any questions regarding it. See you all next week, Carter- For extra credit, you must do the questions below as well as show me significant progress on your final project.
  1. TOPICS:
    • LINK   Homework
    • LINK   Final Project;
      • LINK   Content Requirements;
      • LINK   Technical Requirements;
      • LINK   Design Requirements;
    • LINK   Questions
    • LINK   Creating a Basic Webpage with CSS
     
  2. HOMEWORK—Final Project, Part I: Starting this week, the homework for each class is part of the final project. Each part will be do one week from the time that it was assigned. This means that the assignment for this week will be due in the next class. Each week I will assign a new part to the website. If you produce these assignments on time each week, you will have accumulated you will receive a decent homework grade.    The site that we are going to produce, as you should know, is for an ART GALLERY named Alpha Gallery. This week, you should design the title and the navigation for the site and keep in mind the comments that I made during class this week.    If you did NOT print out your mockups, if you were late to class and didn't tape up your mockups, or if you were absent, then you must make certain that you bring one printed mockup to tape up at the beginning of class for us to discuss.    If you brought one this week and taped it up and showed it to me and the rest of the class, then you should just continue working on producing your design in HTML and CSS.
    1. Due in class next week: You must produce your design in XHTML and CSS and name it index.html. You must attempt to design this page, otherwise known as the home page, using the image I provided to you two weeks ago as inspiration
    2. Due in class next week: when complete, you must make seven (7) ADDITIONAL copies of this file (copy & paste them) and give them the following names: gal_01.html, gal_02.html, artists_01.html, artists_02.html, about.html, visit.html, and exhib.html. As a result, all the pages will be exactly alike for the time being. SEE BELOW FOR FURTHER INFORMATION ABOUT THE INDEX/HOME PAGE as well as all of the other pages.
     
  3. FINAL PROJECT: Information
    • The site that you are going to produce is for an art gallery and it will have six main parts: the home/index page, two gallery pages, two artist pages, an about page, a visit page, and an exhibit page. Please read the information provided.
      1. CONTENT REQUIREMENTS: 
        1. Part 1: HOME PAGE—this page includes the following:
          1. In this page, you should establish the color scheme that you will use throughout your design for this site, as given to you through your inspiration image. 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 (select this imagery from among the images I provide to you here in this week's posting) and of your design;
          4. A brief summary, one paragraph of text, of what this current exhibit is about. You should use some of the text from the exhibit page (see below).
        2. Part 2: ARTIST PAGES—these TWO pages will look identical. Essentially, what you will do is have a small picture of one of the works by the artist, his/her name, and a blurb of text about the artist. I will provide you with the text for these two pages in our next class. Each page will contain 10 artists. LINK   CLICK HERE for the text for the ARTISTS PAGES;
        3. Part 3: GALLERY PAGES—These TWO pages will also look identical. They will have thumbnail images of the pictures that I have given you of the artwork. I gave you half of the images in our last class and will give you the remaining images in our next class. Each image should be clickable. When you click on the small thumbnail images, you are linked to a page with a much larger version of the image. Accompanying each large image should be the name of the artist and the title of the work as a caption. Also, when you click on the thumbnail images in the gallery, the pages with the larger image should open up in a separate browser window or tab.
          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;
        4. Part 4: CURRENT EXHIBIT PAGE—This page will contain some appropriate imagery (you may use more than one image if you like), the title of the exhibit, and all the text that I provide to you about the exhibit here: Contemporary art speaks directly to the important questions of our time, as well as to the changing landscape of American identity. It is both a mirror of contemporary society and a window through with we view and deepen our understanding of life as it exists today. Who are today's artists? What are they thinking about? How do they describe their work? Why do they do what they do? These are some of the questions addressed in the exhibition: ART:21 Art in the Twenty-First Century. This show presents the artists without interpretive mediation through large presentations of their work. If the unknown is the space in which creativity flourishes, This exhibit desires to bring it forward, illuminate it for others, and revel in it. This is ART:21's work—to reveal the existence of those regions which all the artists traverse, forging paths of exploration and study that take them into uncharted realms of creativity. By revealing the existence of those unknown territories, inhabited by all creative thinkers, I hope to educate, delight, and to provoke the viewers. It is difficult to imagine that anyone works harder than an artist. This—the non-stop work, accumulation of information, concentration, the need to be in the studio—is a continuing mini-theme for ART:21. Most artists experience intuitive leaps of recognition and connection, and find new ideas through introspection and research in many fields beyond art, although the art of the past remains a profound resource. One might say that in order to draw, you have to learn how to see first. Well, what about making drawings and other works of art about areas, about zones and realms that you CANNOT see, about areas hidden from view, about secret realms and invisible places? This is what many of these artists have in common: they are attempting to bring to light and view things that were previously unseen.
        5. Part 5: ABOUT & VISIT PAGES—These TWO pages are NOT required but will be considered extra credit. If you decide to do these pages, the about page should have at least 3 or 4 paragraphs of text as well as an image or two. The visit page should have the gallery hours, it's address, how to get there via auto and public transportation, as well as a map. I don't care where you locate the gallery so long as it is in New York City somewhere. Most galleries in New York are located in Chelsea, not far from TCI.
         
      2. DESIGN REQUIREMENTS: 
        1. Color Scheme—you must choose a color scheme for your web-site that comes from or is inspired by the image that you chose two weeks ago in class.
        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. The layout itself should be inspired by the layout that is demonstrated in the image that you chose in class two weeks ago.
      3. TECHNICAL REQUIREMENTS: 
        1. XHTML—ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
          • that all tags and their attributes must be typed in lower case;
          • that all attribute values must be typed in quotes and with units;
          • that the DTD for strict XHTML must be typed at the top of the document;
          • that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
          • that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
          • and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are NOT permitted.
              If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.
        2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, so it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
     
  4. QUESTIONS: Here are some questions to help guide you through this weeks' material—chapters 3, 5, and 7 on CSS:
    1. How many fonts can you specify for the font-family CSS property?
    2. According to the book (chapter 5), what are the four most widely supported fonts on computers?
    3. Of the two codes we have been covering in class up to now, which one is to be used mainly for structuring or organizing the page content and which is to be used mainly for designing or presenting the page content?
    4. What would the purpose of consistent presentation of your individual web pages throughout your site be—for example: designing the text in the paragraphs the same in all the pages, designing the main headings in all the pages the same, making the links in all the pages the same?
    5. What is the difference between an internal and an external style sheet in where they are typed?
    6. What are two ways to link style sheets to a web page?
    7. What is a CSS rule?
    8. What are the two main parts of any CSS rule?
    9. What is a selector in CSS?
    10. Other than tag names, what are two other types of CSS selectors?
    11. What are two differences between IDs and Classes?
    12. What character must be typed before the name of an ID? Before the name of a class?
    13. How do you apply a class or an id so that the styles show up in a page?
    14. Name five (5) examples of CSS properties that we have used in class.
    15. Name three (3) examples of CSS selectors that we have used in class.
    16. What does the <div>≶/div> tag pair do?
    17. How many different types of borders can you create with CSS? What are they?
    18. What is padding?
    19. Name three (3) places in a web page that you can set the background color.
    20. Type an example of the code for setting a background image using CSS. In this code, you must also determine if the image is to be repeated, and where it is to be positioned on the page.
     
  5. INTRODUCE —Creating a simple page layout using CSS: In this week's class, what I did was quickly lead you through steps to creating a very simple page using only CSS. It is very similar to something we did in class a couple weeks ago, so hopefully it wasn't completely unfamiliar to many of you. Some of the concepts we are covering are not easy to grasp at first, but once you start doing so, I believe they will become more and more obvious and, therefore, much easier.
    1. As we have learned up to now, we began with the basic elements of any webpage:
      1. the DOCTYPE: The DOCTYPE declaration defines the document type, which means what type of code you will be typing. For the purposes of this class, we will be typing XHTML strict, and the particular DOCTYPE declaration for this kind of document is:
      2. the Head section: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This section is where information about the document might appear: the subject (title), the date, who created it, and various other data about the document that follows.
      3. the Body section: This section is where all the information of the document itself appears: all the text, the images, and any other multimedia content is referenced here between the body tags.
      The basic document structure is as follows: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body> ... </body>   </html>
    2. In the following step, I typed some basic text elements into the document: a heading, a couple of paragraphs, and a few links to other pages (I didn't demonstrate the other pages, but they would have been created similarly). <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <a href="one.html">one</a>       <a href="two.html">two</a>       <a href="three.html">three</a>       <h1>Example Heading Here</h1>       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>       <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>     </body>   </html>
    3. After this, I wanted to label each part of the body of the document that I had typed. This is done for two reasons: later on, after some time has passed, I might forget what I had intended, so typing myself some notes within the code is often very useful. Also, it helps me to organize the body into different sections in my own head so that later on I might be able to treat them differently. Usually, this is a very logical and straightforward process as follows: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <a href="one.html">one</a>       <a href="two.html">two</a>       <a href="three.html">three</a>       <!--         below here is         the main heading         of the page       //-->       <h1>Example Heading Here</h1>       <!--         below here are         the paragraphs         of the page       //-->       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>       <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>     </body>   </html>
    4. Next, I create and formalize these sections that I have mapped out in my head by placing <div></div> tag pairs around each section. By doing so, I will be able to manipulate each section or division separately later on when working with CSS. Recall that these tags do very little on their own, so until we add the CSS, the appearance of the page will change very little: <!DOCTYPE ...>   <html>     <head>       <title>... </title>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div>         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div>       <!--         below here is         the main heading         of the page         //-->       <div>         <h1>Example<br/>Heading<br/>Here</h1>       </div>       <!--         below here are         the paragraphs         of the page       //-->       <div>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>         <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>       </div>     </body>   </html>
    5. Now that we have all the HTML on the page, we can begin to work on the CSS. As you recall, we have been typing our CSS in the head section of our document below the title between a pair of <style></style> tags. Although this has been the only place that we have typed CSS in class, it is possible, in fact, to put CSS in two other places: in separate CSS documents that are linked to the HTML document; and directly within a specific HTML tag within the body of a document. Nonetheless, in this class, we continued with placing the CSS code in the head section. This sort of CSS is known as an embedded stylesheet: <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#ffffaa;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         a:link    {color:#000000;                    text-decoration:none;}         a:visited {color:#660000;                    text-decoration:none;}         a:hover   {color:#ffffaa;                    text-decoration:underline;}         a:active  {color:#ffffaa;                    text-decoration:underline;}         h1        {color:#ffaa00;                    font-family:Arial, Helvetica, sans-serif;                    font-size:36pt;                    letter-spacing:5pt;                    word-spacing:10pt;                    line-height:30pt;}         p         {color:#666600;                    font-family:Arial, Helvetica, sans-serif;                    font-size:20pt;                    line-height:9pt;}                    text-align:justify;}       </style>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div>         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div>       <!--         below here is         the main heading         of the page         //-->       <div>         <h1>Example<br/>Heading<br/>Here</h1>       </div>       <!--         below here are         the paragraphs         of the page       //-->       <div>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>         <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p>       </div>     </body>   </html>
    6. Above, we have completed the basic CSS for the page. It should style the background color for the body, its margins, the styles for the links, as well as the stlyes for the main heading and the paragraph.   All seems fairly ordinary; however, one thing you might have noticed that seemed peculiar: the fact that the heading is aligned to the right. There is a reason for that: in preparing this exercise for the class, I had an idea of how the page would end up looking. Since we are not yet done with the design, you do not yet have the whole picture of the site. Once complete, you will see that the best alignment for the heading is indeed to the right.   Next, we are going to design the menu bar at the top of the page. I have done this once before a few weeks ago in class. To do so, I created what is known as a CSS ID. An id is a selector that is NOT connected with any particular HTML tag. Therefore, when used, it does NOT style anything at first. It, along with CSS CLASSES have the unique ability to style ANY TAG YOU WANT. The difference between IDs and Classes is that IDs may only be applied once; whereas, classes may be applied as many times to as many different tags as you like. We will cover classes another week, so here we will stick our demonstration to IDs.   To make the explanation brief about why I chose one over the other, hwoever, I determined that since there would only be one menu bar, and since IDs may only be used once in a page, I thought my menu bar a perfect use for an ID. Let us first then type the styles that go with the ID selector: <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#ffffaa;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         a:link    {color:#000000;                    text-decoration:none;}         a:visited {color:#660000;                    text-decoration:none;}         a:hover   {color:#ffffaa;                    text-decoration:underline;}         a:active  {color:#ffffaa;                    text-decoration:underline;}         h1        {color:#ffaa00;                    font-family:Arial, Helvetica, sans-serif;                    font-size:36pt;                    letter-spacing:5pt;                    word-spacing:10pt;                    line-height:30pt;}         p         {color:#666600;                    font-family:Arial, Helvetica, sans-serif;                    font-size:10pt;                    line-height:9pt;                    text-align:justify;}         #menu     {background-color:#ffcc00;                    font-family:Courier, Courier New, monospace;                    font-size:16pt;                    font-weight:bold;                    letter-spacing:5pt;                    word-spacing:10pt;                    padding-top:20px;                    padding-bottom:20px;                    padding-left:120px;                    border-bottom-width:10px;                    border-bottom-style:dashed;                    border-bottom-color:#000000;                    position:absolute;                    width:100%;                    height:25px;                    left:0px;                    top:0px;                    z-index:1;}       </style>     </head>     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div>         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div>       <!--         below here is         the main heading         of the page         //-->       <div>         <h1>Example<br/>Heading<br/>Here</h1>       </div>       <!--         below here are         the paragraphs         of the page       //-->       <div>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p>         <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.</p>       </div>     </body>   </html>
    7. The next step is simple: all we have to do is APPLY the ID to an appropriate and particular tag below. You may ask, 'What makes a particular tag the appropriate one?' and my response would simply be that IDs are generally applied to <div></div> tags. Those tags below, as I have mentioned, do very little by themselves. They haven't done much to the way the page looks when viewed with the browser. They don't hold any particular set of instructions for the browser to format the page in any particular way. In a way they are blank tags put there for YOU, the designer, to format the way you want.   Let us look at it this way: we know that we want a menu bar at the top of the page. We also know that what we want in the menu bar are the links. Furthermore, in our code, the links are set between the <div></div> tags. That means that if I apply the menu id styles above to the <div></div> tags, then I will magically have my menu bar.   Great, so let's apply the ID to the tag. The way we do this is by setting an attribute within the <div></div> tag as demonstrated below (since our code is getting quite long, I am only going to put the necessary tags below each time from now on instead of all of it each time I need to modify it):     <body>       <!--         below here is         the menu/navigation         of the page       //-->       <div id="menu">         <a href="one.html">one</a>         <a href="two.html">two</a>         <a href="three.html">three</a>       </div> And that is that. Voila! We have a menu bar! Just save this code and refresh your browser.
    8. But now I would like to further design the way the text in the body section looks; more specifically, the main heading and the paragraphs. What I would like to do is to move them around on the page into EXACTLY THE SPOT THAT I WANT, and the only way to do this is to create even more IDS that I will apply to the <div></div> tags: <!DOCTYPE ...>   <html>     <head>       <title>... </title>       <style type="text/css">         body     {background-color:#ffffaa;                    margin-top:0px;                    margin-bottom:0px;                    margin-left:0px;                    margin-right:0px;}         a:link    {color:#000000;                    text-decoration:none;}         a:visited {color:#660000;                    text-decoration:none;}         a:hover   {color:#ffffaa;                    text-decoration:underline;}         a:active  {color:#ffffaa;                    text-decoration:underline;}         h1        {color:#ffaa00;                    font-family:Arial, Helvetica, sans-serif;                    font-size:36pt;                    letter-spacing:5pt;                    word-spacing:10pt;                    line-height:30pt;}         p         {color:#666600;                    font-family:Arial, Helvetica, sans-serif;                    font-size:10pt;                    line-height:9pt;                    text-align:justify;}         #menu     {background-color:#ffcc00;                    font-family:Courier, Courier New, monospace;                    font-size:16pt;                    font-weight:bold;                    letter-spacing:5pt;                    word-spacing:10pt;                    padding-top:20px;                    padding-bottom:20px;                    padding-left:120px;                    border-bottom-width:10px;                    border-bottom-style:dashed;                    border-bottom-color:#000000;                    position:absolute;                    width:100%;                    height:25px;                    left:0px;                    top:0px;                    z-index:1;}       #title     {position:absolute;                    width:200px;                    height:150px;                    top:50px;                    left:120px;                    z-index:2;}       #paragraph    {position:absolute;                    width:500px;                    top:170px;                    left:350px;                    z-index:3;}       </style> And these can be applied just as the previous id, only to the other two <div></div> tags, the title to the heading, and the paragraph to the paragraphs.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)