Tutorial 4: Using CSS for Page
Layout
Tutorial 4: Using CSS for Page Layout 2
ObjectivesSession 4.1
• Explore CSS layout
• Compare types of floating layouts
• Examine code for CSS layouts
• View prebuilt CSS layout pages
• Insert floating divs and nest divs
• Duplicate pages
Session 4.2
• Draw AP divs
• Select, resize, and move AP divs
• Add content to AP divs
• Adjust AP div attributes
• Examine code for AP div tags
• Modify AP div stacking order
• Align and position AP divs
• Nest AP divs
Tutorial 4: Using CSS for Page Layout 3
Understanding Layout Techniques• Understanding how Web design has evolved will
give you a better understanding of current layout techniques
• Traditional layout techniques– Tables– Frames
• Current layout techniques– Div tags– Cascading Style Sheets (CSS) styles
Tutorial 4: Using CSS for Page Layout 4
Traditional HTML Layout Techniques• Tables (grid structure)
– Provide flexibility in arranging content– Resulting HTML code is cumbersome– Still sometimes used to structure content
• Frames– Divide a Web page into multiple HTML documents– Each frame contains a single HTML document
with its own content and potentially its own scroll bars
– Use a frameset to hold Web page together– Outdated; rarely used
Tutorial 4: Using CSS for Page Layout 5
Current CSS Layout Techniques• Div tags
– Placed around text, images, and page elements to structure and position the chunks of content
– Create transparent, block-level container in a Web page to hold content
– Almost any other tag can be placed in in a div tag• CSS styles
– Can be added to a div tag– Adjust page layout by creating styles to position
divs• Challenges: different browsers, monitor sizes, or
screen resolutions
Tutorial 4: Using CSS for Page Layout 6
Positioning Div Tags in Web Pages• Absolute positioning (AP)
– Specifies exact pixel in browser window where upper-left corner of div tag will be placed
– Difficult to use effectively for page layout because of differences in screen resolution
• Floating positioning– Create flexible designs that vary in size and
position in response to monitor size and screen resolution
– Used more frequently for page layout
Tutorial 4: Using CSS for Page Layout 7
Comparing Types of Floating LayoutsFixed width
• Sets specific size for pages, regardless of user’s screen resolution
Liquid (or fluid)
• Adjusts to fit user’s browser width• Maximizes use of browser real estate• Limits control over design elements (e.g.,
symmetry, white space)
Elastic • Fixed-width designs that use ems instead of pixels as the unit for div and text styles
• Enables text and page layout to change size when user’s browser displays font size changes
• More accessible for users with assistive devices or impaired vision
Tutorial 4: Using CSS for Page Layout 8
Exploring CSS Layout Code• Dreamweaver adds comments (i.e., notes) to code of HTML
pages that are not read or displayed by browsers– Help designers understand what the code is used for and
how it works– Help with recall if pages need editing in the future– Help distinguish one closing div tag from another and
ensure that tags are in the right order in the page– Parent-child tag relationship
• Two types of comments– Single line span only one line: <!--comment-->– Multiline span more than one line: /* comment */
Tutorial 4: Using CSS for Page Layout 9
Exploring CSS Layout Code• Viewing the prebuilt CSS elastic layout page• New Document dialog box
Tutorial 4: Using CSS for Page Layout 10
Exploring CSS Layout Code• Viewing the prebuilt CSS elastic layout page• Pre-built CSS page with an elastic layout
Tutorial 4: Using CSS for Page Layout 11
Exploring CSS Layout Code• Viewing prebuilt CSS fluid layout pages• Figure 4-5 Prebuilt CSS page with a fluid layout
Tutorial 4: Using CSS for Page Layout 12
Exploring CSS Layout Code• Viewing prebuilt CSS fixed-width layout pages• Pre-built CSS page with a fixed-width layout
Tutorial 4: Using CSS for Page Layout 13
Exploring CSS Layout Code• Viewing prebuilt CSS fixed-width layout pages• Selected div tag in Code view
Tutorial 4: Using CSS for Page Layout 14
Planning the CSS Layout• Determine which CSS elements the pages require• Use ID type styles
– Each page will have only one heading, a content area, and a footer area
Tutorial 4: Using CSS for Page Layout 15
Planning the CSS Layout• Layout of the NextBest Fest site
Tutorial 4: Using CSS for Page Layout 16
Determining Div Tags Display Order• Div tags appear in the page in the order in which
they appear in the code– Place pointer in desired location in Document
window before inserting new div tag• Place container or wrapper div tags around other
divs and elements in the page
Tutorial 4: Using CSS for Page Layout 17
Creating Common CSS Style Attributes for Layout• Create CSS styles and apply them to a div that you
want to have specific attributes or characteristics• Most useful attributes for layout are in the Box
category– Width– Height– Float
• Develop a flexible naming system
– Clear
– Padding
– Margin
Tutorial 4: Using CSS for Page Layout 18
Inserting Div Tags• Choose where, in the code, the tag is placed
– At insertion point– Before tag– After start of tag– Before end of tag– After tag
• Can apply existing class or ID style to the div• Can create a new CSS rule
Tutorial 4: Using CSS for Page Layout 19
Inserting Div Tags• Insert Div Tag dialog box
Tutorial 4: Using CSS for Page Layout 20
Inserting Div Tags• Div tag in the home page
Tutorial 4: Using CSS for Page Layout 21
Adding Comments to the Code in HTML Pages• Recommended for:
– Creating complex code that might need to be edited later
– Working in a team environment
Tutorial 4: Using CSS for Page Layout 22
Adding Comments to the Code in HTML Pages• Comment added to the closing content div tag
Tutorial 4: Using CSS for Page Layout 23
Duplicating Pages• Saves time• Assures that basic page structure is the same for all
pages in the site
Tutorial 4: Using CSS for Page Layout 24
Editing the Style Sheet from the CSS Styles Panel• Any change made in one place will affect all pages in
the site
Tutorial 4: Using CSS for Page Layout 25
Using Absolutely Positioned Div Tags• Positioned with accuracy and reliability• Remain in place relative to page margins regardless
of size of browser window• Can be stacked on top of one another so that
content overlaps• Can be animated, made visible or invisible, and have
stacking order changed• Can be customized using CSS styles
Tutorial 4: Using CSS for Page Layout 26
Drawing AP Divs• AP div drawn in the home page
Tutorial 4: Using CSS for Page Layout 27
Selecting, Resizing, and Moving an AP Div• Div must be selected before it can be repositioned
or resized• Use resize handles to change dimensions of AP div
to fit the content• Reordering or moving
– X coordinate: left position of AP div– Y coordinate: top position of AP div– Z-index number: stacking order– Rulers and guides enable easy placement
Tutorial 4: Using CSS for Page Layout 28
Selecting, Resizing, and Moving an AP Div• AP div selected in the home page
Tutorial 4: Using CSS for Page Layout 29
Selecting, Resizing, and Moving an AP Div• Repositioned AP div
Tutorial 4: Using CSS for Page Layout 30
Adding Content to an AP Div• Uses same methods used to insert content directly
into Web page• Can move content from the page to an AP div by
dragging it• AP divs must be active to accept content• Can contain almost any type of content: text,
graphics, forms, multimedia
Tutorial 4: Using CSS for Page Layout 31
Adding Content to an AP Div• AP div with text content
Tutorial 4: Using CSS for Page Layout 32
Adding Content to an AP Div• AP div width updated in the Property inspector
Tutorial 4: Using CSS for Page Layout 33
Adjusting AP Div Attributes• Create CSS style with desired attribute values and
attach that style to AP divs, or…• Use Property Inspector, which includes these
attributes: – CSS-P Element– L and T– W and H– Z-Index– Vis
– Bg image
– Bg color
– Class
– Overflow
– Clip
Tutorial 4: Using CSS for Page Layout 34
Examining the Code for AP Div Tags• When an AP div is created, Dreamweaver places an
ID style in the head of the page (not the style sheet) that defines:– Type of positioning– Left and top coordinates of AP div– Width and height– Overflow value– Z-index number
• Sometimes useful to create external styles to define AP div positioning
Tutorial 4: Using CSS for Page Layout 35
Examining the Code for AP Div Tags• AP div in Split view
Tutorial 4: Using CSS for Page Layout 36
Examining the Code for AP Div Tags• Code for the AP div’s ID style
Tutorial 4: Using CSS for Page Layout 37
Modifying AP Divs• Change stacking order of AP divs by changing z-
index number• Align AP divs to each other or to an invisible grid• Nest one AP div inside another
Tutorial 4: Using CSS for Page Layout 38
Adjusting Stacking Order• AP Elements panel
Tutorial 4: Using CSS for Page Layout 39
Adjusting Stacking Order• AP div stacking order changed
Tutorial 4: Using CSS for Page Layout 40
Aligning AP Divs• Select an AP div, press and hold Shift key, then click
other AP divs to align• Last AP div selected remains stationary; other AP
divs align to it• AP divs top aligned
Tutorial 4: Using CSS for Page Layout 41
Positioning Elements Using the Grid• Show or hide grid (default is for grid to be hidden)• Change size of grid squares for more precise
alignment• Use Grid Setting dialog box to change appearance of
grid
Tutorial 4: Using CSS for Page Layout 42
Positioning Elements Using the Grid• Grid in the Document window
Tutorial 4: Using CSS for Page Layout 43
Creating Nested AP Divs• Used to group AP divs
– Move together– Share attributes with parent
• Nesting refers to underlying code, not physical position
Tutorial 4: Using CSS for Page Layout 44
Creating Nested AP Divs• Nested available AP div repositioned
Tutorial 4: Using CSS for Page Layout 45
Updating the Web Site on the Remote Server• Upload every page of the site• Include dependent files so that new graphics and
CSS styles are uploaded• Preview the site on the Web as final review of
changes