Reminder: Your Final project is due by midnight on Friday, October 17. No late projects accepted. Please let me know if you have any questions about the final project.

Below is the checklist for the Final project. Please be sure to cover all ten specifications in your final project. These are the objectives I will use to grade your projects.

Final Project checklist

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The class notes for this week are for your information only. You are not required to use any of the content below in your final project. I do however feel it is important for you to have knowledge of both frames and forms. so I encourage you to read through the notes and read the pages I assigned from your textbook.

Frames

Displaying several html pages inside one browser window

Introduction

Frames offer a way to format a page so that there are several “window panes”, each with it’s own html content. Frames are similar to tables, except that the html content in each frame comes from a completely separate html file. You create a page with frames by making a FRAMESET html file that describes the layout of the page–i.e. the number of frames, their size, the name of the html file associated with each frame, etc. This frameset file points to the separate html files for the content of each frame. The frameset, which defines the page layout, stays constant. But the contents of each frame is changeable, within the format of the frameset, so that a frame can contain different html pages over time.

The primary advantage of a frames based web page is that one part of the web page can stay fixed, while other parts of the page change. For example, in a two frame page, a menu page can be fixed on the left hand side of the page in a frame. When the user clicks on a menu link, the menu remains, but the content, which is in a frame on the right, changes based on the menu selection.

Example

• In this example, frameset.htm tells the browser to display
  two frames: left_menu.htm and right_page1.htm. There is no content
  in the frameset.htm file. It only defines how the frames will be laid
  out in the browser window.
• left_menu.htm is a separate html file that contains the content
  for the left frame in the browser window. In the example, links
  in left_menu.htm target the frame on the right, causing a new HTML
  page to be loaded into the right frame when the link is clicked.
• right_page1.htm is a separate html file that contains the
  content for the right frame in the browser window.

These three separate HTML files, the Frameset
and the two content html files, are all needed to show the one “page”.
The Frameset is never visible, but is the URL used to display this
page. For instance, the URLS of various files for this page are:

The individual files:

• left_menu.htm
• right_page1.htm
• right_page2.htm
• right_page3.htm

The frameset that puts them all together:

• frameset.htm

Note that when you select different pages to be displayed on the right hand side, the displayed URL stays the frameset URL. This is one downside of frames, in that the user does not see the URL of the current page.

Targets

A major benefit of frames is the ability for a link in one frame to load a new HTML file in a different frame. For example, a link in the left menu frame can change the contents of the right frame. Targeting is
the special method for making a link affect a different frame. By default, a link changes the content of the page or frame that contains the link. But you can target another frame for any link. In this case, the targeted frame gets the new HTML file specified in the link. To make this possible, each frame in a frameset must be named. Links with targets use these names to specify the frame where the new page should be loaded.

The frame names you use should be all lowercase, with no spaces. Note that there are several special target names that start the the underscore “_”. You should not use the to name frames, but instead, use them in your target to do the following:

• _blank – opens a new browser window for the specified URL.
• _parent – this is appropriate to use if you have a frameset nested in another frameset. The specified URL will replace the parent frameset of the current frame.
• _self – This is the default if no target is listed. The specified URL will be placed in the current frame or, if there is no frameset, the specified URL will fill the current window.
• _top – clears the current browser window of all framesets, and fills the entire window with the new URL.

Managing the frame files

As you’ve seen, there are many files to keep track of when you use frames. This can be confusing, and means that you need to be very organized when saving, naming, and placing your files on the disk. A few suggestions:

• As soon as you have the frames formatted in Dreamweaver, save all the files: the frameset and each HTML file in a frame
• Save all the files in the same directory
• Name the files in a way that indicates where they go. For example, HTML files that go in the top frame should start with the word top. For example, top_titlepage.html.
• Keep in mind that if several different HTML files are displayed in one of the frames on a page, each file has a different name, and only one of them is displayed when the frameset page first opens. This default page is the one referenced by the frameset.
• When you use FILE>OPEN IN FRAME… the frameset is updated to to use newly opened file as the default file for that frame. For example, if right_page1.htm was in the right frame, and you use FILE>OPEN IN FRAME to open right_page2.htm, the frameset will now open with right_page2.htm
  first. So if you are editing several pages within a frame, always use FILE>OPEN IN FRAME for the default page last. As a better alternative, edit the other pages in a normal window outside the frameset.
• Once you’ve set the file names, don’t use FILE>SAVE AS to resave your files. Many people make the mistake of writing over the different pages that are displayed in a frame by using SAVE AS.

Make a framed page

In Dreamweaver, do the following:

1. Open the Frames window by selecting WINDOW>FRAMES
2. Create a new document
3. Create a new frameset by selecting MODIFY>FRAMESET>SPLIT FRAME LEFT
4. Add additional frames as needed
5. Save the frameset by selecting FILE>SAVE FRAMESET
6. Save the HTML file for each frame by clicking in each frame and selecting FILE>SAVE
7. To set the properties of the frameset, select the Frameset by clicking on the outermost border in the Frames palette:
   
   1. Set the title of the frameset by editing the Title box in the document window. The frameset title is the only one that displays for the user, and you must have the frameset selected to set this title rather than the title of one of the frames. Setting the page titles of the individual frame pages does nothing.
   2. Set the visibility of frameset borders in the property inspector
   3. Set the width of the frameset borders in the property inspector (note that if you want the borders to be completely invisible, you must also set the individual frames to have no borders and have margins of zero).
   4. In the right hand corner of the Property Inspector, click in each frame, and set the frame to percent or pixels. Usually, the left hand frame is set to a fixed size with pixels, and the right hand frame is set to a variable size with percent. This allows the user to change the size of the browser window, changing only the size of the right hand frame.
8. To set the properties of each frame, click in the middle of a frame in the frame palette. For each frame:
   1. Give the frame a target name by typing it into the Frame Name box in the property inspector.
   2. Set the frame to be resizable or not by checking or unchecking the No Resize box. If you want one frame to be resizable, you usually need to make all the frames resizable.
   3. Set the scrolling to be on, off, or auto for the frame with the Scroll pull-down.
   4. To completely eliminate borders in the frames, set the Borders to No, and set the margin height and width to zero.
9. Create a link in one frame that changes another frame:
   1. Make the link
   2. Set the target of the link in the Property Inspector to the name of the frame you want to change
10. To force a link to replace the entire browser window rather than an individual frame, set the target to “_top”

Dreamweaver

Frame notes

Adding a frame.

To add another frame to the current frameset, press the alt key, and drag a new frame border from an existing frame boarder. Drag to the left, right, up or down. Or, use the one of the four MODIFY>FRAMESET>SPLIT commands to create a new frameset inside the current frameset.

Deleting a frame.

Delete a frame by dragging the frame border to the next frame border or edge of the screen.

Frames sub-palette in the Insert palette.

This palette allows you to quickly create a frame layout, with many of the frame attributes set to commonly desired settings. The blue box indicates the frame that will resize when the browser window is made bigger or smaller. The other frames are set to stay one size, regardless of the browser window size.

Preventing strange previews.

If you leave a frameset preview open in a browser window, go back to Dreamweaver, and do another preview, your page may show up inside one of the existing frames from the previous preview. This produces a kind of hall of mirrors effect. Don’t worry, just close the browser window, go back to Dreamweaver and do the preview again.

Setting Frame Row Height and Column Width

You adjust the frame rows and columns in the Properties inspector. You must first select the frameset by clicking on the frame border (either in the main document window, or in the Frames palette window). Once you do this, a representation of the frameset will appear in the right hand side of the Properties Inspector. Click on the left side of the the frameset box to adjust the row heights. Click on the top of the frameset box to adjust the column widths. You can also adjust the type of height or width setting to–pixels, percent, or relative.

Frame Row Height and Column Width-Pixels Setting

Pixels set an exact row height or column width for the frame. When the frameset is loaded in the browser, pixel measurements are followed exactly. Frames with the pixel settings have the highest priority for getting screen space from the browser.

Frame Row Height and Column Width-Percent Setting

Percent settings mean that the frame will be sized as a percentage of the window (or frameset) width or height. Frames with percent settings have a lower priority for space than frames with pixels.

Frame Row Height and Column Width-Relative Setting

Relative settings mean that the frame will be sized in relation to the sizes of other frames that have percent or pixel settings. To be honest, this doesn’t really make a lot of sense, but the net effect is that a frame with a relative setting has the lowest priority for screen space in relation to frames with percent or pixel settings.

Keeping a frame a fixed size when the browser window is resized

When the browser displays a page with frames, it assigns priorities to the frames based on the setting of pixels, percent or relative. If all the frames have the same setting, resizing the browser window will cause all of the frames to change size. So if you want to keep some frames fixed size, set those frames to “pixels”, while leaving at least one frame set to “relative” so that it can resize when the browser window changes. In this situation, the browser will make the frames that have relative settings smaller or larger, while the frame with pixel settings will stay the same size.

Frame scroll setting

If you never want scroll bars to show for a frame, even if it is made very small by the user, select “no” for the Scroll setting

Frame noresize setting

By default, the user can adjust the size of frames after the page is displayed. If you want to prevent this, set the noresize box to be checked.

Forms are a way to transmit information from the web page to the server. For example, if you want to collect the name and email address from people at your web site, you would use a form to do this.

The form uses different input types (e.g. check boxes and pull down menus), to collect the information. When the user “submits” the form, that information is transferred to the server, where it is processed by a “CGI” program. This program may put the form data into a database, mail it to the site webmaster, or otherwise deal with the information.

Form elements are inserted into the web page via the Forms sub-palette of the Insert palette. You must first insert the Form itself using the icon in the left hand corner of the Forms palette. You will see a dashed red line that indicates the boundary of the form. Each form element (text entry field, buttons, etc.) must be inserted within the red form outline.

Each form element has a name and a value.

• name: The name assigned to the form element, for example “phone”
• value: The contents of the form element, for example “310.555.1212″.

Some form elements also have a displayed name, for example the items in a list. For example, if you have a list of states, the user sees names like California and Colorado. But the value of those items in the list will be set to CA and CO respectively.

Form elements

Different ways for entering data

* There is a text field with a default value of “Hello there”. Note that text-fields and multi-line fields may display differently in Explorer and Netscape. Netscape fields seem to respond to font size, while Explorer fields do not.
* There is a multi-line text field
* There is a checkbox
* There are two radio buttons: Radio buttons are a special kind of form element. They are used in groups, where only one radio button can be on at a time. All the radio buttons in a group must have the same name. If you have more than one group of radio buttons, you must name the members of each group differently.
* Thereis a pull-down menu list
* There is a scrolling list
* There is a hidden field. You can’t see it, because it’s hidden. Hidden fields are used by the designer to transmit information in the form that is not seen by the user. A hidden field may contain special information about the form being filled out. For example the email address of where the form should be mailed (see the discussion of FormMail.pl below). In other cases, hidden fields are used to carry information from one web page to the next.
* There is a submit button, which sends the information to the web site
* There is a Reset button, which clears the form to its default values

CGI program
Handling the contents of the form

As described above, a form transfers its information to a CGI program running on the server. The form has to specify the name and location of CGI program it will use. To do this, you need to put a special instruction in the form that points to the CGI program.

