how to make your own website - Website design
- 1. Webpage Layout and Website Design • Technical definitions: • A webpage is a single HTML document • A website is a collection of related webpages • Designing a good website requires more than just putting together a few pages
- 2. Examples • www.projectpuffin.org • www.pmlodge.com • www.uintafishing.com • www.uncommonadv.com
- 3. Web Page Layout • Layout of web pages is very important • Poor layout makes for - • Difficult navigation • Hard to locate information on page • Visually unappealing
- 4. Tables, tables, tables! • Use tables to lay out your pages! • Make the table borders invisible • A 2x2 table works well
- 5. Areas of a Web Page Menu Header Content Logo
- 6. A 2 x 2 Layout
- 7. Other Designs • www.adobe.com (menu on right) • www.uintafishing.com (many columns)
- 8. Table within a table
- 10. The inner table
- 11. The inner table
- 12. Centered with three columns
- 14. Monitors and Dimensions • Monitor resolution affects how you should lay pages out • 800x600 = 50% - 760 x 420 pixels in browser window • 1024x768 = 35% • 640x480 = 3%* - 595 x 360 pixels • *Was 20% three years ago
- 15. Dimensions in a 2x2 table Logo And Menu Header Content 100-140 wide Up to 650 wide Up to 760 wide*
- 17. Page Width • Because 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
- 18. Splash Page • The index.html file is called the “Splash Page” • It is the key page—the first page visitors usually see • Must be visually attractive, informative, and easy to navigate • Examples: • www.projectpuffin.org • www.pmlodge.com • www.uncommonadv.com • www.rainforestandreef.org
- 19. Organizing Information • Decide what info goes on each page • Friends page • Family page • Personal page • Hobbies page
- 20. 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
- 21. Site Map • A site map is designed to show the connections between pages • A graphical site map uses lines to connect linked pages
- 22. Site Map Interior or Internal Pages Willoughby's Website Splash Page index.html Pictures Gallery gallery.html Name Page name.html Progress Page progress.html Canada Trip canada.html Christmas Tree tree.html
- 23. Design Theme • Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same • Use tables to control placement throughout
- 24. Consistency in Design • Use the same font throughout! • Use consistent graphics in website – do not use ultra modern on one page and calligraphy on another • Use color scheme that is consistent
- 25. The Font Barrier • Only fonts you can reliably use are Times New Roman (Times) and Arial (Helvetica) • Text in site should be one of these choices • How 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 computer • Make cool font images in Photoshop
- 26. Testing • Test 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 there • Make sure it works in Netscape Navigator and Internet Explorer • Make sure all pictures come up on a different machine
- 27. Assignment 8 – Website Design • From your existing web pages, build a website. • Add more pages to site – whatever you want • Some suggestions: Resume, friends page, hobbies page • Minimum 6 pages (splash page + 5) • Use common design theme • Make custom graphics in PhotoShop • Prepare graphical site map in PowerPoint to turn in when finished
- 28. Where to get help on design • Web Pages for more info • http://info.med.yale.edu/caim/manual/contents.html • Good places for Graphics • www.clipart.com • http://free-clip-art.com/ • Fonts • http://www.1001freefonts.com/fontfiles/main.htm
- 29. Assignment 7 – Advanced Webstuff • Add Hyperlinks • Add Graphics (MSU, Scans, etc)