Page 10 - CC2018_DW_Look_Inside

Contents
Contents

Project 6 Project 8
Kayaking CSS3 Site 259 Bootstrap Responsive Page 333

Stage 1 Working with CSS3 Selectors ........... 261 Stage 1 Working with Bootstrap ............... 335
Define HTML Articles............................. 261 Create a New Bootstrap Page....................... 337
Add Rounded Corners to an Element..................264 Examine Bootstrap Media Queries ................... 341
Define Transparency for a Background Color ............267 More about the Visual Media Queries Bar .............. 341
Create Multiple Columns of Text.....................269 Define the Bootstrap Page Layout Grid ................343
Learning More about CSS3 Properties................. 270 Insert Responsive Images..........................348
Copy Content into a Bootstrap Page .................. 351
Stage 2 Working with Web Fonts ............... 271
Use CSS to Format Page Content ....................354
Activate Adobe Edge Web Fonts..................... 271
Apply Web Fonts to Page Elements................... 273 Create New Media Queries.........................358
Working with External Web Fonts.................... 276 Show and Hide Content in Different Layouts ............362
More about Showing and Hiding Elements .............364
Stage 3 Adding Video in HTML5 ................277
Place a Video in an HTML5 Page ....................277 Stage 2 Creating CSS3 Transitions ..............367
Video Tag Attributes .............................280 Restrict Element Height and Overflow.................367
Use the CSS Transitions Panel.......................369
Stage 4 Creating a CSS3 Image Gallery ..........282
Define Absolute Positioning ........................282 Project Review ............................... 374
Work with nth-of-type Selectors.....................284 Portfolio Builder Project........................ 375
Define Hover Behavior ............................286
Add a Drop Shadow .............................288
Project Review ...............................290

Portfolio Builder Project........................ 291

Project 7
jQuery Mobile Site 293

Stage 1 Creating Mobile-Friendly Design ........295
Create the Basic Page Structure .....................295
Define Inline Navigation Links ......................299
Control Image Size and Position . . . . . . . . . . . . . . . . . . . . .302
Create a Site Template............................304
Stage 2 Adding jQuery UI Elements .............308
Insert a jQuery Tabbed Panel .......................308
Add Tab Content................................ 311
Change Tab Content CSS .......................... 314
Grouping CSS Selectors ........................... 316
Using Inspect Mode in Live View .................... 318

Stage 3 Creating a JavaScript Photo Gallery ...... 319
Attach External CSS and Script Files .................. 319
Create the Lightbox Img Elements.................... 321
Define the Lightbox Link Objects .................... 325

Project Review ...............................329
Portfolio Builder Project........................330

x