Streamlining Website

Development in Dreamweaver

Streamlining Website

Development in Dreamweaver

Roger L. RunquistWestern Illinois University

Roger L. RunquistWestern Illinois University

Objectives

• Stylesheets

• Dreamweaver Templates

Cascading Style SheetsGives 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.

Ways styles can be included

Inline- useful for a single occurrence, much like using a <FONT> tag.

• <p style="color: #660000; font-family: 'Courier New', Courier, monospace; font-weight: bold; padding-left: 2em">

Ways styles can be included

Document level- styles can be used throughout a single webpage.

<style><!--.mystyle {

color: #224059;padding: 4px;

}--></style>

Ways styles can be included

External- styles can be defined once and used throughout the site.

Requires html page to import the .css information

<style><!--@import url(styles/general.css);--></style>

CSS Syntax

http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html#syntax

CSS Syntax

Inline

Document and External

<tag style="style declarations go here">

selector { style declarations go here }

<p style="color: blue;">

para { color: blue; }

CSS Are Defined Using a Box Model

Box ComponentsContent- 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

BorderPadding

Content

Containing box width

Element background width

Element width

Box ComponentsPadding- This is set around the content when you define the padding-top, padding-right, padding-bottom, padding-left and padding properties.

Margin

BorderPadding

Content

Containing box width

Element background width

Element width

Box ComponentsBorder- This is set around the content and padding when you define the border-top, border-right, border-bottom, border-left and border properties.

Margin

BorderPadding

Content

Containing box width

Element background width

Element width

Box ComponentsMargin- 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

BorderPadding

Content

Containing box width

Element background width

Element width

Getting it to work1. 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.

Templates• The idea is to set up all of the “Same” elements

in your site

• Navigation

• Page Colors

• 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.

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

Useful CSS Resources

http://www.meyerweb.com/eric/css/references/index.html

http://www.westciv.com/style_master/academy/css_tutorial/

http://www.jessey.net/simon/articles/003.html

Meyer, Eric (2000). Cascading style sheets: The definitive guide. O’Reilly and Associates.