Web Page Design

1
Web Page Design

• Dreamweaver Level 2

Philip M Russell
2
Where to find Notes and Web

• All the notes are in pdf format on the Internet
• www.philipmrussell.co.uk/wpd

3
Web Page Design Site
4
PDF Files
5
What is a Web Site?

• Information about something or someone
• Held on a remote access system
• Accessible to all
• Programs
• Images
• Information

6
What is a Web Page?

• Information about something or someone
• Held in a special format HTML
• Allows all machines to read common format

7
Types of Design

• Good
• Clear
• Well Laid out
• Interesting
• Open
• Subdued background

• Bad
• Too small
• Too much text
• Too big diagrams
• Hard to read
• SLOW

8
Web Page Composition

• 4 Main Parts
• HTML
• Graphics
• CGI
• Java

9
What is HTML?

• Hypertext Markup Language
• based on SGML
• Standardized Generalized Markup Language

10
What is HTML?

• Collection of different entities
• Text
• Graphics
• Programs

11
SGML Structure

• 3 Parts
• Character Set - Latin-1 ISO 8859/1
• Document Type and Markup Tags
• Document Instance
• Text to work on

12
HTML Structure

• SGML is all contained in Browsers
• Only need to concentrate on the Document Instance
• Usually 128 characters to play with.
• Commands contain in lt gt
• Eg lttaggt Lower case for level5/6 compatibility

13
HTML Levels

• Level 1 2
• Supported by all Browsers
• Level 3
• Supported by some browsers
• Level 4
• Dynamic HTML
• Level 5
• XHTML lt We shall be learning
• Level 6
• XML

14
What is Hypertext?

• Text that is not linear.
• Interconnected Web of linked Text
• Links to Multimedia
• Interactive Maps (clickable maps)

15
Names

• 1965 Ted Nelson coined term hypertext
• 1989 Tim Berners-Lee, Robert Calliau proposed
  client -server hypertext

16
Web System

• Client
• Browser
• Helper Apps
• Java

• Server
• Web Page Providers
• CGI
• Other services
• ftp
• telnet
• mail
• news
• gopher
• ssh

17
Client

• Browsers 130 of them
• Netscape 7.2
• Internet Explorer IE 6
• Mozilla Firefox 1.0
• Opera 7.54
• Konqueror
• Lynx text only

18
The Browser

• List of HTML Commands supported
• List of addin programs supported
• Translates HTML commands
• Adds other Internet features

19
Web Page Design

• Basic Commands

20
HTML Commands 1

• Basic
• Page Layout
• Page Structure

• Advanced
• Pictures
• Links
• Tables
• Add-ons
• Forms
• Frames
• Animation

21
Commands - lthtmlgt

• lthtmlgt.........lt/htmlgt
• First Last Commands in a Document

22
Commands ltheadgt

• Appears at the top of a document
• Contains the Title
• Can be used to contain info about the file

23
Commands lttitlegt

• lttitlegt........lt/titlegt
• Only used inside ltheadgt
• Short Descriptive

24
Commands ltbodygt

• ltbodygt........lt/bodygt
• Contains whole text of HTML Document
• Sets Page Properties

25
The Template

• lthtmlgt
• ltheadgt
• lttitlegt..lt/titlegt
• lt/headgt
• ltbodygt
• This is where you type the web page
• lt/bodygt
• lt/htmlgt

26
Commands ltbodygt Properties

• Background Colours
• ltbody bgcolorffffffgt
• RGB
• 00 - FF
• Dark - Light

27
RGB Colours

• Red
• Green
• Blue

28
Text and Link Colours

• textffffff
• Text Colour
• linkffffff
• Hypertext Link Colour
• alinkffffff
• Active Link Colour
• vlinkffffff
• Visited Link Colour

29
Commands - Heading

• 6 Levels
• lth1gt.....lt/h1gt Largest
• Main Headings
• lth2gt.....lt/h2gt Medium
• Sub Headings
• lth6gt.....lt/h6gt Smallest
• Smaller than normal text

30
Commands - Paragraph Marker

• ltpgt........lt/pgt
• Text of paragraph between the two markers
• Earlier versions of HTML use just ltpgt at the end
  of a paragraph.

31
Publishing Rules

