Basics of Web Design

1
Basics of Web Design

• An Introductory Lesson

2
What is the Internet?

• Cables, wires
• Switches and hubs
• Server computers
• Web pages reside on servers
• Available 24/7
• Client computers
• Desktops, laptops, etc.
• Connected (temporarily)
• Modems (phone)
• DSL
• ISDN, T1, T3, coax.

3
What do you see online?

• Web sites
• Linked pages
• Pages
• Images
• Text
• Media
• Sound
• Video
• Animation
• Interactive forms.

4
What is behind the scenes?

• html code
• hypertext markup language
• Graphic files
• jpg
• gif
• Media files
• wav
• swf
• more.

5
What will you use?

• Easier web editors
• FrontPage 2000
• Yahoo! Pagebuilder
• Advanced web editors
• Dreamweaver
• Adobe Golive
• Other tools
• Flash
• Fireworks.

6
Basic Rules of Web Site Development

• Get organized first
• Stay organized as you work
• Do not move files around after using them on a
  page
• Get the files in the appropriate folder before
  you use them or you will have broken links and
  missing pictures
• Pay close attention and take control of where you
  save your files be deliberate every time
• Name all web files without spaces and symbols.

7
Getting Started

• Organize your files first into a dedicated
  folder, ex., freshman
• Make sure your class folders are in this one
• Plan your content and layout, then gather all
  resources
• Put all graphics into an images folder within
  your dedicated folder
• Start building your pages
• Layout with tables for organization
• Start with placeholders and text
• Add images and media last.

8
Navigation is the Key to Your Site

• Navigation links are easy to access
• Text links contrast with background color in all
  forms (original, active, visited)
• Graphic links are obvious or have text captions
  indicating where they are
• All links work correctly have been tested
• No page is without needed links to home page and
  other major pages.

9
Basic Rules of Web Design

• Choose colors carefully (eg., red on blue BAD)
• High contrast between text and background
• Simple backgrounds are best
• Text should be large enough to read and in an
  easy-to-read font (eg., arial, 12 or 14 point)
• Important information at top and left sides
• Be concise and clear no long paragraphs.

10
Using pictures and media

• Use only enough pictures to enhance your message
• Crop pictures to correct size before using
• Enhance the look of the page by matching
  background and text colors to those found in page
  graphics
• Use only relevant sounds, videos and animations
  put them in last.

11
How things should be

• Pages should load quickly
• Important information should be visible while the
  rest is loading
• Design should be balanced and should look as if
  it was done on purpose
• All text should be checked for spelling,
  punctuation, grammar and capitals
• All links should work and should be kept
  up-to-date.

12
Key Words to Remember

• Organize
• Plan
• Build
• Test
• Revise
• Test
• Update
• Test.

13
Now
Open Frontpage!!!