Personal Design Portfolio

1
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.

2
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

3
Style Rules in HTML

• Selectorpropertyvalue
• Examples
• H1 colorred
• P font-sizeVerdan, sans-serif

4
Adding styles to a document

• Inline styles
• ltH1 STYLEcolorredgtThis is the headinglt/H1gt
• Embedded style sheet
• ltHEADgt
• ltSTYLE TYPEText/cssgt
• lt!--
• H1colorred
• P font-size12pt font-faceVerdana, san-serif
• --gt
• lt/STYLEgt
• ltTITLEgtdoc titlelt/TITLEgt
• lt/HEADgt
• External style sheet
• ltHEADgt
• ltLINK RELSTYLESHEET HREFfile.css
  TYPEtext/cssgt
• ltTITLEgtdoc titlelt/TITLEgt
• lt/HEADgt

5
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
• lth1gtThis is a Heading First Level lt/h1gt

6
Class styles

• .classpropertyvalue
• Example
• .importantcolorred
• Use
• ltH1 CLASSimportantgtImportant Headinglt/H1gt

7
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
• ltp class"webdesign" align"center"gtltfont
  face"Arial, Helvetica, sans-serif"
  size"3"gtltbgtCourse Informationlt/bgtlt/fontgtlt/pgt