Introduction to Web Site DesignRest of this semesterFinal projectSlide 4Slide 5Slide 6Slide 7Design QuestionsGeneral steps of web site designWho is your audience?Organizing InformationGood Web CommunicationSite MapSlide 14Defining your MyMSU siteWeb Page LayoutTables, tables, tables!Areas of a Web PageA 2 x 2 LayoutTable within a tableThe outer tableThe inner tableCentered with three columnsReally complicated design!Advanced Layout designLayout ViewLayout table and Layout cellSlide 28Autostrechable layout cellsExtra readingIntroduction to Web Site DesignRest 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 implementationIntroduction 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 pagesIntroduction 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 designerIntroduction 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PublishingWho 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 InteractiveOrganizing InformationDecide what info goes on each pageFriends pageFamily pagePersonal pageHobbies pageGood 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 levelsSite MapA site map is designed to show the connections between pagesA graphical site map uses lines to connect linked pagesSite MapInterior orInternalPagesWilloughby's WebsiteSplash Pageindex.htmlPictures Gallerygallery.htmlName Pagename.htmlProgress Pageprogress.htmlCanada Tripcanada.htmlChristmas Treetree.htmlDefining 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 tabWeb 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 wellAreas of a Web PageMenuHeaderContentLogoA 2 x 2 LayoutTable within a tableThe outer tableThe inner tableCentered with three columnsReally 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 ModeLayout table and Layout cellLayout 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