Assignment: (Do before Class):
Dreamweaver MX, pp. 104-112;
Web Page Design, pp. 48-54
Site Design Themes, Site Elements
Assignment: (Do after Class)
1. Practice creating Anchors to create links within a web page. Now create links to link text to these anchors
in another part of your web page.
2. Practice adding images to one of your web pages using "relative" links. This trick makes adding images and files to a website much easier.
3. Read and study the diagrams in this website:
Lynch:
Basic Information Structures and
Chunking. Now go to the Model Sites on webpage and study
two or three of them to see if you can figure out how
their site structure is laid out.
4. Go look at the online version of the Yale
Web Style Guide . It is a great resource for basic tips on Web Design.
1. Getting copies of the 3 assigned books
from Barnes and Noble in Boulder.
2. Getting copies of earlier versions of
Macromedia Studio MX for PC and the
Mac.
3. Creating Web Genre websites
3. See Example of working Web Genre
Travel Page
4. Creating Cascading Style Sheets (CSS)
- Example of Style Sheet: basic.css
- Here is a webpage using the "basic.css"
stylesheet.
- Always select link to style sheet, this allows you to use the same style sheet for an entire website
- You must put "stylesheet" files on the web in order for them to work. Such a file is always -- name.css
- You can always go back and edit and changestylesheets, which can change the look of your entire website.
2. Creating Flash Buttons in Dreamweaver
- Using Flash Text and Flash Buttons in
Dreamweaver to add non-default fonts
into your pages.
- See Flash Buttons.
- See Flash Text
- Make sure you have the latest version of
macromedia Flash player on your computer.
- Make sure you copy your flash button files onto your website.
3. See Web Genre Model sites
- Matt Nichols Ski Websites
- Mango Web Design Portfolio
3. See Honoring
Craig Kelly (Creating in Fireworks)
4. Creating Images in Fireworks
- Use DSC02659
- Save files in Fireworks as "png" files
- 'Png" files can be easily revised and edited
- Once you save a file as a "gif" or "jpg"
it is very hard to go back and revise it.
- Never put "png" files on the web
- Try to make sure your images for the web
are no bigger than 60K to 80K in size.
- If you want to use a background image,
try to make sure it is no bigger than 120k
5.. Dreamweaver Lesson
3
- Using template pages to make it easy
to quickly produce pages for a website
- See the Sewall Academic Program page ,
and see the Sewall template page
- See the Digital Design Homepage
and see the Digital Design template
- Targeting a Link to open in a different window (This is an example of using an anchor to link to a different place on the webpage)
- Creating image maps on a webpage. See
Digital Design hotspots example
- Creating and linking to "Named Anchors"
- Using Tables to lay out your webpages. See Chris Lewis Design Portfolio, model 3
2. Relative versus Absolute Paths for links
- See Relative versus Absolute Paths for links
- Targeting a Link to open in a different window (This is an example of using an anchor to link to a different place on the webpage)
- Remember images that don' t use the proper path names won't be displayed in a browser.
- Always make sure your images and links
use the proper path names:
http://www.colorado.edu/AmStudies/lewis/Design/email.htm
(absolute link)
or
email.htm (relative link)
4. Using Anchors: How to create links within a single webpage
- Using anchors to create internal links within a webpage
- Remember when you put the link name in the"link
box"you want to put a "#" before the link name. For example "#top"
- See
Anchors example in Anchors.htm
- How do I use an anchor to go to the top of the page?
- See linking1.htm
for example of using
anchor to go to the top of a page.
- The source code for this trick is, assuming that theanchor
tag name you use is "top."
<a name="top"</a>
- Make sure you put this
anchor right after the code for the <body> tag. For example,
<body>
<a name="top"</a>
5. The Importance of using "Alternative Text" or "Alt tags" to name images and graphics.
6. Planning a website
- Determining what Web genre your site will be in
- Find a couple of model websites in the specific
web genre your website will be developed for.
- Create a Website Specification
- Who is the "target audience" for your website?
- Should your site have its own unique 'Domain Name"?
- See www.cclewis.com
- See Network Solutions.com
8. Web Genre Website
- Web Photo Galleries
9. How should you layout a Website?
- Lynch: Planning Site Structure and
Lynch: 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.
9. Creating a navigation structure for your website
- Basic Navigation principles that every webpage
in a website should answer:
- Where am I?
- Where can I go?
- How do I get there?
- How do I get back to where I started?
- Text-based Navigation
- Text-based Navigation bar
- Linking internally versus linking externally to websites.
- Opening links in new windows.
- Using Graphics-based Navigation.
- Use consistent text-based and graphics-based navigation across webpages in your website.