Making a form in Dreamweaver

1. Select the Forms option of the Object palette
2. Click on the left icon, which will create the form (you’ll see this as a dashed red line)
3. In the property inspector for the form, set the method to POST
4. Set the Action: In the “real world” you would talk to your technical director, web master, programmer, or ISP for the correct CGI program to put in your form. It would typically be on the same server as your web page, and might look like this: /cgi-bin/process_form.pl
5. Inside the red dashed form box, add any form elements you want from the palette
6. For each element you add, give it an appropriate name, so the server knows what the element is for. DO NOT use the default names.
7. Set the default value(s) of the form element where appropriate
8. Be sure you include a button of the SUBMIT type
9. It is also traditional to include a button of the RESET type, which will allow the user to clear the form
10. Upload your file to the server and test

CGI software

Sources and info

To properly use forms on your website, you must use a CGI program on the web server. Your ISP may provide standard CGI programs or you may have a member of your development team who can set up a CGI program. As an alternative, there are many free forms handling CGI programs available for free on the Internet. Here are some links:

Matt’s Script Archive for lots of free scripts. Check out FormMail.pl in particular.

http://www.worldwidemart.com/scripts/

WebMonkey’s resource for CGI scripts.

http://www.webmonkey.com/tutorial/Perl_Tutorial_for_Beginners

Read pages 193-214 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Uploading your site using FTP

Using the site window in Dreamweaver
Define a site in Dreamweaver

1. With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
2. Select NEW > SITE
3. Be sure you have the “Advanced” tab selected and not the “Basic.” With LOCAL INFO selected
   • Set SITE NAME to “everythingaboutweb” or “mysite”(or whatever you want)
   • Set LOCAL ROOT FOLDER to where you the main folder where your files are located. Do Not set this folder to the folder where your web files are. If you do, you will be unable to move the entire folder. Always set the Local Root Folder to a folder ABOVE your project folder at least.(For example, select the projec1 folder not your project1_yourlastname. Your “project1″ folder should contain your project1_yourlastname folder.
   • Leave HTTP ADDRESS blank
   • Set the CACHE to be checked



4. With REMOTE INFO selected. (It is located in the left hand side navigation)
   • Set SERVER ACCESS to FTP
   • Set FTP HOST to: ftp.everythingaboutweb.com
   • Set HOST DIRECTORY to: (leave blank)
     
   • Set LOGIN to : grdes66online
   • Set PASSWORD to: (I will email you the password)
     Please note the login and password information in the above image is incorrect. Please use the information I have given you in the text above.
     Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: “Use Passive FTP” located under thepassword field.
5. Select OK to complete the creation of a new site.

6. CONNECT to the server using the “plug” icon

copyright © 2006-2008, jamie cavanaugh

Your spry widget assignment is due this week. Upload the zipped file with your complete folder to the “Dropbox” on the smconline.org site by noon, Friday, October 3.

This week I have outlined additional useful information regarding the spry framework. There is no assignment this week but please be sure to read through all the notes. I also advise you to take time to go through the web site critique information.

Your final project will be due by midnight on Friday, October 17. Please let me know if you have any questions about the final project.

Final Project
The focus of this project is to create a complete, portfolio quality web site. You are to redesign the web site for a company that currently has a web site. Designing a personal web site is not allowed:

• Argyle Design (www.argyle-design.com). This company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering

Your new web site design should have a strong design aesthetic that reflects a new attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original, but you may borrow content from the existing site — you may use images and text from the sites you’re redesigning, or from any other product design or industrial design company site. Your site should consist of:

• 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
• A sub navigation for “what we do” and “portfolio sections.”
• A strong visual design
• A theme and visual concept that carries through the site
• A clear navigation system
• An effective and clear system of displaying the company’s portfolio
• A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
• 6 pages that have complete content, including photos and text.
• You must use some html text in the site

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

• Sites take too long to download, often because of too many rollover images.
• Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course.

NEW REQUIREMENT FOR FINAL: You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from the actual Argyle Design web site. You may use your own original artwork and/or photography if you prefer.

Student 1
Student 2
Student 3

Final Project checklist

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Spry framework for Ajax

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

Please read: Chapter 10 from our textbook “Adding Effects and Interactivity with Spry” (pages 237-248)
Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos)

Widgets and Menus

Spry widgets include Menu Bars, tabbed panels, accordion effects, and collapsible panels.

The Spry widgets can be edited in the Property inspector. For example, if you create a Menu Bar, you can assign text and links to menu options in the Property inspector. But, in general, you cannot do much, if any, formatting for Spry widgets in the Property inspector. Instead, you format Spry widgets by editing style sheets that get generated by Dreamweaver whenever you create a Spry widget

There are a few things to be aware of when you create Spry widgets:

• Documents must be saved before you insert Spry widgets.

• Spry widgets generate lots of CSS styles and JavaScript files, and these files are saved every time you save a page with a Spry widget.

• You control basic features of the Spry widget, like text and links, in the Property inspector. But you format Spry widgets (elements like font, text color, background color, and so on) in the CSS Styles panel by editing the CSS style for the Spry widget.

Exercise: I encourage you to go through the spry tutorials on this Adobe page. The tutorials will give you a better understanding about how the various sprys work. http://www.adobe.com/devnet/dreamweaver/articles/spry_simulations.html

Following the directions from page 238-240 in our textbook, try inseting a Tabbed Panel into a HTML page.
Be sure to be aware of the 3 things outlined in the notes above. Use the notes below to style the Tabbed Panel.

Use the CSS Styles Panel to Format Tabbed Panels. You can change the background color of tabbed panel elements in the CSS Styles panel:

• To change the background color for a hovered-over tab, choose the .Tabbed PanelsTabHover style in the CSS Styles panel, and choose a background color from the background-color property.

• To change the background color for a selected tab, choose the .TabbedPanels TabSelected style in the CSS Styles panel, and choose a background color from the background-color property.

• To change the background color for a tabbed content area, select that tab in the Document window, choose the .Tabbed PanelsContentGroup style in the CSS Styles panel, and choose a background color from the background-color property. Format the content of tabbed panels the same way as formatting text or images.

Spry Effects

Effects animate your page and make page elements react to visitor actions by changing location or size or appearance. Editing effects requires some ability to work in the Behaviors panel.

Demonstration of Spry effects:
http://labs.adobe.com/technologies/spry/demos/effects/index.html

Additional Spry Resources:

Additional Spry Demos:
http://labs.adobe.com/technologies/spry/demos/index.html

Spry Widget videos:
Creating menus with Spry Widgets

Working with the Spry Accordian widget

Using the Spry framwork for Ajax

Adobe site: All things Spry:
http://www.adobe.com/devnet/spry/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web sites to critique:
What makes a good site?

Here’s an interesting exercise because I want you to look at sites that all use the same HTML but are styled differently using CSS.

CSS Zen Garden: The sites below are all a part of a web site called CSS Zen Garden.

“The CSS Zen Garden is a World Wide Web development resource. The goal of the site is to showcase what is possible with CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS (and supporting imagery).”

Please take a look at the following styles all contributed by different designers. Take note of the similar content but how all designers have created an unique design.

Using our Criteria for discussion below, which designs are most successful and why?

Dead or Alive:
http://www.csszengarden.com/?cssfile=009/009.css

The Question Why:
http://www.csszengarden.com/?cssfile=040/040.css

Si6:
http://www.csszengarden.com/?cssfile=044/044.css

Punkass:
http://www.csszengarden.com/?cssfile=101/101.css

Contempo Finery:
http://www.csszengarden.com/?cssfile=151/151.css

Business Style:
http://www.csszengarden.com/?cssfile=175/175.css

Here is a link to all the designs on the CSS Zen Garden site: http://www.mezzoblue.com/zengarden/alldesigns/

Criteria for discussion

• Look & feel / Attitude of site
  Does the design or “look and feel” of the site represent the attitude of the company/client?
• Use of color
  Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
• Composition / layout
  Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
• Typography
  Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
• Content
  Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
• User experience
  Is the site easy to navigate? Is it east to find content on the site?
• Navigation
  Is the navigation well-organized. Is the navigation consistent from page to page?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

There are no assignments that need to be turned in this week. You should take the time to do the exercises in the class notes above. You should be working on your Final Projects.

copyright © 2006-2008, jamie cavanaugh

FTP (file transfer protocol) review
Please be sure to review the information about how to use FTP to upload the files to the class server. There are demonstration videos and text directions in the Week 02 notes. Remember you will need to upload your final project to the class server in order to receive your final grade.

Final project assignment. Your final project will be due by midnight on Friday, October 17. No late projects accepted.
Please also review the assignment for your final project and let me know if you have any questions. Note that you are required to use the site map located in the specifications for the final project. You may change the names of the sections but all of them need to exist in your final project. For instance, “Who We Are” could be changed to “About Us” if you’d like to change it

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we’re going to cover several items that aren’t things you’re required to include in your final project — but you may want to. We’ll cover two items using the Behaviors windows: show-hide elements, and open browser window. And we’ll also cover how to create a spry menu bar. You’ll need Dreamweaver CS3 in order to create the spry menu bar. Earlier versions of Dreamweaver do not have this feature.

The spry menu bar may be something you want to use in your final project. You assignment this week is to create a spry menu bar so you might decide you’d like to use one in your final project.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Behaviors
How to add interactivity to a web page

Introduction

event -> action

Dreamweaver calls its way of adding interactive JavaScript to a web page behaviors. Behaviors are actions associated a specific event (e.g. onMouseOver) that are attached to an object on the page (e.g. an image). When a defined event occurs (e.g. a mouse click) for that object, the action is executed (e.g. play an animation timeline). Usually, a behavior causes something to happen to a named object in the page.

Note that to add a behavior to an object on the page, the object must be a link. In other words, it must have an <A> tag. The easiest way to do this is to select the object, and put the “#” character in the Link box in the Property Inspector.

Behaviors and AP elements

Show or hide a AP element

• Name the a AP element you want to show/hide
• Select the object in the page that show/hide the a AP element
• In the property inspector for the selected object, put the “#”character in the link box (or a named anchor – see discussion below)
• Open the Behaviors window
• Using the “+” pull-down menu, select SHOW-HIDE ELEMENTS
• Select each AP element you want affect
• Select SHOW or HIDE for that AP element
• You can affect multiple AP element by selecting each AP element and setting show or hide for that AP element
• Select OK when finished
• In the behaviors palette, click on the just-entered behavior
• In the Events column, click on the default event to set your preferred event for this action

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Pop-up windows

Creating custom browser windows with JavaScript

Pop-up windows are used to display additional content in a new browser window rather than replacing the current page. The simplest way to make a pop-up window is to use the “_blank” target for a normal link in a page. But these windows are standard browser windows.

If you want to specify the dimensions of the window and control features such as scroll bar visibility, menu availability, toolbar visibility, and so on, then JavaScript is required to create the window. Dreamweaver includes a behavior called “Open Browser Window” to generate this JavaScript.

To have a link open a pop-up window:

