CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties Inspector... 7 Panel Groups... 8 Creating New Webpages...10 Creating New Blank Webpage... 10 Creating New Template Webpage... 13 Saving and Closing a Webpage...14 Summary...16 Chapter 2 Working with Dreamweaver Sites 17 Setting up Dreamweaver Sites...18 About Dreamweaver Sites... 18 Understanding Local and Remote Folder Structure... 19 Using the Manage Sites Dialog-Box... 19 Setting up and Editing the Local Root Folder... 21 Setting up Remote Folder... 22 Setting up a Testing Server... 24 Specifying URL Prefix for Testing Server... 25 Editing an Existing Remote Site in Dreamweaver... 26 Removing a Website from the List of Sites... 28 Exporting and Importing a Site... 28 Using Site Maps...30 Showing or Hiding Site Map Files... 31 Setting the Site Map as an Image... 32 Setting the Site Map Layout Preferences... 33 Working with a Webpage without Defining a Site...34 Connecting to an FTP Server without Defining a Site... 34 Understanding Basic Tab Options...36 Summary...39 Chapter 3 Working with Webpages 41 Designing Your First Webpage...42 Creating a Heading... 42 Adding Fonts... 43 v
Dreamweaver CS3 in Simple Steps Adding Paragraphs and Line Breaks... 43 Adding Images... 44 Setting Page Properties...46 Appearance... 47 Links... 48 Headings... 48 Title/Encoding... 49 Tracing Image...49 Working with Links...49 About Document Location and Paths... 50 Linking Pages...50 Linking Pages Within a Website... 51 Setting Links to Named Anchors Within a Webpage... 54 Linking to Another Website... 56 Setting a Link to an E-mail Address... 57 Using Jump Menus...59 Inserting the Jump Menu... 59 Modifying the Jump Menu... 62 Navigation Bars...63 Inserting the Navigation Bar... 64 Modifying the Navigation Bar... 66 Image Maps...67 Inserting the Image Map... 67 Modifying the Image Map... 69 Using Search and Replace Feature For Text...70 Previewing Webpage in Web Browser...72 Previewing the Webpage through Device Central...73 Summary...74 Chapter 4 Working with HTML Tables and Frames 75 vi Creating HTML Tables...76 Creating Tables in Standard Mode...79 Merging and Splitting Table Cells... 79 Formatting Multiple Cells in a Table... 82 Controlling Cell Options... 85 Sorting Table Data...86 Importing Table Data from Other Program...88 Applying Tables for Spacing and Alignment...92 Applying Tables to Design Forms... 92 Applying Nested Tables... 96 About Framework...98 Understanding HTML Frames...99 Creating Frames in Dreamweaver... 99
Contents Saving Files in Frameset... 101 Setting Targets and Links in Frames...103 Naming Frames... 103 Settings Links to a Target Frames... 104 Comparing Target Options... 106 Changing Frame Properties...106 Changing Frame Borders... 106 Changing Frame Sizes... 107 Changing Scrolling and Resizing Options... 108 Setting Margins Height and Width... 109 Summary...110 Chapter 5 Adding Graphics 111 Selecting the Best Image Format...112 Using Photoshop to Save and Edit Images...113 Preparing Images for the Web... 113 Modifying JPEG Images in Photoshop... 114 Modifying GIF Images in Photoshop... 116 Inserting Images on WebPages...117 Aligning Images on WebPages...119 Positioning Images in an HTML Table... 121 Editing an Image in Dreamweaver...121 Cropping an Image... 122 Adjusting Brightness and Contrast... 123 Sharpening an Image... 125 Modifying Images in Dreamweaver... 126 Inserting a Background Color...128 Summary...130 Chapter 6 Introduction to Cascading Style Sheets 131 Understanding Cascading Style Sheets...132 CSS Rules... 132 Cascading Styles... 132 Shorthand CSS Properties... 133 Understanding CSS Style Panel...134 Setting CSS Style Preferences... 135 Creating a New CSS Rule...136 Editing the CSS Rule... 141 Adding Property to CSS Rule... 142 Moving CSS Rules... 145 Working with External CSS Files...146 Creating an External Style Sheet... 147 Linking to An External Style Sheet... 149 vii
Dreamweaver CS3 in Simple Steps viii Editing a CSS File... 150 Using Design-Time Style Sheet... 151 Using Dreamweaver Style Sheet... 152 Formatting CSS Code...153 Working with CSS Layouts...155 Understanding CSS Page Layout... 156 Creating a Webpage with CSS Layout... 158 Working with AP Div Elements...159 Insert an AP Div Element... 159 Setting Preferences for AP Element... 162 Setting Properties for AP Elements... 163 Understanding AP Element Panel Overview... 165 Editing AP Elements... 165 Summary...166 Chapter 7 Working with Templates 167 Templates...168 Creating the Dreamweaver Template...168 Creating Blank Templates... 168 Creating a Template from an Existing webpage... 169 Using the Asset Panel to Create a Template... 171 Creating Editable Regions...171 Inserting an Editable Region... 172 Change an Editable Region... 173 Remove an Editable Region... 174 Creating Repeating Regions...175 Create a Repeating Region in a Template... 175 Inserting a Repeating Table... 177 Set Background Color in Repeating Table... 178 Using Optional Regions...180 Inserting a Non Editable Optional Region... 180 Inserting an Editable Optional Region... 181 Set Values for Optional Region... 183 Setting Tag Attributes...185 Making Tag Attribute Editable... 186 Make an Editable Tag Attribute Un-editable... 188 Nested Templates...189 Creating Nested Templates... 190 Prevent an Editable Region Passing Through a Nested Template... 192 Editing, Updating and Deleting Template Content...196 Rename a Template... 196 Open a Template for Editing... 198 Delete a Template File... 199 Exporting a Template-Based Website...200
Contents Applying and Removing a Template from an Existing webpage...201 Apply a Template to an Existing webpage... 201 Detach a Document from a Template... 203 Modify Template Properties...204 Using Find and Replace Features to Change Tag Attributes...205 Summary...206 Chapter 8 Working with Active Contents and HTML Forms 207 Dreamweaver and Flash...208 Inserting SWF File... 208 Creating and Inserting a Flash Button... 212 Inserting a Flash Text Object... 214 Inserting Flash Video... 215 Managing Extensions in Dreamweaver...218 HTML Form Controls...220 Inserting Radio Buttons and Check Boxes... 220 Inserting Drop down List... 223 Inserting Text Field and Text Area... 226 Inserting Submit Button and Reset Button... 227 Working with Java Script Behaviors...229 Events and Actions... 229 Using Behaviors Panel for Binding Events and Actions... 229 Summary...233 Chapter 9 Finalizing the Site 235 Using Browser Compatibility Feature...236 Testing Site in Specific Web Browser Version... 237 Working with Broken Links...238 Managing Linked Files... 240 Publishing the Website...243 Using Dreamweaver s Publishing Tools... 243 Placing your Website Online... 246 Changing Local and Remote Sites...246 Setting Cloaking Options...250 Cloaking and Uncloaking Site Folders... 252 Site Management...252 Using the Testing Server Option... 253 Using the Check In and Check Out Option... 253 Working with the Design Notes Option... 254 Activating Site Map Layout... 257 Using the File View Columns Option... 260 Summary...261 ix