|
FrontPage Tip:
Get Control Of Your HTML Code
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
FrontPage promises to give webmasters the freedom to concentrate on design without dealing with the complexity of HTML code. It often delivers on that bold promise. But sometimes you have to pay a personal visit to your page's HTML code and edit it by hand to fix a layout problem. We'll highlight three FrontPage 2000 features that make that job easier.
Viewing Your Page Layout
First, you need to understand the three tab display options at the bottom, left-hand corner in your FrontPage editor:
- Normal - The WYSIWYG (what you see is what you get) display. FrontPage refers to this option as "Page View" in their documentation.
- HTML - The underlying HTML code for your page.
- Preview - Approximates how your page will display in the Internet Explorer browser.
|
Page view is a convenient way to design your initial page layout. You can enter text and place images on your Web page as easily as using a word processor. Use page view mode to edit information in the BODY section of your Web page.
HTML view lets you manually edit your HTML code - both the BODY and the HEAD sections. When you get ready to promote your site, use HTML view to insert your META tags.
FrontPage's preview option shows you how your Web page will look in Microsoft Internet Explorer. You can quickly check your page layout without opening a browser window. Don't use this as your only page test! Netscape and other browsers may display the page differently because FrontPage uses some Explorer-specific HTML tags. For instance, look what can happen to a table background image:
Eliminate all the guesswork with Browser Photo. Our newest tool will show you exactly how your page appears in 14 different combinations of browsers, browsers, screen resolutions, and operating systems.
Display HTML Tags In Page View
Use the "Reveal Tags" option when you're in page view mode to display the location and type of HTML tags in the body of your document. To display the tags, select "Reveal Tags" from the View menu or press Ctrl+/ to toggle the display on and off.
This option helps you understand the structure of your document if you're unfamiliar with HTML. It's also very useful when you have some spacing gaps or layout problems you can't correct with the basic WYSIWYG format.
Empty paragraph tags, in particular, cause problems because they insert mystery white space into your layout. The Reveal Tags option makes minor problems like that easy to find.
Find Code Easily In HTML View
But if you have a more serious problem - or want to include some custom JavaScript or other code on your page - you'll need to view all the source code in HTML view.
This option may seem a little intimidating if you're not comfortable with HTML code yet. A single tag in the body of your document blends right in with the other code, so specific areas of code can be hard to find. If you aren't careful, you could accidentally format the wrong font tag or insert a JavaScript action into the wrong form.
The FrontPage designers provided a neat trick to help you out. In Page view, use your mouse to highlight the area of the page that you need to edit. With the area still highlighted, switch to HTML view and you'll find the appropriate code highlighted too.
Customize Your HTML Code Format
Even though the HTML code might be easy to find, there's no guarantee it will be easy to edit - especially if you're editing someone else's Web page. FrontPage gives you detailed control over your HTML code format.
In the top menu bar, select Tools, Page Options, then click on the HTML Source tab. You'll get this pop up window:
- a. General: Select the second radio button to set the rules for your HTML layout.
- b. Base on current page: Tells FrontPage to analyze the structure of the current page and change all the formatting options in the HTML Source tab to match the current document.
- c. Formatting: Set the format of individual HTML tags on a tag-by-tag basis.
- d. Line breaks: Instruct FrontPage to insert line breaks before and after tags. Separate paragraphs, tables, and forms with line breaks for a more readable, editable document.
|
Customized options are especially valuable when multiple developers are maintaining parts of the same Web site. A standard coding structure eliminates confusion and frustration.
Even if you have sole control over your Web site and always will, use these FrontPage tools to get familiar with basic HTML concepts. Even a little HTML expertise will make you more comfortable with a variety of editors and help you design better Web pages.
|
