Personal Design Portfolio First, you should select a theme for your web site. This theme can be your own design work, or the designs of another person. Do not select an e-commerce theme. The portfolio should be a professional standard presentation and promotion of your (or other's) work, background and/or interests. Imagine that the client is a potential business partner or employer and that this is your public domain profile. Second, you should collect the different media files, categorise your information with a focus on pages of an economic, efficient size that will load quickly. This involves compressing and optimising media for the Internet. You do not have to implement all media types but a demonstration of a good understanding of complementary and interactive media is central to understanding web information systems. Third, you should create a style for your web site that will make it easy to identify when the person is inside your web site and when s/he has clicked out of it. The style will include a selection of colours, a layout, a navigation scheme, and a set of fonts, font sizes, and colours. Within the style you should design the navigation and interactivity for the site. I recommend frames and style sheets to help manage a consistent style and clear navigation. Finally, you should incrementally develop the web pages for the site, modifying the style along the way. Use the site map feature in Dreamweaver to keep track of your design. Develop a system for organising the many files of your web site into folders.

Cascading Style Sheets A style sheet is a file with style definitions Cascading means that the most specific style definition applies Linking a style sheet can provide a uniform style to an entire web site

Style Rules in HTML Selector{property:value} Examples: –H1 {color:red} –P {font-size:Verdan, sans-serif;}

Adding styles to a document Inline styles: This is the heading Embedded style sheet <!-- H1{color:red} P {font-size:12pt; font-face:Verdana, san-serif;} --> doc title External style sheet doc title

Dreamweaver Style Window Redefine HTML tag In file.css: h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; text- transform: uppercase; color: #0000FF} In file.html This is a Heading First Level

Class styles.class{property:value} Example: –.important{color:red} Use: – Important Heading

Dreamweaver Style Window Class: Custom Style In file.css:.webdesign { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; color: #000000; background-color: #FFFFFF} In file.html: Course Information