Understanding the Site Window

The site window is your best friend. If you want your site to be trouble free, never work on individual pages without first opening the site window. GoLive depends on the site window to do its heavy-duty link checking and site management, so heed this simple rule of thumb and your job will be significantly easier. Open a site now. Notice that the site window is split into two panes and that each pane has a series of tabs across the top. There's a good reason for thatkeep reading.

The Files Tab

Click the Files tab on the left side of the site window. Any item that will ultimately end up on the web server, such as HTML pages, images, QuickTime movies, PDFs, and external CSS or JavaScript files, will be listed in the Files tab. This tab is a reflection of the items that physically exist in the web-content folder of the site.

From within the site window, you can create new pages or folders, rename pages or folders, or move any of them around just as you would in the Mac's Finder or in Windows Explorer. The difference between doing those things on your desktop and doing them in the site window is that when you use the site window, all your links and references remain intact. Promise me now that you will always work with your site window opened!

The Extras Tab

Now click the Extras tab on the right side of the site window. The Extras tab displays additional folders that were automatically created when you created a site or imported a site into GoLive. The purpose of those folders is to help you organize your project. The items housed here, such as templates, components, and Smart Objects, are used during the creation process, but because there is no need to upload them to the web server, they are kept separate from the items shown in the Files tab. They physically exist in the folder called web-data.

Did you Know?

Just as you can with palettes, you can tear off tabs in the site window and rearrange them as you like.

To close the right pane of the site window, click the Toggle Split View button in the lower-right corner (see Figure 9.10).

Figure 9.10. The site window opens into two panes by default. You can close the right pane by clicking the button with a double arrow.

By the Way

The web-content folder is the one that holds your home page, which is the default page that loads into a browser when someone visits your site. The web-content folder is also referred to as the root folder of your site.

The nine folders automatically created and displayed in the Extras tab are Snippets, Components, Stationery, Templates, SmartObjects, InDesignPackages, Diagrams, Queries, and SiteTrash. Let's define what is stored in these folders:

• Snippets Pieces of HTML, images, text, or just about anything you might like to have handy to use throughout your site are stored in the Snippets folder.

• Components Components are pieces of a page that are reuseable. For example, you can create a navigation bar and save it as a component. Then you simply drop the component onto a page and have all the links intact. Later, if you want to change a link on the navigation bar, you simply need to make the change to the component, and GoLive will update all the pages on which you have used that component.

• Stationery You can design a page the way you like it and save it into the Stationery folder. Later you can use the stationery to create a new page that is a duplicate of the original.

• Templates Template pages work similarly to stationery but are even more powerful. If you update a template page, all the pages that are based on that page will be updated, too.

• SmartObjects This folder is where you can place native Photoshop, Illustrator, and Acrobat PDF files that you intend to use in your site. GoLive's Smart Object technology enables you to create Web-ready versions of these files while retaining a link to the original. Thus, if you update the original file, your Web version updates as well. More information on Smart Objects follows later in this chapter.

• InDesignPackages If you have created a document in Adobe InDesign and you want to reuse its elements in your website, you invoke the Package for GoLive command in InDesign. Packages imported into GoLive are placed in the InDesignPackages folder.

• Diagrams Diagrams are a method of mapping out the architecture of your site before actually building it. You can create a hierarchy of folders and pages, show links between pages, add annotations, and more. Although diagrams are stored here, you open a diagram from the Diagram menu.

• Queries Queries are a powerful way to search for items in your site using multiple criteria. After you have created a query, you can save it. Saved queries are stored in the Queries folder.

• SiteTrash The SiteTrash folder is a holding area for files you have removed from your site. They remain in the SiteTrash folder until you put them into your system trash.

Although all these items are stored in the web-data folder, which causes them to appear in the Extras tab of the site window, the easiest way to use many of them is by dragging and dropping them from the Library palette, where they will also be listed.

