FrontPage Help Center. Topic: FrontPage Basics

Transcription

1 FrontPage Help Center Topic: FrontPage Basics by Karey Cummins

2 Getting Started... FrontPage is a "What You See Is What You Get" editor or WYSIWYG (pronounced wizzy wig). This means that the "editor" writes the HTML code while, to the casual user, the interface is very much like typing in MS Word or similar word processing program. It's a very powerful program, advanced enough for professional web designers, and yet easy enough for the beginner. Like any other program, there is a learning curve. We found it worth the time and effort and love the program... which is what started us on the path to theme and template designing. Throughout these sections we will help you get your basic web developed and ready for your content. We will cover getting your new template installed correctly on your computer, creating your FrontPage web and adding pages. As well we will take you through the basics of FrontPage Navigation. FrontPage bundles in some very easy-to-use features: Easily add or delete pages from your web Create forms - from simple to complex FrontPage keeps track of all changes Run helpful reports to find broken links, outdated pages, and more Work on your site "live" on the host server, if desired. Easy to get your site up and running Dynamic HTML effects Visual guide to your site and navigation structure Create on-the-fly Table of Contents and more Convenient use of "themes" and templates to change the look of your site Well...the list just goes on and on. So this is good, isn't it? Well there is a catch to the easy convenience afforded by FrontPage. Most of the great features rely on specific scripts and programming called "Server Extensions". These must be present on your host site in order for many elements to work correctly. Just a final word...select your web host carefully. We advise selecting one who is familiar with FrontPage, offers good technical support, and one who doesn't blame every little glitch on FrontPage. Do some research on the different types of servers (Unix, NT, etc.) and how they may affect your web performance. The FrontPage Work Space... Let's take a moment to get to know FrontPage a bit. If you want to do some of these tutorials just dive right in. You can always create a new web later when you want to begin editing for your website. There are really only four workspaces you will be working with when building your site. This section will explain what to look for when you go through these help pages.

3 1. The Normal Tab Workspace When you are working in FrontPage, this the main workspace. Most of your editing will take place here. Below the image is an explanation of each area. View Bar - Use the Views Bar to switch to different views. If the Views Bar is not displayed, go to View/Views Bar. Folder List - The Folder List displays all files and folders within your web. You may expand and collapse subdirectories. Toolbars - Use the toolbar for commonly used functions. Document Path - Shows the location of the current file relative to the root directory. Load Time - Shows how long the page will take to load. You may click on it to change modem speed. Page View Tabs - Click on these tabs to switch between Normal (normal editing mode), HTML (HTML editing mode), and Preview (view page in browser-like window) mode. Status Bar - When you mouse over hyperlinks in Page View, the hyperlink displays in the bottom left-hand corner so that you can quickly check it. In HTML view, the bottom left hand corner displays the line and column number. In Folder and Navigation View, the selected document's full pathname is displayed. The Status Bar also shows what is going on when you are saving documents, copying documents, etc. 2. The HTML Tab Workspace. On occasion you will need to work in the HTML section of your site. We don't suggest making any changes here unless you know what you are doing, or have received clear instructions on making changes to a particular area. Below the image you will find an explanation of each of the areas.

4 Folder List - The same as above Head - The Head is where you will find your meta tags etc and Inline Style Sheets. Body - This is main content area of your page. Most of the code that controls your page will be found here. 3. The Preview Tab Workspace This area is just so you can see what is going on in your page. Use it for quick checks of you page. It is more a diagnostic page to test script and basic layout. It should not be used instead of Previewing in the Browser, as often things will not work correctly in Preview, and often will appear incorrect. For example your hovers will not work in Preview mode. Always test your page in the browser and always test your site in an 800 resolution if you are not already working in it.

