personal design portfolio first, you should select a theme for your web site. this theme can be your...
TRANSCRIPT
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:<H1 STYLE=“color:red”>This is the heading</H1>
• Embedded style sheet<HEAD>
<STYLE TYPE=“Text/css”>
<!--
H1{color:red}
P {font-size:12pt; font-face:Verdana, san-serif;}
-->
</STYLE>
<TITLE>doc title</TITLE>
</HEAD>
• External style sheet<HEAD>
<LINK REL=“STYLESHEET” HREF=“file.css” TYPE=“text/css”>
<TITLE>doc title</TITLE>
</HEAD>
Dreamweaver Style WindowRedefine HTML tag
In file.css:h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-
transform: uppercase; color: #0000FF}
In file.html<h1>This is a Heading First Level </h1>
Class styles
• .class{property:value}
• Example:– .important{color:red}
• Use:– <H1 CLASS=“important”>Important
Heading</H1>
Dreamweaver Style WindowClass: 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:<p class="webdesign" align="center"><font face="Arial, Helvetica,
sans-serif" size="3"><b>Course Information</b></font></p>