Fundamentals of Internet Applications: Spring 2008 week 12: 04/09

Hello everyone, By the end of class last night, most of you had completed work from the previous week. This means that all of you are about a week behind or more in completing your projects. I suspect that most of you are not doing anything during the week, or very little. This is a VERY poor strategy. If you wait until next week to finish what I started in class last night, you will find yourself in a very big hole. Why is this so, you might ask? Well, because next week I am going to assign you the final part of the project, the contact page, as well as the home page, which you will have to design all on your own. That means next week you'll have two times as much work with only one week remaining to do it. In addition, next week, I will give you the the study sheet for the FINAL EXAM. All of this is due in two weeks; so, if you wait until next class to finish last night's assignment, you'll be very far behind. Please don't wait, or you'll be very sorry. Carter-

TOPICS:
1. Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
2. Classwork:
  - LINK REVIEW: the Template;
  - LINK INTRODUCE: the Gallery;
    1. LINK Creating a table for the secondary navigation for the Gallery pages;
    2. LINK Inserting the text for the Gallery secondary navigation;
    3. LINK Adding the anchor tags for the Gallery secondary navigation;
    4. LINK The URL list for the featured websites;
    5. LINK Creating the table for the gallery images;
    6. LINK Inserting the images into the gallery pages;
    7. LINK Creating the captions for the gallery images;
    8. LINK Positioning the table of gallery images;
    9. LINK linking to the featured external sites;
    10. LINK Final suggestions;
HOMEWORK—Final Project, Part III: As of two weeks ago, the homework for each class is to be 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. Each week I will assign a new part to the website. If you produce these assignments on time each week, you will have accumulated HALF THE POINTS for the final. If you do not show me the work each week, your chances of receiving a passing grade for the final project are vastly reduced. This does not mean that each part has to be perfect each week, but it should be largely complete and without error. It is up to you to find your own errors. The site that we are going to produce accompanies a book that has already been published that highlights some of the best web-designs of last year. It will have four main parts: the home page, six about pages (six versions of the page, each one for a different language), two gallery pages, and a contact page that will include a form for submitting personal information.
1. Due in class next week: you must complete BOTH of the gallery pages which we began in class this week. To do so, you must follow the directions here in this blog. Recall that these documents should have the following names: gal_1.html and gal_2.html. LINK Click here to read more about the Gallery section of this assignment.
2. Due in class in two weeks: you must complete the home page of the site. This will be done in the file that we have named index.html. I will not provide you with any directions for this part of the site, although I will give you all the necessary content. LINK Click here to read more about this site and to download the necessary files. Keep in mind that you have to keep with your color scheme, and that it must work with the white background I have established for the template. Recall also that your color scheme can only consist of two colors, not including black or gray. Your entire site can include only these colors and lighter or darker variations of them. The two colors must be adjacent on the color wheel. Acceptable color pairs are as follows: red and orange, orange and yellow, yellow and green, green and blue, blue and purple, or purple and red. Your colors may also be reflected in the template that we created in class. If you are unhappy with your choice of colors in class, then you may change them as part of your homework.
FINAL PROJECT The site that we are going to produce accompanies a book that has already been published that highlights some of the best web-designs of last year. It will have four main parts: the home page, six about pages (six versions of the page, each one for a different language), two gallery pages, and a contact page that will include a form for submitting personal information. Please read the information provided.
1. CONTENT REQUIREMENTS:
  1. Part 1: TEMPLATE—This is what we have already completed as of the class before last which includes the top banner of the site and its primary navigation. If you have yet to complete this, check the previous blog entry here: LINK Week 10 blog entry.
  2. Part 2: ABOUT PAGES—these pages will all look identical. Each will include some imagery of your choice and the text about this book in six (6) different languages (to be furnished at a later time). The main thing you need to know about him right now to start your site is that this is a book about the state-of-the-art web design. LINK This is a .zip file that contains all the text for this page. For this section, each language will be placed in a separate about page and so each language is saved in a separate file. Remember, you must use all the text.
  3. Part 3: IMAGE GALLERY PAGES—Below here you will see a series of links to various sites. You must visit each site and take a screen shot of the main page of the site. Using photoshop, you must crop the screen shot and create a large .jpg image and a much smaller .gif image. You must place all the thumbnail images of the main pages of each site into the gallery pages. Each thumbnail will also provide a link to the larger image that you created with the screen shot of the site and that image will be a link to the site that will open up in a separate window when clicked on. Below are the links for the first gallery page:
    And then the links for the second gallery page:
  4. Part 4: CONTACT PAGE—This page includes an image of the cover of the book, publication information, and book-availability information. It will also have a form for the visitor to submit his/her personal information so as to be a part of the mailing list. We will be completing this page next week and starting it in class, week 13.
  5. Part 5: HOME PAGE—In this page, you should establish the color scheme that you will use throughout your design for this site. "The Look" will be established in part by what we do in class together, but the rest is up to you, such as the colors, the fonts, and the particular layout that you will choose. You will need one image for this page and some text. The image is a .jpg file and the text is a word .doc file that comes in six different languages. You must include all six in your design.
    1. Text: LINK This is a .zip file that contains all the text for this page. Each language is saved in a separate file. Remember, you must use all the text.
    2. Image: LINK This is a .zip file that contains a .psd file of the image that you need for this page. I intentionally left it as a .psd so that you can modify it and then save it in the format(s) of your choice.
