Fundamentals of Internet Applications: Fall 2006 week 10: 11/22

Hello everyone, I hope everyone had a nice holiday, that you're all well-fed and well-rested. And so here we are with less than a month to go before the end of the term. It's good to take a break for a day or two to gear up for the end of the semester. The last few weeks are never very easy, so I hope everyone is prepared to work hard. Afterwards, when everything is over in December, you'll have nearly a full month to relax, but right now, there's lots of work to be done. Last week's class was cut a little short, as those few of you who were there know, but we did get to the main part of the lesson: learning the various form elements, and then designing a small form with the use of a table. The only thing we did not do was to add the CSS, but we will do that at the beginning of class this coming Wednesday, 11/29. This posting, therefore, will be rather short. I had hoped that people would've gotten the table easily and quickly, and that I could focus on the CSS, but just creating a simple table is still giving many people in class a great deal of trouble, so I'll go through the whole thing here, step-by-step. Also, I assigned homework for the 2nd part of the final project which you will find a little below. Try not to get behind on your final project. The more work you do, and the more often I see it, the better your grade will be. See you Wednesday, Carter-

TOPICS:
1. Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
2. Classwork:
  1. Review:
    - LINK Creating a simple table;
    - LINK Modifying the table;
    - LINK Adding colspan;
  2. Introduce:
    1. Inserting HTML Form Elements:
      - LINK Text Boxes;
      - LINK Check Boxes;
      - LINK Radio Buttons;
      - LINK Drop-Down Menus;
      - LINK Text Areas;
      - LINK Buttons;
    2. LINK Designing an HTML Form;
HOMEWORK—Final Project, Part II: This week's homework is the second part of the final project. It is not extraneous to what you will be required to do and what will be due the last day of class. If you continue to produce your homework each week, you will be largely finished with the project well before it is due. Part II, due the next class (11/29/06⁙week 11), consists of two (2) things:
- A Frameset Document—Create a frameset document. This simply consists of one HTML document, such as the one that we learned about two weeks ago in class. By doing this document, you will primarily be deciding the orientation of your frames, whether they will be horizontal (rows) or vertical (cols);
- An Intro Page—Create an introductory page, also known as a splash page. Please see the description below of what this consists. LINK
Also, please recall LAST WEEK'S homework below. If you haven't completed this yet, please do so by the next class.
- A Logo—Create a new logo for the site described below. This will be used on the intro page as well as at the top of every other page in the site. It must follow the same complimentary color scheme described just below.
- A Color Scheme—You must decide upon your color scheme for your site by Friday. This does not mean it cannot change somewhat over the course of your work during the next 5 weeks; but rather, it is meant as a initial design decision as a way for you to begin to determine the direction it will take. LINK View the CSS code of the following document at the above link. The code has directions within the CSS at the top instructing you what to do. The link takes you to the document you will use to demonstrate your color scheme to me. Once you have clicked on the link, choose view << source to see the code. All you need to look at is the top of the document in the CSS section. Please send me an email, or ask me before Friday's class if you are unclear what I want.
FINAL PROJECT: Democracy Now! website Re-Design The current Democracy Now! website is found here (LINK), and you should look through the site and familiarize yourself with its topic and mission. Knowing what the site is about is imperative to making design decisions for color and layout. Your project is to re-design the parts of the site detailed below.
1. CONTENT REQUIREMENTS:
  1. Page 1: INTRO PAGE—This page has no requirements other than to follow the general technical and design requirements for the entire site (see below: LINK). All it consists of is some sort of graphic introduction, an image, or flash animation, or whatever you prefer to introduce us to the site, and a link to the primary frameset (index) of the site. It contains NO OTHER CONTENT. But please make sure you follow your complimentary color scheme.
  2. Page 2: HEADLINES PAGE—This page includes all the headlines, summaries, images and captions which I will provide to you. If you wish to add any additional headlines and images to this page, please do so. The images and text required for this page will be given to you near the end of the term. We will save this page for last so that the headlines are as current as possible.
  3. Page 3: MAIN PAGE—This page must have the introductory text, About Democracy Now! that I will provide you, as well as a couple of images that I will also provide to you. Any other text or images that you find and wish to include is welcomed and encouraged; however, it must remain on the topic of the site. You must use all the information on the following two (2) pages in your main page found here: LINK (about) and here: LINK (history) The images required for this page are here: LINK
  4. Page 4: IMAGE GALLERY PAGE—This page must have ALL the images and caption text that I will provide you. There will be at least ten (10) images. Once again, please use additional images and captions for them if you wish. The images required for these pages are here: LINK and the captions for the images are here (you should note that the name of the image precedes the caption): LINK
  5. Page 5: FORM I PAGE—This page will consist of the first form of two that will be required for the site, the submit idea form. It must utilize all of the same form fields as the form found in the current site: LINK
  6. Page 6: FORM II PAGE—This page will consist of the second form of two that will be required for the site, the volunteer form. It must utilize ALL of the same form fields as the form found here: LINK
