The document provides instructions for using template pages and cascading style sheets (CSS) in Adobe GoLive CS. It explains how to view the included template pages, use a template page to create a new page for a site, attach a CSS to style the template, and create additional pages based on the template. The template pages and CSS files can be used together to produce visually stunning designs for an entire website efficiently.

1. Template Tutorial : GoLive CS
Viewing the Included Template Pages
GoLive CS ships with an assortment of template pages that you can put together in various
ways to create an entire site. Additionally, there are pre-made Cascading Style Sheet
documents that, when combined with the template pages, can produce many visually stunning
looks. To begin, let’s explore how to view the included template pages. Don’t be fooled... While
the pages may seem kind of boring at first glance, you’ll see how dramatic they look when we
are finished.
1. Open the Library palette (Window > Library)
2. Click the “Templates” button at the top right to see the list of template pages from which you can
choose.
3. Drag the bottom right corner of the Library palette to make it large enough to preview the
templates. Use the Library palette menu to turn on “Use Preview” and “Preview on Right.”
http://www.amenco.com/pagetemplates/index.html (1 of 7)1/26/2004 5:04:07 PM

2. Template Tutorial : GoLive CS
4. Browse through the various templates and select a page to use for this tutorial, any one will do!
Using a Template Page in Your Site
While we will only use one page in this tutorial, remember that you can combine several of
these page templates to form an entire site, or use the template pages as a basis for a site
design via GoLive’s Site Diagram features. (See the online help under Diagrams.) Also, you
can start with a template page, then alter it to suit your needs. Think of these pages as a
starting point to get you going.
1. Drag the page you’ve chosen into the Templates folder in the Extras tab of the site window. Change
the name if you'd like.
http://www.amenco.com/pagetemplates/index.html (2 of 7)1/26/2004 5:04:07 PM

3. Template Tutorial : GoLive CS
2. To modify the new page you just placed into the Templates folder, double-click it and choose
“Modify.”
3. Some areas of the page may have a purple colored overlay indicating locked regions. You may wish
to unlock the page to eliminate the overlay while you are making modifications. You can lock it again
when you are done. To unlock the page, choose “Template > Unlock Page” from the document window
menu.
http://www.amenco.com/pagetemplates/index.html (3 of 7)1/26/2004 5:04:07 PM

4. Template Tutorial : GoLive CS
4. The editable regions may have a green colored overlay. You can change the appearance of this
overlay by modifying it via the Highlight palette. Choose Window > Highlight, then click the Color tab.
You can change the color or opacity of the overlay for editable regions, or choose to change the overlay
to an outline by clicking the “Show Border only” button on the right.
Attaching a Cascading Style Sheet to the Template
http://www.amenco.com/pagetemplates/index.html (4 of 7)1/26/2004 5:04:07 PM

5. Template Tutorial : GoLive CS
Now is a good time to select a CSS document for your template to reference. I’ve repositioned
the Library palette so that it is tall and slim and turned off the preview in the Library palette
menu. I’ve also made the template page itself small, and turned on the Live Rendering window
(File > Preview In > Live Rendering) to get a better idea of how the page will look in a browser.
1. Open the Cascading Style Sheet (CSS) folder in the Library palette to reveal the pre-made CSS files
from which you can choose.
2. To test how a particular CSS file will affect the appearance of your template page, drag a CSS file
from the Library palette into the template page’s head portion. Notice how it immediately takes on a
new look!
TIP: If you don’t like the look, choose undo then select another CSS document to test. You can
do this as many times as you like until you find a combination that suits you.
http://www.amenco.com/pagetemplates/index.html (5 of 7)1/26/2004 5:04:07 PM

6. Template Tutorial : GoLive CS
<< Play the Movie!
3. When you’ve decided which CSS document you’d like to use, add it to your site by dragging it into
the files tab of your site window. It’s a good idea to rename this external CSS file now.
4. Clean up the page by deleting the CSS markers you placed in the head section while experimenting.
CAREFUL! Before going to the next step sure to delete any CSS markers left in the
head portion of the template page that you may have left behind while you were
experimenting because they will be incorrectly linked to CSS files in the Library
palette. Delete the marker by selecting it in the head pressing Delete on your
keyboard.
4. Next drag the CSS page from the files list into the head portion of your template page to link it
properly as an external style sheet. Feel free to make additional edits to the template page as needed,
such as adding hyperlinks, components, etc. When you are done, close and save the template page.
TIP: You can also edit the CSS file if you’d like, but we’ll save that for another tutorial...
Creating New Pages Based on Your Template
Now that you’ve got a template page looks the way you want it, you can make additional pages
from it. Any pages created from a template will be updated if the template itself is updated.
This is a huge time saver if you need to update an element that repeats on many page, such as
navigational links or contact info.
http://www.amenco.com/pagetemplates/index.html (6 of 7)1/26/2004 5:04:07 PM

7. Template Tutorial : GoLive CS
1. To create a new page based on the template, drag the template page from the Templates folder in
the Extras tab on the right side of the site window into the Files list on the left, then choose Create.
2. Rename the page in the files list. To open it, simply double-click.
Now that you know how to use the template pages, you can get creative by combining several of them
to form a site. GoLive CS does the heavy-lifting by giving you a starting point, and by managing your
web assets as you begin to experiment. What are you waiting for? Get GoLiving! :-)
http://www.amenco.com/pagetemplates/index.html (7 of 7)1/26/2004 5:04:07 PM