Basic Web Design

1
Basic Web Design

• Brought to you from
• VIP and DHS
• by
• Wendy Peacock,
• RLHS VIP-Resource Teacher

2
Basic Web Design

• What You Will Get
• Freedom from templates with basic concepts
• Free WYSIWYGs and FTP applications
• Design your own teacher web site
• How to build a web page using MS Word
• Introduction to MS FrontPage
• Uploading your site to the district/site server.

• What You Will Not Get
• HTML
• Java Scripts
• Advanced functions

3
Getting Started

• Before examining the basics of web design and
  exploring all the possibilities for your site,
  lets establish some basics.
• To create a web page, you will need three things
• Create a web page.
• Get a host for your page.
• Transfer your page (along with folder contents)
  to your host.

4
File Management

• Anything (files, documents, sounds, images, etc.)
  put on a web page MUST be included in a folder
  that will be uploaded to the web host. If images
  are not included in a folder, they will NOT
  appear on your page.
• Under My Documents create a folder called
  lastname_teacherpage
• In this folder, create two more folders called
  images_sounds and files.
• You can create more folders later as you need
  them.

5
Plan Your Site

• Before starting work PLAN!
• Dont waste your time. Before hand determine
• What is your purpose?
• What are your needs?
• Who is your audience?
• What are their needs?
• How will you web page meet these needs?

6
Design Your Site
Welcome/Splash Page

• For now you will plan 5 pages you can add more
  later.
• Each page will link off your Welcome or Splash
  page.

7
Plan Your Pages

• What is it that you want your audience to find on
  each page? Once you have determined that, you can
  go TILTIN

8
TILTIN Your Pages

• Tilt is an mnemonic developed by Jeff Peach for
  remembering the important elements of a page.
  Ive taken liberties and added I and N to Jeffs
  work.
• T title
• I images
• L links
• T text
• I identification
• N navigation

9
Design Your Page

• Using the concept of TILTIN establish the
  design for your page.
• Hint You have seen lots of pages and maybe even
  created one yourself. Think (or go to the web and
  look) about what and where things are located on
  an appealing page.

10
The Good, the Bad and the UglyWhich do you want?

• Rules for appealing and effective pages
• Keep it clean, easy to read, and information easy
  to find.
• Keep backgrounds are consistent and congruous.
• Keeps font styles and sizes consistent and
  congruous.
• Be sure graphics enhance rather than distract.
  Too much of a good thing is not good.
• Know your audiences tolerance for text. Page
  navigation is just as important as site
  navigation.
• Be sure links are maintained.

11
Building Your Welcome Page

• A well-designed web page is visitor friendly
  visitors should always know where they are and
  how to get where they need to go.

12
Step 1 Start Word Save as HTML

• Open a word document (startgtprogramsgtword)
• Title your page (Keep It Simple, you can change
  it later.
• Save your page file gtsave as
• Enter the filename as web_1.htm and select Web
  page from the Save as type drop down menu.

13
Step 2 Background

• From the menu bar format gtbackground gt fill
  effects then choose what you want, apply and
  click on OK
• Or
• 2. From the menu bar format gttheme and choose
  the theme you want, apply, click OK

14
Step 3 Add a Title

• Click on Word Art, choose a style, change the
  fill effects, apply, the click OK
• Type in a new title and sub title for you page
• (This might be your name and content
  area.)

15
Add a graphic

• Place your cursor where you want to insert a
  graphic.
• Import a graphic from the clip art file
• InsertgtPicturegtclip art
• Find a clip art graphic that is appropriate for
  your page gt click on graphic gt insert
• Resize the graphic to fit need of your page

16
Add a graphic

• Import a graphic from the clip from the Internet
• Visit a graphics web site
• Icon Bazarr
• http//www.iconbazaar.com/
• Collection of clip art, banners, graphics,
  pictures, etc
• Bells-n-Whistles.com
• http//bellsnwhistles.com
• Collection of clip art, banners, graphics,
  pictures, etc.
• Ditto.com
• http//www.ditto.com
• Collection of pictures and clip art from the web
  
• Find a button graphic that is appropriate for
  your page
• Save the graphic in your Images folder
• Right click on the graphic gtsave image asgtsave
  image to your folder
• Insert the graphic on your page place cursor
  where you want the graphic gt Insert gt
  Picturegtfrom filegt select picturegtinsert

17
Add a Navigation bar

• Add a navigation bar to your splash page
• Locate your cursor below the title of your page
• Add a table TablegtInsertgt(select one row with
  five columns)
• Label each cell of the table (for example)
• Change the background color of cells Highlight a
  cell Tablegttable propertiesgttable tabgtborders
  and shading gtselect a colorgtclick OK

Home Introduction Assignments Homework Resources
18
Tutorials

• Web pages with MS Word
• http//imet.csus.edu/word_web/web_1.htm
• http//www.kevjudge.co.uk/wordtut.htm
• Web pages with MS FrontPage
• http//sesd.sk.ca/teacherresource/onlinetutorials/
  tutorials.htmFrontPage
• http//www.microsoft.com/education/default.asp?ID
  FrontPage2kturorial
• http//www.microsoft.com/education/downloads/Tutor
  ials/IOC/FrontPage2k/design.doc
• Other tutorials
• http//www.siec.k12.in.us/west/online/index.html
• http//www.stars.com/Authoring/Design
• http//www.w3.org/pub/WWW/Provider/Style