introduction to web site design. rest of this semester wednesday nov 26th, the last lecture. friday,...
TRANSCRIPT
![Page 1: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/1.jpg)
Introduction to Web Site Design
![Page 2: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/2.jpg)
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.
![Page 3: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/3.jpg)
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.
![Page 4: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/7.jpg)
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?
![Page 8: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/8.jpg)
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?
![Page 9: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/11.jpg)
Organizing Information
Decide what info goes on each pageFriends pageFamily pagePersonal pageHobbies page
![Page 12: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/13.jpg)
Site Map
A site map is designed to show the connections between pages
A graphical site map uses lines to connect linked pages
![Page 14: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/17.jpg)
Tables, tables, tables!
Use tables to lay out your pages! Make the table borders invisible A 2x2 table works well
![Page 18: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/18.jpg)
Areas of a Web Page
Menu
Header
Content
Logo
![Page 19: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/19.jpg)
A 2 x 2 Layout
![Page 20: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/20.jpg)
Table within a table
![Page 21: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/21.jpg)
The outer table
![Page 22: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/22.jpg)
The inner table
![Page 23: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/23.jpg)
Centered with three columns
![Page 24: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/24.jpg)
Really complicated design!
![Page 25: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/25.jpg)
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.
![Page 26: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/26.jpg)
Layout View
View Menu->Table Mode->Layout Mode
![Page 27: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/27.jpg)
Layout table and Layout cell
![Page 28: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/28.jpg)
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.
![Page 29: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/29.jpg)
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.
![Page 30: Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session](https://reader035.vdocuments.site/reader035/viewer/2022062423/5697c01f1a28abf838cd1c5f/html5/thumbnails/30.jpg)
Extra reading
Read Macromedia Dreamweaver MX tutorial chapter 2.