Basic Web Design
Brought to you from
VIP and DHS
RLHS VIP-Resource Teacher
Basic Web Design
What You Will Get What You Will Not Get
• Freedom from templates • HTML
with basic concepts • Java Scripts
• Free WYSIWYGs and • Advanced functions
• Design your own teacher
• How to build a web page
using MS Word
• Introduction to MS
• Uploading your site to the
Before examining the basics of web design and exploring all
the possibilities for your site, let’s establish some basics.
To create a web page, you will need three things:
1. Create a web page.
2. Get a host for your page.
3. Transfer your page (along with folder contents) to your host.
• 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
• In this folder, create two more folders called
“images_sounds” and “files.”
• You can create more folders later as you need
Plan Your Site
Before starting work: PLAN!
Don’t 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?
Design Your Site
•For now you will plan 5 pages; you can add more later.
•Each page will link off your Welcome or Splash page.
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’
TILTIN’ Your Pages
• Tilt is an mnemonic developed by Jeff Peach for
remembering the important elements of a page.
I’ve taken liberties and added I and N to Jeff’s
• T = title
• I = images
• L = links
• T = text
• I = identification
• N = navigation
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.
The Good, the Bad and the Ugly
Which do you want?
Rules for appealing and effective pages
1. Keep it clean, easy to read, and information easy to
2. Keep backgrounds are consistent and congruous.
3. Keeps font styles and sizes consistent and congruous.
4. Be sure graphics enhance rather than distract. Too
much of a good thing is not good.
5. Know your audience’s tolerance for text. Page
navigation is just as important as site navigation.
6. Be sure links are maintained.
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.
Step 1: Start Word & Save as HTML
• Open a word document (start=>programs=>word)
• Title your page (Keep It Simple, you can change it
• Save your page: file =>save as
• Enter the filename as web_1.htm and select Web
page from the “Save as type” drop down menu.
Step 2: Background
1. From the menu bar: format =>background =>
fill effects then choose what you want, apply and
click on OK
2. From the menu bar: format =>theme and choose
the theme you want, apply, click OK
Step 3: Add a Title
1. Click on Word Art, choose a style, change the
fill effects, apply, the click OK
2. Type in a new title and sub title for you page
(This might be your name and content area.)
Add a graphic
• Place your cursor where you want to insert a
• Import a graphic from the clip art file:
– Insert=>Picture=>clip art
• Find a clip art graphic that is appropriate for your
page => click on graphic => insert
• Resize the graphic to fit need of your page
Add a graphic
• Import a graphic from the clip from the Internet:
– Visit a graphics web site
• Icon Bazarr
Collection of clip art, banners, graphics, pictures, etc
Collection of clip art, banners, graphics, pictures, etc.
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 =>save image as=>save image to
• Insert the graphic on your page: place cursor where you want
the graphic => Insert => Picture=>from file=> select
Add a Navigation bar
Add a navigation bar to your splash page
• Locate your cursor below the title of your page
• Add a table: Table=>Insert=>(select one row with five columns)
• Label each cell of the table (for example)
Home Introduction Assignments Homework Resources
• Change the background color of cells: Highlight a cell
Table=>table properties=>table tab=>borders and shading
=>select a color=>click OK
Web pages with MS Word
Web pages with MS FrontPage