- Website layout ( http://www.youtube.com/watch?v=Qx1vimbCDk4&feature=related)
- Beauty of Cascading Style Sheets (CSS)
- Introduce the use & benefits of CSS
- Comparing table & CSS styling
First impressions count
"Web users judge sites in the blink of an eye" reported in Nature.com's articles.
Principles of web design i.e. uniformity, visual hierarchy, structure, flow & consistency are tools of making a great impressions of a website.
Uniformity & consistency - Heading & body text has different font size, this is 1 approach to create visual hierarchy (order of important).
Proportion - Average web page uses only 20-30% ot its available space for actual content. The rest is made up of header graphics, navigational elements, ad banners, negative space & images.
Alignment - Without uniform alignment, sites are much more difficult to read. Example of bad alignment website http://vacaway.com/products_display/
Typography - Never use different fonts from page to page, maximum 3 different fonts, limit the color & sizes used for fonts. Example of website with many different type of fonts. http://www.fabricland.co.uk
Colour - Subtle differences can draw the user's eye to the element without being disruptive to the flow of the page. Use strong, contrasting colour for sharper differences.
Beauty of CSS, separate content & design. Log into this website http://csszengarden.com
What is CSS?
Cascading style sheets (CSS) control the look and feel of a web page. The language & syntax is complex & powerful.
CSS Benefits
- Ease of maintaing large web sites
- Sophisticated layout & design features
- No plugins required
- Minimise download times
Internal stylesheet:
- On single page
- Style has to store in every HTML document
- Insert at the <head>tag of the document
Example of internal stylesheet
http://www.youtube.com/watch?v=-Pnw0DeaSb4
External stylesheet
- CSS separate from HTML
- CSS separate file completely differentiate between (HTML) & design (CSS)
- File that contains only CSS code is saved with a '.css' file extension
- Keep the document label to mystyle.css or mystylesheet.css
- Don't need to type the same CSS code on every web page
Example <link href="mystylesheet.css"/>
Comparing table & CSS style
No comments:
Post a Comment