Download FrontPage XP - State of Delaware

Creating a Classroom Web Page
Using FrontPage
Shari Galgano
Technology Resource Teacher
Caesar Rodney School District
http://www.k12.de.us/teacher/galgano/
[email protected]
Table of Contents
Understanding the Web Page Process ............................................................................................3
Getting Started......................................................................................................................................3
Creating a New Web .............................................................................................................................4
The Folder List .......................................................................................................................................5
FrontPage Toolbars ...............................................................................................................................5
Creating Your Home Page ....................................................................................................................6
Starting and Saving...........................................................................................................................6
Creating a Title ..................................................................................................................................6
Adding Text.........................................................................................................................................7
Importing Text...................................................................................................................................7
Changing Text Fonts .........................................................................................................................8
Using Tables ........................................................................................................................................8
Adding Graphics ...............................................................................................................................10
Saving Graphics from the Internet.......................................................................................10
Inserting Graphics ......................................................................................................................10
Types of Image Files..................................................................................................................10
Creating Alternative Text ........................................................................................................ 11
Backgrounds: Colors and Images................................................................................................. 11
Colored Backgrounds .................................................................................................................. 11
Picture or Graphic Background................................................................................................ 11
Creating Links ...................................................................................................................................12
Linking to a Web Page or File Within Your Own Web Site ............................................12
Linking to an External Web Address.....................................................................................12
Linking to an Email Address .....................................................................................................13
Linking Text or Graphics to an Email Address...................................................................13
Removing a Link ............................................................................................................................14
Creating a New Page .......................................................................................................................14
Publishing Your Web Site..................................................................................................................15
Using FTP .......................................................................................................................................15
Editing Your Web Site .......................................................................................................................16
Editing Individual Pages.............................................................................................................16
Uploading Your Changes.............................................................................................................16
Viewing Your Changes.................................................................................................................16
2
2
Understanding the Web Page Process
There are 4 basic steps to having a web site. Steps 1 and 2 can be interchanged. Step
3 can not be done until after both steps 1 and 2 are complete.
1. Acquire a location on a web server to “host” your site. A web server makes
the web page available 24 hours a day, worldwide. State of Delaware teachers
can request free web space at www.k12.de.us/teacher. If you haven’t done so
already, please print the form from this site, complete it, and send it to Ada
Twitchell at the District Office. Within a few weeks, you will receive a message
from the state containing your user name and password for accessing your web
space.
2. Create a web page(s) on your own computer using a web editing program. We
will be using Microsoft FrontPage. This is a program that works much like a word
processor but does so in a language that the Internet can understand (HTML). It
uses WYSIWYG (what you see is what you get) technology so that you do not
have to know any HTML language to use it. At this point, the web page(s) can only
be viewed on your computer, not the Internet.
3. Upload your web page(s) from your computer to your space on a web server.
This is done using a File Transfer Protocol program (FTP). We will use a program
available free to educators. After uploading the files from your computer to the
web server it is available to the whole world! Teachers and other educators can
download and install this free FTP program at:
http://www.ftpplanet.com/downloadLE.asp
4. Edit your web page(s). Information on your web page(s) should always be
current. To edit your page(s), open the file(s) from your hard drive in FrontPage.
Make your changes. Save your file(s). Then upload the changed pages to the
Internet using the FTP program. The changes will not be on the Internet until
you upload them.
Getting Started
First we will create a new folder on the hard drive to save the web site in.
1. Double-click on “My Computer”.
2. Double-Click on “Local Disk (C)”.
3. Create a new folder called “Classroom Web Page”.
a. Go to “File”, “New”, “Folder”.
b. Name the folder “Classroom Web Page”.
4. Close this window.
3
3
Creating a New Web
1. Open Microsoft FrontPage by going to “Start” and selecting “All Programs”, then
select “Microsoft FrontPage” from the list of programs.
2. Go to “File”, “New”, “Page or Web”. The task pane will open on the right side of
the screen.
3. Within the “New” category of the task pane click on “Empty Web”.
4. The “Web Site Templates”
dialog box will open.
5. Select the “Empty Web” option.
To specify the location of your
web, “Browse” to the “Classroom
Web Page” folder on your “Local
Disk (C)”.
6. Click “OK”
4
4
The Folder List
FrontPage will display a folder list on the left portion of the screen. The folder list
displays each of the folders and pages that make up your web.
To turn the Folder List off or on:
1. Click the “Toggle Pane” icon
List”.
on the toolbar to display or hide the “Folder
The “Folder List” will contain a “_private” folder and an “images” folder. The “_private”
folder is used by FrontPage. Do not save anything in this folder. The “images” folder is
used to save all graphics that are related to your web site. Save all graphics into this
folder.
FrontPage Toolbars
Take a look at the FrontPage toolbars at the top of the window. Many of the features
you see there should look very similar to the features you use all the time in your word
processing program. "New," "Open," "Save," "Cut," "Copy," "Paste," "Print," and some of
the others do pretty much the same thing as they do in Microsoft Word, or any other
word processing program. The text options for font name, size and style (bold, italics
and underline) are also familiar features, as are the bulleted and numbered list buttons
and the justification buttons.
You can change the view of your web page in
FrontPage by clicking the View Bar in the lower left
part of the window.
5
5
•
•
•
Normal view allows you to edit your web pages in WYSIWYG mode.
HTML view allows you to see and work directly in the HTML source code of your
web page.
Preview allows you to see what your web page will look like when it is on the
Internet.
Important! Before we go any further there are a few very important specifics that
need to be covered. These important concepts are given below and will be mentioned
many other times.
ÿ
ÿ
ÿ
All files for your web site, including graphics files must be located in the same
folder.
There can be no spaces in file names, including the file names for graphics.
Preferably, all files should be named using short file names in all lower case
letters.
Creating Your Home Page
Starting and Saving
1. Click the “New” button on the toolbar to create a new page for your web site. By
default the page will be named “new_page_1.htm”.
2. Go to “File” and select “Save As”. Save the file to your “Classroom Web Page”
folder using the file name “index.htm”.
Creating a Title
Each page of your web site should be given a meaningful title. A title is different than a
file name. The title is displayed in the browser’s title bar when viewed on the Internet.
Many search engines use the title when retrieving relevant web sites during a search.
To create a title:
1. Go to “File”, “Properties”.
2. Enter a descriptive title. This is not the same
as the file name. You may use “normal”
capitalization and spacing.
3. Click “OK”.
4. Save the change by going to “File” “Save” or
clicking on the “Save” icon
on the toolbar.
6
6
Adding Text
One of the great features about FrontPage is its similarity to a word processing
program. To add text you simply put the cursor where you want it and start typing! You
can set the font, the size, and the style by using the buttons and boxes on your
FrontPage toolbar or by going to “Format” “Font” to make your selections.
Although adding text to your web pages is easy, formatting text can be a bit more
difficult and at times frustrating. You will discover that the “Tab” key does not work
like it does in a word processing program and that you can not use spaces in the same
way. This is the nature of HTML. Using tables is a great way to format pages to look
the way you desire. Tables will be covered later in this tutorial.
Importing Text
The chances are pretty good that some of the information you want to place on the web
has already been typed. Maybe you already have it in a Word document, sitting on your
hard drive. The last thing you want to do is re-type everything into your FrontPage web
page. Never fear, you can cut and paste your text into FrontPage (although you may lose
your formatting.)
To import text into FrontPage, follow these steps:
1. Open the file you want to import from.
2. Select the text you want to import (if you want the entire file, use the "Edit"
drop-down menu in Word and choose "Select All").
3. Click "Copy".
4. Return to FrontPage.
5. Set the cursor where you want to insert the text and click "Paste".
6. There it is!
As you become more skilled with web page design, you may find that it’s easier to cut
and paste your content in after you have done some initial formatting on your web page.
Try different methods and see what works for you.
By default when you press “Enter” the text will be double-spaced. If you want
something to be single spaced press “Shift + Enter”.
7
7
Changing Text Fonts
Changing fonts can add a lot of visual appeal to your web page. It can help you define
sections, or call attention to important materials. However, you always have to keep one
basic rule in mind when using fonts. In order for a font to appear on your viewer's
screen, it must be installed on the viewer’s computer. If the font is not installed, then
the viewer's browser will automatically display it as the "default" font. So, using
obscure fonts is always a risky plan. The chances that your viewers will not see what you
intended are pretty high.
As a general rule, try to stick with the basic fonts. Common fonts for Windows
computers are Arial, Comic Sans, Courier New, Georgia, Helvetica, Times New Roman
(this is usually the browser default), and Verdana.
Using Tables
Before we learn to add graphics, let’s learn to use tables. Tables allow us to have much
more control over the placement of text and graphics on our web page.
With your web page open in FrontPage, go to the “Table” menu. Click on “Insert”,
“Table”. The “Insert Table” dialog box like the one below will be displayed. As you can
see, this dialog box has a lot of options on it. Let's go through them line by line.
•
•
•
•
•
•
Designate the number of rows and columns
you want your table to have.
Alignment can be set to justify left, right,
or centered.
Choose a numerical size for the border.
The larger the number the thicker the
border will be. Set the size to “0” if you
do not want the table to have a border.
Cell padding refers to the space between
the contents and the inside border of the
cell. Cell spacing refers to spacing
between each of the cells in the table.
Table width is set as a percentage of the
viewer's window. You can also set this in
pixels, but if you do this, then you fix the width of your table, regardless of the
viewer's screen resolution. (See the "Tip" box below.)
Click "OK".
8
8
After you have successfully inserted the table into your web page, you can edit its
properties by inserting your cursor into the table and right-clicking and selecting “Table
Properties”. The "Table Properties" dialog box will open. In the Table Properties box,
you can edit the properties of the entire table. Table borders, alignment, background,
etc. can be changed from here. To change the properties of a cell, insert your cursor in
the cell you wish to change, right-click and choose “Cell Properties”. To change the
properties of multiple cells, select the cells before right-clicking.
Using tables can help with formatting since tabbing and
spacing are not recognized by the html language. When
you create a new web page, one of the first things you
might want to do is place a table on it. Then, as you add
text and images, place them into cells of the table instead
of just putting them onto an unstructured web page. This
gives you greater control of where you place the graphics
and/or text. Using tables without borders will offer you
control of placement without seeing the tables.
This may require some advance planning. Give some thought
to your page before you start developing it. How many
images might you want to use? How many paragraphs will
you have? It takes a bit of practice but after you've
developed a few pages, this will start to come naturally to
you.
Nesting one table inside of another table also increases
your ability to control how your web page will look.
9
9
Tip - Screen Resolution and Table
Width
When making decisions about whether
to set table widths in "% of Window"
or "pixels," always keep in mind that
people adjust their screen resolutions
to many different settings. Some like
1024x768. Other people like 800x600.
Still others use 640x480 because it
makes things bigger and easier to see.
If you create a table and you make it
700 pixels wide, then people with
640x480 resolution are going to get
one of those dreaded horizontal
scrolling bars across the bottom of
their screen and nobody wants that!
This is why it’s probably a wise
choice to stick with the "% of
Window" whenever possible. That way,
no matter how wide your viewer's
window is, the table fits (although it
may get "longer.")
Adding Graphics
Saving Graphics from the Internet
Before adding graphics to your web site, let’s go on the Internet and save a few graphic
files to use. Remember the graphic files must be saved into the same folder that
the web page is saved in, in the “images” folder. The file names can not contain
spaces and should be short names in lower case letters.
•
•
•
Go to http://www.k12.de.us/teacher/galgano/webgraph.htm for links to graphics
sites.
Find a graphic that you want to save. Check the copy right to make sure it is legal
to use the graphic on your web site. Some graphics are available free with “no
strings attached”. Other graphic sites might require you to give credit and have
a link back to the graphics site from your web site. Other files may not be
available to use without buying the graphic.
Place your cursor on the graphic, right-click and select “Save picture as”. Browse
to the correct folder. Remember the graphics files must be saved in the “images”
folder inside the “Classroom Web Page” folder that is located on the “Local Disk
C”. Change the name of the file if you wish. Use a short name in all lower case
letters and/or numbers.
Inserting Graphics
Placing a graphic on your web page in FrontPage is an easy thing to do. First, place your
cursor where you want the image to go. Placing an image into a table cell will give you
more control of the image location. Go to the “Insert” menu and select “Picture” “From
File”. “Browse” to the “images” folder inside the “Classroom Web Site” folder that is
on the “Local Disk C”. Click on the file name of the picture
that you wish to insert and then click “Insert”.
Double clicking on the picture will bring up the “Picture
Properties” dialog box that will allow you to change the
text wrapping, layout, and size of the picture.
Types of Image Files
The two most common formats for images that are used on
the web are .GIF and .JPG (or .JPEG). These are
"compressed" file formats that take up a minimum of
"space" (meaning computer memory) and, therefore, have
relatively fast download speeds. When selecting images for your web pages, try to stick
with GIF's and JPG's.
10
10
Creating Alternative Text
When working with graphics, you should create alternative text for the graphic.! The
alternative text will be displayed when a mouse hovers over the graphic within a Web
browser.! To create alternative text for a graphic:
1. Right-click on the image and select “Picture
Properties”. !
2. Click the “General” tab.
3. Within the “Alternative Representations” portion of
the dialog box, enter a brief description of the
photo in the text box next to “Text”.
4. Click on “OK”.!
Backgrounds: Colors and Images
You can add either a solid color background to your web page(s) or you can use a picture
or graphic as the background for your web page(s).
Colored Backgrounds
1. Go to “File” “Properties”, click the “Background” tab.
2. Click the arrow beside “background” to choose a color.
3. Click “OK”.
Picture or Graphic Background
1. Find a picture or graphic file on the Internet that you
want to use as your background.
2. Save the file in the “images” folder that is in the
“Classroom Web Page” folder. Be sure to use a short,
lower case name without any spaces for the name of the
file.
3. In FrontPage, go to “File” “Properties”.
4. Check the “Background Picture” box and then “Browse” to
find the graphic in the “images” folder inside the
“Classroom Web Page” folder.
5. Click “OK”.
11
11
(Notice the other items that
you can change from here as well.)
Creating Links
The ability to link to other resources is what makes the web a unique and powerful
medium of communication. Hyperlinks make the web nonlinear. They let you jump
directly from point A to point Z. The Internet allows you to connect resources in ways
that are not possible with print documents. Hyperlinks allow you to link to pages within
your own site, external websites, email addresses, Word Documents, Excel
spreadsheets, PowerPoint presentations and more.
Linking to a Web Page or File Within Your Own Web Site
1. Select the text or graphic that you want to make into the link.
2.
3.
4.
5.
Go to “Insert” “Hyperlink” or click the “Insert Hyperlink” icon on the toolbar
.
The “Insert Hyperlink” dialog box will be displayed.
On the left click on “Existing File or Web Page”.
A list of the existing files and web pages in the “Classroom Web Page” folder will
be displayed.
6. Select the page you wish to link to.
7. Click “OK”.
Important! Keep all of your web pages and documents that you are linking to in the
“Classroom Web Page” folder so that your relative links will be maintained when you
publish your web site.
Linking to an External Web Address
1. Select the text or graphic that you want to make into the link.
2. Go to “Insert” “Hyperlink” or click the “Insert Hyperlink” icon on the toolbar.
3. The “Insert Hyperlink” dialog box will be displayed.
12
12
4. On the left click on “Existing File or Web Page”.
5. Click the “Browse the Web” icon
to open your browser. Navigate to the web
site that you want to link to.
6. After locating the correct site, return to FrontPage. FrontPage should have
inserted the URL into the address line of the dialog box. If the address is not
correct then return to the web site, copy the URL, and paste (Ctrl+V) the URL
into the address box.
7. Click “OK”
Linking to an Email Address
FrontPage should automatically create a link when you type an email address. If the
email address does not automatically link, type a space after the address. You can also
change other text or graphics into an email link.
Linking Text or Graphics to an Email Address
1. Select the text or graphic that you want to make into a link.
2. Go to “Insert” “Hyperlink” or click the “Insert Hyperlink” icon on the toolbar.
3. The “Insert Hyperlink” dialog box
will be displayed.
4. On the left click “Email Address”.
5. The “Insert Hyperlink” dialog box
will now look like the one shown.
6. Type the email address that you
want to link to. The “mailto:”
command will automatically be
inserted.
7. Click “OK”.
13
13
Important! An email link will only work if the person that clicks on it has an email
program such as Outlook, Outlook Express, or Netscape Mail configured. If they use a
Web based mail program such as Hotmail or the state’s Web based Imail then the link
will not work. In this case your email address would need to be copied and pasted into
the users email program.
Removing a Link
1. Select the text or graphic that contains the link that you wish to remove. This
can be a link to an external Web page, a link to a Web page or document on your
site, or an email link.
2. Go to “Insert” “Hyperlink” or click the “Insert Hyperlink” icon on the toolbar.
3. On the right click “Remove Link”.
4. Click “OK”.
Creating a New Page
1. Open your web if it is not already open.
2. From the FrontPage toolbar click the “New Page” icon.
Or
1. Go to “File” New” “Page or Web”. The task pane will open
on the right side of the screen.
2. Within the “New” category of the task pane click on “Blank
Page”.
14
14
Publishing Your Web Site
After creating your web page(s), you must transfer them to your space on the state web
server so that they can be viewed by others. We will be using an FTP (File Transfer
Protocol) program that is free to educators.
Using FTP
1. Open the FTP program.
2. Connect to your space on the state server.
3. Once you connect you should see a window that looks like the one below. The left
side of this window show files on your computer. The right side shows files on
your web space. Currently you have no files on your web space. This is about to
change!
4. On the left we need to find and display the files in your “Classroom Web Page”.
This can be set as the default if it hasn’t been already.
5. Once your files are displayed we will upload them.
6. Select any files or folders that you need to upload. This time we will need to
select the “images”
folder and any “.htm”
or “.html” files.
7. Click the arrow that
points to the right.
This action moves a
copy of the selected
files from your hard
drive to the web
server.
15
15
8. To see your website, open or maximize Internet Explorer. Type your website
URL in the address box. The address for you “Home Page” will be
www.k12.de.us/teacher/lastname.
9. Your students, parents, and the rest of the world can now view your web site!
Editing Your Web Site
It is important to keep the content on your web site current and relevant. To do this
you will need to edit all or some of your web pages regularly, save the changed pages to
your hard drive in the “Classroom Web Page” folder, and upload the changed pages to
your web space.
Editing Individual Pages
1.
2.
3.
4.
Open your web in FrontPage.
Open the file(s) that you need to edit.
Make the changes.
Save the files without changing the names or location.
Uploading Your Changes
1.
2.
3.
4.
Open the FTP program.
Connect to the server.
Open you “Classroom Web Page” folder on the left.
Select the files that you made changes to.
a. To select non-consecutive files, click the name of one of the files, then
hold “Ctrl” while you select the other files.
b. To select consecutive files, click the first file, scroll to the last file that
you need to select, then hold “Shift” and click on the file.
5. If you changed or added any graphics you will need to select the “images” folder.
6. Click the arrow that points to the right to move a copy of your changed files to
the server.
Viewing Your Changes
1. Open Internet Explorer.
2. Go to your Home Page.
3. Go to a page that you changed. If you do not see your changes click the
“Refresh” button on the toolbar of Internet Explorer.
This tells your
computer to get a “new” copy of the web page from the server. Now you should
see your changes.
16
16