Section 1 Reusable Page Elements -...

4
Table of Contents Introduction xvii Section 1 Reusable Page Elements Defining the Site ...................................................................................4 1 Snippets 7 Snippets Explored .................................................................................8 Accessing the Snippets Panel ................................................................9 The Snippets Panel Interface ..............................................................10 Preview Area ...................................................................................11 Listing Area ....................................................................................11 Name Field ....................................................................................12 Description Field ...........................................................................12 Insert Button .................................................................................12 New Snippet Folder Button ..........................................................13 New Snippet Button .....................................................................13 Edit Snippet Button ......................................................................13 Remove Button ..............................................................................13 Using Snippets ....................................................................................13 Insert Snippets ...............................................................................14 Create a New Snippet ....................................................................14 The Snippet Dialog ........................................................................14 Edit Snippets ..................................................................................17 Delete Snippets ...............................................................................17 Create a New Folder ......................................................................18 Manage Snippets ............................................................................18 Share Your Snippets with Other Developers ................................22 Build a Snippet Extension .............................................................24 Snippets Panel Advantages and Disadvantages .................................27 Third-Party Snippet Options .............................................................27 The Snippet Converter by Massimo Foti .....................................27 The Classic Snippets Panel Extension by Massimo Foti ..................................................................................28 The Snippets Exchange ..................................................................29 Interview: Angela C. Buraglia ...........................................................30 Summary .............................................................................................31 2 Library Items Revealed 33 What Are Library Items? ....................................................................34 Methods of Creating Libraries ...........................................................34 Dreamweaver MX Templates iv

Transcript of Section 1 Reusable Page Elements -...

Page 1: Section 1 Reusable Page Elements - pearsoncmg.comptgmedia.pearsoncmg.com/images/0735713197/toc/0735713197T.pdf · Table of Contents Introduction xvii Section 1 Reusable Page Elements

Table of Contents

Introduction xvii

Section 1 Reusable Page ElementsDefining the Site ...................................................................................4

1 Snippets 7Snippets Explored .................................................................................8Accessing the Snippets Panel ................................................................9The Snippets Panel Interface ..............................................................10

Preview Area ...................................................................................11Listing Area ....................................................................................11Name Field ....................................................................................12Description Field ...........................................................................12Insert Button .................................................................................12New Snippet Folder Button ..........................................................13New Snippet Button .....................................................................13Edit Snippet Button ......................................................................13Remove Button ..............................................................................13

Using Snippets ....................................................................................13Insert Snippets ...............................................................................14Create a New Snippet ....................................................................14The Snippet Dialog ........................................................................14Edit Snippets ..................................................................................17Delete Snippets ...............................................................................17Create a New Folder ......................................................................18Manage Snippets ............................................................................18Share Your Snippets with Other Developers ................................22Build a Snippet Extension .............................................................24

Snippets Panel Advantages and Disadvantages .................................27Third-Party Snippet Options .............................................................27

The Snippet Converter by Massimo Foti .....................................27The Classic Snippets Panel Extension by Massimo Foti ..................................................................................28The Snippets Exchange ..................................................................29

Interview: Angela C. Buraglia ...........................................................30Summary .............................................................................................31

2 Library Items Revealed 33What Are Library Items? ....................................................................34Methods of Creating Libraries ...........................................................34

Dreamweaver MX Templatesiv

00 0735713197_FM 9/23/02 12:30 PM Page iv

Page 2: Section 1 Reusable Page Elements - pearsoncmg.comptgmedia.pearsoncmg.com/images/0735713197/toc/0735713197T.pdf · Table of Contents Introduction xvii Section 1 Reusable Page Elements

Library Item Code Coloring ..............................................................36HTML Document Type Library Items .........................................36Library Item Document Type Library Items (Nested) ................38

Highlighting Options .........................................................................39Methods of Editing Library Items .....................................................40Methods of Using Library Items ........................................................41Deleting a Library Item ......................................................................42Re-Creating a Library Item ................................................................42Updating a Library Item .....................................................................43

The Modify Menu System .............................................................43The Library Assets Context Menu ................................................43

Design Time Style Sheets ...................................................................44Miscellaneous Library Item Options .................................................50Advantages and Disadvantages ..........................................................51Summary .............................................................................................53

3 All About Templates and Regions 55Templates—The Good, the Bad, and the Ugly .................................58

Design-Time versus Server-Side ...................................................59Site Maintenance Benefits and Strategies .....................................59

