Guides & Standards - Style - Resouces

Using Microsoft FrontPage 2000 for Windows

Rev. Friday, 21-May-2004 16:47:34 EDT

Before developing Web pages for the Wright State University Web site, review the following documents:

Table of Contents

1. Introduction
   
2. Personalizing FrontPage Options
   
   
   1. Setting Page Options, including HTML Coding & Browser Compatibility
   2. HTML Editors
   3. Image Editors
   4. Personal Menus
   5. Toolbars
      
   
   
3. Things to Keep in Mind About FrontPage
   
   
   1. Accessibility
   2. Server Extensions
   3. Estimated Download Time
      
   
   
4. Editing Existing Web Pages Using FrontPage
   
   
   1. Get a Copy of the Page(s) You Need to Edit Using FTP
   2. Get a Copy of the Page(s) You Need to Edit Using "Save As"
   3. Rename Your Document and Use Proper Filenames
   4. Create and Format Text 
   5. Select Font Size and Style
   6. Format Paragraphs, Lists and Headings
   7. Adding Text from Word Documents
   8. Add Hyperlinks
   9. Create a mail to link
   10. Create a link within the same page
   11. Add and Edit Images
   12. Resize and/or Resample Images
   13. Create and Format a Table
   14. Background and Link Colors
   
   
   
5. Making Your Web Pages More Effective
   
   
   1. Give Your Page a Title
   2. Use Meta Tags
   3. Use the Quick Checklist
   
   
   
6. Creating New Web Pages and Sites
   
   
   1. Create a New Web
   2. Close a Web
   3. Add Pages to the Web Site Structure
   4. Give Page a Title
   5. Re-arrange a Web Site's Structure
   6. Add Subdirectories to Your Web
   
   
   
7. Importing Existing Webs into FrontPage
   
8. Using WSU Web Templates
   
9. Importing Pages into an Existing Web
   
10. Publishing FrontPage Web Using FrontPage's Publish Feature
    
11. Creating Forms
    
12. Additional Graphics Functions
    
    
    1. Creating Image Maps
    2. Creating Thumbnails
    3. Adding Text to Images
       
    
    
    
13. FrontPage Features to Avoid
    
    
    1. Include Page Component
    2. Dynamic HTML
    3. Shared Navigation Bars
    4. Templates & Themes
    5. Hover Button
       
    
    
    
14. Resources
    
    
    1. Quick Checklist for Creating Web Pages
    2. Web Accessibility Guidelines
    3. Web Policy Guidelines
    4. Using FrontPage and Cgifile to create forms whose results are gathered in a text file.

I. Introduction

FrontPage (FP) 2000 for Windows integrates page editing, site management and publishing into one application; however you may also use FrontPage as a Web page editor and use traditional means of "publishing" your Web pages with a File Transfer Program (FTP) program. Various views within FrontPage let you look at the structure and organization of your Web site and the folders and files within it. 

You can open and edit existing Web pages into FP, and your Hyper Text Markup Language ( HTML) code will not be modified.

* Help. FrontPage offers an online Help function, which provides a list of topics and also an "Answer Wizard" where you can type a question in your own words.

* Spelling. The same spell-checking conventions are used in FrontPage as in MS Word. Adjust spell-checking options under Tools | Page Options and click the General tab.

II. Personalizing FrontPage Options

1. Setting Page Options, including HTML Coding & Browser Compatibility
   
   
   1. Personalized HTML Coding. You can change the options FrontPage uses to display HTML elements.
      
      
      1. Go to Tools | Page Options, and then click the HTML Source tab. 

         Be sure that Preserve Existing HTML is selected.

         For consistency, check the boxes to make tag names and attribute names all lowercase.  Extensible markup language (XML), an upcoming language used to separate content from presentation, requires HTML tags to be all lowercase.

      2. Go to Tools | Page Options. Choose the Color Coding tab.

         For each HTML element that you want to modify, click the arrow in the color box to select the color you want to use. Click More Colors to select or create a custom color using the Eyedropper tool or keying in the hex code for a particular color.

         The settings you choose will apply to all subsequent new pages you create.

         To reset color coding to its original default settings, click Reset Colors.

         If HTML doesn’t appear color-coded on the HTML tab in Page view, select the Show color coding check box.

   2. Browser Compatibility. This Page Options setting allows you to identify exactly which types of browsers you want your Web pages to conform to for optimum performance and functionality. You can experiment with different combinations of browsers, browser versions and servers to see which technologies are available for the option combinations you choose.

      For instance, if you include Netscape as a browser, you will lose the option to use Internet Explorer-specific technologies such as ActiveX and VBScript. If you choose 4.x browser versions, you will lose the option to use Dynamic HTML. Many Dynamic HTML effects will show up as static items in 4.x browsers.

      Opting for both Internet Explorer and Netscape browsers version 4.x or later will cover the widest range of users, but it will limit you to using a smaller portion of the technologies available. Be sure to test your pages in both browsers and both Mac and Windows platforms.

      For user statistics for Wright State's main Web server, go to http://www.wright.edu/web/stats/
      The statistics will show you what browsers and browser versions our audience is using to access WSU Web pages.

      Go to Tools | Page Options | Compatibility

      You may want to choose the following settings:
      Browsers: Internet Explorer and Netscape
      Browser Versions: 4.0 browsers and above

      Servers: Custom

      Uncheck the option "Enabled with Microsoft FrontPage Server Extensions" if it isn’t already unchecked.

      Technologies: Uncheck ActiveX, VBScript, CSS 2.0 and Active Server Pages

      Active Server Page technology is not available using our UNIX Web server, which runs Apache Server software. To use ASP, you need a Web server that supports it, such as Microsoft Personal Web Server or Microsoft Internet Information Server (IIS).

