TemplateTutorial

7
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

description

 

Transcript of TemplateTutorial

  • Template Tutorial : GoLive CSViewing the Included Template PagesGoLive CS ships with an assortment of template pages that you can put together in variousways to create an entire site. Additionally, there are pre-made Cascading Style Sheetdocuments that, when combined with the template pages, can produce many visually stunninglooks. To begin, lets explore how to view the included template pages. Dont be fooled... Whilethe pages may seem kind of boring at first glance, youll see how dramatic they look when weare 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 canchoose.3. Drag the bottom right corner of the Library palette to make it large enough to preview thetemplates. 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

Template Tutorial : GoLive CS4. Browse through the various templates and select a page to use for this tutorial, any one will do!Using a Template Page in Your SiteWhile we will only use one page in this tutorial, remember that you can combine several ofthese page templates to form an entire site, or use the template pages as a basis for a sitedesign via GoLives Site Diagram features. (See the online help under Diagrams.) Also, youcan start with a template page, then alter it to suit your needs. Think of these pages as astarting point to get you going. 1. Drag the page youve chosen into the Templates folder in the Extras tab of the site window. Changethe name if you'd like. http://www.amenco.com/pagetemplates/index.html (2 of 7)1/26/2004 5:04:07 PM Template Tutorial : GoLive CS2. To modify the new page you just placed into the Templates folder, double-click it and chooseModify.3. Some areas of the page may have a purple colored overlay indicating locked regions. You may wishto unlock the page to eliminate the overlay while you are making modifications. You can lock it againwhen you are done. To unlock the page, choose Template > Unlock Page from the document windowmenu. http://www.amenco.com/pagetemplates/index.html (3 of 7)1/26/2004 5:04:07 PM Template Tutorial : GoLive CS4. The editable regions may have a green colored overlay. You can change the appearance of thisoverlay 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 overlayto an outline by clicking the Show Border only button on the right.Attaching a Cascading Style Sheet to the Templatehttp://www.amenco.com/pagetemplates/index.html (4 of 7)1/26/2004 5:04:07 PM Template Tutorial : GoLive CSNow is a good time to select a CSS document for your template to reference. Ive repositionedthe Library palette so that it is tall and slim and turned off the preview in the Library palettemenu. Ive 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 filesfrom which you can choose.2. To test how a particular CSS file will affect the appearance of your template page, drag a CSS filefrom the Library palette into the template pages head portion. Notice how it immediately takes on anew look! TIP: If you dont 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 Template Tutorial : GoLive CS