| |
Managing Web Designs with
Templates and Cascading Style Sheets
Both cascading style sheets (CSS) and templates are important tools for
building and managing a web site design. In their own way, they each allow
you to develop consistent pages without the tedious task of recreating
the repeated information and formatting on every page. So, they make developing
the site easier!
But that is not all. Both CSS and templates also make it possible to
change part of the design and have that change automatically applied to
every page on the site (as long as it is associated with your template
or style sheet). So, they make maintaining the site easier too!
What do templates and style sheets do?
Templates
Dreamweaver allows us to create a document that provides a fixed structure
and layout for all the documents in a site that we "attach to"
or "create from" that document. This template document allows
us to change a part of the fixed structure of our site in one place—like
making a change to a master slide in PowerPoint. The template has certain
areas that are open to changes on individual pages (so each page can have
its unique content!); these areas are called editable regions.
Cascading Style Sheets
Cascading Style Sheets work with HTML code to tell the browser how to
display the web page. In the HTML you define what each piece of information
is (e.g. a paragraph or a level 1 heading), and in the CSS you define
how each piece of information should look (e.g. for a paragraph you may
use Arial font, in dark grey, with a text size of 14 pixels, and 1.5 line
spacing; for a level 1 heading you may use Verdana font, in Mason green,
with a text size of 18 pixels, and double spacing). Some advanced uses
of CSS also tell the browser where things should display on the page.
CSS also allows users to have a high degree of flexibility in their design
without extensive recoding of their content. Below are links to some examples
of what style sheets can do. The syllabus is for a course here at George
Mason University. It has the same HTML code (with one tiny exception)
but two different style sheets.
Example A (http://www.irc.gmu.edu/resources/workshopmaterials/website/css-design/syllabus-a.html))
Example B (http://www.irc.gmu.edu/resources/workshopmaterials/website/css-design/syllabus-b.html))
The CSS Zen Garden is a project that challenges designers to create an
entirely different look and feel without touching the HTML code; they
may only change the style sheet. It is an excellent example of some of
the cutting-edge design using CSS. You can view it at http://www.csszengarden.com.
Create a web site that uses templates & style sheets
Template
Download the following files and place them in a folder on your desktop:
- Write down a rough outline of what you want in your site. Make notes
about what should appear on every page, and how you would like things
to look.
- Define a new site in Dreamweaver (Site > New Site then fill in
the dialogue boxes).
- In a new file, create the content that you would like to have appear
on every page. Include an identifying banner, navigation, and any other
elements that are appropriate to your site. Do not specify how you want
your text to look, instead identify what it is (e.g. a Heading 1 or
a paragraph) using Format in the Properties bar. We'll change how it
looks when we create the style sheet.
- Next insert one or more areas to hold the content that will change
from page to page. These are known as editable regions; choose Insert
> Template Objects > Editable Region. Make certain to use a descriptive
name for the region, so that it is clear what belongs in a particular
region—"EditableRegion 1" is not very helpful.
- Save the file. It will automatically be placed in a folder called
Templates in your site. Note: do not place any other files in the Templates
folder, and do not remove a template from the Templates folder and expect
things to work.
- Close the file.
- Create a new file by choosing File > New and then selecting the
Templates tab in the dialogue box. Choose your template, and make certain
"Update Page when Template Changes" is selected.
- Add the content to the editable regions. Make sure you use Format
to identify your text, do not use the Font, Size, or other formatting
features of the Properties bar—we will handle that in the style
sheet. You will notice that the rest of the page is locked.
- Save your page with an appropriate file name.
- Create the other pages for the site using the same process.
- Open the template and create navigation links to each of the pages
you created.
Style Sheet
- Open up your template again.
- To start creating the style sheet, choose Text > CSS Styles >
New CSS Style
- Choose Redefine HTML Tag, then pick the appropriate tag from the pull-down
menu (e.g. p=paragraph, h1=heading 1); click OK.
- Use the dialogue boxes to define how you wish your tag to look. Note
that even if you click Apply to preview a certain combination, Dreamweaver
often does not show how it will look until you save the changes and
close the CSS dialogue box. Some CSS will not show in Dreamweaver at
all, and will only be visible when you preview in a browser.
- Continue defining each HTML tag you used or plan to use. Remember
to save the template if you want to preview your work on one of your
content pages.
- Some styles we want to apply only in certain instances, for example,
we may want caution notes to display in red, but not all paragraphs
to display in red. We can identify those elements (a paragraph, heading
or other HTML tag) by using the attribute class=" " and specifying
a name for a particular class. So, for our caution notes, we might create
a class="caution" which we can define in our style sheet.
Choose Text > CSS Styles > New CSS Style, then select Make Custom
Style (class) and type a name for the style in the box. All class names
for style sheets must begin with a "."; however, when the
class name is used in the document, it is used without the ".".
Resources
The Hands-On Training book for Dreamweaver is an excellent resource for
working with templates in Dreamweaver (as well as just about everything
else in Dreamweaver).
Dr. Paula Petrik (Department of History) created an excellent list of
resources for beginning CSS designers, as well as resources about good
web design in general for her course HIST 697: Creating History in New
Media (http://www.archiva.net/clio2/hist697schedule.htm).
|
|
