Issuu on Google+

You have a personal tutor in the Digital Classroom

• Create, publish, and maintain Web sites • Add text, images, and Flash animations to your pages

• Maximize site design with reusable Snippets, Library Items and Templates • Use the Code view to edit pages using XHTML • Create HTML forms with text fields, drop-down menus, and check boxes

®

• Build CSS-based Web sites, using styles to create consistent, standards-based site designs

Adobe®

• Set up Dreamweaver CS4 and use its design and layout tools

Training DVD Included

Dreamweaver CS4

If you want expert instruction that fits into your schedule, the Digital Classroom delivers. Adobe Certified Experts guide you through 14 lessons, helping you learn essential Dreamweaver CS4 skills at your own speed. Full-color, step-by-step instructions in the book are supplemented with video tutorials on the DVD. With Digital Classroom, you have your own private instructor showing you the easiest way to learn Dreamweaver CS4.

Osborn

Adobe®

Dreamweaver CS4 ®

A Complete Training Package! • Full-color, step-by-step instructional book • Video training from Adobe Certified Experts Tutorials and lesson files on companion DVD

Jeremy Osborn is Training Director at Aquent Graphics Institute and also is an Adobe Certified Instructor. He is a member of the Aquent Creative Team, which develops and delivers training programs for creative, marketing, and communications professionals through the Aquent Graphics Institute.

www.digitalclassroombooks.com Internet / Web Page Design $49.99 US/$54.99 CAN

Jeremy Osborn & Aquent Creative Team


Layout column, New Document dialog box, 31, 46 .lbi file, 226 LCK (lock) file, 328 legacy tools frames creating framesets, 357–361 Frames panel, 361–368 overview, 354–356 specifying content, 371–375 splitting, 368–370 self study, 403 starting up, 353–354 tables adding content to, 386–393 versus CSS, 376 formatting, 393–397 importing data, 400–402 inserting, 376–378 modifying, 382–383 nesting inside row, 384–386 other ways to work with, 398–400 selecting, 379–381 using for layout, 375 length title, 342 video, 215 Less Specific button, New CSS Rule dialog box, 115 lesson files, loading, 3 Letter-spacing field, CSS Rule Definition dialog box, 113 li tag, 99–100 <li> tag, 99–100 library item, 225–229 Line Numbers button, Coding toolbar, 248 Line Numbers option, Code View Options,View menu, Code view, 247 line return, 27 Line-height field, CSS Rule Definition dialog box, 112–113 Link Checker panel, 332–334 Link field, Hyperlink dialog box, 79 Link radio button, Attach External Style Sheet dialog box, 281 Link text field, Property Inspector, 77, 88, 373 linking frame to outside web pages, 373 hyperlink to e-mail address, 80 image, 87–88 Links (CSS) category, Page Properties dialog box, 52–53 liquid column, 46 list creating, 80–82 forms, 274–275 list menu form element, 267 List Properties dialog box, 81 List Values dialog box, 275 List/Menu button, Insert panel, 274 List/Menu text field, Property Inspector, 275 Live Code option, 11 Live View feature overview, 11, 75–76 Spry Repeat List, 316, 318 416

dw14_index.indd 416

Spry Tabbed panels, 303 Spry widgets, 298, 301 loading lesson files, 3 local file, viewing in Files panel, 59 Local Files panel, 329 Local Info window, Advanced tab, Site Definition wizard, 42 local root folder, 38–39 Local View option, Site View drop-down menu, Files panel, 63 lock (LCK) file, 328 Lock Guides option, Guides dialog box, 195 lossy compression, 84

M Macintosh OS starting Dreamweaver CS4, 2–3 system requirements for Dreamweaver CS4, 2 magnification level, 202–203 Manage Sites dialog box, 36, 323, 331–332 management, site Check In and Check Out, 327–329 Design Notes, 330–332 generating site reports addressing listed item, 336–337 Browser Compatibility Check, 338 CSS Advisor, 338–339 overview, 335–336 saving reports, 337–338 understanding report results, 336 getting help, 347–350 launching site, 345–347 optimizing page for launch adding meta keywords and descriptions, 342–343 describing images with alternate text, 344–345 overview, 339 Search Engine Optimization, 339 search engine visibility, 339 titling documents with <title> tag, 340–342 optimizing pages for launch, 339–345 overview, 8 self study, 350 starting up, 321–322 testing site integrity, 332–334 using reference guides, 347–350 working with Files panel creating remote connection, 322–324 overview, 322 transferring files to and from remote server, 325–327 viewing files on remote web server, 325 margin CSS Box model, 129 setting in page layout futureproofing layout, 157–158 moving internal styles, 158 overriding default margins in CSS, 155–157 overview, 152–154

Adobe Dreamweaver CS4 Digital Classroom

9/15/2008 9:52:12 AM


Margin fields, Property Inspector, 367 Margin section, Box category, CSS Rule Definition dialog box, 122, 136, 153–154, 156 Margin settings, Page Properties dialog box, 52 Master/Detail page, 13 Max Chars text field, Property Inspector, 269 maximizing site design creating reusable page elements, 220 library items, 225–229 self study, 237 snippets creating new, 222–225 overview, 220 Snippets panel, 221–222 starting up, 219–220 templates creating new, 230 creating new pages from, 232–233 modifying, 234 overview, 229 repeating regions, 234–237 working with editable regions, 231 measurement, ruler units of, 194 Media drop-down menu Attach External Style Sheet dialog box, 281 Common section, Insert panel, 216 Menu bar, Spry, 295–298 menu, form, 274–275. See also individual menus by name Merge Selected Cells button, Property Inspector, 383–384 Merge Selected Cells Using Spans button, Property Inspector, 399 merging table cells, 383 meta keyword and description, 342–343 modular feature, 220 mono sound file, 218 Move CSS Rules dialog box, 120 Move Guide dialog box, 194 Move or Convert CSS button, Coding toolbar, 249 Move to External Style Sheet dialog box, 158 Movie button, Assets tab, Files panel, 210, 213 movie, inserting Flash, 206–209 moving internal style, 158 .mp3 file, 215

