Upload
magnus-franklin
View
216
Download
1
Tags:
Embed Size (px)
Citation preview
Information Design
• Arranging all the site elements together to build context and meaning.
Page Elements
• Logo
• Courtesy Links
• Footer links
• Masthead
• Global Navigation
• Search Form
• Rotating image
• Features
• Local Navigation
Wireframe
Visual Design
• The visual presentation of the information design.
Design Elements
• Colour
• Texture
• Contrast
• Image Treatments
• Fonts
• Hierarchy
• Ornamental graphics
• Style
• Buttons
Design Composite
Script
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="30" width="145">
<param name="src" value="radioplaybyplay.mp3">
<param name="autoplay" value="false">
<embed src="radioplaybyplay.mp3" type="video/quicktime"
pluginspage="http://www.apple.com/quicktime/download/" autoplay="false" height="30" width="145">
</object>
Design for the Web 7
Evolution of Web Design
• Since the beginning of the web designing for it has gone through four distinct trends:
Early Web Present
Simple Sharing
Used by academics and researchers for sharing information.
Information (text) is presented in a structure defined by basic HTML (h1, h2, p, li, table, b).
Example
Graphic Design
Graphic support and HTML extensions make advanced layouts possible.
Designers begin to apply traditional design rules to web pages.
Example
Techno-Hype
Many different HTML tags and client side technologies are implemented by IE and Netscape.
Designer overindulge in using them.
Example
Usability
A focus on site objectives and user needs gives the user experience high priority.
Intelligent interface design using best practices.
Example
No Frills Publishing
User Experience
Design for the Web 11
Creating Richer and More Maintainable Sites with CSS
• Makes page editing and updating easier• Reduces messy HTML coding (faster downloads)• Advanced controls for presentation look and layout
• Font size (unlimited)• Float (text wrapping an image)
• Multiple web pages can be updated quickly from one external style sheet
• Increased accessibility by maximizing the number of viewers that can access your site regardless of the platform, browser, computer or user disabilities.
Basic CSS Syntax
element declaration
h1 { font: 30px Arial; color:#0000FF; }
property value
Welcome to my page
<h1>Welcome to my page</h1>
CSS
HTML
Page
CSS and HTML tags CSS Allows you to redefine HTML elements like paragraph and header tags
p { font: 14px Verdana; color:#999900; }
h1 { font: 18px Verdana; color:#CC3300; }
<p> example text </p>
<h1> example text </h1>
example text
example text
CSS
HTML
Page
CSS Classes You can create your own classes that are used in conjunction with HTML tags
.coolfonz { font: 26px Arial; color:#9966FF; }
.uncool { font: 8px Arial; color:#111111;}
<p class=“coolfonz”> example text </p>
<p class=“uncool”> example text </p>
example textexample text
CSS
HTML
Page
CSS Location
• External Style Sheet• Embedded Style Sheets• Inline Styles
Body
Header
Linked
CSS File
HTML File
Cascading Order
1. Inline Styles
2. Embedded Style Sheets
3. External Style Sheet
4. Browser default
CSS File
HTML File
Body
Header
Linked
Order of Inheritance
• Nested tags inherit styles of their parent tags• Not all properties will inherit• Nested tags value override inherited style
p { font: 14px Verdana; color:#999900; }
b { font: 20px Arial; }
<p> example <b> text </b> </p>
example text
CSS
HTML
Page
More information and utilities
• Tutorials• http://www.w3schools.com/css/css_intro.asp• http://www.w3.org/Style/CSS/
• Utilities• HTML Tidy - http://tidy.sourceforge.net/• CSS Validator - http://jigsaw.w3.org/css-validator/
• Sites• CSS Zen Garden - http://www.csszengarden.com/ • Glish - http://www.glish.com/css/