dreamweaver cs3 chapter 5 - las positas...

Dreamweaver CS3

Chapter 5Chapter 5Chapter 5Chapter 5

Dreamweaver CS3Dreamweaver CS3Dreamweaver CS3Dreamweaver CS3

Templates and Style SheetsPart 1

The idea

• Structure a page and save as a template• Build the CSS page• Apply CSS to the template• Start using the template to build the other pages

Chapter 5: Templates and Style Sheets 2

Copy the files from Chapter 5

• Copy the files from the Students Data File to your appropriate folders


How you create a Template in DW

• From an existing file– Open the file; Save as Template; Define Editable Regions

• From a new document basic page– Use the Save As Template


– Use the Save As Template

• File / New and select HTML template– The method used by the book– Selecting the Blank Template category from the New Document dialog box

Creating a Template Document

• Click New on the File menu• Click Blank Template and then click HTML template in the Template Type list

• Click the Create button• If the Insert bar is not displayed, click Window on


• If the Insert bar is not displayed, click Window on the Insert bar and then click Insert

• If the Common category is not selected, click the Common category tab

Understanding Templates

• Exist in many forms• It’s a pre-designed page with the definition of the appearance of the page

• Functions as a pattern for other pages• Planning & Organization


• Planning & Organization

Saving the Web Page as a Template

• Click File on the menu bar and then click Save. If a Dreamweaver Warning box is displayed, click OK

• Type spotlight_monuments in the Save as text box


• Click the Save button• Click the plus sign to the left of the Templates folder


• Dreamweaver automatically creates a Template folder

• .dwt is the template extension• Special code is saved into the template• Template instance = web page based on a


• Template instance = web page based on a template


• Designate editable and non-editable regions• Ability to update multiple pages at the same time• New document created based on a template èremains attached to template unless specifically separated


separated

Editable and Non-Editable Regions

• Template first created – DW locks most parts of the document

• Editable regions and/or parameters need to be added

• Editable Regions, Repeating Regions, Optional


• Editable Regions, Repeating Regions, Optional Regions and Editable Tag Attributes

Types of Regions

• Editable – unlocked region è a content developer will be able to edit

• Repeating – section that is set to repeat –repeating table and repeating region – can be


repeating table and repeating region – can be duplicated as often as desired in a page. By default, it does not include editable region but one can be inserted

Types of Regions – cont.

• Optional – lets the content developer show or hide content on a page – Ex.: for news, special promotions etc.

• Editable Tag Attribute – lets the content


• Editable Tag Attribute – lets the content developer unlock a tag attribute to edit it

Template with the logo for Colorado Parks

non-editable region


Considerations / Suggestions

• Include as much content as possible• Use prompts – to inform what is expected (ex.: page DW411)

• Give meaningful names to the editable regions• Use placeholders, particularly for images


• Use placeholders, particularly for images

Adding and Centering a Table as the Third Editable Region

• Click Insert on the menu bar and then click Table• Enter the following data in the Table dialog box: 1 for

Rows, 2 for Columns, 70 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 5 for Cell spacing. Type Spotlight on Colorado national monuments as the Summary text


monuments as the Summary text

• Click the OK button• Click the Align box arrow in the Property inspector, and

then click Center to center the table• Click the left cell in the table and then drag to select both

cells in the table


• Click the Horz button arrow in the Property inspector and then click Center. Click the Vert button arrow and then click Middle

• Click the left cell in the table and then type Add additional columns and rows as necessary. Add images and short descriptions of image


Add images and short descriptions of image to each cell in the table. as the prompt

• Click in the right cell. Click Insert on the menu bar, point to Image Objects, and then point to Image Placeholder

• Click Image Placeholder.• In the Image Placeholder dialog box, type add_image in

the Name text box as the prompt


• Press the TAB key. Type 64 for the Width• Press the TAB key. If necessary, type 32 for the Height

• Click the OK button• Click <table> in the tag selector and type


• Click <table> in the tag selector and type spotlight in the Table Id box. Press the ENTER key

• Click to the right of the table and then press the ENTER key two times

Adding and Centering a Table as the Fourth Editable Region

• Click Insert on the menu bar and then click Table to display the Table dialog box

• Enter the following data in the Insert Table dialog box: 1 for Rows, 2 for Columns, 50 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing. Type Web site


padding, and 0 for Cell spacing. Type Web site links as the Summary text. Click the OK button

• Click the Align button arrow in the Property inspector, and then center the table

• Click the left cell and then drag to select both cells in the table


• Click the Horz button arrow in the Property inspector and then click Center. Click the Vert button arrow and then click Middle

• Click the left cell and then type Add additional columns as necessary for


additional columns as necessary for links as the prompt

• Select the table and name it links. Press the ENTER key

• Press CTRL+S to save the file. If a Dreamweaver warning box is displayed, click the OK button

Creating Editable Regions

• In a table – you can define an individual cell or an entire table as an editable region

• You CANNOT select non-adjacent cells and define as a single editable region

• Using the Assets Panel, you can edit, rename or delete a template


delete a template• Each editable region should have a unique name• All DW region objects are available through the Templates pop-up menu on the Common Category tab of the Insert bar – page DW419

Creating Editable Regions

• Follow the steps given by the book (from page DW420 until DW425)


Creating Editable Regions – other ways

• Insert / Template Objects / Editable RegionsOR

• Right-click on selected content; Point to Templates; Click New Editable Region


dreamweaver cs3 chapter 5 - las positas...

Documents