Web Design Basics

1
Web Design Basics

• MIS 108 Spring 2006
• Dr. Silberstein
• Menlo College

2
Planning

• Content Your Choice
• Survey the Field
• Hows the Competition?
• Whats Your Style?
• Navigation
• 3-clicks And Youre Home!
• Design Elements
• Robin Williams

3
HTML Basics

• Core tags
• ltHTMLgtltHEADgtltBODYgtltTABLEgt, etc.
• HTML XHTML
• XHTML is the future
• Compatible with XML
• HTML DHTML
• Dynamic HTML
• Supports Layers

4
HTML Editors

• Mac
• PageSpinner
• BBEdit
• TextEdit SimpleText
• PC
• Homesite (now Dreamweaver)
• SoThink HTML Editor
• CoffeeCup
• Notepad

5
WYSIWYG Editors

• Dreamweaver
• Fireworks
• Flash

6
Planning
7
Content

• Choose a topic you care about
• Decide what the scope of your website will be
• Purpose of this class is to develop a prototype
• Keep it simple

8
Survey the Field

• Look at other websites in your area
• Evaluate the competition
• What makes the site compelling?
• What makes it not worth looking at?
• How does the overall design look?

9
Navigation

• Sites must be easy to navigate
• Keep the navbar links within easy reach
• No one wants to click more than 3 times to get
  there
• Have the same location and type of navbar links
  on each page in your site

10
Design Elements

• Robin Williams
• Non-Designers Design Guides
• Contrast
• Repetition
• Alignment
• Proximity

11
HTML

• HTML
• XHTML
• DHTML

12
HTML Basics

• Know the basic HTML tags

document
Page
13
Core tags

• Know these tags

• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• ltBODYgt
• ltH1gt ltH6gt
• ltpgt
• ltBRgt

• ltTABLEgt
• ltTHgt
• ltTRgt
• ltTDgt
• ltA HREFgt
• ltIMG SRCgt
• ltIMG ALTgt

ltULgt ltOLgt ltLIgt ltHRgt lt! comment - -gt
NOTE XHTML tags must be lower-case!
14
HXTML is the new HTML

• Some HTML tags arent nested or closed
• base, br, dd, dt, hr, img, input, isindex, li,
  link, meta, nextid, option
• XHTML elements must be properly nested and closed

ltbgt ltigt This text is bold and italic lt/igt lt/bgt
ltbr /gt lthr /gt ltimg srcpic1.gif althappy
face /gt
15
A Tricky Nesting

• ltulgt
• ltligtCoffeelt/ligt
• ltligtTea
• ltulgt
• ltligtBlack tealt/ligt
• ltligtGreen tealt/ligt
• lt/ulgt
• lt/ligt
• ltligtMilklt/ligt
• lt/ulgt

• Inside lists must be properly nested

16
HTML XHTML (2)

• XHTML documents must be well-formed
• Tag names must be in lowercase
• Attribute values must be in lowercase
• Attribute values must be in quotes

• All XHTML tags must be within the
• ltHTMLgt
• lt/HTMLgt
• tags
• lttable WIDTH"100"gt

Dreamweaver can have preferences set to be
XHTML-compliant
17
HTML XHTML (3)

• name attribute is deprecated
• Replace with id
• Use both name and id with identical values for
  compatibility with older browsers

• This is wrong
• ltimg src"picture.gif" name"picture1" /gt
• This is correct
• ltimg src"picture.gif" id"picture1" /gt
• use both name and id, with identical attribute
  values, like this
• ltimg src"picture.gif" id"picture1"
  name"picture1" /gt

18
HTML XHTML (4)

• All XHTML documents must have a DOCTYPE line

• lt!DOCTYPE Doctype goes heregt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtTitle goes herelt/titlegt
• lt/headgt
• ltbodygt Body text goes here
• lt/bodygtlt/htmlgt

Use this transitional doctype for documents to
support browsers which dont understand CSS
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt
19
HTML DHTML

• DHTML is Dynamic HTML
• Using layers allows for animation
• Netscape was the first browser to support layers
• All 4.0 browsers now support layers
• Dreamweaver can convert HTML to DHTML