Wednesday, August 29, 2012

Lesson 6


  • Uses if tables
  • Samples of form
  • Introduction to different types of forms
Tables in Dreamweaver

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form.

Examples of data using tables.


Create table in DW
In DW, go to Insert>Tables, a table panel appear.

Fill in the field, Rows, Columns, Table width, Border thickness, Cell padding, Cell spacing & Header.

Modify table
You can merge cells, delet row, column, insert row, column, split cell
Go to Modify > Table


Table without cell padding & spacing

Table with cell padding

Table with both cell padding & cell spacing

Table with header


Form
Forms allow you to collect information from users via the web. Forms can be used for surveys, information gathering, online quizzes, applications, etc.





Create form in DW
Go to Window > Insert














Saturday, August 25, 2012

Lesson 5

Outlines:


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