Module II:

1

• Module II
• Design Principles I
• Naylin Oo
• Information, Communication and Space Technology
  Division
• UNESCAP

2
Module II Design Principles

• Section 3 Best practices, drawing board, layout,
  and concepts of color, font, theme...
• Section 4 HTML, links, images
• Section 5 Tables, FrontPage basics
• Section 6 Practical exercise

3
Module II Design Principles I

• Session 3
• Drawing Board
• Naylin Oo
• Information, Communication and Space Technology
  Division
• UNESCAP

4
Drawing board

• Structure
• Style
• Layout
• Font
• Color
• Theme
• Content
• Functionality

5
Stylistic Considerations

• Be frugal
• Stick to the point
• Cultivate a voice
• Think globally

6
Visual Structure
Source Web Style Guide, www.webstyleguide.com
7
Visual Structure
Source Web Style Guide, www.webstyleguide.com
8
Page size (length)

• Web pages should not be longer than 2 to 6
  screens. This limit is recommended for 2
  reasons
• To economize on download time and be user
  friendly to those using slow connections
• To facilitate quick and efficient response to
  Search programs

9
Page Layout
Source Web Style Guide, www.webstyleguide.com
10
Page headers and footers

• Headers Site identity
• User may enter the site on ANY page
• Unique visual identity
• Include basic navigation links
• Footer Provenance
• Origin of the page
• Age of the page
• Basic link (Top page, home)
• Legal notice

11
Sample Page Layout
Source Web Style Guide, www.webstyleguide.com
12
Module II Design Principles I

• Session 4
• Introduction to HTML
• Front Page Basics

13
What is HTML?

• Telling the browser what to do, and what props to
  use.
• A series of tags that are integrated into a text
  document.

14
HTML Tags

• Tags are - surrounded with angle brackets
• ltBgt or ltIgt
• Most tags come in pairs
• exceptions ltPgt, ltbrgt, ltligt tags
• The first tag turns the action on, and the second
  turns it off

15
HTML Tags (cont.)

• The second tag (off switch) starts with a
  forward slash.
• For example ,ltBgt text lt/Bgt
• Can embedded, for instance, to do this
• ltHEADgtltTITLEgtYour textlt/HEADgtlt/TITLEgt it won't
  work.
• The correct order is-
• ltHEADgtltTITLEgtYour textlt/TITLEgtlt/HEADgt

16
HTML Tags (cont.)

• Not case sensitivity
• Many tags have attributes.
• For example, ltP ALIGNCENTERgt centers the
  paragraph following it
• Some browsers don't support the some tags and
  some attributes.

17
Basic HTML Document Format
ltHTMLgt ltHEADgt ltTITLEgtWENT'99lt/TITLEgt lt/HEADgt ltBO
DYgt Went'99 lt/BODYgt lt/HTMLgt
See what it looks like

• HTML documents begin and end with lthtmlgt and
  lt/htmlgt tags
• Comments appear between lt!-- and --gt
• HEAD section enclosed between ltheadgt and lt/headgt
• BODY section enclosed between ltbodygt and lt/bodygt

18
Creating HTML Documents

• Many high-level tools (Annex I) exist for
  creating Web pages
• Microsoft FrontPage
• Netscape Composer
• Adobe PageMill
• Macromedia DreamWeaver, HotDog,
• Also, many applications have "save to HTML"
  options (e.g., Word)

19
Images

• Adding Images
• Use ltIMG SRCimagefilenamegt tags
• By default, browsers can display GIF, PNG, and
  JPEG files
• Other image formats may require plug-in
  applications for display

20
Images (cont.)

• Attributes of IMG tag
• ltImg srcmy.gif width50 height50 alignright
  altMy imagegt
• width, height
• align
• alt

21
Images (cont.)
ExampleltIMG ALTUNESCAP SRC/images/UNESCAP.gifgt
Display as
with the image Display as UNESCAP
without the image
22
HTML Links

• ltagt to create a link to another document.
• The target attribute
• lta href, target_blankgtxxxlt/agt
• opens the document in a new browser window.
• The name attribute
• lta nameabcgt
• lta hrefabcgtUseful textlt/agt

23
Hypertext Links

• Links can contain images and other text-level
  elements (i.e., ltA HREFgt ... lt/Agt)
• Link to Absolute URL
• Use a complete URL beginning with http//
• ltA HREF"http//host/path/chapter2.html"gtChapter
  2lt/Agt
