Page 10 - Adobe Dream Viewer CC 2020

CONTENTS

Project 6 Project 8
jQuery Mobile Site 263 CSS Grid Reponsive Page 351
Stage 1 / Creating a Mobile-Friendly Design . . . . . . 265 Stage 1 / Working with CSS Grids . . . . . . . . . . . . . . . 353
Create the Basic Page Structure . . . . . . . . . . . . . . . . . . . . . . 265 Review the Provided Source Files . . . . . . . . . . . . . . . . . . . . . 354
Define Inline Navigation Links . . . . . . . . . . . . . . . . . . . . . . . 269 Define a CSS Grid Container . . . . . . . . . . . . . . . . . . . . . . . . . 356
Control Image Size and Position . . . . . . . . . . . . . . . . . . . . . . 272 Define the Size and Position of CSS Grid Items . . . . . . . . . . . 359
Create a Site Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Stage 2 / Working with CSS3 . . . . . . . . . . . . . . . . . . . 363
Stage 2 / Adding jQuery UI Elements . . . . . . . . . . . . 278 Create a Universal Selector . . . . . . . . . . . . . . . . . . . . . . . . . 363
Insert a jQuery Tabbed Panel . . . . . . . . . . . . . . . . . . . . . . . . 278 Explore CSS Methods of Targeting Specific Elements . . . . . . 365
Add Tab Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Create Multiple Columns of Text . . . . . . . . . . . . . . . . . . . . . . 369
Change Tab Content CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Create a Fixed-Position Element . . . . . . . . . . . . . . . . . . . . . . 370
Grouping CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Stage 3 / Working with Web Fonts . . . . . . . . . . . . . . 371
Using Inspect Mode in Live View . . . . . . . . . . . . . . . . . . . . . 288 Activate Adobe Edge Web Fonts . . . . . . . . . . . . . . . . . . . . . 371
Stage 3 / Creating a JavaScript Photo Gallery . . . . . 289 Working with External Web Fonts . . . . . . . . . . . . . . . . . . . . 374
Attach External CSS and Script Files . . . . . . . . . . . . . . . . . . . 289 Apply Web Fonts to Page Elements . . . . . . . . . . . . . . . . . . . 375
Create the Lightbox Img Elements . . . . . . . . . . . . . . . . . . . . 291 Stage 4 / Adding HTML5 Video . . . . . . . . . . . . . . . . . 377
Define the Lightbox Link Objects . . . . . . . . . . . . . . . . . . . . . 295 Place a Video in an HTML5 Page . . . . . . . . . . . . . . . . . . . . . 378
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Understanding Video Tag Attributes . . . . . . . . . . . . . . . . . . . 381

Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 300 Stage 5 / Making the Grid Responsive . . . . . . . . . . . 383
Define Named Grid Areas . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Project 7 Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Bootstrap Responsive Page 303 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 390

Stage 1 / Working with Bootstrap . . . . . . . . . . . . . . . 305
Create a New Bootstrap Page . . . . . . . . . . . . . . . . . . . . . . . 307
Examine Bootstrap Media Queries . . . . . . . . . . . . . . . . . . . . 312
More About the Visual Media Queries Bar . . . . . . . . . . . . . . 314
Define the Bootstrap Page Layout Grid . . . . . . . . . . . . . . . . . 315
Insert Responsive Images . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Copy Content into a Bootstrap Page . . . . . . . . . . . . . . . . . . . 323
Use CSS to Format Page Content . . . . . . . . . . . . . . . . . . . . . 327
Create New Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . 331
Show and Hide Content in Different Layouts . . . . . . . . . . . . . 336
Stage 2 / Creating CSS3 Transitions . . . . . . . . . . . . . 341
Restrict Element Height and Overflow . . . . . . . . . . . . . . . . . 341
Use the CSS Transitions Panel . . . . . . . . . . . . . . . . . . . . . . . . 343
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 349

x