5 4. The Navigation View Workspace In this view you will be able to drag and drop your navigation around, rename page names, and add or delete page from your web. Below is an image of what you will see when you are in the Navigation view. Note that you can change this view from "portrait" to "landscape". The FrontPage Toolbars... Switching Views is easy when you use the Views bar (on the left). Just click on the icon that you want to use. Or you can also use the View menu on the menu bar. Page View is where you edit your pages. Within Page View are three tabs (at the bottom of the screen). Normal allows you to edit pages in WYSIWYG* fashion. You can edit the HTML code directly using the HTML tab, and you can preview your page (as it will look in Internet Explorer) in Preview. (If you use Frames, you'll have two more tabs: No Frames and Frames Page HTML.) Folders View allows you to see your files in a folder list and to work with them as you would in Windows Explorer. You may change page file names here. Reports View generates different reports which you may find helpful. For example, if you want to check your hyperlinks for broken links, you may generate a Broken Hyperlinks report.

6 Navigation View is where you may see and change your web structure. To add your pages to the web, drag them into the Navigation View from the Folder List. Page labels are what will show on navigation buttons. Hyperlinks View allows you to see all the hyperlinks leading to and from a page. Select one of the pages in the folder list to view the hyperlinks. Tasks View is helpful when you are maintaining a web. You may create different tasks and assign them to different people or workgroups Create a Custom Toolbar If you find that you use certain commands more often than others, you can create your own toolbars to help organize your workspace in Microsoft FrontPage. Below is how the toolbar appears on my computer. This allows me to have the View Bar deactivated and still get the benefit of quick access to functions. 1. On the Tools menu, click Customize, and then click the Toolbars tab. Click New. 2. In the Toolbar name box, type a name for the new toolbar, and then click OK. 3. FrontPage adds the new toolbar to the list in the Toolbars box and also displays the new toolbar in your workspace. 4. Click the Commands tab, and then in the Categories list, click the group that contains the command you want to put on the new toolbar. 5. In the Commands list, click the command that you want to put on the new toolbar, and then drag the command onto the new toolbar displayed in your workspace. 6. Repeat steps 2 and 4 until you've added all the commands you want on the new toolbar. You can also add a command to a toolbar by pressing CTRL and dragging the command from an existing toolbar. To rename or delete a custom toolbar, click Customize on the Tools menu, and then click the Toolbars tab. In the Toolbars box, select the custom toolbar you want to rename or delete, and then click Rename or Delete. Icons Explained... If you have decided to create a custom toolbar, here are a few icons you may want to include.

7 Stop - Use this icon when you what to stop a process like saving, I don't use this one very often but you might find it handy when something is taking longer than it should. New Page or Web - When you click on the icon itself it will create a blank page, when you click on the arrow you are given a choice to create a new page or new web. When you choose the new page or new web a dialogue box will open and allow you to create a new page or web from a template. Open Page or Web - When you click on just the icon it will open a dialogue box that will let you open a page within the web you are working on. If you click on the arrow you are also give a choice to open a different web. This is handy when you are coping content from another web. New Folder - This creates a new folder in your Folder List. Save - Saves the current page. A dialogue box will open if it a new page so you can name the page and save the images on it. Save As - This lets you save the current page as a new page or page template. Publish Web - This will publish your web to the last place it was publish to before. If it is the first time the web is being published a dialogue box will open so you can give directions to the correct publishing destination. Preview in Browser - This will open the page you are working on in a browser window. Spell Check - Goes with out saying Undo and Redo - lets you undo and redo your actions Delete - Deletes any highlighted areas. Insert Table - Lets you insert a table at a specific location on your page. Select Table or Cell - Highlights an entire table or cell at your cursor location. Insert Picture - Opens a dialogue box so you can insert an image from file or clip art. Refresh - Refreshes the page, folder, or web. Navigation View - Opens the Navigation View workspace Format Theme - Opens the Modify Theme dialogue box. Insert Include Page - opens a dialogue box that lets you add an include page.

8 Insert a Table of Contents - opens a dialogue box that will allow you to add a Table of contents or site map to a page. Help - Opens FrontPage help Text Format Toolbar - Used as is. Dynamic HTML - Used as is. This toolbar allows you to create dynamic content. You can now modify (customize) your tool bar with the items you use most frequently. Keyboard Shortcuts... Getting to know FrontPage's keyboard shortcuts and right-clicking will help you be more efficient. Here are a few of the keyboard shortcuts we use most often: Line Break Picture Properties Hyperlink Navigation Bar Properties Inserting a row at the end of a table Select everything on the page Undo Redo Save Switch between open files Refresh page (helpful after saving files) Copy Paste Shift-Enter Click on picture, then type Alt-Enter (or right-click) Highlight the word or graphic and type Control-K Click on navigation bar, then type Alt- Enter (or right-click) While you are in the last cell, type Tab and a new row will automatically be inserted. Control-A Control-Z Control-Y Control-S Control-Tab F5 (also works in browser) Control-C Control-V

9 Bold Italic Control-B Control-I Q: How do I keep my lines from having wide spaces between them? A: Use a Line Break. To insert a line break (without starting a new paragraph), go to Insert and select Break (it may be on the hidden menu). The keyboard shortcut is to type Shift-Enter for a line break. Q: How can I move from Page to Page in my web without having to open each page from the Window menu or my Folder List? A: A handy keyboard shortcut is to use Control-Tab to switch between pages. FrontPage 2002 now has page tabs to help you switch between multiple pages more easily, you can simply click on the page tab to switch pages.