Web Page Design Seminar
Navigation Bar
Movies Pages
You don't have to use red!!
These pages were created to illustrate various topics discussed in the Advanced Web Page Design seminar. Feel free to borrow any of the ideas or code used here.
Seminar Outline
Tools
- HTML Editors: DreamWeaver, GoLive!, Claris Home Page (discontinued)
- Graphics: Photoshop, FireWorks, Illustrator, Freehand
- Text Editors: BBEdit (Mac), NotePad, any word processor that generates clean text
Design Concepts
- Design with your audience in mind!
- Plan out your site before you start authoring pages.
- Develop a consistent navigation scheme. 3-click rule: any page at your site should not take more than 3 clicks to get to from your home page.
- Tables for layout control - a 3 row x 2 col table provides a nice
framework. (But there are lots of other ways to do it, too! Experiment
and have fun with it.)
- First row for header info
- Second row
- First cell for navigation
- Second cell for content
- Third row for footer info.
- Be judicious with graphics, sounds, etc. Use appropriate compression and/or format (gif, jpg, png, mov, wav, etc.) to reduce the amount of data transfered from server to client.
- Look at other web pages for ideas. If you see something you like, use the View Source command to see how they did it.
- Just because UofU colors are crimson and white doesn't mean you must use them on your pages!!
Site Structure - Getting organized
- Narrow and deep
- Broad and shallow
- Develop a consistent naming convention for your files and directories
- Consider using a directory for images and other resources that might be shared between pages
Style Sheets - Consistent look from page to page
- Embedded
- Linked
Forms
Scripting
- Client side - JavaScript
- Server side - cgi
Your info goes here