CSS and TemplateDriven Websites Using DW

1
CSS- and Template-Driven Websites Using DW

• March 2008 Follow-up Workshops for ICCSD Building
  Webmasters

2
Overview

• Site definition in DW (1st PPT)
• DW CSS- Template-Driven Websites

(1) Create CSS Style Sheet(s)

• DW / Adobe Resources (3rd PPT)

3
Overview of CSS

• DW CSS- Template-Driven Websites

• Best for neophytes to DW /or MS FP users
• Must already have website in place
• e.g., Kwood website

• Best for tech savvy
• e.g., ICCSD website

• Best for semi-tech savvy
• e.g., Penn website

4
CSS Vs. Template

• CSS (Cascading Style Sheet)
• Defines the look and style(s) of your websites
  web pages content
• b/g colors, fonts, font styles, font formatting,
  tabular entries, hyperlink styles / effects,
  hovering, etc.
• Once defined, will cascade all defined styles
  to all web pages templates to which you attach
  CSS
• Template-Driven Websites
• Templates define the architectural structure of
  your websites web pages and location of content
  on web pages.
• E.g., 2 column, 1 header, 1 footer structural
  look (ICCSD website)

5
Creating / Using CSS in DW

• Open DW
• File ? New
• Page from Sample
• CSS Style Sheet ? Full Design
• Choose preferred Layout ? Accessible, Verdana,
  etc.
• Click Create.
• Save as
• File name ? style_test.css
• (From pull-down) Save as type ? style_test.css
  NOT HTML!!!

6
(No Transcript)
7
(This is your CSS in Code)
8
(No Transcript)
9
Creating CSS-Template-Driven Sites

• File ? New
• Blank Template
• Template type ? HTML
• Layout ? 2 column, left sidebar, header / footer
• Click on CSS panel (upper-right hand side)
• Go to Properties click link icon
• Attach CSS style_test.css to template

10
(No Transcript)
11
Can also attach CSS this way
12
Attaching CSS (contd.)
(Type in 3 media types from drop-down)
13
Creating Template-Driven Sites (contd.)

• Insert ? Template Objects
• Editable regions (for content, side navigation
  bars, etc.)
• Notes
• Eliminate superfluous text above / below
  insertion point of template object
• Can insert while in both design code modes
• Save as
• test_template.dwt
• (From pull-down) Save as type ?
  test_template.dwt NOT HTML!!!

14
(No Transcript)
15
Click File ? Save As
Save As test_template.dwt
16
Split screen (Code / Design)
17
Properties task bar for style modification
18
Creating CSS-Template pages

• In DW, go to File ? New
• Click on Page from Template.
• Click on your test_template.dwt file
• Click Create.
• A new .HTML web page specific to
  test_template.dwt now appears.
• Notice your editable vs. non-editable regions on
  your new .HTML web page.
• Save as ? test.html
• See visual demo next slide.

19
(Your Template)
20
Other DW / Page Design Items

• DW menu Commands ? Clean up Word HTML
• DW removes MS formatting that clogs browsers
• Use this command after converting .doc to .htm /
  .html.
• What is the recommended on-screen web page size
  that is most universal?
• create elastic web pages (see DW templates)
  that will accommodate any screen size (800
  Width X 600 Height is convention).

21
Other DW / Page Design Items (contd.)

• Layout, presentation, and look of web page
  design application of CSS and CSS-driven
  templates in DW to web pages.
• DW vernacular
• div -- containers / bldg. blocks for layouts
  of CSS
• tags / selected
• Html codes , ,
  

22
200 Recommended Purchases

• Adobe Acrobat Professional (8.0) ? 37
• Convert Word.docs or any other MS
  Office-generated item to PDFs
• Keeps MS formatting intact which goes chaotic
  upon .html conversion
• For teacher newsletters, meeting agendae, EZ view
  / print-outs, etc.
• Adobe Photoshop Elements (4.0 for Mac 5.0 for
  PC) ? 27
• To create/modify .gifs, .jpgs, .bmps
• To resize images at 100K or ? (saves server
  space).
• DW CS3 (version 9.0) ? 95-120
• Latest generation of DW
• MUCH better than MX 2004 (version 7.0)!!
• 2 GB External USB stick ? 40-50
• To back up your entire website if server or
  computer fail!!
• ALWAYS back up your Schools website after any
  edits!!!

23
ICCSD Requisition Form
24
The End!!! )