Website Design - Michigan State University

Website Design - Michigan State University

Announcement Ben Ellis office hours canceled tonight Kurt Cobain 1967-1994 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

Examples www.projectpuffin.org www.pmlodge.com www.uintafishing.com www.uncommonadv.com Web Page Layout Layout of web pages is very important

Poor layout makes for Difficult navigation Hard to locate information on page Visually unappealing Tables, tables, tables! Use tables to lay out your pages! Make the table borders invisible

A 2x2 table works well Areas of a Web Page Logo Header Menu

Content A 2 x 2 Layout Other Designs www.adobe.com (menu on right) www.uintafishing.com (many columns) Table within a table

The outer table The inner table The inner table Centered with three columns Really complicated design!

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 Dimensions in a 2x2 table Up to 760 wide* 100-140 wide Up to 650 wide

Header Logo And Content Menu Different Resolutions

http://www.dreamink.com/design6.shtml 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 Splash Page

The index.html file is called the Splash Page It is the key pagethe 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

Organizing Information Decide what info goes on each page Friends page Family page Personal page Hobbies page

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

Site Map A site map is designed to show the connections between pages A graphical site map uses lines to connect linked pages Site Map

Willoughby's Website Splash Page index.html Pictures Gallery gallery.html Interior or Internal Pages Canada Trip

canada.html Name Page name.html Christmas Tree tree.html Progress Page progress.html

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 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 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 users computer Make cool font images in Photoshop

Testing Test your website as you go along. If youre in the computer lab and theres 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 Assignment 8 Website Design From your existing web pages, build a website.

Add more pages to site whatever you want Use common design theme

Some suggestions: Resume, friends page, hobbies page Minimum 6 pages (splash page + 5) Make custom graphics in PhotoShop Prepare graphical site map in PowerPoint to turn in when finished

Where to get help on design Web http://info.med.yale.edu/caim/manual/contents.html Good places for Graphics

Pages for more info www.clipart.com http://free-clip-art.com/ Fonts

http://www.1001freefonts.com/fontfiles/main.htm Assignment 7 Advanced Webstuff Add Hyperlinks Add Graphics (MSU, Scans, etc)

Recently Viewed Presentations

  • The Political Spectrum - Tri-Valley Local School District

    The Political Spectrum - Tri-Valley Local School District

    reject violent revolution as a way of changing the way things are Dr. Rev. Martin Luther King What is a Radical? far left on the political spectrum call for wide-sweeping rapid change in the basic structure of the political, social,...
  • INDIAN ECONOMY AND TRENDS JANUARY 2015 For updated

    INDIAN ECONOMY AND TRENDS JANUARY 2015 For updated

    The Technology Incubation and Development of Entrepreneurs (TIDE) scheme was launched and revised, and extended to 2017 to assist institutions of higher learning to strengthen their technology incubation centres and enable young entrepreneurs to initiate technology start-up companies for commercial...
  • 1 Welcome to House of Israels Shabbat Service

    1 Welcome to House of Israels Shabbat Service

    I tell you the truth, whoever hears my word and believes him who sent me has eternal life and will not be condemned; he has crossed over from death to life. I tell you the truth, a time is coming...
  • Hemolytic anemias - كلية الطب

    Hemolytic anemias - كلية الطب

    Glucose-6-Phosphate Dehydrogenase Deficiency. Normally: reduced glutathione (GSH) inactivates endogenous and exogenous oxidants. The abnormality here affects the enzyme responsible for the synthesis of GSH…G6PD (on X chromosome)
  • Kingdom of Animalia Phylum of animal kingdom: 1-

    Kingdom of Animalia Phylum of animal kingdom: 1-

    1- Phylum: Porifera شعبة الاسفنجيات ... Hydrozoa طائفة الهيدريات Examples: Hydra الهيدرا, Obelia الأوبليا 2- Phylum: Coelenterata This basic body has two Parts: the sessile polypالقرص الجالس and the floating medusaالميدوزا ...
  • FFPI at WFO Binghamton - Cornell University

    FFPI at WFO Binghamton - Cornell University

    Much of our region consists of rural mixed forest and grassland coverage. Urban areas tend to be found along the river valleys. Much of the area, with the exception of our few urban areas and also swamp locations does not...
  • Beneficial Reuse of Contaminated Soil and Solid Waste

    Beneficial Reuse of Contaminated Soil and Solid Waste

    Problem Statement. Disposal of soils in a landfill is expensive and, as a matter of public policy, considered a poor use of landfill space. Marginally contaminated soils generated at construction sites may quality for a better reuse, other than disposal.
  • Physical Properties of the Snowpack Richard Brandt  University

    Physical Properties of the Snowpack Richard Brandt University

    Plate (new snow) Column (new snow) Dendrite (new snow) Images from: The Snowflake: Winter's Secret Beauty -- by Kenneth Libbrecht and Patricia Rasmussen Old (metamorphosed) snow crystal type depends on temperature and temperature gradients in the snowpack.