1. Create and save the HTML page to be opened
2. Select the text or image in the page that will open the pop-up window
3. In the property inspector for the selected element, put the “#” character in the link box (or, insert a named anchor so the page doesn’t scroll to the top – see the named anchor note below)
4. Open the Behaviors window
5. Make sure that Dreamweaver is configured for the right version of JavaScript by selecting the “+” pull down>Show Events For>4.0 and Later Browsers.
6. Using the “+” pull-down menu, select OPEN BROWSER WINDOW
7. In the resulting dialog, browse to the HTML file you want to display in the new window
8. Enter the width and height for the window
9. Select the desired browser window attributes. You should experiment with these checkboxes to see how they affect the display size, appearance, and features

Pop-Up Notes

• onClick event: I’ve had the best luck with using the onClick event to make pop-ups. Other events seem to have trouble with placing the window in front of the current window, or showing a cursor change.
• Window name: If your site has multiple links that open pop-ups, and you want them all to be in the same window, you must put the same name in the “Window Name:” field in each open browser window dialog.
• Named Anchor: The “#” in the <A> tag will cause the launching window to scroll to the top of the page if
  you are positioned lower on the page. To avoid this, place a named anchor at the position of the pop-up link (INSERT>INVISIBLE TAGS>NAMED ANCHOR), and then make the link URL to that named anchor (e.g. “#popup” rather than a simple “#”).
• Consistent pop-up window size: If you are putting graphics that must fit exactly in a pop-up window, you may find that there are either 10 extra or 10 less pixels in the window than you expect. The fix is this:Set the resize and scrollbars attribute settings to “no”. The window scrollbars and resize handle are what browsers treat differently. If you don’t specify what should happen, some browsers leave space for them even if they aren’t showing, others don’t. So rather than using the default setting, you can avoid any ambiguity and fix the problem with code like this, which explicitly says do not display the scrollbars and resize handle.onClick=”MM_openBrWindow(’pop_up_example.html’,’popup’, ‘scrollbars=no,resizable=no,width=200,height=300′)”You can edit the HTML and insert in the “scrollbars=no,resizable=no,” text, or, when you use the Dreamweaver Open Browser Window behavior, check the boxes for “Scrollbars as Needed” and “Resize Handles” in the Open Browser Window dialog. Then open up code view and change “yes” to “no” in the code: scrollbars=yes,resizable=yes –> scrollbars=no,resizable=no

Read pages 251-252 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Forcing the pop-up to the front

Sometimes, the user will try to open a pop-up, and it will seem as if it is not opening. In fact, the pop-up is already open, but hidden behind another browser window. The solution is to force the pop-up window to the front when the user clicks. This is accomplished by modifying JavaScript code to add the window.focus() method. You can modify the pop-up window JavaScript that Dreamweaver creates. Find the following code in the <HEAD> section of your web page:

// Standard Dreamweaver function

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

Copy the below code and paste it into your HEAD section, completely replacing
the above code.

// Modified function, with additions in BOLD

function MM_openBrWindow(theURL,winName,features) { //v2.0   var newWindow = window.open(theURL,winName,features);

   newWindow.focus();

}

Putting the window in a specific location

If you want to position the new window in a specific location on the screen, you can modify the code further to look like the following. By adding the “left, top” features for Explorer, and “screenX, screenY” for Netscape, the window will be positioned to the coordinates you put in place of “300″ in this example.

// Modified function with additions in BOLD

function MM_openBrWindow(theURL,winName,features) { //v2.0   var win_position = ‘,left=300,top=200,screenX=300,screenY=200′;

   var newWindow = window.open(theURL,winName,features+win_position);

   newWindow.focus();

}

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creating Pop up Menu using a Spry widget

The following definition and description about the Spry widget is from the Adobe web site:

“A Spry widget is a page element that combines HTML, CSS and JavaScript code to enable user interaction.

A Spry widget is made up of the following parts:

1. Widget structure:

An HTML code block that defines the structural composition of the widget.

2. Widget behavior:

JavaScript code that controls how the widget responds to user-initiated events.

3. Widget styling:

CSS code that specifies the appearance of the widget.

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget.

The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more. Each widget in the Spry framework is associated with unique CSS and JavaScript files, available on Adobe Labs.

The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js).”

Click here for an Example of Spry Menu Bar

Follow the steps below to add the menu like the one above:

Step 1: Make sure you have your site defined using the Site Definition box we’ve used when uploading our files. You need to go to SITE > NEW SITE and fill in the local information for your site. In this case for the field “Local root folder” you will choose your folder named final_lastname. You only need to fill in 2 fields: “Site name” and “Local root folder.”

Step 2: Make sure in the SITE > MANAGE SITE palette that you’ve selected the site you defined called final project. This will ensure that the Spry assets are copied to the correct folder.

Step 3: Now you are ready to insert the popup menu widget into your page. I recommend that you insert the pop up menu widget into a layer. Click inside the layer and go up to the Insert Window labeled “Spry” as shown below and click on the icon labeled “Spry Menu Bar.” This will insert the Spry Menu Bar into your page:

Step 4: Save your page and double check to make sure that the folder named “Spry Assets” is correctly linked in the head of your page and the folder is copied into your final_lastname folder. The folder named “Spry Assets” contains the Javascript and CSS files you will need to display the bar.

Step 5: You will be able to edit the Menu Bar using the WINDOWS > PROPERTIES Inspector. It looks like this:

Here you will be able to change the text for the navigation and add and delete second and third level navigation using the +/- signs. Here you can also create links for the navigation. If you would like to customize the widget (I have customized the rollover and hover states), you can click on “Customize this widget” and follow the directions given here.)
Video Demonstration

I demonstrate how to insert a spry menu into a web page. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (29MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted the two videos below.

Spry Menu | Part 1

Spry Menu | Part 2

Read pages 240-241 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:
View Adobe video:
Creating Menus with Spry Widgets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment Week 05

Spry Menu: Create a spry menu bar following the instructions above. Please be sure to view the Video Demonstration, read through the class notes, the textbook reading, and the Adobe video. Upload the zipped file with your complete folder to the “DropBox” on the smconline.org site by noon, Friday, October 3.

(If you don’t have Dreamweaver CS3 and therefore don’t have the Spry Menu feature, create a pop up window and upload the zipped files to the “DropBox.”)

copyright © 2006-2008, jamie cavanaugh

This week your midterm projects are due.

THE DEADLINE FOR THE MIDTERM PROJECT TO MIDNIGHT, FRIDAY, SEPTEMBER 19. Please be sure to upload your midterm project to the class server by this new deadline. See the week 02 class notes for information on how to connect to the class server. Please be sure you know how to upload your “midterm_lastname” folder there before the final deadline.

Please be sure that you name your web project folder “midterm_lastname.” And be sure you upload your entire folder and not just the individual html pages and images folder. Please review the FTP video demonstration to make sure you understand how to do this.

You will be responsible for critiquing each other’s midterm project work. See the notes below regarding web critiques.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Your final project will be due by midnight on Friday, October 17. I want to give you plenty of time to do the research and design necessary for this project so I’m giving you the specifications for the project below. Please let me know if you have any questions about the final project.

Final Project
The focus of this project is to create a complete, portfolio quality web site. You are to redesign the web site for a company that currently has a web site. Designing a personal web site is not allowed:

• Argyle Design (www.argyle-design.com). This company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering

Your new web site design should have a strong design aesthetic that reflects a new attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original, but you may borrow content from the existing site — you may use images and text from the sites you’re redesigning, or from any other product design or industrial design company site. Your site should consist of:

• 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
• A sub navigation for “what we do” and “portfolio sections.”
• A strong visual design
• A theme and visual concept that carries through the site
• A clear navigation system
• An effective and clear system of displaying the company’s portfolio
• A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
• 6 pages that have complete content, including photos and text.
• You must use some html text in the site

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

• Sites take too long to download, often because of too many rollover images.
• Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course.

NEW REQUIREMENT FOR FINAL: You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from the actual Argyle Design web site. You may use your own original artwork and/or photography if you prefer.

Student 1
Student 2
Student 3

Final Project checklist

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Site Critiques

Part of your assignment for next week will be to critique your fellow students’ midterm projects. One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing other’s work you begin to understand more fully what makes a web site effective and well-designed. Different types of web sites have different goals. What make a good web site?

What makes a good site?

• Information design – Goals, audience, requirements, and organization of content
• Interaction design – Functionality, navigation, style of interaction
• Media design – Visual layout, integration of text, audio, graphics, animation, video
• Story/game design – Narrative, perspectives, paths, game play, goals, themes, characters
• Business design – Economic and organizational benefits and operations
• Technical design – Capabilities, integration, technologies, performance, security

General Sites to study:

• Google www.google.com
• MySpace www.myspace.com
• You Tube www.youtube.com
• Ebay.com www.ebay.com
• Barneys www.barneys.com
• Target www.target.com
• The Gap www.gap.com
• Martha Stewart www.marthastewart.com
• Amazon www.amazon.com
• Epitonic www.epitonic.com
• Eames Office www.eamesoffice.com
• Real www.real.com
• Los Angeles Times www.latimes.com
• New York Times www.nytimes.com
• Apple Computer www.apple.com
• Microsoft www.microsoft.com
• Wikipedia www.wikipedia.com
• Hello Design www.hellodesign.com
• Metadesign www.metadesign.com
• KBDA www.kbda.com
• Cahan & Associates www.cahanassociates.com
• Ph.D. www.phdla.com
• Imaginary Forces www.imaginaryforces.com
• R/GA www.rga.com/
• IDEO www.ideo.com
• Art Center College of Design www.artcenter.edu
• California Institute of the Arts www.calarts.edu
• Ford Motor Company www.ford.com/us
• General Motors www.gm.com
• VW www.vw.com
• Metropolis Magazine www.metropolismag.com
• Dailycandy www.dailycandy.com
• Citysearch www.citysearch.com
• craigslist www.craigslist.org

Seven Criteria for discussion. These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

• Look & feel / Attitude of site
  Does the design or “look and feel” of the site represent the attitude of the company/client?
• Use of color
  Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
• Composition / layout
  Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
• Typography
  Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
• Content
  Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
• User experience
  Is the site easy to navigate? Is it east to find content on the site?
• Navigation
  Is the navigation well-organized. Is the navigation consistent from page to page?

I would like you to take a look at all of the web sites below. The sites are Product Design sites so you should look at them as part of your research for your final project.

Design-related Web sites to critique:

• Cooper Interaction Design
  Conceptual product design and user interface design. Breakthrough design from the initial concept to the details of the user interaction.
  www.cooper.com
• Product Development and Management Association
  Cross-industry gathering of people interested in and devoted to the study and practice of product development.
  www.pdma.org
• Continuum
  Strategy group focusing on design and engineering.
  www.dcontinuum.com
• Speck Product Design
  Product design and development firm creating innovative solutions for the mobile electronics, consumer electronics, medical, and furniture industries.
  www.speckdesign.com

Using the Seven Criteria for discussion outlined above, I’d like you to post a comment about one of the sites below. What makes it well-designed or what makes it less effective as a web site?

Please post your comments to the Discussion > Web Critiques: Design Web sites section on the smconline.org site.

Midterm Project Web sites to critique:

Using the Seven Criteria for discussion, offer your fellow students constructive advice on how they may make their midterm web project more effective. How might they work on the following criteria as it relates to their project? Look & feel, Use of color, Composition / Layout, Typography, Content, User Experience, and Navigation.

Here is the URL to the midterm projects:

http://www.everythingaboutweb.com/grdes66online

Please post your comments to the Discussion > Web Critiques: Midterm Project section on the smconline.org site.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Change a different image
Using the swap image behavior

If you want a different image to change when you rollover, it’s a little more complicated. See example page here.

• Insert the image that will be changed
• Select this image and define a name (e.g. “rollover2″) in the property inspector (in the upper left hand corner)
• Insert the other image that will cause the rollover graphic change
• Select this image and put a link or “#” character in the link box in the properties inspector
• Then, while the image that causes rollover is still selected, open the WINDOW>BEHAVIORS window.
• Using the “+” pull-down menu on the left, select the behavior/action Swap Image



• In Swap Image, select the name of the image you want to change (the first image inserted above, rollover2)

• Then browse for the replacement image (the highlight image)
• Note that you can select rollover images for as many named images as desired.
• Check the Preload Images and Restore Images onMouseOut checkboxes
• Select OK
• If you want a different event than a mouseOver to cause the image swap, you can change the event. Click on the “swap image” event, and then click on the downward pointing arrow at the right of the “Events” column. Select the event you want to cause the rollover change.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Another way to postion content on the pages is through the use of what Adobe calls AP divs. “AP” stands for “Absolute Position” and AP divs were once referred to as Layers. (So if you are working in a Macromedia version of Dreamweaver instead of Adobe, you will see they are referred to as layers not AP divs.)

AP divs/Layers: a way to position content on a page

AP divs/Layers are boxes that can be positioned anywhere on the page, and contain anything that can be put in a normal web page. AP divs/Layers can

• Be positioned with pixel accuracy, in relation to the upper left hand corner of the web page, or in relation to another
  layer.
• Contain anything, including text, links, gifs, animated gifs, and jpgs.
• Have a stacking order, so that elements in a layer can be in front of, or behind elements in another layer.
• Can be shown or hidden.
• Can have their position changed over time.

Creating layers

1. Insert a layer by selecting INSERT > LAYOUT OBJECT > AP DIV.
   Alternatively, select the layer icon in the insert menu
   then click and drag a box to create a layer on the screen.
2. With the div selected, note the following div features in the properties inspector:
   • Left, Top – defines the top left corner of the layer rectangle relative to the upper left corner of the browser window
   • Width, Height – defines the size of the layer in pixels (note that the layer may expand to accomodate its content)
   • The layer name
   • Background image – tiles an image in the background
   • Background color – defines a background color for the layer.
   • Visibility – whether the contents of the layer will show when the page loads
   • Overflow – what to do with any content that exceeds the stated dimensions of the layer (only works in the most recent versions of browsers)
   • Z index – the layer order – higher is in front
   • Clip – the upper left corner and dimensions of a clipping area that will show reveal a part of the layer contents
3. The AP elements window displays information about all the divs on the screen.
   • The order of the divs, based on the Z index. The order determines the visibility of layers when one overlaps another. Divs with higher numbers are in front. You can change the order by simply dragging one div to a new location.
   • The currently selected div. You can select a div by clicking the layer name in this window
   • The nesting level of a div
   • The visibility of the div. The eye indicates if the div’s visibility when the page is loaded is set by default (no eye), visible (the open eye), invisible (closed eye)

CSS box model

To help you understand positioning you need to understand the box model.

Here’s a helpful tutorial you will want to review:

http://www.brainjar.com/css/positioning/default.asp

Video Demonstration

I demonstrate how to re-create the tables_example.htm sample page using AP divs. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the file tables_example.htm in Dreamweaver. Note, that this page is actually built using a table structure. I will demonstrate how to build the page using a combination of AP divs and tables. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (54MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted all three videos below.

AP divs | Part 1

AP divs| Part 2

AP divs | Part 3

Special Announcements:
1) You have 3 assignments due by noon, Tuesday September 16. See the end of the class notes for details on your assignments.

2) I HAVE EXTENDED THE DEADLINE FOR THE MIDTERM PROJECT TO MIDNIGHT ON FRIDAY, SEPTEMBER 19. Please be sure to upload your midterm project to the class server by this new deadline. See the week 02 class notes for information on how to connect to the class server. Please be sure you know how to upload your midterm_lastname folder there before the final deadline.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Today we’re going to talk about navigation– both how to design navigation and also how to insert navigation into your web pages. Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