N name AP Div, 133 domain, 18 frame, 360 home page, 49 style, 109 Name field, Save As dialog box, 49 Name text field, Radio Group dialog box, 273 navigation, global, 143–146 nested AP Divs, 139 nesting table inside row, 384–386 New CSS Rule button, Insert Div Tag dialog box, 118 New CSS Rule dialog box assigning names, 21, 109

Class option, Selector Type drop-down menu, 182 contextual selector, 114–116 defining Heading 2, 107 div elements, 144 ID selector type, 135 paragraph style, 72 Rule Definition section, 153, 175 selector name, 180 Selector Name field, 152–153 Selector Type field, 123, 175 text style, 70 unordered list style, 82 New CSS Rule icon, CSS Styles panel, 110 New Document dialog box, 31, 45–48, 233 New Editable Region dialog box, 231 new features in Dreamweaver CS4, 10–15 New Snippet Folder icon, Snippets panel, 223, 225 New Workspace Layout dialog box, 190 No resize check box, Property Inspector, 366 node, 312 noframes tag, 375 <noframes> tag, 375 Notes column, Files panel, 332 Notes field, Design Notes dialog box, 330 Notes icon, 332 Number From field,Validate Form dialog box, 289 Number radio button,Validate Form dialog box, 289

O Object Tag Accessibility Attributes dialog box, 208 Open button, Welcome screen, 30 Open Documents button, Coding toolbar, 248 Open in Frame command, File menu, 371 Open Recent Item option, Welcome Screen, 30 Open Recent option, File menu, 32 opening document, 31–32 optimizing page for launch adding meta keywords and descriptions, 342–343 describing images with alternate text, 344–345 overview, 339 Search Engine Optimization, 339 search engine visibility, 339 titling documents with <title> tag, 340–342 Options tab, Image Preview dialog box, 91 Order menu, Sort Table dialog box, 185 Ordered List button, Property Inspector, 81 Orphaned Files report, Show drop-down menu, Link Checker panel, 334 Outdent Code button, Coding toolbar, 249 Outdent Code command, Edit menu, 257 outside web page, linking frame to, 373 Overflow drop-down menu, Property Inspector, 158 overlap, box adding additional content and styles, 150–152 overview, 146–149 reordering <div> elements, 149–150 overriding default margins in CSS, 155–157

Index

dw14_index.indd 417

417

9/15/2008 9:52:12 AM


P <p> tag contextual selectors, 114 in CSS, 72 default margins, 155 tag styles, 107 padding controlling for tables with CSS, 180–181 CSS Box model, 129 setting in page layout futureproofing layout, 157–158 moving internal styles, 158 overriding default margins in CSS, 155–157 overview, 152–154 Padding section, Box category, CSS Rule Definition dialog box, 156 page. See also centering page with relative positioning; dynamic content; image; text adding to site, 44–49 attaching external style sheet to, 121 creating new from template, 232–233 creating simple gallery, 85–87 defining properties, 50–55 fine-tuning appearance of, 113–114 layout borders, 152–158 box overlap, 146–152 CSS Box model, 128–131 margins, 152–158 padding, 152–158 positioning content with AP Divs, 131–134 self study, 159 starting up, 127–128 z-index, 146–152 linking frame to outside, 373 optimizing for launch adding meta keywords and descriptions, 342–343 describing images with alternate text, 344–345 overview, 339 Search Engine Optimization, 339 search engine visibility, 339 titling documents with <title> tag, 340–342 previewing in web browser, 75–76 Page font field, Page Properties dialog box, 50 Page From Template option, New Document dialog box, 233 page object Insert panel, 16 Page Properties dialog box Appearance (CSS) category, 50–52 Appearance (HTML) category, 52 Headings (CSS) category, 53–54 Links (CSS) category, 52–53 setting frame background colors, 367–368 Title/Encoding category, 54–55 Tracing Image category, 55 Page Type column, New Document dialog box, 31, 46 panel. See also individual panels by name 418

dw14_index.indd 418

collapsible, 10 customizing, 188–190 panel group, 188–190 paragraph, 27–28, 112 paragraph tag contextual selectors, 114 in CSS, 72 default margins, 155 tag styles, 107 Parameters dialog box, 217 _parent command, Target drop-down menu, Property Inspector, 374 password, access, 322 permissions, file, 3 photographic image, 84. See also image Photoshop CS4 Dreamweaver integration with, 8, 10 smart objects, 14 Picture Assets folder, 393 pixel ruler unit, 363 pixel-based table, 384 placeholder, image, 88–89 Placement section, Positioning category, CSS Rule Definition dialog box, 145 placing image in HTML, 23–25 Play button, Property Inspector, 208–209 playing video tutorials, 5 plug-in icon, 213 Plugin option, Media drop-down menu, Common section, Insert panel, 216 Plus button, Behaviors panel, 286 Point to File icon, Property Inspector, 88 Popup Message dialog box, 286–287 Position section, Input Tag Accessibility Attributes dialog box, 268 positioning. See absolute positioning; relative positioning Positioning category, CSS Rule Definition dialog box, 136, 145–146 POST option, Method drop-down menu, Property Inspector, 265–266 Preferences dialog box, 254–255 prerequisites, 1–2 Preview in Browser feature accordion panel, 308–309 box, 134 centered container, 137 checking overlap, 147 collapsible panel, 311 customizing options, 75 hyperlink, 79, 117 tables, 166, 172 video files, 212 Preview type option, Snippets dialog box, 223 Preview/Debug in Browser button, Document toolbar box, 134, 154 form preview, 270 frameset file, 371–372 hyperlink, 79 sound files, 216 table color, 396

