Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday,...
-
Upload
tabitha-lloyd -
Category
Documents
-
view
215 -
download
0
Transcript of 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.