Streamlining Website Development in Dreamweaver <ul><li>Roger L. Runquist </li></ul><ul><li>Western Illinois University </...
Objectives <ul><li>Stylesheets </li></ul><ul><li>Dreamweaver Templates </li></ul>
Cascading Style Sheets <ul><li>Gives the user more control of their type and the general page layout. </li></ul><ul><li>Ca...
Ways styles can be included <ul><li>Inline - useful for a single occurrence, much like using a <FONT> tag. </li></ul><ul><...
Ways styles can be included <ul><li>Document level - styles can be used throughout a single webpage. </li></ul><style> <!-...
Ways styles can be included <ul><li>External - styles can be defined once and used throughout the site. </li></ul><ul><li>...
CSS Syntax http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html#syntax
CSS Syntax <ul><li>Inline </li></ul><ul><li>Document and External </li></ul><tag style=&quot;style declarations go here&qu...
CSS Are Defined Using a Box Model
Box Components <ul><li>Content- The actual content of the element such as text or an image. When using the CSS width prope...
Box Components <ul><li>Padding- This is set around the content when you define the padding-top, padding-right, padding-bot...
Box Components <ul><li>Border- This is set around the content and padding when you define the border-top, border-right, bo...
Box Components <ul><li>Margin- This is set around the combined content, padding and border when you define the margin-top,...
Getting it to work <ul><li>Set up your site in Dreamweaver </li></ul><ul><li>Create a new page and design all the elements...
Templates <ul><li>The idea is to set up all of the “Same” elements in your site </li></ul><ul><ul><li>Navigation </li></ul...
Changes… <ul><li>Changes to the entire web site should be done by opening the template from the Templates folder </li></ul...
Useful CSS Resources <ul><li>http://www.meyerweb.com/eric/css/references/index.html </li></ul><ul><li>http://www.westciv.c...
Upcoming SlideShare
Loading in …5
×

Streamlining Website Development in Dreamweaver

1,099 views

Published on

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.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Streamlining Website Development in Dreamweaver

  1. 1. Streamlining Website Development in Dreamweaver <ul><li>Roger L. Runquist </li></ul><ul><li>Western Illinois University </li></ul>
  2. 2. Objectives <ul><li>Stylesheets </li></ul><ul><li>Dreamweaver Templates </li></ul>
  3. 3. Cascading Style Sheets <ul><li>Gives the user more control of their type and the general page layout. </li></ul><ul><li>Can be used repeatedly to quickly apply complex styles. </li></ul><ul><li>Can be used to alter the way an existing page looks. </li></ul><ul><li>Simply put, it is a set of rules for a webpage to use. </li></ul>
  4. 4. Ways styles can be included <ul><li>Inline - useful for a single occurrence, much like using a <FONT> tag. </li></ul><ul><li><p style=&quot;color: #660000; font-family: 'Courier New', Courier, monospace; font-weight: bold; padding-left: 2em&quot;> </li></ul>
  5. 5. Ways styles can be included <ul><li>Document level - styles can be used throughout a single webpage. </li></ul><style> <!-- .mystyle { color: #224059; padding: 4px; } --> </style>
  6. 6. Ways styles can be included <ul><li>External - styles can be defined once and used throughout the site. </li></ul><ul><li>Requires html page to import the .css information </li></ul><style> <!-- @import url(styles/general.css); --> </style>
  7. 7. CSS Syntax http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html#syntax
  8. 8. CSS Syntax <ul><li>Inline </li></ul><ul><li>Document and External </li></ul><tag style=&quot;style declarations go here&quot;> selector { style declarations go here } <p style=&quot;color: blue;&quot;> para { color: blue; }
  9. 9. CSS Are Defined Using a Box Model
  10. 10. Box Components <ul><li>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. </li></ul>Margin Border Padding Content Containing box width Element background width Element width
  11. 11. Box Components <ul><li>Padding- This is set around the content when you define the padding-top, padding-right, padding-bottom, padding-left and padding properties. </li></ul>Margin Border Padding Content Containing box width Element background width Element width
  12. 12. Box Components <ul><li>Border- This is set around the content and padding when you define the border-top, border-right, border-bottom, border-left and border properties. </li></ul>Margin Border Padding Content Containing box width Element background width Element width
  13. 13. Box Components <ul><li>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. </li></ul>Margin Border Padding Content Containing box width Element background width Element width
  14. 14. Getting it to work <ul><li>Set up your site in Dreamweaver </li></ul><ul><li>Create a new page and design all the elements of the page... It helps to “dummy-in” content. </li></ul><ul><li>Save the page as a template. </li></ul><ul><li>Add editable regions </li></ul><ul><li>Save the page. </li></ul><ul><li>Create new pages (File->New and then click templates) </li></ul><ul><li>Add new content and save pages. </li></ul>
  15. 15. Templates <ul><li>The idea is to set up all of the “Same” elements in your site </li></ul><ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Page Colors </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><li>If an element of the site changes, merely change the template, apply the changes automatically to the other pages, and re-upload your site. </li></ul>
  16. 16. Changes… <ul><li>Changes to the entire web site should be done by opening the template from the Templates folder </li></ul><ul><li>Save the changes. DW should ask you if you would like to update any linked pages. </li></ul><ul><li>After updating, re-upload your site </li></ul>
  17. 17. Useful CSS Resources <ul><li>http://www.meyerweb.com/eric/css/references/index.html </li></ul><ul><li>http://www.westciv.com/style_master/academy/css_tutorial/ </li></ul><ul><li>http://www.jessey.net/simon/articles/003.html </li></ul><ul><li>Meyer, Eric (2000). Cascading style sheets: The definitive guide. O’Reilly and Associates. </li></ul>

×