Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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
Chapter 5: Templates and Style Sheets 3
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
Chapter 5: Templates and Style Sheets 4
– 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
Chapter 5: Templates and Style Sheets 5
• 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
Chapter 5: Templates and Style Sheets 6
• 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
Chapter 5: Templates and Style Sheets 7
• Click the Save button• Click the plus sign to the left of the Templates folder
Saving the Web Page as a Template
• 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
Chapter 5: Templates and Style Sheets 8
• Template instance = web page based on a template
Saving the Web Page as 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
Chapter 5: Templates and Style Sheets 9
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
Chapter 5: Templates and Style Sheets 10
• 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
Chapter 5: Templates and Style Sheets 11
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
Chapter 5: Templates and Style Sheets 12
• Editable Tag Attribute – lets the content developer unlock a tag attribute to edit it
Template with the logo for Colorado Parks
non-editable region
Chapter 5: Templates and Style Sheets 13
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
Chapter 5: Templates and Style Sheets 14
• 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
Chapter 5: Templates and Style Sheets 15
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
Adding and Centering a Table as the Third Editable Region
• 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
Chapter 5: Templates and Style Sheets 16
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
Adding and Centering a Table as the Third Editable Region
• 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
Chapter 5: Templates and Style Sheets 17
• 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
Chapter 5: Templates and Style Sheets 18
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
Adding and Centering a Table as the Fourth Editable Region
• 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
Chapter 5: Templates and Style Sheets 19
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
Adding and Centering a Table as the Fourth Editable Region
Chapter 5: Templates and Style Sheets 20
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
Chapter 5: Templates and Style Sheets 21
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)
Chapter 5: Templates and Style Sheets 22
Creating Editable Regions – other ways
• Insert / Template Objects / Editable RegionsOR
• Right-click on selected content; Point to Templates; Click New Editable Region
Chapter 5: Templates and Style Sheets 23