Dreamweaver, Part III

1
Dreamweaver, Part III

• Templates and
• Cascading Style Sheets

• Jamie Bishop, FDI/FLL Instructor
• cjbishop_at_vt.edu

2
Agenda / Goals

• Review elements of Dreamweaver I II
• Hands-on activities
• Defining a Site
• Creating a Finished Webpage
• Introduction to Templates
• Creating Modifying Templates
• Introduction to Cascading Style Sheets
• Using CSS in tandem with Templates
• Filebox / Uploading a Site (NMC)

3
DW1 Review

• Creating/saving a new page
• Titling your page
• Working with text formatting, lists, colors
• Inserting (accessible) images
• Setting up a basic table
• Creating hyperlinks for email and external
  websites
• Using interactive rollover images

4
DW2 Review

• Defined a Site with DW
• Discussed Site Management
• Set up Named Anchors Jump Links
• Created an Image Map (Hotspots)
• Used a Jump Menu for navigation
• Designed a webpage using Tables
• Worked with Frames Target Links

5
Templates

• Templates allow you to create a fixed design for
  multiple pages in a website. First you design
  your webpage, convert it into a template, then
  define the regions in that design that you would
  like to be able to edit.
• An advantage of templates is that you can allow
  Dreamweaver to automatically update all web pages
  based on a certain template when you modify the
  design of that template.

6
Templates Editable Regions

• In order for us to be able to use templates and
  base new pages off of them, well need to create
  what are called Editable Regions. These are
  areas that are MEANT to be changed from page to
  page.
• Any items that should remain static banners,
  site images, navigational fields, etc.., are left
  as uneditable.
• DW lets us modify the TEMPLATE, however, and when
  we do that, these static pieces can be changed
  and the entire sites look is changed.

7
Designing the Webpage
8
Cascading Style Sheets (CSS)

• A style sheet is a set of stylistic guidelines
  that tell a browser how an HTML document is to be
  presented to users. With CSS, you can specify
  such styles as the size, color, and spacing of
  text, as well as the placement of text and images
  on the pages.
• CSS is a simple language that can be read by
  humans in contrast to some computer languages.
  Perhaps even more important, however, is that CSS
  is easy to write. All you need to know is a
  little HTML as well as some basic desktop
  publishing terminology CSS borrows from that
  terminology when expressing style.

9
HTML vs. DTP (Desktop Publishing)

• HTML is a markup language using code to
  indicate within a document the roles that the
  documents pieces are to play. Its focus is on
  the structure of the document rather than its
  appearance. (Headers, paragraphs, lower-level
  heading)
• DTP (and CSS) emphasizes the appearance of a
  document rather than structure Font families,
  text colors, margin widths for accurate control
  of final look and design.

10
Advantages of CSS

• Keep design code separate from HTML code this
  makes web pages much smaller and quicker to
  download, because all of the style information
  has been removed to one file.
• Maintain a consistent look across all pages that
  link to the style sheet, and easily update that
  look by changing the values in the one file.
• Create more exact layouts
• Rewrite rules or behaviors for HTML code
• Change the way LINKS look and behave

11
Types of Styles

• Style sheets are, in general terms, a collection
  of formatting rules that control the appearance
  of content in a web page. You can implement CSS
  on your pages three different ways
• Inline a one-time style placed in the code
• Embedded a style sheet that controls the
  elements on one web page
• External one external style sheet that can
  control the appearance of many web pages

12
One Stylesheet to Rule them All
13
Redefining HTML Tags

• ltbodygtlt/bodygt
• ltpgtlt/pgt
• lth1gtlt/h1gt
• ltligt
• ltblockquotegtlt/blockquotegt
• ltstronggtlt/stronggt
• ltagtlt/agt

14
An HTML example

• lthtmlgtltheadgtlttitlegtAn HTML examplelt/titlegtlt/hea
  dgtltbodygtlth1gtHeading 1lt/h1gtlth2gtHeading
  2lt/h2gtlth3gtHeading 3lt/h3gtlth4gtHeading
  4lt/h4gtlth5gtHeading 5lt/h5gtltpgtTextlt/pgtlt/bodygtlt/ht
  mlgt

15
With CSS in a Stylesheet

• h1 colorblue
• h2 colornavy
• h3 colorolive
• h4 colorpurple
• h5 colormaroon
• p font-weightbold
• colorred

16
Todays Goal with CSS

• Put together a simple Cascading Style Sheet that
  redefines how a webpages background and text
  look and behave.
• At the end, we should be able to link our CSS
  style sheet to the webpage and its Template that
  we designed earlier in this session.