streamlining website development in dreamweaver roger l. runquist western illinois university roger...
Post on 20-Dec-2015
222 views
TRANSCRIPT
![Page 1: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/1.jpg)
Streamlining Website
Development in Dreamweaver
Streamlining Website
Development in Dreamweaver
Roger L. RunquistWestern Illinois University
Roger L. RunquistWestern Illinois University
![Page 2: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/2.jpg)
Objectives
• Stylesheets
• Dreamweaver Templates
![Page 3: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/3.jpg)
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.
![Page 4: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/4.jpg)
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">
![Page 5: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/5.jpg)
Ways styles can be included
Document level- styles can be used throughout a single webpage.
<style><!--.mystyle {
color: #224059;padding: 4px;
}--></style>
![Page 6: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/6.jpg)
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>
![Page 7: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/7.jpg)
CSS Syntax
http://www.westciv.com/style_master/academy/css_tutorial/introduction/how_they_work.html#syntax
![Page 8: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/8.jpg)
CSS Syntax
Inline
Document and External
<tag style="style declarations go here">
selector { style declarations go here }
<p style="color: blue;">
para { color: blue; }
![Page 9: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/9.jpg)
CSS Are Defined Using a Box Model
![Page 10: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/10.jpg)
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
![Page 11: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/11.jpg)
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
![Page 12: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/12.jpg)
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
![Page 13: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/13.jpg)
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
![Page 14: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/14.jpg)
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.
![Page 15: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/15.jpg)
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.
![Page 16: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/16.jpg)
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
![Page 17: Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University](https://reader035.vdocuments.mx/reader035/viewer/2022062407/56649d415503460f94a1ca04/html5/thumbnails/17.jpg)
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.