Transcript DWCS5 Tutorial 04x

Tutorial 4
Using CSS for Page Layout
Objectives
• Session 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
New Perspectives onAdobe Dreamweaver CS5
2
Objectives
• 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
New Perspectives on Adobe Dreamweaver CS5
3
Objectives
– Align and position AP divs
– Nest AP divs
– Inspect code with CSS inspect
New Perspectives on Adobe Dreamweaver CS5
4
Session 4.1
Understanding Layout Techniques
• Traditional HTML Layout Techniques
– Text and images were aligned to the left side of the page
– Tables were used to provide horizontal and vertical
structure for page content
– Frames were also used for structure
• Divided a Web page into multiple HTML documents
• Each frame contained a single HTML document
• A Web page with frames was held together by a
frameset
• This method is outdated and rarely used today
New Perspectives on Adobe Dreamweaver CS5
5
Understanding Layout Techniques
• Current CSS Layout Techniques
– CSS Layout is the current standard
– Uses div tags and Cascading Style Sheets
• Div tags create a transparent, block-level container in
a Web page to hold content
• Almost any other tag can be placed in a div tag
• Adjust page layouts by creating styles that position
divs in the page
New Perspectives on Adobe Dreamweaver CS5
6
Positioning Div Tags in Web Pages
• Two General Methods
– Absolute positioning (AP)
• You can specify the exact pixel in the browser in which
the upper-left corner of the div tag will be placed
– Floating positioning
• You can create flexible designs that vary in size and
position in response to the user’s monitor settings
• Most common method
New Perspectives on Adobe Dreamweaver CS5
7
Positioning Div Tags in Web Pages
• Three Types of Floating Layouts
– Fixed-width
• Can set a specific size for the pages
• Pages display at the specified width in the browser
regardless of user’s screen resolution
New Perspectives on Adobe Dreamweaver CS5
8
Positioning Div Tags in Web Pages
• Display size depends on the target audience
–Most users have a screen resolution of at least
800 x 600
–Pages created for this resolution should
have a width of 760 pixels to accommodate
browser chrome
»Browser chrome refers to the borders of the
Web browser including frames, menus,
toolbars, and scroll bar
New Perspectives on Adobe Dreamweaver CS5
9
Positioning Div Tags in Web Pages
• Display size depends on the target audience
–Also commonly used is 1024 x 768 (and higher)
–Pages created for this resolution should
have a width of 955 pixels to accommodate
browser chrome
New Perspectives on Adobe Dreamweaver CS5
10
Positioning Div Tags in Web Pages
– Liquid layouts
• Adjust to fit the user’s browser width
• Maximize use of space, but designers have less
control over the look of the pages
– Elastic layouts
• Fixed width designs
• Use an em instead of pixels
–An em is a unit of measurement relative to the size
of the font
–Enables text and layout to change size when user
changes browser size
New Perspectives on Adobe Dreamweaver CS5
11
Exploring CSS Layout Code
• Prebuilt pages are a good place to start understanding CSS
layout code (File – New)
– Dreamweaver adds comments to assist designers
• Notes added to the HTML code that are not read or
displayed by browsers
• Help designers understand what the code is used for
and how it works
New Perspectives on Adobe Dreamweaver CS5
12
Exploring CSS Layout Code
<!--comment-->
Code for a single line comment
/* comment */
Code for a multiline comment
New Perspectives on Adobe Dreamweaver CS5
13
Exploring CSS Layout Code
• Dreamweaver adds a comment before each closing div tag
• All closing div tags look the same in the code: </div>
• The order of the closing tags makes a difference in the
way code works
• When CSS layouts are created with multiple divs in
the page, Dreamweaver does not add comments to
the code
New Perspectives on Adobe Dreamweaver CS5
14
Exploring CSS Layout Code
• Prebuilt pages use good coding practice to make the code
easier to understand
– Parent-child relationship
• A tag contained in another tag
• Outside container tag is the parent
• Inside container tag is the child
• Child tags usually indented
New Perspectives on Adobe Dreamweaver CS5
15
Exploring CSS Layout Code
New Perspectives on Adobe Dreamweaver CS5
16
Planning the CSS Layout
• First determine which CSS elements the pages require
• Most pages need three areas in each page:
– Heading area
– Content area
– Footer area
New Perspectives on Adobe Dreamweaver CS5
17
Planning the CSS Layout
New Perspectives on Adobe Dreamweaver CS5
18
Planning the CSS Layout
• Determining Div Tags Display Order
– Div tags appear in the order in which they appear in the
page’s code
– As each new div is added to page, create a comment to
help identify it more easily
New Perspectives on Adobe Dreamweaver CS5
19
Planning the CSS Layout
• Using Container Div Tags
– Regular div tags that are placed around the other divs
and elements in the page
– Often used to create fixed-width pages
New Perspectives on Adobe Dreamweaver CS5
20
Planning the CSS Layout
• Creating Common CSS Style Attributes for Layout
– Style attributes most helpful for layout are found in the
Box category
• Width
• Height
• Float
• Clear
• Padding
• Margin
New Perspectives on Adobe Dreamweaver CS5
21
Inserting Div Tags
• Insertion Options for New Div Tags
– At insertion point
– Before or after tag
– After start of tag
– Before end of tag
• Watch the status bar to see which tag is selected
New Perspectives on Adobe Dreamweaver CS5
22
Inserting Div Tags
Select the TAG in the status bar, then
Go to the Insert Panel, choose the Layout category, then
Insert Div Tag
New Perspectives on Adobe Dreamweaver CS5
23
Inserting Div Tags
• Adding Comments to the Code in HTML Pages
– When creating complex code, it is good practice to
include comments to the code
• Helpful to others who might view the code
– This use of comments is similar to the comments
inserted by Dreamweaver in the prebuilt pages
New Perspectives on Adobe Dreamweaver CS5
24
Inserting Div Tags
New Perspectives on Adobe Dreamweaver CS5
25
Duplicating Pages
• Duplicating pages saves time and ensures that the basic
structure is the same for all pages in the site
– The duplicate option is found on the Edit menu of the
Files panel
New Perspectives on Adobe Dreamweaver CS5
26
Editing the Style Sheet
from the CSS Styles Panel
• An external style sheet is connected to all pages of a Web
site
• Any change made in one place will affect all the pages in a
site
• Use the CSS Styles panel to make desired edits
New Perspectives on Adobe Dreamweaver CS5
27
Session 4.2 – Using
Absolutely Positioned Div Tags
• Drawing AP Divs
– Div tags can be positioned anywhere on screen
– They will remain in place relative to the top and left
margins of the page
– AP divs can be stacked so that their content overlaps
– They can be animated, made visible, or made invisible
– Draw an AP div in Design view
New Perspectives on Adobe Dreamweaver CS5
28
Selecting, Resizing, and
Moving an AP Div
• Must select the div before moving or resizing
– Use resize handles to change dimensions
– Divs may be reordered
• Each is positioned in a page using x, y, and z
coordinates
• X and y coordinates correspond to AP div’s Left and
Top positions
• Z coordinate (also called z-index number) determines
the stacking order
New Perspectives on Adobe Dreamweaver CS5
29
Selecting, Resizing, and
Moving an AP Div
– Rulers and guides help place divs in specific positions
• Rulers provide markings in pixels, inches, or
centimeters
• Guides are lines that can be dragged from the
horizontal and vertical rulers into the Document
window to help place and align objects
New Perspectives on Adobe Dreamweaver CS5
30
Adding Content to an AP Div
• AP divs can contain many different types of content
– Text
– Forms
– Multimedia
– Other divs
– Graphics
• Add content in the same ways content is added to Web
pages
• Existing content can be dragged into an AP div
– AP div must be active to accept content
– AP div position is absolute
New Perspectives on Adobe Dreamweaver CS5
31
Adding Content to an AP Div
New Perspectives on Adobe Dreamweaver CS5
32
Adjusting AP Div Attributes
• Two Methods for Adjusting AP Div Attributes
– Property inspector
– Create a CSS style with the desired attribute values and
attach the style to AP divs as desired
• Attributes of the Property inspector (when AP div is
selected)
– CSS-P Element
• Unique name for the div
New Perspectives on Adobe Dreamweaver CS5
33
Adjusting AP Div Attributes
– L and T
• Horizontal (L) and vertical (T) positions
– W and H
• Horizontal (W) and vertical (H) dimensions
– Z-Index
• Number indicating stacking order
– Vis
• Visibility options
New Perspectives on Adobe Dreamweaver CS5
34
Adjusting AP Div Attributes
– Bg image
• Path to the background image file for the AP div
– Bg color
• Hexadecimal color code for the background color of
the AP div
– Class
• List of created styles
New Perspectives on Adobe Dreamweaver CS5
35
Adjusting AP Div Attributes
– Overflow
• Option for how the AP div appears in browser window
if its content exceeds its specified size
– Clip
• Portion of the AP div visible in a browser
New Perspectives on Adobe Dreamweaver CS5
36
Examining the Code for AP Div Tags
• When an AP div is created, Dreamweaver places an ID style
in the head of the page
– Positioned in head of the page rather than in the style
sheet because absolute positioning is so specific that it is
generally applied to only one element in a site
New Perspectives on Adobe Dreamweaver CS5
37
Examining Code for AP Div Tags
<style type=“text/css”>
#TICKETS {
position:absolute;
left:20px;
top:20px;
width:130px
height:75px
z-index:1;
overflow: visible;
}
</style>
New Perspectives on Adobe Dreamweaver CS5
SAMPLE CODE
38
Modifying AP Divs
• Adjusting Stacking Order
– AP divs can be stacked or overlapped
– Stacking enables the creation of more interesting and
sophisticated layouts
– Each new AP div is assigned a consecutive z-index
number, beginning with 1
• On screen, AP divs with higher z-index numbers
appear in front of those with lower z-index numbers
New Perspectives on Adobe Dreamweaver CS5
39
Modifying AP Divs
New Perspectives on Adobe Dreamweaver CS5
40
Modifying AP Divs
• Aligning AP Divs
– AP divs can be aligned in several ways
• Left
• Right
• Top
• Bottom of another AP div
– Use the Shift key to select multiple divs and then select
desired alignment
New Perspectives on Adobe Dreamweaver CS5
41
Modifying AP Divs
• Positioning Elements Using the Grid
– Grid
• A series of parallel horizontal and vertical lines that
overlap to create equal-sized squares in the
background of the Document window
• Can help position or resize an AP div or other objects
New Perspectives on Adobe Dreamweaver CS5
42
Modifying AP Divs
New Perspectives on Adobe Dreamweaver CS5
43
Modifying AP Divs
• Creating Nested AP Divs
– Nested AP div
• AP div contained within an outer (parent) AP div
• Nesting refers to the underlying code for the AP divs,
not to their physical positions
–Nested AP div does not have to touch its on-screen
parent to be considered nested
New Perspectives on Adobe Dreamweaver CS5
44
Modifying AP Divs
• Nesting is used to group AP divs
–If parent AP div is moved, the nested AP div will
move with it
–Position of nested AP div is relative to the left and
top borders of the parent rather than to the left
and top borders of the page
–Nested AP div shares other attributes with its
parent
New Perspectives on Adobe Dreamweaver CS5
45
Inspecting CSS Code
with CSS Inspect
• CSS Inspect
– Another tool to help with complex CSS code
– Works with Live View
• Helps identify HTML elements and their associated
CSS styles
• Live View integration enables debugging from within
the Dreamweaver environment
New Perspectives on Adobe Dreamweaver CS5
46
Inspecting CSS Code
with CSS Inspect
New Perspectives on Adobe Dreamweaver CS5
47
Updating the Web Site
on the Remote Server
• Upload every page of the site
– Include dependent files so that graphics and new CSS
styles are uploaded to the remote server as well
• Preview the Web site
New Perspectives on Adobe Dreamweaver CS5
48