Adobe Dreamweaver CS4 Digital Classroom

9/15/2008 9:52:12 AM


preview, 383 spacing, 392 video files, 214 previewing button behavior for form validation, 288 page in web browser, 75–76 processing form, 285 Progressive Download Video option,Video type drop-down menu, Insert Flash Video dialog box, 210–211 properties CSS Style, 96–97 form, 264–266 frame, 366–368 frameset, 362 page, 50–55 Properties panel, 359–360 Property Inspector Action field, 265 Align Center button, 20–21, 388 Alt field, 344 AP Divs in, 133 Bg color swatch footer, 149 header, 139 layout color, 141 table color, 171, 394, 396 Bold button, 114–115, 181 Border properties, 362 Border text field, 86, 173, 180 Border Width field, 383 Brightness and Contrast button, 90 Browse for File folder icon, 227 button properties, 279 cell background color, 394 CellPad text field, 172, 180, 392 CellSpace text field, 173, 180, 392 checkbox properties, 271 Class drop-down menu, 176, 182, 184, 318 column width, 385, 387 creating class style with, 108–110 creating CSS rules, 101–102 CSS button, 70, 82, 102, 107–108 CSS improvements, 13 CSS-P Element text field, 139–140 Default Panel drop-down menu, 303 Edit button, 209 Edit Image Settings button, 90 File Field options, 277 Form ID text field, 265 Format drop-down menu, 88, 108 formatting text in, 68–69 frame dimensions, 362–364 name, 360 properties, 366–367 Header check box, 168 Horizontal drop-down menu, 172 HTML button, 77, 88, 115 invalid code, 253 Link text field, 88 linking to outside web pages, 373 list and menu options in, 274–275

Merge Selected Cells button, 383–384 Merge Selected Cells Using Spans button, 399 Ordered List button, 81 Overflow drop-down menu, 158 Play button, 208–209 Point to File icon, 88 Refresh button, 74 Scr Point to File icon, 89 setting column width, 167 setting image properties, 25 Size drop-down menu, 74, 107 sizing tables, 166 Split Cells into Rows or Columns button, 398, 400 Spry Collapsible Panel options, 310 Stop button, 209 table width, 382 tag properties, 199–200 Targeted Rule drop-down menu, 109–110, 114, 200, 284 text area options, 276 text field properties, 269 Unordered List button, 81 Vertical alignment drop-down menu, 388–389 widget options, 297 z-index field, 147–148 PSD file, 14 pseudo-class selector, 113–114 Put button, Files panel, 325–327, 346 Put File(s) button, Files panel toolbar, 62

Q quality slider, Options tab, Image Preview dialog box, 91 Question Mark icon, 336 Quick Tag Editor, 242–244 QuickTime video, 212–215

R radio button, 267, 272 Radio button option, Forms category, Insert panel, 267 Radio buttons section, Radio Group dialog box, 273 radio group, 273–274 Radio Group dialog box, 273 Recent Snippets button, Coding toolbar, 249 red outline, 164–165 Red X icon, 336 reference guides, 347–350 Reference panel, 348 Refresh button Assets panel, 232 Files panel, 61, 327 Property Inspector, 74 Related Files bar, 12 relative hyperlink, 78–80 relative positioning versus absolute positioning, 141–143 adding columns and headers to layout, 138–141 adding global navigation, 143–146 making layouts cross-browser compatible, 137–138 Index

dw14_index.indd 419

419

9/15/2008 9:52:12 AM


overview, 135–137 Reload button, Page Properties dialog box, 55 remote connection, creating, 322–324 remote folder, 39–40 Remote Info category, Site Definition window, 43 Remote View option, Site View drop-down menu, Files panel, 63 remote web server connecting to, 61 transferring files to and from, 325–327 viewing files on, 325 Remove Comment button, Coding toolbar, 249 reordering <div> tags, 149–150 Repeat List, Spry, 314–316 Repeat setting, Page Properties dialog box, 52 repeating region, 234–237 Repeating Region dialog box, 235 replacing frameset, 374 report, site addressing listed item, 336–337 Browser Compatibility Check, 338 CSS Advisor, 338–339 overview, 335–336 saving, 337–338 understanding results, 336 Reports dialog box, 335 Repository Files button, expanded File panel, 64 Repository View option, Site View drop-down menu, Files panel, 63 Required check box,Validate Form dialog box, 289 Reset button, form, 278–279 resetting workspace, 3 resizing document window, 192–193 image, 90–92 resolution, image, 84 resources Dreamweaver CS4, 6 web site design, 350 Results panel, 254, 335–339 results, site report, 336 reusable page element, 220 reusing CSS table styling, 183–184 RGB spectrum, 25 Rich Internet Application (RIA), 14, 294–295 Rollover links field, Page Properties dialog box, 53 row alternate styling, 181–183 background color, 181–183 deleting table, 400 nesting table inside, 384–386 selection, 379 Row element, 313 RowCol Selection area, Property Inspector, 363 rule, CSS creating, 100–103 overview, 71 weight, 124 Rule Definition section, New CSS Rule dialog box, 153, 175 ruler frame dimensions, 362–363 inserting table, 377 420

dw14_index.indd 420

overview, 17 units of measurement, 194

