How to use this CD

The CD is organized into 3 sections

1. Lessons
2. Web Pages which simulate your homework
3. Photoshop documents

I recommend you begin by reading the lessons, then review the homework files, and finally exploring the PSD files.

Lessons

Here is the Window that should open when you access the CD. You need to select the directory for the
CIS 58.53B Advanced Class.



Next this window will appear, select the file named "start-here.html which takes you to a table of contents for the lessons.

This file allows you to navigate the lessons, it is not recommended that you try and access the lessons directly from the lessons folder since the file names may prove confusing to you. To learn more about the lessons read on...

The CD contains 7 lessons

1. Before you begin (the lesson you are using right now)
2. Logos
3. Photos and Collage
4. Rollovers
5. Animation
6. Second Level
7. CSS and Tables

What is in each lesson?

There are several features which are included with many of the lessons.

campus client
You are required to create an online campus Web site. Many of the CD lessons contain step by step instructions, which explain how each concept is incorporated into the campus site. In the "Web Graphics" course the campus site began as a mock up" which contained a layout of all Web elements, a color scheme, the text, and finally a basic navigation system. During each lesson a new concept will be introduced and applied to the campus mock up. By the end of the CD, the first and second level pages will have logos, photos and collage, rollover navigation, and 2 second level pages. The opening screen and one second level page will be sliced and converted into a working HTML document. In addition an animation will have been added to the campus site.

If you are an online student, the campus section will provide you with the information you would normally receive in a classroom lecture. If you are a traditional student these notes will reinforce the concepts demonstrated in class. In the traditional classroom your instructor may not have time to update both the campus and optional client's sites during the lecture. Refer to these notes to fill in the information your instructor did not have time to present.

You are NOT expected to create a campus site which matches the campus site demonstrated in the CD. This sample is intended to be a teaching tool, not a pattern for your design. Some students do try and recreate the campus site so they can become more proficient in using the Photoshop tools, however this work is not used as homework, it is simply an exercise to sharpen your skills. Each student is expected to create a unique online campus site.

optional client
You are also required to create a Web site for one of the 3 optional clients provided by your instructor. The optional clients are - travel agency, retirement home, and a pet shop. The CD lessons contain step by step instructions for how each concept is applied to the a retirement home. The optional site will begin in the "logo" lesson and be finalized in lesson 7 as CSS and table code are explained.

It can be very exciting to watch the site develop week by week. You need to create an optional site which is created by you as an original design. The optional site described in the CD is used to clarify the class lessons, not dictate the look of your site. Greenspace Retirement home will be used as the optional client, you may however choose to use a travel agency or pet store as your optional client.

templates
Several lessons have a section in which templates or samples are provided. Students often find it helpful to have step by step instructions of techniques which can be used to create commonly used web graphics. You may choose to use these templates as a part of your campus and optional Web sites, however it is not required. In the text and navigation lessons you are required to select 3 of the 10 samples provided and turn those images in as part of your homework. If you want to expand your knowledge even further you may want to create all the images demonstrated in the CD.

HTML Review
Many students are a bit rusty, with their HTML and FTP skills. The "before you begin" lesson contains instructions on how to use File Transfer Protocol to transfer files from your computer to the campus Web server "gracie".

Each lesson contains an HTML Review section which lists the code you need to add to your homework page so that your work can be graded by your instructor. All assignments in this course will be placed on "gracie" and graded online.

return to top

How do I navigate the "lessons" section?
From the home page (which is named "start-here.html") there is a link to each lesson. Once you access a lesson there is a black strip along the top of the page which contains links to each of the lessons. Along the left side of the page are links to access the lesson sections. For example the "before you begin" lesson has the following sections, links to these topics display at the left side of every lesson page.

Each of these sections is an individual Web page. Some of these sections are so long that they require page navigation at the top of the page. This page has the following page navigation:

page navigation || lessons || navigation || printing || homework samples || Photoshop files

Selecting one of these links will take you to a specific area of the web page. There are also "return to top" links which allow you to jump up to the top of the page.

