Getting Started |
|
1 | (15) |
|
About Classroom in a Book |
|
|
1 | (1) |
|
|
1 | (1) |
|
|
2 | (1) |
|
Conventions used in this book |
|
|
2 | (1) |
|
|
2 | (1) |
|
|
2 | (1) |
|
|
3 | (1) |
|
|
3 | (1) |
|
|
3 | (1) |
|
Windows vs. macOS instructions |
|
|
3 | (1) |
|
|
4 | (1) |
|
Updating Dreamweaver to the latest version |
|
|
5 | (1) |
|
|
6 | (1) |
|
|
6 | (1) |
|
|
6 | (1) |
|
Accessing the lesson files and Web Edition |
|
|
6 | (1) |
|
|
7 | (1) |
|
|
8 | (1) |
|
|
8 | (1) |
|
Choosing a color theme after first launch |
|
|
9 | (1) |
|
|
9 | (2) |
|
Defining a Dreamweaver site |
|
|
11 | (3) |
|
|
14 | (1) |
|
|
15 | (1) |
|
Adobe Authorized Training Centers |
|
|
15 | (1) |
1 Customizing Your Workspace |
|
16 | (32) |
|
|
18 | (1) |
|
|
19 | (2) |
|
|
19 | (1) |
|
|
20 | (1) |
|
|
21 | (1) |
|
Exploring the New Feature guides |
|
|
21 | (1) |
|
Switching and splitting views |
|
|
22 | (2) |
|
|
22 | (1) |
|
|
22 | (1) |
|
|
23 | (1) |
|
|
24 | (1) |
|
|
24 | (5) |
|
|
25 | (2) |
|
Closing panels and panel groups |
|
|
27 | (1) |
|
|
27 | (1) |
|
|
28 | (1) |
|
Grouping, stacking, and docking |
|
|
28 | (1) |
|
Personalizing Dreamweaver |
|
|
29 | (1) |
|
Saving a custom workspace |
|
|
30 | (1) |
|
|
30 | (1) |
|
|
30 | (1) |
|
|
30 | (1) |
|
|
31 | (1) |
|
Creating custom keyboard shortcuts |
|
|
31 | (2) |
|
Using the Property inspector |
|
|
33 | (1) |
|
|
33 | (1) |
|
|
34 | (1) |
|
Accessing image properties |
|
|
34 | (1) |
|
Accessing table properties |
|
|
34 | (1) |
|
Using the Related Files interface |
|
|
34 | (2) |
|
Using the Tag Selector interface |
|
|
36 | (1) |
|
|
37 | (5) |
|
|
38 | (1) |
|
|
39 | (1) |
|
|
39 | (1) |
|
|
40 | (1) |
|
|
41 | (1) |
|
Using the Visual Media Query (VMQ) interface |
|
|
42 | (1) |
|
|
42 | (1) |
|
Using element dialogs, displays, and inspectors |
|
|
43 | (3) |
|
|
43 | (1) |
|
|
43 | (1) |
|
|
44 | (1) |
|
|
44 | (1) |
|
Setting up version control in Dreamweaver |
|
|
44 | (2) |
|
Exploring, experimenting, and learning |
|
|
46 | (1) |
|
|
47 | (1) |
|
|
47 | (1) |
2 HTML Basics |
|
48 | (12) |
|
|
50 | (1) |
|
|
50 | (2) |
|
|
51 | (1) |
|
Frequently used HTML elements |
|
|
52 | (3) |
|
|
53 | (2) |
|
|
55 | (1) |
|
|
55 | (4) |
|
|
56 | (1) |
|
|
57 | (1) |
|
New techniques and technology |
|
|
58 | (1) |
|
|
59 | (1) |
|
|
59 | (1) |
3 CSS Basics |
|
60 | (26) |
|
|
62 | (1) |
|
|
62 | (2) |
|
|
64 | (3) |
|
|
65 | (1) |
|
|
66 | (1) |
|
|
67 | (2) |
|
|
69 | (11) |
|
|
70 | (2) |
|
|
72 | (1) |
|
|
72 | (1) |
|
|
73 | (1) |
|
|
74 | (6) |
|
Multiples, classes, and ids, oh my! |
|
|
80 | (5) |
|
Applying formatting to multiple elements |
|
|
80 | (1) |
|
|
80 | (1) |
|
Creating class attributes |
|
|
81 | (1) |
|
|
82 | (1) |
|
CSS3 features and effects |
|
|
82 | (2) |
|
CSS3 overview and support |
|
|
84 | (1) |
|
|
85 | (1) |
|
|
85 | (1) |
4 Working With Code |
|
86 | (38) |
|
|
88 | (7) |
|
|
88 | (3) |
|
Writing code automatically |
|
|
91 | (4) |
|
Working with multicursor support |
|
|
95 | (2) |
|
|
97 | (2) |
|
Working with CSS preprocessors |
|
|
99 | (15) |
|
|
99 | (2) |
|
Creating the CSS source file |
|
|
101 | (4) |
|
|
105 | (3) |
|
|
108 | (2) |
|
Importing other style sheets |
|
|
110 | (2) |
|
Learning more about preprocessors |
|
|
112 | (1) |
|
|
112 | (2) |
|
|
114 | (4) |
|
|
114 | (1) |
|
|
115 | (2) |
|
Using parent tag selectors |
|
|
117 | (1) |
|
|
118 | (1) |
|
|
119 | (1) |
|
Accessing Split Code view |
|
|
120 | (1) |
|
Previewing assets in Code view |
|
|
121 | (2) |
|
|
123 | (1) |
|
|
123 | (1) |
5 Web Design Basics |
|
124 | (14) |
|
|
126 | (2) |
|
What is the purpose of the website? |
|
|
126 | (1) |
|
|
126 | (1) |
|
|
127 | (1) |
|
|
128 | (1) |
|
Working with thumbnails and wireframes |
|
|
128 | (9) |
|
|
130 | (1) |
|
|
130 | (2) |
|
|
132 | (2) |
|
Designing for mobile devices |
|
|
134 | (1) |
|
|
134 | (3) |
|
|
137 | (1) |
|
|
137 | (1) |
6 Creating A Page Layout |
|
138 | (50) |
|
Evaluating page design options |
|
|
140 | (1) |
|
Working with predefined layouts |
|
|
140 | (3) |
|
Styling a predefined layout |
|
|
143 | (2) |
|
Styling elements using the Extract panel |
|
|
145 | (6) |
|
Troubleshooting CSS conflicts |
|
|
151 | (2) |
|
Extracting text from a Photoshop mockup |
|
|
153 | (3) |
|
Deleting components and attributes from a template |
|
|
156 | (3) |
|
|
159 | (3) |
|
Creating new elements with the DOM panel |
|
|
162 | (2) |
|
Creating menu items with copy and paste |
|
|
164 | (1) |
|
|
165 | (4) |
|
Creating a gradient background using Extract |
|
|
169 | (4) |
|
Extracting image assets from a mockup |
|
|
173 | (2) |
|
Creating new Bootstrap structures |
|
|
175 | (4) |
|
Adding a background image to the header |
|
|
179 | (5) |
|
|
184 | (2) |
|
|
186 | (1) |
|
|
187 | (1) |
7 Working With Templates |
|
188 | (48) |
|
Creating Dreamweaver templates |
|
|
190 | (1) |
|
Removing unneeded components |
|
|
191 | (5) |
|
Modifying a Bootstrap layout |
|
|
196 | (5) |
|
Modifying text formatting in a Bootstrap element |
|
|
201 | (2) |
|
Adding template boilerplate and placeholders |
|
|
203 | (7) |
|
|
206 | (3) |
|
|
209 | (1) |
|
|
210 | (2) |
|
Working with editable regions |
|
|
212 | (10) |
|
|
212 | (1) |
|
|
212 | (1) |
|
|
212 | (1) |
|
Inserting a new Bootstrap element |
|
|
213 | (3) |
|
Inserting an editable region |
|
|
216 | (3) |
|
Inserting an editable optional region |
|
|
219 | (3) |
|
|
222 | (5) |
|
|
222 | (2) |
|
Adding content to child pages |
|
|
224 | (2) |
|
Adding metadata to a child page |
|
|
226 | (1) |
|
|
227 | (7) |
|
Removing an optional region from a child page |
|
|
231 | (1) |
|
Removing unused sections from a child page |
|
|
232 | (2) |
|
|
234 | (1) |
|
|
235 | (1) |
8 Working With Text, Lists, And Tables |
|
236 | (58) |
|
Previewing the completed file |
|
|
238 | (2) |
|
Creating and styling text |
|
|
240 | (8) |
|
|
240 | (4) |
|
Duplicating Bootstrap rows |
|
|
244 | (3) |
|
Deleting unused Bootstrap components |
|
|
247 | (1) |
|
|
248 | (6) |
|
Basing content structures on lists |
|
|
254 | (8) |
|
Pasting multiple elements in Live view |
|
|
258 | (1) |
|
Creating new list-based items |
|
|
259 | (3) |
|
Creating and styling tables |
|
|
262 | (22) |
|
Creating tables from scratch |
|
|
262 | (5) |
|
Copying and pasting tables |
|
|
267 | (1) |
|
|
268 | (3) |
|
|
271 | (1) |
|
Adding header rows to tables |
|
|
272 | (2) |
|
Controlling table display |
|
|
274 | (2) |
|
Inserting tables from other sources |
|
|
276 | (2) |
|
Creating semantic text structures |
|
|
278 | (4) |
|
Adding and formatting caption elements |
|
|
282 | (2) |
|
|
284 | (1) |
|
Finding and replacing text |
|
|
285 | (7) |
|
|
292 | (1) |
|
|
293 | (1) |
9 Working With Images |
|
294 | (46) |
|
|
296 | (7) |
|
|
296 | (1) |
|
|
296 | (4) |
|
Raster image file formats |
|
|
300 | (3) |
|
|
303 | (3) |
|
Inserting images in Design view |
|
|
306 | (2) |
|
|
308 | (3) |
|
Inserting Photoshop Images |
|
|
311 | (6) |
|
Inserting images using the Assets panel |
|
|
317 | (2) |
|
Adapting images to mobile design |
|
|
319 | (2) |
|
|
321 | (1) |
|
Working with the Insert panel |
|
|
322 | (2) |
|
Inserting images into the site template |
|
|
324 | (4) |
|
Adding CSS classes to template structures |
|
|
328 | (3) |
|
Adding images to a Bootstrap carousel |
|
|
331 | (3) |
|
Styling headings and text in a Bootstrap carousel |
|
|
334 | (2) |
|
Self-paced exercise: Inserting images in child pages |
|
|
336 | (3) |
|
|
339 | (1) |
|
|
339 | (1) |
10 Working With Navigation |
|
340 | (46) |
|
|
342 | (1) |
|
Internal and external hyperlinks |
|
|
342 | (1) |
|
Relative vs. absolute hyperlinks |
|
|
342 | (1) |
|
Previewing the completed files |
|
|
343 | (6) |
|
Creating internal hyperlinks |
|
|
349 | (11) |
|
|
349 | (3) |
|
|
352 | (5) |
|
Updating links in child pages |
|
|
357 | (3) |
|
Creating an external link |
|
|
360 | (5) |
|
Creating an absolute external link in Live view |
|
|
360 | (5) |
|
|
365 | (2) |
|
Creating an image-based link |
|
|
367 | (3) |
|
Creating image-based links using the Element Display |
|
|
367 | (1) |
|
Creating text links using the Text Display |
|
|
368 | (2) |
|
|
370 | (4) |
|
Creating internal targeted links |
|
|
371 | (3) |
|
Creating a destination link in the Element Display |
|
|
374 | (2) |
|
Targeting id-based link destinations |
|
|
375 | (1) |
|
Locking an element on the screen |
|
|
376 | (2) |
|
Styling a navigation menu |
|
|
378 | (3) |
|
|
381 | (2) |
|
|
383 | (1) |
|
Self-paced exercise: Adding additional links |
|
|
384 | (1) |
|
|
385 | (1) |
|
|
385 | (1) |
11 Publishing To The Web |
|
386 | (28) |
|
|
388 | (7) |
|
Setting up a remote FTP site (optional) |
|
|
389 | (6) |
|
Cloaking folders and files |
|
|
395 | (1) |
|
|
396 | (7) |
|
|
397 | (3) |
|
|
400 | (3) |
|
Putting your site online (optional) |
|
|
403 | (5) |
|
Synchronizing local and remote sites |
|
|
408 | (5) |
|
|
413 | (1) |
|
|
413 | (1) |
12 Working With Mobile Design |
|
414 | (72) |
|
|
416 | (6) |
|
|
416 | (1) |
|
Testing responsiveness in Dreamweaver |
|
|
416 | (6) |
|
|
422 | (1) |
|
|
422 | (1) |
|
|
423 | (1) |
|
Working with the Visual Media Query interface |
|
|
423 | (4) |
|
Introducing web frameworks |
|
|
427 | (1) |
|
Setting up web-hosted fonts |
|
|
428 | (15) |
|
|
429 | (7) |
|
Building font stacks with web-hosted fonts |
|
|
436 | (2) |
|
|
438 | (5) |
|
Creating custom media queries |
|
|
443 | (17) |
|
Adding rules to a media query |
|
|
445 | (3) |
|
Controlling text styling with media queries |
|
|
448 | (5) |
|
Changing component visibility with media queries |
|
|
453 | (7) |
|
Controlling Bootstrap element alignment |
|
|
460 | (4) |
|
Revising Bootstrap template structure |
|
|
464 | (5) |
|
Adapting content to mobile design |
|
|
469 | (8) |
|
Checking pages for design conflicts |
|
|
469 | (2) |
|
Making HTML tables responsive |
|
|
471 | (6) |
|
Previewing pages using Real-Time Preview |
|
|
477 | (5) |
|
Fixing issues for mobile design and desktop |
|
|
482 | (3) |
|
|
485 | (1) |
|
|
485 | (1) |
Appendix: Tiny URLS |
|
486 | (1) |
Index |
|
487 | |