S Same for all checkbox, Box category, CSS Rule Definition dialog box, 122 Save As dialog box, 48–49 Save As Template dialog box, 230 Save As Type field, Save As dialog box, 49 Save Report button, Results panel, 254, 338 Save Style Sheet dialog box, 121 saving document, 31–32 page to site, 48–49 site reports, 337–338 Scale section, File tab, Image Preview dialog box, 91 schema, 312 Scr Point to File icon, Property Inspector, 89 scripting language, 9 Scroll drop-down menu, Property Inspector, 366 Search Engine Optimization (SEO), 339, 342 search engine visibility, 339 Select Data Type drop-down menu, Spry Data Set dialog box, 312 Select File dialog box, 216, 333 Select Image Source dialog box adding columns and headers to layout, 140 adding global navigation, 144 advanced CSS styling of tables, 178 creating gallery page, 85, 87 defining page properties, 52, 55 placing image in HTML, 24 using grids, 198 using guides, 196 Select Parent Tag button, Coding toolbar, 248 Select Style Sheet dialog box, 121 Select Table command, Table submenu, Modify menu, 381 Select XML Source dialog box, 313 selecting file in Files panel, 60 table elements, 164–165 tables, 379–381 Selection tool, 203 selector, 72 Selector Name field, New CSS Rule dialog box, 107, 114, 116, 178 Selector Type drop-down menu New CSS Rule dialog box, 70, 123, 175 Property Inspector, 72, 82 _self command, Target drop-down menu, Property Inspector, 374 self study Adobe Dreamweaver CS4, 33 creating page layouts with CSS, 159 CSS, 124 dynamic content, 218 editing code, 257 fine-tuning workflow, 204 forms, 291 legacy tools, 403 maximizing site design, 237

Adobe Dreamweaver CS4 Digital Classroom

9/15/2008 9:52:12 AM


site, 65 site management, 350 Spry framework, 319 tables, 186 text and images, 93 seminars, 6 SEO (Search Engine Optimization), 339, 342 server access, 322 transferring files to and from, 325–327 viewing files on remote, 325 and web host, 19 server-side language, 9 service mark snippet, 221 Set magnification drop-down menu, document window, 202–203 sharing Design Notes, 331 Show All Events button, Behaviors panel, 287 Show Code Navigator button, Coding toolbar, 248 Show command, Rulers submenu,View menu, 377 Show menu, Link Checker panel, 333–334 Show Set Events button, Behaviors panel, 287 sidebar, 140 site. See also site reports feature access, 229 adding pages, 44–49 advanced site-creation options, 42–44 defining page properties, 50–55 Files panel changing view, 63–64 options, 61–62 overview, 58–59 selecting and editing files, 60 viewing local files, 59 management Check In and Check Out, 327–329 Design Notes, 330–332 getting help, 347–350 launching site, 345–347 optimizing pages for launch, 339–345 overview, 8 self study, 350 starting up, 321–322 testing site integrity, 332–334 using reference guides, 347–350 working with Files panel, 322–327 maximizing design creating reusable page elements, 220 library items, 225–229 repeating regions, 234–237 self study, 237 snippets, 220–225 starting up, 219–220 templates, 229–234 overview, 17–19, 36–41 saving page to, 48–49 self study, 65 starting up, 35–36 testing integrity, 332–334 uploading, 346–347 work views, 56–58 Site Definition wizard Advanced tab

Check In/Check Out, 328 site-creation options, 42–44 Basic tab Check In/Check Out, 328 choosing server technology in, 38 creating remote connection, 323 editing options in, 38–39 naming site in, 36–37 remote folder definition, 39–40 Summary screen, 41 creating remote connection, 323–324 specifying remote server, 61 Site Files button, expanded File panel, 64 site reports feature addressing listed item, 336–337 Browser Compatibility Check, 338 CSS Advisor, 338–339 overview, 335–336 saving reports, 337–338 understanding results, 336 Site Reports tab, Results panel, 336–338 Site Root button, Save As dialog box, 296 Site View, Files panel, 63 sitewide links check, 333–334 size modifying table, 166–167 video, 212 Size drop-down menu, Property Inspector, 72, 74, 82, 107 Size field, Page Properties dialog box, 50 Skin drop-down menu, Insert Flash Video dialog box, 211 smart collapse, 250 smart objects, Photoshop, 14 Snap to Guides option, Guides dialog box, 195 snapping, 196 snippet creating new, 222–225 overview, 220 Snippets panel, 221–222 Snippets dialog box, 222–223, 225 Snippets panel, 221–222 Sorenson codec, 214 Sort By menu, Sort Table dialog box, 185 Sort Table dialog box, 185 sound inserting, 215–218 overview, 206 Source Code button, Split view, 106 Spacing text field, Grid Settings dialog box, 197 specifying frame content, 371–375 Split Cells into Rows or Columns button, Property Inspector, 398, 400 Split Frame Down command, Frameset submenu, Modify menu, 368 Split view <li> tag, 99–100 adding column and header to layout, 138 case structure in, 26 CSS and HTML code in, 72–74 image attributes in, 86 inline style sheets, 103–104 internal style sheets, 105 Index

dw14_index.indd 421

421

9/15/2008 9:52:12 AM


