Intermediate Web Design with MS FrontPage

Transcription

1 Intermediate Web Design with MS FrontPage Objective 1: Set up MS FrontPage Setting up FrontPage Correctly This should only have to be down the first time you use FrontPage on a computer. In order for FrontPage generated web sites/pages to work on the GPC web server the following changes must be made prior to creating any web pages using FrontPage: To Setup Page Options 1. Click Tools on the Menu bar, and then click Page Options. 2. Click the Compatibility tab. 3. From the Browsers drop down list select Both Internet Explorer and Navigator. 4. From the Browser versions drop down list select 4.0 browsers and later. 5. From the Servers drop down list select Apache server. 6. Uncheck the Enabled with Microsoft FrontPage Server Extensions check box. 7. Click the HTML Source tab. 8. In the General section make sure that the Preserve existing HTML radio button is selected. 9. Click OK. Training 1 December 19, 2002

2 To Setup to Recognize Files with PHP3 or PHP Extensions 1. Click Tools on the Menu bar, and then click Options. 2. Select the Configure Editors tab. 3. Scroll throught the list of file types. If you would like to edit what program will open to edit a particular file type, click the file type and then click the Modify button. 4. In the Editor name box enter Frontpage. 5. In the Command box enter C:\Program Files\Microsoft Office\Office10\frontpg.exe 6. Click OK. Then click OK again. 7. If your file type is not listed, click the Add button. 8. Enter your file type i.e. php3 in the File type box. 9. Enter FrontPage in Editor name box. 10. Enter C:\Program Files\Microsoft Office\Office\frontpg.exe in the Command box. 11. Click OK, FrontPage will now recognize php3 when opening a file with this extension. 12. Repeat for any other extension you are using (i.e., php) 13. Click OK. 14. Close FrontPage. Objective 2: Open a page to begin editing. To Open a Web Page with in an Exiting FrontPage Web 1. Click File on the Menu bar. 2. Then click Open Web. 3. Use the Look in drop down list to locate your FrontPage Web. Click the Web once to select it. 4. Click Open. 5. Then click the Folder button on the View bar. 6. Locate the page and double click it. Open an Individual Web Page Without Opening a Web 1. Click File on the Menu bar, and then click Open. 2. Use the Look in drop down list to locate your page. 3. Click the page once to select it, then click Open. Training 2 December 19, 2002

3 Objective 3: Create bookmarks. Bookmarks A bookmark is a feature of FrontPage that allows you to create links on your page to sections within that same page. Bookmarks are helpful if you have a lot of information on one page or the pages in your site tend to run long, targets are an excellent way to make your user interface a little more friendly. To Create a Bookmark 1. Place your cursor in the location that is going to be the destination of your bookmark. 2. Click Insert on the Menu bar, then click Bookmark. 3. In the Bookmark name box, enter a name for the bookmark. Be sure to observe web naming conventions. 4. Click OK. To Link to a Bookmark 1. Highlight the text that is to become a link. 2. Click the Insert Hyperlink button on the Standard Toolbar. 3. Click the Bookmark button on the right side of the window. 4. Select the bookmark you wish to link to then click OK. 5. Click OK again. Objective 4: Create a hyperlink using a image. To Create a Hyperlink using an Image 1. Click the image once to select it. 2. Click the Insert Hyperlink button on the Standard Toolbar. 3. Proceed as necessary to create a link. Then click OK. See the Beginning Web Design with MS FrontPage handout for more information on creating links. Training 3 December 19, 2002

4 Objective 5: Modify properties of images. To Add Alternate Text to an Image 1. Click the image once to select it. 2. Click Format on the Menu bar, and then click Properties. 3. Click the General tab on the Picture Properties window. 4. In the Alternative representations section enter a brief description of the image and why it is there in the text box. 5. Then click OK. To Remove the Border from an Image 1. Click the image once to select it. 2. Click Format on the Menu bar, and then click Properties. 3. Click the Appearance tab on the Picture Properties window. 4. In the Layout section change Border thickness to 0 (zero). 5. Click OK. To Change Text Wrapping Around an Image 1. Click the image once to select it. 2. Click Format on the Menu bar, and then click Properties. 3. Click the Appearance tab on the Picture Properties window. 4. In the Wrapping style section, click the appropriate layout: None, Left, or Right. 5. Click OK. Training 4 December 19, 2002