Navigation design
Helping the user do what they want

The following are general rules to follow when designing navigation in a web site. The are only rules, and as the saying goes, rules are made to be broken–just have a good reason to break them!

• Consistency
  People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:
  • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
  • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

Note: Some people create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

• 7 +/- 2 rule
  • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that if you have more than 5-9 links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:

• Group Navigation
  If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:
  • Proximity. Place similar navigational elements together on the page, separated from other groups.
  • Style. Give each group of navigational elements its own visual design.

Exercise
Below are 10 links for an auto site. How would you organize them for clear and useful navigation?

contact, cars, customer service, dealers, about us, trucks, jobs, investor info, financial services, suvs

• Keep it simple
  Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:
  • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
  • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.

• Where are we?

Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the heirarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

• Multiple Navigation
  There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.
  • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
  • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
  • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accomodate both techniques, and again, sometimes more than one navigation system is needed.
  • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.

• Hide versus show sub-nav
  • Use sub-headings as part of the primary navigation
  • Rollovers or pop-outs to reveal sub-nav

Depending on the amount of content and number of sub-pages underneath the main sections of the web site, the navigation design should reveal the sub-navigation in some way.

Required Reading:
Designing Web Graphics 4 by Lynda Weinman: Navigation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Next, let’s review how to insert images into a web page. Then we’ll go over how to insert a rollover image into a page. This is important because many times your navigation will be built using rollover images. And finally, I show you a way to insert a “swap inage” into your web page. You may want to design your web site using this behavior. If so, the instructions below will be helpful.

Insert images
Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

gorilla.jpg

gorilla.gif

Once you have an image to work with, these are the steps for putting an image in a web page.

• Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, which
  you can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
• Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
• Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
• Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
• Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the
lower right hand corner of the palette. Experiment with the following:

• Change the height and width of the image
• Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
• Change the alignment so text wraps around the image
• Set the alt attribute of an image
• Make the image a link
• Change the VSpace and Hspace to change the margin around an image when text if flowing around it

Make the graphics for Insert Rollover example below.
Download: rollover.zip (18K)

The download contains two Photoshop files needed for creating the images used in the rollover and swap image exercises below.

Open these files in Photoshop, and save out the following files: rollover1.gif, rollover1_over.gif, rollover2.gif, and rollover2_over.gif. The files with the “_over” suffix are the highlight files that show when the cursor is over the graphic.

For the rollover1.psd file, you’ll need to copy the text layer and change it’s color for the highlight version. For both files, turn layers on and off as appropriate for the normal and highlight versions of each image. Use Photoshop’s FILE > SAVE FOR WEB function to create the images.

Insert Rollover

Create a rollover the easy way

• Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
• Click on the “Insert Rollover Image” icon in the objects palette
• Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
• Browse to the “Original Image” file. This is the image that is shown when the cursor is not over the graphic.
• Browse to the “Rollover Image” file. This is the image that is shown when the cursor is over the graphic.
• Normally, you check the “Preload Rollover Image” box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
• Type in the alternate text associated with this graphic
• Browse or type in the link you want associated with this graphic. If you don’t want to link anywhere, just put a “#” in this space.

Required Resources – Please read and view the following:
Dreamweaver CS3 Hands-On Training by Garrick Chow: Learning the Basics
Adobe Video: Inserting images
Adobe Video: Creating rollovers in Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Image maps

links inside of images

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

1. Click on the image
2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
3. Select a shape (rectangle, circle, or polygon) from the lower left
4. Draw a shape with the drawing tool
5. Dreamweaver will create a translucent shape for your hotspot
6. Enter a URL or local web page file name in the Link section
7. If you want a link to open in a new browser window, set the “Target” selection to “_blank”
8. Set the “ALT” section to the desired alternate text
9. Create additional hotspots by repeating steps 3-8
10. When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.

Explorer Blue Lines
You may find that when the user clicks on an image map in Microsoft Explorer, an outline appears showing the shape of the image map. To remove this outline, edit the HTML and add a small amount of JavaScript.

1. Find the <map> tag associated with the image you want to fix.
2. Within the <map> tag, find the associated <area> for this hotspot.
3. Inside this <area> tag, add the code onFocus=”this.blur()”
4. For example,

<img src="table_files/lit_side.jpeg" width="140"  height="320" border="0"usemap="#mymap" align="left" hspace="10"><map name="mymap">

<area shape="rect" coords="2,115,138,152"

href="http://www.brickmag.com/" onFocus=”this.blur();”>

<area shape=”rect” coords=”0,166,143,204″

href=”http://www.thinkoutside.com/” onFocus=”this.blur();”>

<area shape=”rect” coords=”1,219,138,253″

href=”http://www.jacketmagazine.com” onFocus=”this.blur();”>

<area shape=”rect” coords=”1,273,144,307″

href=”http://www.artcenter.edu/” target=”_blank” onFocus=”this.blur();”>

</map>

Exercise
Download the imagemap.zip file.

Using the enclosed Photoshop file, complete the following:

1. In Photoshop, crop the top header including the logo and navigation and optimize the image.
2. In Photoshop, crop and optimize to save the center photos.
3. In Dreamweaver, build the page using tables, use the “Image Map” properties in the Property Inspector for the logo, main navigation, and sub navigation.
4. In Dreamweaver, add a nested table in the main body and add HTML text.

Additional Resources:

See my CSS video(s) below for a demonstration on how to create an image map.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Design process
Developing a methodology for designing web sites.

There is a definite process for designing web sites. The web design process is similar to print design but is different in some very distinct ways. Organizing and designing navigation is one of the most distinct differences between print and web design. As a designer you need to be conscious of the user experience and design with that in mind. Below I have outlined the design process for smaller, personal projects and then I detail a more professional approach called the “Core Process.” For those of you how are interested in working for a design studio or agency, it will be a benefit to understand this more complex process. Most larger firms use some variation of the Core Process as outlined by lynda.com and Kelly Goto.

It’s useful to develop your own standard methodology for designing web sites. This helps you be efficient, and able to produce consistently good work even when inspiration doesn’t come. There are many approaches to designing a web site. The following is one approach:

1. Project Research.
   The beginning of the design process is the research phase. In this phase, the designer immerses themselves in the project requirements, client needs, and the fields related to the web site.
   1. Define the client goals and requirements
   2. Define the audience
   3. Define the scope of the web site
   4. Compare and contrast existing web sites with similar characteristics
   5. Educate yourself about the field(s) related to the web site
   6. Define the attitude of the web site and organization/brand it represents
      
      
2. Information Design.
   Before visual design can begin, it’s important to understand how the material on the site is going to be organized. This requires study and planning in the following ways:
   1. Define the most clear organization of content, featuring the most important categories and achieving the requirements defined in the research phase. Keep in mind the 7+-2 rule discussed previously.
   2. Consolidate similar sets of content under one category
   3. Don’t assume that the client’s current organization is the best one for the web
   4. Consider how the categories relate in terms of importance and quantity of content
   5. Create sub-categories if necessary, but keep the levels of hierarchy to a minimum
      
      