To save a page as a component, stationery, or template, set up the page as necessary, choose Save As from the page's flyout menu, and select an option from the list. GoLive's Save dialog box opens and takes you directly to the appropriate folder on your hard drive. Give the file a descriptive name and save it. From then on, the file will appear both in the corresponding folder in the Extras tab and in the Library palette.

Library Items

GoLive's Library palette is a repository for various reuseable items, each of which can be made accessible on an application-wide level or on a per-site level. Access the Library palette by choosing Window, Site, Library, and look at the buttons across its top. Hovering your mouse pointer over a button for a second produces a ToolTip with the button's label on it.

As with the Objects palette, each button in the Library reveals a different set of library objects. From left to right, the buttons represent snippets, components, Smart Objects, stationery, templates, and documents (see Figure 9.11).

Figure 9.11. Use the buttons in the Library palette to access the various sets of library items.

Click the Snippets button and notice the folders listed there. The Application-wide folder always is in the list, and any item inside that folder can be accessed at any time, no matter which site you are working on. The Library items from individual sites are available only when that site is opened (see Figure 9.12). You can drag an item from a site folder to the Application-wide folder to make it available application-wide. Likewise, you can add an item from the Application-wide folder to a particular site by dragging the file into the site folder.

Figure 9.12. The opened site's library items as well as the application-wide library items can be found in these folders.

To create a snippet, select anything on your page and drag it into one of the folders in the Snippets set of the Library palette. To use a snippet, drag it out of the folder and drop it onto a page. Snippets can contain any portion of a page, including, but not limited to, tables, text, images, and links. You can also store source code in the snippets area.

Any file stored in the SmartObject folder of your site window is listed in the Smart Objects portion of the Library palette. Add more Smart Objects by dragging them into a folder. Use one by dragging it onto a page.

Components, like snippets, can be created from any part of a page. They are especially useful for elements that might change at times, such as a copyright notice. You use a regular blank page to set up the component as you'd like it; choose Save As, Save as Component from the page's flyout menu at the upper-right corner of the page; and then save it into the site's component folder. (For more information on how to modify a page, refer to the section "Using Basic Objects," later in this chapter.) The component appears in the Components folder of the Extras tab and in the Components section of the Library palette. To use the component, drag and drop it onto another page. To modify the component, double-click it. When you close or save the file, GoLive prompts you to update any other files that are dependent on the component.

You can use stationery pages instead of opening a page and choosing Save As from the File menu. A page created from a stationery file looks exactly like the original; however, if the original is changed, that does not affect the look of the pages that have been created from it. To create a page based on the stationery, double-click it. In the dialog box that appears, choose whether to create a new page or modify the existing stationery (see Figure 9.13).

Figure 9.13. Clicking Modify enables you to edit the Stationery page, whereas clicking Create creates a new page based on the Stationery page.

Create a template page by setting up the page and then opening the Template Regions palette from the Window menu. (You can find information on how to build pages later in this chapter, in the "Using Basic Objects" section.) For the page to be defined as a template, it needs to have at least one editable region. Regions that are not specified as editable cannot be modified in the pages made from the template. To define an editable region, select an area on the page and click the Create New Editable Paragraph Region button in the lower right of the Template Regions palette (see Figure 9.14). You can rename the region, if you'd like. When you are done assigning editable regions, choose Save As, Save as Template from the page's flyout menu. To create a page based on the template, double-click the template's name in the Library palette's Templates tab. In the dialog box that appears, choose whether to create a new page or modify the existing template.

Figure 9.14. Creating a new editable region.

Adding Assets to the Site

Although it's obvious that there are lots of places to store things in your site window, it's not quite as clear how you actually get items in there. GoLive, like the other suite applications, usually gives you several ways to approach a task. Let's explore those now. Make sure that your site window, not a document window, is in front.

Adding New Pages

To add a blank new page to your site, do any of the following:

• Choose File, New from the main menu bar.

• Control-click or right-click in the site window and choose New, HTML Page.

