Website Construction

1
Website Construction
Michele Huston Web ManagerTHE AUSTRALIAN WAR
MEMORIAL www.awm.gov.au
2
Introduction

• What is it?
• Demonstrate Dreamweaver
• Language and Notation

3
The Internet The Web

• Are they the same thing?

4
The Internet

• Computer network
• Connects networks together

5
World Wide Web

• Universal Access to Files
• Platform independent
• Apple, Windows, DOS, Mac, Amiga, Unix
• Software independent
• Word Perfect, MS Word, Claris

6
CERN

• European Centre for Particle Physics
• Tim Berners-Lee
• HTML
• Based on SGML
• HTTP

7
Browsers

• Lynx
• 1990s
• NCSA Mosaic
• Netscape
• Internet Explorer
• Opera

8
W3C

• World Wide Web Consortium
• Web Standards Body

9
W3C Standards

• HTTP - Hypertext Transfer Protocol
• HTML - Hypertext Markup Language
• XML - Extensible Markup Language
• XHTML - Extensible Hypertext Markup Language

10
Multimedia

• SMIL - Synchronised Multimedia Integration
  Language
• SVG - Scalable Vector Graphics

11
Web Design

• Non-linear
• People are used to linear
• We read in one direction, one page at a time
• Good Web Design
• gives sense of the familiar
• student.anu.edu.au

12
Web Design

• Clear intent goals
• 9 -11 secs to capture attention
• student consultants
• Jims Homepage
• Personal Homepage
• Intent to create an online CV
• Goal to impress employers

13
Know your audience

• Young - bright colours, upbeat language,
  multimedia
• www.webmonkey.com
• Conservative - blues, white, black,
• www.jbwere.com.au
• Expensive - elegant, black, silver, gold,
• www.jaguar.com

14
Scope the website

• Gather all the content together
• Navigation
• Global
• Local
• Template the look feel
• separate from document structure

15
Writing Viewing HTML

• HTML editor
• Dreamweaver, Golive, HotmetalPro
• HTML converters
• MS Word, RTF to HTML
• Web Browser
• Netscape, IE, Opera, Lynx
• Browser plugins
• Real Audio, Flash, Shockwave, Quicktime

16
HTML Document Structure

• HTML Tags
• Beginning Ending tags
• ltHTMLgt lt/HTMLgt
• Headings ltH1gt lt/H1gt
• Exceptions
• Images ltIMGgt
• Horizontal ruleltHRgt
• Line break ltBRgt
• Barebones Guide to HTML - werbach.combare/barebone
  s

17
Structure of an HTML Document
lthtmlgt ltheadgtlttitlegtlt/titlegt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
18
TITLE Tag

• Between the ltheadgtlt/headgt tags
• lttitlegtMy Home Pagelt/titlegt
• appears in
• Browser menu bar
• Search engine results pages
• link name for favourites or bookmarks
• given priority in search engine indexes

19
Headings

• lth1gtBiggestlt/h1gt
• lth2gtBiggerlt/h2gt
• lth3gtlt/h3gt
• lth4gtlt/h4gt
• lth5gtSmallerlt/h5gt

20
Formatting Tags

• ltpgtparagraphlt/pgt
• ltbrgt line break
• ltpregt preformatted textlt/pregt
• ltblockquotegtlt/blockquotegt
• ltdivgtdivide sectionslt/divgt

21
Formatting Tags

• ltbgtboldlt/bgt
• ltstronggtboldlt/stronggt
• ltigtitaliclt/igt
• ltemgtitaliclt/emgt
• ltugtunderlinelt/ugt

22
Text Alignment

• Attribute align
• center, left, right
• ltdiv alignrightgtTextlt/divgt
• ltp aligncentergtTextlt/pgt

23
Bulleted Lists

• ltulgtltligtlist element 1lt/ligtltligtlist element
  2lt/ligtlt/ulgt
• attribute type discsquarecircle
• ltul typesquaregtlt/ulgt

24
Ordered Lists

• ltolgtltligtlist element 1lt/ligtltligtlist element
  2lt/ligtlt/olgt
• attribute type AIi1
• ltul typeigtlt/ulgt lower case roman

25
ltfontgtlt/fontgt

• attribute size
• 1,2, 7 or
• 1,2, 7
• -1,-2, . -7
• eg ltfont size-1gtsmalllt/fontgt

26
ltfontgtlt/fontgt

• Attribute - color
• note spelling
• hexidecimal eg. FF3366
• name eg. red, green, blue
• ltfont colorCC3399gtmagentalt/fontgt
• Visibone Color lab - www.visibone.com/colorlab/