• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Streamlining Website Development in Dreamweaver
 

Streamlining Website Development in Dreamweaver

on

  • 2,536 views

by Roger Runquist ...

by Roger Runquist
Learn to use templates and stylesheets to develop your websites more quickly. Learn how you can update a single page in your Dreamweaver site and have all similar pages change automatically.

Statistics

Views

Total Views
2,536
Views on SlideShare
2,536
Embed Views
0

Actions

Likes
1
Downloads
39
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Streamlining Website Development in Dreamweaver Streamlining Website Development in Dreamweaver Presentation Transcript

    • Streamlining Website Development in Dreamweaver
      • 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 <FONT> tag.
      • <p style=&quot;color: #660000; font-family: 'Courier New', Courier, monospace; font-weight: bold; padding-left: 2em&quot;>
    • 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=&quot;style declarations go here&quot;> selector { style declarations go here } <p style=&quot;color: blue;&quot;> 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
      • Set up your site in Dreamweaver
      • Create a new page and design all the elements of the page... It helps to “dummy-in” content.
      • Save the page as a template.
      • Add editable regions
      • Save the page.
      • Create new pages (File->New and then click templates)
      • 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.