• Click the Site set of tools in the Objects palette, and then drag a generic page icon into the site window.

• Click the Site set of tools in the Objects palette, and then double-click the generic page icon.

The first option opens a new page with the generic filename untitled.html. GoLive appends a number to that name if you create more than one new page. After the page has opened, you must save it into your Files list for it to become part of the site. Choose File, Save As, and give the page an appropriate name.

Did you Know?

In the Save dialog box is a handy-dandy button at the lower left that is a real time saver. It's called the Site Folder button, and clicking on it reveals a direct shortcut to your root folder, as well as your Stationery, Components, and Templates folders (see Figure 9.15).

Figure 9.15. The Site Folder button saves you time by bringing you directly to your root folder or other frequently accessed folders in your site.

The other three options in the list put the new page directly into the Files tab of the site window and highlight the portion of the name that comes before the file extension. This makes it very easy to create a new page and then immediately give it an appropriate name (see Figure 9.16). After the page has been named, you simply double-click on it to open it.

Figure 9.16. Using the contextual menu method or dragging from the Site objects puts a new file into your site and immediately lets you name it.

By the Way

When adding a new file by double-clicking from the Objects palette, you'll need to focus the pane and/or folder in which you want it to land. For example, if you want to create a new blank page inside the Templates folder in the Extras Tab, select the folder and then do the double-click trick.

Did you Know?

If you save a file from an external source, such as from Photoshop, into your site at the Finder or Explorer levels, you'll need to click the Refresh View button in the Main toolbar to update your Files list.

Adding Folders

You'll want to organize your site in a logical way, and the easiest way to accomplish that task is by creating folders for the various sections of your site. To add a folder, click the Create New Folder button at the left end of the Main toolbar, or use the contextual menu by Ctrl+clicking (right-clicking) in the site window and then selecting New, Folder. You can also choose Site, New, Folder from the menu. When the new folder is created, you can give it a name and then drag pages, images, multimedia files, and so forth into or out of the folder to create an easy-to-maintain structure.

A gray triangle on a Mac to the left of a folder name, or a plus sign on Windows, indicates that the folder has contents. To reveal the contents of the folder, click on the triangle or the plus sign.

To open a folder, double-click on the folder icon. Instead of the folder merely opening to show the list of contents, this actually brings you down one level into the folder itself, which means you no longer see the items at the same level as the folder, but only the items inside the folder. To move back up a level, click the Upwards button found in the upper-left corner of both the left and right panes of the site window.

Did you Know?

Clicking the Upwards button when you are already at the root level of your site opens a Local File Browser that enables you to navigate through your hard drive.

Deleting Files or Folders