2. HTML Editors
   HTML Editors. To avoid launching Word when opening a Word document that has been saved as HTML, go to Tools | Options and, under the Configure Editors tab, uncheck "Open Web pages in the Office application that created them" at the bottom of the window. Unchecking this option guarantees that FrontPage will open any HTML file, regardless of what program created it.
   
   
3. Image Editors. You may set up FrontPage so that double-clicking on an image in one of your Web pages will open that image for editing in Photoshop or any other image editor. Go to Tools | Options and choose the Configure Editors tab. Click on the Add button, which will bring up a window for you to specify a new editor for specific types of files. In this window, put "gif" under "File Type," "Photoshop" (for example) under "Editor Name," and then the path to the Photoshop executable under "Command." (If you're not sure where the Photoshop executable is located on your hard drive, a "Browse" button is provided.) Repeat this process with "jpg" under "File Type" to open jpg files in Photoshop as well.
   
   
4. Personal Menus. Personal menus show you only the menu options you use most often. To see the complete list of options, you must mouse over the downward-pointing arrows at the bottom of the menu listing and hold your cursor in that position for a second; eventually the complete menu will "pop" up, replacing the abbreviated one.
   
   To disable Personal Menus, go to Tools | Customize and then, under the Options tab, uncheck Menus show recently used commands first. Doing so will restore the traditional Windows menu convention of showing the entire menu in response to your mouse click.
   
   
5. Toolbars. You can customize your workspace by displaying additional toolbars or changing the buttons they contain. Go to View | Toolbars and then select the toolbars you want to display. To add or remove buttons from toolbars, click Customize.
   

   Return to Top

   
   

III. Things to Keep in Mind About FrontPage

1. Accessibility. FrontPage doesn’t automatically make your Web pages accessible. Don't use multi-column and frame layouts provided as FrontPage templates. Also, be sure to include a descriptive alt attribute for all images. Right click on the image and add descriptive text that tells what the image is.
   
   Web accessibility information is located at http://www.wright.edu/web/access/
   
   
2. Server Extensions. Because the extensions create security risks when installed on UNIX systems such as our main Web server, we don’t have the Microsoft FrontPage Server Extensions installed. Without server extensions, you won’t be able to use some of FrontPage’s features and components, such as discussion Webs, hit counters, hover buttons, search forms, e-mail forms, database management features and workflow processes. Some of these options are grayed out on the Insert | Component menu to indicate they’re not available for use.
   
   
   
   To request a hit counter or an individual search function for your site, contact webmaster@wright.edu. Only one counter will be given to each department and one to each individual (for personal page use).
   
   
3. Estimated Download Time. On the status bar, FrontPage automatically displays the estimated time it will take for the current page to download over the Internet when the page is opened in a Web browser. The default measurement assumes that your site visitors will have a 28.8K modem connection. You can adjust this measurement for other common connection speeds by right-clicking the red hourglass icon and choosing another connection speed from the shortcut menu. Shoot for as fast a speed as you can -- preferably under 10 seconds on a 56K modem. The maximum connection speed using a 56 Kbps modem and a standard telephone line is usually around 40 Kbps to 44 Kbps, because of line noise and other issues.
   
   

   Return to Top

   
   

IV. Editing Existing Web Pages Using FrontPage

1. Get a Copy of the Page(s) You Need to Edit Using FTP.
   
   We strongly recommend using a file transfer protocol (FTP) program to download existing Web pages to your local drive (your hard drive or network drive) rather than using FrontPage's "Import Web" feature to get the files you need. 
   
   Follow these instructions for using FTP to download Web files.
   
   
   1. Create a folder on your local drive where you want to save the files on which you will be working. Name it the same name as the folder on the Web server that holds your Web pages. For example, if you are working on the Music Department Web site, which is located on the main Web server in a directory called "music," then name your directory/folder "music."
      
      
   2. Open your FTP program.
      
      If your Web pages are located on the main Web server, then you will use the "host name" www.wright.edu to download departmental Web pages.
      
      If you are using a Windows machine and the FTP program provided through the WSU Campus Network:
      
      
      1. Double click the FTP icon.
      2. Double click the web server.sft icon.
      3. Login using your Campus username and password. 
         
         
   3. Copy files from the Web server to your local drive:
      
      
      1. On the local drive, find the folder that you created and double click to open it.
      2. You will see files on server, but the directory on your local drive will be empty.
      3. To copy text files, be sure to transfer using ASCII mode. If you are copying images, use Binary mode. Or, you may choose Automatic as the mode, and the FTP program should correctly choose ASCII or Binary. (To change mode, go to Tools | Transfer Mode).
      4. Copy files by dragging them from the remote site to the local site.
         
         

   Return to Top

2. Get a Copy of the Page(s) You Need to Edit Using "Save As"
   
   NOTE: Using the "Save As" command in Netscape or Internet Explorer will allow you to save the HTML page as it appears within the browser. It will not save any HTML coding that is processed by the Web server prior to it displaying the page in the browser.  For example, if you use coding to show the "date last modified," the coding will not be saved -- only the date generated by the Web server will be saved.  
   
   
   1. Using Netscape or Internet Explorer, go to the page you need to edit.
   2. Under File, choose Save As. If you are using Internet Explorer, choose html only, so that images are not also downloaded.
   3. Locate the appropriate folder on your local drive and save the document.

   Return to Top

3. Rename Your Document and Use Proper Filenames
   
   It's good practice to name your new document a slightly different name (e.g. indexnew.html), so when you load it onto the Web server, you don't overwrite the existing file. This allows you the opportunity to check your revised file for errors. If it's error-free, you can rename the document to overwrite the existing document. If it has errors, you can fix them and then upload the new file again. Once it's error-free, be sure to rename it, so the old, outdated file is deleted. Following are rules for good file naming:
   
   
   1. Use all lowercase letters
   2. Use no spaces or special characters such as *, & or #
   3. Use underscore (_) or hypen (-) if you want to separate words
   4. Consistently use either .html or .htm
   5. Name your main page index.html or index.htm - these names are the default filenames which the web server "serves" if a filename is not specified.
   6. Keep names short, but descriptive and logical, especially with images
   7. Use the same name as the file you're replacing. Other sites oftentimes link to your site. If you change your file's name, existing links to your site will no longer work. Remember, it's called a "Web" because everything is interconnected. Don't break the Web!
      

   Return to Top

4. Create and Format Text.
   
   Adding text to a FP Web page is very similar to adding text in Word. The same conventions are used, and the same menu bar is used. Here are some differences:
   
   
   1. To drop down to the next line without having extra space between the lines, use Shift + Enter. This creates a <br> tag.
      
      
   2. You can find and replace text or HTML codes within a page or across a Web.
      
      
   3. You can check spelling across an entire Web.
      
      
   You can see the HTML code which creates the text changes by clicking on the HTML tab at the bottom of the FrontPage window . Choose Normal to go back to the editing view. The Preview tab allows you to see your page as it will appear in the browser

   Note: If your images are stored on the Web server, they won't appear in preview mode. If you want to see the images, you will need to set up a similar directory structure on your local hard drive as is on the Web server. Put copies of the images on your local drive in the same directory location as on the hard drive and the be sure you are using a relative path (in the HTML) to the image. For example, if your html pages are located at www.wright.edu/music/ and your images are at www.wright.edu/music/images, then your local drive should have a directory called music with a subdirectory under music called images. The path to your images (within your html page) would be images/image_name.jpg
   

   Return to Top

5. Select Font Size and Style.
   
   Font size and style should be determined by a style sheet, which is replacing the <font> tag. The WSU templates use a style sheet to set font "face" and size options.
   
   To Use the WSU Third Level Style Sheet:
   
   1. From the Format menu, choose Style Sheet Links.
   2. Select the circle next to All Pages.
   3. Click the Add button.
   4. In the URL field, type:
      http://www.wright.edu/cwis/css/third.css
      
      
   5. Click OK.

      Elements in the WSU style sheet and instructions for using them are located at www.wright.edu/web/style/cssdefinitions.html

   
   If you must specify a font size and style, follow these steps:
   
   Highlight text and use the Font Dialog Box in the top menu bar or right-click on a page (in Page View) and choose Font.

   Specify font color by clicking the down arrow just to the right of the Font Color icon in the top menu bar or by right-clicking on a page (in Page View) and choosing Font. NOTE: Be sure your font color provides sufficient contrast with the background color of the page; otherwise, those with vision impairments might not be able to read your page.

   Specify a font size by clicking the down arrow next to Normal and choosing a number. Note that these numbers represent relative sizes. This is important because the font size must be "scalable" to be accessible. People with vision impairments oftentimes increase the size of the font. If you've specified an exact size, such as 10 pt, then the font can't be increased. This is an accessibility problem. Note also that these relative font sizes may vary depending upon the browser and platform.

   Specify a font "face" by clicking the down arrow next to (default font) and choosing a font face. 

   REMEMBER, if the viewer doesn’t have the font which you have specified in your Web page, the browser will substitute its default font. This is why specifying multiple fonts is encouraged. Studies show the easiest font face to read on the computer screen is a sans serif font such as arial or helvetica. Providing a list of more than one similar type font ensures that your page will be seen in the way you have chosen. However, FrontPage includes no way to specify multiple fonts without using a style sheet. The Web Style Guide suggests using the following font set for all text:
   
   <font face="arial, helvetica, sans-serif">
   
   If you choose, you can do a search and replace for the <font face="arial"> tag and replace it with the <font face="arial, helvetica, sans-serif"> tag. You can do find/replace on one page or across the entire site.
   
   Another option is to highlight all the text on a given page once you’ve completed it, and then manually type "arial, helvetica, sans-serif" into it instead of selecting a font from the pull-down menu. We recommend the search and replace method over this, however, since the highlight and type method involves more work, is more prone to error (it’s easy to forget to do this when you finish a page), and may not reliably work for text contained inside table cells.
   
   

   Return to Top

6. Format Paragraphs, Lists and Headings.
   
   Again, formatting paragraphs (alignment, indenting) is very similar to Word. To return to the default font size, highlight the text and choose "normal."
   
   FP allows you to create a variety of list styles. Go to Format | Bullets and Numbering. You can choose among picture bullets, plain bullets and numbers.
   
   You can create headings in six sizes by either highlighting the text and then choosing a heading size on the Style drop-down menu in the Formatting toolbar, or choose the style first and then begin typing.
   

   Return to Top



7. Adding Text from Word Documents
   
   You may copy text directly from a Word document to a FrontPage document; however, the HTML coding for lists and other items may not be ideal. Also, special characters, such as "smart quotes," em dashes and diatrical marks (foreign language marks) won't display correctly. Check closely to be sure the page appears properly within the browser.If the font doesn't appear correctly, highlight the text and click onn default font in the font drop down box - even if it says default font already.
   
   
   1. Copy from the Word page and paste into the "Normal" view within FrontPage.
   2. Adjust spacing if necessary.
      
      

   Return to Top

8. Add Hyperlinks.
   
   Select the text you want to link. Choose Insert | Hyperlink or click the Hyperlink button in the top menu bar (looks like a world globe with a chain link in front of it).
   
   When the Create Hyperlink dialog box appears, if you know the site’s Web address or "Universal Resource Locator" (URL), type it directly into the URL text window following the http://. For example, to create a link to http://www.yahoo.com, type www.yahoo.com
   
   Alternately, click on the globe icon and locate the page to which you want to link. Go back to FrontPage and the URL will appear in the URL box.
   
   To delete a hyperlink, right-click on the link and choose Hyperlink Properties from the shortcut menu. When the dialog box opens, the URL is highlighted. Press backspace or delete to remove the URL. Click OK and the selected text will no longer be linked.
   
   If your Web page is on the main Web server, and you're linking to another page that's on the main Web server, remove the http:// and begin the link name with a leading slash to create a server-relative path. For example, to link to a file located at http://www.wright.edu/web/access/guidelines.html, type /web/access/guidelines.html
   If you use the absolute path (e.g. http://www.wright.edu/web/access/guidelines.html), the link will also work, but it may take slightly more time to load the page.
   NOTE: If the pathname ends with a directory name rather than a file name, be sure to include the ending slash (e.g. /web/access/).
   
   To create a link to a file that exists on the same Web server and in the same directory as the file on which you're working, remove the "http://" and simply put the file name. For example, if you're working on a document located at http://www.wright.edu/web/access/guidelines.html and you want to link to a page located at http://www.wright.edu/web/access/accountability.html, type accountability.html.
   
   To create a link to a file that exists on the same server but in a subdirectory of the directory in which your current file exists, remove the "http://" and simply put the path to the file, relative to the path of your file. For example, to link from http://www.wright.edu/students/union/index.html to an image file that's located in the images subdirectory of the union directory, type images/frontdesk.jpg
   

   Return to Top

9. Create a "mailto" link.
   
   Select the text you want to link. Choose Insert | Hyperlink or click the Hyperlink button in the top menu bar (looks like a world globe with a chain link in front of it).
   
   When the Create Hyperlink dialog box appears, click the envelope icon. Enter an e-mail address in the field and then click OK..
   

   Return to Top

10. Create a link within the same document.
    
    To create an anchor or bookmark to link to within the same page, go to the location where the link will take you. Choose Insert | Bookmark. Name the anchor and select OK. To create the linked text, highlight the text which will serve as the link, click on the link icon. Choose the appropriate anchor name from the dropdown "Bookmark" list.
    
    To change the colors of links, see Changing Background and Link Colors.
    

    Return to Top



11. Add and Edit Images.
    
    If you add an image from outside of your Web, you will be prompted to save the embedded files when you save the page or the Web. FP will make a copy of the image and then place it in your Web folder.
    
    If you are in page view, you can "drag and drop" an image from the folder list onto your current page.
    
    Specifying Image Size. All images should have their size specified.
    
    
    1. Right-click the image and choose Picture Properties from the shortcut menu.
       
    2. Click on the Appearance tab.
    3. Check the box next to Specify size.
    4. Click OK.
    
    Creating Alternative Text for Images. All images should include descriptive text that is displayed by Web browsers when the picture has not yet been downloaded. The descriptive text is also "spoken" by screen-reading software.
    
    
    1. Right-click the image and choose Picture Properties from the shortcut menu.
       
    2. Click on the General tab.
    3. Within the Alternative representation section, type a brief description in the window. NOTE: If the image serves a function, then state the function as the alt text. For example, for an image that serves as a bullet, use alt="bullet".
    4. Click OK.
    
    Aligning Images. By setting the alignment of an image, you can control how the picture is aligned with text and other pictures. For example, left aligns the picture with the left margin and wraps any text that follows it to the right of the picture.
    
    
    1. Right-click the image within its Web page and choose Picture Properties from the shortcut menu.
    2. Click on the Appearances tab.
    3. Within the Layout section, click the arrow on the Alignment drop-down box and choose how you want the picture aligned.
    4. Click OK.
    5. To see the effect, click the "Preview" tab.
    
    
    
    

    Return to Top

12. Resize and/or Resample Images. If you’re making anything other than a minor size adjustment (10% or less), you should use an image editing program to make the size change. If you resize the image within FrontPage (not recommended), you should also resample it to adjust the actual file size of the picture file.

    If you resize a large picture to a smaller one using the HTML code, the HTML tags adjust the width and height of the picture; however, since you haven’t changed the actual file size of the picture, the browser must still download the large picture file. This creates a slower download speed.
    

    Return to Top

    
    
13. Create and Format a Table.You can insert tables on your page to organize information or create boundaries for page elements. After a table has been created, you can customize it by inserting, aligning, deleting or resizing rows and columns, and you can add colors and background pictures to cells.
    
    NOTE: Using tables to create page layout can cause accessibility problems. Screen reading software generally reads a table row all the way across, from left to right. If your text is in multiple columns, the information may not be "read" properly. Refer to the Web Accessibility Guidelines and use the accessibility testing feature of the Bobby Web site located at http://www.cast.org/bobby/ when creating tables.
    
    Create a new table by going to Table | Insert or Table | Draw Table. You may also use the Tables Toolbar by going to View | Toolbars | Tables.

    Headings for your table must be specified as headers. Highlight the text, right click in the table cell, choose Cell Properties, click Header Cell.
    
    Create new rows or columns using the Table menu or Tables Toolbar. Click Insert Rows or Insert Columns.
    
    To split cells evenly, use the Split Cells command on the Table menu or Tables Toolbar.
    
    Merge cells by highlighting the cells to merge and then go to Table | Merge OR use the Eraser tool on the Tables Toolbar to delete one or more cell borders.
    
    Delete cells by using the Delete Cells command on the Table menu.
    
    Set table properties using the Table Properties command on the Table menu.
    
    Use the Cell Properties command on the Table menu to override global table properties for the currently selected cells.
    
    Special Characters. To insert special characters, go to Insert | Symbol and select the appropriate symbol. Click Close.
    

    Return to Top

    
    
14. Background and Link Colors. Background and link colors may be determined by a style sheet. The WSU templates use a style sheet to set these options. 
    
    When not using a style sheet, follow these steps to choose background and link colors:
    
    
    1. With your page in Page View, right-click and choose Page Properties then click the Background tab.
    2. Set the background default color to white (FFFFFF) in case your viewers are using a browser whose default background is not white.
    3. To change the color for any of a link’s three states (link, visited link, active link), click the far-right arrows and pick a new color from the pop-up box. Or you can create a custom color by choosing More Colors in the pop-up box. Click the Select button, then pick a color and click OK.
    4. To use the same background and link colors as on another document in your Web, go to Page Properties, select the "Background" tab and then select "Get background information from another page." Find the appropriate page using the "Browse" button.
    5. The standard "WSU" background and link colors are as follows:
    
    
    <body bgcolor="#ffffff" text="#000000" alink="#006633" vlink="#996600" link="#006633">
    
    

    Return to Top

V. Making Your Web Pages More Effective for the WSU Search Engine

1. Give Your Page a Title. The title of your Web page doesn't actually appear on your page -- it appears in the blue "title" bar of the browser -- at the very top of the browser window. The title is created by using the HTML <title></title> tag.

   The title should be a descriptive title that identifies what will be included on the page. The contents of the <title> </title> tag are used to identify Web pages returned from a search engine.

   To add a title to your document, go to File | Properties. Choose the General tab and type into the Title field. Or, simply right click anywhere on the page (in "Normal" view) and choose Page Properties.

2. Use Meta Tags. Use meta tags to provide a description and keywords for a page. Meta tags help search engines find your Web page. For more information on meta tags, see Search Information for WSU page publishers (http://www.wright.edu/search/searchdoc.html).
   1. Once you’ve opened a page in page view, right click inside the page and choose Page Properties. Choose the Custom tab and then click on Add in the "User Variables" area of the window.
   2. When the User Meta Variable dialog box appears, type keywords into the Name text box; then type the actual keywords that summarize your site’s topics, each separated by a comma, into the Value text box.
   3. Use the same process for the description meta tag. The description tells what the viewer will find on the Web page or site. Be specific!

      NOTE: If you’re using a WSU Web template, the meta tags have been included, but you must change the value of the description and keywords to be appropriate for your page/site.
      
      

   4. Be sure your pages display properly in Netscape and Internet Explorer, on both Mac and Windows platforms. Also view it in various resolutions.The majority of web viewers are using 800*600 resolution. To determine your resolution setting on windows
   5. Use the Master Checklist (http://www.wright.edu/web/style/master_checklist.html) to see if your pages meet usability policy and accessibility guidelines.
      

      Return to Top

      
      

VI. Creating New Web Pages and Sites

NOTE: Use these instructions if you are creating a totally new Web site. If you are maintaining pages for a department which already has a site, go to 

1. Create a New Web. Choose File | New | Web
   
   Click on "One Page Web." By default, the "Specify the location of the new Web field" will create a path name to the My Webs folder (My Documents\My Webs), but you may choose another location on your local drive  (your hard drive or network drive) to save your Web.
   
   
2. Close a Web
   
   Be sure to choose File | Close Web to close the current Web properly.
   
   
3. Add Pages to the Web Site Structure
   
   
   1. Switch to navigation view by clicking the Navigation icon in the Views pane.
   2. Within the navigation pane, click on the page to which you want to add a page. The selected page will change from yellow to blue.
   3. Right-click and choose New Page from the shortcut menu. You can also add a new page by pressing Ctl+N. The new page will appear with a generic name.
   4. Continue adding pages until you’ve roughed out as much of the site as you want.
      
      
4. Give Page a Title. Use the tab key to move from one page to another and give each page a title. 
   
   The title should be a descriptive title that identifies what will be included on the page. This is the title that will appear in the <title> </title> html tag and which appears in the top, blue bar of the Netscape browser. The title doesn’t appear on the Web page itself when viewed within a browser.
   
   The contents of the <title> </title> tag are used to identify Web pages returned from a search engine.
   
   By default, the title you create for each page becomes the filename until you rename the file. If you create a new page in Page View and don’t specify a title, FP makes the title the first several words of text that appear on the page.
   
   Creating the structure doesn’t create the actual pages. Double click on the page icon from the navigation view to bring each page up in page view.
   
   NOTE: If your pages already exist, changing the title of the page within the right-hand navigation pane doesn’t actually rename the page file. It simply changes the page’s title. To rename the page file, inside the Folder List pane, click on the appropriate file to highlight it and then type in a new name, ending with .htm or .html. Then choose File | Save.
   
   
5. Re-arrange a Web Site's Structure. You may experiment with different structures by rearranging the pages within the Navigation view. This is handy for those who are "visual learners."
   
   Begin working on individual pages by double-clicking on a page from the navigation pane (which brings it up in Page View) or by double-clicking a file from the Folder List.
   
   
6. Add Subdirectories to Your Web.
   
   1. Change to Folders view.
   2. Under the File menu, choose New and then Folder.
   3. FP creates a new folder with the folder name highlighted for editing.
   4. Enter the name of your subdirectory. You can move pages, images and other files into the new folder. When you do, FP automatically updates all references to the files.
      

      Return to Top

      
      

VII. Importing Existing Webs into FrontPage

You can import an existing Web site into FrontPage from your local drive (your hard drive or network drive) or from the Internet. Using FrontPage to import your files from the Internet may result in errors in the pathnames of your linked html and image files and/or it may fail to import ALL files in your existing Web.

We strongly recommend using an FTP (file transfer protocol) program to download existing Web pages to your local drive (your hard drive or network drive) and then using FrontPage's "Import Web" feature to import the files from your local drive to your FrontPage Web rather than importing the existing files directly from the Internet.

Follow these instructions for using FTP to download Web files and then using FrontPage to import the files into a FrontPage Web:

1. Create a folder on your local drive where you want to save the files on which you will be working. Name it the same as the name of the folder on the Web server in which your Web pages reside. For example, if you are working on the Music Department site, which is located on the main Web server in a directory called "music," then name the folder on your local drive "music."
   
   
2. Open your FTP program.
   
   If you are using WS_FTP or another ftp program, you will use the "host name" www.wright.edu to download departmental Web pages or unixapps1.wright.edu to download personal Web pages.
   
   If you are using a Windows machine and the FTP program provided through the WSU Campus Network:
   
   

   1. Double click the FTP icon.
   2. Double click the web server.sft icon.
   3. Login using your Campus username and password. 
      
      
3. Copy files from the Web server to your local drive:

VIII. Using WSU Web Templates

Follow the instructions for Using University Templates.

Individual departments may request a "personalized" template, which includes a header banner that’s specific to their department. Send requests to webmaster@wright.edu.

Before you begin updating your Web site, log onto the main Web server using FTP and download all of the existing files to your local drive (your hard drive or network drive). This safety measure ensures that you have copies of all of your original files.

NOTE: If you try to save the university templates as FrontPage templates, FP changes the paths to the images, making them local (relative to your local drive) paths. Try saving the document as a FP template once you’re already in your Web. This may prevent the paths from being altered.

IX. Importing Pages into an Existing Web

If you want to add an existing Web page into an existing Web, you can’t just move the file to the existing Web’s folder, as you might expect. You must import the file or it will be ignored by FrontPage, even if it is in the same directory as your Web.

1. Open FrontPage and the Web into which you want to import the file.
 
2. Go to File | Import
 
3. Click on the Add File option.
 
4. Locate the file you want to add.
 
5. Choose OK.
 
6. The file should now show up in the folders view.

NOTE: If you move the file into the Web folder using Windows Explorer, the Web will not recognize the file. If you move the file using Windows Explorer and then use the Import function, you may be told that the file already exists. It will give the last modified date and then ask if you want to replace this file with the one you’re importing (which are one and the same).

X. Publishing FrontPage Webs Using FrontPage's Publish Feature

You can use FrontPage's "Publish" feature, rather than a file transfer protocol (FTP) program to transfer your files to the Web server. If you choose to use an FTP program, follow general instructions for using FTP.

CAUTION: Be very careful with the Publish feature. If you have imported pages or an entire Web site, check to be sure the pathnames for hyperlinks and images remained in tact before you publish pages.

Publishing Departmental Web Pages

1. Go to File | Publish Web. In the "Specify the location to publish your Web to:" text box, delete the http:// and type in: ftp://www.wright.edu/directory_ name, replacing "directory_name" with the directory that you wish to put files into (more information on determining location).
   
   
2. Choose Publish changed pages only, then Publish.
   
   
3. Enter your Campus username and password.
   
   
4. If a message appears asking if you would like to overwrite files, choose Yes to All. This message will only appear the first time that you publish. You are replacing the files on the Web server with the files on your local drive (these files should be identical unless you have made changes to them). 
   
   
5. Once the pages have been published, choose Done. DO NOT click on the link to "see your published pages" ­ this link won’t work! Instead, click on "Done" and manually type in the URL (or set a bookmark) within the browser to view your published pages. 
   
   
6. When you are finished making changes to your FrontPage files, be sure to close your FrontPage Web by choosing File | Close Web.

 

More Information on Determining Location to Publish Departmental Web Pages
When a person is given access to the university Web server, a "quick link" (also known as a soft link or a shortcut) is created within their UNIX account, which takes them to the appropriate directory on the Web server where their departmental Web pages reside.

When using the "publish" function with FrontPage, you will need to know the name of this link (it is oftentimes the same name as the directory name). The name is provided for you when you’re initially given Web access, and the name will show up (as a soft link) when you log onto www.wright.edu.

Use the following syntax to publish Web pages to the main Web. ftp://www.wright.edu/quick_link_name/

So, for the Financial Aid Web site, which is located at http://www.wright.edu/admissions/finaid, the syntax would be: ftp://www.wright.edu/finaid

The actual path on the Web server would be /www/wsu/admissions/finanserv

Viewing your published pages: FrontPage provides a link for you to click to see your published pages ­ this link won’t work! Instead, click on "Done" and manually type in the URL (or set a bookmark) within the browser to view your published pages.

Publishing Personal Web Pages

1. Go to File | Publish Web. Change the default setting of http:// to be ftp:// in the "Specify the location to publish your Web to:" text box.

Use this syntax:

ftp://unixapps1.wright.edu/www/ - NOTE: be sure to include the slash following "www"

If you are publishing to a subdirectory, the path would be ftp://unixapps1.wright.edu/www/subdirectory/

If the subdirectory doesn't already exist, it will be created.

2-6. Follow steps 2-6 for Publishing Departmental Web Sites.

7. If your personal Web pages don’t show up, the permissions on the files may not be set correctly. Telnet to unixapps1.wright.edu, change directory to www (cd www) and give the chweb command to run a script that will correctly set the file permissions.

Excluding Files 

You may exclude specific pages from being published. Go to View | Reports | Publish Status. Select the files you don’t want published. Right click. Choose Properties then the Workgroup tab. Checkmark the box labeled, "Exclude this file when publishing the rest of the Web."

XI. Creating Forms

A form is a collection of form elements or fields on a page that collect information. A site visitor fills in a form by typing into text fields, clicking radio buttons and check boxes or selecting options from a drop-down menu. The visitor then submits the form by clicking a button.



You can put forms and form elements anywhere on a page.

Go to Insert | Form and click the type of form element that you want to insert. To create a form, do the following:

1. Insert a form on the current page.
2. Insert the form elements you want.
3. Lay out the form.
4. Set the properties for each form element.

Form elements have properties, including Width in characters, which specifies the width of a text box field; Initial value, which specifies the contents of a field when a site visitor first sees it; and Initial state, which speccifies whether fields are selected by default. You can set unique properties for each type of form element. To open the properties dialog box for a form element, double-click the element.

When you create a new form, FP adds two default push button elements to the form ­ one labeled "Submit" and the other labeled "Reset."

The names on these buttons can be changed using the form element properties dialog box.

XII. Additional Graphics Functions

1. Creating Image Maps.
   
   
   1. Open a new document.
   2. Choose Insert | Picture
   3. Select your image file. Use building.gif on the disk given to you in the workshop.
   4. Select the image.
   5. Once image is selected, the pictures toolbar should appear at the bottom of your window.
   6. Click on the square, circle or polygon shape tool, which creates a pencil-shaped cursor.
   7. Click on a spot on your image. Continue clicking to create the appropriate outline.
   8. Double click to connect shape, which brings up a dialog box.
   9. In dialog box, add the appropriate filename to which you want to link when that particular "hot spot" is chosen. Note that you will want to remove the http:// if you are linking to a local file ­ make the path server-relative. For the workshop, use links to files on disk called blue.html, orange.html, etc.
   10. Do the same for the other areas of your image.
   11. Save the file. You may be prompted to save the image.
   12. Bring up your page in Preview mode or within Netscape to test the image map.
       
       
2. Creating Thumbnails. When FP creates thumbnails, it doesn’t actually modify the original picture files in any way. Instead, it makes a copy of each picture, resizes it, downsamples the display resolution of the picture, inserts a hyperlink pointing to the original picture file, and adds a border around the thumbnail to indicate the presence of a link.
   
   Because FP makes a small copy of the picture that is represented by a thumbnail, it needs to save the thumbnail to the current Web. The name of the thumbnail picture file is the same as the original picture, but FP adds a "_small" suffix to each file name for easy identification.
   
   You can change the default size of the thumbnail. Go to Tools | Page Options, then choose the Auto Thumbnail tab. On this window, set either the default width, height, shortest side or longest side (the other measurement will be set proportionally).
   
   You can arrange the thumbnails wherever you want on the page ­ treat them like any other pictures on your pages.



3. Adding Text to Images. FP lets you place formatted text over any gif image (if you want to place text on a jpg image, you’ll have to convert to gif ­ beware quality degradation and determine whether you really need the text on the image as opposed to under or beside). This feature is helpful for creating graphical banners, labeling buttons and creating text over pictures used as image maps if you don’t have a graphics program that will do these functions.
   

   Return to Top

   
   

XIII. FrontPage Features to Avoid

1. Include Page Component.
   
   If you have already published your Web on the Web server, and then you make a change to the include file, you will have to upload all pages that are using the include file ­ simply uploading the revised include file will not update the pages that are on the server. A quick way to do this is to use FrontPage’s "Publish Web" option (explained in III. 11.) and choose the "Publish changed pages only" option. FrontPage will upload your revised include file as well as any and all pages that are using the include file.



2. Dynamic HTML. DHTML effects, such as animated text, work with varying results in different browser versions. DHTML effects are not accessible without additional HTML coding changes.
   
   
3. Shared Navigation Bars. Setting up shared borders and navigation bars can be confusing and cumbersome to use, so we don't recommend using them.
   
   
4. Templates & Themes. We don’t recommend using FP templates and/or Themes (templates tend to be non-accessible and somewhat confusing). We recommend using a customized WSU departmental template file and the "WSU theme" of green (#006633) and gold (#996600) accents on a white background. Go to http://www.wright.edu/web/templates/ or contact the WSU Web Team for a customized template, free of charge.
   
   
5. Hover Button.
   
   Hover buttons use Java applets which take a long time to load, are inconsistent across browser versions, and are not accessible without additional coding.
   
   

   Return to Top

XIV. Resources

1. Quick Checklist for Creating Web Pages
2. Web Accessibility Guidelines
3. Web Policy Guidelines
4. cgifile
   



Return to Top

[ Web Services | Communications & Marketing | WSU Home ]