Creating a Web Site with Publisher 2010

Transcription

1 Creating a Web Site with Publisher 2010 Information Technology Services Outreach and Distance Learning Technologies

2 Copyright 2012 KSU Department of Information Technology Services This document may be downloaded, printed or copied for educational use without further permission of the Information Technology Services Department (ITS), provided the content is not modified and this statement is not removed. Any use not stated above requires the written consent of the ITS Department. The distribution of a copy of this document via the Internet or other electronic medium without the written permission of the KSU - ITS Department is expressly prohibited. Published by Kennesaw State University ITS 2012 The publisher makes no warranties as to the accuracy of the material contained in this document and therefore is not responsible for any damages or liabilities incurred from its use. Microsoft product screenshot(s) reprinted with permission from Microsoft Corporation Microsoft, Microsoft Office, and Microsoft Publisher are trademarks of the Microsoft Corporation. 2

3 Information Technology Services Creating a Web Site with Publisher 2010 Table of Contents Table of Contents Getting Started... 4 Editing the Home Page... 5 Editing Text... 5 Editing and Inserting Graphics Text... 5 Replacing an Image... 6 Inserting an Image... 6 Inserting a Table... 6 Inserting a Hyperlink... 8 Inserting Links within Your Site... 9 Inserting Additional Pages Deleting Pages Inserting a Navigation Bar Saving the Website Publishing the Website with SSH (Secure Shell FTP Client)

4 Getting Started Publisher gives you a variety of web site design templates to choose from. A template contains color elements, graphics, and text formatting and placeholders for the pages that will make up the website. You can then modify the pages as you like. 1. To get started, Select New in the File tab and type Web Site in the Search for templates box, (See Figure 1). Figure 1 - Getting Started 2. Select one of the Office.com Templates. For this training exercise, we have selected the Web site (Tabs design) template (See Figure 2). Figure 2 - Selecting Templates 4

5 Editing the Home Page The Publisher window now displays your home page based on the design template that you selected. The template contains placeholder text and images which can replaced by your own text, and images of your choice. This is the first page of your Web site that visitors will see. On this page, explain your site s purpose, content, and layout. Include tips on how to move through your site and where to find key information. Change the pictures to your own pictures. 1. The Page Navigation Pane contains various pages that you will use to identify your web site function and purpose (See Figure 3). Figure 3 - Page Navigation Editing Text 1. Click the heading area and type in the heading that you want to use. 2. Click in the text area and type introductory information about your web site. 3. Click in any other areas containing text and edit as you like. 4. Format text by using the buttons on the Formatting Toolbar. Editing and Inserting Graphics You can replace the graphics that Publisher has added to the home page with ones of your own choosing, as well as insert and delete graphics. 5

6 Replacing an Image With Clip Art 1. Double-click on the image that you want to replace. Note the Picture Tools Contextual Tab opens above the Format Tab. 2. Select the Insert Tab on the menu bar and select Clip Art from the Illustrations Group. 3. The Clip Art Image Pane opens beside the right scroll box. 4. Type in a keyword for the Clip Art image you want to find in the Search for box. 5. Click the Go button. 6. From the resulting choices, click on the image that you want. The new image now replaces the previous image. With an Image File 1. Click the image that you want to replace. 2. On the Menu Bar, click Insert Picture From File. 3. Select the file. 4. Click the Insert button. 5. To resize the picture, drag one of the corners toward or away from the center. Inserting a Table Tables are frequently used in web pages for the purpose of layout and alignment. A table gives you a group of cells into which you can type text and insert images. You can make the borders of the table invisible, if you choose. 1. On the Menu Bar, click Table Insert Table (See Figure 4). Figure 4 - Inserting a Table 6

7 2. In the Table dialogue box, select the number of rows and columns that you would like in your table. You can do this by dragging your mouse vertically and horizontally down the boxes, or you may do this from the Insert Table box (See Figure 5). Figure 5 - Table Dialogue Box 3. The table will then appear in your workspace page. Note: The Table Tools Contextual Tab now appears on the menu bar and allows more formatting options for your table. 4. Move and adjust your table by using the four point arrow which is visible when you mouse over the border of your table. You can now click in the cells of the table and either type text or insert pictures (See Figure 6). Figure 6 - Adding Text or Images to Tables 7

