Dreamweaver CS3. Dreamweaver CS3. Chapter 5. Templates and Style Sheets Part 1

Transcription

1 Dreamweaver CS3 Dreamweaver CS3 Chapter 5 Templates and Style Sheets Part 1

2 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

3 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

4 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 File / New and select HTML template The method used by the book Selecting the Blank Template category from the New Document dialog box Chapter 5: Templates and Style Sheets 4

5 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 the Insert bar and then click Insert If the Common category is not selected, click the Common category tab Chapter 5: Templates and Style Sheets 5

6 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

7 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 Chapter 5: Templates and Style Sheets 7

8 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 template Chapter 5: Templates and Style Sheets 8

9 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

10 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 Regions and Editable Tag Attributes Chapter 5: Templates and Style Sheets 10

11 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 duplicated as often as desired in a page. By default, it does not include editable region but one can be inserted Chapter 5: Templates and Style Sheets 11

12 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 developer unlock a tag attribute to edit it Chapter 5: Templates and Style Sheets 12

13 Template with the logo for Colorado Parks non-editable region Chapter 5: Templates and Style Sheets 13

14 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

15 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 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 Chapter 5: Templates and Style Sheets 15

16 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 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 Chapter 5: Templates and Style Sheets 16

17 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 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 Chapter 5: Templates and Style Sheets 17

18 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 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 Chapter 5: Templates and Style Sheets 18

19 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 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 Chapter 5: Templates and Style Sheets 19

20 Adding and Centering a Table as the Fourth Editable Region Chapter 5: Templates and Style Sheets 20

21 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 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 Chapter 5: Templates and Style Sheets 21

22 Creating Editable Regions Follow the steps given by the book (from page DW420 until DW425) Chapter 5: Templates and Style Sheets 22

23 Creating Editable Regions other ways Insert / Template Objects / Editable Regions OR Right-click on selected content; Point to Templates; Click New Editable Region Chapter 5: Templates and Style Sheets 23