Creating a Web Page
Web sites are made up of a series of interconnected documents (pages) that a visitor can surf through using something called hyperlinks. Hyperlinks are pieces of text or images that, when you click on them, take you to another page or another area on the current page. The pages themselves are simply text documents that utilize Hypertext Markup Language (HTML) to create the links.
There was a time when you needed to write HTML by hand in order to create even the simplest of Web pages. With the advent of applications such as Adobe GoLive, you no longer need to write all the syntax yourself. You put together the page the way you want it to look, and GoLive will write the HTML for you in the background.
In this hour, you'll learn about
Creating a new Web page in GoLive
The Document window and editing modes
How to view the HTML that GoLive generates
The HEAD section
Using a pre-set page width as a guide for designing
Setting basic page attributes
Previewing your page in GoLive and in a browser
Making a New Page
When you constructed your first Site File in Hour 2, "Creating a Site File," GoLive automatically created a page named index.html and placed it into the Files list. That file will become your home page. As you continue to build your Web site, you will need to add more pages to your Files list. You should work with your Site File open as we explore two ways of placing a new page into your Web site, and then learn how to work with those new pages.
To Do: Create a New Page
To create a new page in your Files list, use one of these two methods. Remember, you should have your Site File open, and the Files Tab selected.
Method 1: To create a new page using the Objects palette, complete the following steps:
Open the Objects palette by choosing Window, Objects from the menu, or by pressing Cmd+2 (Mac) or Ctrl+2 (Windows).
Click the Site tab, which has a GoLive icon on it.
Drag the Page icon from the palette to the Files tab of your Site File (see Figure 3.1).
A newly created page will be named untitled.html by default. You can now type in the name of your choice over the word untitled. Include .html or .htm as the extension so that it will be recognizable by a Web browser.
){kind=link}
Figure 3.1 Drag the Page icon from the Objects palette to the Files tab of your Site File.
NOTE
For a complete explanation of file type extensions, including those used on the Web, visit http://www.whatis.com.
Method 2: To create a new page from the File menu, complete these steps:
From the menu choose File, New, or press Ctrl+N (Windows) or Cmd+N (Mac). A new untitled page will open.
Now you must save the page into your Site Root Folder for it to appear in the Files list. From the menu choose File, Save, or press Ctrl+S (Windows) or Cmd+S (Mac).
In the Save As dialog box, click the two-way arrow next to the GoLive icon to reveal a pop-up list that includes the following choices: Root Folder (Mac) or Root (Windows), Stationeries, and Components (see Figure 3.2).
Select Root Folder (Mac) or Root (Windows). This automatically brings you to the correct folder on your hard drive into which you will now save the page.
){kind=link}
Figure 3.2 Click the two-way arrow next to the GoLive icon to choose the Site Root Folder root from the pop-up list.
TIP
We strongly recommend that you do not use generic names such as page1.html and page2.html for your pages. Later, when you want to edit your pages, you will have a hard time remembering which page is which. If you have a site that has information on services and products and contains a contact form, you could name those files services.html, products.html, and contact.html. Then the filename itself will help you determine the content of the page.
Maintain consistency in your naming structure. It is generally easiest to do so by using only lowercase letters in your filenames. Some hosting services exclude the use of spaces and certain characters that might confuse the server. Some of those characters are %, \, /, :, and ?, but check with your hosting service for a complete list.
By default, all newly created pages in GoLive open in Layout mode. Layout mode is the visual editor that enables you to place images, text, and multimedia elements into your page without writing any HTML code. GoLive writes it for you. We'll briefly describe the other viewing and editing modes available to you in this hour, and you can find in-depth instructions on how to use them later in this book.