How to Host Your Own Web Site

Document Sample
How to Host Your Own Web Site Powered By Docstoc
					 Basic Web Design
      Brought to you from

     VIP and DHS
              by
    Wendy Peacock,
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
  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.
                  Getting Started
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.
                     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.
            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
                      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.
           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
  work.

•   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
    find.
 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
  later.
• 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
Or

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
  graphic.

• 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
        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 =>save image as=>save image to
        your folder
      • Insert the graphic on your page: place cursor where you want
        the graphic => Insert => Picture=>from file=> select
        picture=>insert
            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
                                 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.htm#FrontPage
   –   http://www.microsoft.com/education/default.asp?ID=FrontPage2kturorial
   –   http://www.microsoft.com/education/downloads/Tutorials/IOC/FrontPage2k/design.do
       c
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

				
DOCUMENT INFO
Description: How to Host Your Own Web Site document sample