- Understanding the Fundamentals of HTML
- Making a New Page
- The Document Window and Its Tabs
- Viewing the Source Code
- Using the HEAD Pane
- Setting the Width of Your Page
- Setting the link, alink, and vlink Colors
- Setting the Page Background Color
- Previewing Your Page
- Summary
- Q&A
- Quiz
- Exercises
- Quiz Answers
This chapter is from the book
This chapter is from the book
This chapter is from the book
Viewing the Source Code
Create a new page and type "Welcome to my Site." 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 investigate it so that you can better understand how it works.
In the Layout view, select the text Welcome, and then 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}
Note
Note that what you have selected in the Layout tab remains highlighted in the Source tab. Trust us, this will make your life easier later.
Figure 3.4 Take a look into the Source Editor to see the HTML that GoLive writes upon creating a new page.
Viewing a Page in Layout and Source Simultaneously
In GoLive 6, you have the ability to view the source code while working in the Layout mode in two different manners. One is through the use of the Source Code window, and the other is through the new Toggle Source Split view.
Using the Source Code Window
Click the Layout tab of the Document window and open 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. To aid you in seeing the complete code, select the fly-out menu in the upper right of the Source Code window and select word wrap. 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.
The Toggle Source Split View
A great new feature in GoLive 6 is the ability to view and edit your source code in a split-screen mode. By clicking on the Toggle Source button shown in Figure 3.7 you can see everything that is going on in the background. This feature works in every mode except for the Source mode, of course.
){kind=link}
Figure 3.7 Click the Toggle Source Split view to view and edit the source code while working in the Layout, Frames, Outline Editor, and Layout Preview