3. Design Research.
   Before you start the formal visual design, collect and develop a broad range of design elements to work with and gain inspiration from. The idea is to have more than enough material to experiment and sketch with.
   1. Collect magazines, web sites, and other materials that have great design ideas. They should be both related and unrelated to the field of the web site. Use these design concepts for inspiration.
   2. Get photographs/drawings/etc. of products or concepts used on the site
   3. Based on your project research, develop several themes, concepts and rules that will inspire and constrain your design choices.
   4. Brainstorm design elements
      1. Sketch design elements and layouts
      2. Gather or create logos, shapes, forms, and other graphic elements that can be used in the design
      3. Develop several possible color palettes
         
         
4. Sketch page designs.
   Experiment with elements you’ve gathered and create several different sketches of the site
   home page.
   1. Try pencil and paper as well as Photoshop/Illustrator. Don’t use Dreamweaver–it’s not meant to be used as a web design tool.
   2. Select a major theme or concept for the home page, considering your research and information design — visual
      style, audience, attitude, site goals, navigation, and categories
   3. Consider how the home page will relate to the sub-pages
   4. Tie all the elements together on the page
   5. Don’t incorporate every element and idea — be willing to throw out good ideas that don’t fit.
   6. Remember the basic principles of design, including proximity, alignment, repetition, and contrast
   7. Cut, refine, simplify, and clarify your designs
      
      
5. Produce the home page.
   Select your best design sketch, and create a formal version in Photoshop.
   1. Select the design that best communicates the attitude and goals defined in the project research phase
   2. Refine the page composition and color palette as you create the new version
   3. Consider download time
   4. Consider how the page will be sliced
      
      
6. Produce the sub-pages. Incorporate some major design elements into the sub-pages designs.
   1. Sketch several sub-page designs, using important design elements from the home page
   2. Modify home page elements to fit the sub-page — reduce, change color, rotate, stretch, cut up, etc.
   3. Make the navigation clear, functional, and out of the way of the content. Consider making it smaller (navigation is often too large)
   4. In most cases, content should dominate sub-pages more than on the home page
   5. Select the best designs and implement them in Photoshop.
7. Slice the images and build the pages in Dreamweaver. Building the pages in Dreamweaver is the last step of the process.
   1. After building the design comps in Photoshop, slice the images and optimize them for the web. (We will talk about this later in the semester.)
   2. Set up a proper file structure. Create an folder named “images” and place your optimized images in this folder.
   3. Create the index.html page in Dreamweaver.
   4. Create the rest of the page using the index.html file. You can use the index.html and do a “save as” to create the remaining pages.
   5. Use the navigation you created in the index.html file for the additional pages. (Once you’ve created your index.html page, you shouldn’t need to re-create pages from scratch.

Learn about a more in-depth design process for the web called the Core Process by the author of ReDesign 2.0, Kelly Goto. Click on the link under number 2 called Core Process Overview.

Core Process
Phase 1: Define the project
Phase 2: Develop the site structure
Phase 3: Design the visual interface
Phase 4: Build and integrate
Phase 5: Launch and beyond

Additional Resources
Designing Web Graphics.4 by Lynda Weinman
Web Aesthetics
Navigation

Preparing Design Comps
As we discussed, Dreamweaver is not a design tool so therefore, the design of your site must be created in Photoshop. Download a sample design comp and note the following:

• Be sure to set the width and height of the document in pixels , the color mode to RGB, and the resolution should be 72 dpi for most web files.
• Be sure to create a Photoshop file with elements on separate layers. This is important because you may want to edit certain elements separate from the rest of the document, or turn specific layers on or off.
• Insert any photographs or graphics into the design file at 72 dpi. This will prevent the weight of the Photoshop file from getting too large.
• Notice the navigation “buttons” have both an “off” and “on” state on seperate layers. Again this is important when you are slicing– you want to be able to turn specific layers on or off.
• Any HTML text should also be added to the file on a separate layer. Remember you will use this Photoshop file to get final design approval from a client so you’ll want the page to represent the look of the final HTML page as closely as possible.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we will discuss how to optimize your web images before you start to build your web site in Dreamweaver. Earlier we discussed the basic principles of compressing your images for the web. What do you do when you have all of your final design comps ready in Photoshop and you want to optimize all of the images you’ll need to build your web site? Saving each image one-by-one can be very inefficient. Slicing allows you to “cut out,” name, and optimize all of your images at the same time. This can save you a great deal of time and is easy to do.

Image Slicing
Here’s an example web page that demonstrates the image slicing approach.

Overview
Many web designers develop their page layouts in Photoshop (or Illustrator) before they use an application such as Dreamweaver to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their Photoshop layout into the realities of HTML and limited download time. This involves compressing different parts of the layout in different ways (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

In Photoshop CS2, an image slicing application called ImageReady is shipped with Photoshop, and the two programs are tightly integrated. ImageReady is a program specifically designed for image slicing, and contains many additional tools for this process.

In both Photoshop CS2 and Photoshop CS3, image slicing is also part of Photoshop. If you do not have Photoshop CS2 or CS3, you can also use ImageReady if it is included in the version of Photoshop you are using for this class.

Adobe Fireworks is another program designed for image slicing and has replaced ImageReady.

Advantages of image slicing
By slicing the page into smaller graphics, the designer can:

• Compose the page in Photoshop – rather than Dreamweaver
• Simulate layering – by compositing imagery in Photoshop, and avoiding the use of DHTML layers in the web page.
• Optimize the page – compress parts of the web page individually, and leave parts of the page “transparent” so the background color or background image shows through. For example, use JPEG for a photograph in one part of the page, use GIF for a logo with a transparent background where the page background color shows through.
• Use HTML text – leave parts of the page available for HTML text which requires very little download time compared to graphic text. HTML text can also be updated more easily than graphic text.
• Make graphic elements individual links – while his effect can be achieved with image maps, usually separate graphics
  or each link is better: better compatibility when the page is viewed without graphics (using the ALT text), better accessibility for the disabled, the ability to have rollovers for the links, and simpler updating of the page.
• Rollovers – rollover images can be created for each navigational element on the page which would not be possible if the page was one large image.

Example of sliced page:
Below is a diagram showing how the Photoshop image is sliced up to make the files that make up this web page.

Disadvantages of image slicing
Page slicing can create numerous problems if the designer is not careful:

• Page size – by letting a program create all of your images, it is easy to let the page size grow too large. Be vigilant about the total page size when image slicing!
• Page complexity – image slicing programs can create a large number of cells in the page. If this happens, the browser will take longer to display the page, and the user feels it is taking longer to download. Keep the number of slices to a minimum so the page is not too complex.
• More complex design process – image slicing creates a more complex process, and may add to the time it takes to develop a web site. In particular, it make take longer to make changes to pages developed with slicing.

Recommended Process.

Be methodical.
Creating the numerous image slices for a web page makes the designer’s job potentially very complicated. One has to keep track of the page layout, the precise dimensions of each graphic element, rollover highlights, etc. If any changes are made to the page after it’s initially constructed, these factors become even more acute. As a consequence, the designer must take a very organized and careful approach to developing web page graphics.

Here is one method:

1. Do the initial design and layout in Photoshop. (Note that in the Photoshop file “image_slicing.psd” that each element is on its own layer and all layers are named. You want to be sure to keep your psd file very organized and all elements on separate layers.)
2. Test the design in a web site by exporting a JPEG version of the entire page.
3. Based on the tests, revise the design in Photoshop and create a final comp.
4. Create rollover highlights as separate layers
5. In Photoshop –
   1. Determine how the page will be sliced up to:
      1. compress each section of the image most efficiently (with JPEG or GIF)
      2. make slices for each rollover (will discuss rollovers in a future class)
   2. Create the image slices using the minimum number of rectangles for dividing the page. Try to keep the total number of slices under 15. It is better to have fewer, larger slices than many small slices.
   3. Set the image format for each slice (JPEG, GIF, level of compression, etc.)
   4. Set the transparency for the slice, and set the matte color if applicable.
   5. Export all the slices along with an HTML file if needed. (Photoshop automatically creates a table that arranges the slices properly on the page). Save the image slices in a separate folder for each web page.
6. Create the HTML in Dreamweaver to finalize the page.

Slicing in Photoshop
An image is created and edited in Photoshop.

Open the Photoshop file and:

• Choose VIEW > SHOW RULERS, and create any guides you may need to make your slices consistent.
• Select the slice tool
• Draw a slice by clicking and dragging to create a rectangle for your slice
• Double click on the image to open the slice option palette, In the slice option palette, set the following attributes for the following sections:
  • Name: set the name of the file to be created for this slice (Photoshop creates a default file name, which I suggest you change)
    
• After you have named all of your slices, select FILE > SAVE FOR WEB to individually optimize every image. In the save for web palette, set the appropriate image coding for every slice. Don’t forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for theslice tool) to select different slices.
• An easy way to remember the slicing process is as a 3 step process:
  Step 1- slice
  Step 2- name
  Step 3- optimize

Save Optimized Images
When you are ready to save your sliced images, you can create image files only, or create an HTML file with all of the images inserted in a table in the correct layout. We will cover saving a HTML file later in the semester. When saving, be sure to set the following items:

• Create HTML or not
• The directory for the images
• After you have completed steps 1-3 (slice, name, optimize) for every slice, you can save the files as images only. You do not need to change the name of the file. Save to a folder called “Photoshop.” Photoshop will create an images folder and will place your optimized images there. Note that image slicing often generates many images. In general, it’s recommended that you create separate image directories for each sliced page so you can keep track of the images better.Notice also the following settings:
• Settings : Default Settings
• Slices: All

Use separate image directories for each web page.
Sliced pages often have many images, and the pages are frequently regenerated with different slices. This process can leave many unused “orphaned” images that should be deleted. If several sliced pages have their images saved in the same directory, it is difficult to find the orphaned image slices. On the other hand, if the image slices are saved in a separate directory for each sliced web page, then after significant changes to the slicing, the entire directory can be deleted and a new set of images can be optimized and saved into a clean directory.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in two QuickTime movie files: Part 1 (29 MB). Part 2 (32 MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 4 videos from the YouTube site. I have posted the videos below.

Image Slicing | Part 1

Image Slicing | Part 2

Image Slicing | Part 3

Image Slicing | Part 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

I have also created a demonstration on image slicing your navigation only and saving out the images and the HTML from Photoshop.

Note: I’ve used this photoshop file in the below video demonstration.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file. (39 MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted the videos below.

Slicing Navigation | Part 1

Slicing Navigation | Part 2

Slicing Navigation | Part 3

Additional Resources:

More information about image slicing at Ten Ton Books.
This video is part one — it looks like part 2 is not out yet.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we’re going to cover CSS (Cascading Style Sheets). CSS will allow us to style text in a web page (and will also help us place and style AP divs later in the semester.) I have detailed notes below but have also outlined required reading and videos. I would like you to cover these materials. I have also given you a few additional resources you may want to read if you want more information on the subject.

CSS
CSS – style definitions applied across a document or entire site

Cascading Style Sheets (CSS) are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

Introduction
Cascading Style Sheets (CSS) enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called “coolstyle” which has the following characteristics defined: font, size, bold, text color, background color, and underline.

CSS Features
Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

• Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height.
• Style Sheets can define new styles which can be applied to any text selection.
• The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).

CSS HTML
The definition in the css file for coolstyle is:

.coolstyle {
font-family: “Courier New”, Courier, mono;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FF3300;
border: 1px dotted #000000;
background-color: #FFFF99;
}

One method for applying the style to text is:

<span class=”coolstyle”>text to be be styled</span>

Creating Styles in Dreamweaver
Select TEXT > CSS STYLES > NEW. You will see the dialog box below:

Note: CSS styles may not apply as expected. You should always check your code to see if the CSS tag has been applied properly. You should also preview in both Safari, Firefox, and Explorer to verify that the styleis formatting consistently on both platforms and multiple browsers.

Creating a hover state
Many websites now use links that display no underline, but when the user rolls over the link, the underline shows. This is achieved using the “hover” feature of CSS.

1. Select TEXT>CSS STYLES
2. Select NEW
3. Select USE CSS SELECTOR: Advanced
4. Select name from pull down menu > a:hover
5. Select OK and then select text decoration>underline or whatever changes you want in the hover state.

An interesting alternative to the underline is to set the hover state to have a dotted underline. To do this, don’t use text decoration>underline, instead:

1. Go to the BORDER section
2. Uncheck all the SAME FOR ALL
3. Set the bottom border style to dotted, width 1 pixel, and color to your choice.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (53MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 4 videos from the YouTube site. I have posted the videos below.

Styling Text using CSS | Part 1

Styling Text using CSS | Part 2

Styling Text using CSS | Part 3

Styling Text using CSS | Part 4

Required Resources – Please read and view the following:
Read pages 171-189 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:
Adobe videos:
“Using CSS”
“Styling Text using CSS”

Readings from lynda.com
Cascading Style Sheets
Getting Started
Understanding CSS

Recommended Readings from lynda.com
Selectors and the Cascade
Using CSS to Affect Page Layout

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Two Assignments & Quiz (Must be posted to “Dropbox” on smconline.org site by noon on Tuesday, September 16)

1) Cafe Townsend project

Using your files from the Adobe Tutorial for the Cafe Townsend project, read part 3 of the Adobe Tutorial: Creating your first website. In part 3: Adding content to the page, you will learn how to insert content into your page. (Please note this section has eight pages). Using your files from last week, reproduce the page as detailed in part 3. Also complete the part 4: Formatting your page with CSS exercise. Read part 4 and follow the directions on how to format your page using CSS.

2) Image Slicing exercise

From scratch, slice the Photoshop file contained in the download: image_slicing.zip

Using the enclosed Photoshop file, complete the following:
In Photoshop, slice all images, name, and optimize to save all images to a separate folder.
Keep the following in mind as you slice this image:

• Slice neatly!
  • make a minimum number of slices
  • match up the edges of slices to produce the simplest table
  • don’t leave any spaces between slices
• Set the optimization for each slice
• Save the sliced images

Slice, name and optimize all the images for the example from the Image Slicing video demonstration using the image_slicing.zip file. Build the example web page using tables and the images you created in this exercise.

3) Quiz 3

