Adobe Dreamweaver CS4 - Illustrated Using CSS to Lay Out Pages Unit Objectives Understand CSS layoutsUnderstand CSS layouts Create a page using CSS layoutsCreate a page using CSS layouts Add content to CSS layout blocksAdd content to CSS layout blocks Edit content in CSS layout blocksEdit content in CSS layout blocks Edit CSS layout propertiesEdit CSS layout properties Adobe Dreamweaver CS4 - Illustrated Unit Objectives Insert an AP divInsert an AP div Position and size an AP elementPosition and size an AP element Add content to an AP elementAdd content to an AP element Use the AP Elements panelUse the AP Elements panel Adobe Dreamweaver CS4 - Illustrated Understanding CSS Layouts Use Cascading Style Sheets vs. tables for page layoutUse Cascading Style Sheets vs. tables for page layout Using Dreamweaver CSS page layoutsUsing Dreamweaver CSS page layouts Using div tags for other purposesUsing div tags for other purposes Using AP div tagsUsing AP div tags Adobe Dreamweaver CS4 - Illustrated Understanding CSS Layouts Adobe Dreamweaver CS4 - Illustrated Clues to Use Using Dreamweaver sample pagesUsing Dreamweaver sample pages Use Welcome Screen or New Document dialog box to create several different types of pagesUse Welcome Screen or New Document dialog box to create several different types of pages Predesigned CSS page layoutsPredesigned CSS page layouts Framesets are documents that contain the instructions that tell a browser how to lay out a set of frames showing multiple individual documents on a pageFramesets are documents that contain the instructions that tell a browser how to lay out a set of frames showing multiple individual documents on a page Customize sample page to meet your needsCustomize sample page to meet your needs Adobe Dreamweaver CS4 - Illustrated Creating a Page Using CSS Layouts Open The Striped Umbrella Web siteOpen The Striped Umbrella Web site Click File on the Application bar (Win) or Menu bar (Mac), click New, verify that Blank Page is highlighted in the left section, click HTML in the Page Type category if necessary, then click 1 column, fixed, centered, header and footer in the Layout categoryClick File on the Application bar (Win) or Menu bar (Mac), click New, verify that Blank Page is highlighted in the left section, click HTML in the Page Type category if necessary, then click 1 column, fixed, centered, header and footer in the Layout category Click the Attach Style Sheet button in the lower- right corner of the dialog box, then click Browse in the Attach External Style Sheet dialog boxClick the Attach Style Sheet button in the lower- right corner of the dialog box, then click Browse in the Attach External Style Sheet dialog box Adobe Dreamweaver CS4 - Illustrated Creating a Page Using CSS Layouts Click the su_styles.css file in the Select Style Sheet File dialog box, click OK (Win) or click Choose (Mac), then click OK to close the information box about the document-relative pathClick the su_styles.css file in the Select Style Sheet File dialog box, click OK (Win) or click Choose (Mac), then click OK to close the information box about the document-relative path Verify that the Add as: Link option button is selected in the Attach External Style Sheet dialog box, then click OKVerify that the Add as: Link option button is selected in the Attach External Style Sheet dialog box, then click OK Click Create in the New Document dialog box, open the CSS Styles panel if necessary, then expand the two style sheets: and su_styles.cssClick Create in the New Document dialog box, open the CSS Styles panel if necessary, then expand the two style sheets: and su_styles.css Adobe Dreamweaver CS4 - Illustrated Creating a Page Using CSS Layouts Adobe Dreamweaver CS4 - Illustrated Creating a Page Using CSS Layouts Adobe Dreamweaver CS4 - Illustrated Clues to Use Understanding column width optionsUnderstanding column width options Predefined CSS layouts are classified in several waysPredefined CSS layouts are classified in several ways Choose a layout with one, two, or three columnsChoose a layout with one, two, or three columns Choose a header, footer, or bothChoose a header, footer, or both Choose how column widths are calculatedChoose how column widths are calculated Elastic, fixed, liquid, or hybrid layoutsElastic, fixed, liquid, or hybrid layouts Adobe Dreamweaver CS4 - Illustrated Adding Content to CSS Layout Blocks Open The Striped Umbrella index page and select the paragraph that begins with WelcomeOpen The Striped Umbrella index page and select the paragraph that begins with Welcome Copy the selected text, then switch to the new, unsaved pageCopy the selected text, then switch to the new, unsaved page Select the content between the Header and Footer in the main section of the page, then paste the copied text in its placeSelect the content between the Header and Footer in the main section of the page, then paste the copied text in its place Display the index page, then select and copy the contact, copyright, and last updated informationDisplay the index page, then select and copy the contact, copyright, and last updated information Display the new, unsaved page, then paste the contact, copyright, and last updated information in the footer section, replacing the placeholder textDisplay the new, unsaved page, then paste the contact, copyright, and last updated information in the footer section, replacing the placeholder text Adobe Dreamweaver CS4 - Illustrated Adding Content to CSS Layout Blocks Display the index page and copy both the banner and navigation barDisplay the index page and copy both the banner and navigation bar Display the new, unsaved page and paste the banner and navigation bar into the header section, replacing the placeholder textDisplay the new, unsaved page and paste the banner and navigation bar into the header section, replacing the placeholder text Display the index page and close itDisplay the index page and close it Place the insertion point to the left side of the banner on the new, untitled page, click the Format list arrow on the HTML Property inspector, then click NonePlace the insertion point to the left side of the banner on the new, untitled page, click the Format list arrow on the HTML Property inspector, then click None Save the new, untitled page as index.html in The Striped Umbrella root folder, overwriting the original index pageSave the new, untitled page as index.html in The Striped Umbrella root folder, overwriting the original index page Adobe Dreamweaver CS4 - Illustrated Adding Content to CSS Layout Blocks Adobe Dreamweaver CS4 - Illustrated Adding Content to CSS Layout Blocks Adobe Dreamweaver CS4 - Illustrated Adding Content to CSS Layout Blocks Adobe Dreamweaver CS4 - Illustrated Editing Content in CSS Layout Blocks Place the insertion point in front of the navigation bar, press and hold [Shift], then click immediately after the navigation bar to select itPlace the insertion point in front of the navigation bar, press and hold [Shift], then click immediately after the navigation bar to select it Click the Align list arrow in the Property inspector, then click CenterClick the Align list arrow in the Property inspector, then click Center Place the insertion point in front of the word Welcome in the first line, press and hold [Shift], then click at the end of the paragraphPlace the insertion point in front of the word Welcome in the first line, press and hold [Shift], then click at the end of the paragraph Adobe Dreamweaver CS4 - Illustrated Editing Content in CSS Layout Blocks Click the Format list arrow in the Property inspector, click None, then deselect the textClick the Format list arrow in the Property inspector, click None, then deselect the text Move the mouse pointer over the bottom of the header block, click the yellow border to select the block, then move the pointer along the block border until the floating window appearsMove the mouse pointer over the bottom of the header block, click the yellow border to select the block, then move the pointer along the block border until the floating window appears Save your workSave your work Adobe Dreamweaver CS4 - Illustrated Editing Content in CSS Layout Blocks Adobe Dreamweaver CS4 - Illustrated Editing Content in CSS Layout Blocks Adobe Dreamweaver CS4 - Illustrated Clues to Use Using Visual Aids as design toolsUsing Visual Aids as design tools Several options for viewing your layout blocks in Design view:Several options for viewing your layout blocks in Design view: Show or hide outlinesShow or hide outlines Temporarily assign different background colorsTemporarily assign different background colors View CSS Layout Box ModelView CSS Layout Box Model To change these options, use the View, Visual Aids menu, and then select or deselect the appropriate menu choiceTo change these options, use the View, Visual Aids menu, and then select or deselect the appropriate menu choice Adobe Dreamweaver CS4 - Illustrated Editing CSS Layout Properties Click the oneColFixCtrHdr #header style in the CSS Styles panel to select itClick the oneColFixCtrHdr #header style in the CSS Styles panel to select it Click to select the background color #DDDDDD in the CSS Styles palette properties section, type #FFF as shown in Figure G-12, then press [Enter] (Win) or [return] (Mac)Click to select the background color #DDDDDD in the CSS Styles palette properties section, type #FFF as shown in Figure G-12, then press [Enter] (Win) or [return] (Mac) Repeat Steps 1 and 2 to change the #footer style to whiteRepeat Steps 1 and 2 to change the #footer style to white Select the body tag in the CSS Styles panelSelect the body tag in the CSS Styles panel Click to select the background color #666666, type #FFF, then press [Enter] (Win) or [return] (Mac)Click to select the background color #666666, type #FFF, then press [Enter] (Win) or [return] (Mac) Adobe Dreamweaver CS4 - Illustrated Editing CSS Layout Properties Add the page title The Striped Umbrella Beach Resort and Spa, Ft. Eugene, Florida in the title text box on the Document toolbarAdd the page title The Striped Umbrella Beach Resort and Spa, Ft. Eugene, Florida in the title text box on the Document toolbar Select the contact information in the footer, then remove the italic setting in the HTML Property inspectorSelect the contact information in the footer, then remove the italic setting in the HTML Property inspector Select the oneColFixCtrHdr #footer style, click the Edit Rule button at the bottom of the CSS Styles palette, select the Type category, change the Font-family to Arial, Helvetica, sans-serif, the Font-size to x-small, and the Font-style to italic, then click OKSelect the oneColFixCtrHdr #footer style, click the Edit Rule button at the bottom of the CSS Styles palette, select the Type category, change the Font-family to Arial, Helvetica, sans-serif, the Font-size to x-small, and the Font-style to italic, then click OK Save your work, preview the page in the browser, then close the browserSave your work, preview the page in the browser, then close the browser Adobe Dreamweaver CS4 - Illustrated Editing CSS Layout Properties Adobe Dreamweaver CS4 - Illustrated Editing CSS Layout Properties Adobe Dreamweaver CS4 - Illustrated Inserting an AP Div Click View on the Application bar (Win) or Menu bar (Mac), point to Rulers, click Show (if necessary), place the mouse pointer over the horizontal ruler, then drag a horizontal guide from the top ruler near the 250 pixel mark on the vertical rulerClick View on the Application bar (Win) or Menu bar (Mac), point to Rulers, click Show (if necessary), place the mouse pointer over the horizontal ruler, then drag a horizontal guide from the top ruler near the 250 pixel mark on the vertical ruler Click the Layout category on the Insert panel, then click the Draw AP Div buttonClick the Layout category on the Insert panel, then click the Draw AP Div button Using Figure G-15 as a guide, drag a rectangle in the middle of the home page, under the guide, that is approximately 315 pixels wide and 130 pixels tallUsing Figure G-15 as a guide, drag a rectangle in the middle of the home page, under the guide, that is approximately 315 pixels wide and 130 pixels tall Click the AP Div icon above the AP element to select itClick the AP Div icon above the AP element to select it Adobe Dreamweaver CS4 - Illustrated Inserting an AP Div With the AP div selected, select apDiv1 in the CSS-P Element text box in the Property inspector, type contest, then press [Enter] (Win) or [return] (Mac)With the AP div selected, select apDiv1 in the CSS-P Element text box in the Property inspector, type contest, then press [Enter] (Win) or [return] (Mac) Verify that is selected in the Tag selector, click the Overflow list arrow in the Property inspector, then click autoVerify that is selected in the Tag selector, click the Overflow list arrow in the Property inspector, then click auto Click the Vis list arrow, then click visibleClick the Vis list arrow, then click visible Compare your screen to Figure G-16, then save your workCompare your screen to Figure G-16, then save your work Adobe Dreamweaver CS4 - Illustrated Inserting an AP Div Adobe Dreamweaver CS4 - Illustrated Inserting an AP Div Adobe Dreamweaver CS4 - Illustrated Clues to Use Understanding AP element codeUnderstanding AP element code Code split between head section and body sectionCode split between head section and body section Head section contains code that sets the position, size, overflow, and formattingHead section contains code that sets the position, size, overflow, and formatting Body section contains code for the div tag ID and for the div tag contentBody section contains code for the div tag ID and for the div tag content For external style sheets, the code linking the style sheet to the page resides in the head sectionFor external style sheets, the code linking the style sheet to the page resides in the head section Adobe Dreamweaver CS4 - Illustrated Positioning and Sizing an AP Element Click the AP div border to select the AP div element if necessaryClick the AP div border to select the AP div element if necessary Type 420px in the L text box in the CSS-P Element section of the Property inspector, then press [Enter] (Win) or [return] (Mac)Type 420px in the L text box in the CSS-P Element section of the Property inspector, then press [Enter] (Win) or [return] (Mac) Type 260px in the T text box, then press [Enter] (Win) or [return] (Mac)Type 260px in the T text box, then press [Enter] (Win) or [return] (Mac) Type 200px in the W text box, then press [Tab]Type 200px in the W text box, then press [Tab] Type 175px in the H text box, then press [Tab]Type 175px in the H text box, then press [Tab] Save your work, then compare your screen to Figure G-18Save your work, then compare your screen to Figure G-18 Adobe Dreamweaver CS4 - Illustrated Positioning and Sizing an AP Element Adobe Dreamweaver CS4 - Illustrated Positioning and Sizing an AP Element Adobe Dreamweaver CS4 - Illustrated Clues to Use Understanding the z-index propertyUnderstanding the z-index property The z-index property is used to specify the vertical stacking order of multiple AP elements on a pageThe z-index property is used to specify the vertical stacking order of multiple AP elements on a page Objects with higher z-index properties will appear on top of those with lower z- index propertiesObjects with higher z-index properties will appear on top of those with lower z- index properties Objects are assigned a default value beginning with 1Objects are assigned a default value beginning with 1 Adobe Dreamweaver CS4 - Illustrated Adding Content to an AP Element Select the AP div if necessary, then click the Browse for File icon next to the Bg image text box in the Property inspectorSelect the AP div if necessary, then click the Browse for File icon next to the Bg image text box in the Property inspector Navigate to the drive and folder where your Unit G Data Files are stored, open the assets folder, then double-click contestants_bak.jpgNavigate to the drive and folder where your Unit G Data Files are stored, open the assets folder, then double-click contestants_bak.jpg Compare your screen to Figure G-19Compare your screen to Figure G-19 Refresh the Files panel to verify that contestants_bak.jpg was copied to the assets folder of the Web siteRefresh the Files panel to verify that contestants_bak.jpg was copied to the assets folder of the Web site Click inside the AP element to set the insertion point, then press [Shift][Enter] (Win) or [Shift][return] (Mac) to enter a line breakClick inside the AP element to set the insertion point, then press [Shift][Enter] (Win) or [Shift][return] (Mac) to enter a line break Adobe Dreamweaver CS4 - Illustrated Adding Content to an AP Element Type Sand Castle Contest July 4, press [Shift][Enter] (Win) or [Shift][return] (Mac), then type Bring your buddies!Type Sand Castle Contest July 4, press [Shift][Enter] (Win) or [Shift][return] (Mac), then type Bring your buddies! Select the contest style in the CSS Styles panel, then click the Edit Rule buttonSelect the contest style in the CSS Styles panel, then click the Edit Rule button Click the Type category, as shown in Figure G-20, change the Font-family to Arial, Helvetica, sans-serif, the Font- size to small, the Font-weight to bold, the Color to #006 then click the Apply buttonClick the Type category, as shown in Figure G-20, change the Font-family to Arial, Helvetica, sans-serif, the Font- size to small, the Font-weight to bold, the Color to #006 then click the Apply button Click the Block category, change the Text-align setting to center, then click OKClick the Block category, change the Text-align setting to center, then click OK Save your work, preview the page in your browser, compare your screen with Figure G-21, close your browser, then Exit (Win) or Quit (Mac) the Dreamweaver programSave your work, preview the page in your browser, compare your screen with Figure G-21, close your browser, then Exit (Win) or Quit (Mac) the Dreamweaver program Adobe Dreamweaver CS4 - Illustrated Adding Content to an AP Element Adobe Dreamweaver CS4 - Illustrated Adding Content to an AP Element Adobe Dreamweaver CS4 - Illustrated Clues to Use Understanding the Overflow propertyUnderstanding the Overflow property Set the Overflow property to direct the browser to display or hide extra content that will not fit in an AP elementSet the Overflow property to direct the browser to display or hide extra content that will not fit in an AP element VisibleVisible HiddenHidden ScrollScroll AutoAuto Adobe Dreamweaver CS4 - Illustrated Using the AP Elements Panel Change AP element order and namesChange AP element order and names Select AP elementsSelect AP elements Control visibilityControl visibility Control the visible stacking order and overlapsControl the visible stacking order and overlaps Change the nesting status of nested AP elementsChange the nesting status of nested AP elements Adobe Dreamweaver CS4 - Illustrated Using the AP Elements Panel Adobe Dreamweaver CS4 - Illustrated Using the AP Elements Panel Adobe Dreamweaver CS4 - Illustrated Unit Summary Understand CSS layoutsUnderstand CSS layouts Create a page using CSS layoutsCreate a page using CSS layouts Add content to CSS layout blocksAdd content to CSS layout blocks Edit content in CSS layout blocksEdit content in CSS layout blocks Edit CSS layout propertiesEdit CSS layout properties Adobe Dreamweaver CS4 - Illustrated Unit Summary Insert an AP divInsert an AP div Position and size an AP elementPosition and size an AP element Add content to an AP elementAdd content to an AP element Use the AP Elements panelUse the AP Elements panel Adobe Dreamweaver CS4 - Illustrated