1. Advanced Web pages and Cascading Style Sheets (CSS)

2. 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

3. Visual Design The visual presentation of the information design.
Design Elements
Colour
Texture
Contrast
Image Treatments
Fonts
Hierarchy
Ornamental graphics
Style
Buttons
Design Composite

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

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

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

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

8. Table layout
The simple choice for layout

9. CSS layout
The expert

10. CSS power

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

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

13. 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
CSS
HTML
Page

14. CSS Classes example text
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 text
CSS
HTML
Page

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

16. Cascading Order Inline Styles Embedded Style Sheets
CSS File
Inline Styles
Embedded Style Sheets
External Style Sheet
Browser default
Linked
HTML File
Header
Body

17. 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

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

19. Acadia Template