Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University

Objectives Stylesheets Dreamweaver Templates

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.

Ways styles can be included Inline- useful for a single occurrence, much like using a tag.

Ways styles can be included Document level- styles can be used throughout a single webpage. <!--.mystyle { color: #224059; padding: 4px; } -->

Ways styles can be included External- styles can be defined once and used throughout the site. Requires html page to import the.css information url(styles/general.css); -->

CSS Syntax

CSS Syntax Inline Document and External selector { style declarations go here } para { color: blue; }

CSS Are Defined Using a Box Model

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 Containing box width Element background width Element width

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

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 Containing box width Element background width Element width

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 Containing box width Element background width Element width

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.

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 /index.html y/css_tutorial/ Meyer, Eric (2000). Cascading style sheets: The definitive guide. O’Reilly and Associates.