Template Code Coloring ....................................................................60Code Coloring ................................................................................60Highlighting Options ....................................................................61View Menu .....................................................................................62

Region Naming Conventions .............................................................63Templates the Old Way .......................................................................63

The Base Dreamweaver Template Code .......................................64Non-Editable Regions ....................................................................65Editable Regions .............................................................................66

Templates the New Way ......................................................................72The Base Dreamweaver MX Template Code ................................73DMX Non-Editable Regions .........................................................75DMX Editable Regions ..................................................................75The Template Program ..................................................................77Repeating Regions ..........................................................................87Repeating Tables ............................................................................90Conditional Regions ......................................................................93Editable Tag Attributes ................................................................107Nesting Templates ........................................................................111Editing Code Outside of HTML Tags .........................................119

Contents v

00 0735713197_FM 9/23/02 12:30 PM Page v

Page 3: Section 1 Reusable Page Elements - pearsoncmg.comptgmedia.pearsoncmg.com/images/0735713197/toc/0735713197T.pdf · Table of Contents Introduction xvii Section 1 Reusable Page Elements

Updating a Template’s Child Page ...................................................120The Modify Menu System ...........................................................120The Template Assets Context Menu ...........................................121

Using the Apply Template Function ................................................121When to Use This Method ..........................................................122When Not to Use This Method ...................................................123Warnings ......................................................................................123

Summary ...........................................................................................124

4 Removing Dreamweaver Markup 127Why Would You Want to Remove DMX Markup? .........................128

Bandwidth Considerations ..........................................................128Troubleshooting Purposes ...........................................................128Unique Modification ...................................................................129Conceal the Use of Templates and Libraries ..............................129

Why Would You Want to Leave DMX Markup? .............................129Remote Co-Workers ....................................................................129Bandwidth ....................................................................................129Troubleshooting Purposes ...........................................................130

Methods of Removing Markup ........................................................130Commands > Clean Up HTML ..................................................131Modify > Templates > Detach from Template ...........................133Modify > Templates > Export Without Markup... ....................134

Summary ...........................................................................................137

5 Miscellaneous Template-Related Functions 139Export Template Data as XML .........................................................140

When to Use This Method ..........................................................140When Not to Use This Method ...................................................141How to Use This Method ............................................................141Warnings ......................................................................................143

The Exported XML File ....................................................................143info.xml Explored ........................................................................143Hints and Tips ..............................................................................145

Import XML into Template ..............................................................145When to Use This Method ..........................................................146How to Use This Method ............................................................146Warnings ......................................................................................147

Cloaking ............................................................................................148Using JavaScript That References URLs and Images,SSIs, and SWFs in Templates and Library Items .............................152Summary ...........................................................................................153

Dreamweaver MX Templatesvi

00 0735713197_FM 9/23/02 12:30 PM Page vi

Page 4: Section 1 Reusable Page Elements - pearsoncmg.comptgmedia.pearsoncmg.com/images/0735713197/toc/0735713197T.pdf · Table of Contents Introduction xvii Section 1 Reusable Page Elements

Contents vii

Section II The Project 155Defining the Site ...............................................................................156

6 Building the Hot Cool Toys Base Template 159Examining the Project’s Layout .......................................................160Examining the Site ............................................................................161

The Page Title ...............................................................................161The Masthead ...............................................................................163The Masthead Toy ........................................................................166The Section Name Variable Area ................................................169The Navigation Buttons and Toy Image .....................................172Putting It All Together .................................................................176

Summary ...........................................................................................177

7 Building the Child Pages 181Checking the Template Syntax .........................................................183Setting Desired Parameters ..............................................................183Adding Content ................................................................................186

The Home Page ............................................................................186The About Us Page ......................................................................188The Contact Us Page ....................................................................189The Company Information Page ................................................193The Our Products Page ...............................................................197The FAQs Page .............................................................................200

Adding Behaviors ..............................................................................205Detaching the Site from the Template .............................................207Summary ...........................................................................................209

8 Modifications to the Site 211Nested Template Issues and Work-Arounds ...................................212Setting Up the Nested Templates .....................................................213

Enhancing the Products Page ......................................................214Creating Multiple FAQ Pages ......................................................219

Modifications to the Nested Templates ...........................................226Alternating Table Row Colors in Products.htm .........................226Alternating Q and A in the FAQ repeating table .......................228Automating the FAQ Optional Regions .....................................229

Summary ...........................................................................................231

Index ...................................................................................................233

00 0735713197_FM 9/23/02 12:30 PM Page vii