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="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

Table layout• The simple choice for layout

http://www.1421.tv/

CSS layout• The expert

CSS power

http://www.csszengarden.com/

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 textexample 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 Order1. Inline Styles2. Embedded Style Sheets3. External Style Sheet4. 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/

Acadia Template• http://webmaster.acadiau.ca