5 Objective 6: Create and modify tables. To Create a Table 1. Place your cursor where you would like to insert the table. 2. Click Table on the Menu bar, point to Insert, and then click Table. 3. In the Size section of the Insert Table window, enter the number of columns and rows you need. 4. In the Layout section, click the Alignment drop down list arrow and choose where the table should be aligned: left, center, or right. 5. In the Border size box enter a value. The higher the value the thicker the border around the table. Entering a 0 (zero) will remove the border. 6. In the Cell padding box enter a value. The higher the value the greater the amount of space within a cell. (Think of this as the cell s margin.) 7. In the Cell spacing box enter a value. The higher the value the thicker the border lines of cells within the table. 8. Make sure the Specify width check box is selected. Then in the text box enter the percentage width of the table. 100% means the table will take up 100% of the window, 80% means the table will only take up 80% of the window. Make sure the In percent radio button is selected. 9. Click OK. To Add Rows or Columns to the Table 1. Place your cursor in the row or column that is relative to the position of the new row or column. 2. Click Table on the Menu bar, point to Insert, and click Rows or Columns. 3. Choose either the Rows or Columns radio button. 4. Enter the number of Rows or Columns you wish to insert. 5. Choose the I. The location is relative to the position of your cursor in the table. 6. Click OK. Objective 7: Familiarize yourself with the HTML View. FrontPage is a WYSISYG (What You See Is What You Get) editor used to create web pages. A web page is simply a text document with HTML code written in it. FrontPage keeps us from needing to write HTML code ourselves. It is writing the HTML code for us. It is sometimes necessary for us to be able to view and edit the actual HTML code. To View HTML Code 1. Click the HTML tab at the bottom of the page in the FrontPage window. Training 5 December 19, 2002

6 Example of HTML Code: Most HTML tags are inclusive. You need both a start tag < > and a closing tag </ >. Together, these are a tag pair. If you don t type the closing tag, or type it incorrectly, the formatting you started with the beginning tag will continue throughout the whole rest of your document. Some tags can stand alone. For example, the line break tag (<BR>) stands alone. You just type it in where you want the line to end and any text written after that will be on a new line. In addition to tags, there are attributes. They can be inserted within an opening tag to add desired characteristics to an image or portion of text. HTML tags are not case sensitive. You can write your code however you want. The convention is to write HTML code in all caps so the code stands out from your text, but this is really just a matter of personal preference. Some websites with HTML Codes listed: Objective 8: Publish your website via the SAMBA connection. The SAMBA Connection is a special directory provided by Educational Technologies to allow college employees to publish web pages to GPC's web server. SAMBA is an acronym that describes a protocol that allows for a PC to establish a logical drive connection to an account. Files are backed up daily by the Educational Technologies. The SAMBA connection is only to be used for web page design and development not file storage. Training 6 December 19, 2002

7 Requests for SAMBA connections are made by sending a request to the training department at: training@gpc.edu. An active GPC account is required to set up the connection. To Create the SAMBA Connection 1. Right click on My Network Places on your desktop. 2. Then click Map Network Drive. 3. Do not change the Drive letter that automatically appears. 4. In the Folder text box, enter \\ \usernamewww 5. For example I would enter: \\ \tadkinswww 6. If you are in lab situation clear the Reconnect at login check box. If you are using your own secure computer leave the check in the check box. 7. Click Finish. 8. In the Enter Network Password window, type your username in the Connect As box and enter your password in the Password box. 9. Click OK. To Publish your Web Pages to the Web Server via the SAMBA Connection 1. Dou ble click My Computer on your desktop. 2. Click the Folders button on the toolbar. 3. On the left side of the Window, click the plus (+) sign next to My Computer. This should list all the drives you have access to including but limited to your hard drive (c:), your floppy drive (a:), and your SAMBA (thofrichwww on gpc (h:)). 4. Locate the folder/web containing all your website related files by clicking on the appropriate drive letter/folder on the left side of the window, then click and drag the folder/files from the right side of the window to your SAMBA connection on the left side. Training 7 December 19, 2002

8 Objective 9: Understand your website address or URL. Once your web page files are saved on your SAMBA connection your files are published and accessible over the World Wide Web! Your URL (the web site address) starts with The next part of your URL will be /~login. Your login is the same as the first part of your account (the part For example, As long as you have a file called index.htm or index.html on your SAMBA connection, your web address (URL) is: If you wish to open a file other than index that is saved on your SAMBA connection the address is: So the final URL is For example, Once you publish your page, it s a good idea to test all your links before you start giving out the URL. Objective 10: Get your web site listed on the Current Student Portal page: To List your Web Site on the Current Student Portal 1. Go to using either Netscape or Internet Explorer. 2. Enter your username and Password and click OK. 3. Fill out the form as shown. 4. Then click the Add Faculty button. Training 8 December 19, 2002