Streamlining Website Development in Dreamweaver

Slide 1: Strea m lining Web site D evelopm ent in D rea m w ea ver Roger L. Runq uist Western Illinois U niversity

Slide 2: Objec tives • Stylesh eets • Drea mwea ver Templa tes

Slide 3: Cascading Style Sheets • Gives the user more control of their type and the general page layout. • C be used repeatedly to quickly apply complex styles. an • C be used to alter the way an existing page looks. an • Simply put, it is a set of rules for a webpage to use.

Slide 4: W styles can be included ays • Inline- useful for a single occurrence, much like using a <FONT> tag.

Slide 5: W styles can be included ays • Document level- styles can be used throughout a single webpage.

Slide 6: W styles can be included ays • External- styles can be defined once and used throughout the site. • Requires html page to import the .css information

Slide 7: C Syntax SS

Slide 8: C Syntax SS • Inline • Document and External

Slide 9: C Are Defined U a SS sing Box M odel

Slide 10: Box Components Content- T actual content of the element such as text or an he image. W using the C width property, you are actually hen SS defining the width of this content. M argin Border Padding Content Element width Element background width Containing box width

Slide 11: Box Components Padding- T is set around the content when you define the his padding-top, padding-right, padding-bottom, padding-left and padding properties. M argin Border Padding Content Element width Element background width Containing box width

Slide 12: Box Components Border- T is set around the content and padding when you his define the border-top, border-right, border-bottom, border-left and border properties. M argin Border Padding Content Element width Element background width Containing box width

Slide 13: Box Components Margin- T is set around the combined content, padding and his border when you define the margin-top, margin-right, margin- bottom, margin-left and margin properties. M argin Border Padding Content Element width Element background width Containing box width

Slide 14: G etting it to work • Set up your site in Drea mw ea ver • Crea te a new pa ge a nd design a ll th e elements of th e pa ge... It h elps to “ dummy-in” c ontent. • Sa ve th e pa ge a s a templa te. • Add edita ble regions • Sa ve th e pa ge. • Crea te new pa ges (File->New a nd th en c lic k templa tes) • Add new c ontent a nd sa ve pa ges.

Slide 15: Templa tes • Th e idea is to set up a ll of th e “ Sa me” elements in your site Na viga tion Pa ge Colors G ra ph ic s If a n element of th e site c h a nges, merely c h a nge th e templa te, a pply th e c h a nges a utoma tic a lly to th e oth er pa ges, a nd re-uploa d your site.

Slide 16: Ch a nges… Ch a nges to th e entire web site sh ould be done by opening th e templa te from th e Templa tes folder Sa ve th e c h a nges. DW sh ould a sk you if you w ould like to upda te a ny linked pa ges. After upda ting, re-uploa d your site

Slide 17: U C Resources seful SS • 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: T definitive guide. he O’Reilly and Associates.