overview, 15, 58 placing images in, 23 reordering <div> elements, 149–150 table code, 174 splitter bar, 241 splitting frame, 368–370 Spry Accordion panel, 306–309 Spry Collapsible panel, 309–311 Spry Data Set dialog box, 312–313 Spry Data Set drop-down menu, Insert Spry Repeat List dialog box, 315 Spry framework Accordion panel, 306–309 Collapsible panel, 309–311 data widgets styling and fine-tuning, 316–318 working with, 311–316 Menu bar, 295–298 project overview, 295 self study, 319 Site Definition window, 44 Spry Widgets customizing with CSS, 299–301 overview, 294–295 starting up, 293–294 Tabbed panel, 301–305 Spry Menu bar, 295–298 Spry option, Advanced tab, Site Definition wizard, 44 Spry Regions, 315 Spry Repeat List, 314–318 Spry Tabbed panel, 301–305 Spry Widgets customizing with CSS, 299–301 data widgets, 311–318 overview, 294–295 SpryMenuBarHorizontal.css style sheet, 299–300 Src text field, Property Inspector, 92 stacking order, 146–148 Standard Mode button, Layout category, Insert panel, 395 starter page, 30 starting up additional resources, 6 loading lesson files, 3 overview, 1 prerequisites, 1–2 resetting Dreamweaver workspace, 3 starting Adobe Dreamweaver CS4, 2–3 working with video tutorials, 4–5 stereo file, 215, 218 Stop button, Property Inspector, 209 Streaming Video option,Video type drop-down menu, Insert Flash Video dialog box, 211 streamlining workflow customizing panels and panel groups, 188–190 resizing document window, 192–193 self study, 204 starting up, 187–188 switching between tabs and cascading documents, 200–201 tag selector, 199–200 using Favorites tab on Insert panel, 191–192 422

dw14_index.indd 422

using grids, 196–198 using guides, 193–196 zooming, 202–203 strong tag, 114 <strong> tag, 114 structural tag, 28 structure HTML document, 22 HTML tag, 20–22 modifying table, 168–169 style adding additional to page layout, 150–152 advanced CSS table styling, 177–179 advanced text formatting with CSS, 112–113 alternate row, 181–183 creating and modifying in CSS Styles panel, 110–111 creating class style with Property Inspector, 108–110 fine-tuning page appearance, 113–114 form elements, 283–284 hyperlink, 115–117 overview, 106–108 reusing CSS table, 183–184 of tables with CSS, 175–177 in HTML, 171–174 text, 71–74 Style drop-down menu List Properties dialog box, 81 Property Inspector, 397 Style section, Input Tag Accessibility Attributes dialog box, 268 style sheet. See also Cascading Style Sheets external attaching to form, 280–281 attaching to page, 121 creating new .css file, 123–124 CSS IDs, 119–121 Div tags, 119–121 versus internal style sheet, 104–106 inline, 103–104 internal CSS IDs, 119–121 Div tags, 119–121 versus external style sheet, 104–106 moving, 158 overview, 73 modifying attached, 121–123 strength of, 106 style tag internal style sheets, 104 overview, 73 <style> tag internal style sheets, 104 overview, 73 Submit button, form, 278–279 Subversion, 15 summary pane, Current section, CSS Styles panel, 101 Summary screen, Basic tab, Site Definition wizard, 41 <sup> element, 222

Adobe Dreamweaver CS4 Digital Classroom

9/15/2008 9:52:12 AM


superscript tag, 222 Swatches panel cell background color, 394 choosing colors in, 25 hyperlink color, 117 setting default text color, 50–51 sidebar background color, 141 text color, 71, 108 .swf file, 207–209 Synchronize button, Files panel toolbar, 62 Syntax Coloring option, Code View Options,View menu, Code view, 247 Syntax Error Alerts in Info Bar button, Coding toolbar, 249 Syntax Error Alerts option, Code View Options, View menu, Code view, 247 system requirements for Adobe Dreamweaver CS4, 2

T tab, 200–201. See also individual tabs by name Tabbed panel, Spry, 301–305 table adding content to, 386–393 advanced CSS styling, 177–179 alternate row styling, 181–183 borders, 180–181 caption, 170 cell alignment, 180–181 creating, 169–170 versus CSS, 376 data sorting, 184–185 formatting overview, 393–397 and styling in HTML, 171–174 and styling with CSS, 175–177 importing data, 162–164, 400–402 inserting, 376–378 modifying, 382–383 nesting inside row, 384–386 other ways to work with, 398–400 padding, 180–181 reusing CSS for other tables, 183–184 selecting, 379–381 selecting table elements, 164–165 self study, 186 size, 166–167 starting up, 161–162 structure, 168–169 using for layout, 375 using in web design, 162 Table button, Common tab, Insert panel, 398 Table dialog box adding content to tables, 388–389 creating tables, 169 inserting tables, 378 nesting tables in rows, 384–385 table settings, 398 Table size section, Table dialog box, 169 table tag selecting table, 381 selecting table elements, 165 Table width section, Import Tabular Data dialog box,

163 <table> tag selecting table, 381 selecting table elements, 165 tabular data, 401 tag. See also AP Div <a>, 115 <body> contextual selectors, 114–115 defining page body with, 22 Quick Tag Editor, 243–244 tag selector, 200 tag styles, 107 <br>, 29 <div> adding columns and headers to layout, 138 attaching external style sheet to page, 121 creating new .css file, 123–124 CSS Box model, 128–129 internal versus external style sheets, 119–121 modifying attached style sheets, 121–123 overview, 117–119 positioning content with AP, 131–134 reordering, 149–150 tag selector, 199 <font> overview, 97–98 Quick Tag Editor, 242–243 <form> inserting, 261–264 setting background color, 281 <head> overview, 22 style tags, 73 <html>, 22, 28 <img> creating gallery page, 86 tag selector, 199 <li>, 99–100 <noframes>, 375 <p> contextual selectors, 114 in CSS, 72 default margins, 155 tag styles, 107 <strong>, 114 <style> internal style sheets, 104 overview, 73 <table> selecting table, 381 selecting table elements, 165 <td>, 165 <title>, 340–342 <tr>, 165 closed, 20, 29 collapsing, 250–251 expanding, 250–251 in HTML editing with Quick Tag Editor, 243–244 hierarchy, 28–29 structure and attributes, 20–22 Index

dw14_index.indd 423

423

9/15/2008 9:52:12 AM


