Viewing the Source Code (HTML)
Before you go any further, take a look at the HTML that GoLive generated when you created a new page. You are using GoLive, which means you don't have to actually write the HTML yourself, but there is no reason why you shouldn't take a look at it so that you can better understand how it works. Click the Source tab at the top of the new page to go into the Source Editor where you will view the HTML source code (see Figure 3.4).
){kind=link}
Figure 3.4 Take a look into the Source Editor to see the HTML that GoLive writes upon creating a new page.
HTML is a series of mark-up tags that direct a browser how to display text and images on a page. Most often, although not always, a tag comes as part of a set, with an opening and closing version. Opening tags are encased inside these characters: <tag>, while closing tags are identical to their partner with the addition of a slash / at the front of the </tag>.
As you can see, an HTML document begins with the <html> tag. Next is the head section of the document, which houses code that is used by the browser, but unseen by the user. For example, a piece of code identifying the author of the page might go here. (For more information on usage of the HEAD section, refer to "Using the HEAD Pane" later in this hour.) The HEAD section opens with a <head> tag, and closes with a corresponding </head> tag. Next is the body section, which holds the syntax for the area that displays to the user; that is, the text, images, multimedia elements, and links that appear on a page. The body section opens with a <body> tag, and closes with a corresponding </body> tag. Finally we come to the closing </html> tag, which ends the document.
Viewing a Page in Layout and Source Simultaneously
In GoLive 5, you have the ability to work in the Layout Editor, and through the use of the new Source Code window, which can be opened simultaneously, see your changes reflected immediately in the syntax. Likewise, you can make changes directly in the Source Code window and see your design updated in the Layout Editor as you do so. Let's explore this technique a little by switching back into Layout mode by clicking the Layout tab of the Document window and opening the Source Code window by selecting Window, Source Code from the menu. Take a look at the HEAD section.
To reveal the HEAD portion of the page while in Layout mode, click the little triangle at the top left of the page (see Figure 3.5). A pane will open that by default has three icons inside it. This is the HEAD section of your Document window. The icons represent three tags that have been written into the HEAD section of the HTML page.
){kind=link}
Figure 3.5 Click the triangle at the top left of the page to open the HEAD portion of the Document window.
Now look at the Source Code window, where you will see the actual HTML that the icons represent. Click the first of the three icons and notice how the corresponding syntax is highlighted in the source code (see Figure 3.6).
){kind=link}
Figure 3.6 As you select an item in Layout mode, the syntax for that element is highlighted in the Source Code window.
Changes you make in Layout mode are simultaneously made in the source code, and changes in the source code are reflected in Layout mode. One caveat: When you make a change in the Source palette, you must click back into the Layout view to see the change. This is true whether you are working with elements in the HEAD pane, or elements in the main portion (the BODY) of the Document window.