introduction to web site design. rest of this semester wednesday nov 26th, the last lecture. friday,...

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 OptionsAcademic 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 pageWriters create papers to be read from

beginning to endReaders may look for particular information

Table of Contents Index Headings Flip through pages

Introduction to Web Site Design

Navigating the WebNavigation constrained by the Web designerUser 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 siteHow 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? Is this the most appropriate

information for the target audience?

Does the site have a uniform look and feel? 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?

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 Who’s my audience Decide the general style

Organize information Layout design Template design Implementation

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 pageFriends pageFamily pagePersonal pageHobbies 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

Interior orInternal

Pages

Willoughby's Website

Splash Pageindex.html

Pictures Gallerygallery.html

Name Pagename.html

Progress Pageprogress.html

Canada Tripcanada.html

Christmas Treetree.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

Menu

Header

Content

Logo

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 flexibleHard 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.