Site Design and Navigation
Assignment: (Do before Class):
Dreamweaver MX, pp. 30-38;
Web Page Design, pp. 40-42, 56-58;
Assignment: (Do after
1. Go to the Digital Design class Website. See
if you can figure out what the site structure for this
website is. How have I laid out the site so that a user
doesn't have to click more than three times to get to any page
on the site?
2.Practice creating a model grid template layout that
you can use to create any future webpage? Here is an example
of such a model grid template layout:
3. You could copy this Modelgridlayout file or
you can create a couple of different
versions of this gridlayout page. I colored
the backgrounds to show you how the modelgridlayout page
would look on the web.
Basic elements of a Digital Design class Website
2. Looking at Webgenre pages for Ideas
- Wild Oats Market
- BMX Online
- Led Zeppelin.com
2. Web Design Tools
3. Creating borders around images and text gifs. See Surfboader
collage with border.
3. Creating Transparent
4. Adding hotspots (links) to images and text gifs.
5. Creating Collages
collage.jpg: Sewall Snow Days
- See surf1.jpg:
- See hotspt.htm
: National Parks and Surfing
5. Using the Gradient tool to create cool color schemes.
6. Creating Webpages with a table
7. Use "Alt tags" on images because people
use the mouse to scroll over "dynamic web pages."
8. How should you layout a Website
Basic Information Structure
Creating Site Diagrams
- Create flowchart diagrams to help you
layout a website.
- Remember your site structure depends on how you want the user to access and use the information and related pages on your site.
- A well-thought out site structure makes
linking webpages within your site easier.
- A general rule is to try to create a
site structure that requires no more than
"3 clicks" to get to anywhere in the site.
- Site structure is important because web-
surfers don't like to have to "click" too
deep into a website to get exactly the
information they need.
- A good site structure is user-friendly.
9. Envisioning Site Structure by Using Flowcharts
Hyperlink Site Structure Diagram
- Use the Dreamweaver Site window to check the layout and links between pages on your site.
- Planning Site Structure makes laying out
the entire website much easer.
- Learning to Understand Site Structure from Model Sites
- UPS Home Page
- Adobe Home Page
- National Gallery of
- NASA Home Page
- C-Net Home Page
10. Creating a Page Template for your website
of Page Template for Digital Design website
Image of the Digital Design Page Template
- You can use Fixed-width or variable-length tables to create the outer limits or your webpage.
- Be careful using variable-width tables because your webpage content will look different in different browsers with different screen resolutions.
- Once you have created your initial table, you can now use layers in Dreamweaver to layout the grid for your webpage.
- Once you have created a basic model for all webpages on your website, save it as a template.
- Now everytime you create a new page for your website, you can do so by going to "File" and selecting "new from template."
- Using templates makes it much faster and
easier to create additional pages for your website.
- See template for cclewis.com
11. Using Fireworks to edit images and create graphics
Tour of Sewall and Boulder
thumbnails of Images
- Creating imagemaps and linking to them
12. Using Fireworks to create basic buttons
- Demonstrate creating buttons and beveling
- Don't overdo beveling and drop shadows
13. Creating text-based navigation bars for text links
- See Digital
Design Home Page
- See cclewis.com
Web Design Portfolio
- In Dreamweaver, go to "Insert" and
select "Special Characters". Notice
the special characters you can insert
into your page
example of a Textbased bar gif.
14. Web Genre websites
100 Photography Sites
Web's top Nature Photographers
Web's top Photography Pages Portal