Download WebsiteIntro

Introduction to Web
Site Design
Rest of this semester
Wednesday Nov 26th, the last lecture.
 Friday, Nov 28th, Thanksgiving.
 Monday Dec 1st, review session.
 Wednesday Dec 3rd, the last quiz.
 Friday Dec 5th 9:10AM-12:30PM, Open
Lab for the final project.
 Monday Dec 8th, Final project due.

Final project

Three Options
 Academic
website. (Not your personal site)
 Commercial website.
 Visual Basic Program.
Due Dec 8th at 5:00PM.
 Outline due Dec 2nd at 9:00PM.

Introduction to Web Site Design



A Web site is a collection of Web pages devoted to a
single topic.
Designing a good website requires more than just putting
together a few pages
We will spend all of today preparing to design the layout
for Web site



Design is 80% of the real work!
Implementation is time-consuming but routine
Correction mistakes you make during design will “cost” you
much more effort if you have to fix them during implementation
Introduction to Web Site Design

Navigating the printed page
 Writers
create papers to be read from
beginning to end
 Readers may look for particular information
Table of Contents
 Index
 Headings
 Flip through pages

Introduction to Web Site Design

Navigating the Web
 Navigation
constrained by the Web designer
 User has less control than readers of printed
pages

Must select from options provided by Web
designer
Introduction to Web Site Design

Good Web site design
 Think
about the structure of the site
 How are the pages organized?
 How does the reader navigate from one page
to another?
 What options does the reader have for
locating information of interest?
Design Questions


Who is the target audience
(or audiences)?
What information is most
prominent on the site's home
page?


What design elements
constitute the uniform look?
 Is there a smooth transition
between pages in the site?
 Does the site look the same
in Netscape 6.2 and Internet
Explorer 6.0?
What different logical
document divisions are
present on the pages of the
site?

Which are used for
navigation?
 Which are used to display
content specific to the
page?
Is this the most appropriate
information for the target
audience?
Does the site have a uniform
look and feel?



How much of the site's
content is dynamically
generated and likely to
change on a regular basis?
General steps of web site design

Survey






Organize information
Layout design
Template design
Implementation



Who’s my audience
Decide the general style
Generating content page from template.
Testing the web site
Publishing
Who is your audience?
When designing a site, consider the
audience:
 College Students – Cool and Flashy
 Business World – Clean and professional
 Academic World – Straightforward and
Factual
 Kids – Bright and Interactive

Organizing Information

Decide what info goes on each page
 Friends
page
 Family page
 Personal page
 Hobbies page
Good Web Communication
Be Concise
 Limit choices – use a hierarchical structure

 A hierarchy
is a structured organization where
some pages are at a higher level than others
 Hierarchy results in a site map with multiple
levels
Site Map
A site map is designed to show the
connections between pages
 A graphical site map uses lines to connect
linked pages

Site Map
Willoughby's Website
Splash Page
index.html
Pictures Gallery
gallery.html
Interior or
Internal
Pages
Canada Trip
canada.html
Name Page
name.html
Christmas Tree
tree.html
Progress Page
progress.html
Defining your MyMSU site




Dreamweaver is not just a HTML editor.
It provides full management of your website.
Create a folder for your MyMSU site
In Dreamweaver create a New Site
 Setup
the Local Folder
 Name the site MyMSU website
 Set the other values in the local folder tab
Web Page Layout
Layout of web pages is very important
 Poor layout makes for 
 Difficult
navigation.
 Hard to locate information on page.
 Hard to remember the current position.
 Visually unappealing.
Tables, tables, tables!
Use tables to lay out your pages!
 Make the table borders invisible
 A 2x2 table works well

Areas of a Web Page
Logo
Header
Menu
Content
A 2 x 2 Layout
Table within a table
The outer table
The inner table
Centered with three columns
Really complicated design!
Advanced Layout design

Problems of HTML table layout.
 Not
flexible
 Hard to adjust when done.
Dreamweaver gives you several different
way to lay out web pages.
 The most powerful tool to design layout is
“Layout view” in dreamweaver.

Layout View

View Menu->Table Mode->Layout Mode
Layout table and Layout cell
Layout table and Layout cell
Layout table is the outer border of the
table
 Layout cell defines the inner cells.
 Dreamweaver automatically translate the
layout table and cell to standard tables.

Autostrechable layout cells




Autostrechable layout cells automatically fit the
width of the browser.
It is idea for layout design that targets different
screen resolutions.
It is good for pure text layout cells, but bad for
image layout cells.
Use fixed layout cell if you want exact
appearance.
Extra reading

Read Macromedia Dreamweaver MX
tutorial chapter 2.