Presentations of Webgenre
Assignment: Students will present Webgenre
websites to class (40 points).
Web Style Guide
Digital Design Student Web Portfolios
Photography template page
5. cclewisart.com: Online Art Gallery
6. GlobeAt.com: Web Hosting
1. Basic Elements of a Basic
2. But what do I put on a Website?
- The larger answer to this questions
always depends on your focus.
- Just like with an essay, a website should
have a focus, that is, be about something.
- Once you have narrowed down your focus,
it is a lot easier to determine what should
go on your website.
- Just like with an essay, you can have
a too-broad focus or too-narrow focus.
You don't want your focus to include
the entire world.
- Good websites demonstrate this
careful attention to focus. They should
always reveal what they are about on
2. Creating a Page Template for your website
- Example of Page Template for Digital
of Page Template for Digital Photo website
- 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
- Now everytime you create a newpage 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 homepage for cclewis.com
3.Make sure you layout your website in terms of:
- Site Home Page
- Main Topic Pages for the Site
- Subsidiary or Secondary Pages
4. Every page in your site should have links to the
Home Page and the Main Topic
Pages. This helps give thePage a clear Information
5. Tips for creating your Web Genre Websites.
- Create and use a Webpage Template?
- Check to make sure your links and images work.
- Check for contrast between your text and your
- Use invisible tables and layers to layout a
to balance the placement of images and text on
- Keep a log of what are the names of your image
files, what fonts you use, what colors you use,
the size of all your images in Height and Width,
and the names of your webpage files.
- Try to limit your pages to no more than one-and-
a-half screens in height.
- Check your spelling and try to reduce the number
of words you use in each line of text to the absolute
- Does your page have a clear focal point, or
have multiple points?
- Does your webpage have a clear information
hierarchy, from most important elements given
the most emphasis and the least important
elements given lesser emphasis?
- Does your webpage look cluttered? Does
thing seem to be balanced and in its place on
6. Creating text-based navigation bars for
- 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
7. Using Dreamweaver to create Image maps
- See example of imagemap on cclewis.com
- When you use imagemaps, make sure you
use "Alt" text to let the reader know where
the link takes you.
Buttons and Images page
8. Using Fireworks to create buttons and images
your Web genre websites.
- Before you really start work on your "web
website, you need to create a new "site" in
Dreamweaver and a new local folder on your
Buttons and Images page
Image page with sun logo
Image page with feathered sun logo
- Fireworks creates "png" files. Do not put
"png" files on the web.
- Use "Export Wizard" or "Export
save your "png" files to either "jpg" or
files for the web.
- Remember, try to compress the file size of
your image files so that they don't take
too long to download on the web.
- Demonstrate cropping and feathering an image.
- Demonstrate creating buttons and adding text.