There is also navigational links to the lesson at the bottom of each page.

To review

1. The main lessons are located at the top of each page or as text navigation at the bottom of each page.
2. Each lesson contains several sections, which are accessed by selecting the text links along the left hand frame displayed on every page.
3. Longer pages have page navigation which is located in a dark blue table at the top of each page.

Spend a moment locating these navigational elements. Next access a few other lessons and click around to see how they are organized. The lessons should work in both Internet Explorer and Netscape. You will not need an Internet connection to view the step by step instructions, however there are a few links sprinkled thought the lessons which require Internet access. Don't forget to return to his lesson and finish reading about the CD.

return to top

Printing the CD instructions
Many students use the instructions in 2 ways; they view the files on their computer for an overview of the material and to see images in full color, then they print out the instructions so they can refer to them as they begin their work.

The CD is organized using frames, printing from frames can be tricky. There are several ways you can print from a framed site. I recommend you use Internet Explorer to view the CD materials since they are more reliable when printing pages.

Using IE, click on the frame which displays the instructions and access the File menu > Print.
If you use Netscape click the frame which holds the instructions, access the File menu > Print Frame.

In both cases it is extremely important that you click on the frame which holds the instructions BEFORE you select print. If you click on the navigational frame before printing you will only print the links. If you have a difficult time printing I recommend you open the frame with the instructions in a new browser window.

Internet Explorer right click (Win) or click and hold (Mac) until a menu appears which allows you to select "Open Frame in new Window"

Netscape right click (Win) or click and hold (Mac) until a menu appears which allows you to select "New Window with this Frame"

Once the instructions are displaying in a separate window they can be printed easily.

return to top

Web Pages Section

The Web Pages section is located in a folder labeled "WebPages". Within this folder are 7 Web pages which contain the code you would use for your homework page. The pages are named "hw-week1.html", "hw-week2.html", etc. When you create your homework page, it will simply be named "homework.html". In addition to the Web pages there are 5 folders or directories :

1. campus
2. optional
3. templates
4. campus-final
5. optional-final

Theses directories allow you to keep your files sorted and organized so you and your instructor can easily find your work. All lessons require you to create images which are loaded onto the web, this can become a messy and confusing process. By carefully following the homework guidelines you can setup a work area which makes it easier to find your work and insures that the files will display when loaded onto the Web.

return to top

Photoshop Files

Each lesson has several PSD files which you can use as a model for what you should create for your clients. It may prove useful to open these files and compare them to the step by step instructions. When the directions explain how to create a text layer, or layer which uses the shape tool, it is helpful to see these layers in a PSD file.

All Web sites start out as Photoshop files which contain an individual layer for each item in the site. Throughout the design process the PSD files are optimized (flattened) as GIFs or JPEGs, and then placed on the web so the designer and client can view a preview of what the site will look like when it is done.

It is essential that you understand the difference between the PSD files and the GIFs or JPEGs. In the Photoshop layout document each of the graphic element is stored on it's own layer, which makes it easy to move elements, change the color of a logo or name on a button.

In this class the PSD file will change each week. In the mock up lessons a gray scale layout of the pages is created using shapes to represent the required elements. In the "Web Graphics" class you may have created a gray rectangle, placed it in the upper left corner of the screen, and labeled it "logo". The rectangle would be placed on one layer, and the text "logo" is placed on another layer.

In the first lesson you will convert that gray rectangle to an actual logo which may require many layers. Once you have the look you like, you will save the PSD file to preserve the new "logo layers" and then flatten the files as a GIF or JPEG so it can be loaded onto the Web and graded by your instructor.

It is essential that you save the PSD document as a separate file and then make a copy of this file which is flattened and loaded on the web. The PSD document can easily be adjusted and changed, the GIF or JPEG cannot. To avoid recreating work from previous assignments, always save your PSD files before creating the GIF or JPEGs, in fact I recommend you make a back up a copy of your PSD files since they are so crucial to your success in class.