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?  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 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 Interior or Internal Pages Willoughby's Website

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