Page 15 - Demo
P. 15
xiiiStage 4 / Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . 422Create an Ordered List of Web Resources . . . . . . . . . . . . . . . . 422Create an Unordered List of Navigation Links . . . . . . . . . . . . . 424Stage 5 / Attaching an External CSS File . . . . . . . . . . . . 425Add Tags and Element IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . 425Attach the CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429Learning about HTML5 Tags . . . . . . . . . . . . . . . . . . . . . . . . . . 432Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . 434Project 8Arts Council CSS Website 437Stage 1 / Placing Static Foreground Images . . . . . . . . . 439Review the Existing Project Status . . . . . . . . . . . . . . . . . . . . . 440Place an Image in the Regular Design View . . . . . . . . . . . . . . 441Place an Image with the Insert Panel . . . . . . . . . . . . . . . . . . . 444Drag and Drop an Image from the Insert Panel . . . . . . . . . . . . 446Insert an Image with the Assets Panel . . . . . . . . . . . . . . . . . . 447Stage 2 / Controlling Backgrounds with CSS . . . . . . . . 450Format Element Background Colors . . . . . . . . . . . . . . . . . . . . 450Defining Color in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455Define Transparent Background Colors . . . . . . . . . . . . . . . . . . 456Define Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . 458Format Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462Format Navigation Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467Define Background Images for Navigation Link States . . . . . . 471Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . 474Project 9Museum CSS Layout 477Stage 1 / Creating Layouts with Style Sheets . . . . . . . . 479Prepare the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480Define a New Element and Tag Selector . . . . . . . . . . . . . . . . . 482Drag and Drop to Create New Elements . . . . . . . . . . . . . . . . . 485Define a Selector with an ID Attribute . . . . . . . . . . . . . . . . . . 488Understanding CSS Shorthand . . . . . . . . . . . . . . . . . . . . . . . . 491Create New Selectors Using the CSS Designer Panel . . . . . . . . 492Create and Manage Nested Elements . . . . . . . . . . . . . . . . . . . 494Control Element Float Position . . . . . . . . . . . . . . . . . . . . . . . . 498Work with the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . 501Define Properties for the Tag . . . . . . . . . . . . . . . . . . 506Stage 2 / Working with a Template . . . . . . . . . . . . . . . . 509Create a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509Apply the Template to Existing Pages . . . . . . . . . . . . . . . . . . . . 513More about Working with Dreamweaver Templates . . . . . . . . . 517Stage 3 / Using CSS to Control Content . . . . . . . . . . . . . . 518Define HTML Tag Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518Create Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521Create a Pseudo-Class Selector . . . . . . . . . . . . . . . . . . . . . . . 525Create a Figure and Figure Caption . . . . . . . . . . . . . . . . . . . . 526Create Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . . 530Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . 534
