Dreamweaver Templates
Course Objectives
Templates
Site ID Customization
Using the Javascript Navigation Solution
Instructed by:
Brian Clark
Templates
Dreamweaver templates help in the creation of Web sites with a consistent design. More
importantly, a well-constructed template also allows you to make a change to your site
and update hundreds of pages automatically.
Dreamweaver templates are different from WSU and WSU Extension Web Templates.
The latter are really just designs—they don’t have anything to do with your work flow
and they don’t have anything to do with how you actually manage and maintain your site.
So when you go to either the WSU Template Designer -
http://designer.wsu.edu/template/Default.aspx - or to Extension Web Templates -
http://ext.wsu.edu/identity/web/ - what you’re really getting from these sites is a design.
Once you’ve picked your design, you still need to set yourself up with a Dreamweaver
Template. If you’re a Adobe Contribute shop, this is still true, but you may need to get
Web coordinator Bob Hoffmann to set the template up for you.
Confused? Let me clarify my vocabulary: when I say ―template‖ in this session, what I’m
talking about is a work-saving file you create in Dreamweaver. When I talk about what
WSU calls a ―template‖ I’m going to call that the ―design file.‖ So we have two
completely separate issues here: the look-and-feel of the design and then the work-saving
issue of a Dreamweaver template.
A couple other things before we get down to work: I suspect that there are many other
Web production softwares being used than just Dreamweaver. This session is targeted at
Dreamweaver users, and especially those who use Version 8 or newer. If, because you’re
using some other software, you’re tempted to walk away right now, please reconsider.
Although the specifics in this session are aimed at Dreamweaver, the general principles
involved are applicable to any modern (published in the last couple years) Web
production tool.
One last note: this session assumes you have basic knowledge about how to set up a Web
site, or at least who to turn to if you don’t (again, for probably everyone attending this
session, that person would be Bob Hoffmann). I’m focusing tightly on using templates to
control and minimize the amount of work needed to maintain and update sites. More
basic training is available at web.wsu.edu, specifically here:
http://web.wsu.edu/training/index.aspx. Having said that, I do want you to know that
although we’ll be digging into the code side of things a bit, you don’t really need to know
either HTML or CSS to do the things I’m going to show you. The main skill you’ll need
is the ability to cut and paste! Easy!
Getting Started
The first thing we need to do is to create the file on which your template will be based.
2
If you’re CAHNRS, go to web.wsu.edu and click the Template Designer link. Follow the
steps, and then, at the end, copy the alphanumeric ―design key‖ into a text file like
Notepad or, if you must, Word.
If you’re Extension, life is even simpler. You’ve got nine basic designs to pick from:
http://ext.wsu.edu/identity/web/selection.html
In either case, you’re going to download some files to your local hardrive. For both the
CAHNRS and Extension, this is a zip file which contains the ―core‖ elements you’ll need
to get started. I like to keep my working bits separate from the bits I’m actually going to
publish to the Web, so I keep two folders on my hard drive: one called Web Working Bits
and the other simply Webs. Within each of those, I have additional folders for the Web
sites I work on. However you organize your work, the key idea here is—organize! A
decent sized Web site can have thousands of files associated with it. If you don’t
consistently organize and name those files, you’re bound to get confused and, maybe
worse, anyone who comes along behind you to work on the site is going to be really lost.
Having download the zip file, open it and drag the contents into your appropriate working
bits folder. You don’t technically have to do this, but I do because I make mistakes and
rather than having to download and unzip again, I like to be able to turn quickly to my
backup file.
Now let’s get real: if you’re working with an existing site, the last thing you want to do is
create havoc by publishing, say, a new main page without a lot of testing. So what I do is
create a /prototype directory within my site. You can name the folder anything you
want—the concept here is to create a testing place where you can work out any problems
without disrupting the operation of your existing site.
Now, having created a safe place to work, I want to work on my design files.
If you’re CAHNRS, copy the ―core‖ and ―corehome‖ files into your prototype folder.
The difference between these files is that one is set up to be your home or main page
while the other is designed to be every other page in the site.
Open both of them in Dreamweaver and switch to code view.
You’ll need to apply the design key to activate the design you chose. Like I said, it’s a
copy and paste routine: here’s where it goes:
3
I’m also going to create an /images folder in my /prototype folder, because I’ll need that
soon when I customize my Site ID zone.
If you’re Extension, note that the zip file you downloaded has two folders. Copy the
/images folder directly into your /prototype folder. In the /templates folder are what I’m
calling design files. These aren’t yet templates!
Take a look at what you’re getting: 1-, 2- and 3-column versions of the same design, and
in each case, you can choose between having a tool bar or not.
I want to keep this simple, so I’m going to pick the 2-column version with the toolbar. I
copy that into my /prototype folder and open it in Dreamweaver. Note that with the
Extension design, there’s no design key to mess with—that’s already been done for you.
That’s pretty much it for the differences between CAHNRS and Extension.
Filling in the Gaps
Once you’ve got your design file open, you need to fill in a couple things before you
convert it to a template.
Down at the bottom here, plug in your complete office info. Make sure the contact link is
filled in with someone who really does read their email. The Office or Department link
gets replaced with the name of your unit, department or office—and the link goes to your
home page. Complete that area with the address, phone number, etc.
Back at the top of the page, note this area, called ―Title.‖ Extremely important! Can’t tell
you how many times I’ve seen entire sites with page after page named untitled or some
other default page title. Google and other search engines look here first to see what your
page is about. If you leave it as ―WSU Core‖ or ―Extension core‖ you’re really missing
the boat in terms of having search engines properly categorize your pages. So type in the
*general* name that every page should get—here’s some example, CAHNRS., Academic
4
Programs, Alumni and Friends. You can add additional info on a page by page basis, but
at least reset the default so that it accurately reflects your organization.
Now let’s deal with what I think is the most important aspect of any Web site: the
navigation. This is so important that there is a newly born science that studies site
navigation, called information architecture.
You should spend a lot of time worrying about what you name the links and what order
they appear in. Study after study demonstrate that people will spend somewhere between
.5 and 3 seconds looking for the info they need. If they don’t find it, they do elsewhere.
The tendency in the past has been to practice something like a poetry of link naming—
one, two words link names at the most. I’d argue you’re better served by clearly spelling
out what lies behind that link.
Another bad habit that studies indicate is a turn off for site visitors is navigation that
changes based on the context. This is where you have navigational structure for one area
of the site, and another structure for some other area. We see this all the time at WSU and
it truly is bad practice. Build a comprehensive set of navigational links and use them on
all pages. That’s one more reason to build a good template: it ensures that your nav
structure will be consistent.
Just a bit more on this: I’ve often heard people argue, Well, our site deals with tree fruit,
nutrition for poor people, and house cat care. Therefore, they say, we should have
separate sections for each of these and the navigation should be separate. Again, that’s
bad practice: google Web site usability and read all about best practices if you have the
time. I have and the consensus is pretty clear: build a comprehensive set of links for the
entire site.
So the next step is to build that navigation in such as way that if we have to change it, it’s
not a huge pain in the neck to update the entire site.
Let’s see how that works.
The JavaScript Navigation Solution
Go to web.wsu.edu, click Downloads & Add-ons, and click JavaScript Navigation.
What we’re dealing with here is basically a template for the navigation panel. Once you
set this up, it’s easy to modify, refine or otherwise tweak the navigation—and
automatically update the whole site. It’s sweet: a template within a template.
But, you say, I don’t know JavaScript! Hey, neither do I. We don’t need to.
Just follow the instructions. You create a new library item. By the way, library items are
immensely useful for lots of things. Suppose you have, say, diversity and EOE language
you use over and over. You could save that as a library item and just drag it onto the page
where you need it. We’ll see the drag-and-drop utility of library items in a second.
5
So you’ve got your blank library page. Type in your nav structure, and link it up. I’m not
going to go into this in superfine detail, so be sure to read those instructions! But
basically, the nav structure is a bulleted list. It’s that simple.
Now save the nav structure as ―nav‖ in a folder you’ve created called ―library.‖
Dreamweaver will add the correct file extension so don’t worry about that.
Now, look again at those instructions—you need to do a copy and paste routine to
actually get the J’script to work. This is Step 4 in the instructions. Just copy that bit of
code, then go back to your design file. Click Code view, then search (CNTRL+F) for
. Select the tag and paste the JavaScript in. Easy—and we’re almost
done.
Still in code view, look for the tag inside the HTML. Select everything
below until the line above the closing navigation div tag. .
Now, click the Assets tab over on the right. You’ll see the nav file. Drag it onto the
selected area of your code. Voila, the library nav has now replaced the placeholder
navigation that came with your design file.
Now let’s turn this design file into a template file.
Defining a Template’s Editable Regions
It’s easy to convert an HTML file into a template file: just click File, then click Save as
Template. Bingo, that’s done. Dreamweaver saves the template automatically in a folder
called templates.
But now look—I get the universal no sign over the entire page! No good. We need to
define some editable regions; we need to unlock the areas were we’re actually going to be
placing content.
All regions in a new template are locked when you create the template, so to make the
template useful, you must define some regions as editable, or unlock them.
To create an area on the page that you can edit, simply select that area, right click on it,
click the Templates drop down, and on the drop down, click Make New Editable Region.
A dialog pops up, and you want to give this area a name that not only you remember but
that is clear to your co-workers, too. (And never assume you’ll be the only one working
on a Web site!)
You can do this for any area of the page you want to make editable. Since we’re using a
single-file navigation, don’t make the nav area editable. For those of who worked with
the first generation of WSU Web pages, this is a 180. One of the beauties of the new
design is we no longer have to fuss with the navigation every time we build a page. Do it
right, do it once, that’s the new motto.
6
Some areas I like to keep editable are the site ID area at the top of the page. I usually lock
in the unit, office or department name, but leave the area under that editable. That way I
can, for instance, make a site for Wazzu County Extension, and have that appear
consistently on every page, but do a little customization on, say, the Tree Fruit,
FoodSense, and Cat Care sections.
Once you think you’ve got your ducks in a row, save and close the template file.
You can now use your template as the basis for creating Web pages.
Creating Pages from Templates
So let’s see how it works.
Click File, the New, then (and the wording may vary depending on which version of
Dreamweaver you’re using) New from Template. This is important: you must create new
pages from the template. It’s a parent-child relationship, so to speak. If you break that
relationship, you won’t get the benefit of working with a template.
You get a new, untitled page. The areas we defined as editable are indicated by a blue
outline box.
I can add text, graphics, and so on. After I give the page a title in the title area, I save it,
just as I would any other HTML page.
Places that aren’t defined as editable are locked and I can’t mess with them.
This part’s easy, so I’m going to move on.
Updating Pages Based on a Template
Let’s say Wazzu County Extension adds a cool new program called Pest Diagnosis at a
Distance. The director says, add a link to our site. In the old days, this was a pain, and
many sites suffer from what I call link degradation for the simple reason that, in order to
add that link, every page in the site had to be updated by hand. Never again.
I simply open the nav library item, add the link and look what happens when I click save:
I’m being asked if I want to update the pages associated with this library item. Oh, yes,
please, make my life easy.
Ditto with adding editable areas and changing locked areas in a template: if I need to
change the contact info in the footer, for instance, I simply open the template, make the
change, save and, again, I’m asked if I want to update all the pages based on the template.
Customizing the Site ID Zone
Everybody wants their own cool graphic in the site ID zone of their page. In the old days,
it was easy: you placed the graphic on every page and, after you did all that work, you
7
were done. But what if you wanted to change or update the graphic? Then you had lots
more work to do. Job insurance, I guess.
Here’s the new way. These design files are all based on CSS, which means cascading
style sheet. I won’t go into the gory details, but here’s how you put a custom graphic in
the ID zone.
Of course, for this to work, you have to have a banner graphic of the precise size to fit
into the available area. The dimensions are 610 pixels wide x 75 pixels tall. You’ll need
to create this graphic in Photoshop or other image editing software. Save it as a jpg or
png into your site’s images folder.
In the Extension design file, this is going to be one step easier, so I’m going to start with
a CAHNRS type page first.
I’m going to show you the code by highlighting it on screen, but please don’t feel like
you have to scribble all this down. This is a job for copy and paste.
Instead, go to the CAHNRS Web site – cahnrs.wsu.edu – and view the source code in
your Web browser. In Firefox, click View, then click Page Source from the menu. In
Internet Explorer 7, click View then Source from the menu. Once you’re looking at the
source code, you can use the find function in your browser to get to the right spot to start
copying and pasting.
In the code, search for print style sheet; you’re looking for those words enclosed in
triangle brackets:
Now scroll down a bit and copy these two lines—they’ll be quite widely separated on the
CAHNRS page, but the second tag is easy to remember. For every tag that opens or
begins a function—bold, Javascript, whatever—you have to have a tag that closes or ends
that process.
Add this:
Now here’s the code that actually makes the custom banner display. Copy that *between*
the above two tags.
#siteID {
height: 74px;
width:735px;
background: #;
8
background-image: url(http://cahnrs.wsu.edu/images/tittlebarcahnrs.jpg);
background-repeat: no-repeat;
background-position: 125px 0px;
font-family: "Lucida Sans", Arial, sans-serif;
border-bottom: 1px solid #606a74;
color: #fff;
}
What we’re really after is the line that says background-image.
That’s where we’ll pop in the exact path to the custom graphic. This has to be typed
exactly right, or it simply will not work. Once you’ve got that in place, upload the custom
banner graphic to your server. Now, when you preview your page, you should see the
banner in place.
And that’s it, folks!
9