streamlining website development in dreamweaver
DESCRIPTION
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.TRANSCRIPT
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.