Page 10 - Adobe Dream Viewer 2021

P. 10

CONTENTS

Project 6 Project 8
jQuery Mobile Site 261 CSS Grid Responsive Page 351
Stage 1 / Creating a Mobile-Friendly Design . . . . . . 263 Stage 1 / Working with CSS Grids . . . . . . . . . . . . . . . 353
Create the Basic Page Structure . . . . . . . . . . . . . . . . . . . . . . 263 Review the Provided Source Files . . . . . . . . . . . . . . . . . . . . . 354
Deﬁ ne Inline Navigation Links . . . . . . . . . . . . . . . . . . . . . . . 267 Deﬁ ne a CSS Grid Container. . . . . . . . . . . . . . . . . . . . . . . . . 356
Control Image Size and Position. . . . . . . . . . . . . . . . . . . . . . 270 Deﬁ ne the Size and Position of CSS Grid Items . . . . . . . . . . . 359
Create a Site Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Stage 2 / Working with CSS3. . . . . . . . . . . . . . . . . . . 363
Stage 2 / Adding jQuery UI Elements . . . . . . . . . . . . 276 Create a Universal Selector . . . . . . . . . . . . . . . . . . . . . . . . . 363
Insert a jQuery Tabbed Panel . . . . . . . . . . . . . . . . . . . . . . . . 276 Explore CSS Methods of Targeting Speciﬁ c Elements . . . . . . 365
Add Tab Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Create Multiple Columns of Text. . . . . . . . . . . . . . . . . . . . . . 369
Change Tab Content CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 Create a Fixed-Position Element. . . . . . . . . . . . . . . . . . . . . . 370
Stage 3 / Creating a JavaScript Photo Gallery . . . . . 287 Stage 3 / Working with Web Fonts . . . . . . . . . . . . . . 371
Attach External CSS and Script Files . . . . . . . . . . . . . . . . . . . 287 Activate Adobe Edge Web Fonts . . . . . . . . . . . . . . . . . . . . . 371
Create the Lightbox Img Elements . . . . . . . . . . . . . . . . . . . . 289 Working with External Web Fonts . . . . . . . . . . . . . . . . . . . . 374
Deﬁ ne the Lightbox Link Objects . . . . . . . . . . . . . . . . . . . . . 293 Apply Web Fonts to Page Elements . . . . . . . . . . . . . . . . . . . 375
Grouping CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Stage 4 / Adding HTML5 Video . . . . . . . . . . . . . . . . . 377
Using Inspect Mode in Live View . . . . . . . . . . . . . . . . . . . . . 286 Place a Video in an HTML5 Page . . . . . . . . . . . . . . . . . . . . . 377
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Understanding Video Tag Attributes. . . . . . . . . . . . . . . . . . . 381

Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 298 Stage 5 / Making the Grid Responsive . . . . . . . . . . . 383
Deﬁ ne Named Grid Areas. . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Project 7 Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Bootstrap Responsive Page 301 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 390

Stage 1 / Working with Bootstrap. . . . . . . . . . . . . . . 303
Create a New Bootstrap Page . . . . . . . . . . . . . . . . . . . . . . . 305
More About the Visual Media Queries Bar . . . . . . . . . . . . . . 310
Examine Bootstrap Media Queries . . . . . . . . . . . . . . . . . . . . 310
Deﬁ ne the Bootstrap Page Layout Grid. . . . . . . . . . . . . . . . . 314
Insert Responsive Images. . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Copy Content into a Bootstrap Page. . . . . . . . . . . . . . . . . . . 322
Show and Hide Content in Different Layouts. . . . . . . . . . . . . 326
Use CSS to Format Page Content . . . . . . . . . . . . . . . . . . . . . 331
Understanding Relative Measurement Units . . . . . . . . . . . . . 332
Create New Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . 336

Stage 2 / Creating CSS3 Transitions . . . . . . . . . . . . . 341
Restrict Element Height and Overﬂ ow . . . . . . . . . . . . . . . . . 341
Use the CSS Transitions Panel. . . . . . . . . . . . . . . . . . . . . . . . 343

Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 349

5 6 7 8 9 10 11 12 13 14 15