FRONT PAGE TUTORIAL
The good news: Frontpage is a very cool tool for creating professional looking websites.
The bad news: It’s easy to mess up if you don’t understand basic website construction and linking concepts.
Contrary to what many believe, Frontpage is NOT EASY for the novice and if not done EXACTLY right, nothing on their website will work and can be very difficult and take a very long time to fix.
Unfortunately, many tutorials for Frontpage assume that the website is going to be started and completed on one computer so everything works by just using the Frontpage default settings. However, most students working on Frontpage projects will have to move their project from one computer to another. This creates most of the problems students have with broken links.
To be successful, you must READ AND FOLLOW each of the steps below VERY CAREFULLY and in the order given.
If, at any time, you don’t understand how to do any of the following steps, it’s best to stop and get help before continuing.
BEFORE STARTING READ AND DO THIS FIRST.
Get everything that will be used on your website, except for the pages themselves which haven’t been created yet, together in one place on your computer.
Create a new folder on ONE storage media (preferably on a USB JumpDrive) large enough to hold ALL of the parts of your website. This includes images, documents, video and audio clips.... EVERYTHING!!
Remember, if you can't get everything onto a single floppy disk, you can't use floppy disks. If you plan on using a CD-R or CD-RW (THIS IS NOT RECOMMENDED) you must move ALL files from the CD-R to the Computer's Hard Drive EVERY TIME you work on any part of your site, then resave EVERYTHING back to the CD-R when you finish.
Name the folder whatever you want but for this tutorial we named the folder, myweb.
The name of this folder isn't important. What IS important is that you put all of the pieces and parts of your website content INTO this folder.
Move all of the content for your site into the myweb folder you just created.
Again, this includes all word documents, pdf files, media clips like movies or sound files, pictures that will be inserted onto the web pages, etc.
Warning! Again, you can not put parts of your website on different media or save them to completely different places on your computer. For example, you can’t save the pages for your site on one floppy disk, images (or more pages that are part of your website) on another floppy disk, media (like videos and sound) on a CD or on the desktop, etc. If you do this, the links you create between pages or to documents or media on your site WILL NOT WORK!
If you don’t understand how to do the above, DO NOT CONTINUE! GET HELP IMMEDIATELY BEFORE CONTINUING BECAUSE YOUR WEBSITE WILL NOT WORK AFTER YOU UPLOAD IT TO A WEB SERVER!
PLANNING - CREATE A SITE FLOW CHART
Create a flow chart that shows how all of your pages will be linked to one another as well as how they will be linked to documents and videos. Here's a sample website plan:
The above site layout shows:
- A Home Page with navigation links directly to 2 pages, page 1 and page 2.
- 2 pages with different links from each of the pages to documents and videos
NOW YOUR READY TO CREATE A WEBSITE
Your website is a collection of web pages, images, documents, media clips and other files and sometimes sub-folders that can hold more pages, images, documents, etc.
In the previous step, you already gathered together all of the content for your site in the myweb folder you created.
Now you need to create the web pages, save them into the same myweb folder and finally, create links between the pages you create and to the content you placed inside the myweb folder.
To get started open Frontpage 2003 then:
- Go to File > New. Click "More web site templates" in the right column.
- In the General Tab’s Web Sites list, select Empty Web Site.
- Under Options - specify the location of the new Web site:
Click on the Browse button then select myweb folder you just created (hopefully on your USB JumpDrive).
Create your first web page (This page will become your “home page”)
1) Click File > New
2) In the “New” Panel under New page, select Blank Page
3) The Design Window will open a blank web page with new_page_1.htm on the tab above the page.
4) Type in a Title for your page at the top of the page. You can resize the letters, change their color and center them on the page if you wish. The tools are exactly the same as the tools you’ll find with Microsoft Word.
Save the page as your “home page”
1) To save this blank page to become your “home page”:
a) Click File > Save As
A Save As window will open.
b) Click on the Change title button and type in the title of the page in the window. You can type something like J.Doe’s Home Page. This “title” is the name this page will be be given if someone bookmarks the page…
The page Title has nothing to do with the “file name” for the page. Don’t get them confused!
c) Click OK : The new Page title, eg: J.Doe’s Home Page, will appear in the Save As window
d) The File name: should be the default, index.htm. If it isn’t, change it to index.htm
(make sure that the text is all lower-case. Any Upper case letters in this filename will prevent this page from opening after you upload it to the webserver).
Do NOT name this page, “homepage” or “homepage.index” or anything other than just “index.htm” (all lowercase letters). If you do, the page will not open when you upload it to the server!
e) Click Save
f) Notice that the tab above the page in the design window now reads, index.htm instead of new_page_1.htm
Publishing Your Web Site to the Kent Personal Server
Warning: Using Frontpage Publishing features may erase everything you have saved on your server if you aren't very careful. If you already have files or webpages on the server, you will be asked if you want to delete these files. Always reply NO if you want to keep them on the server.
The SMS recommends "safer" ways to "publish" your Frontpage site to the server with less risk of erasing existing files or folders. One of these is to use your Web Browser for "publishing".
Publish using your Web Browser
- Open a web browser, Internet Explorer works best. Cookies and Pop-ups must be allowed. Firefox (Mozilla) may not work depending on how much "protection" you set it up with.
- Type in the following URL: ftp://research.kent.edu and hit the <Enter> key
- A "Log on as" window will open. You need to enter your flashline user name and password. Click the Logon button.
The IE browser will open a new page. You "should" see a folder named public_html.
If you don't have this folder contact the SMS for help. You will need to create this folder.
- Assuming you do see a public_html folder, double click on the public_html folder to open it. If you haven't created a web page before, this folder should be empty.
- Resize the webpage so that there's room to open your myweb folder next to the web page.
- Open the myweb folder on your USB JumpDrive on your desktop by double clicking on it and resize/position it so that you can see its contents AND the webbrowser window.
- Drag and drop all of your web pages, documents and media files from inside the myweb folder on your USB JumpDrive over to the open public_html folder in the IE Browser.
To view your site on the Kent Personal Web Server:Open your browser and enter your URL: www.personal.kent.edu/~username
The webpage (your home page) with the filename, index.htm, will automatically open.