Microsoft FrontPage 2003

Transcription

1 Information Technology Services Kennesaw State University Microsoft FrontPage 2003

2 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 Importing an Existing FrontPage Web Site... 13

3 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. 5. Click the arrow in the Look in box and double-click the drive in which you want to store your Web site. 1

4 6. Click the Create New Folder button. 7. Enter a name for the folder (e.g., My Web Site). 8. Click OK. 9. Click the Open button. The location of your Web site now appears in the location box. 2

5 10. Click OK. After following these steps, FrontPage creates a new web site folder, as well as a file called index.htm which will be your Home Page. In the next section, we will see how to add various elements to the index file. 3

6 Editing the Home Page The image below shows the new web site structure: Double-click on the index.htm file in the Folder List or the Web Site window. The Web Site window now displays your blank index.htm file. 4

7 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 To add new pages to your website, click File New, and then select Blank Page from the Task Pane 5

8 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. Active hyperlink: When a hyperlink is actively open in another page, the link changes to this color. 6

9 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. 5. Type in the full address (starting with in the Address field. 6. Press OK. 7

10 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. 1. Put the cursor where you want the picture to go. 2. Click Insert Picture From File. 3. Navigate to and click on the picture you want to insert. 4. Click OK. 8

11 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. Unchecking 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. Color -- Changes the color of the table border and the borders of cells in the table. If you apply a light border or a dark border to the table, this color doesn't 9

12 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. Set as default for new tables Automatically applies the current layout, border, and background color settings to new tables. 10

13 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: 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. Once the connection is made, the program s screen should be split in two. The left side shows the contents of the local computer (including disks and flash drives), and the right side shows the contents of your space on the students.kennesaw.edu server. 11

14 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. To upload a file to the server, drag it from the left side (local), and drop it on the right side (remote), or right click on the file and then click upload. 8. To end the FTP session, click the Disconnect button. Viewing Your Website In the Address Bar of your web browser type: 12

15 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. 3. Click the Next button. 4. Click the Browse button at the right of the Local copy location box. This is the place where you will download and save a copy of your existing web site files. 13

16 5. Click the arrow in the Look in box and select the drive in which you want to save your Web site. 6. Click the Create New Folder button. 7. Enter a name for the folder (e.g., My Web Site). 8. Click OK. 9. Click the Open button. The location of your Web site now appears in the Local copy location box. 14

17 10. Click Next. 11. On this screen, leave the default options and click Next. 12. On the final screen, click Finish. After following these steps, FrontPage will obtain a copy of your website that you can see from the Folder List tree on the left of the program. 15