8 Inserting a Hyperlink You can create a hyperlink from either text or an image on the page. 1. Select the text or image that you want to use for the link. 2. Click Insert Hyperlink (See Figure 7). Figure 7 - Adding a Hyperlink 3. In the Insert Hyperlink dialogue box, type the address of the web site that you want to link to in the Address box (e.g., 4. Click OK. The procedure above creates an external hyperlink---a link to another website. Publisher creates internal links (links to other pages on your website) automatically as you add new pages to your site. See the next section on inserting additional pages. 8

9 Inserting Links within Your Site 1. With your mouse select the text that you want to initiate the navigation. The text Create a Link to the Project List Page has been selected as an example below (See Figure 8). Figure 8 - Select Desired Text to Initiate Link 2. Click Insert Hyperlink. The Insert Hyperlink dialogue box will appear (See Figure 9). Figure 9 - Insert Hyperlink Dialogue Box Note: By default, Place in This Document will be selected. 9

10 3. Select the page destination you would like to link to from the available options in the list. Click OK. Page 13 Project List has been selected as an example below (See Figure 10). Figure 10 - Select Page Destination 4. The text will now appear underlined as an active link. Simply select the text and you will be directed to the destination page. Inserting Additional Pages 1. Click Insert Click the drop down arrow under Page. 2. Click Insert Page. 3. In the Insert Web Page dialogue box select an appropriate page layout for the type of content that you want on the page. 4. Click OK. Deleting Entire Pages 1. Select the page you would like to delete in the Page Navigation window. 2. Click Page Design and select Delete in the Pages group. Note: You can also right-click the page you would like to delete inside the Page Navigation window and select Delete from the available options. 10

11 Inserting Navigation Links 1. Click Web Click Navigation Bar in the Web Page Navigation group. Figure 11 Inserting a Navigation Bar 2. Select the design you would like to add from the available options and click. Figure 12 - Navigation Bar Designs 3. The selected navigation bar design will is now added to your site. You can now move the navigation bar as you would move a table, by clicking on it and dragging it to the desired location. 11

12 Saving the Web Site 1. Click File Save. Figure 13 - Saving the Web Site 2. In the Save As dialogue box, select the drive and folder where you want to save your web site files. 3. Name the file index. (The home page of a website is always named index.) 4. Click the arrow in the Save as type field and select Web Page. 5. Click Save. Publisher will save the index file, and will also create a folder called index files which contains all the images and other pages on the website. 12

13 Publishing the Web Site with SSH Secure Shell FTP Client The Secure Shell FTP client is used to transfer files from one computer to another in a secure manner. This is especially useful when creating or updating your web pages. The main reason that it is needed is that creating and editing of web pages is usually not done on the web server but on a desktop or workstation computer. When a web page is created or edited on the local workstation, then the files need to be transferred to the web server. The Secure Shell FTP (SFTP) client should be installed on all computers on campus. To access sftp on campus: If you are faculty/staff, you should be able to start sftp by clicking on your Start button, then All Programs, then SSH Secure Shell, and then Secure File Transfer Client If you are a student working at a student lab computer, you should be able to go to the Start button, then Programs, then SSH Secure Shell, and then Secure File Transfer Client. To download SSH Secure Shell FTP to your computer at home: 1. Open a web browser and go to 2. Enter your NetID and password. 3. Click the My Available Downloads link. 4. Click the Files to Download link beside Secure Shell File Transfer (SFTP) 5. Click on Agree 6. Click on Download next to Installation File to install SSH Secure Shell FTP on your computer To Use SSH Secure Shell FTP 1. Start the SSH Secure Shell FTP client program. Figure 14 - Quick Connect 13

14 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, ignore it and click OK. 3. Enter the hostname, which would be: studentweb.kennesaw.edu Note: If your web space is on the ksuweb server, (usually for faculty and staff), use: ksuweb.kennesaw.edu. 4. Enter the username, which would be your NetID. Note: If you are using the ksuweb server, you should have been given a username and password when you applied for your account. 5. Leave the Port Number and Authentication Method as they are. 6. Click on Connect. Figure 15 - Connecting to the Remote Host Figure 16 - Host Identification 7. Click the Yes button on the Host Identification dialogue box if it appears. 14

15 8. You will be asked for a password. Enter the password for your NetID (if you are faculty/staff and are using the ksuweb server, enter the password for your ksuweb username, and click OK). 9. 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 shows the contents of your space on the studentweb or the ksuweb server. 10. On the left (local computer) side of the screen, navigate to the location that contains your web files, or to the location to which you want to save your web files. 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). Note: Two useful icons for navigation: Figure 17 - SSH Secure File Transfer On the local computer side, the home button takes you to the drive selection area in your My Computer window, where you can choose a disk, flash drive, or a folder on your hard drive. On the remote computer side, this button takes you to your home directory in your account on the server. The UP button takes you up one level on the directory structure. Figure 18 - Useful Navigation Icons 15

16 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. Note: Remember, your web pages must be in the html folder on the server to be accessible from the web. This is true for both the studentweb server and the ksuweb server. To download a file from the server, drag it from the right side (remote) and drop it on the left side (local), or you can 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 you can right click on the file and then click upload. 11. To end the sftp session, click the Disconnect button. Figure 19 - Ending the sftp Session 16