Introduction to Homesite 4

HomeSite is the award-winning HTML editing tool that lets you build great Web sites in less time, while maintaining Pure HTML. Unlike WYSIWYG authoring tools (Front Page 2002 and Dreamweaver 4), HomeSite gives you precise layout control and total design flexibility, and fully supports the latest Web technologies. The intuitive HomeSite WYSIWYN (what you see is what you need) interface puts the tools you need right at your fingertips. HomeSite's site management and quality control features make it easy to control the quality of your entire site.

HomeSite's WYSIWYN (what you see is what you need) interface increases user productivity by providing the developer the correct tools needed for the task at hand.

Users can easily switch from direct coding (Edit View) to working in a higher-level visual development environment (Design View)^[1] to checking the site in an internal browser (Browse View) or a specified external browser.

Increase user productivity with features such as tag insight, tag completion,pre-built templates, tag inspector, tag tree, tag snippets, thumbnail image preview, and color coding. Wizards are included for frames, tables, projects, JavaScript, etc.

HomeSite's Site View gives a hierarchical view of the entire Web site and integrates the link verification and document weighing quality-control features.

HomeSite generates "Pure HTML." Unlike many WYSIWYG tools, HomeSite does not add any code to the HTML page other than what is actually necessary for displaying the page through a browser. Extraneous code reduces performance, adds to page complexity, and hinders editing.

HomeSite maintains the integrity and formatting of HTML pages. Developers can open existing Web pages and HomeSite will not rewrite any of the HTML code.

HomeSite users can configure HomeSite to their needs with custom toolbars, custom buttons, default browsers, and custom Help files.

HomeSite offers a highly customizable interface; you can set it up to suit your work style. Nearly all of the workspace elements are movable, so you can move panes and toolbars and dock them in new locations. The program window is divided into several different panes as shown below.

The largest pane is the Edit window; this is where you write and browse your documents. On the left of the screen there are two vertically placed panes; the top one shows the Directory window that you are working in, the bottom is the Resource window. Below the Resource Window are the resource icons. These icons allow you to toggle among your local and remote resources and manage your Web project .

A development tool needs to provide a productive interface for its users, and the best way to do that is to give users the greatest possible flexibility to set up the interface in a way that works for them. As you create a web page, you will want to see how it will look in a browser. To view your page you can use Homesite’s Internal browser or an External browser such as Netscape Communicator or Internet Explorer.

To select the External browser option open the Options menu at the top of the screen. This will open a multi-sheeted dialog box. Click on the tab marked “Configure External Browser” to choose your external browser. If you have both Netscape and I.E. installed, choose the opposite browser to view externally from the Internal Browser.

The Internal browser, though limited in scope, is the most convenient to use ; the tabs at the top of the Edit window allow you to toggle between the editor and the browser without having to first save your file. If you have Internet Explorer installed on your machine at home, you can elect to use it as the internal browser. Documents viewed in the IE browser will be seen exactly as they would appear on the Web.

Almost every Homesite feature can be activated in more than one way. Standard Windows menus at the top of the screen provide access to most functions. Toolbars and buttons provide shortcuts to menu operations. Since Homesite is a Windows software product, all the standard cut, paste, drag, and drop Windows features, including moving toolbars, are available for use.

· Standard ToolBar–create, open, save, save all, find, replace, extended find, and extended replace.

· Edit toolbar–cut, copy, paste, show clipboard, paste all, clear clipboard, undo, redo, repeat last tag, and activate CodeSweeper.

· View toolbar-resource tab, results, quickbar, special characters, fullscreen, view external browser list.

· Tools toolbar–color palette, verify links, validate current document, thumbnails, spell check, mark spelling erros, style editor, and new image map wizzard.

Homesite allows you to have many documents open at the same time; each document has a name tab at the bottom of its screen. You can switch among documents by clicking on tags. When you have made a change to a document, its name will be displayed in blue. This is a reminder that your change needs to be saved. You can view the document in the internal browser to see if you are satisfied with its appearance and content. When you are ready, you can save your work. (However, I recommend that you save periodically to prevent loss of work.) If you attempt to close Homesite with open, unsaved documents it will remind you to save them.

In order to be know what your page will look like on the Web, it is important to view it in a browser. Homesite provides an internal browser that you can launch by clicking on the tab at the top of the Edit Window. This browser is fully functional, and all elements of your page, except frames, will be displayed in it just as they would in an external browser. Let’s test this out. You can choose to use Internet Explorer or Netscape Communicator as your internal browser.

