Get ready to roll up your sleeves and do some learning. Adobe GoLive is the best tool for making web sites. It is not hard to use, but, it is complex. This guide will make no sense if it is not accompanied by some actual training.
Adobe GoLive is also an extensive product. The user manual alone is over 800 pages. There is no chance you will learn everything about GoLive even if you took classes for a week. So, do not worry if there are areas not covered. A good book or even the user manual can answer some of those questions. This guide will supplement the training goal of teaching you how to use Adobe GoLive to create a site and hopefully demonstrate some above and beyond GoLive features.
First Step: Creating a Site
This may sound new to you, but, the first thing you need to do is create a site window. What this window does is hold all of your web pages, web graphics, etc. The power of GoLive is in the Site Window. If it is not created and always open, you are not taking advantage of the power of GoLive. You will notice (and hopefully remember) that the site window should always be open when you are working in GoLive. If at any point your site window closes, you can go to the File Menu select Open Recent Files and your site should be listed there.
To make a new site:
1. Go to the File Menu and select New Site. The wizard will take you through the process. For now, lets create a site for an individual user.
Learning the GoLive workspace
When you first create a site file, it will contain a single file called index.html . I use that file to show you the GoLive workspace below.
Working with pages
The concept of changing pages in Go Live is pretty cool. The core is this: You open a page, choose an object from the Objects Palette to use (shown above). Drag the object into the page and then click on its edge to select it. Once that object on the page is selected, the Inspector (shown above) changes/adapts to show you the options available for that object. You do not need to go through the menus looking for different options. You will always find them (except for text) in the Options Palette.
An example of this is shown below with the Layout Grid
Adding a Layout Grid
Each page in GoLive should have a Layout Grid. What a layout grid is, well, grid paper for the web. It allows you to place objects wherever you want on its grid. While some people may think this is a waste, those .html savvy people know that placing items anywhere on a web page is not done without complex code. Think of the Layout Grid as a code saver. The steps for adding the grid are shown below.
 |
