Sorry! You need a Java-enabled browser to view Java applets

FrontPage Tips

Home Course Outline FAQs Assignments Student Web Sites FrontPage Tips Google Search

Miscellaneous FP Tips | Microsoft FP Resources | Miscellaneous
 

Miscellaneous Front Page Tips. These special tips are found throughout this course Web site and are good as gold. I have consolidated them all here for your reference. Use Ctrl-F and type in a keyword to help you find information more easily on this long page.

 Windows, Windows Explorer, Internet Explorer, Word tips, and miscellaneous tips are in blue.


Tutorial 1 (Weeks 1-3)
  • p. 12. To view the Getting Started Task Pane when it is not visible, click View, Task Pane. If you want it to be visible always, click Tools, Options, General tab; under Startup, check Startup Task Pane, and click OK.

  • p. 12. To show all menu commands in FrontPage so they are always visible: To show all menu commands in FrontPage so they are always visible: Tools, Customize, Options tab, check Always show full menus, Close.

  • p. 16, Step 4. To rename a Web If you accidentally published your Web with the wrong name, do this: Open the Web and click Tools, Web Settings; in the Web name box, change the name and click OK.

  • p. 19, Step 5. To change compatibility so all FP features are supported: Tools, Page Options, Authoring tab. Under Browsers, select Microsoft Internet Explorer only, OK. If you choose something other than this, FrontPage will disable unsupported features.

  • p. 19, Step 5. To change your default Web browser to MS Internet Explorer so that features like marquees and background sound will be supported: Close FrontPage, and open Internet Explorer. Click Tools, Internet Options, Programs tab, check Internet Explorer should check to see whether it is the default browser, OK; close Internet Explorer and open FrontPage; click File, Preview in Browser, select Microsoft Internet Explorer, Preview.

  • p. 21, Step 1: After you create the one-page Web, remember to double-click index.htm to open the home page for editing.
  • p. 23, Step 2. To display file extensions in Windows Explorer: It can be important to be able to view file extensions when you browse to files outside of FrontPage. This requires changing your Windows Explorer settings. Right-click the Windows Start button and click Explore to open Windows Explorer; open any directory with files in it; click Tools, Folder Options; click the View tab; in the Advanced Settings box, uncheck Hide file extensions for known file types; click OK.

  • p. 23, Step 2. To see my favorite settings for Windows, Windows Explorer, Internet Explorer, and Word: Click here and enjoy. I use these settings and find that my work is easier and more efficient in all Office programs when I use them.

  • To clear a form for privacy after filling in the Questionnaire, do this in Internet Explorer: Tools, Internet Options, Content tab, AutoComplete, Clear Forms, OK, OK.

  • p. 27. Using the smart tag choice "Keep Text Only"  is the same as Edit, Paste Special, Normal paragraphs. You can try copying and pasting this line without any formatting into the home page rather than typing it and then delete it.
  • p. 30. To see a list of FrontPage icons that show up in your Folder List view, go to http://www.prowebsites.net/frontpagehelp/FP2KIcons.asp#2.
  • p. 30. To add a Network Place shortcut to open your Web more easily, open your Web in the browser, click in the Address box, and copy the URL. Double-click the My Network Places icon on your Desktop. Under Network Tasks, click Add a network place. Follow the steps in the Add Network Place Wizard to add a shortcut. When you get to the Internet or network address box, paste in the URL you copied. Accept the default name for the new shortcut. When you're finished with the wizard, click File, Open Site; from the Favorite Places pane on the left side, click the Network Places icon, click your new shortcut, and click Open. Fill in your user name and password, and your Web site will open.

  • p. 30. To open a Web site in FrontPage from Internet Explorer. Click Tools, Internet Options, Programs tab, click the list arrow for the HTML editor box, choose Microsoft FrontPage, OK. Open a browser window in Internet Explorer; in the Address box, type in the URL of the Web site you want to open, click the Edit With Microsoft FrontPage button (it's next to the printer icon), fill in your user name and password, and your Web site will open.

  • p. 37, Step 3: Pressing Shift-Enter to create a single-space in a Web site can cause problems in certain situations. If you want different paragraph formatting such as centering the first line and left-aligning the second line, you cannot use Shift-Enter. You would instead create a 2-row table and insert one line in the first row and the second line in the second row so that you can apply different paragraph formatting to each row. Another instance where using Shift-Enter is a bad idea is when you have two consecutive hyperlinks—one on the first line and a different one on the second line. The hyperlinks can often malfunction because FrontPage cannot distinguish where the first hyperlink ends and the second one begins. In this situation, it is better to create a 2-row table structure with one hyperlink in each row.

  • p. 38. To insert a special character, Em Dash: Type Alt+0151 on the numeric keypad. This (--) is a regular dash typed with hyphens. This (—) is an em dash. 
    Also see http://www.cs.tut.fi/~jkorpela/www/windows-chars.html#list  regarding use of Windows characters in HTML. Go to http://www.primeshop.com/html/jump3b.htm#symbols to see the html strings for the 214 available ASCII symbols you may want to include in a Web page. 
    Go to the Windows Character Map (Start, Programs, Accessories, System Tools, Character Map), select a font like Symbols, and click on a symbol. In the lower right-hand corner, you will see the keystroke combination to use with the numeric keypad to create the symbol.
  • p. 40. To use the eyedropper to create a custom color: Click the eyedropper; point to a color in any visible graphic for an exact match. Select a range of colors by dragging across something.
  • p. 42: To change the start page in Internet Explorer: Open the desired page, Tools, Internet Options, Home Page, Use current.

  • p. 42: To change your default Web browser to MS Internet Explorer so that all features, like marquees, will be supported: Close FrontPage, and open Internet Explorer. Click Tools, Internet Options, Programs tab, check Internet Explorer should check to see whether it is the default browser, OK; close Internet Explorer and open FrontPage; click File, Preview in Browser, select Microsoft Internet Explorer, Preview.

  • Click here to see tips and tools for working in Microsoft Office. Click here for help with FrontPage.

  • p. 50: To view HTML codes, choose View, Reveal Tags or press Ctrl+/. Preview view is NOT reliable—don't use it.

  • p. 51. Effective META tag keywords and page titles. Here are some tips researched by a former student on the effective use of keywords and page titles.

bullet

Always use your primary keywords in the title tag at least one or more times.

bullet

Try to place your primary keywords at the start of the tag.

bullet

Avoid listing the same word multiple times in a row since some engines may penalize for this. Instead, use the keyword multiple times, but separate them by other words in your text.

bullet

Use the longer form and the plural form of a keyword when possible. For example, if you use marketing in your Title tag, a search on marketing or market will yield a match on most engines. However, words like companies will not always yield a match on company since company is not an exact "substring" of companies. In these cases you'll want to try and use both forms of the word.

bullet

Use upper- and lowercase lettering for keywords in general. Example: Blue Widgets are sold here!

bullet

Longer titles are generally better than shorter ones. However, shorter ones can be used if you need to better emphasize a keyword that is not ranking.

bullet

Make your title interesting and "compelling" to readers to convince them why they should click there.

  • p. 51. Interesting search engines:
    http://www.google.com/
    (finds pages based on number of hits—try Keyboarding Online LACC or Web Page Design LACC)

  • Office demoClick here to view a Microsoft Office Online Demo: "Go online for assistance, training, clip art, and more."

  • http://www.ixquick.com/ Finds almost anything. I use this to check for cheating, so beware.

  • p. 56. Newsgroups are public forums like a virtual "classroom" where anyone is free to ask questions, and anyone with an answer to the question can respond. Click here to go to the newsgroups online. Under Community Newsgroups, click Office, FrontPage, FrontPage Client.

  • Renaming a Web: If you accidentally published your Web with the wrong name, do this to correct the name: Open the Web and click Tools, Site Settings; in the Web name box, change the name and click OK.
  • p. 377, Step 4. To publish a Web site to a disk-based Web: From the Remote Web Site tab, click File System. Click Browse and browse to a folder you created previously with the desired Web site name, and click OK. if your Web won't publish, go to the target destination outside of FrontPage and create a regular folder with the same name as the Web site first then try publishing again.
  • p. 379, Step 8. Remote Web Site Properties: the next time you publish this Web, FrontPage will default to these settings including the destination; review these settings when publishing to be sure they're the ones you want.
Tutorial 2 (Week 3-4)
  • p. 75. To fade a background picture: click Insert Picture From File button; browse to desired picture and select it; from the Pictures toolbar, click the Color button, Washout; resave the picture then select it and delete it from the Web page. Then follow the normal steps to insert the background picture using this file (Format, Background, Picture, etc.).
  • p. 75. To add a fixed custom background picture: click Insert Picture From File button; browse to desired picture and select it; from the Pictures toolbar, click the Color button, Washout; right-click the picture and choose Picture Properties; under Size, check Specify size and check Keep aspect ratio; change the Width to 1600 pixels and click OK—this will make the picture wide enough for most monitors and resolutions—experiment with other widths (try 1200) if 1600 distorts picture too much; click the Resample button on the Pictures toolbar; save the picture then select the picture and delete it from the Web page. Then follow the normal steps to insert the background picture (Format, Background, Picture, etc.) using this file and check Make it a watermark to keep the picture fixed. Click here for an example of a Final Web site in which the home page background uses a fixed background.
  • p. 75. To stop a background picture from tiling: The options that are immediately available in the Page Properties dialog box will tile a background image. That means that there will be many versions of the image repeated throughout the page. If you don't want this effect, you'll need to add a style to the <body> tag: click Format, Style, double-click body. Then click Format button, Border, Shading tab. At this point, you can add the path to the picture, and select the no-repeat option. That will keep the image from repeating, or tiling, across the page.
  • p. 75. To  Paste Drawing Objects, WordArt, or graphics as separate image files, remember that if you copy and paste an image such as clip art, WordArt, or a drawing object from Word to FrontPage, you must take special steps in Word first to insure that the pasted image comes in as a separate file for embedding. First create the image in Word with the Layout position In line with text. To do this in Word, select the image, right-click it, and click Format Picture, Layout tab, Wrapping style, In line with text, OK. Next, copy the in line image, and then paste it into FrontPage as an Image Tag using the Paste Options smart tag list button. In this way, the will be saved as a separate gif file.

    Each Paste Option is explained below.

    Keep Source Formatting.
    Use this option to preserve the positioning attributes of the drawing object in the source document. For example, If you copy a drawing object AutoShape from Word to FrontPage, selecting Keep Source Formatting ensures that the position In line with text is preserved. The Layout position in Word must be In line with text or else the anchor symbol will be pasted and not the AutoShape object.
    Paste as an Image Tag.
    Use this option to convert a pasted Microsoft Office drawing object into a GIF file when the page is saved. For example, if you copy a drawing object AutoShape from a Word to FrontPage, you are prompted to save the newly created GIF file when you save the Web page. I recommend you paste objects as image tags for more control since they are saved as a separate image file.
    Microsoft Office Drawing Object.
    Use this option to paste a Microsoft Office drawing object without having the picture saved as a separate image file.

  • p. 80. To add internal padding to a marquee: Double-click the marquee; click Style; in the Modify Style dialog box, Format, Border, Borders tab, Padding—Top, 3 (or desired number), Padding—Bottom, 3 (or desired number), OK, OK, OK.
  • p. 80. To insert HTLM code: Place the insertion point where you want to insert HTML code. Press CTRL+Q and click Insert HTML. In the Quick Tag Editor, type or copy the HTML that you want. Caution: If you copy HTML code from typed lines on a Web page, always paste in HTML code to Notepad (Start, Programs Accessories, Notepad) first then copy and paste from Notepad in the Quick Tag Editor or Code view to be sure it is inserted without a problem. Sometimes, things like quotation marks can be converted to code instead of being inserted as quotations marks. To edit the tag, you can also click inside a line or element, and click the list arrow next to the button on tag in the Quick Tag Selector row, and click Edit Tag or Insert HTML.

    Microsoft Office OnlineClick here to view Microsoft training, "Under the hood: Effortless ways to work with code" (40-50 minutes):

    • "Use Split view and Code view"

    • "Make code easier to work with"

    • "Work with Code in Design View."

    Inserting a Picture into a Web Page, p. 81

    Office demoClick here to view a Microsoft Office Online Demo: "How to find the perfect clip right away."

    Office demoClick here to view a Microsoft Office Online Demo: "Choose it, then use it: Copy and paste clip art into your document."

    p. 90. To change wrapping style, alignment, horizontal spacing, border thickness, and vertical spacing of a picture: double-click the picture to open the Picture Properties window.  On the Appearance tab, under Wrapping style, click the wrapping style that you want. Experiment with Alignment, Border thickness, Horizontal and Vertical spacing.


     

  • p. 92. To add extra vertical space above a horizontal line: Insert the horizontal line inside a 1-column, 2-row table in Row 2. Insert a hard space (Ctrl+Shift+Space) inside the blank row above the line.
  • p. 95, Step 1. To navigate between open Web pages, press Ctrl-Tab.

Office demoClick here to view a Microsoft Office Training Session: "Find and replace text across multiple Web pages."

  • p. 100, Step 2. To set up a default e-mail client: In Windows Explorer, click Tools, Internet Options, Programs; make the desired selection in the E-mail box. If you use Outlook or Outlook Express at home as your default e-mail client and click a mailto hyperlink, that e-mail client will open. Hotmail is the default e-mail client in the COAT labs, so Hotmail will launch in our browser if you click a mailto.
  • p. 101. To use Find and Replace to change text and HTML for mailto hyperlinks or URLs: if your e-mail address changes and you have mailto hyperlinks, you must change both the text on the page and the HTML code behind it. Try these steps and you'll see what I mean:
bullet Type your e-mail address and press the space bar to create a mailto hyperlink.
bullet Click Split at the bottom of the document window to split your screen to display HTML on top and design view on bottom.
bullet Click inside the e-mail address you typed and notice that when you edit the address, the blue HTML codes preceding it do not change. Therefore, when you click the mailto to send e-mail, it will use the old address. The same is true of URLs. Copy and paste the URL for our class and edit it: http://caot.lacitycollege.edu/112/

Use these steps to use Find and Replace to edit both the text and the code behind it:

bullet Click Edit, Replace; In Find what, type the original e-mail; in Replace with, type in the changed e-mail.
bullet Under Search options, click All pages; under Advanced, click Find in source code; Find in Site.
  • p. 101. To block unsolicited e-mail, go to http://automaticlabs.com/products/enkoderform/ to see how to encode your e-mail to hide it from e-mail harvesting robots.
  • p. 101. To wrap HTML code in Code View, on the Tools menu, click Page Options. On the General tab, under Code View Options, make sure that Word wrap is selected. It's helpful to turn on word wrap for Code view. This will automatically break long lines of code so that you don't have to scroll to see everything on the line.
  • p. 101. You might want to know about the Variables feature that uses a concept similar to Find and Replace. Variables are useful for content that might change, such as an e-mail address or a date. On our Web site, I often use dates such as the date of the final exam. When I need to add the final exam date to the content of a page, rather than typing it, I define a variable for it and then insert the date as a variable as follows: 
bullet Define a variable. Click Tools, Site Settings, Parameters tab, Add. In the Name box, type a name for the variable—in this example, I would type Final Date. In the Value box, type a value for the variable. In this example, I would type Thursday, June 2, 12:30 p.m.
bullet Insert a variable. In Page view, position the insertion point where you want to display a variable. Click Insert, Web Component; under Component type, click Included Content; under Choose a type of content, click Substitution, Finish. In the Substitution Properties window, click desired choice and click OK. In this example, you would click Final Date. On my Web page, the value of the variable would appear.
bullet Update a variable. When the year changes, I would redefine the variable following the steps above under Define a variable and change the final date. When you click Apply or F5 to refresh, the final date will change throughout my Web site in every place in which I inserted the variable named "Final Date."
  • p. 108, Step 3. To create thumbnails efficiently: Insert the full-sized picture file on the Web page first, then save and name it in the Images folder; create the thumbnail image next by clicking the Auto Thumbnail button on the Pictures toolbar; when you save again, the suggested name for the thumbnail image will be the full-sized picture name plus _small thereby making it easy to associate the two files.
  • p. 112, Step 6. Text is stored in a separate gif file in the _overlay folder. This might be helpful information when troubleshooting these overlays.

  • p. 117, Step 5. To create an interactive button with a custom picture and link to sound file similar to the home page for this Web site: Create and save your sound file (Start, Programs, Accessories, Entertainment, Sound Recorder) and image file first and write down the exact image height and width; click the Web Component button, Dynamic Effects, Interactive Button, Finish; in the Link to box, browse to the sound file; in the Width and Height boxes, enter set the exact width and height of the picture; choose the desired Effect and Effect color; click Custom, and under Custom, Button, browse to the image file, OK, OK.
  • p. 121, Step 7. To add a DHTML effect on mouse over: (mouse over this text first to see the sample effect.) Select the desired text; from the DHTML Effects toolbar, click the list arrow for On <Choose an event>, Mouse over;  click the list arrow for Apply<Choose an event>, Formatting; click the list arrow for the <Choose Settings>, click Choose Border; for this example, Borders tab, Settings—click Box, Color—Green; Shading tab, Background color—yellow from theme, Foreground color—maroon to set text color; next click Choose Font, and make desired changes.

  • p. 121, Step 7. To add a DHTML effect on click: (Click the red words to the left first to see the sample effect and refresh when you're done.) Select the desired text; from the DHTML Effects toolbar, click the On <Choose an event> list arrow, Click;  click the list arrow for Apply <Choose an event>, Fly out; click the list arrow for the <Choose Settings> box, click To bottom-right by word.

  • p. 121, Step 7. To add a DHTML effect on mouse over to picture: (click the pointing finger graphic first to see the sample effect.) Select the desired picture; from the DHTML Effects toolbar, click the list arrow for On <Choose an event>, Click;  click the Apply list arrow for <Choose an event>, Swap Picture; click the list arrow for the <Choose Settings> box, click Choose picture and select desired swap picture.
  • p. 121, Step 7. Java Virtual Machine download. Due to litigation with Sun Microsystems, Microsoft has removed the Microsoft Virtual Machine (its version of the Java Virtual Machine) from its Web site and all service packs. To get the Java Virtual Machine (JVM), go to the Sun Web site. Some customers have reported that their Java Virtual machine has stopped working after installing the latest Windows XP Service Pack-1a. If your Java applets stop working, go to the Sun Java download site to download the Sun Java Virtual Machine.
  • p. 121, Step 7. To see a list of FrontPage applets that you can use for special effects, go to http://www.frontlook.com/default.asp and click Downloads for some free sampler downloads. The Read Me file will have directions for use. I have installed a page effect (falling leaves and bird sounds) and a cursor effect (seed chasing the cursor) to the FrontPage Tips page. Michele Padilla  in her Final Web site, Chavez Ravine, used some Java script that is very interesting. The confirmation page generated after filling in the form on the Feedback page contains Java Script Date image that changes daily. I've never directed students before to look at the Final page but this is worth the visit! Mouse over the "Hi" hyperlink at the bottom of the page. Click here for interesting sites if you like Java.
Tutorial 3 (Week 5-6)
  • p. 147. Create a bulleted list with a custom bullet:
    First, create a custom picture by inserting and sizing the desired picture.
    To create a custom picture:
bullet  From the menu, click Insert, Picture and choose either ClipArt or From File. If you choose Clip Art, choose the Buttons & Icons category, right-click the desired picture and click Insert.
bullet Select and insert the desired picture. The picture should be one that can be resized until it is very small and still be recognizable and appropriate.
bullet With the picture selected, drag on the sizing handles to size it as desired. Click the Resample button on the Pictures toolbar to resample the picture. Save the picture in your Images folder and delete the picture on the page.
To create a custom bullet:
bullet From the menu, click Format, Bullets and Numbering, Picture Bullets tab.
bullet Click Specify Picture and click Browse to find the picture you created in the previous steps. Click OK, OK.
bullet Insert, Picture and choose either ClipArt or From File.
  • p. 151, Step 7. To fix extra spacing in a list (with or without nests) courtesy of Seol-Ah Park, F06 class: First, type an unformatted list. Then select the unformatted list, Format, Bullets and Numbering, Specify picture, Browse, click the desired picture, Open; in the Picture Bullets tab, click Style; in the Modify Style window, click Format, Paragraph; in the Paragraph window, Spacing Before—type 0, Spacing After—type 0, OK, OK, OK. In design view select the items to be nested, click Increase Indent twice, then click the Numbering button--voila!!
  • p. 157. To create a hyperlink to a bookmark on a page other than the current page: Create your bookmark first on the target page; create your hyperlink second on the source page, such as this Final page; select the text for the hyperlink on the source page; click the Hyperlink button or Ctrl-K; in the Insert Hyperlink dialog box, under the Link to pane, click Existing File or Web Page; from the list of files, click the desired target page where the bookmark was created; click the Bookmark button, click the desired bookmark, and click OK.
  • p. 160, step 4. Use a theme's picture as a top-of-page hyperlink. Try searching your theme for great "hidden" pictures as follows: Tools, Site Settings, Advanced tab, check Show hidden files and folders; Insert Picture From File button; In the Look In box, browse to _themes/ThemeName; click the View button and select Preview; double-click the desired picture to insert it.  Create the hyperlink that points to the top-of-page non-text bookmark.
Tutorial 4 (Week 7-9)
  • p. 230. To learn about customized themes, type "customize theme" in your help box, and search Microsoft online, FrontPage, at http://office.microsoft.com/en-us/FX010858021033.aspx.
  • p. 230. To use a 3rd party theme: This third party software has some beautiful Web sites created with FrontPage and their own software. Take a look a the FrontLook Hall of Fame. AUSCOMP WORLDWIDE 1st Theme Factory for MS FrontPage has a gallery of professionally designed themes. Series 1 (10 Themes: Africa, Highway, Ice, Klingon, Maritime, Money, Music, Soccer, Starship, Wine), Sports (10 Themes: Baseball, Formula 1, Golf, NBA (National Basketball League), NFL (National Football League), NHL (National Hockey League), Riding (Horse), Scuba (Snorkeling), Soccer 2, Tennis), and Entertainment (5 Themes: Comic, Horror, Melody, Movies & Film, People). Also look at http://www.frontpageworld.com/frontpagetools/webtemplates.htm. created with FrontPage and their own software.
  • p. 251, Step 3. See the Spring Break page to see an example of WordArt combined with a table background filled with a picture and see Glaciers below. In the Fill Effects dialog box, click the Picture tab and browse to the desired picture.
  • p. 253. To change WordArt and shapes to a gif or jpg file: WordArt and shapes generated in FP are VML graphic objects and can only be viewed properly in Internet Explorer 5.5 and later running on Windows. WordArt or drawings must be converted to a gif or jpg image file.
bullet If you create your WordArt in Publisher XP or later and save that file as a Web page, the _files folder for the saved page will have a gif version of the WordArt. Import that gif image into your web and insert it as desired. Or right-click the WordArt in Publisher, click Save as picture and import the file into your Web.
bullet In FrontPage, create your WordArt in design view, Print Screen, paste into Paint (Start, Programs, Accessories, Paint) or other graphics editor, crop and save the WordArt as a jpg or gif file (depending on complexity of colors.
bullet Go to http://jamiconsulting.com/home.htm to see a nice example of Word Art. Click the Edit With Microsoft FrontPage button in the browser to see how they did this. This Web site is one of the winners in the FrontLook Hall of Fame V.
  • To enhance selected WordArt, use the tools on the WordArt toolbar as follows:
    • Use the WordArt Gallery tool to change to a different style altogether.
    • Use the WordArt Shape tool to change the shape.
    • Use the Free Rotate tool to rotate the WordArt freely.
    • Experiment with the other tools freely.
  • Create your WordArt image in Word. Make sure text wrapping is set to In Line With Text. Copy the WordArt from Word into FrontPage. When the Paste Options button appears, click Paste as an Image Tag. When you save your Web page, you can save the WordArt as a separate gif or jpg file. There is loss of quality.
  • p. 253. To center WordArt over a gif file: Open Word and create WordArt. Resize WordArt so it will fit into the cell that will hold it. Use no fill for background color behind the text or try and match it to the color or texture the web page will have. (Adobe Photoshop of Image Ready are great programs to use if available.) Press Print Screen. Open Adobe Photoshop and paste. Save FORMAT as a GIF. (You can use Photoshop to enhance and edit as well once pasted.) In the cell or table OPEN AS background Picture and your WordArt should center itself. Pay attention to the order of other objects/pics or gifs that were added prior and adjust as needed. (Keifer Vasquez' tip.)
  • p. 281, Step 2. To view bottom of Insert Table dialog box: The bottom of the Insert Table dialog box is hidden from view because of our low screen resolution and small monitors. This is a known issue that Microsoft is working on.
    Workaround
    : With the  Insert Table dialog box open press, Alt + space bar; press M; press the up arrow key enough times to move the dialog box up until the bottom of the dialog box is visible, then click the mouse and click as desired. If this doesn't work, press Tab to move to the desired location and enter the desired choice. A checkbox can be selected by moving to the checkbox and pressing the space bar. The OK button is always highlighted and pressing Enter should accept changes made and close the dialog box. You could also right click the Taskbar, click Properties, then check Auto-hide the taskbar.
Tutorial 5 (Week 10-12)
  • p. 309, Step 9. To name files in a frames page for easy identification later: Try naming pages like this: Frameset.htm, Frame_Banner.htm, and Frame_Content.htm. Being able to distinguish amongst these files could be important such as in Item 15 of your Final Web site. You could also right-click the file, click Properties, Summary tab, and type a Comment which would be visible in Folders view. It is also a good idea to organize all frameset pages on a given topic into a unique folder.

  • p. 314. To manually specify a target frame: If you have trouble with the hyperlinks in the Contents frame displaying the target in the main frame, right-click the hyperlink and click Hyperlink Properties; in the Edit Hyperlink window, click the Target Frame button, and type main in the Target setting box. For a home page hyperlink, the target would be Whole Page or type _top in the Target setting box.

  • p. 319, Step 9. To create link bars in the banner and contents frame for navigation on a frameset page: It is better to use a link bar for navigation in a frameset page than it is to use manual hyperlinks. When pages are added or deleted from child level 1 pages or main pages or link bars, the link bars will be updated automatically. If you created manual hyperlinks, you will have to remember to update them each time and the chance for errors increases.
bullet Banner Frame: Drag the banner and contents page into the navigation structure under the frameset page. Unless you take this step, you cannot add link bars on these pages. Because you do not want these pages to show in a link bar, right-click both pages and deselect Included in Link Bars. Open the banner page, and insert a link bar based on the navigation structure in the contents pane using the horizontal style set to display Child pages under home; right-click and click Page Properties; under the General tab, Default target frame, click the Change Target Frame button; in the Target Frame window, click Whole Page, OK, OK.
bullet Contents Frame: Drag the main pages into the navigation structure on the same level as or under the contents page. Edit the navigation button names as needed. Insert a link bar based on the navigation structure in the contents pane using the vertical style set to display same level or child level, depending on where you have dragged your main pages.
  • p. 282, Step 7. To set table defaults: Table, Insert, Table; check Set as default for new tables. Whatever settings you use here will be the default from that point forward. When you click the Insert Table button, the settings last used in the Insert Table dialog box will be in effect. I use Center Alignment, 640-pixel width, and if I use borders, I set 5 pixels for Cell Padding and Cell Spacing.

  • p. 301. To move, delete, or copy a nested table: Click inside a nested table; Table, Select, Table; Cut button; move to the new location; Paste button. You might have to change the alignment of the newly pasted table. Using  Ctrl-/can be very helpful in seeing the beginning and ending HTML codes for a table if you are troubleshooting. Another way to select a table using the Quick Tag Selector is to click inside the nested table, point to the table button <table>, and click Select Tag. You can then cut, copy, and/or paste the nested table.

  • p. 301. To create a ScreenTip in a table.
    Source
    :
    http://office.microsoft.com/assistance/2002/articles/fpTipMakeTableScreenTips.aspx

    Sometimes you want to provide more information than there's room for in a table cell. You can create a ScreenTip— information or instructions that will pop up when your users move their pointer over that cell. For example, each table header cell below has a ScreenTip associated with it. To view the ScreenTips, move your pointer over the individual words in the cell:

    Name

    Address

    Phone

    E-mail

           
           

    Some other instances when adding a ScreenTip to a table might be helpful:

    • In a table of stock quotes, you want to supply more information about each stock, such as its history, volume, or full name.
    • You want to include directions about what you want your users to enter into that particular cell, column, or row (as in the example above). See the CAOT Department Student Survey.

    To create a ScreenTip for a table cell:

    1. Select the word(s) where you want the screen tip to display. This will help you locate the tag you need more easily. In Page view, click the HTML button.
    2. Locate your table on the page.
      Each cell has its own code that looks something like this:
      <td width="25%"></td>.
      The information that goes in that cell is added between the two tags.
    3. To add a ScreenTip to this cell, after <td type 
      title="Your ScreenTip"
    4. Replace "Your ScreenTip" (including the quotation marks) with the actual message or information you want to pop up. For example, in the table above, the first cell would look like this:
      <td title="Enter your first name only in this column." width="25%">Name</td>
Tutorial 6 (Week 13)
  • p. 342. To use Google to search your Web site or the WWW, go to http://www.google.com.au/searchcode.html#both. This one searches either the web, or your own site just like our own Google Search page.
  • p. 366. To add a file upload control to a form so visitors can upload files to be stored on your Web site: Insert, Form, File Upload. Edit the form as desired. Create a new folder to store uploaded files (perhaps /Upload). Right-click the form, Form Properties, Options, File Upload tab; under Destination, browse to folder you created to store uploaded files, OK. Double-click the file upload text box; in the Name box, type a name to identify this form field (perhaps FileUpload) on the confirmation page. If you want text to appear in the text box when a visitor first opens the form, type the text in the Initial value box. In the Width in characters box, type the desired width and publish to the server. Live on the server, right-click the new folder you created to store uploaded files, Properties; clear Allow scripts to be run so that the following two options will be available: check Allow anonymous upload to this directory and check Allow uploaded files to overwrite existing file names if you want existing files to be overwritten; OK. To download the files, go to the URL followed by the name of the upload directory. The uploaded files will be listed there for opening or downloading. The upload control form looks like this:

  • p. 366. To add included content from a page with a form: Steve Sakai, a former student, has used a web component feature in his form in an ingenious way on his Guest Book page of his Final Web site. You first create a form and set it to save it to a separate file as described above. Below your form use the included content page feature where the content of one page is appended into another: Insert, Web Component, Included Content, Page, Finish, and browse to the form results page. When a visitor clicks Submit, returns to the  page, and then refreshes the browser, the visitors' current comments will be displayed.
  • p. 369. To add a Word and Excel viewer so visitors can open files from your Web site even if they don't have Office installed:
    • If you don’t have Excel installed, click here to install the Excel Viewer. With Excel Viewer 2003, you can open, view, and print Excel workbooks, even if you don't have Excel installed.
    • If you don’t have Word installed, click here install the Word Viewer. Word Viewer 2003 lets you open Word 2003 documents even if you don’t have Word installed.
  • p. 372. To determine your Windows version to see if your computer can function as a Web server: Right-click My Computer, Properties, and the version of Windows you are using will be displayed. Windows XP Professional must be in use for IIS to be installed.
  • p. 389. To edit a form and the form results file after data has been submitted by visitors: Sometimes after you have created a form, you will want to delete, add, or change form fields. You must take special steps to do this.
bullet Edit the form on the disk-based Web as desired and save it.
bullet Right-click the form and choose Form Properties, Options, Saved Fields tab; click Save All to update all fields and delete any unwanted fields such as Submit.
bullet In the _private folder, right-click the *.csv file and click Don't Publish so that when you publish to the server, you will not overwrite the *.csv file on the server that already has data entered.
bullet Open the Web live on the server, open *.csv file in the _private folder, and insert or delete any columns as needed to match the edits you made in the form; use the exact names for the column headings that you used to name the form fields.
bullet Close the edited *.csv file; click Yes to save changes to the *.csv file; click OK if you are prompted that the file could not be accessed; click Yes when you are prompted to save changes; click Save in the Save As window; click Yes when prompted to replace the existing *.csv file; click Overwrite and OK when prompted to overwrite the changed *.csv file; click Yes when prompted that the *.csv file may contain incompatible features.
  • p. 391. To create a custom hit counter: If you don't like the appearance of the default hit counter graphics as shown on p. 6.50, you can customize the hit counter. Create a custom picture in gif format, which must include the numbers zero (0) to nine (9), evenly spaced and should resemble the images shown in the Hit Counter Properties window. Make sure the width of the image is divisible by 10. You can also draw a picture, scan it, and save it as a gif image. You can create WordArt in Word (Impact, 14-pt. bold is a good choice for a font) and paste WordArt into FrontPage as an Image Tag (click the Paste Options smart tag arrow and click Paste as an Image Tag) so you can save the WordArt as a gif file. Save this gif file in your Images directory and remember what you name it—you might want to name it custom.gif. (Note: if a red X displays in the browser after you're done, try going into the Custom Picture box and changing the path in the Hit Counter Properties window to _borders/images/custom.gif. Also, be sure you are previewing page in browser rather than local drive.) Click the Web Component button; under under Component type, click Hit Counter, Finish; in the Hit Counter Properties window, click Custom Picture and type the exact path including the folder to the gif file you saved—for example, /images/custom.gif; click OK. Next, you should create another gif file with a matching font to serve an the introductory text.
Tutorial 7, 8, 9 (Week 14)
  • p. 473. To create a database automatically based on an existing form: Click here to see a client registration page from a former student's Final Web site.
bullet Right-click the form and choose Form Properties;
bullet Click Send to database, Options, Database results tab, Create Database. The database and one table object will be created, named, and saved automatically. The database will be named Guest.mdb with the same filename as the form and the field labels in the table object will correspond to the field names in the form, so be sure the form is correct and complete before you create the database. 
bullet Verify the database connection (see p. 8.09). 

Note: The form file must be saved with the asp extension (not htm) as an asp page (Active Server Page, p. 8.10—a page that can run scripts) to work. I think it's easier since you don't know Access to create the FrontPage form first and then have the database created automatically after.

  • p. 478. Click here to see a Client Registration Database Results Region asp page.
  • p. 486, Inserting a Database Results Region with a search form in a Web Page to filter a database. Click here to see a Client Registration DRR asp page with a search form.
  • p. 491. To update a database after changing a form: Right-click the form and choose Form Properties; click Options, Database results tab, Update Database; this will add fields but will not necessarily delete fields. You will have to delete fields yourself manually (Form Properties, Options, Saved Fields tab, highlight desired field, Remove). Check the database itself—if it has not been updated, delete it from the fpdb directory; remove the database connection (Tools, Web Settings, Database tab, select desired database Connection, Remove); recreate the database as explained in the previous tip.
  • p. 496. To send data to both a database and an e-mail address, click here. Click here for a great Web site for FrontPage tips on databases, etc.
  • p. 503, Sending information to a Database directly from a Web page with a Data Access Page. Click here to see a Client Registration DAP form.
  • p. 508. To troubleshoot Data Access Page:
Check security settings:
  • Internet Explorer, Tools, Internet Options, Security tab, Custom, Reset to: Low, Reset; OK, OK
  • Internet Explorer, Tools, Internet Options, Security tab, Trusted Sites, Sites, Add this Web site to the zone—paste in URL; uncheck Require server verification (https:) for all sites in this zone.
  • Internet Explorer, Tools, Internet Options, General tab, Temporary Internet files--Delete files, check Delete all offline content.

Try to open the DAP page. If you still cannot access the data, it is possible that one of the following problems exist.

  • You do not have security permissions to the server on which the data resides.

  • You do not have security permissions to the data referenced in the mail.

Check HTML in DAP:
Data Data Source=c:\Inetpub\wwwroot\recipes\fpdb/guest.mdb;Mode=Share Deny None;

p. 524. Click here to view a Microsoft Office Online Course: "HTML Tables III: Design a page with layout tables."

 

Microsoft FrontPage Resources

http://www.microsoft.com/frontpage/default.htm
Microsoft's home page for FrontPage. Includes demos, tutorials, product facts, and FAQs.

http://www.microsoft.com/frontpage/downloads/default.htm
FrontPage downloads including service packs and add ins.

http://www.microsoft.com/frontpage/downloads/addin/default.asp
Provides a place where thousands of FrontPage developers and designers submit add-ins for download.

http://www.microsoft.com/office/frontpage/prodinfo/guide.mspx
FrontPage white paper on new features of FP 2003.

http://www.microsoft.com/frontpage/downloads/addin/searchresults.asp?s=C&c=8&x=6&y=11
Add e-commerce to a business Web site: 1-2-3 PayPal Purchase Button Wizard 
Create and manage an e-commerce site. bCentral Commerce Manager Add-in- Version 2
Add e-commerce to your Web with Cart32 v6.
Cart32 V6.0
Design shopping cart templates for ecommerce. NetPlugin Tags
Instantly add e-commerce capabilities. SalesCart
Add a Shopping Cart WebBot for FrontPage.
StoreBot 2002 Standard Edition

http://office.microsoft.com/downloads/ouvp.aspx
Microsoft: Excellent list of 3rd party downloads to enhance a variety of Microsoft Office products.

http://support.microsoft.com/ph/2514
Microsoft: MSDN library of FrontPage resources.

http://support.microsoft.com/kb/825447
How to publish a FrontPage 2003 Web site to a CD-R or a CD-RW

http://support.microsoft.com/default.aspx?scid=kb;en-us;205756&Product=fp2000
Article on form submission to multiple e-mail addresses and custom confirmation pages.

http://office.microsoft.com/en-us/assistance/HA011491331033.aspx
Steps to set unique permissions from the root Web site to password protect that site.

Miscellaneous FrontPage Resources

http://www.grsites.com/  Here's a great site full of free graphics, backgrounds, fonts, sound effects, etc.

http://www.logosharx.com/logo-design-tips/xara.htm. Check out Logo Sharks for some great WordArt.

Java. These sites will be of interest to those of you who like Java.

http://www.jimcoaddins.com/Default.aspx features free add-ins that give you the power to control Microsoft FrontPage 2000 and later.

http://frontpageforms.com/ features tips and tutorials on form creation.

http://www.downloadfreefonts.com/fontfiles/bfonts.htm has a lot of downloadable free fonts.

http://www.blumentals.net/egifan/ to edit animated gifs.

http://scriptocean.com/ has a lot of neat shareware programs.

http://www.bananaspit.com/fp.htm is a Web site created by Michelle Padilla, a former student, to explain the steps to publish a FrontPage Web site to the free host, Tripod/Lycos.

Alpha Ware KISSfp
(p. 6.61) KISSfp 2.1 Add-on for FrontPage provides an enhanced way of publishing FrontPage-created Web sites to Web servers that do not support the Microsoft Office or FrontPage Server Extensions. KISSfp is ideally suited to publish your Web pages on multimedia CD-ROMs, and for using FrontPage with free hosts, which generally do not have Server Extensions loaded.

http://free-webhosts.com/ offers listings of some free Webhosts that support FrontPage extensions. A former student recommends Tripod and Angelfire due to good help and support and you are allowed to create folders during the publishing process.

http://www.swishzone.com/ This might be interesting to you if you want to add a movie to your Web site.

http://www.eleanorstravels.com/frontpage_images/index.htm includes a tutorial on using images in FrontPage with Paint Shop Pro and includes links for free trials of other imaging programs.

(p. 5.46) This third party software has some beautiful Web sites created with FrontPage and their own software. Take a look a the FrontLook Hall of Fame.

http://www.freefpthemes.com/
Free FrontPage themes.

AUSCOMP WORLDWIDE 1st Theme Factory for MS FrontPage
Offer a gallery of professionally designed themes using Microsoft FrontPage. Series 1 (10 Themes: Africa, Highway, Ice, Klingon, Maritime, Money, Music, Soccer, Starship, Wine), Sports (10 Themes: Baseball, Formula 1, Golf, NBA (National Basketball League), NFL (National Football League), NHL (National Hockey League), Riding (Horse), Scuba (Snorkeling), Soccer 2, Tennis), and Entertainment (5 Themes: Comic, Horror, Melody, Movies & Film, People).

http://www.frontpageworld.com/
Everything about FrontPage in one spot.

www.erol.co.uk  This site might interest you if you are looking to create a commercial site with shopping carts, databases, etc.

http://www.cvc3.org/tutorials.htm
California Virtual Campus: excellent tutorials on HTML, Web page design, and teaching online courses.

http://www.sitecrafters.com/support/
Comprehensive information on FrontPage.

http://www.frontpageportal.com/
Excellent comprehensive site for FP resources.

http://dynamicnet.net/support/frontpage.htm 
Excellent variety of FP resources and support.

http://www.echoecho.com/index.html 
Excellent site with a variety of tutorials (HTML, coding, graphics, design, etc.) and online tools.

http://www.net-sites.com/
A variety of FP resources.

http://www.accessfp.net/ 
A variety of FP resources and links.

http://www.ariadne-webdesign.co.uk/ariadne/frontpage/index.htm 
A variety of interesting FP tutorials.

http://www.bravenet.com/free_webtools_for_webmasters.htm 
A variety of resources for computer users.

http://www.fpug.com/ 
Information on domain registration, transfer and web hosting services.

http://www.thecounter.com/ 
Free Web counter.

http://reallybig.com/kevin/kscorner.shtml 
Articles on FP features.

http://www.scrubtheweb.com/abs/meta-check.html 
Free meta tag analyzer.

http://www.siteinspector.com/ 
Free Search Engine Submission, meta tag analysis, and FP resources.

http://www.dynamicnet.net/ 
FP support from an MVP.

http://www.dwfaq.com/tutorials/Miscellaneous/robot_txt.asp
DreamweaverFAQ.com has interesting articles about Web sites.

Miscellaneous

http://www.nch.com.au/switch/index.html has free switch sound file conversion software to convert audio files from CDs to wave files which can be heard on your pages.

http://www.JOOMLA.org Joomla! is an award-winning Content Management System (CMS) web site platform that will help you build websites and other powerful online applications is freely available to everybody. Their free "classifieds extension" offer many features for classified sites except, accept money.

The information below came from TheCounter.com Professional Edition, Vol. 2 Number 36, September 12, 2001 ,http://www.theCounter.com/

Usability - the Basics
by Andrew Starling

"Usability is the science of making sites easy to use. . . Two designers can argue forever about whether one page design is easier to use than another, and chances are, neither side has scientific proof that they're right. That's where usability gurus such as Jakob Nielsen (http://www.useit.com/jakob/) step in. With a thorough knowledge of the field's meager scientific research, and plenty of real experience, even when scientific proof is missing they'll be able to hazard a better guess than anybody else about what will work and what will have the user cursing the screen - or, more likely, slipping off to a better site or back to the TV to watch "The Simpsons".

As well as science and the opinions of experts, there's now a third source for usability information - look at what the most successful sites do. Companies like Amazon, eBay, AOL and Yahoo! have now had a few years to make their usability mistakes and come out the other side. It's no coincidence that if you look at the Web's most popular sites you'll find their designs are basically the same - white backgrounds, black text, blue hyperlinks, modest graphics, three or four columns on the home page, navigation at the top, and so on. Why? Because it makes them easy to use. . .

Page Width

If you're starting a site from scratch or revamping an existing site, one of your first decisions is how wide the pages should be. You want to make the most of available screen space but avoid the edges of your site disappearing into thin air at the sides of small screens. Horizontal scrolling should be avoided if possible. It's awkward to do and users hate it.

To make an informed decision, we need to know the demographics of screen sizes. Which are the most popular?

Here are figures from TheCounter.com (http://www.thecounter.com/), (repeated on echoecho.com).

Popular Screen Sizes
53%     800x600
32%     1024x768
5%      640x480
3%      1280x1024
2%      1152x864

800 pixels wide is the most popular and many sites choose this option (though 1024 is catching up fast). Just 5% of visitors still use 640 pixel screens - and they have to scroll horizontally to see 800 wide pages.

A few sites choose 1024 pixels wide, but that can't be recommended because it means the majority of users have to scroll horizontally. 640 pixels is a very safe option, yet isn't popular because it doesn't look good on large screens.

Incidentally, designing for an 800 pixel screen means turning out pages at 760 pixels wide to allow for screens that don't really produce as many pixels as they say, plus scroll bars and other nonsense at the sides. If you think your visitors use vertical toolbars, like the one for Microsoft Office, you may decide to lose even more space at the edges, but most designers assume this isn't an issue and just allow 40 pixels. That means 600 pixel pages for 640 wide screens, 760 for 800, and 980 for 1024.

Another width issue is that if you make full use of the space then you also need to take care that left margins created in browsers don't push your page to the right and cause the pixels at the edge to be lost in one browser or another. It's a common error, especially where composite images take up the entire width of the page. For Internet Explorer, left margins can be set to zero using leftmargin=0 in the <bodytag. Netscape Navigator doesn't recognize this instruction and if you want to remove the margin in this browser you need to also include marginwidth=0 in the <bodytag.

None of the fixed widths are entirely satisfactory, which is why many big sites go for 100% width pages. These change size to fully fit the user's screen. In terms of usability, it's definitely the best option. The only problem is that it places limits on design, since any page elements with a fixed width, including graphics, will cause the rest of the page content to reflow on different screen sizes, so you can finish up with conflicts or gaps. That's where the skill of the expert designer comes in - making sure everything works on all screen sizes.

In the past, some sites, including those of major players, used JavaScript to recognize the viewer's screen size and create an appropriate page at a specific size. This is no longer popular because an increasing number of visitors disable JavaScript to avoid the annoyance of pop-up windows. . .

A trick often used on simpler sites is bundle the less important elements into a column on one side, where they can be ignored by visitors with small screens. On 760 pixel pages it's common to keep the main text within a 600 pixel wide column, with blank space or promotions in the remaining area.

To sum up, use 100% page width if possible. Otherwise the best balance of usability and decent design (as seen on popular sites) currently comes from 760 pixel width pages, with the main text in a 600 pixel wide column.

About the author: Andrew Starling is a Web developer, consultant and author based in the UK. He was previously the Managing Editor of the Web Developer's Journal for internet.com and Technology Editor of the UK's Internet Magazine, for which he still writes. . .

 Last revised Monday, February 12, 2007 10:13 AM.


 

Hit Counter

  • This Web site and its entire contents are © 2007 [Amy Sirott] and may not be reproduced in any form without prior written permission. All rights reserved. Best viewed in Microsoft Internet Explorer, 1024 x 768 resolution. Revised October 12, 2008.