Northlite Designs

Getting started with GoLive CS

| Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Classes I Teach
Good Thunder
Terry Pratchett
About Me
Cards & Prints
SabreQuill Editing
Eclectic Academy
LVS Online
Contact Me

 Member of National Association of Photoshop Professionals


GoLive Interface


We could also have opened GoLive and started a new site from the menu bar with File > New rather than using the Site Wizard. There is almost always more than one way to get things done in GoLive. The Site Window was in the center of the GoLive work area, called the Document Window, which will be where your open documents and site windows will appear.

Now that you are in the program proper, look at the top of the program window. GoLive has a menu bar which contains several menus. Some are present in most other programs, like the File, Edit, Window, and Help menus, and some are specific to GoLive, like the Special, Site, and Diagram menus.


Menu Bar


Below the menu bar is the Tool bar. This is dynamic and changes with the choices you make in the object panel. It defaults to text and typography options, because most of the time you will be typing.


Tool Bar


If you look on the left you will find the object panel. This panel contains most of the tools you will need when working in GoLive. It is divided into two sections. The top section is categories, and the bottom contains the items in those categories you can use to create your page. The top section controls the icons in the dynamic bottom section, showing options for the category you have selected in the top half of the panel.

Object panelTake a minute and hover the mouse over each of the icons in the top half of the object panel. The tool tips will tell you what the icons are for. The Basic category is probably the one you will use the most. It contains things like images, the layout grid, and tables.

Several other categories you will see are:

Smart Objects are new in GoLive CS. They allow you to add native Photoshop and Illustrator files to you web page and save for the web from right within GoLive. They can be updated in their native application, and GoLive will make changes to the smart object on the page to reflect any editing you do. They are a real timesaver!

Form Elements for adding forms to web pages.

Head Elements for adding the tags that belong in the <head></head> section of your html.

Frames, Site items, Diagrams, and even things like Quick Time movies.

As you select a category on the top, the bottom half of the object panel will change to give you objects to work with that pertain to that category.

Try clicking on the various icons in the top half of the object panel and see how the bottom half changes.

Both the top and bottom half of the panel may also contain items not shipped or installed with GoLive if you have installed extensions as I have. Extensions are like plugins are in Photoshop: they give added functionality to the program, most are written by third party developers, and many are available free from the Adobe Studio Exchange.

On the right side of the application work area are panels. These can be stacked, grouped, dragged out of the way, or even closed. Right now mine are grouped and stacked to provide maximum working area. When they're grouped, you will see tabs. The active tab will be highlighted, and on the right is an arrow in a circle. Clicking this arrow opens the panel options. The arrow on the left side of each tab or tab group will expand or collapse the panel, or panel group if there is more than one tab.


panels and tabs


Some of these panels are also dynamic, like the Inspector, which allows you to set options for the elements in your pages. For instance for an image you can set the ALT text, a URL the image links to, how much white space to leave around the image, and many more options. InspectorThis is the inspector expanded when an image is selected in the html page I was working on (this page, as a matter of fact!)

The image URL (that is the location of the image relative to the page so it can be loaded with the page), it's width and height, which are entered automatically for you, it's alignment and even it's ALT text can be entered here.

Notice also that once the inspector is expanded, it has more tabs, with more options that apply to the selected item. In this case, it is images. If a table were selected, all of the options would pertain to tables.

ALT text is text that describes the image. This is extremely important. Screen readers use this text, and if the page takes some time to load, this text will appear in place of the image to let the reader know what will be there. It also is the text that appears as a tool tip when the mouse is hovered over the image, and the text that users with text browsers will see instead of the image.

Index 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Links
GoLive for Dreamweaver Users: Making the Transition

Take a class  | Reviews | Photos | Good Thunder | Terry Pratchett | Tutorials |

Northlite Designs