Opening FrontPage
Opening A Web
Getting to Know the Workspace
Working with Explorer
Creating your First Web Page
Inserting
WordArt
Adding Text Animation
Inserting Hover Buttons
Using Bookmarks
Finding custom
Backgrounds
Publishing Web Site to a
Zip Disk
Changing Permissions
Web Design Resources
|
|
E-Education Services
201A Karl E. Mundt Library
Email: dsuinfo@dsu.edu Phone: (605) 256- 5049 |
Second, this
tutorial was created on my computer. So, while we are going through it here or
if you go through it at your office, things may be different. Some of the
screen shots may look different or your computer responses could be slightly
altered. Don’t worry about this, just try and work through it. Let me know if
something happens that throws you off.
Thanks
and have a good time,
Dawn Gaffney
Opening FrontPage
1) Start
your computer and log on.
2) Click
on Start, Programs, Internet Application, 
(this is one of those times when your machine
might be different, if you can’t find the button for FrontPage look for it on
another menu.)
3) The
Microsoft FrontPage window will open on your screen.
4) If
you are prompted for a user name and password, click cancel.
Opening a Web
1) Go
to the Menu Bar, click on File.
2) A
menu will appear, click on 
. (*Please note- it is very important to click
on Open Web, not Open.)
3) The
Open Web dialog box will appear. On the bottom of the screen notice the Web
name: area.
4)
In this area type the complete URL of the
web you would like to open. For the sake of this tutorial, type http://www.students.dsu.edu/<your
user id> For example, if I wanted to open up my web site I would type in
http://www.students.dsu.edu/gaffneyd
5) Click
on the Open button. You may be prompted for your user id and password.
Use the same ones that you used to log on to the computer and click OK. If you
are logging in from home, or anywhere outside the DSU network, type
dsunt\<user id> and then your normal password and then click OK.
6) Your
web will now open. You can enlarge the screen and manipulate it in any way you
would like.
7)
If you get any kind of an error message,
click OK, Cancel, and Close FrontPage. You will need to move to a
different computer, if there are no other computers available, we will create a
web for you on the desktop.
Getting to Know the
Workspace
Folder List-
allows you to manage all of your folders and files; it is similar to Windows
Explorer.
Front Page Editor-
this is where you do the work on your actual page.
Standard Toolbar-
formatting toolbar * Note the undo button.
Page View Tabs-
allow you to take a look at your web page in three different views. The
*Please note- you cannot edit your page when you are in the Preview mode.
Estimated Download Time-
This box shows you how long it will take your page to load on someone screen.
The default setting for this is 28.8 modem, which is probably the slowest
computer that you would be concerned about.
Window Tab- These tabs
appear to show you what documents you currently have open. This feature allows
you to easily switch from document to document.
Working with Explorer
So far you have opened FrontPage and opened your web, now what?
Before you actually get started creating a web page, it is important to
understand how to use the Folder List. If you have used Windows Explorer, you
will find it similar to that program.
1. Before
you get started you might want to make a little more room on the page. To get
rid of the Views Bar, go to the Menu bar and click on View. Click on Views
Bar, you should now have a little more room to work with.
2. Right
click your mouse on the main folder,
which should say http://www.students.dsu.edu/<your user id>, in
the Folder List window. If it is selected it will turn blue. A menu will
appear.
3. Click
on New, another menu should appear, click on Folder.
4. Name
your folder workshop, to rename the folder, start typing the new name.
If you can't type or rename the folder, right click on it. Another menu will
appear. Click on Rename.
5. Click
anywhere inside of the Folder List, your folder will be renamed.
6. To
delete a folder, right click on it, choose Delete from the menu.
**Please Note: folders are a great way to organize your site. It would be a
good idea to put all of your images in one folder, your word documents in
another folder etc. This way it is much easier to navigate through all of your
pages.
Creating Your First Web
Page
|
Setting up Your Page |
Using
Tables- When you are creating your first web page,
getting started and trying to think of a design can often times be the hardest
part. A good tip to remember is that tables can be used to organize various
images and text tools on your page.
1. On
the right side of your screen you should see a large gray or white area, also
known as the FrontPage Editor Window, go to the Standard Toolbar and click on
the New Page icon, it should look like a white rectangle.
2. Right
click your mouse inside the Editor window. A menu will appear.
3. Click
on Page Properties. The Page Properties window will open.
4. Click
on the Background Tab.
5. In
the Colors section, click on the down arrow next to the Background:
box.
6. Click
on More colors. Click on the Custom button and change the RGB
colors to Red: 0, Green 0 and Blue 102. Click on the Add to Custom Colors
button. Click on OK, click OK.
7. Click
OK again. The background color of your page should now be the color we
formatted.
|
Inserting a Table |
1. Go
to the Menu Bar and click on Table. A menu will appear.
2. Slide
your mouse over the Insert option, there should be an arrow next to it
and another menu will appear, click on the Table... icon. If the
table icon is not visible, click on the down arrows to expand the menu.
3. The
Insert Table dialog box will appear. Change the settings so they look like the
following image:
** Note that we made
this first table 640 pixels wide. This is the size of most screens. If you make
it wider some people will not be able to see all of your web page on their
screen.
4. Click
on OK. The table will appear on your screen.
5. We
will do more with the table we just created later on in the tutorial, for now
take your mouse and click underneath the table.
6. Insert
another table with the same specifications as the other table.. do you remember
how? Go to the Menu bar....
|
Saving your Page |
1. Although
we have not yet done much to your page, this would be a good time to save it.
Make sure that you save your page often so that you don't lose any of your
work.
2. Go
up to the Standard Toolbar and click on the Save icon 
.
The Save As dialog box will appear. Find the workshop folder and double click
on it.
3. Type
cover in the File Name: text box.
*Note, the name default.htm should be
reserved for the cover page of your web. FrontPage automatically opens this
page in a browser.
5.
Click on the Change title... button.
Type the title of your page in the Set Page Title dialog box and click OK.
7. Click
Save, your page is now saved.
|
Inserting an Image: |
1.
To insert an image we need to go out the
Internet and grab three from a web site. I have created them for the purpose of
this workshop. Please open Netscape Navigator (Start, Programs, Internet
Application, Netscape Navigator) and go to http://www.homepages.dsu.edu/gaffneyd/2002_workshop/title.gif
2.
Right click on the picture, when the menu
appears, click on Save Image As.
3.
Save the picture to your disk or to a place
on the C: drive where you can find it. Name it title.gif. Click Save.
4.
Go to the address bar and change the last
part of the URL to back.gif, the address should look like: http://www.homepages.dsu.edu/gaffneyd/2002_workshop/back.gif , hit Enter and go to the page.
5.
Save the image
6.
Go to the address bar one more time and
change the last part of the URL to logo.gif. The address should look
like: http://www.homepages.dsu.edu/gaffneyd/2002_workshop/logo.gif , hit Enter.
7.
Save the image and close Netscape.
8.
Go back into Microsoft FrontPage Folder
List.
9.
Single click on the workshop folder
to select it. Click on File, Import, Add File, browse for the title.gif
file you just saved, double click on it.
10. You
should see the file in the window, click on Add File again. Find the back.gif
image and double click on it.
11. Click
on Add File again and find the logo.gif file and double click on
it. You should see all three files on
the list.
12. Click
OK.
13. To better organize the folder we need to add
another folder to keep the images in. Right click on the workshop folder
and click on New, Folder. Name the folder images. Click outside the
folder to finish naming it.
14. Use
your mouse to select one of your images, single click on it, hold down the
Shift key and single click on the logo.gif and title.gif image
files. They should both be selected. Let go of the Shift key and drag the files
into your images folder. Move the back.gif
file to the images folder as well.
15. Click
your mouse in the topmost table, go to the Formatting Toolbar and click on the Center
icon.
16. Go
to the Standard Toolbar and click on the Insert Picture from File icon 
.
17. Browse
for your images folder, double click on it. Find the title.gif image
that you imported and double click on it.
18. Move
your cursor into the table below, and right click, click on Table Properties.
19. In
the Background section, click on the check box next to Use background
picture. Click on the Browse
button, go to the images folder and double click on back.gif.
20. In
the Specify Width section, change the Table width to 607. Click OK.
|
Adding and Editing Text |
1. Your
cursor should still be in the lower table. Go to the Formatting Toolbar and
click on the Center icon 
.
2. Type
your name, highlight the text by holding down your mouse and sliding it over
the text you just created. Go to the Formatting Toolbar and change the
font using the various tools.
3. Place
your cursor at the end of the text and hit the Enter key. Type a welcome
message and format the text.
|
Saving your Page: |
1. Go
to the Standard Toolbar. Click on the Save icon 
again.
Notice that the Save As window does not appear.
2. Click
on the Preview tab, at the bottom of the Editor window, to see what your
page will look like in a browser.
|
Adding and Editing a
Table: |
1. Click
on the
2. Click
on the first letter of your name, your cursor should be at the beginning of the
line. Hold down the Shift key and hit Enter
three times.
3. Hit
the up arrow key three times, or click at the top of the table. Your
cursor should be at the top of the table.
4. Go
to the Menu bar, click on Table, Insert, Table. The Insert Table dialog
box should look like:
5. Click
OK.
6. Your
cursor should be in the first cell of the table, if it is not, use your mouse
and click inside that cell. Type Courses, hit the Tab key, type Vita,
hit the Tab key, type Schedule, hit the Tab key, type Email
Me, hit the Tab key and type DSU Home.
7. Use
your mouse to select all of the text that you just typed, format the text how
you would like.
8. Right
click on this table and click on Table Properties. In the Layout section change the Cell padding
so that it is 3. In the Borders section, change the Size so that it is 2.
9. In
the Borders section, single click on the down arrow next to the Color
box, click on More Colors. Click on the Select button and you
should see your mouse change to a color dropper tool, click on the background
of your page.
10. Click
OK.
11. In
the Background section, click on the down arrow next to Color, click on More
Colors. Click on the Select button, click on the yellow text of your
title.gif image.
12. Click
OK, click OK again.
13. If
you would like to change the width of the table, put your mouse over the right
border of the table, it should change to a double sided arrow. Single click and
drag the border over.
14. To
make the columns even, highlight the cells of the table, right click and click
on Distribute Columns Evenly. You may also want to click on the Center
icon to format your text.
15. Single
click under the table you just create and hit the Delete key three
times.
16. Save
your work.
|
Adding Links |
1.
Take your cursor and highlight the text DSU
Home, go to the Standard Toolbar and click on the Insert Hyperlink
icon 
.
2.
The Insert Hyperlink dialog box will appear.
Type http://www.dsu.edu in the Address: window.
11. Click
OK. Your text should now be highlighted and underlined. Your text
will also change to a different color. Right click on the page and click on Page
Properties, click on the Background tab. Under the Colors section,
click on the down arrow by Hyperlink, click on the dark blue box under
Document’s color. You can also change the colors of the visited and active
hyperlinks on the page. Click OK.
|
Using Links to send
Email |
1. Highlight
the text
2.
Click on the Insert Hyperlink icon 
.
3. On
the left side of the dialog box there is a Link To: section, click on Email
Address.
4. Type
your email address in the text box below E-mail address. When you start typing
FrontPage will automatically insert the text mailto: do not delete this.
5. Click
OK and save your work.
|
Linking to a Microsoft
Word Document |
1. Go
to Start, Programs, and Internet Applications and choose Internet
Explorer.
2. Once
your browser is open go to http://www.homepages.dsu.edu/gaffneyd/beginning_workshop/vita.doc
3. You
should be asked if you want to Open or Save the document, click on the Save button.
Save the document to a location you will remember.
4. Go
back to FrontPage. In the Folder List section, right click on your workshop
folder, click on New, Folder from the menu. Name your folder documents.
Click anywhere in the window to deselect the folder, click on your folder again
to select it.
5. Go
to the Menu Bar and click on File, Import.
6. The
Import widow will appear. Click on Add File. Browse on your disk or on
the computer for the word document we previously saved. Double click on the
document.
14. Click
OK.
15. It
might look like nothing happened, but double click on the documents folder and
the document will appear.
16. Go
back inside FrontPage Editor. Highlight the word Vita. Click on the Hyperlink
icon .
17. The
Insert Hyperlink window appears. Click on Existing File or Web Page.
Browse for the documents folder you created, double click on it. Double
click on vita.doc. Your highlighted text should now be underlined.
18. Click
on the Save icon. Go to the Standard Toolbar and click on the Preview
in Browser icon. Click on your hyperlinks to test them.
19. Go
back to FrontPage.
|
Creating a New Page |
1. On
the Standard Toolbar click File, Save As.
2. Type
schedule in the File Name text box. Click on the Change Title
button and change the title of the page. Click Save.
3. If
you look at the window tab you will see that the schedule.htm file is now open
and the cover.htm file is closed.
4. **
Important note, make sure that you save the page you were working on before you
to a Save As. If you do not, you will not save the changes that you made. Also,
to not change the page to conform to the new page until after you have done a
Save As.
5. Delete
your welcome message.
6. Highlight
your name and type Schedule. Hit Enter twice. Notice that FrontPage automatically created a
double space, if you would like the text to have a single space, hold down the
Shift key, and then hit the Enter key.
7. Use
the up arrow key to move your cursor to the top of the page, just under
the word Schedule.
8. Go
to the Menu bar, click on Table, Insert, Table. The table should be
centered and have six columns and three rows. Click on the check box next to
Specify Width, change the value to 500. Click on the radio button next
to In pixels.
9. Click
OK.
10. Place
your cursor left of the top row, it should turn into a black arrow, single
click and select the entire row. Right click inside the cells you selected.
Click on Merge Cells.
11. Click
inside those cells again, hit the Center icon and type 2002 Spring Schedule.
Format the text how you would like.
12. Place
your cursor in the second row, second column. Type Monday, hit the Tab
key, type Tuesday, hit the Tab key, type Wednesday, hit the Tab
key, type Thursday, hit the Tab key and type Friday. Notice that
your table resizes as you type. You can use your cursor to adjust the size of
the table or distribute the columns evenly.
13. Highlight
the word Monday and format it how you would like.
14. Go
to the Menu bar and double click on the Format Painter icon.
15. Move
your cursor to the table, highlight the other text that you typed, it should
change the formatting of that text so that they are all formatted the same.
16. Go
back up to the Menu bar and single click on the Format Painter icon to
deselect it.
17. Right
click in the first row of the schedule table and click on Cell Properties.
Click on the down arrow next to Background, click on a color to choose it or
click on More Colors. Click OK.
18. If
you need to change the color of your text, highlight the text and go to the Formatting
Toolbar, click on the down arrow next to the Font Color icon. Click on a
color to select it.
19. Click
anywhere in your page to deselect the text. You may add more information to the
table if you would like.
20. Save
your page, go to the Standard Toolbar and click on the Preview in Browser
icon.
21. Go
back to FrontPage. If you want your schedule table to have a border, right
click on the table, click on Table Properties and change the border to 1.
You can also change the color.
22. Click
your mouse just under the schedule table to move the cursor there, type Back
to Home, format it how you would like.
23. Highlight
the text Home, and click on the Insert Hyperlink icon. Browse to the workshop folder and double
click on the cover.htm file.
24. Save
and preview your page again.
|
Making an image a
hyperlink |
1. Go
to the Folder List, double click on your cover.htm page. Move your mouse
over the image at the top of the screen and click on it. You should notice
little boxes pop up on your image.
2. Click
on the Insert Hyperlink Icon 
.
The Insert Hyperlink dialog box appears.
3. Type http://www.dsu.edu
in the Address text box. Click OK.
4. Go to the navigation table and highlight the
text Schedule. Click on the Hyperlink Icon.
5. Browse
the window for the schedule.htm page that you just created, double click on it.
6. Place
your cursor at the bottom of the main table, this table has the white and gold
background. The mouse pointer should turn into a double sided arrow, click,
hold and drag the border down.
7.
Right click on
your name and choose Cell
Properties.
8.
In the Layout
section, click on the down arrow next to Vertical Alignment, click on Top.
9.
Click OK.
10. Save your page.
|
Viewing your Document
in a Browser |
1. Before
we view the web page, let us make a few more additions. Your cursor should be
in the main table, by your name. Go to the Menu bar, click on Table, Insert,
Rows or Columns. Click on the radio button next to Rows. Make sure that the
radio button next to Below selection is checked. Click OK.
2. Use
your mouse to slide the bottom border of the new row up. Click inside the new
row. Go to the Formatting Toolbar and
click on the Center icon.
3. Go
to the Formatting Toolbar and click on the Insert Picture from File
icon. Browse to the logo.gif file we imported and double click on it.
4. Click
on the logo. You should see a new tool bar at the bottom of the window. Click
on the Rectangular Hotspot button.
5. Move
your cursor over the logo, it should be in the shape of a pencil, single click
and hold the button down, now drag your mouse down and to the right. Draw a
square that is smaller than the logo.
Release the mouse
6. The
Insert Hyperlink dialog box appears. Type http://www.dsu.edu
in the Address text box and click OK. Using the hotspot tools allows you
to make only a part of an image one link and then the other part of an image a
different link.
7. Take
a look at some of the other tools available on that tool bar.
8. Save
your work.
9. Go
to the Standard Toolbar and click on the Preview in Browser icon 
,
if you have a browser window open the web site will appear in that browser. If
you don’t have one open, one should open.
10. If
you do not see the changes that you made, hit the Refresh button.
|
Adding Extras: |
Hit
Counter:
1. Go
back to FrontPage.
2. Make
sure that your cover.htm page is visible. If not go to the Menu Bar click on Window
and then click on cover.htm.
3. Click
your mouse on the page, to the right of your welcome message and hit Enter a
couple of times. Type Thank you for being visitor: . Format the text how you would like.
4. Go
to the Standard Toolbar and click on the Web Component icon 
.
5. In
the Component Type area, single click on Hit Counter.
6. In
the Choose a counter style area, double click on a type to select it. You should
then see a Hit Counter dialog box appear.
Click on the check box next to Reset Counter to , change the number to 100.
Click OK.
7. Click
the Save icon.
8. Look
at your page in your Internet Explorer. Remember to hit Refresh.
9. Hit
Refresh again and notice your hit counter change.
Time
Stamp:
1. Place
your cursor at the end of the line, behind the hit counter. Hit Enter,
type Page last updated: and format it how you would like. Go to the Menu Bar and click on Insert.
2. Click
on Date and Time... If Data and Time is not visible, click on the down
arrow at the bottom of the menu. The Date and Time dialog box appears. Leave
the default settings. Click OK.
3. Hit
the Enter key once more, go to the Menu bar and click on Insert,
Horizontal Line. Double click on the line that was just created on
the page.
4. The
Horizontal Line Properties dialog box appears, in the Size area, type 500
and click on the radio button next to Pixels. Click on the down arrow next to
the color box, choose a color.
5. Click OK. Delete any extra white space you may have on your page. Save your work and preview it in the browser. Great Job!! Let’s take a short 5 minute break.
Inserting WordArt and AutoShapes
1. Go
into FrontPage, your cover.htm file should be open.
2. Go
to the Menu bar and click on View, Toolbars, if there is not a check by Drawing,
click on it. If there is a check by Drawing click on your page to get rid of
the menu.
3. At
the bottom of your screen you should have a Drawing Toolbar
4. Highlight
your name, or title of the page and hit the Delete key.
5. Click
on the Insert WordArt icon, 
6. In
the WordArt Gallery, double click on the design that is in the first column,
third row to select it.
7. Type
your name, or whatever you would like as the title of your web site, in the
window. You can change the font and the size in here. Click OK.
8. Your
WordArt should have little boxes around it showing that it is selected, if it
doesn’t, single click on it. The WordArt Editor should appear. Click on the
icon that looks like a paintbrush and a paint bucket.
9. In
the Fill section, click on the down arrow next to the Color box. Click on Fill
Effects.
10. Click
on the down arrow next to Color 1: click on More colors. Click on the Custom
tab. Red: Should be 255, Green:
should be 228 and Blue: should be 4.
11. Click
OK.
12. Click
on the down arrow next to Color 2: click on More colors. Click on the
Custom tab. Red: Should be 22, Green: should be 37 and Blue:
should be 104. Click OK.
13. Under
the Shading Styles section click on the radio button next to From center.
Click OK.
14. In
the Line section, click on the down arrow next to Color: . You should see a box
that is the same blue we used for the fill color, single click on it. The
Dashed: line style should be a solid line and the Weight: should be set at 1.5
pt. Click OK.
15. On
the WordArt Editor there is a button that has Abc on it, this is the WordArt
Shape Icon. Click on it and then click on a shape you want your text to be.
If your text becomes smaller, click on the boxes surrounding the text and drag
them up.
16. Click
your mouse so that the cursor is at the end of the graphic you just made, hit
Enter.
17. Go
back to the Drawing Toolbar and click on the down arrow next to the AutoShapes
button. Click on Basic Shapes and then click on one of the shapes.
18. Place
your mouse in the white area of your page, left click and hold down the button,
drag your mouse down and to the right. Your shape should appear.
19. Double
click on the shape, change the color and line, click OK. If the image
covers any of your text, put your cursor at the beginning of the line of text
and hit Enter.
20. Save
your page and preview it. Your image is
probably not where you would like it to be, go back to FrontPage.
21. If
the image is not selected, single click on it, your mouse pointer should be a
four sided arrow, click and drag your image to the location you would like it
to be.
22. Save
your page again.
Adding Animation
1. Click
on the Image that we created as the title of the page,
2. Go
to the Menu bar and click on Format, then on Dynamic HTLM effects… The DHTML Effects editor will appear on your
screen.
3. Click
on the down arrow next to the On: box. It currently says, <Choose an
event>.
4. Choose
Page Load from the menu.
5. You
should now see that the box next to the Apply window has <Choose an
effect> in it. Click on the down arrow next to the Apply window.
6. In
the drop down menu, click on Spiral.
7. Click
the X in the upper left corner of the DHTML Effects window to close it.
8. Click
on Save.
9. Click
on the Preview in Browser button.
10. Hit
Refresh if you did not see the animation.
Inserting Hover Buttons
1. Go
back to FrontPage, to the schedule.htm page by clicking on a window tab, just
above the Editor window, it should still be open. If not, go to the Folder List
and double click on it.
2. Go
to the bottom of the page and highlight the text Home, hit the Delete
key.
3. Go
to the Standard Toolbar, click on the Web Components Icon 
.
4. Under
Component Type , click in Dynamic Effects.
5. Under
Choose an effect, double click on the Hover Button icon.
6. In
the Button text area type: Home. Hit the Font button and change the font
size and color and click OK.
7. Click
on the Browse button next to the Link to area. Find the cover.htm file and double click on
it.
8. Click
on the down arrow next to the Button color: box and choose the
gold color that we used in the web page. Use the down arrow next to the
Effect color box and click on one to choose it. You can also change other
options.
9. Click
OK. Save your work.
10. Click on the Preview tab to see how
your button looks. If you like how it looks, insert hover buttons for the rest
of your links, replacing the text navigation. Click on the
Using Bookmarks
1. Open
Internet Explorer and go to http://www.departments.dsu.edu/news/spotlight/01/dsu_commencment.htm
2. Place
your curser over the text, hold your mouse down and highlight all of it. Once
the text is highlighted, go to the Menu Bar, click on Edit, Copy.
3. Now,
click on Start, Programs, Accessories, Notepad. The Notepad Editor should
appear on your screen. Click on Edit ,Paste. Use your mouse to select all of
the text, go to Edit, Copy.
4. Go
back into FrontPage. Open the schedule.htm page. Click your mouse to the right
of the Back to Home link, hit Enter, then hit Ctrl+V. Notice that the text has
been pasted but that it also has no formatting properties to it.
5. Go
to the Formatting Toolbar and click on the Align Left icon. Click on the
Increase Indent icon twice. Click on the Save icon.
6. Move
your cursor to the bottom of the text, hit Enter. Type Top. Go to the
top of the screen, highlight the Schedule title text, go to the Menu Bar, click
on Insert, then click on Bookmark…
7. Leave
the default setting and click OK. Save your page.
8. Go
back to the bottom of your screen and highlight Top.
9. On
the Standard Toolbar, click on the Insert Hyperlink icon.
10. Click
on the Bookmark Button, double click on Schedule and click OK.
11. Save
your work. Click on the Preview in Browser .Go to the bottom of your screen and
click on Top.
Finding and Using Custom Backgrounds
1. In
Internet Explorer, go to http://www.boogiejack.com/free_graphics.html
. This is just one of millions of sites which have free backgrounds.
2. Scroll
down and click on a link to a background page.
3. Browse
the thumbnails for an image that you like. Once you find one, right click on
it.
4. Click
on Save Picture As.
5. In
the Save Picture window, save your background to your disk or to someplace on
your C: /drive that you will remember.
6. In
the File name: box, type background. Click Save and close the browser window.
Go back to FrontPage.
7. Click
on the folder images in the Folder List.
8. Go
to the Menu Bar and click on File, Import, and Add File…
9. Find
the background image that you saved and double click on it. Click OK.
10. Click
on the New Page icon, a blank page should appear in the Editor window.
11. Right
click anywhere inside the page, click on Page Properties.
12. Click
on the Background tab. In the Formatting section, click on the check box next
to Background picture.
13. Click
on the Browse… button. In the Select Background Picture window, Find the images
folder and double click on it, .
14. Double
click on the background picture you saved.
15. Click
OK. Your background should have changed.
16. Click
on the Save icon, make sure you are in the workshop folder. Name the page
background.htm, click Save.
17. Click
on the Preview in Browser icon.
Publishing a Web Site
* Publishing your web site to a zip disk, a
disk or your hard drive is a very important thing to do. If you publish your
web often you do not have to worry about making mistakes or deleting things
that you still want to use.
1. Go
back to FrontPage.
2. Insert
a zip disk into the drive, if you have a disk go ahead and use that. If you
don’t have a zip disk or a disk, go ahead and save it to the C: drive.
3. Go
to the Standard Toolbar and click on the Publish Web icon 
.
4. Click
on the Browse button. Find your zip disk, disk or spot on your C: drive where
you want to save your web to. Click on the New Folder icon and then rename the
folder.
5. Click
on Open.
6. You
will get a prompt about converting the web, click OK.
7. Your
Publish Web window should look similar to this image:
8. Click
on Publish. You may get another prompt, just click continue.
9. Click
Done and your page is saved.
Changing Permissions
1. In
FrontPage, go to Tools, Server, Permissions. The Permissions dialog box will
appear. Click on the Users tab.
2. Click
on the Add button. Scroll down the list on the left and find the user id of the
person you want to give access to and double click on their name. Their name
should appear on the right side of the list.
3. In
the Allow users to section, click on the radio button next to Author and browse
this web. Click OK. Click OK again.
4. Close
the background.htm window and click on the cover.htm window tab. Click on the
Preview in Browser button. Click on the different links and test out your new
site.
Web Design Resources
This section of the
tutorial was designed to give you a few more tools you can use to create
effective and well planned out web sites. There are millions of sites like
these on the web, I have just chosen a few of my favorites. Enjoy!
¨ Web
Design-
1)
Use it- http://www.useit.com/
2)
Usable Web- http://www.usableweb.com/
3)
Cool Homepages- http://www.coolhomepages.com/
¨ Tools
and Utilities-
1)
Web Master Station- http://www.exeat.com/index.shtml
2)
Web Site Garage- http://www.websitegarage.com
¨ Computer
Tutorials-
1)
Web Design Guide: http://www.dreamink.com/tutorials.shtml
2)
Training Tools: http://www.trainingtools.com/
CONGRATULATIONS!!!!
You have completed the tutorial!!!
Whew, you are done! How do you feel? Are you ready
to tackle the web? Good Luck and let us know if we can do anything to further
assist you.
|
|
E-Education Services
201A Karl E. Mundt Library
Email: dsuinfo@dsu.edu Phone: (605) 256- 5049 |
