Creating and Using a Template

CATEGORIES: GoLive, Tutorials | Deborah Shadovitz | October 07, 2005

Templates make designing and maintaining your website much easier.You can base your entire site on one template, or you can have multiple templates as my own site does.

Just about any part of your page can become an editable region: a table or cell, a grid, a layer, an image, a paragraph of text, or any instance of text. When just an instance of text - several words - is the region, you can change that text but not create a new paragraph.

After you set up your editable regions and save the page as a template, all non-editable areas of the page are locked so no one can change that material. Multiple pages can be made from that template and it’s safe to let others create or edit pages. And the best part is that when you edit the template itself, all pages created from that template are updated.

This tutorial shows you how to create new pages from your template but you can also apply a template to pages you’ve already created. See GoLive’s Help: Applying a page template to existing pages. Another option is to use one of GoLive’s pre-designed templates. You’ll find them in the Templates tab of the Library palette under Application-wide.

The sample in this tutorial is my own site, Shadovitz.com so you can see all the pages created from this template.

STEP 1: Design your first page

Begin creating your page as you would any other. Add menus. Add all graphics and text that will be common to all pages. (That is, to all pages you’ll create based on this particular template.) This page can contain text, images, Smart Objects, layers, and Components just like any other page. (Tip: A Component may seem redundant but using them enables you to more easily have multiple versions of your pages, each being a template.) Include Head items such as links to Style Sheets, your favicon link, keywords common to most pages, etc.

Tip: If you’re using Modified Date object place it in an area that will be modifiable.

In this example, there’s a table that frames the page and contains images that comprise the frame effect, a Component that contains a MenuMachine menu, a Component that contains a strip of small images (all Smart Photoshop Objects), a Component that contains my copyright..

STEP 2: Decide which text and images to keep on the page

As you design your page, you’ll want to have text and images in place within the areas that will later become Editable Regions. This enables you to test the design and set the look of the text, headers, alignment, etc. However, any text on the page when you turn it into a template would be on every page you made from this template. Instead, you may want to remove text that should not repeat on all pages. I like to keep some text, such as various level headers <h1, h2> and normal body text as a guide for users. They can edit that text or remove it if not needed. Having it shows them what each heading level looks like and what styles or tags to apply to the new text. Also keep any text that you definitely want to have on every page. For example I always include a notice of the page’s last update - Modified Date - at the bottom of my main content area.

STEP 3: Select your region

In my own site, I have one table cell that’s my main content area because it enables me to add anything within that table. I’ve added text, images that I set alignment for and add a class to, tables, and tables into which I place photos. To set up a table cell, select that cell.

STEP 4: Create your region

Choose Window->Template Regions to open the Template Region palette. Then, in this palette, click Create new editable region button at the lower right. The cell becomes selected black and the new region appears in the list area under the Region name column with a paragraph icon beside it to show the kind of region. If there’s text in your table the region will be named with the first text there. If it’s empty it’ll be called Region. Click this default name to select it and type a descriptive name (no underscores or spaces), then press tab or enter. I called mine Content. (With the region name selected the cell color changes. It’ll change yet again. This coloring shows you which area is editable.)

STEP 5: Create an inline text region (Optional)

You don’t actually need to have a second region. You may just have one area where your page’s unique information will go. But for the sake of showing you the different techniques, I’ve added the ability to place some words elsewhere on my page. (This text is not on my website.) An inline text region can become as long as you need and will wrap, but you cannot add a return. (That’s the nature of the inline feature.) You can, however, add an image in that line.

To enable only a line of text to be editable, select that text, then repeat step 4, creating a new Editable Region. This time you’ll notice the region’s icon is a text cursor.

STEP 6: Create a paragraph text region (Optional)

The difference between an inline editable area and one where you can create new paragraphs is just one simple click.

Just like in step 5, select that text, but then click the last

tag in the Markup Tree at the bottom left of the page. Then repeat step 4, creating a new Editable Region. This time you’ll notice the region’s icon is a paragraph marker like for the table cell.

STEP 7: Save as a template

After you’ve defined your editable regions, or at least the ones you can think to have at that time, choose File->Save as. Click the Site Folder menu button and choose Templates, then click the Save button. This leaves the originally worked-on page in your Files tab, while making a copy into the Templates folder. You can delete that original or keep it for reference. Meanwhile, you’ll see the newly named template page is now open before you. Save it and close it.

Tip: You can also turn that original into a template by dragging it from the Files tab into the Templates folder (inside the Extras tab on the Site Window’s right side). Another option is to drag that original into the site-specific folder of the Templates tab of the Library palette. (Dragging into the application-wide folder makes the template available to all sites. However, links to images and files will be orphaned if they are not present in the other sites you apply your template to.)

STEP 8: Create a new page from the template

To create a new webpage based on your template, drag it from the Library palette’s Templates tab into the Files tab of the Site Window. It’ll automatically be named new_from_yourtemplatename.html. Rename it as you would with any other new page.

STEP 9: Add your content to your new page

Double-click your new page to open it. You’ll notice that the editable region now appears white, or un-highlighted while the rest of the page is purple. (Or any other color, if you’ve edited your color choices in Preferences.) Try clicking in the colored area and you’ll find you cannot add content or select the objects there. In the table cell you can add anything. If you let your other text be a paragraph region you can add lines as I’ve done here to show you. You save, edit, and upload the page as you would normally do.

STEP 10: Edit your template if needed

To edit the template double-click it in the Library palette (as shown here) or in the Library tab of the Site Window, then choose Modify. Make the changes, then save the page. This change will be applied to all pages created from that template. When you save the changes, GoLive will update all pages that use the template. If you use Upload Modified later on, GoLive will select all of those pages to be uploaded again.

My most recent edit was to add a favicon to my pages. I created the favicon and added the file to my files tab, then created the link within my template’s head section. This added it to almost every page in my site at once. Since I have a separate version of my template for my travel image pages, I had to remember to add the same link to that template too.

Share This

No Comments

No comments yet.

Sorry, the comment form is closed at this time.

Featured Partner

From our Partners