This document provides information on using cascading style sheets (CSS) and templates in Dreamweaver for website development. It discusses using CSS for layout and styling, including inline, internal and external styles. It also explains the CSS box model of margins, borders, padding, and content. The document gives steps for setting up a website in Dreamweaver, creating a template with common elements, adding editable regions, and updating linked pages when the template is modified.

1. Website
Development in
Dreamweaver
•
Tekblink Technology
•
Website Design and Development Company

2. Objectives
•
Stylesheets
•
Dreamweaver Templates

3. Cascading Style
Sheets
Gives the user more control of their type and the general
page layout.
Can be used repeatedly to quickly apply complex styles.
Can be used to alter the way an existing page looks.
Simply put, it is a set of rules for a webpage to use.

4. Ways styles can be
included
Inl i ne- usef ul f or a si ngl e occur r ence,
m
uch l i ke usi ng a <FONT> t ag.
•
<p style="color: #660000; font-family: 'Courier New', Courier,
monospace; font-weight: bold; padding-left: 2em">

5. Ways styles can be
included
D um
oc ent l evel - st yl es can be used t hr oughout a
si ngl e webpage.
<style>
<!-.mystyle {
color: #224059;
padding: 4px;
}
-->
</style>

6. Ways styles can be
included
Ext ernal - st yl es can be def i ned once and used
t hr oughout t he si t e.
Requires html page to import the .css information
<style>
<!-@import url(styles/general.css);
-->
</style>

7. CSS Syntax

8. CSS Syntax
Inline
<tag style="style declarations go here">
Document and External
<p style="color: blue;">
selector { style declarations go here }
para { color: blue; }

9. CSS Are Defined
Using a Box Model

10. Box Components
Content- The actual content of the element such as text or an image.
When using the CSS width property, you are actually defining the
width of this content.
Margin
Border
Padding
Content
Element width
Element background width
Containing box width

11. Box Components
Padding- This is set around the content when you define the paddingtop, padding-right, padding-bottom, padding-left and padding
properties.
Margin
Border
Padding
Content
Element width
Element background width
Containing box width

12. Box Components
Border- This is set around the content and padding when you define
the border-top, border-right, border-bottom, border-left and border
properties.
Margin
Border
Padding
Content
Element width
Element background width
Containing box width

13. Box Components
Margin- This is set around the combined content, padding and border
when you define the margin-top, margin-right, margin-bottom,
margin-left and margin properties.
Margin
Border
Padding
Content
Element width
Element background width
Containing box width

14. Getting it to work
1. Set up your site in Dreamweaver
2. Create a new page and design all the elements of
the page... It helps to “dummy-in” content.
3. Save the page as a template.
4. Add editable regions
5. Save the page.
6. Create new pages (File->New and then click
templates)
7. Add new content and save pages.

15. Templates
•
The idea is to set up all of the “Same” elements in your site
•
•
Page Colors
•
•
Navigation
Graphics
If an element of the site changes, merely change the
template, apply the changes automatically to the other
pages, and re-upload your site.

16. Changes…
•
Changes to the entire web site should be done by
opening the template from the Templates folder
•
Save the changes. DW should ask you if you would like
to update any linked pages.
•
After updating, re-upload your site