Css Founder.com | Cssfounder Company
Download as PPT, PDF1 like295 views
This document provides guidance on web page and website layout and design. It discusses technical definitions of webpages and websites. It recommends using tables with invisible borders to lay out web pages in a 2x2 structure. Different areas of a webpage like menus, headers, content are identified. Factors like monitor resolution and dimensions are addressed. Tips on consistency, navigation, and testing websites are also provided. Students are assigned tasks to build out a basic website with multiple pages following these design principles.
More Related Content
What's hot (12)
Viewers also liked (13)
Similar to Css Founder.com | Cssfounder Company (20)
More from Css Founder (20)
Recently uploaded (20)
Css Founder.com | Cssfounder Company
- 1. Css Founder.com | Cssfounder Company By: http://cssfounder.com
- 3. 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 Cssfounder.com
- 4. Examples ๏ฎ www.projectpuffin.org ๏ฎ www.pmlodge.com ๏ฎ www.uintafishing.com ๏ฎ www.uncommonadv.com Cssfounder.com
- 5. Web Page Layout ๏ฎ Layout of web pages is very important ๏ฎ Poor layout makes for - ๏ฎ Difficult navigation ๏ฎ Hard to locate information on page ๏ฎ Visually unappealing Cssfounder.com
- 6. Tables, tables, tables! ๏ฎ Use tables to lay out your pages! ๏ฎ Make the table borders invisible ๏ฎ A 2x2 table works well Cssfounder.com
- 7. Areas of a Web Page Menu Header Content Logo Cssfounder.com
- 8. A 2 x 2 Layout Cssfounder.com
- 9. Other Designs ๏ฎ www.adobe.com (menu on right) ๏ฎ www.uintafishing.com (many columns) Cssfounder.com
- 10. Table within a table Cssfounder.com
- 14. Centered with three columns Cssfounder.com
- 16. 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 Cssfounder.com
- 17. Dimensions in a 2x2 table Logo And Menu Header Content 100-140 wide Up to 650 wide Up to 760 wide* Cssfounder.com
- 19. 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 Cssfounder.com
- 20. 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 Cssfounder.com
- 21. Organizing Information ๏ฎ Decide what info goes on each page ๏ฎ Friends page ๏ฎ Family page ๏ฎ Personal page ๏ฎ Hobbies page Cssfounder.com
- 22. 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 Cssfounder.com
- 23. Site Map ๏ฎ A site map is designed to show the connections between pages ๏ฎ A graphical site map uses lines to connect linked pages Cssfounder.com
- 24. 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 Cssfounder.com
- 25. 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 Cssfounder.com
- 26. 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 Cssfounder.com
- 27. 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 Cssfounder.com
- 28. 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 Cssfounder.com
- 29. 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 Cssfounder.com
- 30. 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 Cssfounder.com
- 31. Assignment 7 โ Advanced Webstuff ๏ฎ Add Hyperlinks ๏ฎ Add Graphics (MSU, Scans, etc) Cssfounder.com