Advanced Web pages and Cascading Style Sheets CSS

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: 02 BF 25 D 5 -8 C 17 -4 B 23 -BC 80 D 3488 ABDDC 6 B" codebase="http: //www. apple. com/qtactivex/qtplugin. cab" height="30" width="145"> <param name="src" value="radioplaybyplay. mp 3"> <param name="autoplay" value="false"> <embed src="radioplaybyplay. mp 3" type="video/quicktime" pluginspage="http: //www. apple. com/quicktime/download/" autoplay="false" height="30" width="145"> </object>

Evolution of Web Design • Since the beginning of the web designing for it has gone through four distinct trends: Early Web Simple Sharing Used by academics and researchers for sharing information. Information (text) is presented in a structure defined by basic HTML (h 1, h 2, p, li, table, b). Example Present 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. Usability A focus on site objectives and user needs gives the user experience high priority. Designer overindulge in using them. Intelligent interface design using best practices. Example No Frills Publishing User Experience Design for the Web 7

Table layout • The simple choice for layout http: //www. 1421. tv/

CSS layout • The expert

CSS power http: //www. csszengarden. com/

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. Design for the Web 11

Basic CSS Syntax element declaration h 1 { font: 30 px Arial; color: #0000 FF; } CSS property value <h 1>Welcome to my page</h 1> HTML Welcome to my page Page

CSS and HTML tags CSS Allows you to redefine HTML elements like paragraph and header tags p { font: 14 px Verdana; color: #999900; } h 1 { font: 18 px Verdana; color: #CC 3300; } <p> example text </p> <h 1> example text </h 1> example text CSS HTML Page

CSS Classes You can create your own classes that are used in conjunction with HTML tags. coolfonz { font: 26 px Arial; color: #9966 FF; }. uncool { font: 8 px Arial; color: #111111; } <p class=“coolfonz”> example text </p> <p class=“uncool”> example text </p> example text CSS HTML Page

CSS Location CSS File • External Style Sheet • Embedded Style Sheets • Inline Styles Linked HTML File Header Body

Cascading Order 1. 2. 3. 4. Inline Styles Embedded Style Sheets External Style Sheet Browser default CSS File Linked HTML File Header Body

Order of Inheritance • Nested tags inherit styles of their parent tags • Not all properties will inherit • Nested tags value override inherited style p { font: 14 px Verdana; color: #999900; } b { font: 20 px Arial; } <p> example <b> text </b> </p> example text CSS HTML Page

More information and utilities • Tutorials • http: //www. w 3 schools. com/css_intro. asp • http: //www. w 3. org/Style/CSS/ • Utilities • HTML Tidy - http: //tidy. sourceforge. net/ • CSS Validator - http: //jigsaw. w 3. org/css-validator/ • Sites • CSS Zen Garden - http: //www. csszengarden. com/ • Glish - http: //www. glish. com/css/

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