Microsoft FrontPage
2003
Information Technology Services
Microsoft FrontPage
Table of Contents
Information Technology Services...1
Kennesaw State University... 1
Editing the Home Page... 4
Editing Pages... 5 Adding Pages ...5 Background... 6 Creating a Link... 7 Internal Link... 7 External Link... 7 Target Link... 8 Inserting a Picture... 8 Using Tables... 9
Publishing your web site using SSH - Secure Shell FTP Client...11
Creating a New Web Site
If you do not already have an existing Web Site, then you will need to create a new one. If you already imported an existing site on the previous page, then skip this section.
1. Click on File→New.
2. From the New Task Pane (as shown at the right) click on the One page Web site link.
3. From the Web Site Templates window that opens, choose One Page Web Site.
4. Click the Browse button to specify the location of the new Web site.
6. Click the Create New Folder button.
7. Enter a name for the folder (e.g., My Web Site). 8. Click OK.
10. Click OK.
Editing the Home Page
The image below shows the new web site structure:
Editing Pages
To open any of your existing pages, double-click on the name from the Folder List and edit as desired (to add links to new pages that you make for this class, for example).
Adding Pages
Background
At some point in the web design process, you may want to change the
colors/background of the web page. In order to access the background settings, click on Format → Background. The different options of this section are:
• Background picture: If you want to use a picture as the background for the page, check this box. Then, click the Browse button on the right to select the picture that you wish to use. It is important to keep in mind how background pictures work when selecting an image to use:
Background pictures are displayed at their “normal” size, and cannot be “stretched” to cover the whole page, but instead they are “tiled” – one copy of the picture is put on the screen, then if there is more room, another copy of the picture is displayed, and this continues until the whole screen is covered. In order to make text on the page readable, it is important to choose a picture
that is fairly uniform in color.
• Colors: This section sets the default colors for various elements of the web page: Background: If you do not have a background picture selected, this color will
be the background of the page. Even if you are using a background picture, you should still choose a background color that contrasts with the text colors just in case the background picture cannot be loaded for some reason.
Text: This setting determines the default color for text. Text color can still be changed by selecting text and setting the color on the Formatting Toolbar, but this selection determines the base color.
Hyperlink: This selection determines the color of hyperlinks.
Visited hyperlink: Once a hyperlink has been followed, it changes to this selection’s color.
Creating a Link
Internal Link
An internal link is one that points to another page within your own website – in other words, to the pages that are in the left “Folder List” bar that lists all of your web pages. In order to create an internal link:
1. Highlight the text that you want to make into a link. 2. Click on Insert → Hyperlink.
3. Select Existing File or Web Page from the Link to section. 4. Select Current Folder from the Look in section.
5. Click on the file that you want to link to. 6. Click OK.
**Note: When linking to document files on your website (Word, Excel, etc. files), you must first copy the files into your web site folder.
External Link
An external link is one that points to any webpage that is not within your own website. In order to create an external link:
1. Highlight the text that you want to make into a link. 2. Click on Insert → Hyperlink.
3. Select Existing File or Web Page from the Link to section. 4. Select Current Folder from the Look in section.
Target Link
In most cases, a web page should require very little or no scrolling. However, there are times when a web page must span several screens. In such cases, it is best to set up links within the web page itself so that the user can simply click to get to certain sections rather than having to scroll through looking for the desired information. Setting up a web page to do this takes two steps: setting up the targets, or “bookmarks”, to point to, and setting up the links to point to the targets.
Setting up bookmarks:
1. Put the cursor at the location that you want to refer to. 2. Click Insert → Bookmark.
3. In the Bookmark name field, enter a name for the bookmark.
4. Click OK.
5. Repeat this process as needed. Setting up the links:
1. Highlight the text that you want to make into a link. 2. Click on Insert → Hyperlink.
3. Select Place in This Document from the Link to section. 4. Click on the bookmark that you want to link to.
5. Click OK.
Inserting a Picture
When you’re adding pictures to your web page from an outside source, such as the Internet or digital photos, you must insert the picture, rather than just copy and paste. Otherwise, when you publish the web page to the Internet, the picture will not appear.
Using Tables
Tables serve a number of purposes in web pages. Of course, they are often used to provide tables of data and information. However, because of the way that images are treated in web pages, tables are often used to position images and text. For example, say you wanted to insert a picture and write information to its right. Without a table, this is difficult; however, using a table makes it an easy task.
To insert a table:
1. Click on Table → Insert → Table.
2. From the Insert Table form, select the details about your table. 3. Press the OK button.
• Rows and Columns – Indicates how many
rows/columns will be in the table
• Alignment – If the table does not span the whole page, how it will be aligned (against the left, right, or in the center of the page)
• Float -- Changes the way text and other elements in the Web page flow around the table, if the table is not as wide as the Web page.
• Cell Padding – Indicates how much space to put between the contents and inside borders of cells in the table.
• Cell Spacing – Indicates how much space to put between cells in the table.
• Specify width -- Sets the width of the table to a value you specify. You can specify the width in pixels or as a percentage of the width of the Web browser window. Un-checking this check-box will make the table’s width adjust to fit the contents of the table
• Specify height -- Sets the height of the table to a value you specify. You can specify the height in pixels or as a percentage of the height of the Web browser window.
• Borders
Size – Indicates the thickness of the border (in pixels) – zero (0) indicates no visible border.
appear. Collapse table border Renders the borders of cells in the table as a single line instead of a pair of lines with space between them.
Light border -- Changes the color of the left and top borders of the table and the right and bottom borders of cells in the table. By applying light and dark colors to these borders, you can create a three-dimensional effect for the table. Dark border -- Changes the color of the right and bottom borders of the table
and the left and top borders of cells in the table. By applying light and dark colors to these borders, you can create a three-dimensional effect for the table.
• Background
Color Changes the background color of the table. In the Color box, click the color you want.
Use background picture Adds a graphic to the background of the table. In the box, type the path and file name of the graphic file, or click Browse to locate the file.
Browse -- Click to select the file for the graphic you want to add as a background for the table.
Properties Click to change the format and other settings for the background graphic of the table. This option is available only if you already added the background graphic to the table.
Publishing your web site using SSH - Secure Shell FTP Client
The Secure Shell FTP client is used to transfer files from one computer to another. This is especially useful when creating or updating web pages. The main reason that it is needed is that the creation and editing of web pages is usually not done on the web server but on a desktop or workstation computer. When the creation or editing is done to files on the local workstation, then the files need to be transferred to the web server.
SSH is available as a free download from the following website:
https://its.kennesaw.edu/downloads/ After downloading and installing SSH, you are ready to use it.
To use SSH Secure Shell FTP:
1. Start the SSH Secure Shell FTP client program.
2. Click on the Quick Connect button on the main toolbar. If you get an error message complaining about a file that cannot be found, just ignore it and click OK.
3. Enter the hostname, which would be students.kennesaw.edu
4. Enter the username, which would be your NetID (same as WebCTID) 5. Leave the Port Number and
Authentication Method as they are. 6. Click on Connect
7. Click the Yes button on the Host Identification dialog box.
You will be asked for a password. Enter the password for your NetID, and click OK. Note: If you prefer to store the above information for future use on your computer, you can start by clicking on the Profiles button, and saving the host name and login information under a name of your choosing.
On the left (local computer) side of the screen, navigate to the location that contains your web files, or to the location that you want to save your web files at. On the right side of the screen, double-click on the html folder to open it (only files in the html folder can be seen from the Internet). Two useful buttons for navigation:
On the local computer side, the home button takes you to the drive selection area on your local computer (where you can choose a disk, flash drive, or a folder on the hard drive. On the remote computer side, this button takes you to the starting directory.
The up button takes you “up” one level on the directory structure.
You can drag and drop files from one side to the other as you wish. Sending a file from your computer to the server is called uploading and getting a file from the server is called downloading.
To download a file from the server, drag it from the right side (remote) and drop it on the left side (local), or right click on the file and then click download.
Importing an Existing FrontPage Web Site
The following instructions show how to bring an existing web site into FrontPage to be edited. Importing a web site using this feature in FrontPage only works if you originally constructed the site using FrontPage; otherwise you must use the SSH FTP Client discussed previously to download your web site files.
1. From the FrontPage menu bar, click File→Import.
2. In the Import Web Site Wizard type the location of your current website in the Web Site Location box. If you are importing your Students website, the location should be “students.kennesaw.edu/~NetID” where the “NetID” is actually your NetID.
5. Click the arrow in the Look in box and select the drive in which you want to save your Web site.
10. Click Next.
11. On this screen, leave the default options and click Next. 12. On the final screen, click Finish.
