Using templates |
Templates are used
to give the web designer easy access to the design and layout
of a web page. A template can be the "master design", and every
subsequent page can be created using it, with the "editable regions"
allowing individual content for each page.
Dreamweaver, GoLive and FrontPage all have their
own way of facilitating web page design using templates of various
kinds. They are program-specific, and differ slightly in their
features.
Before creating a template for a site, it is advisible
to have the main structure of a web site organized.
As a template may include links , these can be set up to include
the pages that will be used. Subsequent pages can then be made
with the template, and the links will be ready.
|
- Templates contain a master-design that can be made once, then
easily applied to as many pages as necessary.
- A template can have locked and editable areas
- Changes to the locked areas on the actual template, will be
updated on every page using that template
- Changes to the editable
areas on individual pages will only apply to that page
|
In Dreamweaver:
- Dreamweaver
does NOT upload the templates to the server.
- The template code is inserted into the page, and
if a DW page based on a template is opened in another web
design program, the HTML reverts to regular code
|
To create a NEW
template in Dreamweaver: |
- File> New..> Basic
Page..>HTML Template
- Add content to the page, by default
everything is LOCKED
- Select an area (Table, cell, text
etc..) that needs to be editable in individual pages
- Insert> Template Object> Editable
region (Cntrl-Alt-V)
- Designate a name for the editable
area
Dreamweaver will ceate a separate folder for the template(s)
The template is shown in the Assets panel / Templates
|
Locked
areas: |
- Locked
areas of the templates can only be changed inside the
actual template page.
- When saving, DW will
list the pages that use the template, and
offer to update any or all.
- A log will show all
the pages that are updated and problems if any. (Don’t un-check
the “show log”!)
|
Attaching a template to a page
(DW): |
In DW, with a (non-template)
page open:
- Modify> templates> Apply template to page.. DW will list
any available templates, select one, and click: Select.
- IF the page
already has content, DW needs to know where to put it,
the available options will include the named editable
areas.
- The page will now have the template code inserted, but the
locked areas will not be editable, only the
designated editable areas can be changed.
|
DW Library Items |
These are usually small components
such as footers, that can be inserted into pages. Updates/changes
to the library item will update any pages using them. |
To make a Library
Item in Dreamveaver: |
- File..> New..> Basic page..> Library
item
- Add content to the page
- File../Save as../Library item (.lbi)
- DW will add it to the assets
panel, Library
|
To add a library
item to a page: |
- Place cursor on the page where the library item will go
- Select the library item in the assets panel
- Click "Insert"
- it will be highlighted
yellow, and is not editable on that page
- To edit a library item, open
it from the Assets panel (or from
the site folder)
- Edit, save, then refresh the Assets panel,
and refresh the page by: Modify../Library../Update current
page.
|
GoLive has additional options: |
- Templates
- Similar
to DW with locked and editable regions – locked
area update-able across site
- Stationary
- Page layout which can be included
in pages, but will not be updated on other pages
- Components
- Similar
to the DW library item. Changes to the component
will be updated on pages using it
- Library items
- Small re-usable items which can be dragged
onto a page, not up-dateable
|
To create
templates, stationary, components and/or library items, GoLive
has to have a
site defined. A formatted page is then
saved as a template or stationary. Small areas can be saved
as a component or library item.
They will then be available in the items palette, and library
palette, ready to be applied or dragged onto a page.
|
FrontPage has “Global Elements” |
- “Include
Page Component”
- Separate HTML page, content
then inserted into any location of another page
- “Shared Borders”
- Editable on
every page, changes go site-wide (actual HTML page
stored in a “secret” folder)
|
To use the FrontPage
"Include Page Component"
- On
a new page, create the elements.
- Save it in a designated folder
- On page to use the component:
- Position cursor where it is to
go;
- Insert> FrontPage Component> Include Page> OK> Browse..
- Choose the
component page..
- Changes to the component page will be updated
wherever it is used
|
Front Page Shared
Borders:
- Shared borders can be added to the top; sides; bottom of
any page.
- Shared
borders will apply to ALL pages in a site automatically
- Any changes
to the shared borders will be updated site-wide!
- A shared border can be disabled on
any individual
page
|
|
