css founder.com | cssfounder company
TRANSCRIPT
![Page 1: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/1.jpg)
Css Founder.com | Cssfounder Company
By:
http://cssfounder.com
![Page 2: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/2.jpg)
Kurt Cobain1967-1994
Cssfounder.com
![Page 3: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/3.jpg)
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
![Page 4: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/4.jpg)
Examples
www.projectpuffin.org www.pmlodge.com www.uintafishing.com www.uncommonadv.com
Cssfounder.com
![Page 5: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/5.jpg)
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
![Page 6: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/6.jpg)
Tables, tables, tables!
Use tables to lay out your pages! Make the table borders invisible A 2x2 table works well
Cssfounder.com
![Page 7: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/7.jpg)
Areas of a Web Page
Menu
Header
Content
Logo
Cssfounder.com
![Page 8: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/8.jpg)
A 2 x 2 Layout
Cssfounder.com
![Page 9: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/9.jpg)
Other Designs
www.adobe.com (menu on right) www.uintafishing.com (many columns)
Cssfounder.com
![Page 10: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/10.jpg)
Table within a table
Cssfounder.com
![Page 11: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/11.jpg)
The outer table
Cssfounder.com
![Page 12: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/12.jpg)
The inner table
Cssfounder.com
![Page 13: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/13.jpg)
The inner table
Cssfounder.com
![Page 14: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/14.jpg)
Centered with three columns
Cssfounder.com
![Page 15: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/15.jpg)
Really complicated design!
Cssfounder.com
![Page 16: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/16.jpg)
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
![Page 17: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/17.jpg)
Dimensions in a 2x2 table
Logo
And
Menu
Header
Content
100-140wide
Up to 650 wide
Up to 760 wide*
Cssfounder.com
![Page 18: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/18.jpg)
Different Resolutions
http://www.dreamink.com/design6.shtml
Cssfounder.com
![Page 19: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/19.jpg)
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
![Page 20: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/20.jpg)
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
![Page 21: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/21.jpg)
Organizing Information
Decide what info goes on each page Friends page Family page Personal page Hobbies page
Cssfounder.com
![Page 22: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/22.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
Cssfounder.com
![Page 23: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/23.jpg)
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
![Page 24: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/24.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
Cssfounder.com
![Page 25: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/25.jpg)
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
![Page 26: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/26.jpg)
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
![Page 27: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/27.jpg)
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
![Page 28: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/28.jpg)
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
![Page 29: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/29.jpg)
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
![Page 30: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/30.jpg)
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
![Page 31: Css Founder.com | Cssfounder Company](https://reader033.vdocuments.net/reader033/viewer/2022051618/55c30234bb61eb6b7b8b4628/html5/thumbnails/31.jpg)
Assignment 7 – Advanced Webstuff
Add Hyperlinks Add Graphics (MSU, Scans, etc)
Cssfounder.com