• Link to Relative URL
• Use a filename or relative path to filename
• Interpreted location of current file
• ltA HREF"chapter2.html"gtChapter 2lt/Agt.

24
Hypertext Links

• Link to Section
• Use a section name (see below) preceded by
• ltA HREF"Section2"gtSection 2lt/Agt
• Link to Section in URL
• Use absolute or relative URL, then , then
  section name
• ltA HREF"chapter1.htmlSection2"gtSec. 2 of Chap.
  1lt/Agt
• Naming a Section
• Use ltA NAME"..."gt and do not include the pound
  sign
• ltH2gtltA NAME"Section2"gtImageslt/Agtlt/H2gt

25
How to change color in HTML?

• Color names
• ltFont colorwhitegt
• Color names can also be defined by Hexadecimal
  number
• Changing the Background color
• ltBODY BGCOLOR19378agt
• Changing Text color
• ltBODY BGCOLOR19378a TEXTffffff
  LINKffff66 VLINK66ffffgt
• Spot color
• ltFONT COLOR66ffccgtWENT'99lt/FONTgt

26
Module II Design Principles I

• Session 5
• Tables

27
Tables
Tables are common tools for arranging complex
layout on a Web page
Rows
Column
Cell
Borders
28
Tables
Cell Padding
Cell Spacing
29
Tables
Cellpadding
Gutter
Cellspacing
Source Web Style Guide, www.webstyleguide.com
30
Layout in a Table
lthtmlgt lt!- COMP519 page12.html 1.09.05
--gt ltheadgt lttitlegtTable Layoutlt/titlegt lt/headgt
ltbodygt lttable border1gt lttr
align"center"gt lttdgtLeftltbrgtColumnlt/tdgt
lttd valign"top"gtRight Columnlt/tdgt lt/trgt
lttrgt lttdgtSome datalt/tdgt lttdgtSome
datalt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt

• Can have a border on tables using the BORDER
  attribute lttable border1gt
• Increasing the number makes the border thicker
  lttable border2gt
• Can control the horizontal and vertical layout
  within cells
• lttd align"center"gtlttd align"right"gt
• lttd valign"top"gtlttd valign"bottom"gt
• Can apply layout to an entire row
• lttr align"center"gt
• lttr valign"top"gt

31
Table Width

• By default, the table is sized to fit the data
• Can override and specify the width of a table
  relative to the page
• lttable width"60"gt

lthtmlgt lt!- COMP519 page13.html 1.09.05
--gt ltheadgt lttitlegtTable Widthlt/titlegt lt/headgt lt
bodygt lttable width"100 gt lttrgt
lttdgtleft-most lttd align"right"gtright-mostlt
/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
32
Other Table Attributes

• Can control the space between cells margins
  within cells
• lttable border1 cellspacing4 cellpadding8gt
• Can add headings ltthgt is similar to lttdgt but
  displays heading centered in bold
• ltthgtHEAD1lt/thgt ltthgtHEAD2lt/thgt
• Can have data that spans more than one column
• lttd rowspan2 align"center"gtfourlt/tdgt
• Similarly, can span more than one row
• lttd colspan2 align"center"gt five lt/tdgt

33
Tables
Source Web Style Guide, www.webstyleguide.com
34
Flexible Tables
See the different
Source Web Style Guide, www.webstyleguide.com
35
Module II Design Principles I

• FrontPage Basics

36
FrontPage Basics
37
FrontPage Basics
Switch to different view mode
Preview webpage in browser
38
Create a Web Page from scratch

• Click on File in the file menu and select
  New. New task pane will appear on the right
  hand side of FrontPage.
• Click on One page web site under New web site
  section.
• In the pop up box, double click on One page
  site.

39
Toolbars
These toolbars are mostly used in FrontPage for
creating and designing web pages.
40
Example Insert Hyerlink

• Select either some text or a picture
• Click on Insert on the file menu
• Select Hyperlink
• In the pop-up box, type in the URL in the Address
  box. Then, put the name of this URL in Text to
  display box.

41
Example Insert Pictures

• Click on Insert on the file menu.
• Point the mouse to Picture.
• Select From File.
• In the pop-up box, locate the picture on the
  computer that you could like to upload.

42
Example Formatting Text

• Highlight the text
• Go to the style boxes
• Select the desire style