Webpage Layout and Website Design
اسلاید 1: AnnouncementBen Ellis – office hours canceled tonight
اسلاید 2: Kurt Cobain 1967-1994
اسلاید 3: Webpage Layout and Website DesignTechnical definitions: A webpage is a single HTML documentA website is a collection of related webpagesDesigning a good website requires more than just putting together a few pages
اسلاید 4: Exampleswww.projectpuffin.orgwww.pmlodge.comwww.uintafishing.comwww.uncommonadv.com
اسلاید 5: Web Page LayoutLayout of web pages is very importantPoor layout makes for -Difficult navigationHard to locate information on pageVisually unappealing
اسلاید 6: Tables, tables, tables!Use tables to lay out your pages!Make the table borders invisibleA 2x2 table works well
اسلاید 7: Areas of a Web PageMenuHeaderContentLogo
اسلاید 8: A 2 x 2 Layout
اسلاید 9: Other Designswww.adobe.com (menu on right)www.uintafishing.com (many columns)
اسلاید 10: Table within a table
اسلاید 11: The outer table
اسلاید 12: The inner table
اسلاید 13: The inner table
اسلاید 14: Centered with three columns
اسلاید 15: Really complicated design!
اسلاید 16: Monitors and DimensionsMonitor resolution affects how you should lay pages out800x600 = 50% - 760 x 420 pixels in browser window1024x768 = 35%640x480 = 3%* - 595 x 360 pixels*Was 20% three years ago
اسلاید 17: Dimensions in a 2x2 tableLogoAnd MenuHeaderContent100-140wideUp to 650 wideUp to 760 wide*
اسلاید 18: Different Resolutionshttp://www.dreamink.com/design6.shtml
اسلاید 19: Page WidthBecause monitors differ (640x480, 800x600, 1024x768), pages look different.You can use a % width for a table, for example make it 80% of the page width
اسلاید 20: Splash PageThe index.html file is called the “Splash Page”It is the key page—the first page visitors usually seeMust be visually attractive, informative, and easy to navigateExamples:www.projectpuffin.orgwww.pmlodge.comwww.uncommonadv.comwww.rainforestandreef.org
اسلاید 21: Organizing InformationDecide what info goes on each pageFriends pageFamily pagePersonal pageHobbies page
اسلاید 22: Good Web CommunicationBe ConciseLimit choices – use a hierarchical structureA hierarchy is a structured organization where some pages are at a higher level than othersHierarchy results in a site map with multiple levels
اسلاید 23: Site MapA site map is designed to show the connections between pagesA graphical site map uses lines to connect linked pages
اسلاید 24: Site MapInterior orInternalPagesWilloughbys Website
اسلاید 25: Design ThemeChoose a common layout for your website. The Splash Page will probably differ but interior pages should be the sameUse tables to control placement throughout
اسلاید 26: Consistency in DesignUse the same font throughout! Use consistent graphics in website – do not use ultra modern on one page and calligraphy on anotherUse color scheme that is consistent
اسلاید 27: The Font BarrierOnly fonts you can reliably use are Times New Roman (Times) and Arial (Helvetica)Text in site should be one of these choicesHow to overcome this? Any font used in graphics is loaded as a graphic, and does not rely upon the font being on the user’s computerMake cool font images in Photoshop
اسلاید 28: TestingTest your website as you go along. If you’re in the computer lab and there’s an empty computer next to you, log into it and check out your web page from thereMake sure it works in Netscape Navigator and Internet ExplorerMake sure all pictures come up on a different machine
اسلاید 29: Assignment 8 – Website DesignFrom your existing web pages, build a website. Add more pages to site – whatever you wantSome suggestions: Resume, friends page, hobbies pageMinimum 6 pages (splash page + 5)Use common design themeMake custom graphics in PhotoShopPrepare graphical site map in PowerPoint to turn in when finished
اسلاید 30: Where to get help on designWeb Pages for more infohttp://info.med.yale.edu/caim/manual/contents.htmlGood places for Graphicswww.clipart.comhttp://free-clip-art.com/Fontshttp://www.1001freefonts.com/fontfiles/main.htm
اسلاید 31: Assignment 7 – Advanced WebstuffAdd HyperlinksAdd Graphics (MSU, Scans, etc)
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.