presentation source

Download Report

Transcript presentation source 

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 Window
Redefine HTML tag
In file.css:
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; texttransform: 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 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:
<p class="webdesign" align="center"><font face="Arial, Helvetica,
sans-serif" size="3"><b>Course Information</b></font></p>