Building Web Pages

1
Building Web Pages

• With Microsoft Office

2
Introduction
This tutorial is for the beginning web builder.
It utilizes software that you already have,
Microsoft Office, to show what you can do with a
simple webpage template.
3
Cypress Template

• You will use the Cypress web template to build
  your site.

4
Mac

• WordMac2000 and WordMac v.X have the Cypress
  template you need installed.
• Open Word
• In the Project Gallery under categories choose
  Web PagegtCypress

5
PC

• PC and other applications, download the
  templatehere

• It will open a Word document using the template.
• If it says Read Only Save in the templates folder
  or as a document to get a working document

6
Save Your Work

• Mac
• Save as a Web Page, check the button save only
  display information into html. This will allow
  more browsers to see your page.

• PC
• Save as .html

7
Title

• Select Main Title Goes Here and put in your own
  title.
• You can change the size, color, and placement of
  the title with the formatting menu, just like a
  Word Document.
• Save (as a web page or .html)

8
Subheadings

• Look at the frame on the left of the page. Put in
  your subheadings here.
• Select Subheading 1 and type your own subheading.
• Repeat for 2 and 3.
• Save

9
Add Text

• Go to the right side of the page. Put the same
  headings under Subheadings 1,2,and 3.
• Add your text under the appropriate subheading.
  Remember, you can change the font, size, and
  color just like you would in a word document.
• Save

10
Graphics

• Insert a picture. Click on the picture in the
  template to select it. Choose Insert gt Picture
  gtClip Art (or From File). Select the picture you
  want and click Insert.
• Add a caption by selecting Caption Goes Here and
  typing your own text.
• Save

11
More Graphics

• If you want to add additional pictures, place the
  cursor where you want them, and repeat the Insert
  gt Picture gtClip Art (or From File) process.
• Save

12
You Are Done!

• You have web site ready to upload to a server.
• If you want to see what you just created, go to
  ViewgtHTML Source. This is what html code looks
  like. You just created this! Close it by choosing
  ViewgtExit HTML Source.
• Exit the tutorial now or go on to learn about
  uploading and FTP.

13
FTP tutorial

• How to Upload your Web Page

14
File Transfer Protocol (FTP)

• The final task in web building is to upload the
  website to a server.
• Your school may have a server that you can use.
• Your Internet Service Provider (ISP) may offer a
  small server space with your Internet account.
• There are also commercial sites that offer web
  hosting for a fee.
• Free web hosting is usually supported by
  advertising and may have inappropriate ads.

15
The information you need from your website host
will look something like this

• may also have directory path or default path
  (sends it to your specific folder)

• host name
• user id
• password

16

• Open application (Fetch for Mac or WS_FTP for PC)
• Select New Connection
• Enter the hosting information
• Click OK and/or Connect.
• You should now see the server.

17
MAC

• Find the folder for your website.
• Find your files on your hard drive and Drag them
  into your folder or select Remote gt Put Folders
  and Filesgtyour file names here in the menu bar.
• You need to upload all files atteched to your
  site. HTML pages, .GIF or .JPG images, any other
  linked files

18
PC

• The left window shows your computer hard drive.
  The one on the right is the remote server.
• Navigate to the folder on your hard drive that
  holds the new website files
• Select all the web site files (HTML pages, .GIF
  or .JPG images, any other linked files).
• Make sure the "remote" side of the FTP software
  is open to your personal web server folder.
• Click the "Put" or "Upload" arrow to move the
  files from the local directory to their remote
  directory.

19
You are finished!

• Check the address of your new website.
• The upload is complete! Close your FTP
  application.

• Use your web browser to find your new website!