2. DESIGN REQUIREMENTS:
  1. Color Scheme—you must use what is known as a Complimentary Color Scheme. A complimentary color scheme is a two-color scheme, but it is basically a scheme in which the large majority of the site is done monochromatically. Monochromatic means one color. This means that you start off with a site that follows a monochromatic scheme, which means that everything is to be some tint or shade of the same color. If you choose blue as your color, then that means absolutely everything in the site must be some variation of blue, including images. If you wish to show color images, then make the images clickable to link to larger, full-color versions of them. Once you establish this primary color, then you select its compliment to use as an accent color, for times when you need to focus attention or when you require greater contrast. Therefore, if blue is the main color for most of your site, then you would use some version of its compliment, orange, as your accent color (blue & orange, red & green, and yellow & purple).
  2. Page Layout—you must use CSS and/or tables 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.
3. TECHNICAL REQUIREMENTS:
  1. XHTML
    —ALL CODE for this site (other than for the frameset document 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.
  2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, and further, as it is the standard in web-design, 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. You will be learning more and more about CSS as the term progresses.
CLASSWORK—Once again, we started Wednesday's class with a review of a by now very familiar topic. This time (again) it was HTML tables. Like last time, I will demonstrate with examples of code and the resulting tables that we came up with in class. LINK Click here LINK and here for a more thorough introduction, discussion and demonstration on the topic of tables.
1. REVIEW:
  1. A Simple Table—We began the class be creating a simple table of four (4) rows with eleven (11) cells in each row:
    
    And here is the code for this table: <table border="1px" width="100%"> // below here is row 1 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 4 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
  2. Modifying the Table—Next, I add a few attributes and some text to the table: <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td width="10px;"> </td> <td align="right" valign="top">first name</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">midde initial</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">last name</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 4 <tr> <td width="10px;"> </td> <td align="right" valign="top">city</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">state</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">zip code</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> </table>
    
    first name middle initial last name
    
    city state zip code
  3. Adding colspan—To complete the table modifications, I add the colspan attribute to rows 1, and I delete all but one cell from that row. This will allow the single remaining cell to extend across the entire table:
    
    first name middle initial last name
    
    city state zip code
    <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td colspan="11" align="center" valign="top"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td width="10px;"> </td> <td align="right" valign="top">first name</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">midde initial</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">last name</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 4 <tr> <td width="10px;"> </td> <td align="right" valign="top">city</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">state</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">zip code</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> </table>
2. INTRODUCE:
  1. Inserting HTML Form Elements—
  2. Designing an HTML Form—

Fundamentals of Internet Applications

Thursday, November 23, 2006

Fall 2006

week 10: 11/22

No comments:

Post a Comment

Google Analytics


first name	middle initial	last name

city	state	zip code


first name	middle initial	last name

city	state	zip code