Preface |
|
1 | (4) |
|
Chapter 1 Creating HTML5 Pages in Dreamweaver |
|
|
5 | (26) |
|
HTML5 and Dreamweaver CS5 in the world of web design |
|
|
6 | (3) |
|
HTML5--the cutting edge of web design |
|
|
6 | (1) |
|
HTML4.1, XHTML, and HTML5 |
|
|
7 | (1) |
|
Compatibility issues with HTML5 |
|
|
8 | (1) |
|
HTML5 and Dreamweaver CS5.5 |
|
|
9 | (2) |
|
Dreamweaver generates code |
|
|
9 | (2) |
|
Dreamweaver--catching up to HTML5 |
|
|
11 | (1) |
|
An introduction to HTML5 layout elements |
|
|
11 | (5) |
|
The evolution of HTML layout elements |
|
|
12 | (1) |
|
|
12 | (1) |
|
|
13 | (2) |
|
Phase 3 HTML5 layout elements |
|
|
15 | (1) |
|
Meet the HTML5 layout elements |
|
|
15 | (1) |
|
Dreamweaver's HTML5 Pack and design elements |
|
|
16 | (1) |
|
Detecting or installing the HTML5 Pack in Dreamweaver |
|
|
17 | (2) |
|
Creating a Dreamweaver site |
|
|
19 | (2) |
|
Generating new pages from layouts using the HTML5 templates |
|
|
21 | (2) |
|
Examining the generated HTML5 layout |
|
|
23 | (3) |
|
Toggling between related files |
|
|
23 | (1) |
|
Code, Split, and Design views |
|
|
24 | (1) |
|
Dissecting design elements with the Inspect Mode |
|
|
25 | (1) |
|
Saving a layout as a web page |
|
|
26 | (1) |
|
Recipe: Creating and saving a 3-column HTML5 page |
|
|
27 | (2) |
|
|
29 | (2) |
|
Chapter 2 Customizing HTML5 Layout-Content and Look |
|
|
31 | (20) |
|
Customizing layouts - An overview |
|
|
32 | (2) |
|
Embedding content where it belongs |
|
|
32 | (1) |
|
|
32 | (2) |
|
Editing content in HTML5 page layout elements |
|
|
34 | (6) |
|
HTML text tags versus HTML5 layout elements |
|
|
34 | (1) |
|
Organizing content in containers |
|
|
35 | (1) |
|
Utilizing Split view for editing content |
|
|
36 | (1) |
|
Adding articles and sections |
|
|
37 | (1) |
|
Identifying and selecting HTML5 layout elements |
|
|
38 | (1) |
|
Copying, pasting, and deleting HTML5 Elements |
|
|
39 | (1) |
|
|
40 | (3) |
|
HTML5 layout elements require styles |
|
|
40 | (2) |
|
Examining CSS associated with HTML5 layouts |
|
|
42 | (1) |
|
Customizing HTML tag rules |
|
|
43 | (4) |
|
Making quick changes to styles in the CSS styles panel |
|
|
44 | (1) |
|
The CSS rules definition dialog |
|
|
45 | (1) |
|
|
45 | (1) |
|
|
46 | (1) |
|
|
46 | (1) |
|
Saving customized HTML5 layouts |
|
|
47 | (1) |
|
Recipe: Customize content and look of an HTML5 page |
|
|
48 | (2) |
|
|
50 | (1) |
|
Chapter 3 Customizing HTML5 Layout Elements |
|
|
51 | (24) |
|
HTML5 layout and browser compatibility challenges |
|
|
53 | (5) |
|
Which browsers support HTML5 layout elements? |
|
|
53 | (1) |
|
Using CSS to solve browser issues |
|
|
53 | (1) |
|
The magic of display: Block |
|
|
54 | (1) |
|
|
55 | (3) |
|
Global HTML5 layout element attributes |
|
|
58 | (5) |
|
|
58 | (2) |
|
Defining size, margins, and padding |
|
|
60 | (1) |
|
|
61 | (1) |
|
|
61 | (1) |
|
Element padding versus content margins |
|
|
62 | (1) |
|
|
62 | (1) |
|
Customizing HTML5 elements |
|
|
63 | (1) |
|
Back to the future: ID and class styles |
|
|
64 | (1) |
|
|
64 | (1) |
|
|
65 | (1) |
|
Recipe: Customizing the HTML5 page layout |
|
|
65 | (9) |
|
Recipe: Customizing the size and position for header, footer, nav, and aside |
|
|
66 | (3) |
|
Customizing links in the nav element |
|
|
69 | (5) |
|
|
74 | (1) |
|
Chapter 4 Building HTML5 Pages from Scratch |
|
|
75 | (28) |
|
Dreamweaver CS5 and HTML5 |
|
|
76 | (1) |
|
Building an HTML5 page from the top |
|
|
77 | (6) |
|
HTML5 structural elements |
|
|
77 | (2) |
|
|
79 | (4) |
|
Using HTML5 to make content accessible |
|
|
83 | (2) |
|
|
85 | (1) |
|
|
86 | (1) |
|
Adding header, header nav, and hgroup |
|
|
87 | (1) |
|
Navigation within a header |
|
|
87 | (1) |
|
Organizing header content with hgroups |
|
|
87 | (1) |
|
Creating articles and sections |
|
|
88 | (2) |
|
|
90 | (1) |
|
|
91 | (1) |
|
|
92 | (2) |
|
|
92 | (1) |
|
|
93 | (1) |
|
|
93 | (1) |
|
Recipe Part 1 Build a style sheet for an HTML5 page layout |
|
|
94 | (3) |
|
Recipe Part 2 Build an HTML5 layout from scratch |
|
|
97 | (4) |
|
|
101 | (2) |
|
Chapter 5 Defining and Implementing Multiscreen Previews and Media Queries |
|
|
103 | (20) |
|
Web design for a multimedia web world |
|
|
104 | (3) |
|
|
105 | (1) |
|
Styling for mobile devices and tablets |
|
|
106 | (1) |
|
Previewing with the Multiscreen Preview |
|
|
107 | (2) |
|
Generating a Media Query in Dreamweaver |
|
|
109 | (4) |
|
Building alternative style sheets |
|
|
110 | (1) |
|
A 3-step protocol for preparing to generate a Media Query |
|
|
110 | (1) |
|
Assigning styles to different media |
|
|
111 | (2) |
|
Formatting CSS files for Media Queries |
|
|
113 | (4) |
|
Caution: Don't delete style rules |
|
|
115 | (1) |
|
Styling for mobile devices |
|
|
115 | (2) |
|
Troubleshooting for Apple i-Gadgets |
|
|
117 | (2) |
|
Exercise: Defining a Media Query for a cell phone |
|
|
119 | (3) |
|
|
122 | (1) |
|
Chapter 6 Applying CSS3 Effects and Transforms |
|
|
123 | (32) |
|
New in CSS3: Effects and transforms |
|
|
124 | (6) |
|
|
125 | (3) |
|
CSS3 styles in Dreamweaver's HTML5 Pack |
|
|
128 | (2) |
|
|
130 | (9) |
|
|
131 | (2) |
|
|
133 | (3) |
|
|
136 | (1) |
|
|
136 | (1) |
|
|
137 | (1) |
|
|
138 | (1) |
|
|
139 | (6) |
|
|
140 | (1) |
|
How to generate transition coding in Dreamweaver |
|
|
140 | (1) |
|
|
141 | (1) |
|
|
142 | (1) |
|
|
143 | (1) |
|
Creating a skew transition |
|
|
144 | (1) |
|
Other CS3 transform effects |
|
|
145 | (1) |
|
|
145 | (1) |
|
Interactive effects and transforms |
|
|
145 | (3) |
|
|
146 | (1) |
|
Interactivity with the hover pseudo-class |
|
|
146 | (1) |
|
Animating CSS3 transforms in Dreamweaver |
|
|
147 | (1) |
|
Recipe: Create an animated effect and transform |
|
|
148 | (6) |
|
Putting the pieces in place |
|
|
148 | (6) |
|
|
154 | (1) |
|
Chapter 7 Embedding HTML5 Audio in Dreamweaver |
|
|
155 | (12) |
|
|
156 | (1) |
|
Laying the groundwork: HTML5 and page-building |
|
|
157 | (1) |
|
|
157 | (2) |
|
|
157 | (1) |
|
Browser support for audio files |
|
|
158 | (1) |
|
Embedding an HTML5 audio element in a Dreamweaver CS5 web page |
|
|
159 | (2) |
|
Alternative media options |
|
|
161 | (3) |
|
Providing alternative HTML5 audio formats |
|
|
161 | (1) |
|
Audio for non-HTML5 browsers |
|
|
162 | (1) |
|
|
162 | (2) |
|
Recipe: Embedding HTML5 audio |
|
|
164 | (2) |
|
|
166 | (1) |
|
Chapter 8 Embedding HTML5 Video in Dreamweaver |
|
|
167 | (22) |
|
HTML5 video and Dreamweaver CS5.5 |
|
|
167 | (5) |
|
|
168 | (1) |
|
|
169 | (1) |
|
Apple devices and the web video |
|
|
170 | (2) |
|
The wild world of native videos |
|
|
172 | (1) |
|
|
172 | (1) |
|
Browsers that do NOT support HTML5 |
|
|
172 | (1) |
|
Preparing an HTML5 video for every scenario |
|
|
173 | (1) |
|
Compressing videos for the Web |
|
|
173 | (3) |
|
Video compression--open source and proprietary |
|
|
174 | (1) |
|
Converting a video to web formats with open source tools |
|
|
174 | (2) |
|
Creating an HTML5 video in Adobe Media Encoder CS5.5 |
|
|
176 | (2) |
|
Dreamweaver site management for an HTML5 video |
|
|
178 | (1) |
|
Defining the HTML5 >video< element |
|
|
179 | (3) |
|
|
179 | (1) |
|
Creating the >video< element |
|
|
180 | (1) |
|
Defining video attributes |
|
|
180 | (1) |
|
|
181 | (1) |
|
Alternate video for non-HTML5 environments |
|
|
182 | (1) |
|
|
182 | (1) |
|
Testing HTML5 video pages |
|
|
182 | (2) |
|
Previewing a video in the Live View |
|
|
183 | (1) |
|
Previewing a video in BrowserLab |
|
|
183 | (1) |
|
Recipe: Embedding an HTML5 video |
|
|
184 | (3) |
|
|
187 | (2) |
|
Chapter 9 Creating Mobile Pages with jQuery |
|
|
189 | (28) |
|
Mobile pages - An overview |
|
|
190 | (4) |
|
Mobile pages, apps, and jQuery Mobile |
|
|
192 | (1) |
|
The status of jQuery Mobile |
|
|
193 | (1) |
|
Using jQuery Mobile starter pages |
|
|
193 | (1) |
|
Creating mobile pages from Dreamweaver CS5.5 starters |
|
|
194 | (5) |
|
Mobile pages in Split view |
|
|
195 | (2) |
|
Previewing jQuery Mobile pages in Live view |
|
|
197 | (2) |
|
Customizing mobile page content |
|
|
199 | (4) |
|
The HTML5 data-role property |
|
|
199 | (1) |
|
|
199 | (2) |
|
|
201 | (1) |
|
Customizing content for different data roles |
|
|
202 | (1) |
|
Adding new jQuery Mobile pages and objects |
|
|
203 | (2) |
|
Creating new data-role pages by copying code |
|
|
203 | (2) |
|
Creating new data-role pages from the menu |
|
|
205 | (1) |
|
Customizing mobile page CSS styles |
|
|
205 | (5) |
|
Default jQuery Mobile CSS |
|
|
207 | (1) |
|
Editing jQuery Mobile CSS |
|
|
207 | (1) |
|
Applying and customizing themes |
|
|
208 | (2) |
|
Looking ahead: Generating mobile apps |
|
|
210 | (1) |
|
Recipe: Build a mobile web page with jQuery Mobile objects |
|
|
210 | (6) |
|
|
216 | (1) |
|
Chapter 10 Adding jQuery Mobile Elements |
|
|
217 | (28) |
|
Creating jQuery Mobile pages from scratch |
|
|
218 | (5) |
|
|
218 | (1) |
|
Step 1 Creating an HTML5 page |
|
|
219 | (1) |
|
Step 2 Inserting a jQuery Mobile "page" |
|
|
220 | (3) |
|
|
223 | (3) |
|
Defining styles for Layout Grids |
|
|
225 | (1) |
|
Designing mobile pages into a collapsible block |
|
|
226 | (4) |
|
Building a collapsible block |
|
|
226 | (1) |
|
Changing initial block state |
|
|
227 | (1) |
|
Changing block data-themes and styles |
|
|
228 | (1) |
|
Editing Collapsible Block HTML |
|
|
229 | (1) |
|
Adding jQuery form objects |
|
|
230 | (7) |
|
|
231 | (1) |
|
Creating a jQuery Mobile form |
|
|
232 | (2) |
|
Special mobile form fields |
|
|
234 | (1) |
|
Inserting a text input field |
|
|
235 | (1) |
|
|
235 | (1) |
|
Inserting a toggle switch |
|
|
236 | (1) |
|
Formatting jQuery Mobile Form Fields |
|
|
236 | (1) |
|
Recipe: Build a page with collapsible blocks and a form |
|
|
237 | (6) |
|
|
243 | (2) |
|
Chapter 11 Generating Apps |
|
|
245 | (12) |
|
Generating apps from Dreamweaver--an overview |
|
|
245 | (2) |
|
Advantage: App vs web page |
|
|
246 | (1) |
|
PhoneGap and Dreamweaver CS5.5 |
|
|
247 | (1) |
|
Configuring application framework(s) |
|
|
247 | (1) |
|
|
248 | (1) |
|
Installing the frameworks |
|
|
248 | (1) |
|
Defining mobile application settings |
|
|
249 | (2) |
|
Building and emulating apps |
|
|
251 | (1) |
|
Testing mobile apps on your computer |
|
|
252 | (2) |
|
Recipe: Building and emulating a mobile app |
|
|
254 | (2) |
|
|
256 | (1) |
Index |
|
257 | |