TemplateTutorial
- 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