Fundamentals of Internet Applications: Spring 2009 week 8: 3/11

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

TOPICS:
- Creating a Basic Webpage with CSS
HOMEWORK: Do the questions below as this week's homework;
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.
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>  <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>
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>  <div> <a href="one.html">one</a> <a href="two.html">two</a> <a href="three.html">three</a> </div>  <div> <h1>Example Heading Here>/h1> </div>  <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p> <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p> </div> </body> </html>
5. Now that we have all the HTML on the page, we can begin to work on the CSS. As you recall, we have been typing our CSS in the head section of our document below the title between a pair of <style></style> tags. Although this has been the only place that we have typed CSS in class, it is possible, in fact, to put CSS in two other places: in separate CSS documents that are linked to the HTML document; and directly within a specific HTML tag within the body of a document. Nonetheless, in this class, we continued with placing the CSS code in the head section. This sort of CSS is known as an embedded stylesheet: <!DOCTYPE ...> <html> <head> <title>... </title> <style type="text/css"> body {background-color:#ffffaa; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;} a:link {color:#000000; text-decoration:none;} a:visited {color:#660000; text-decoration:none;} a:hover {color:#000000; text-decoration:underline;} a:active {color:#ff0000; text-decoration:underline;} h1 {color:#ffaa00; font-family:Arial, Helvetica, sans-serif; font-size:36pt; letter-spacing:5pt; word-spacing:10pt; text-align:right;} p {color:#666600; font-family:Arial, Helvetica, sans-serif; font-size:20pt; line-height:9pt;} text-align:justify;} </style> </head> <body>  <div> <a href="one.html">one</a> <a href="two.html">two</a> <a href="three.html">three</a> </div>  <div> <h1>Example Heading Here>/h1> </div>  <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet dolor sed purus. Sed id turpis vel tortor euismod aliquet. Etiam augue. Pellentesque imperdiet dui quis purus. Praesent quam quam, feugiat a, tempus interdum, sodales tempor, justo. Nullam scelerisque orci eu enim. Vivamus at turpis nec eros elementum hendrerit. Cras fringilla, nulla eget sollicitudin tempor, felis metus porttitor sem, non egestas elit eros id nulla. Etiam facilisis, quam quis malesuada dictum, massa ante volutpat velit, at lacinia eros nunc ut lorem. Etiam quis enim a nunc feugiat adipiscing. Phasellus vel ipsum ut ligula facilisis molestie. Nam aliquet bibendum elit. Aliquam egestas velit tempus magna. Fusce risus ipsum, consectetur et, condimentum quis, porttitor ac, purus. In ligula sem, auctor at, posuere et, suscipit in, metus.</p> <p>Maecenas vehicula placerat dolor. Suspendisse gravida felis id velit. Integer eu odio sit amet augue ornare hendrerit. Integer viverra. Vestibulum a ligula a mi facilisis imperdiet. Suspendisse potenti. Nullam sed dolor vitae turpis faucibus faucibus. Vestibulum pulvinar. Nunc tempus. Sed eros. Sed faucibus. Etiam aliquam. Praesent suscipit libero non sapien cursus iaculis. In dictum. Nunc vitae tortor. Maecenas accumsan justo quis eros. Nam sed sem viverra est elementum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam mi. Nullam consectetur tincidunt ligula.>/p> </div> </body> </html>
6. Above, we have completed the basic CSS for the page. It should style the background color for the body, its margins, the styles for the links, as well as the stlyes for the main heading and the paragraph. All seems fairly ordinary; however, one thing you might have noticed that seemed peculiar: the fact that the heading is aligned to the right. There is a reason for that: in preparing this exercise for the class, I had an idea of how the page would end up looking. Since we are not yet done with the design, you do not yet have the whole picture of the site. Once complete, you will see that the best alignment for the heading is indeed to the right. Next, we are going to design the menu bar at the top of the page. I have done this once before a few weeks ago in class. To do so, I created what is known as a CSS ID. An id is a selector that is NOT connected with any particular HTML tag. Therefore, when used, it does NOT style anything at first. It, along with CSS CLASSES have the unique ability to style ANY TAG YOU WANT. The difference between IDs and Classes is that IDs may only be applied once; whereas, classes may be applied as many times to as many different tags as you like. We will cover classes another week, so here we will stick our demonstration to IDs. To make the explanation brief about why I chose one over the other, hwoever, I determined that since there would only be one menu bar, and since IDs may only be used once in a page, I thought my menu bar a perfect use for an ID. Let us first then type the styles that go with the ID selector: <!DOCTYPE ...> <html> <head> <title>... </title> <style type="text/css"> body {background-color:#ffffaa; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;} a:link {color:#000000; text-decoration:none;} a:visited {color:#660000; text-decoration:none;} a:hover {color:#000000; text-decoration:underline;} a:active {color:#ff0000; text-decoration:underline;} h1 {color:#ffaa00; font-family:Arial, Helvetica, sans-serif; font-size:36pt; letter-spacing:5pt; word-spacing:10pt; text-align:right;} p {color:#666600; font-family:Arial, Helvetica, sans-serif; font-size:10pt; line-height:9pt; text-align:justify;} #menu {background-color:#ffcc00; font-family:Courier, Courier New, monospace; font-size:16pt; font-weight:bold; letter-spacing:5pt; word-spacing:10pt; padding-top:20px; padding-bottom:20px; padding-left:120px; border-bottom-width:10px; border-bottom-style:dashed; border-bottom-color:#000000;} </style> </head> <body>  <div> <a href="one.html">one</a> <a href="two.html">two</a> <a href="three.html">three</a> </div>  <div> <h1>Example Heading Here</h1> </div>  <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>  <div id="menu"> <a href="one.html">one</a> <a href="two.html">two</a> <a href="three.html">three</a> </div> And that is that. Voila! We have a menu bar! Just save this code and refresh your browser.
8. But now I would like to further design the way the text in the body section looks; more specifically, the main heading and the paragraphs. What I would like to do is to move them around on the page into EXACTLY THE SPOT THAT I WANT, and the only way to do this is to create even more IDS that I will apply to the <div></div> tags: <style type="text/css"> body {background-color:#ffffaa; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;} a:link {color:#000000; text-decoration:none;} a:visited {color:#660000; text-decoration:none;} a:hover {color:#000000; text-decoration:underline;} a:active {color:#ff0000; text-decoration:underline;} h1 {color:#ffaa00; font-family:Arial, Helvetica, sans-serif; font-size:36pt; letter-spacing:5pt; word-spacing:10pt; text-align:right;} p {color:#666600; font-family:Arial, Helvetica, sans-serif; font-size:20pt; line-height:9pt;} text-align:justify;} #menu {background-color:#ffcc00; font-family:Courier, Courier New, monospace; font-size:16pt; font-weight:bold; letter-spacing:5pt; word-spacing:10pt; padding-top:20px; padding-bottom:20px; padding-left:120px; border-bottom-width:10px; border-bottom-style:dashed; border-bottom-color:#000000;} #title {position:absolute; width:200px; height:150px; top:50px; left:120px; z-index:2;} #paragraph {position:absolute; width:500px; top:170px; left:350px; z-index:3;} </style> And these can be applied just as the previous id, only to the other two <div></div> tags, the title to the heading, and the paragraph to the paragraphs.

Fundamentals of Internet Applications

Friday, March 13, 2009

Spring 2009

week 8: 3/11

No comments:

Post a Comment

Google Analytics