Overview
Once you've had a chance to navigate through all the example pages and
elements provided, you can plan your site. Before making any changes to
the template, create your back-up file.
Couple of things to get you started off the blocks....
Cascading Style Sheet (CSS)
The CSS or External Style Sheet manages all the fonts, layout, colors (i.e.
links, hover links) in this template. Setting it up as a separate external
file allows you full control to make changes from one file location. When
you make changes to this external style sheet, all pages will receive the
update / changes.
Makes web maintenance tasks a breeze!
The style sheet is categorized into sections: colors, layout, general tags,
and customized elements. Each section has comments to tell you what they
are. This way, you can easily see the sections which contain warnings - "do
not edit" - to prevent any major design changes (and errors).
 top
of page
Lilbrary: Include Pages
Repeating elements are managed through the Library folder. Need to update
the menu? Simply open the library item, make your change, and let Dreamweaver
update all the pages which are using that element. It's a handy way to keep
on top of maintenance tasks!
top
of page
Logo and "Your Site Name Here"
Each page offers a logo and place holder for your new web site name.
Simply open the logo.htm file (see the 'includes' folder) and edit it to
your liking. Once you have saved your changes, all the pages which call
this file into the header will receive your update.
top
of page
Footer & Copyright
The footer.htm file (see the 'includes' folder) also contains some data
which will require your personalization.
top
of page
Master Files
Included in this package are master files: Photoshop and SwishMax (flash
animations). Two layered master Photoshop files to manage the main
header image and the four (4) small images provided in this template.
There are also four (4) SwishMax files to allow you to edit the animated
header images.
Note - fonts used in the images are not included.
top
of page
Tips n' tricks
If you're using Dreamweaver, we recommend that you start using the
split screen view. Watch what you're working on as you make edits to
become more familiar with the html code. This will also show you what
classes (from the style sheet) we have used to make sections of content
look as they do.
top
of page
Editing the CSS File
The style sheet is categorized into sections: colors, layout, general
tags, and customized elements. Each section has comments to tell you
what they are. This way, you can easily see the sections which contain
warnings - "do not edit" - to prevent any major design changes (and
errors).
Just like any major changes to the overall layout and design of this
template, we do not make any warranties to major changes applied to the
Styles. We have noted acceptable areas of change and highlighted the
areas to be left "as-is".
top
of page
Formatting Toolbar, Font Sizes, and Your Visitor's Experience
By using the pre-designed styles provided in the Cascading Style Sheet,
you will create an easy to update website. The style sheet creates a
"memory" of the instructions: the font family, size, color,
formatting, etc. By applying a style from the style sheet, you are applying
the "memorized" format. If you want to change the style, you
can change the instructions in the styles.css file. Then the memory
is stored in one location - therefore, when you make an update to it,
all pages which are using that style will automatically receive the
new instructions! Apply styles by using the "Format" drop
down list located in the "Properties" toolbar of Dreamweaver.
We always use percentages for our font sizes as it is the recommended
best practice for browser display. With a percentage font size in place,
your Visitors may control the size in which they view text on your
screen. For instance, in Internet Explorer, go to the menu and select
"View" + "Text Size" and then play with the settings. Go from smaller,
to medium, to larger and watch the fonts flex in size. This is only
possible when fonts are set to a percentage.
top
of page |
Your Site Name Here 
