Index
A
absolute hyperlinks, 345, 355–358
Accordion widgets. See Bootstrap Accordion widgets
Add Behavior icon, 374, 379, 382, 383
Add Class/ID icon, 158, 187, 320, 364
Add Selector icon, 159, 225, 248, 276
Adobe Authorized Training Centers, 15
Adobe Creative Cloud, 4
Adobe Dreamweaver. See Dreamweaver
Adobe Flash, 402
Adobe forums, 15
Adobe Generator. See Generator
Adobe Muse, 59
Adobe Photoshop. See Photoshop
All mode, CSS Designer, 48, 94, 149
animation. See web animation
<article> element, 62, 78, 215, 263, 389
<aside> element, 62, 182, 184, 211, 212
Assets panel, 250, 261, 318–319, 335
<audio> tag, 62
B
background color, 163, 176, 396
background images
gradients as, 164, 177, 179, 397
Beginner workspace, 33
responsive design and, 385–387
review questions/answers on, 399
Swap Image Restore behavior, 381–382
Berners-Lee, Tim, 58
bit depth, 314
<blockquote> element, 60, 183, 185, 273
adding HTML5 elements to, 139–141
code inconsistency cleanup, 174
column width manipulation, 217–221
component width management, 189–191
creating layouts using, 133–139
hiding unwanted content using, 210–214
mobile device design and, 208–221
read-only style sheet, 189
Bootstrap Accordion widgets, 387–398
inserting into layouts, 388–392
borders
table row, 287
Brightness and Contrast tool, 340
Browse icon, 11, 349, 411, 412
browsers. See web browsers
C
<canvas> tag, 62
character entities, 61
Check Spelling dialog, 302–303
formatting content in, 247–250
class attributes, 87–88, 97–98
creating custom, 158–160, 187–188
pseudo-classes and, 175
Classroom in a Book series, 1
clipboard, 262
code font used in book, 2
Code Hinting window, 275
Code view, 24
creating long selectors in, 299
Find and Replace feature in, 306
Refresh button for, 389
Code workspace, 34
Coding toolbar, 37
color
text, 155
color picker, 155
comma-separated values (CSV) file, 291
Compare option, 438
compression, image file, 316
Connect to Remote Server icon, 433
Copy Dependent Files dialog, 127
copying/pasting
images from Photoshop, 331–334
CSS (cascading style sheets), 66–101
class and id attributes, 87–88, 97–98
copying/pasting properties, 226–230
creating in CSS Designer, 151–153
multiple element formatting, 96
positioning images using, 320–321
review questions/answers on, 101
rules and rule syntax, 77, 78, 224–226
support resources, 100
support resources, 100
All and Current modes, 48, 94, 149
copying/pasting properties, 226
@Media window, 45
Properties window, 46–48, 95, 285
Sources window, 45
Current mode, CSS Designer, 48, 94, 149, 399
D
declarations, 77
Default workspace, 34
dependent files, 433
clipboard use and, 262
table cell navigation in, 282
designing web pages. See web design
destination links
adding to the same page, 370
Element HUD for creating, 367–368
id attribute for creating, 365–367
Disable icon, 228
dithering process, 314
<div> element, 60, 85, 123, 139, 143, 408
Document toolbar, 37
dpi (dots per inch), 313
dragging-and-dropping images, 335–336
Help reference, 14
installing, 4
product home page, 15
Support Center, 14
drop zone, 32
.dwt file extension, 237
dynamic templates, 237
E
Edge Animate program, 404, 405
Edit HTML Attributes icon, 319, 336, 360
Edit Image Settings tool, 340
Edit image tool, 340
editable regions
formatting content in, 247–250
inserting into templates, 237–239
Element HUD, 50, 357, 360–361, 367
element references, 3
warning about, 362
embedded formatting, 77
exporting Photoshop assets, 114–116
external hyperlinks, 344, 355–358
F
<figcaption> tag, 62
<figure> tag, 62
file formats
for vector graphics, 312
for video files, 412
Find and Replace feature, 304–307
Flash, Adobe, 402
FLV file format, 412, 414, 417
size specifications for, 200–202
typefaces vs., 193
web-hosted, 198
<footer> tag, 62
<form> tag, 60
forums, Adobe, 15
FTP (File Transfer Protocol), 420
FTP over SSL/TLS connection method, 420
FTP sites
connection options, 423
troubleshooting connections to, 424
G
creating multiple assets using, 116–118
exporting assets from Photoshop using, 114–116
steps for working with, 113–114
Getting Started tab, 21
GIF file format, 316
gradient backgrounds, 163–165, 177, 179, 397
graphic tools, 340
graphics
vector, 312
See also images
grouping panels, 32
H
<h1> to <h6> tags, 60
background images for, 160–163
color background for, 163
CSS Designer options for, 148–157
responsive design for, 298
heads-up displays (HUDs), 50–51
<hgroup> tag, 62
high color, 315
home page
<hr> tag, 60
HTML (HyperText Markup Language), 56–65
character entities, 61
code structure, 59
review questions/answers on, 65
table formatting and, 280
quote attribution in, 268
HTML Property inspector, 41–42
<html> tag, 60
HUDs (heads-up displays), 50–51
Hyperlink icon, 357
editing/removing, 349
placeholder for, 349, 383, 384
pseudo-classes for, 175
review questions/answers on, 371
updating in child pages, 353–355
I
creation process for, 98
targeted links and, 363, 365–369
<iframe> tag, 60
Ignore option, 438
Image Optimization dialog, 325, 340
Image Property inspector, 42
color spaces used for, 314–315
copying/pasting from Photoshop, 331–334
dragging-and-dropping, 335–336
file formats for, 312, 316–317
inserting on a webpage, 318–320, 322–328
optimizing with Property inspector, 337–339
Photoshop Smart Objects, 328–331
Quality setting for, 325
review questions/answers on, 341
tools for editing, 340
vector graphics, 312
Images category icon, 318
Import Tabular Data dialog, 291–292
incompatible code, 165
inline formatting, 77
<input> tag, 60
Insert Article dialog, 264, 281
Insert Rows or Columns dialog, 283
inserting
editable regions into templates, 237–239
images on a webpage, 318–320, 322–328
metadata into templates, 239–241
tables from other sources, 291–294
Inspect mode, 28
installing Dreamweaver, 4
Bootstrap Accordion widgets for, 387–398
Dreamweaver behaviors for, 374–375, 377–387
review questions/answers on, 399
See also behaviors
interface customization, 16–55
internal hyperlinks, 344, 348–355
relative link creation, 348–351
targeted link creation, 363–365
updating in child pages, 353–355
J
JPEG file format, 316
jQuery framework, 373, 388, 398
K
L
layouts
template creation from, 236–237
lesson files
downloading and unzipping, 6–7
recommended order for using, 8
Link Checker panel, 370
linked CSS formatting, 77
links. See hyperlinks
Linting support, 52
ordered and unordered, 272–273
previewing pages in, 259, 286, 355, 416
table styling in, 286
Locked icon, 243
Log button, 434
lossy compression, 316
M
Manage Sites dialog, 421
Marcotte, Ethan, 107
max-width specification, 49, 335
measurement systems, 156
media content. See web animation; web video
explanation of, 130
resources on, 231
syntax used in, 208
Media Query Definition dialog, 224
media type property, 207
menus. See navigation menus
metadata
image-related, 320
inserting into templates, 239–241
min-width specification, 49, 224, 335
Bootstrap framework and, 208–221
column width manipulation and, 217–221
copying/pasting CSS properties, 226–230
media queries and, 207–208, 221–231
media type property and, 207
mobile-first design and, 206, 214–217
responsive design and, 206–208
review questions/answers on, 232–233
mobile-first design, 206, 214–217
mobile-optimized sites, 213
mockups, 112
monochrome, 314
MP4 file format, 412
Muse, Adobe, 59
N
named anchors, 363
external hyperlinks for, 355–358
image-based links for, 360–361
internal hyperlinks for, 348–355
review questions/answers on, 371
targeting page elements, 363–369
See also hyperlinks
cleaning up, 174
New Document dialog, 125
New Features tab, 20
O
Ogg file format, 412
online resources. See resources
OS X vs. Windows instructions, 3
P
page design
evaluating options for, 122–124
list of components for, 109–110
Bootstrap framework and, 131–141
evaluating design options for, 122–124
review questions/answers on, 142–143
Visual Media Queries interface and, 129–131
working with predefined, 124–141
dragging, 31
grouping, 32
stacking, 32
tabbed, 388
passwords, 422
copying/pasting images from, 331–334
exporting assets from, 114–116
placeholders
video, 411
web page, 434
PNG file format, 317
Point to File icon, 351
Position Assist HUD, 50, 389, 410
poster images, 410
Bootstrap framework and, 131–141
steps for working with, 125–129
prelaunch checklist, 432
Preview in Browser option, 296
docking, 410
graphic tools in, 340
optimizing images with, 337–339
Refresh button, 389
pseudo-classes, 175
publishing to the web, 418–439
prelaunch checklist for, 432
putting your site online, 432–435
remote site setup for, 420–428
review questions/answers on, 439
synchronization process for, 436–438
testing server used for, 426–428
Q
queries. See media queries
Quick Tag Editor, 184, 268, 276
R
scaling issues, 333
RDS (Remote Development Services), 421
regular expressions, 304
Related Files interface, 42–43
relative hyperlinks, 344, 345, 348–351
synchronizing local and, 436–438
testing server used for, 426–428
troubleshooting connections to, 424
Remove Event icon, 383
Resample tool, 340
on CSS, 100
on HTML, 59
on HTML5 video, 416
on media queries, 231
responsive web design, 107
See also mobile device design
rollover effects, 374, 385, 386, 396–398
S
Save All command, 253
Save Web Image dialog, 326
saving
custom workspaces, 37
pages as templates, 236
<script> tag, 61
Scrubber tool
mobile device design and, 208–210
resizing document windows with, 128, 131
Select File dialog, 350
Select Image Source dialog, 322, 324
custom element classes and, 187–188
main content placeholders and, 186–187
SFTP (Secure FTP), 420
Sharpen tool, 340
Show Set option, 47, 95, 150–151, 286
Site menu, 9
site root folder, 10
Site Setup dialog, 11, 422, 428–429
smartphones. See mobile device design
<source> tag, 63
spellchecking web pages, 302–304
stacking panels, 32
staging servers, 420
Standard toolbar, 37
strikethrough formatting, 2
styling
SVG graphics, 312
Swap Image Restore behavior, 381–382
synchronization process, 436–438
Synchronize Files dialog, 437
syntax
CSS rule, 78
media query, 208
T
Table Property inspector, 42
controlling the display of, 289–291
creating from scratch, 279–284
inserting from other sources, 291–294
review questions/answers on, 308, 309
tag selector interface, 43–44, 280
tags
Element HUD for creating, 367–368
id attribute for, 363, 365–367, 368–369
child pages produced from, 241–253
creating from existing layouts, 236–237
formatting content in, 247–250
how they work, 236
review questions/answers on, 254–255
Templates category icon, 250, 261
finding and replacing, 304–307
font size specification for, 200–202
formatting for headers, 153–157
global type styles for, 192–202
HTML structures added to, 266–269
importing from documents, 261–263
semantic structures for, 263–264
<textarea> element, 61
TinyURLs, 1
Toggle Size Constrain icon, 327, 338
toolbars, 37
true color, 315
typefaces
fonts distinguished from, 193
See also fonts
U
unordered lists, 273
Update from Original tool, 340
Update Template Files dialog, 251, 353
usernames, 422
V
values, 156
vector graphics, 312
video. See web video
Code view, 24
Inspect mode, 28
Live view, 25
Visual Media Query (VMQ) interface, 49, 129–131
W
Web 2.0, 374
Edge Animate program for, 404
explanation of, 402
review questions/answers on, 417
viewing on older systems, 410
See also web video
hyperlink info in, 346
popularity of specific, 73, 106
previewing pages in, 296
important questions for, 104–106
review questions/answers on, 119
web fonts
building font stacks with, 198–200
explanation of, 402
fixing buggy, 414
resources about, 416
review questions/answers on, 417
See also web animation
WebDav system, 421
WebM video format, 412
web-safe color palette, 315
Getting Started tab, 21
New Features tab, 20
Windows vs. OS X instructions, 3
workspace
X
XML (Extensible Markup Language), 312