• Keep it Simple
• Vary the Text Styles
• Include a graphic or two
• Be Consistent
• Give a Reason for someone to revisit your site
• Keep your design Tight

32
More Publishing Rules

• Keep your design Simple
• Allow a return to your Home Page
• Know your Audience
• Identify Yourself

33
The Publishing Scheme

• Get a Plan Stick to it!
• Pick a Template
• Fill in the Blanks
• Add, Subtract and Modify Elements
• Create Graphics
• Create and Link related files

34
The Publishing Scheme 2

• Test Locally
• Install files on the Server
• Test on the web
• Announce to the World

35
Logical Markup Tags 1

• browser decides how effects are shown
• ltemgt emphasis
• ltstronggt
• ltdfngt
• ltcodegt
• ltsampgt
• ltkbdgt

36
Logical Markup Tags 2

• ltcitegt
• ltqgt
• ltauthorgt
• ltpersongt
• ltinsgt
• ltdelgt
• ltabbrevgt
• ltacronymgt

37
Preformatted Text

• ltpregt
• Type in the text
• lt/pregt
• Text is displayed as it is typed

38
More on Paragraphs

• ltp aligncentergt right left justify
• ltp nowrapgt

39
Physical Tags 1

• These are going out because of CSS
• ltigt
• ltbgt
• ltttgt
• ltsgt
• ltugt

40
Physical Tags 2

• HTML 3 extensions
• ltbiggt
• ltsmallgt
• ltsupgt
• ltsubgt

41
Physical Tags 3

• H2O
• Hltsubgt2lt/subgtO
• 9th September 2004
• 9ltsupgtthlt/supgt September 2004

42
Text Breaks

• ltbrgt
• Breaks a line but does not start a new Paragraph
• ltblockquotegt
• Quotation
• lt/blockquotegt

43
Exercise
Create a letter similar to this using as many
effects as you can
Your Address Todays Date Dear Sir Quality
of our water Our water (H2O) tastes horrible.
Please do something about it. Love from Philip
44
Horizontal Rule

• lthrgt
• Inserts full width 3D line across the page

lthr/gt (xhtml tag)
45
Horizontal Rule 1

• lthr size4gt
• Change thickness
• lthr width150gt
• Change Width of line

46
The Size Effect
1600x1200
320x240
600x800
47
Size Effect

• Use Percentages
• ltHR WIDTH 50gt
• Always the same size
• Half the width of the screen

48
Horizontal Rules

• lthr alignleftgt
• lthr align centergt
• lthr align rightgt
• Changes alignment
• lthr noshadegt
• No 3-D Effect

49
Horizontal Rules

• lthr width 30 size 3gt
• Use the commands together

50
URLs

• Name of Site and Web Page
• Divided into 2 parts
• Server Address
• www.philipmrussell.co.uk
• File Location
• /wpd/index.htm

51
Web Naming Scheme

• DNS
• Domain Naming System
• com
• org
• mil
• net
• edu

52
Web Naming Scheme

• .co.uk
• .co.au

• .ac.uk
• .org.uk
• .gov.uk

53
Hypertext Links

• Internal
• ExternalExternal may be anywhere in the world
  on any server

54
Hypertext Links 2 - external

• lta hrefsitegtdescriptive text lt/agt
• lta hrefhttp//www.philipmrussell.co.ukgt
• Philips Home Page lt/agt

55
Hypertext Links 2 - internal

• .. Directory above this one
• Filename Same directory as this
• /dir1/dir2 going down directories
• ../../dir1/dir2 going up and down directories
• Let us keep all our files in the same directory

56
Hypertext Links 3
Page1.htm
Page2.htm
Page3.htm
57
The Design Process

• Analysis
• Design
• Development
• Test
• Implement
• Redo

58
The Designers Job

• User Considerations
• Look at the Best Web Pages
• Look at some Bad Web Pages

59
A Good Web Page

• Plenty of white space
• Light or White Backgrounds
• Small but good graphics
• Changing page
• Clearly laid out
• Links at the top of the page

60
A Good Web Page 2

• Everything fits on a screen
• Pastel Colours
• Correct Colour Hypertext Links
• A fast provider
• Own domain Name
• Breaking the Rules

61
Templates

• Make your own
• Buy your own
• Books
• Editors
• Professional Bureau