Also, answer the question in the attached Quiz 3 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, September 16. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

Specials Announcement:
I HAVE EXTENDED THE DEADLINE FOR THE MIDTERM PROJECT TO MIDNIGHT FRIDAY, SEPTEMBER 19.

Midterm Project: Must be posted to the class server (see week 02 notes) by midnight on Friday, September 19.

You have a lot of work to complete this week. This is always true for a 8-week class. Please do not fall behind. And let me know if you have any questions.

copyright © 2006-2008, jamie cavanaugh

Setting up your file structure
When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as midterm.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

Uploading your site using FTP

Using the site window in Dreamweaver
Define a site in Dreamweaver

1. With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
2. Select NEW > SITE
3. Be sure you have the “Advanced” tab selected and not the “Basic.” With LOCAL INFO selected
   • Set SITE NAME to “everythingaboutweb” or “mysite”(or whatever you want)
   • Set LOCAL ROOT FOLDER to where you the main folder where your files are located. Do Not set this folder to the folder where your web files are. If you do, you will be unable to move the entire folder. Always set the Local Root Folder to a folder ABOVE your project folder at least.(For example, select the projec1 folder not your midterm_yourlastname. Your “midterm” folder should contain your midterm_yourlastname folder.
   • Leave HTTP ADDRESS blank
   • Set the CACHE to be checked



4. With REMOTE INFO selected. (It is located in the left hand side navigation)
   • Set SERVER ACCESS to FTP
   • Set FTP HOST to: ftp.everythingaboutweb.com
   • Set HOST DIRECTORY to: (leave blank)
     
   • Set LOGIN to : grdes66online
   • Set PASSWORD to: (I will email you the password)
     Please note the login and password information in the above image is incorrect. Please use the information I have given you in the text above.
     Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: “Use Passive FTP” located under thepassword field.
5. Select OK to complete the creation of a new site.

6. CONNECT to the server using the “plug” icon

Uploading Files
To upload files to the server, click on the folder or file you want to upload, and drag it from the right side to the left side. Or you can select “put” by right clicking to upload the files. For example, you should see your entire midterm_yourlastname folder. Drag this complete folder to the top blue folder.

In most cases, you will upload the complete web site as a directory. Drag this folder to the left hand side, and drop it when you’ve placed it over the top folder .

Dropping the folder on the ” / “folder ensures that you place the folder in the correct place. If you drop a file or folder onto another folder, the file will be placed inside of that folder rather than replacing it.

If you want to move a single file up to the server, then drag this file and drop it onto the correct directory on the server (or you can drop it on top of an old version of the same file).

When you move HTML files in the Site Files window, Dreamweaver will ask if you want to Include Dependent Files? If you say yes, Dreamweaver will look in your HTML files, and copy any images in referenced in those files, even if you don’t select them for the copy. In general, if you are copying a folder of a complete site, there is no reason to copy dependent files, since you are already copying all the files needed for the site (because they are all in the folder). But if you are copying an individual HTML file, then in general it’s good to answer yes to including dependent files, to make sure that any images in that page are properly uploaded.

Once you have uploaded your folder, please view your site at the following web address: http://www.everythingaboutweb.com/grdes66online

Uploading existing files on the server:
If you need to make changes and re-upload you may do so. Please note the following:
When you upload and replace files that are already on the server, there are several issues you should note:

• Be sure you save the new file before you upload it, so your changes get to the server.
• Dreamweaver (and other FTP programs) will not ask you if you want to replace them. It will just write over the old files. Be sure you want to replace the files on the server before you upload the new files.
• After you upload the new versions of the files, you should check to make sure they are on the server. View the web pages on the Internet at their real web address, and don’t rely on the Dreamweaver preview of the local file. If the web page is already open on the browser, use the Reload/Refresh button to view the page.
• Sometimes when you replace a file and view it, you don’t see the changes. This is because the browser has cached the file, and you are looking at an old copy stored on the local computer, not the new one on the server. To fix this, try using the Reload/Refresh button. If this doesn’t work, hold the shift key and press Reload/Refresh to force a newer version. If that doesn’t work, you will have to clear the cache. This is usually in Edit>Preferences>Advanced>Cache. If this doesn’t work, you probably didn’t upload the file correctly, or to the right location.

Rules for the Shared server
Please be courteous to your fellow students by following the guidelines below:

• Be careful not to overwrite a fellow student’s files or the index file for the shared site.
• All student files are considered private and you cannot download other student’s files from the server without permission.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 2 videos from the YouTube site. I have posted both videos below.

File Structure

FTP (File Transfer Protocol)

What if I’ve read through all the instructions above, and viewed the video demonstrations and I still don’t understand how to connect to the server?

Additional Resources:
1) Please read pages 14-28 in our texbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques
2) I also suggest you read the following information from Dreamweaver CS3: Hands on Training by Garrick Chow.
3) Please watch the YouTube: Dreamweaver Tutorial- Define Local Root/Site Folder located in the Media section of this site. This video covers more than you need to know for this class, but can be very helpful.
4) Post any questions you have to the Discussions section of the smconline.org site. I’ve set up a topic called “FTP” for your questions.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dreamweaver introduction
Dreamweaver is an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application (e.g. GoLive or FrontPage).

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop or other applications to create images, sounds, etc.

Creating a new web page in Dreamweaver

• Select FILE>NEW
• Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
• Give the file a name. This name should be all lower case, and have no spaces between words.
• SAVE the file
• There are two windows to use when creating web pages:
  • Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
  • Code Inspector. This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).

Previewing in the browser
Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox). Alternatively, you can simply press the shift + F12 function key.

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

• Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
• Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
• Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
• Page margins. There are settings which control the margin at the top and left of the page. Most designers
  like to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).

The document toolbar
The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

• Design View – where you see how the page will appear in a browser
• Code and Design View – a split page view where you see the code at the top, and the design at the bottom
• Code View – where you see only the code that describes the page

Required Reading:
1) Please read pages 29-47 in our texbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques
2) Dreamweaver CS3 Hands-On Training by Garrick Chow: Exploring the Interface

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web page weight
Recommended page weight: total size (html/images/flash) for a web page should be around 60-100K although we often visit web site like Amazon and Ebay where page size is often much larger.

Some typical download times under ideal conditions, which rarely happen:

Note: s Nielsen/ NetRatings reported (Feb. 2006) that 32% of US home users have dial-up connections, and 68% have broadband.

CNET Bandwidth test

Checking page weight
You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.

Screen size design
Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!

The situation is more complicated than simply screen resolution:

• Explorer and Safari have different amounts of space available for pages
• Macs and PCs have different amounts of space available for pages
• The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
• If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

• Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
• Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
• Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)

Previewing page sizes in Dreamweaver

You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.

If the dimensions you want to view aren’t available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size.

Non web-safe colors
The colors in the Dreamweaver color palette are all web safe colors. But you can get to other color palettes by clicking on the side arrow.

To use non web-safe colors, you can use the eye-dropper to select any color from anywhere on the screen. And you can select the color selector (the color wheel located to the left of the side arrow) and choose one of the millions and millions of non web-safe colors.

Text formatting
Text formatting in Dreamweaver is similar to the formatting available in a word processor. You select the text you wish to modify, and then apply a style to it. For example, to make a word bold, select the word, then click on the “B” button in the Property Inspector. Alternatively, you can select the text, and use the Text pull-down menu (e.g. Text>Style>Bold).

Text characteristics can be set by Dreamweaver, including bold, italic, color, size, font, and justification. In addition, Dreamweaver has a utility to check the spelling of the selected text or the entire document (TEXT>CHECK
SPELLING).

The text inspector behaves much like the toolbars in a word processor. Note that you can do the following:

• Creating a heading with the Format pull-down
• Set the font face
• Set the font size
• Set the font color
• Make some text bold and italic
• Change the justification to left, center, and right
• Make a link to another web page
• Create a list
• Indent some text

That said, we will NOT style our text in this class using the text inspector but rather we will use Cascading Style Sheets (CSS). We will discuss the advantages of using CSS later in the semester.