Every html document has a specific form. The picture below illustrates this form. It must start off by announcing that it is an HTML document. This is done with the tag <html>.

The <title> open tag is followed by the text Untitled and the title close tag </title>.This title will be displayed in the blue Title bar at the Top of the Browser Window in the finished Web page.

Only information placed between the body tags, <body> and </body> will be displayed. Note that all tags shown appear in pairs, each having the same basic text with the text in the second tag by a forward slash, “/”; the first tag begins the section or use of the attribute or property, the second tag ends this action. There are some tags which do not require a closing tag such as an image tag.

In the Edit window replace the word “Untitled” with title of your page which describes your page.

Place your cursor below the body tag, <body>. Type a heading for your page. For example, I might put:

Toggle the browser to see how your page looks. Notice that the heading is just plain text, aligned to the left of the page.

Now we will experiment with some font properties. The tags described below are contained on the Font Menu:

1. Font Size Highlight the text you have just typed and click on the font tab. Select H1.

Now go back to edit mode, place the cursor between the <H1 and the > and hit the spacebar:

Another Drop down menu appears above. Double click on center and its writes the center between the double quotes.

2. Font Face The default font face is Times New Roman. If you want to change this type  and press “Enter”. A closing font tag will appear. Cut it and place it at the end of your text, after any other tags you may have on your text.

3. Font Alignment Font will automatically be aligned with the left margin. At the top right corner of your screen you will see a tab named “common.” Click on that tab. Icons for commonly used tags will be displayed. At the right end will be icons for centering the text or aligning it with the right margin. Be sure to highlight your text before clicking on one of these icons.

4. Font Color In a tag that you have used for a font property, type color=”blue”. This will change the color of your font to blue. You can use any standard color but be sure to put its name in quotation marks. If you don’t have a font tag on your text that create a tag for the font color by typing  and placing a closing tag  at the end of your text. Be sure to enclose the color in quotation marks.

5. Bold and Italics The tag for bold is  and for italics . The tag  is for emphasis and produces an italic-like text appearance. The tag  is for strong and produces a bold look.

6. Heading Text The H1, H2, H3...H6 text sizes are for headings and should only be used for that purpose. Go back to your heading text and choose one of these fonts for the text. The larger the H number, the smaller the font. This is the opposite of the F+ and F- font size tags.

7. Subscripts and Superscripts The tags  enclosing text will cause the text to be displayed as a subscript; for example a n will cause a_n to be displayed. Similarly, x n will cause xⁿ to be displayed.

You have seen that text can be assigned properties and aligned horizontally on a page. Text can also be separated into blocks or paragraphs. Type two short paragraphs, each consisting of two more sentences, on your Web page . View the result in the browser. It should look like one continuous paragraph. The spacing between sentences should be one, not two. There are tags that will format your text to have the appearance that you want.

8. The Paragraph Tag This tag  will put two blank lines (two carriage returns on a word processor) between the text it encloses and the next line of text. You can find an icon for it on the common menu at the top right corner of the screen. Place it at the beginning of your first paragraph. Put an ending tag  at the end of this paragraph. View the result in the browser. How many lines do you see between this paragraph and the next one? Note: The ending tag can be omitted if you place a paragraph tag at the beginning of the next paragraph.

9. The Break Tag This tag   acts as a carriage return. You can find an icon for it on the common menu at the top right corner of the screen. Placing two of these tags at the end of a sentence causes two blank lines to be placed between the sentence and the text that follows. Put two break tags at the end of your second paragraph followed by another sentence. Browse your page. You should see two line spaces between your second paragraph and the new sentence. This space may be wider than the spacing caused by the paragraph tag. Note: The break tag does not require a closing tag.

10. The Space Tag The space tag does not have angle brackets. By clicking on the nb tab the following six characters are written in the code:  . When you type text and use the space bar, only one space is recognized no matter how many times you press the space bar. Test this by typing text followed by a colon and two spaces then more text.

For example, type: “There are two ways to separate text into blocks or paragraphs:

View the result in the browser. You should see only one space between the colon and the 1. In order to have a second space recognized, you must insert a space tag, which is found on the common menu. This tag can be used to put two spaces between sentences, to indent a paragraph or to place an extra space wherever needed or wanted within a text region.

Image Type	Description
GIF	Graphics Interchange Format images are typically smaller because GIF only supports 256 colors.
JPEG	Joint Photographic Experts Group Images, also called JPG, can contain millions of colors. They are well suited for photographic images. They can be compressed to decrease download time.

