Advanced Web pages and Cascading Style Sheets (CSS)

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

Create a visual focus Make one element (picture) your focus and pull colors from it

Media Elements Use embed or object tags to add video and sound to your page

Script <object classid="clsid:02BF25D5-8C17-4B23-BC80- D3488ABDDC6B" codebase=" height="30" width="145"> <embed src="radioplaybyplay.mp3" type="video/quicktime" pluginspage=" autoplay="false" height="30" width="145">

Design for the Web7 Evolution of Web Design Since the beginning of the web designing for it has gone through four distinct trends: Early WebPresent 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

Table layout The simple choice for layout

CSS layout The expert

CSS power

Design for the Web11 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; } propertyvalue Welcome to my page 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; } 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;} example 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; } example text CSS HTML Page

More information and utilities Tutorials Utilities HTML Tidy - CSS Validator - Sites CSS Zen Garden - Glish -

Acadia Template