CIOS F256
Beginning Website Design
(Internet Authoring and Design)

Lab Page

Lab 1

Email -

Send me an e-mail from the e-mail address that you plan to check daily during this class. In the body of your e-mail, include the following:

Your Name The URL of your web site. (I will tell you what this will be on the first day of class, be sure to write it down so you can put it in this email assignment) Your Web Site Theme - Tell me what your web site theme will be. You should select a theme which is interesting to you. A hobby, special interest or a web site you have been intending to create. Selecting a theme that is interesting to you will make this class seem like less work and more fun.

Initial Index Page -

You will need to create a Initial Index Page and put it up live on the web. You can use the "Initial Index Page" in the code samples section of my web page. If you do, change the name from my name to your name and change the title to reflect the theme of your site.

Back to Syllabus

Lab 2

Simple Text Web Page -

Once you have created your initial index page and put it up live on the web, make a simple enhancement to it by creating a very basic page layout. You can use the "Basic Page Layout" in the code samples section of my web page as an example. Your page should contain the following: Heading Tags - For example, your web site theme can be a heading. Italics, Bold and Underline tags - You can write a paragraph about what you plan to do with your site and emphasize certain elements of the paragraph with these tags. An Unordered List which might lists things you would like to do with your site. Hint: It might look alot like the list you are reading right now You can add a picture if you want to, but it is optional. We will discuss pictures in more detail later.

Before next class, complete the process to get your web site on the server. Use the FTP client software demonstrated in the lecture to upload your Initial Index Page to your web site on the server. Using both Netscape and Internet Explorer type your URL into the browser(s) and verify your web page works and looks the way you are expecting it to. If it does not look right in BOTH browsers, you are not done yet. Remember, your first web page will be called index.html (all lower case).

Think About Pictures For Future Assignments -

Acquire them from the web or use your camera to take a roll of theme pictures. Just about anyone who develops pictures will now provide you with a copy on CD. If you cannot find someone who can develop your pictures and provide them on a CD (in .jpg format), you can send the roll to Photoworks for developing. You do not have to put them on your site yet. However, if you choose to take your own pictures, it takes time to take the pictures, have them developed and then convert them into something you can use on your web site. So start now.

Back to Syllabus

Lab 3

Anchors -

On your index page, set anchors to 4 positions and link to them from the top of the page. (You should have enough content to make the anchor off the page when at the top of the screen). Hint: Use pictures or paragraphs on your page to make sure that the entire page cannot be displayed without scrolling down.

Multiple Pages -

Add at least 4 pages to your site. Equip each page with navigation controls. You should be able to get back to your home page from every page on your web site. The navigation on your 4+ page web site should be clearly distinguishable as a linear or hierarchical organization structure.

Link To An Anchor On A Different Page -

In at least 1 place on your web site, link from one page to a position other than the top of a second page.

Links Page -

Create a links page on your site. Call 4 or more web sites that have similar or supporting themes with respect to your web site. Example: If your theme is Indian cooking, you might link to a site that sells the spices used for Indian cooking or a site that sells cooking utensils for Indian cooking.

Back to Syllabus

Lab 4

Graphics - (Thumbnails)

Select a variety (more than 5) of graphic images that relate to the theme of your web site. Add them to one or more of your web pages. On one page, add 3 or more pictures. Use thumbnails to display a small version of the picture. Display the full size picture if the user clicks on the thumbnail. On at least one of the big pictures, I want you to center the picture in the body of the browser and provide navigation back to the thumbnail page.

Color Scheme -

Devise and implement a color scheme for your web site. Specify a background or background image, specify link colors for standard, activated and followed links. Use a different color scheme (background, link, alink, vlink) on at least one of your web pages.

Back to Syllabus

Lab 5

Graphics Assortment -

Add at least one of each of the following type of graphic to your web page: A .jpg graphic A .gif graphic A animated gif graphic A interlaced gif graphic A graphic with a transparent background

Image Map -

Select one of your web pages and insert an image map. Your map should have at least 4 hot spots. Each hot spot should go somewhere different. Use the Sebastopol site if you are having troubles. Don't copy it but use it as a guide.

Back to Syllabus

Lab 6

Tables -

Add at least 2 tables to one of your web pages. One of the tables can be a simple text table (not a table using the PRE tag as shown in the book -- see Samples of HTML Code on the website and click on "A Simple Table" link for an example) with no special attributes. The second table should use borders, cellspacing, width control and multiple table background colors.

Storyboard -

Once you have your tables working, storyboard a design for one of your webpages (see page 4.30 in the book). Start by drawing what you want the page to look like on paper. Your design should not be regular rows and columns that are all the same size. Use tables to make the web page you are designing turn out like your drawing. Hint: If you are not using ROWSPAN and COLSPAN or not embedding tables you should revisit your design. Your web site can have five or more pages, so if you don't want to change one of your existing pages, just make a new one.

Back to Syllabus

Lab 7

Frame Page -

Redesign your front page (index.html) to work with frames. Create a three (or more)part frame layout. One frame will be across the top and will hold your name, company name or logo. The top frame will not scroll. One frame on the left side to act as an index to the rest of your site. The third frame will take up the majority of the area in the bottom right portion of the screen and be the target for most of your links. Your frame index should access all of the web pages on your web site. Use a hierarchical structure on at least 2 pages. Design your frame index to expand (or drill down) to sub categories within your hierarchy.

Back to Syllabus

Lab 8

Forms -

Using the book as a guide, develop a form for your site. Your form should include:

Input Box(es) Drop Down List Box(es) Radio Button(s) Check Box(es) Text Area(s) A Submit Button A Reset Button

Back to Syllabus

Lab 9

Acquire an existing JavaScript program either from the book, from the samples on the server or something you have looked up on the web. Make minor modifications to it so that it is clear it was modified (Add your name or customize it to your site theme). Get the JavaScript program to run on your web site.

Back to Syllabus

Lab 10

Using the form you created in lab 8, write a JavaScript program that will validate the user input fields in your form. You should validate at least 3 fields and your program should notify the user if improper or blank input is entered.

Use this document to help you understand how the JavaScript ties into the XHTML.

Back to Syllabus

Lab 11

Java Applet

Use the sample Java program on my website (or one you develop) and incorporate it into one of your web pages.

Perl Form Script

Using the Perl script in the Sample Code area on my web site, revise the form response for lab 10 to provide the user with confirmation of what s/he sent and provide the recipient with an easy to read result.

Multimedia -

Add your choice of 2 of the following items to your website: .wav .midi .avi .mov

Back to Syllabus

Lab 12 -- (EXTRA CREDIT)

Final Design-

Turn your site into a resume of your web design skills using the tools you have learned in the class. Consider this your final project, clean things up and add some tools you were not required to add in earlier assignments. Make your website flow from one page to the next. Apply the design tips we learned in class. The result of this effort should be a finished working site.

Return to CIOS F256 Class Links