|
||
 |
||
|
| SoftQuad HoTMetaL Pro 6.0 |
 Email This
 Print ThisView My Personal Library |
|
Software Tips April 2001 • Vol.7 Issue 4 Page(s) 33-35 in print issue |
SoftQuad HoTMetaL Pro 6.0 Top-Notch Techniques For Complex Tasks | ||
 SoftQuad Software prides itself on its Web site development software that helps users write correct HTML (Hypertext Markup Language) code. In fact, SoftQuad capitalizes the name of this application, HoTMetaL, in such a fashion so to spell out "HTML" in its name. This emphasis on producing correct HTML has both advantages and drawbacks. On the positive side, the HTML that HoTMetaL produces loads easily into any HTML-editing program and is a pleasure to look at. The main drawback, which is also one of its selling points, is that, in the default view, you are working with all the HTML tags showing on-screen, which is distracting while you work. (Fortunately, you can hide the HTML tags.) Still, HoTMetaL 6.0 is great for those just learning HTML or for professional Web site designers. You can download a 30-day trial version of the application from hotmetalpro.com (http://www.hotmetalpro.com). You also can purchase a copy of this program for $99 at the same Web site. In addition, you can purchase a copy by calling SoftQuad at (800) 387-2777 or (416) 544-9000. HoTMetaL can help you produce a top-notch Web site, but only if you know how to use its tools. It has some great advanced features that will let you create a stunning Web site.
 Add & Fix Hyperlinks. Links to other pages in your present Web site, as well as links to off-site pages, are one of the most critical elements of any Web page. Creating these links in HoTMetaL is quick and easy. To start, position your cursor where you want to insert a link. You then click the Link tool. HoTMetaL displays a dialog box where you enter the target URL (uniform resource locator; Web address), and then HoTMetaL builds the link for you. By default, HoTMetaL uses the URL as the text you click to open the link, but you can quickly type over the URL with other text. You can also add frequently used URLs to a list so you can select them by name and reuse them without retyping. One of the problems with links, especially as your Web site grows, is making sure all of them remain valid. HoTMetaL can check both internal and, if you are connected to the Internet, external links and tell you which ones are broken or invalid. To check internal links, click the Project menu and then Broken Links. A dialog box will list every broken internal link on your Web site. To fix a broken link, all you do is double-click the link and enter the correct URL. To find and fix hyperlinks to external Web sites, click the Project menu and then External Links. This will bring up a dialog box that displays every external link and its status. Again, you double-click a link to enter the correct URL. In addition, when you fix a broken link once, it will make the repair for every use of that URL. Another problem that Web sites can have with links are orphan files. These are HTML or image files that exist on the Web server but that your site does not link to. In other words, these are unused files. You can find these by clicking the Project menu and selecting Orphan Files. You can transfer the resulting files to a HoTMetaL window where you can examine and, if desired, delete them. These tools make it easy to keep only current files and links on your Web site. Image Maps. Next to links, images are about the most important aspect of your Web site. To insert an image with HoTMetaL Pro, position your cursor where you want to insert the image. Then, click the Image tool. In the dialog box that comes up, you can browse to the image file and then fill out other optional information, such as how to align the image and what text to show while the image is loading. Once you insert the image, it is easy to create an image map (lets users click different parts of a single graphic image and link to different pages or get more detailed information). When you click the image, the image map toolbar displays. It has buttons for the shapes, such as rectangles, polygons, and circles, you can use to create your image map. You use these buttons to trace out the hot spots and then fill in a dialog box specifying the URL for each hot spot, along with other optional information. HoTMetaL can create both client-side and server-side image maps at the same time. (An image map loads different Web pages depending on where you click an image. There are two types of image maps: client side and server side. HoTMetaL can create both at the same time. With a client-side image map, all the information about the map is stored within the HTML file. When the user clicks the image, all the processing and requesting of the required image is handled locally. With a server-side image map, all the information about the map is stored on the server in a separate file. When the user clicks an image, the coordinates of the click are sent back to the server for processing. It then sends the required page to the browser. All modern browsers support client-side image maps, and they are the preferred form.) A hot spot selection tool also makes it easy to see the areas that hot spots presently cover. From this view, you can easily move or resize any of the hot spots so you can get the image map to work exactly as you want it to work.
Rollover Animations. Another popular addition to many Web sites is the rollover animation. HoTMetaL can help you quickly create a button that uses a rollover animation. For example, you could create a button that displays one message when a cursor is over it and another message once a user clicks it. You also could have the button change colors and the text change formats. To begin, click the Installed Assets line of the Asset Manager. Then, click the Button Maker line. This will open the Button Maker in the bottom panel. Scroll down, drag one of the buttons onto your Web page, and drop it in the position where you want the button. You have three choices: a button that changes when a user clicks it, a button that changes when the mouse is over it, and a button that changes for both events. Once you place the button in the document, a dialog box will appear where you need to fill in the text for each state of the button as well as the formatting for the text and buttons. Once you fill in the required information, HoTMetaL constructs the buttons and saves them as GIF (Graphics Interchange Format) files. Fill in the URL to jump to when a user clicks the button to complete the rollover animation button. HoTMetaL will then add the supporting JavaScript (a language used for creating Web sites) code to your Web page. Embedded Lists. Once you add some funky rollover animation to spice up your site, you may want to make it a little more readable. One way to do this is through lists. HoTMetaL offers two types of lists: numbered and bulleted. In either case, the paragraphs are indented and do not have any spaces between them. You create these by clicking the drop-down Style list and selecting either Bulleted or Numbered lists. Sometimes you need to embed a second list inside the main list. For example, you might be listing the 10 steps to a dynamite Web site where number eight is to submit your Web site to a search engine. Under step eight, you want to list the steps for submitting your Web site. This is part of the main list, but you want the list to be indented from the main list and use its own numbering so it stands out. To start the embedded list, press ENTER to go to a new line and then press the TAB key. This will start a new list that is indented from the present list. If you are using a numbered list, the numbering will restart at one. When you finish, press the SHIFT-TAB key combination to return to the main list. If that was a numbered list, numbering will resume with the next number in that list. You can even indent lists more than once or switch and embed a bulleted list inside a numbered list or vice versa. To do this, start the new list as before and then use the drop-down Format list to pick the new list type. When you switch list types, the browser will add a blank line before and after that list. Tables. If you can't clean up your text using a bulleted or numbered list, try using a table to organize your text. Tables are great for displaying complex information. Creating a table in HoTMetaL is easy. You position the cursor at the point where you want to build a table and then click the Table icon. You can then enter the number of rows and columns, the border size, and the background color for the table. Once you complete this dialog box, HoTMetaL builds the table for you. HoTMetaL builds the table with a single space in each cell. Without this space, some versions of Netscape's Navigator browser will not display the border properly. Once HoTMetaL builds the shell of the table, you can go in and insert text or images into each of the cells using the standard HoTMetaL editing tools. Many table-formatting options are available by right-clicking the table and selecting Table Properties. This brings up a tabbed dialog box that lets you change many cell, row, column, and table attributes. If you need to insert or delete rows or columns or perform other advanced table options, you can right-click in the toolbar area and display the Table toolbar. In addition to managing rows and columns, it has buttons to create new tables, merge cells, and move text between cells. Frames. Another way to organize information on your site is with frames. Frames are one of the most useful but difficult to manage design elements you can use on your site. Frames split the browser window into two or more sections, and a different document loads into each section. The most common use of frames is to load navigational tools into one frame and the document that the user wants to view in the other frame. This lets the navigational tools remain static on the screen while the user scrolls through a document. (NOTE: A few older browsers do not support frames.) To create a new framed document in HoTMetaL, click the File menu, select New, and then choose Frames Page. This gives you a list of several types of frames from which you can select. The two you will use most frequently are Header And Contents and Contents. Both give you a small frame on the left for navigational tools and a large frame on the right for content. Header And Contents adds a small frame at the top for an ad or title. Once you create the frames, you can control many of their attributes (such as if they can be resized, if scroll bars are used, and if the borders are showing) by right-clicking the frame and using the commands in the pop-up menu. Once you build the framework, you must specify a name for each frame and the Web document to load into that frame by right-clicking it and selecting the Frame Properties command. Once the frames have names, you can create targeted hyperlinks that insert the documents into the appropriate frame by entering the name of the frame into the Target Frame box on the HoTMetaL link dialog box. Previewing Your Document. Like most HTML editors, HoTMetaL has a WYSIWYG (What You See Is What You Get) view. However, nothing beats double-checking the appearance of your document in a browser once you think it is done. Document previewing is one of the strong points of HoTMetaL. It is not married to one browser or even one release; HoTMetaL Pro can preview your document in as many browsers as you have on your system. When you install HoTMetaL, it adds links to the browsers it finds on your system. To preview a document in one of those browsers, click the File menu and select Preview In Browser. This option will display the Browsers dialog box, which shows the browsers HoTMetaL knows you have on your system. You can highlight one and click Preview to use that browser to view the document. To add a new browser, just click the Add button, find the browser program on your system, and click Open. If you choose to display the Preview toolbar, each browser you have added will have its own button on this toolbar. To quickly display the page on which you are working, you can just click the button for the browser you want to use. Web Site Management. As your Web site grows, you continually add pages. You link these pages together and with off-site files. It is not uncommon for a personal Web site to have dozens of pages, a small-business site to have hundreds of pages, and a professional site to have thousands of pages. Clearly, keeping track of all these pages and how they interact is a difficult chore. The link testing we discussed above is a good start on maintaining your Web site, but you need to do more. To see your Web site visually, select Web View from the View menu. This shows each Web page as a color-coded box. Green is the home page, blue is a valid on-site link, black is a valid off-site link, and red is a broken link. HoTMetaL Pro shows the links between the pages as lines. By default, this view shows the home page in the center of the diagram, but you can click any on-site page to move it to the center so you can focus on its links. To investigate any page further, hold the mouse cursor over that page. A pop-up display will tell you the name and full path to that file. You can right-click any on-site file to edit it or to view it in a browser. (NOTE: You can view but not edit off-site files.) Keep Going. Even though its operation takes some getting use to, once you are familiar with HoTMetaL, it is a powerful tool for creating professional Web sites. Just keep working with its tools to uncover all the advanced options you can use.  by Ronny Richardson
|
|
Home Copyright & Legal Information Privacy Policy Site Map Contact Us