inserting with Tag Chooser, 244 structural, 28 style, 107 tag-based style rule, 98 Tag Chooser, 244 Tag option, Selector Type drop-down menu, Property Inspector, 72 tag selector accessing code with, 242–243 fine-tuning workflow, 199–200 Target drop-down menu Hyperlink dialog box, 79 Property Inspector, 373–374 target value, 266 Targeted Rule drop-down menu, Property Inspector, 109–110, 114, 200, 284 targeting frame, 371–372 <td> tag, 165 template creating new, 230 creating new pages from, 232–233 modifying, 234 overview, 229 repeating regions, 234–237 working with editable regions, 231 Templates option, Advanced tab, Site Definition wizard, 43 Test Connection button, Basic tab, Site Definition dialog box, 324 Testing Server option, Site View drop-down menu, Files panel, 63 Testing Servers option, Advanced tab, Site Definition wizard, 43 testing site integrity, 332–334 text adding additional to page layout, 150–152 adding to page, 68–71 creating lists, 80–82 describing image with alternate, 344–345 formatting with CSS, 112–113 hyperlinks, 76–80 previewing pages in web browser, 75–76 self study, 93 starting up, 67–68 styles, 71–74 using Text Insert panel, 82–83 on web, 68 text area, form, 275–276 Text Assets folder, 389 Text Color button, CSS section, Property Inspector, 71 Text color option, Page Properties dialog box, 50 text editor, 9 Text Field button, Insert panel, 268 Text field, Hyperlink dialog box, 78 text field in form, 267–270 Text field option, Forms category, Insert panel, 267 Text Insert panel, 82–83 Text-align drop-down menu, Block category, CSS Rule Definitions dialog box, 137–138 Textarea element, Insert panel, 275–276 TextField box, Property Inspector, 269, 276 Text-transform section, CSS Styles panel, 113 424

dw14_index.indd 424

thumbnail image, 87–88 tiling feature, 201 Title text field Document window, 341 Page Properties dialog box, 54 <title> tag, 340–342 Title/Encoding category, Page Properties dialog box, 54 titling document with <title> tag, 340–342 toolbar. See also Preview/Debug in Browser button, Document toolbar Coding, 248–249 Document Code view button, 57 Design View button, 56 Live View button, 298, 301 Preview/Debug in Browser button, 79 Split View button, 58 View Options button, 241 _top option, Target drop-down, Property Inspector, 374 <tr> tag, 165 Tracing Image category, Page Properties dialog box, 55 transferring files to and from remote server, 325–327 Transparency slider, Page Properties dialog box, 55 trigger, form, 287 Type category, CSS Rule Definition dialog box, 116–117, 179, 283 Type options, Property Inspector, 269, 275 typography. See text

U Underline Style drop-down menu, Page Properties dialog box, 53 Unicode Normalization Form Page Properties dialog box, 54 Save As dialog box, 49 Unicode Signature (BOM) check box, Page Properties dialog box, 54 units of measurement, ruler, 194 unlocking file, 3 Unordered List button, Property Inspector, 81 Update Files dialog box, 229, 234 Update Library Items dialog box, 228 Update Pages dialog box, 228 updating graphics, 14 image, 92 library items, 227–229 uploading site, 346–347 uppercase text, 113 Use Passive FTP check box, Advanced tab, Remote Info category, 324 user interface, 10 user login, 322 users, Dreamweaver, 9

V Validate Form behavior, 285, 288–289 Validate Markup option, File menu, 254

Adobe Dreamweaver CS4 Digital Classroom

9/15/2008 9:52:12 AM


validating code, 252–254 form, 285–288 form fields, 288–291 Validation tab, Results panel, 254 Validator section, Preferences dialog box, 254 Value field, Property Inspector, 279 verifying form field contents, 290–291 Version Control option, Advanced tab, Site Definition wizard, 43 Vertical alignment drop-down menu, Property Inspector, 388–389 video Flash, 209–212 important considerations regarding, 212–214 overview, 206, 209 QuickTime and Windows Media, 212–214 video tutorials, 4–5 Video type drop-down menu, Insert Flash Video dialog box, 210–211 View Options button Code view toolbar, 252 Document toolbar, 241 viewing files on remote web server, 325 local files in Files panel, 59 video tutorials with Adobe Flash Player, 4–5 views changing in Files panel, 63–64 overview, 15 working in, 56–58 visibility, search engine, 339 Visited links field, Page Properties dialog box, 53 visual aids, 17

W W3C Web Consortium Accessibility Guide, 342 Warning Sign icon, 336 .wav file, 215 WCAG (Web Consortium Accessibility Guidelines), 335, 342 web address, 18, 322 web banner, 206 web browser. See also Preview in Browser feature centering page, 137 cross-browser compatible page layout, 137–138 overview, 18–19 previewing page in, 75–76 Web Consortium Accessibility Guidelines (WCAG), 335, 342 web design, 162 web form adding validation, 285–288 building contact, 261–266 check boxes, 270–272 common elements, 267 File Upload field, 277–278 lists, 274–275 menus, 274–275 overview, 260–261 processing, 285 radio buttons, 272

radio groups, 273–274 Reset button, 278–279 self study, 291 starting up, 259–260 styling with CSS, 280–284 Submit button, 278–279 text area, 275–276 text fields, 268–270 validating form fields, 288–291 web host, 19 web page. See also centering page with relative positioning; dynamic content; image; text adding to site, 44–49 attaching external style sheet to, 121 creating new from template, 232–233 creating simple gallery, 85–87 defining properties, 50–55 fine-tuning appearance of, 113–114 layout borders, 152–158 box overlap, 146–152 CSS Box model, 128–131 margins, 152–158 padding, 152–158 positioning content with AP Divs, 131–134 self study, 159 starting up, 127–128 z-index, 146–152 linking frame to outside, 373 optimizing for launch adding meta keywords and descriptions, 342–343 describing images with alternate text, 344–345 overview, 339 Search Engine Optimization, 339 search engine visibility, 339 titling documents with <title> tag, 340–342 previewing in web browser, 75–76 web server access, 322 transferring files to and from, 325–327 viewing files on remote, 325 and web host, 19 web site. See also site reports feature access, 229 adding pages, 44–49 advanced site-creation options, 42–44 defining page properties, 50–55 Files panel changing view, 63–64 options, 61–62 overview, 58–59 selecting and editing files, 60 viewing local files, 59 management Check In and Check Out, 327–329 Design Notes, 330–332 getting help, 347–350 launching site, 345–347 optimizing pages for launch, 339–345 Index