Some Options for the Layout Grid Inspector
1. This is the width and height of the layout grid. As I mentioned in the workshop, the best width is 600 pixels because that will show up completely on a printer without going over. The best height depends on the amount of information on the page. A good minimum height is 500 pixels. 2. This is the grid size and snap. You can make the little squares something different than 16 pixels if you want (I usually make them 10 so I can figure out sizes of needed graphics). You also want to turn snap off. This will allow you to place objects on the grid next to each other without gaps. 3. This allows you to change the background color of the Layout Grid. I talk more about changing color later in this handout. You can also make the background of your layout grid an image. If you do this, make sure it is a light image and it is not too busy or small (because the image will repeat itself to fill in the entire space). |
To Add a Text Box
To Change the Color of The Text Box or Text Itself and changing the color of your links, etc.
Please not there is a boo boo on this screen shot. I mention that the Web Color option is circled, it is not. You will notice it is the 8th tab/icon on the color palette and you can tell it is currently selected because it is a darker grey.
Adding a Page to the site
Remember, to add anything to the site (pages, graphics, etc.), it has to be done through the site window always being open.
IMPORTANT: Once you add anything to the site, SAVE IT by going to your File Menu and Selecting Save. IMPORTANT: To save effectively, ALL PAGES MUST BE CLOSED or make sure your Site Window is the currently selected window. If you have a page open and selected and you click Save, you are saving the page and not the site.
Remember, to add pages the easiest way, duplicate them! Choose a page that has the colors, graphics, etc. already in place.
To Duplicate a Page
1. Select the Page you would like to duplicate in your Site Window.
2. Go to the Edit Menu and Select Duplicate (A copy of the file will be made with a 1 in the name, so, if you copied leslie.html your duplicate page will be leslie1.html)
IMPORTANT: Make sure you change the .html name of the duplicate copy and not the original or you will cause all sorts of link shenanigans (sp?). Also remember to change the title of the page or people will know your little time saving secret.
Making a link
The coolest thing in Go Live!
Got Bugs?
If you changed the page title or moved some items around without updating the site reference (explained later) or you clicked a link without actually choosing a page, you will get a bug next to the page icon in your site window. Here is what you do:
How to avoid bugs?
The most common reason for bugs (besides not completing the link) is that you moved a page to another folder within your site or you changed the .html title of a page that has a link. When this happens the dialog box below will appear. Basically, it is telling you "hey, you are moving something that some other page or item has a link to. I need to change the code accordingly, ok?" SAY OK or the bug patrol will be looking for you. This allows you to move pages to folders and rename pages with no problem. This is a fantastic feature if you have adopted the site from someone else and you want to clean it up to make it easier to work on and navigate.
Adding a folder to your site
This is the first step for adding images to your site. I know the graphic is a little blurry, so I will repeat what is said in red below.
1. Click on the Site Tab on the Objects Palette (Circled)
2. Click on the Folder icon and drag it into your site window (shown with red line)
3. Name your folder images or whatever the folder will be used for. Remember not to use spaces or caps
4. Also remember to save your site because you just made a change to it!
Adding Images
Now that you have a folder to store them, lets add an image to your site!
Components
OK, the second coolest thing in Go Live. This allows you to take anything, text graphics, etc. and make it update on multiple pages in a single click. Perfect for top graphics and bottom navigation.
OK, now that you have a page in your components folder. You need to create it. If it is for the top graphics, add them! If it is for the bottom navigation, make a small layout grid and text box and type in your navigation text.
Some important tidbits to remember
- Components add padding, so, if your layout grid is 600 pixels, do not make the component layout grid 600 pixels. Make it 550 for the padding
- Link color, etc. is not important on the component because it will take the look and feel of the page it is embedded in.
- That thing you always forget is explained below. : )
To Preview your work in a browser
Adding Tables
I sure hope the diagram below does not confuse you too much. It uses a variety of colors so you might want to go on the web and look at the color version.
Tables are great if you are providing a list of item. They are easy to use, but, they are vast in features. Here goes:
To add a table:
1. Click the Basic tab in the Objects Palette and Click and drag the Table icon (shown here in light purple).
2. Select the table. The Inspector will change accordingly.
3. The Inspector is now the Table Inspector. You will notice it has tabs for Table Row and Cell. I have included screen shots for each of those tabs and have color coordinated them.
The Table Tab (in Purple) Table must be selected to see this option.
1. Rows: Allows you to change the amount of rows and columns you have
Width: Lets you change the with of the entire Table (Can use percentage, pixels or automatic)
Height : Lets you change the height of the entire Table (Can use percentage, pixels or automatic)
2. Border: Amount of edging the Table has. Select 0 if you want it to disappear
Color: Can use the color palette to change the color of the entire table
Cell Pad: The amount of space between cells
Cell Space: The amount of padding between the edge of the cell and the object inside the cell.
3. Align. Actually does not work well. I would use the alignment options in the toolbar instead.
Caption: will place a caption in the lower left hand corner of the browser window
BG Image: Can apply a background image that would only show up behind the table.
4. Tab-Text: allows you to insert a Tab Delimited file into the table.
Table to Layout Grid. Turns every cell into its own layout grid. Careful! This is messy!
The Cell Tab (in Green) A single cell must be selected to see this option.
5. Alignment. Once again, a pain to use. I would use the toolbar alignment instead.
6.Row/Column Span: Honestly no idea, never used it.
Color: Allows you to change the color of a single cell
Width/ Height: Allows you to change the width and height of a single cell (Can use percentage, pixels or automatic)
BG Image: Can apply a background image that would only show up behind a single cell.
7. Add/Delete Row/Column: Allows you to add (green icons) a row or column directly above or below the selected cell or delete a row or column directly above or below a cell (red icons)
The Row Tab (in Blue) A row must be selected to see this option.
8. Alignment. Yep, same thing. Use the toolbar instead.
Height: Allows to you change the height of the row (Can use percentage, pixels or automatic)
Color: Allows you to change the color of a row.
Table Options
9. There is another Table Palette. You can find it in the Window Menu, select Table. One very nice option is the Style Tab. The style tab has preset looks for your table which you can apply quickly. Works great especially if you add information in the middle of the table. It will color coordinate the look again easily.
Adding Keywords
Some search engines use Keywords to base their searches on. To add keywords to your web page.
Adding a Timer
Maybe you want to take someone to a new URL from an old one, or maybe a page has been renamed and you do not want people to get lost when they go to the older page from their bookmark list. Both of these examples are a great use for a timer.
Adding an E-mail link
Adding a Date and/or Time Stamp
Ever go to a web page and it says "last modified on" and it proceeds to tell you the date and time of the last update? This is how they do it.
Pop-Up Menu
Some web pages have a pop up which provides you with a list of web pages to visit. Here is how it is done.
How to Make a Rollover
My lesliefisher.com site uses rollovers on the first page. A rollover is when the user moves his mouse over the image. It changes. Maybe just a color change or something else. It is important to know that this is done with two graphics of the same size. In the example below. I use the graphic for contact information. One of the images has white text and the other has black text.
Image Action
Probably the most difficult thing I have to explain in this handout. If it does not make sense, do not worry. There is a good chance we did not have the chance to try this in class. A good example of an Image Action is found at http://www.burbank.k12.ca.us When you move the mouse over the main navigation, text below pops up to tell you more about that area.
Let's build on the Rollover example above. I have the rollover for contact information. Now, when someone puts their mouse on contact information, I want a graphic to show up saying "Call Me" when they move their mouse away, the image will go away also.
To make this happen, you need another two images. You need one that is blank (shown below with the red box you can see the green tab for the image) and you need the same size graphic with the words call me. I call them 7blank.gif and 7ex.gif here are all the images so you can try this on your own. (Remember to get the blank white square as well)
To add the Image Action
1. Add another Rollover Icon like in the previous example. This will be the white box. It will only have a Normal Rollover graphic. Link the Normal graphic to the blank box.
2. Go to the Window menu and select Actions a new Palette will show up. Mine is shown below the white box. Click on the Actions Tab.
3. Click on the rollover that will cause the action. In my case, the Contact Information graphic.
4. In the Actions Palette, you will see options For mouse click, enter, exit and double click. We want to use Mouse Enter, meaning the person moused over the graphic and mouse exit.
5. Click on Mouse enter and then click on New Action (which looks like a little sliver of paper. It is next to the trash can on the Palette) When you do this, an action will show up.
6. Click on the Action Tab, go to Image and Select Set Image URL. The Palette will ask where the Image is.
If you are still with me, amazing! Great work. Get ready, this is where it gets confusing.
7. A rollover is also called a button and each button has a unique name. You can find the name out by clicking on the button. This dialog box is asking what the name of the button is that you want to have change. I clicked on the blank box, looked at the Inspector and discovered it was button2. I set the image to button2. So, when someone mouses over Contact Information, I want button2 to change.
8. Use point and shoot to select what image you want to appear. In this case 7ex.gif which is the image that says "Call Me"
9. I would then click on mouse exit and repeat the same steps except that I would make the link to 7blank so the "Call Me" goes away when the user mouses away from contact information.
I can do this to as many graphics as I would like.
PHEW!
To Add a Quicktime Movie
This is MUCH Easier that a rollover action!
Font Sets
A Font Set is a great way to bypass the same old boring fonts that the web uses. It is important to know that a font set is relying on the font to be present on the users machine, so, try to keep it to basic fonts. Font Sets work in order, so, if you select Verdana and Tahoma as your font set, the browser will first look for Verdana on the users machine and upon not finding it look for Tahoma. If it does not find either, it will display the font in Times. Here is how to add a Font Set.
How to add an Image Map
Maybe you have a graphic that you would like to link to two or more different locations. Here is how you do it.
Publishing Your Site Using FTP
Adobe Go Live has built in FTP to make publishing your site to the web easy. Here is how it is done
When You Crash
Unfortunately, your site will crash. When it does, open Go Live and your site up again and click on the Refresh Button (circled). This will make sure your site file has all of the documents within your site folder.
