Create Templates in Adobe GoLive
We’ve spent a good deal of time learning how to work with media elements, developing graphics, and enhancing our webpage design through cascading style sheets (CSS). Now we’re going to unite those elements with the powerful site management capabilities of GoLive. Resembling the master page functionality you may be familiar with in applications such as InDesign, templates allow you to specify elements that you wish to appear on every page.
STEP 1 Start with a Complete HTML Layout
To begin, download and open the site file Sample Site.site. Then, double-click the file named for_template.html in the Site window to open it. As my proof of concept, I build one complete and functioning HTML page before creating my template.
STEP 2 Simple as Save As
Choose File>Save As and save the file to the Templates directory in the web-data folder. (Use the Site Folder shortcut in the Save As dialog for faster access.) That’s it. Templates are just a regular ol’ HTML file. Name the template “myTemplate.html.” (We’ll ignore the myOtherTemplate.html file until later in this tutorial.)
Now we want to specify editable areas in our template that can be customized on each page of our site. To do this, we first select an area of the HTML page. Put your cursor inside the word “Welcome” and press Command-A (PC: Ctrl-A) to select everything in the content cell.
STEP 3 Make an Editable Paragraph Region
Open the Template Regions palette from the Window menu. Then, click the Create New Editable Paragraph Region icon at the bottom of the palette. Deselect the text and the new editable area in your page will now show in light green (as long as you have Show Invisible Items selected in the View menu).
STEP 4 Rename Your Region
Select the new region in the Template Regions palette and press Return (PC: Enter) to rename the region. You can use any name for the region, so in this case, let’s name it “Main Content.” Close and save the template file.
STEP 5 Make Some Pages
Control-click (PC: Right-click) in the Site window area and choose New>HTML Page from the contextual menu. Control-click (PC: Right-click) the new HTML page and choose Duplicate. Repeat this two more times. Select one of the new HTML pages, press Return (PC: Enter), and rename it “about_us.html.” Rename the other new files “products.html,” “services.html,” and “locations.html.” Notice the little construction icon under the Status column; this indicates that this file has no content in it to help you keep track of your progress.
STEP 6 Apply Template
Open the file we just made named products.html. When you create new HTML files in GoLive’s Site window, GoLive adds a reference to the site’s default CSS document. To apply the template, Control-click (PC: Right-click) in the page and choose Template>Apply Template>myTemplate.html. Once the template is applied, you’ll see all of the items from the template applied to your site. You’re permitted to edit anything inside the Main Content region of the template file. Let’s replace the word “Welcome” with the word “Products.” Repeat this process for about_us.html, services.html, and locations.html.
STEP 7 Link the Navigation
Open the myTemplate.html file again, and let’s link the left side navigation to the pages we’ve made. GoLive will ask you if you want to Modify or Create a new template when you access a template file. Choose Modify. Select the “About Us” text, hold Command (PC: Ctrl), point-and-shoot to the about_us.html file in the Site window. Repeat this process for products.html, services.html, and locations.html.
STEP 8 Update Files
Once you complete the links, close and save the myTemplate.html file. GoLive will prompt you with a dialog indicating all of the files that will be modified based on changing the template. Click OK, and GoLive will modify all areas of each page that are not inside of the Main Content region.
STEP 9 Test Your Links
At this point, we have a functioning website. GoLive has added the links from the template to all pages in the site. Open the products.html file in a Web browser and click each navigation item.
STEP 10 Apply Template to Existing Page
If you have a page with existing content, you can still apply a template to it. To demonstrate, we’ll open the file contact_us.html and apply our template to this page as we did with the other pages.
STEP 11 Select Editable Region
When a page has existing content, or another template applied, GoLive will preserve the content and give you the choice of where to apply the existing content. Let’s choose Main Content in the Select Editable Region dialog and click OK.
STEP 12 Content Assigned to Region
As you can see, the existing content has been applied to the Main Content region.
STEP 13 Update to a Different Template
You can duplicate your template file, make layout changes, add items, and make new regions. If you’re careful to keep the same region names, you can update the layout of your site with one action. In the Site window, select the myTemplate.html file, then open the In & Out Links palette (Window>Site>In & Out Links). Point-and-shoot the myTemplate.html file from the In & Out Links palette to the myOtherTemplate.html file in the Templates directory of the Site window. Click OK in GoLive’s Change Link dialog.
STEP 14 Preview New Layout
Open the products page again in a browser. Click the links (now on the right) to see the changes to each page. In addition to layout, you can change the template’s CSS file reference as well, allowing you to modify even more of the appearance. Use alternate templates to “try out” different layouts and user experiences. With the In & Out Links palette, you can always go back to the original.