Line Breaks: Note that when entering text, if you hit ENTER on the keyboard, a blank line will be inserted between paragraphs. This happens because Dreamweaver inserts a <p> tag at the beginning of the previous paragraph, and a </p> at the end. If you don’t want a blank line between paragraphs, the hold the SHIFT KEY down while you hit ENTER. This will insert a <br> at the end of the paragraph.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Working with images
Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To steal an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

gorilla.jpg

gorilla.gif

Once you have an image to work with, these are the steps for putting an image in a web page.

• Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, which
  you can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
• Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
• Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
• Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
• Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the
lower right hand corner of the palette. Experiment with the following:

• Change the height and width of the image
• Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
• Change the alignment so text wraps around the image
• Set the alt attribute of an image
• Make the image a link
• Change the VSpace and Hspace to change the margin around an image when text if flowing around it

Required Reading:
1) Dreamweaver CS3 Hands-On Training by Garrick Chow: Learning the Basics

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mid-term Project
Music industry web site
Project due (9/17/08)

Create a web site for the music industry that has a home page and two sub pages. The focus of this project is visual and navigational design–the primary grading criteria will be for these elements. Secondary grading criteria include page download size, fitting the design on an 1024×768 display (we will talk later about what the dimensions of the site should be to fit a 1024×768 display), quality of content, and use of tables. And of course, the site must work correctly in terms of links and images.

• The home page should have a graphic treatment that strongly represents the specific music industry’s aesthetic and music. Do the best you can to represent the attitude of the company. Pay particular attention to page layout, typography, color, and visual theme.
• The home page should have navigation elements that link to 8 different parts of the web site–you will create only 2 of these content pages. The rest of the web site should be very simple placeholder pages that have just a title and name in text (see the student examples below…. this is an example of a placerholder page). Keep in mind the rules of navigation we will discuss later in the semester. I have assigned 8 links to force you to create more than one group of navigation elements on the page, since 7 links is the maximum you should have grouped together on a page.
• The two sub pages must include content (i.e. photos and text) for two different areas of the recording company site, e.g. Featured Artists and the company’s Web Radio Station.
• The two sub pages must include a navigation system that enables the user to get to the other major areas of the site without going to back to the home page. This navigation system must only provide links to 5 of the 8 sections of the site, plus a link back to the home page.

Choose interesting sub-pages for your project. Make your sub pages something other than the contact and corporate pages.

The home page must include the following links (though you may name them anything you want).

• New Releases – Featured Artists
• Company’s web radio station
• Tour Schedules
• Catalog/purchasing
• Submissions to get signed
• News
• Contact info
• Corporate information

Select any real company of your choice or better yet, make up one of your own. You may get content (e.g. text, photos, logos, etc.) from an existing site, but you must develop an original design for the web site.

Some interesting companies to look a for research :

• www.geffen.com
• www.deutschegrammophon.com
• www.matadorrecords.com
• www.hollywoodandvine.com
• www.rhinorecords.com
• www.vervemusicgroup.com
• www.quango.com
• www.sixdegreesrecords.com

NEW REQUIREMENT FOR MIDTERM: You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images of artists and CD covers found on other music sites. You may use your own original artwork and/or photography if you prefer.

Examples of student work from previous semester:

Example 1
Example 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tables
A grid for controlling page layout

A cell	an image with some text in the cell
cell	cel

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

• Number of rows
• Number of columns
• Width in Percent or Pixels
• The width of the border (the beveled edge on the outer part of the table)
• The cell padding (the text margin, left, right, top, bottom)
• The cell spacing (the width of the cell walls)

Table properties
Table properties are accessible by selecting the whole table.

Table Cell properties
Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixelsIf the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.

Flowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.

Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.

Border size

The setting of the table border in pixels affects the width of the border around the edge of the table.

Cellspacing size

The setting of the table cellspacing affects the width of the border around each cell

Cellpadding size

The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom

Selecting a table

There are three ways to select the whole table.

• click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
• click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
• click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.

Row and Column Span

Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.

Changing the style of text in multiple cells

You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a <font> tag around the whole table–this will not change the style of the text inside the table.

Cell alignment — horizontal and vertical

The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.

The contents of a cell affects its size

Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.

Clear row heights or column widths

When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.

Convert table widths to pixels or percent

If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.

Nesting tables

You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.

	This table is inside another table

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Video Demonstration

I demonstrate how to re-create the tables_example.htm sample page with nested tables. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the file tables_example.htm in Dreamweaver. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (48MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted all three videos below.

Table Structure | Part 1

Table Structure | Part 2

Table Structure | Part 3

One of your assignments for next week will be to recreate this page. See the assignments notes at the end of this page.

More tables
Read pages 65-83 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Required Resources:
Please watch the lynda.com: Learning Dreamweaver MX with: Garo Green located on the lynda.com site. On the page, scroll down to the chaper named Tables > and click on “insert and modify a table.” This video covers inserting and modifying tables in Dreamweaver MX — so it is slightly different in Dreamweaver CS3, but still very helpful.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


Two Assignments & Quiz (Must be posted to “Dropbox” on smconline.org site by noon on Monday, September 8)

1) Page layout assignment

Read part 1 & part 2 of the Adobe Tutorial: Creating your first website.
In part 1, you will learn more about setting up your site and project files. Please download the Sample file in part 1, we will continue to use these files over the next few weeks.
In part 2, you will learn how to create the page layout. (Please note this section has seven pages)

Download the set of files in part 1 and reproduce the page layout as detailed in part 2. After you have completed the layout for this page, I would like you to upload the HTML file (zipped) to the DropBox on the smconline.org site by noon, Monday, September 8.

We will continue to work with these files in the coming weeks
. . . . . . . . . . .

2) Tables assignment

I demonstrated how to re-create the sample page with nested tables in the video demonstration. I would like you to do the following:

Download the set of files web1_tables_example.zip and reproduce the file tables_example.htm in Dreamweaver. Do not copy the HTML from the example but feel free to refer to the code if you get stuck regarding how to build the page. Remember, while viewing this page in a browser window you can “view source” to see the code used to build this page.

Notes:

• Be sure to make the tables in pixels rather than relative so they stay a fixed size even if the browser changes size. The width of the main table should be 750 pixels wide.
• You do not need to include the pink border shown in the example, we will create this later in the semester when we learn more about AP divs.
• You may want to use a 2 column, 2 row table to begin with.
• Remember to merge or split cells if necessary.
• I would recommend you use a nested table for the logo and the navigation on this page.
• Set the cell vertical alignment to LEFT and TOP so the cell content aligns with the left and top of the cell rather than the default center.
• Remember you can change the width of the table cells to control positioning.
• Remember you can use vspace and hspace to control the positioning of images.

All the image files and an text file are included in the web1_tables_example.zip file. Please be sure to set up your folder structure correctly. All the images should be placed in an “images” folder and the text file should be stored in a separate folder named “source files.”

After you have completed the HTML for this page, I would like you to upload the folder with all of your files (zipped) to the DropBox on the smconline.org site by noon, Monday, September 8.

. . . . . . . . . . .

3) Quiz

Also, answer the question in the attached Quiz 2 and upload to the “Dropbox” on smconline.org site by noon on Monday, September 8. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

copyright © 2006-2008, jamie cavanaugh

Welcome to our first class!

Please be sure you have read through the Introduction page located on this site. (FYI: it is the same information as the Introduction section on the class smconline.org site).

Also, make sure you have read through the syllabus for this class. The syllabus is located in the “Syllabus” section in the main navigation of this site.

If you have any questions about the introduction information, the syllabus, or anything else regarding general class questions, please post the question in the discussion section of the smconline.org site. I will answer your questions so all students can benefit from the additional information.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

To start off our class, I’d like to give you information about the process for posting a web site live to a server. If your goal is to design, build, and post web sites for clients (or yourself), you must understand there are two main “services” you have to purchase in order to post a site live.

Here are the two “services” you’d need to purchase in order to post a site live:

1. Domain name registration: registration of domain name you’d use for your site. (i.e – yourname.com)
2. Web Hosting: purchase of server space at a web hosting company.

Domain Name Registration
The first step is to determine a name for your web site. You can check to see if a particular domain name is available using a “Find a Domain” feature on a web site like Network Solutions. The “Find a Domain” feature is on the left-hand side of the Network Solutions home page. Here you can input a potential domain name to check if it is available.

Note: In order to have access to a server you should register your own domain name and purchase a web hosting plan. This is a requirement for the class, I recommend students set up their own web site. I find many students are interested in doing so and, if you are interested in securing clients in the future and designing web sites professionally, you will need your own web site and server space.

I have provided the following information for students who are interested in securing a domain name.

• I recommend domain registration with an ICANN-Accredited Registrar. If you don’t want to sift through the hundreds of companies, you may want to consider Network Solutions or Go Daddy.
• The big difference between Network Solutions and Go Daddy is price and service.
• Registering a domain name with Network Solutions costs $34.95 for one year. (Or free if you sign up for a year of web hosting. A one year basic hosting plan is around $120). Network Solutions has excellent customer service and has been around a long time.
• GoDaddy is more economical. You can register a domain name for $1.99 for one year with the purchase of a 2 month plan (Two months is the minimum purchase length and costs $3.99 a month) GoDaddy’s customer service has been impressive recently. (I’ve been told they send both a follow-up email and call new customers to answer questions.)
• Feel free to register your domain name at a different company than the two given above. I’d recommend you make sure the registrar you’ve chosen is ICANN-Accredited and you know someone who’s had a good experience with the company.

Web Hosting
In additon to securing a domain name, you will need to purchase a web hosting plan so you have your own server space. Both Network Solutions and GoDaddy, (and other web hosting companies), may attempt to sign you up for additional add-on services. Rarely will you need to add additional services to your web hosting plan. All you’ll need is a domain name and a basic hosting package. Beware of the multiple attempts companies make to sell add-on services when you order your domain name and web hosting. If you want to get started slowly without committing to a 12-month hosting plan, the 2 month minimum plan through GoDaddy might be a good choice.

When you purchase your web hosting you’ll see a box to add a domain name to your order. If you specify a one year registration, you’ll be charged $1.99. I recommend you choose the Linux/Unix platform rather than Windows for your web hosting. (Unless you need language support for ASP.NET, then you should probably go with a Windows server).

Remember to stay clear of the multiple attempts companies will make to sell other add-on services when you order your domain name and web hosting.

Here are some other features you should be aware of:
Disk space:
Total amount of usable space that you are allotted on hosting company servers. You will only need 300 – 500 MB…. at GoDaddy you get 5 GB with the Economy Plan. If you plan to incorporate a lot of video in your site, it is good to have at least 1 GB of disk space.

Data Transfer/Bandwidth: This is the total amount of data that you can transfer to or from your web site. Below is an example of how many times a page would need to be viewed in order to reach 10 GB of transfer:

Page size 30 kb: 699,050 views
Page size 40 kb: 524,288 views
Page size 50 kb: 419,430 views
Page size 60 kb: 349,525 views

Therefore, most web hosting plans offer plenty of bandwidth.

When signing up for these services, you’ll be asked to specify a password and be given a login name. Please make note of all login and password information, You might be given a separate login and password for your domain registration and for web hosting. You’ll need this information to login onto your server. Please write everything down and keep any confirmation emails you receive from the companies in a place where you can find them.