dw14_index.indd 425

425

9/15/2008 9:52:12 AM


overview, 8 self study, 350 starting up, 321–322 testing site integrity, 332–334 using reference guides, 347–350 working with Files panel, 322–327 maximizing design creating reusable page elements, 220 library items, 225–229 repeating regions, 234–237 self study, 237 snippets, 220–225 starting up, 219–220 templates, 229–234 overview, 17–19, 36–41 saving page to, 48–49 self study, 65 starting up, 35–36 testing integrity, 332–334 uploading, 346–347 work views, 56–58 web video compression, 214 WebKit rendering engine, 11 weight, CSS rule, 124 Welcome Screen, 30 whitespace rules, HTML, 26–28 widget, Spry data styling and fine-tuning, 316–318 working with, 311–316 Widgets, Spry customizing with CSS, 299–301 data widgets, 311–318 overview, 294–295 width table, 166–167, 382 table column, 385–386 Width section, Border category, CSS Rule Definition dialog box, 179 window, resizing document, 192–193 Windows Media format, 212–215 Windows OS starting Dreamweaver CS4, 2 system requirements for Dreamweaver CS4, 2 Word Wrap option, Code View Options,View menu, Code view, 247 workflow, fine-tuning customizing panels and panel groups, 188–190 resizing document window, 192–193 self study, 204 starting up, 187–188 switching between tabs and cascading documents, 200–201 tag selector, 199–200 using Favorites tab on Insert panel, 191–192 using grids, 196–198 using guides, 193–196 zooming, 202–203 Workflow reports, 335 workspace customizable layout, 16 resetting, 3 workspace configurator, 10 Wrap Tag button, Coding toolbar, 249 426

dw14_index.indd 426

X XHTML 1.0 Transitional, 29 XML (eXtensible Markup Language) overview, 29 working with Spry data widgets, 312–314

Z z-index adding additional content and styles, 150–152 overview, 146–149 reordering <div> elements, 149–150 Zoom tool, 202–203

Adobe Dreamweaver CS4 Digital Classroom

9/15/2008 9:52:12 AM


Wiley Publishing, Inc. End-User License Agreement READ THIS. You should carefully read these terms and conditions before opening the software packet(s) included with this book “Book”. This is a license agreement “Agreement” between you and Wiley Publishing, Inc. “WPI”. By opening the accompanying software packet(s), you acknowledge that you have read and accept the following terms and conditions. If you do not agree and do not want to be bound by such terms and conditions, promptly return the Book and the unopened software packet(s) to the place you obtained them for a full refund. 1. License Grant. WPI grants to you (either an individual or entity) a nonexclusive license to use one copy of the enclosed software program(s) (collectively, the “Software”) solely for your own personal or business purposes on a single computer (whether a standard computer or a workstation component of a multi-user network). The Software is in use on a computer when it is loaded into temporary memory (RAM) or installed into permanent memory (hard disk, CD-ROM, or other storage device). WPI reserves all rights not expressly granted herein. 2. Ownership. WPI is the owner of all right, title, and interest, including copyright, in and to the compilation of the Software recorded on the physical packet included with this Book “Software Media”. Copyright to the individual programs recorded on the Software Media is owned by the author or other authorized copyright owner of each program. Ownership of the Software and all proprietary rights relating thereto remain with WPI and its licensers. 3. Restrictions on Use and Transfer. (a)

You may only (i) make one copy of the Software for backup or archival purposes, or (ii) transfer the Software to a single hard disk, provided that you keep the original for backup or archival purposes. You may not (i) rent or lease the Software, (ii) copy or reproduce the Software through a LAN or other network system or through any computer subscriber system or bulletin-board system, or (iii) modify, adapt, or create derivative works based on the Software.

(b)

You may not reverse engineer, decompile, or disassemble the Software. You may transfer the Software and user documentation on a permanent basis, provided that the transferee agrees to accept the terms and conditions of this Agreement and you retain no copies. If the Software is an update or has been updated, any transfer must include the most recent update and all prior versions.

4. Restrictions on Use of Individual Programs. You must follow the individual requirements and restrictions detailed for each individual program in the “About the CD” appendix of this Book or on the Software Media. These limitations are also contained in the individual license agreements recorded on the Software Media. These limitations may include a requirement that after using the program for a specified period of time, the user must pay a registration fee or discontinue use. By opening the Software packet(s), you agree to abide by the licenses and restrictions for these individual programs that are detailed in the “About the CD” appendix and/or on the Software Media. None of the material on this Software Media or listed in this Book may ever be redistributed, in original or modified form, for commercial purposes. 5. Limited Warranty. (a)

dw14_index.indd 435

WPI warrants that the Software and Software Media are free from defects in materials and workmanship under normal use for a period of sixty (60) days from the date of purchase of this Book. If WPI receives notification within the warranty period of defects in materials or workmanship, WPI will replace the defective Software Media.

9/12/2008 10:17:01 AM


(b)

