Transcript Slide 1

Adobe Dreamweaver CS4 - Illustrated
Using CSS
to Lay Out Pages
Unit Objectives
•
•
•
•
•
Understand CSS layouts
Create a page using CSS layouts
Add content to CSS layout blocks
Edit content in CSS layout blocks
Edit CSS layout properties
Adobe Dreamweaver CS4 - Illustrated
Unit Objectives
•
•
•
•
Insert an AP div
Position and size an AP element
Add content to an AP element
Use the AP Elements panel
Adobe Dreamweaver CS4 - Illustrated
Understanding CSS Layouts
• Use Cascading Style Sheets vs.
tables for page layout
• Using Dreamweaver CSS page
layouts
• Using div tags for other purposes
• Using AP div tags
Adobe Dreamweaver CS4 - Illustrated
Understanding CSS Layouts
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Using Dreamweaver sample pages
• Use Welcome Screen or New Document
dialog box to create several different types of
pages
• Predesigned 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 page
• Customize sample page to meet your needs
Adobe Dreamweaver CS4 - Illustrated
Creating a Page Using CSS
Layouts
•
•
•
Open 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 category
Click the Attach Style Sheet button in the lowerright 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 path
Verify 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: <style> 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 options
• Predefined CSS layouts are classified
in several ways
• Choose a layout with one, two, or three
columns
• Choose a header, footer, or both
• Choose how column widths are calculated
• Elastic, 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 “Welcome”
Copy 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 place
Display 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 text
Adobe Dreamweaver CS4 - Illustrated
Adding Content to CSS Layout
Blocks
•
•
•
•
•
Display 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 text
Display 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 None
Save 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 it
• Click 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
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 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 appears
• Save 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 tools
• Several options for viewing your layout
blocks in Design view:
• Show or hide outlines
• Temporarily assign different background
colors
• View CSS Layout Box Model
• To 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 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)
Repeat Steps 1 and 2 to change the #footer style
to white
Select the body tag in the CSS Styles panel
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 toolbar
Select 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 OK
Save 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 ruler
Click 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 tall
Click 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)
• Verify that <div#contest> 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 visible
• Compare 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 code
• Code split between head section and body
section
• Head 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 content
• For 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 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 260px in the T text box, then press [Enter]
(Win) or [return] (Mac)
Type 200px in the W 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-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 property
• The 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 zindex properties
• Objects 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 inspector
Navigate 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-19
Refresh 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 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!
Select 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 Fontsize 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 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 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 property
• Set the Overflow property to direct the
browser to display or hide extra content
that will not fit in an AP element
•
•
•
•
Visible
Hidden
Scroll
Auto
Adobe Dreamweaver CS4 - Illustrated
Using the AP Elements Panel
• Change AP element order and
names
• Select AP elements
• Control visibility
• Control the visible stacking order and
overlaps
• Change 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 layouts
Create a page using CSS layouts
Add content to CSS layout blocks
Edit content in CSS layout blocks
Edit CSS layout properties
Adobe Dreamweaver CS4 - Illustrated
Unit Summary
•
•
•
•
Insert an AP div
Position and size an AP element
Add content to an AP element
Use the AP Elements panel
Adobe Dreamweaver CS4 - Illustrated