1 / 16

Web Page Design and Layout

Web Page Design and Layout. Web Page Design. The Importance of Design. User Interface! Entryway! First impressions! Diverse front-end platforms. Some Basics. Why are we building this site? Who is the target audience? What does the audience want? Some Good References:

dong
Download Presentation

Web Page Design and Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Design and Layout

  2. Web Page Design

  3. The Importance of Design • User Interface! • Entryway! • First impressions! • Diverse front-end platforms.

  4. Some Basics • Why are we building this site? • Who is the target audience? • What does the audience want? • Some Good References: • http://www.intranetjournal.com/articles/200103/intranet.html • http://www.useit.com • http://www.webpagesthatsuck.com

  5. User profiling. Metaphor. Feature exposure. Coherence. State visualization. Shortcuts. Focus. Grammar. Help. Safety. Context. Aesthetics. User testing. Humility. UI Principles Talin, http://www.sylvantech.com/~talin/projects/ui_design.html

  6. Key Implications • Know your user! • Provide familiarity and consistency. • Guide your user (if they need it). • Don’t slow your user down. • Don’t turn your user away!

  7. Some Technical Issues • Bandwidth. • Response time. • Screen real estate. • Multimedia, BHOs, Plug ins, …

  8. Page Layout Options

  9. Links HPU Web Site HPU E-mail IS Department Microsoft IBM HP Sample Page andGeneral Layout This is My Wonderful Web Page Latest News: Sept. 27, 2004. Lately I have been spending most of my time getting ready for class and doing other work stuff. Fall break is coming up soon! Of course, before that I have to make and grade some tests. Yuk! My resume Pictures Fun Stuff Work Stuff

  10. Major Options • Tables. • CSS. • Frames.

  11. Table 2 Table 1 Table 3 Table

  12. colspan rowspan colspan and rowspan

  13. Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 CSS

  14. Div, Float, and Clear • Some Mozilla flavors get confused. • Attempt to float past right side of browser. • Inconsistent. • When using Box model clear float. <div style="width: 30%; float: left; background-color: cyan"> This is the way we row the boat. </div> <div style="width: 70%; float: right; background-color: yellow"> Hickory dickory dock. The mouse ran up the clock. </div> <div style="clear: both" />

  15. Frameset 2 Frameset 1 Frameset 3 Frames

  16. My Recommendation • Start with tables – wide support and easy. • Plan to move to CSS and Box model. • Avoid frames – work and limited support.

More Related