To delete a file or folder, select it and then click the Trash button on the Main toolbar. This moves the item (and its contents, if it's a folder) into the SiteTrash folder on the right side of the site window. A dialog box appears asking you to confirm the move. The great thing about the Site Trash is that if you've deleted an item in error, you can simply drag it back into the site at any time. To permanently delete a file or folder from your site, select it in the Site Trash and click the Trash button a second time. This moves the item into your Finder trash or Explorer Recycle Bin (see Figure 9.17).

Figure 9.17. The SiteTrash folder is a built-in escape route, in case you need to recover a file you inadvertently deleted.

Adding Existing Files

Suppose you need to add files that already exist to your site. For example, you might have images, QuickTime movies, PDFs, Photoshop files, Illustrator files, JavaScript files, CSS files, or any number of other documents that you want to incorporate into your site. No problem. To add files to your site window, do one of the following:

• From the menu, choose File, Import, Files to Site. When the dialog box opens, navigate through your drives and select the files that are to be added.

• Drag and drop a file or files from your drive directly into the site window.

Did you Know?

You can target a specific folder into which you want the files placed by first selecting it in the Files or Extras tab and then importing. When the importation is complete, the items will be inside the selected folder.

Site Window View Options

You can view items in the Files, Extras, or Collections tabs in various ways. GoLive's default view is List, but other options include Icons, Thumbnails, and Tiles. To change the view, Ctrl+click (right-click) in the site window, choose View, and then select your view option (see Figure 9.18).

Figure 9.18. You can view your Files list as icons, a list, thumbnails, or tiles. This shows both how to select the Tiles view and the Files tab of the site window in Tiles view.

The External Tab

The External tab of the site window is an area to store external uniform resource locators (URLs), which are unique addresses to any file on the Internet. External URLs specifically link to a location outside of your website. For example, if your site resides at www.mysite.com, a link to www.someothersite.com would be an external URL.

To create an external URL, click the External tab of the site window and then do one of the following:

• Click the Site set of objects in the Objects palette, and then drag and drop a URL icon into the External tab.

• Click the Site set of objects in the Objects palette, and then double-click the URL icon.

• Ctrl+click (right-click) and select New URL from the menu.

• Choose Site, New, URL from the main menu bar.

Select an external URL in the External tab and use the Inspector palette to set up the link's name and URL (see Figure 9.19). Later, when you drag the External URL icon onto a page, a link automatically is made using the text from the Name field and the URL from the URL field.

Figure 9.19. Set an external URL's name and URL in the Inspector palette.

You can also link to an external URL using the Fetch URL tool, as described later in this chapter, in the section "Creating Hyperlinks."

Did you Know?

If you want to link to an external URL but you don't have the External tab selected, simply employ the Fetch URL tool. Point and shoot at the External tab, which pops it to the front, and then select the URL from the list.

If you have pages in your site that already contain external URLs, you can add those URLs to the list in your External tab by selecting Site, Update, Add Used, External Links from the main menu bar. Likewise, you can remove unused URLs by choosing Site, Update, Remove Unused, External Links. You can check the validity of external URLs by choosing Site, Check External Links. Finally, you can delete an external URL by selecting it and pressing Delete on your keyboard.

Email addresses can also be stored in the External tab and then dragged onto a page to automatically create a link that opens the visitor's e-mail application. This is very useful when creating sites with email links that change often, enabling you to change an email address once and have it update automatically throughout your entire site.

The Colors Tab

The Colors tab of the site window is a special place for you to designate the color scheme of your sites. You create colors there that you can then reuse throughout your site to color text, tables, and more. To create a site color, click the Colors tab of the site window and then do one of the following:

• Click the Site set of objects in the Objects palette, and then drag and drop a Color icon into the External tab.

• Click the Site set of objects in the Objects palette, and then double-click the Color icon.

• Ctrl+click (right-click) in the Colors tab, and select New Color from the menu.

• Choose Site, New, Color from the main menu bar.

After placing a color object into the Colors tab, select it and assign it a color, either by clicking a color in the Swatches palette or by mixing a color in the Color palette. You can rename the color either in the Colors tab or via the Inspector palette (see Figure 9.20).

Figure 9.20. Colors, listed in the Colors tab of the site window.

To add colors already used in your site to the list in the Color tab, choose Site, Update, Add Used, Colors. Similarly, you can remove unused colors from the list in the tab by choosing Site, Update, Remove Unused, Colors. To delete a color from the list, select it and click the Trash button in the Main toolbar, or invoke the contextual menu for the selected color and choose Delete.

Colors listed in the Colors tab also make an appearance in the Swatches palette. Put a few colors into the Colors tab, and then Choose Window, Swatches to open the Swatches palette. Click the Palette menu button (the right-facing arrow in a circle at the upper right of the palette) and choose Site Colors. Notice that the colors are the same as those in the Colors tab.

The Font Sets Tab

Fonts on the Web are an interesting thing because no matter which font you assign to text on a page, the visitor must have the same font on his computer for the text to look the same way in his browser as it does in yours. Font sets are listings of fonts assigned to text that help get around this limitation somewhat. The font that is listed first is the one the browser will attempt to load first. If it does not find the font on the visitor's computer, it looks for the second font in the list, and so on.

By the Way

Although font sets, which write <font> tags into the HTML, are still valid today, it is highly recommended that you use Cascading Style Sheets to format your text instead. CSS gives you more flexibility and enables you to make quick updates simply by editing the style sheet. You'll find more information in the section "Using Cascading Style Sheets," later in this chapter.

To create a font set, click the Font Sets tab of the site window and then do one of the following:

• Click the Site set of objects in the Objects palette, and then drag and drop a Font Set icon into the Font Sets tab.

• Click the Site set of objects in the Objects palette, and then double-click the Font Set icon.

• Ctrl+click (right-click) in the Font Sets tab, and select New Font Set from the menu.

• Choose Site, New, Font Set from the main menu bar.

Next, use the Inspector palette to set the attributes of the font set (see Figure 9.21). Select a name for the Font set and type it into the Name field. Click the Create New Font Family button at the bottom of the Inspector palette to add a predefined font set, or click the New Font button to add individual fonts to a font set. Move fonts up or down in the font set list using the arrows in the Inspector palette. Delete a font from a set by selecting it in the list in the Inspector palette and clicking the Trash button. Delete an entire font set by selecting it in the Font set tab and pressing the Delete key on your keyboard.

Figure 9.21. Define a font set in the Inspector palette.

To assign a font set to text, first select the text on the page. Then from the menu bar choose Type, Font, and select the name of the set from the list.

Did you Know?

To remove font tags from text, use this handy method. Choose Window, HTML Styles from the menu bar. Select the text, and then from the palette flyout menu, choose Clear Inline Styles and Clear Paragraph Styles. This should remove any font formatting previously applied.

Queries and Collections

Queries and collections, though two different features, are very powerful when used in combination. Use queries to define complex searches that you can run on a page, on a range of pages, on a site, or application-wide. You can even run queries on the results of other queries to get really granular. Queries differ from the normal Find dialog box because, via a query, you can search on much more than text. For example, you can run a query to find a set of files that were modified on a certain day, or all pages that contain a table. The options for creating queries are vast, and you'll quickly see how useful they are for managing large sites.

Collections are any particular set of files that you define. For example, if you had a website with pages nested several directories down that often needed updating, you could create a collection of those pages. Then instead of having to navigate through multiple directories to reach those files, you'd simply double-click the name of the collection in the Collections tab, and those pages would be listed at the top level.

The results of a query can be saved as a collection, and a query can be attached to a collection so that it can be updated as necessary.

Running Queries

To run a query, choose Edit, Queries from the menu bar. Select a query from the list and click Start, or click the New Query button to create a new query. Select a query from the list and click Edit Query if you want to change a query that already exists. Give your query a description, and then choose an option from the Find What pop-up menu. After you've made your selection, you can add criteria by clicking the little circle with the right-facing arrow in it and choosing an And, Or, or Not item. An And item means that both the first and second criteria must be met, an Or item means that one must be met, and a Not item means that the first item must be met while the second must not be met. You can continue to add criteria to your heart's content (see Figure 9.22).

Figure 9.22. Create very specific searches in the Queries dialog box.

Click the Test Query button to test the query. You can remove items from the results by selecting them and clicking the Remove button, save the results as a collection by clicking the Save Collection button, or click the Use Results button to run another query on the results of the first query. If you think you'll reuse the query, you should save it.

Creating Collections

To create a collection, click the Collections tab of the site window and then do one of the following:

• Click the Site set of objects in the Objects palette, and then drag and drop a Collections icon into the Collections tab.

• Click the Site set of objects in the Objects palette, and then double-click the Collections icon.

• Ctrl+click (right-click) in the Collections tab, and select New Collection from the menu.

• Choose Site, New, Collection from the main menu bar.

Drag files from the Files tab into your collection. With the collection selected, use the Inspector palette to attach a query to the collection by clicking the Attach button and then selecting a query from the list. You can also use the buttons in the Inspector palette to run or edit the query.