Basic Web Design UVI CELL

1
Basic Web DesignUVI CELL

• Dave Gilliss
• gilliss_at_gmail.com

2
Your Web Site

• What is the goal of your site?
• Inform
• Sell
• Display
• Who is your audience?
• Why are they coming to your site?

3
Brainstorming

• Think of all the items that will help your site
  meet your objectives
• Photos of items or people
• Staff bios
• Hours of operation
• Physical and mailing address
• Phone numbers
• Links to other sites
• etc.

4
Brainstorming (continued)

• Try not to think in terms of Pages at this
  point
• Be as specific as you can
• There are NO wrong answers or items in
  brainstorming

5
Information Architecture (IA)

• Organize data into logical and intuitive groups
• Write down all the elements and ideas from the
  brainstorming session on index cards or post-it
  notes
• Move the cards around until groups are finalized
• Name groups as specifically as you can
• Begin gathering the actual content for each
  element on the cards (this can take a long time
  if others are responsible for content so its
  best to ask for it before you actually need it!)

6
Best Practicesor things that Ive learned the
hard way

• The homepage should always be named
• default.html or
• index.html
• Always test to make sure these work as some web
  servers use a different name for the default
  document
• Never use spaces in a file or folder name
• Use contact_page.html or ContactPage.html
• NOT contact page.html

7
Best Practicesor things that Ive learned the
hard way (continued)

• Create directories with descriptive names that
  are easy to understand
• Such as bios or StaffBios
• The default page for each directory should be
  named either
• default.html or
• index.html
• This makes it easy to give out links that bypass
  the homepage
• www.mycompany.com/bios
• www.mycompany.com/products

8
Best Practicesor things that Ive learned the
hard way (continued)

• Store images and photos in an images directory
• Can mirror your main directory structure in a
  central location
• /images/staff/
• Or you can store them in the sub directory of
  each of your main directories
• /staff/images/

9
Basic HTML

• Hyper-Text Markup Language

10
Writing HTML

• You can use any word processor or text editing
  program on a PC or Mac
• Notepad
• MS Word
• Word Pad

11
Saving a HTML File in Word

• Using MS Word
• Select Save as from the file menu
• Save document as Text
• Extension should always be .html

12
Saving a HTML File in a Text Editor - Notepad

• Text is already in correct format
• No margin, borders, or text styles are saved in a
  plain text editor
• No need to select Save as each time
• Save file with .html extension

13
HTML Text Tags

• Tags are items that tell a web browser how to
  display information on the web page
• Most tags have 2 parts
• On ltBgt
• Off lt/Bgt
• The first tag (on) tells the browser to do
  something
• The second tag (off) tells the browser to stop
• The ltBgtwill make the text boldlt/Bgt but only
  inside the two tags

14
Common HTML Tags

• Text tags
• ltBgtBoldlt/Bgt
• ltIgtItalicslt/Igt
• Layout tags
• ltPgtParagraph break
• Leaves a space between lines of text
• ltBRgtLine break
• Any text following this tag will be on the line
  directly below it
• ltHRgtHorizontal rule
• Places a thin rule across the page

15
Basic HTML Page Tags

• All pages should have the ltHTMLgt tag first and
  last on a page
• The ltTitlegt of the page goes next
• The title is the text which will appear in the
  bar at the very top of the web page
• A good title is very important, so be sure to
  make it accurate and meaningful (much more on
  this later)

16
My First HTML Page
17
My First HTML Pagewith all tags
18
My First HTML PageResults
19
Resources and Readings forWeek 2

• http//www.wave-creative.com/cell/