Copyright issues have arisen with respect to the GIF format. To handle this problem a new format is being created called PNG, Portable Network Graphics. PNG is similar to GIF, but is not yet a real contender.

Graphic images are an important asset to a Web site. However, graphics do increase download time when someone visits your site so use them sparingly. Here are some possible guidelines that could be used in deciding where and how to put graphics into you page design.

1. Pick the right file format–GIF for small images such as buttons, toolbars, and backgrounds, JPEG for larger, more detailed images such as function graphs.

2. Try to reuse images within you site because most browsers cache files. Renaming an image for use on another page wastes storage space and could increase download time for subsequent pages.

3. Since graphics take longer to download than text, only use graphics in this manner when necessary, e.g. a mathematical expression that cannot be entered as text.

You can create graphics using software, such as Corel Draw, PaintShop Pro or Adobe PhotoShop, and save them in GIF or JPG format.

You can also find them on the Web. Here is a list of free sites that I have found by searching for “images” using a Web search engine.

When you find a graphic that you would like to use, right click on it. A pop-up menu will appear. Choose “Save Image As”. You will be prompted to select a directory. If you plan to use it on your Web page, store it in the same directory as your page. This makes it easier to load. When you are ready to place your graphic on the Web page, display the directory containing the image in the Resource window. Click on the name of the graphic file.

Holding the left mouse button down, drag the file onto your Web document in the Edit window. An image tag with the name of the file will be created. The graphic will be aligned to the left of the page.

If you want it centered or aligned to the right of the page, highlight the entire image statement and choose the Center or Right Align icon from the Common menu.

From your Web page you can link to pages on your site or other sites on the WWW. To create a link place your cursor on your page where the link is to be inserted. So that the link will be centered under the image I placed the cursor between the image tag and the closing </div> tag:

From the Common menu select the Anchor icon (the one with a picture of an anchor on it).

A dialog box appears. The first line in the dialog box asks for the HREF (hypertext reference). Type the address (URL) of the page on this line that you want to link to connect. For example, to link to the HomeSite download page.

Type http://www.macromedia.com/software/homesite/trial/ in the HREF box.

Then click on the discription box and type the words you want to appear as the link text on the page. This text will be the text that appears on the page, unscored, and blue in color.

Before you click OK, you may (optional) a target attribute (property). For example if you want the new page to be created in a window on top of the page you are linking from, select the attribute _top:

Press the OK button and alink will be created on your page. If you wanted to make text on a page become a link, highlight the text, then click the anchor tab. The description box will display the text highlighted and all you have to enter is the URL in the HREF box. After you press OK, the cursor will be situated just before the close anchor tag, </a>:

It is also possible to make an image a link. First place the image tag on the page. Highlight the entire image tag, then click the anchor tab and enter the URL into the HREF box. The image tag will appear in the description box. Click OK and the image becomes a link.

Lists are used to display information in a sequential manner. The most commonly used lists in HTML are unordered (bulleted) and ordered (numbered) lists. There is a list menu in the upper right corner of your screen (shown below):

The first four icons on the list refer to unordered and ordered lists. The first icon is a quick list creator. Click on the first icon. You will get a dialogue box that asks you for the kind of list and the number of items that will be on the list. Place your cursor at the beginning of an open line in the body of the text. Click on the Quick List icon and select unordered list with 3 items. Click OK . Tags will have been placed in your document as follows:

The <ul> and </ul> tags begin and end the list, the <li> tags start a list item. Type a list item after each <li> tag in the list format. View the result in the browser. If you want a line space after each item, end the item with a break tag.

Repeat the process this time asking for an ordered list with three items. Tags will have been placed in your document as follows:

The <ol> and </ol> tags begin and end the list, the <li> tags start a list item. Type a list item after each <li> tag in the list format. View the result in the browser.

These lists could also have been created using the UL, OL and LI icons on the list menu. The Quick List icon is easier and faster to use. Also there are three icons for a definition list.

There are many features of Homesite and HTML that we could not cover in this short minicourse. Among them are tables, frames, forms. Examples of the use of these and their source code are contained in the resource material that you may copy to your disk. You will see frames on my web site. My course syllabi use tables to format the formal information at the beginning and to construct schedules of homework and reading assignments. A test template uses forms and a JavaScript. For study of advanced features of Homesite or HTML consult textbooks available at various book and computer stores.

The following book is recommended for your use for further study of Homesite and HTML. It is in the HCC Brandon bookstore under the CGS 2940 course.

^[1]Design View only works with Internet Explorer.