Note: You are welcome to use any of my recommendations above. If you have someone you trust who has recommendations, or if you have purchased a web hosting plan already, or can do it by yourself, I encourage you to follow your own direction. It’s always good to do as much research as possible and to ask around. In no way are you required to follow any of my recommendations.

How the Internet Works

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

Servers
The Server is where the web site files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

• Server software runs on the server machine
• The web site files are on a hard disk attached to the server
• The server software formats and delivers each web page element based on HTTP requests
• Elements are delivered to many clients at the same time
• A “hit” indicates that one element (not a page!) was delivered (e.g. an image)
• A web page is composed of many elements, therefore each page accessed generates many hits
• Hits vs. page visits vs. site visit

Clients
The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.
• The web browser runs on the client
• The client requests elements from the server
• It receives and “parses” the elements delivered by the server
• First reads the HTML
• Formats the page, and displays the text
• Gets additional elements (images, audio, etc.) specified in the HTML
• Displays additional elements
• Manages the interactions with the user (e.g. forms, scrolling, image maps, etc.), minimizing the amount of work the server has to do
• Runs client-side software (JavaScript, Java, plug-ins)

Composition of a web page
A web page is composed of the following elements:
• The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
• Elements that come from the same server where the HTML files is, or from a different server
• Image files (.gif, .jpg, .png)
• Audio files (.mp3, .au, .ram, .mov)
• Other multimedia objects (QuickTime movies, Flash, Real, etc.)
• JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

• Can you find the .jpg and .gifs images? Where are they located?
• What about the Flash files… they end in .swf and only one of the directories below contain Flash files. Do you know which one?
• Do you know what a .css file is? A CSS file stands for”Cascading Style Sheet” and we will talk about these later in the semester.

Monterey Pop Web Site
Nike Annual Report Web Site

Additional Resources:
From the “How Stuff Works” web site- How Internet Infrastructure Work

Moving files between the Mac and PC
Files can be transferred easily from the Mac to PC, and from the PC to the Mac for almost all applications. But you must follow the below directions carefully.
1. Always use PC formatted compact discs on both platforms. The Mac can read PC compact discs, but the PC cannot read Mac formatted compact discs. (Same is true for Flash drives).
2. Always use the correct 3 character file suffixes (e.g. .psd for Photoshop, .doc for Word, .htm or .html for Dreamweaver). This is critical. Both PC and Mac won’t know what to do with your files if you don’t use the proper suffixes.

Web file naming conventions
When creating your web site, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work OK in Dreamweaver, on your local computer, once you put the web site on the server, violating these rules can cause you no end of problems.

For the web page file names, be sure you use “index.html” (or “index.htm”) for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files.

Other HTML files should have meaningful names such as products.html or about_us.html, rather than convenient names such as page1.html. Name your files as if you giving the web site to someone else to work on, and who won’t be able to ask you any questions about it (for example, you 6 months after the project is finished when you can’t remember anything about it).

Web file naming rules:
• No spaces in the filenames
• Use all lowercase letters
• No special characters in the filenames: For example none of the following are acceptable in web filenames: “!~:&(,
• The files MUST have the proper suffix (.html, .gif, .jpg)
• Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always “zero-pad” your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile20.jpg.

And again, it’s critical that you name your files correctly from the start. If you attempt to rename your files after you’ve created your site, you will, in all likelihood, break all the links in your web pages.

Sample project file structure:
One of the most important principles of web production is setting up the structure of your files correctly. (I’ll talk about this often since it is so important.) There is definitely a right way to set up your files and multiple wrong ways to do it. If you get in the practice of ALWAYS setting up your file structure correctly at the beginning of all your web projects you will eliminate the headache of fixing everything later. Note the structure below and that the images folder is located in the same folder (named “project_yourlastname”) as the HTML files. Your HTML files should never live inside your images folder. And your images should always be in your images folder– never loose.

Note: that the characters ” [] “represent a folder

[]project_yourlastname

about.html
[]images
index.html
links.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

HTML Review
You should be familiar with all the information below. If you are not, I suggest you take the prerequisite to this class GrDes 65. We will not cover the basics of HTML in this class although it is important for you to understand the basic principles.

Why learn HTML?
Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons:

• Dreamweaver does not always do what you want. To get the page to look right, you often need to hand code some HTML.
• You will become a better web designer. Learning HTML and how a web site is built will give you the advantage of understanding how to design a better site for your client.
• You will get paid more if you know HTML. It is a simple fact. Web design companies want people who can hand code HTML. This is because you will be a more flexible employee if you can do lots of things. In addition, larger web site projects often require that the pages have special HTML codes inserted into the web page, and tools like Dreamweaver won’t be able to do this.
• If you want to use JavaScript, you need to know HTML. The most interesting web pages often use JavaScript to make them interactive. Before you can learn JavaScript, you need to understand HTML and be comfortable coding.

Tags
HTML stands for Hypertext Markup Language, and uses the concept of tags. An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

HEAD & BODY Sections
An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic HTML
A simple example of a web page

<html>
<head><title>HTML Example</title></head>

<body bgcolor=”#FFFFFF”>Some text for a web page that <b>demonstrates</b> the basic form of HTML in a web page.

</body>
</html>

HTML coding style
The format of your HTML code does not affect how the page will be displayed in a browser.

For example, this example of poor HTML style:

<html><head>
<title>a title
</title></head><body>
Example of BadHTML Coding style<ol type=”A”><li>item #1
</li><li>item #2</li>
</ol></body></html>

Displays exactly the same as this example of good HTML style.

<html>
<head><title>a title</title></head>
<body>
Example of Good coding style
<ol type=”A”>
<li>item #1</li>
<li>item #2</li>
</ol>
</body>
</html>

Addition Resources:
From the “How Stuff Works” web site- How Web Pages Work
HTML Cheatsheet on the webmonkey.com site. You may want to bookmark this page and keep it as a reference.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Project file structure

When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as midterm.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.

You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

The folder structure for your project 1 should be similar to the following (the brackets “[]” indicate a folder/directory):

• [] project1
  • [] proj1_yourlastname
    • index.html
    • bio.html
    • [] images
      • headshot.jpg
      • logo.gif
      • flower.gif
    • links.html
  • [] source_files
    • project1.psd

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web Graphic Formats
Okay, now let’s talk about how to prepare images for the web. But before we get started below is some information about downloading files from this site. You will need to download a zip file to complete the exercise at the end of the class notes so please be sure you know how to download a file from this site.

Downloading files
The following is an explanation of how to download files from this site. The download files will typically be in a format called ZIP. The ZIP format allows multiple files to be grouped together into one file for a simpler downloading process. In addition, the ZIP format compresses the size of the files so the download takes less time. This means that you will download one compressed file with a “.zip” file extension. You then decompress the files and put them on your personal disk.

You can decompress these files on Macintosh computers with the Stuffit Expander program. If you have a PC or Macintosh at home or work, you can get the following utilities for working with ZIP files: StuffitExpander for the Mac or PC, or WinZip for the PC.

Downloading files

1. On the web page, click on the file to be downloaded.
2. On most Macintosh systems, the file will be downloaded to the desktop. It may be decompressed automatically, or you may have to double click on it to decompress it, or you may have to open Stuffit Expander to decompress it.
3. On the PC:
   1. When the dialog box comes up, click OK to “Save this file to disk”
   2. Then BROWSE your way to a directory on your Zip disk to SAVE the file
   3. Start WinZip and use FILE>OPEN (or the OPEN icon) and browse to the drive where you saved the file from the web browser.
   4. With the zip file opened in WinZip, select ACTION>EXTRACT (or the EXTRACT icon), browse to a directory on your disk where you want the files placed, and click on the EXTRACT button. Note that you do not have to select the files to be extracted.
   5. This will uncompress, separate all the files, and place them on your disk.

For practice, download and extract the compression_test.zip file here.

Okay, now before we get started let’s first talk a little about web-safe colors versus non web-safe colors.

Web-safe colors
Are they necessary? There is a standard set of 216 colors that are known as the “web safe” colors. In the past, web designers have used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. (i.e. a few of the 216 colors are mixed to create a substitute for the actual color.)

But these days, less than 1% of web users use computers that only display 256 colors–either because they have very old computers that “compresses” the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.

Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web-safe colors anymore. You are free to use of the millions of colors available to you. (But this is my opinion, and others disagree).

To see a chart of all the web safe colors, see this page on the WebMonkey site

For more information about the percentage of users viewing the with with 256 colors, see Browser News

Basic image types

RGB images
RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

• 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
• 24bit = 16,777,216 colors
• 16bit = 65,536 colors

Indexed images
Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

• 8bit = 256 colors
• 6bit = 64 colors
• 4bit = 16 colors
• 2bit = 4 colors
• 1bit = 2 colors

Dithering
Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

Non-dithered image (2382 bytes)	Dithered image (3598 bytes)

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types

GIF format
A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

• Best for - Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
• Transparency – Defines one color to be transparent
• Animations – Format supports multi-frame animations
• Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.

JPEG format
A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

• Best for – Photographic images, complex images, images with soft edges
• No transparency or animation
• Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.

PNG format
A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

• Recommended for certain uses
• PNG supported by: Mozilla for Windows, and Mozilla and Explorer 5.0 for the Mac
• Spring 2003: Explorer 6 for windows does not support PNG alpha channel

More information about the PNG format can be found here.

Making images
Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs
To make a GIF, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Determine the color of the web page background that the image will be displayed against
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
• Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
• Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
  • Perceptual – Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
  • Selective – Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
  • Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  • Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
• Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
• Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
• If you want the image to display while downloading,
  select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

• Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
• If you have created a mask for transparency, and want the background of the web page to show through the mask area, check
  the TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
• Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.

JPEGs
To make a JPEG, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
• Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
• Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
• Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
• If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Please read the information below before completing the class exercise.

Required Reading (required):
Photoshop CS/ImageReady CS for the Web Hands-On Training: Optimization

Additional Resources (suggested):
iTunes: Lynda.com video- Photoshop CS3 Web Essentials
This is a good resource to walk through the beginning steps of saving an image with a transparent background using a matte color.

Exercise:
Working with the fern, graphic text, and temple images in the download, use Photoshop to convert them to web format with FILE>SAVE FOR WEB.

Do the following for each image:

1. Decide on the best format to use for this image: JPEG or GIF
2. Decide on the smallest file size possible without compromising image quality
3. Document the settings you use for your final versions of each image (e.g. number of colors in a GIF, compression setting for JPEG).
4. Note the size of each file you create.

Please be sure you understand how to optimize images for the web and let me know if you have any questions. I have added the topic “Web graphic format” to the Discussion area on the smconline.org site if you have any questions.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment 1 (Must be posted to “Dropbox” on smconline.org site by noon on Tuesday, September 2)

Please create a simple HTML page with images and text. I’d like you to create a biography page that tells me a little about your self. The purpose of this assignment is to demonstrate your basic understanding of building an HTML page. You can use Notepad, TextEdit or Dreamweaver (if you have basic skills in this application.) When you have completed the assignment, please upload the folder as a zipped file to the Dropbox located in the smconline.org site. Please be sure to include your last name in the name of the file when you upload it to the DropBox.

Also, answer the question in the attached Quiz 1 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, September 2. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

copyright © 2006-2008, jamie cavanaugh