WPI AND THE AUTHOR(S) OF THE BOOK DISCLAIM ALL OTHER WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, WITH RESPECT TO THE SOFTWARE, THE PROGRAMS, THE SOURCE CODE CONTAINED THEREIN, AND/OR THE TECHNIQUES DESCRIBED IN THIS BOOK. WPI DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE SOFTWARE WILL MEET YOUR REQUIREMENTS OR THAT THE OPERATION OF THE SOFTWARE WILL BE ERROR FREE.

(c)

This limited warranty gives you specific legal rights, and you may have other rights that vary from jurisdiction to jurisdiction.

6. Remedies. (a)

WPI’s entire liability and your exclusive remedy for defects in materials and workmanship shall be limited to replacement of the Software Media, which may be returned to WPI with a copy of your receipt at the following address: Software Media Fulfillment Department, Attn.: Adobe Dreamweaver CS4 Digital Classroom, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, or call 1-800-762-2974. Please allow four to six weeks for delivery. This Limited Warranty is void if failure of the Software Media has resulted from accident, abuse, or misapplication. Any replacement Software Media will be warranted for the remainder of the original warranty period or thirty (30) days, whichever is longer.

(b)

In no event shall WPI or the author be liable for any damages whatsoever (including without limitation damages for loss of business profits, business interruption, loss of business information, or any other pecuniary loss) arising from the use of or inability to use the Book or the Software, even if WPI has been advised of the possibility of such damages.

(c)

Because some jurisdictions do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation or exclusion may not apply to you.

7. U.S. Government Restricted Rights. Use, duplication, or disclosure of the Software for or on behalf of the United States of America, its agencies and/or instrumentalities “U.S. Government” is subject to restrictions as stated in paragraph (c)(1)(ii) of the Rights in Technical Data and Computer Software clause of DFARS 252.227-7013, or subparagraphs (c) (1) and (2) of the Commercial Computer Software - Restricted Rights clause at FAR 52.227-19, and in similar clauses in the NASA FAR supplement, as applicable. 8. General. This Agreement constitutes the entire understanding of the parties and revokes and supersedes all prior agreements, oral or written, between them and may not be modified or amended except in a writing signed by both parties hereto that specifically refers to this Agreement. This Agreement shall take precedence over any other documents that may be in conflict herewith. If any one or more provisions contained in this Agreement are held by any court or tribunal to be invalid, illegal, or otherwise unenforceable, each and every other provision shall remain in full force and effect.

dw14_index.indd 436

9/12/2008 10:17:01 AM


Unleash your creative potential with these Creative Suite 4 books from the Aquent Creative Team.

Adobe Flash CS4 Digital Classroom 978-0-470-41093-6

Adobe Illustrator CS4 Digital Classroom 978-0-470-43635-6

Adobe InDesign CS4 Digital Classroom 978-0-470-41094-3

AdobeÂŽ

Photoshop CS4 ÂŽ

A Complete Training Package! r'VMMDPMPS TUFQCZTUFQ JOTUSVDUJPOBMCPPL r7JEFPUSBJOJOHGSPN"EPCF $FSUJĂąFE&YQFSUT 5VUPSJBMTBOEMFTTPOĂąMFT PODPNQBOJPO%7%

+FOOJGFS4NJUIUIF"(*$SFBUJWF5FBN

Adobe Photoshop CS4 Digital Classroom 978-0-470-41090-5

Each book contains complete step-by step instructions, lesson files, and video tutorials on the included DVD-ROM. Created by the Adobe Certified Instructors at Aquent Graphics Institute.

A Complete Training Package dw14_index.indd 437

9/12/2008 10:17:03 AM


You have a personal tutor in the Digital Classroom.

978 0 470 41093 6 978-0-470-41093-6

978 0 470 41091 2 978-0-470-41091-2

978 0 470 41092 9 978-0-470-41092-9

978 0 70 090 5 978-0-470-41090-5

978 0 70 09 3 978-0-470-41094-3

978 0 70 3635 6 978-0-470-43635-6

A Complete Training Package Each Digital Classroom book features full-color instruction plus video tutorials and lesson files on DVD, all by Adobe Certified Experts. Learn from the bestâ&#x20AC;&#x201D;at your own pace.

For more information about the Digital Classroom series, go to www.digitalclassroombooks.com. Available wherever books are sold. Wiley, the Wiley logo, and Digital Classroom are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its afďŹ liates.

dw14_index.indd 438

9/12/2008 10:17:08 AM


You have a personal tutor in the Digital Classroom

• Create, publish, and maintain Web sites • Add text, images, and Flash animations to your pages

• Maximize site design with reusable Snippets, Library Items and Templates • Use the Code view to edit pages using XHTML • Create HTML forms with text fields, drop-down menus, and check boxes

®

• Build CSS-based Web sites, using styles to create consistent, standards-based site designs

Adobe®

• Set up Dreamweaver CS4 and use its design and layout tools

Training DVD Included

Dreamweaver CS4

If you want expert instruction that fits into your schedule, the Digital Classroom delivers. Adobe Certified Experts guide you through 14 lessons, helping you learn essential Dreamweaver CS4 skills at your own speed. Full-color, step-by-step instructions in the book are supplemented with video tutorials on the DVD. With Digital Classroom, you have your own private instructor showing you the easiest way to learn Dreamweaver CS4.

Osborn

Adobe®

Dreamweaver CS4 ®

A Complete Training Package! • Full-color, step-by-step instructional book • Video training from Adobe Certified Experts Tutorials and lesson files on companion DVD

Jeremy Osborn is Training Director at Aquent Graphics Institute and also is an Adobe Certified Instructor. He is a member of the Aquent Creative Team, which develops and delivers training programs for creative, marketing, and communications professionals through the Aquent Graphics Institute.

www.digitalclassroombooks.com Internet / Web Page Design $49.99 US/$54.99 CAN

Jeremy Osborn & Aquent Creative Team


test