2. 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 and you may use 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 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.
REVIEW
—Two weeks ago, we began with a table as a starting point to create the template for the site. By the end of the posting, you should have had a fully-realized template that included a banner with the name of the site, a site logo, and some navigation. This is what we ended up producing:
1. GALLERY
  —The next step that we covered in class last week and in this blog was to create a secondary navigation. Since there are six different about pages in six different languages, we had to create another set of links that will fit below the other links. To do this we had to create another table in the about pages to house the new links to each of the different languages. We must do the same thing for the two gallery pages.
  1. Table: Since we have more than one gallery page to choose from, we will put this new secondary navigation into BOTH of them. Let's begin with gal_1.html. The new navigation will fit into the first cell of the sixth row, in exactly the same place that the secondary navigation was in the about pages; and, in order to create it, we must first create a simple table to fit within the first table, a table within a table. We have done this several times before (including last week), so it should need no explanation, but it will consist of only one row of four cells. <table border="1px"> <tr> <td class="table_bg1" colspan="3"><img src="images/title.gif"/></td> </tr> <tr> <td class="table_bg2"colspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="index.html">home</a> </td> <td class="col2" rowspan="3"> <a href="gal_1.html">galleries</a> </td> <td class="col3" rowspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="abt_eng.html">about</a> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px; border-bottom:0px;"> <a href="con.html">contact</a> </td> </tr> <tr> <td class="table_bg3" colspan="3"> <table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> </tr> </table>
  2. Text: Within this table, we will type the text for the links that will link to both of the gallery pages. Notice that the first cell is blank and has been given the width of 100 pixels. <table border="1px"> <tr> <td class="table_bg1" colspan="3"><img src="images/title.gif"/></td> </tr> <tr> <td class="table_bg2"colspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="index.html">home</a> </td> <td class="col2" rowspan="3"> galleries </td> <td class="col3" rowspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="abt_eng.html">about</a> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px; border-bottom:0px;"> <a href="con.html">contact</a> </td> </tr> <tr> <td class="table_bg3" colspan="3"> <table> <tr> <td style="width:100px;"> </td> <td>gallery one</td> <td>gallery two</td> <td style="width:100px;"> </td> </tr> </table> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> </tr> </table>
  3. Links: Next, we need to convert those words into links to the appropriate pages:
    gallery one: links to gal_1.html.
    gallery two: links to gal_2.html.
    Remember that these links must be changed in both of the gallery pages; however, since I am currently working in the gal_1.html file, I will not be making the words gallery one into a link. <table border="1px"> <tr> <td class="table_bg1" colspan="3"><img src="images/title.gif"/></td> </tr> <tr> <td class="table_bg2"colspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="index.html">home</a> </td> <td class="col2" rowspan="3"> galleries </td> <td class="col3" rowspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="abt_eng.html">about</a> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px; border-bottom:0px;"> <a href="con.html">contact</a> </td> </tr> <tr> <td class="table_bg3" colspan="3"> <table> <tr> <td style="width:100px;"> </td> <td> gallery one </td> <a href="gal_2.html">gallery two</a> </td> <td style="width:100px;"> </td> </tr> </table> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> </tr> </table> When complete, the resulting page should link all the files together, and the secondary menu appears only when the galleries link is selected.
  4. Content: Now that we have all navigation for the site complete, both the primary navigation—the home, about, contact, galleries links—and the secondary navigation—the links to the various languages in the about pages, and the secondary navigation*#8212;the links to the thumbnail images in the gallery pages, we can work with the actual content of the gallery.    The content for the gallery section consists almost entirely of images. These images come from a series of 40 websites that will be featured in this site we are making for their good design. Below is a series of steps of how to produce these images:
    Type in one of the links to the sites in the list below.
    Maximize the browser window.
    Press on the Print Screen key in the upper right of your keyboard if you have a PC. With a MAC, the application Grab in your utilities folder is a very useful little application to do the same thing and more.
    Open Photoshop and open a new image.
    Then paste the shot (ctrl-V or apple-V).
    Save as a .jpg file into your images folder.
    Resize your image so that the width is 120px.
    Choose save for web and save as a .gif image, but this time add the letters SM (for small) to the end of your filename before the extension. Make certain it goes into your images folder.
    Repeat these steps for each of the 40 websites. When complete, you will have 2 images for each site.
    Below are the links to the sites you must use in this gallery of images:
    http://www.thorns.no/ltd/
    http://www.urbjects.com
    http://www.hellalouie.com
    http://junekim.com
    http://www.kunstdichte.com
    http://c.dric.be
    http://www.estudiosaci.com.br
    http://www.atelierduchene.com
    http://www.e-motionalis.net
    http://www.grivina.ru
    http://juliaabelmann.com
    http://www.claudioviscardi.it
    http://ki2n.com
    http://www.artworksgroup.net
    http://www.talkingmeanstrouble.com
    http://www.heidilangauer.ch
    http://bestiario.org
    http://www.disgenia.net
    http://www.animaisa.ru
    And then the links for the second gallery page:
    http://couscouskid.co.uk
    http://www.dev4design.com/new.html
    http://www.mandarine24.com/
    http://www.lesdoigtsdelhomme.com/
    http://www.jonathanyuen.com/main.html
    http://www.microbians.com/
    http://www.bernhardwolff.com/
    http://www.417north.com/v7/
    http://www.peyotronica.com/web.html
    http://www.faile.net/
    http://www.sinelab.com/
    http://www.jazzve.com/
    http://www.nineoff.com/
    http://www.mutanthands.com/
    http://www.hungout.com/
    http://www.airbagconcept.com.ar/
    http://shadowtones.net/
    http://ctdia.com.br/hotsite/
    http://www.thewebflight.com/
    http://www.thecabrians.com/
    
    Table: We will begin by creating another table for our gallery images below the template table. This table must have two rows and ten cells per row. Below is what you should end up with: <table border="1px"> <tr> <td class="table_bg1" colspan="3"><img src="images/title.gif"/></td> </tr> <tr> <td class="table_bg2"colspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="index.html">home</a> </td> <td class="col2" rowspan="3"> galleries </td> <td class="col3" rowspan="3"> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px;"> <a href="abt_eng.html">about</a> </td> </tr> <tr> <td class="col1" style="border-color:#ffffff; border-style:solid; border-width:1px; border-top:0px; border-left:0px; border-bottom:0px;"> <a href="con.html">contact</a> </td> </tr> <tr> <td class="table_bg3" colspan="3"> <table> <tr> <td style="width:100px;"> </td> <td> gallery one </td> <a href="gal_2.html">gallery two</a> </td> <td style="width:100px;"> </td> </tr> </table> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> </tr> </table> <table border="1px"> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> </table>
    
    Once you get this new table, alter every other cell in the first row with colspan so that it looks like this:
    
    This is achieved with the following code: <table border="1px"> <tr>    <td colspan="2"> </td>    ~~<td> </td>~~    <td colspan="2"> </td>    ~~<td> </td>~~    <td colspan="2"> </td>    ~~<td> </td>~~    <td colspan="2"> </td>    ~~<td> </td>~~    <td colspan="2"> </td>    ~~<td> </td>~~ </tr> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> </table> Finally, copy and paste these two rows 3 more times: <table border="1px"> <tr>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td> </tr> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> <tr>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td> </tr> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> <tr>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td> </tr> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> <tr>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td>    <td colspan="2"> </td> </tr> <tr>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td>    <td> </td> </tr> </table>
    
    Images: In the larger cells, the ones in which you applied the colspan attribute, you must place the thumbnail images that you created from the list of websites that I gave you. There will be five thumbnail images on every other row. The image below shows you what you will have when complete:
    Text: Next, we need caption text to go with each of the thumbnail images. This text will simply be the name of the site. These are not the web addresses of the sites that I have given you in the list above, but the actual name of the site. In addition, this text needs to be styled with a class that we will place within the <td> tags for the cells that contain the caption text. We will call the class .caption:    body      {background-color:#ffffff;       margin-top:0px;       margin-bottom:0px;       margin-left:0px;       margin-right:0px;}    table      {width:100%;       border-collapse:collapse;}    a:link      {font-family:Arial Black;       font-size:10pt;       color:#ffffff;       line-height:8pt;       text-decoration:none;}    a:visited      {font-family:Arial Black;       font-size:10pt;       color:#cccccc;       line-height:8pt; text-decoration:none;}    a:active      {font-family:Arial Black;       font-size:10pt;       color:#ff0000;       line-height:8pt;       text-decoration:underline;}    a:hover      {font-family:Arial Black;       font-size:10pt;       color:#ff0000;       line-height:8pt;       text-decoration:underline;}    .table_bg1      {background-color:#fc8585;       background-image:url("images/table_bg1.gif");       background-repeat:repeat-y;}    .table_bg2      {background-color:#fc8585;       background-image:url("images/table_bg2.gif");       background-repeat:repeat-x;}    .table_bg3      {background-color:#fc8585;       background-image:url("images/table_bg3.gif");       background-repeat:repeat-x;}    .col1      {width:80px;       background-color:#000000;       text-align:right;}    .col2      {background-color:#000000;       text-align:left;       vertical-align:middle;       padding:20px;}    .col3      {width:80px;       background-color:#000000;       background-image:url("images/logo1.png");       background-repeat:no-repeat}    .caption      {font-family:Arial, Helvetica, sans serif;       font-size:9pt;       line-height:8pt;       color:#333333;}    #layer_1      {width:275px;       height:400px;       position:absolute;       z-index:1;       top:230px;       left:85px;}    #layer_2      {width:275px;       height:400px;       position:absolute;       z-index:2;       top:230px;       left:385px} In addition to the text identifying the site, we will also add a couple of <br/> tags afterwards so that there is a little space below the text. <table border="1px"> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> </table>
    Positioning: The next step is to position this table within the browser window. We'll do this in the same way that we did last week: first by adding <div> tags and then by creating a new ID in the css stylesheet. First let's look at the ID that we need:    #layer_gal      {width:605px;       position:absolute;       z-index:4;       top:20px;       left:85px} Notice below where the <div> tags are as well as the ID attribute: <div id="layer_gal"> <table border="1px"> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td>    <td colspan="2"><img src="images/site1_SM.gif"/></td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> </table> </div> The image below is what results:
    Web-sites: The last aspect of this section that we must add are the links to the actual websites that the thumbnails belong to. Each image below in the table, therefore, must be turned into a link using the anchor tag, and these links must open up into a separate browser window using the target attribute: <div id="layer_gal"> <table border="1px"> <tr>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> <tr>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td>    <td colspan="2">     <a href="http://www.tcicollege.edu" target="_blank">      <img src="images/site1_SM.gif"/>     </a>    </td> </tr> <tr>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td>    <td>Name of Site<br/><br/></td>    <td> </td> </tr> </table> </div>
    Finish: To end this posting, I will make a couple of suggestions to complete this posting without completely going through them:
    CSS—I would suggest making a style with IMG as the selector that draws a narrow outline around all the images in the page, in particular the images of the gallery.
    Image—I would also suggest that you create an image like the vertical images in the about pages with all the names of the different languages here on this page that lines up on the right-hand margin. Instead of typing the language name, perhaps gallery one and gallery two should be there.

Fundamentals of Internet Applications

Thursday, April 10, 2008

Spring 2008

week 12: 04/09

No comments:

Post a Comment

Google Analytics