Presentation is loading. Please wait.

Presentation is loading. Please wait.

Tutorial 6 Creating Fixed-Width Layouts. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a two-column layout Use id selectors to.

Similar presentations


Presentation on theme: "Tutorial 6 Creating Fixed-Width Layouts. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a two-column layout Use id selectors to."— Presentation transcript:

1 Tutorial 6 Creating Fixed-Width Layouts

2 XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a two-column layout Use id selectors to create styles Create page structure with the div element Determine fixed column widths using pixels

3 XP Objectives Understand document flow Center an image Determine how specificity resolves conflicts Create a faux column effect New Perspectives on Blended HTML, XHTML, and CSS3

4 XP Understanding Web Page Layouts There is no standard method for creating Web page layouts Layouts take planning – Broken layouts do not appear on the screen as planned – Column drop occurs when there isn’t enough horizontal space to display all of the columns in your layout – Fixed-width layouts – Fluid layouts – Consider items that might reduce the viewing area Widget sidebars New Perspectives on Blended HTML, XHTML, and CSS, 2e4

5 XP Creating a Two-Column Fixed Layout Horizontal header row Horizontal navbar Sidebar Main content area Footer New Perspectives on Blended HTML, XHTML, and CSS, 2e5

6 XP Understanding Web Page Layouts The div element defines a division in an XHTML document The universal selector is used to select all of the elements on the Web page New Perspectives on Blended HTML, XHTML, and CSS, 2e6

7 XP Understanding Web Page Layouts Creating the container div serves as a large box that contains other boxes New Perspectives on Blended HTML, XHTML, and CSS, 2e7

8 XP Understanding Web Page Layouts To create boxes with rounded corners, use design software to create four or more images for the corner effects New Perspectives on Blended HTML, XHTML, and CSS, 2e8

9 XP Determining the Content Width To determine the value for the width property of a div element to be used for column content: – If a div such as a header or footer div spans the entire row, subtract the sum of the left and right margins, the border, and the padding values from the width of its parent container to determine the content width. – For side-by-side columns, choose an appropriate content width for each column. Columns of secondary importance, such as sidebar and section columns, should be narrow. The column of primary importance, such as the main column, should be the widest. New Perspectives on Blended HTML, XHTML, and CSS, 2e9

10 XP Determining the Content Width New Perspectives on Blended HTML, XHTML, and CSS, 2e10

11 XP Determining the Content Width Next, create styles for the navbar, sidebar, main column, and footer New Perspectives on Blended HTML, XHTML, and CSS, 2e11

12 XP Determining the Content Width New Perspectives on Blended HTML, XHTML, and CSS, 2e12

13 XP Using the Positioning Properties The document flow describes how the contents of the page are recognized by the browser – Absolute positioning – Relative positioning The left property positions an element a certain distance from the left edge of the screen The top property positions an element a certain distance from the top edge of the screen The z-index property stacks elements on top of each other New Perspectives on Blended HTML, XHTML, and CSS, 2e13

14 XP Creating a Three-Column Layout The source order is the order of the content in the document flow – Browser normally reads from top to bottom and left to right – Floated divs must appear before nonfloated divs You may need to modify the source order – Create styles for the header, sidebar column, and main column – Flanking columns are columns that appear to the left or the right of the main column New Perspectives on Blended HTML, XHTML, and CSS, 2e14

15 XP Creating a Three-Column Layout The layout plan for the main column: New Perspectives on Blended HTML, XHTML, and CSS, 2e15

16 XP Creating a Three-Column Layout Create styles for the Section id selector New Perspectives on Blended HTML, XHTML, and CSS, 2e16

17 XP Creating a Three-Column Layout New Perspectives on Blended HTML, XHTML, and CSS, 2e17

18 XP Creating a Three-Column Layout Centering an Image: – To center an image, use the declaration: img.classname { display: block; margin: auto; } where img is the image element and classname is the name of the class. Apply the class to the image to be centered. To center all images, use the same declarations for the image element selector. New Perspectives on Blended HTML, XHTML, and CSS, 2e18

19 XP Creating a Three-Column Layout Creating Styles for the Footer Div: New Perspectives on Blended HTML, XHTML, and CSS, 2e19

20 XP rule allows users to import style rules from other style sheets Must come after CSS comments and before any of the styles code in the style sheet New Perspectives on Blended HTML, XHTML, and CSS, 2e20

21 XP Understanding Specificity Specificity determines priorities and uses a weighting method to calculate which style rule will prevail if there are conflicting rules in the same source Generally, the style farthest down in the list will prevail The W3C has a weighting methodology for calculating the specificity of particular selectors – Weighting values will help determine which style will prevail New Perspectives on Blended HTML, XHTML, and CSS, 2e21

22 XP Creating Faux Columns The CSS overflow property with a value of “auto” adds a vertical scroll bar as needed Faux columns add a background image to create the illusion that the columns have equal height New Perspectives on Blended HTML, XHTML, and CSS, 2e22

23 XP Creating Faux Columns New Perspectives on Blended HTML, XHTML, and CSS, 2e23

24 XP Creating Faux Columns New Perspectives on Blended HTML, XHTML, and CSS, 2e24

25 XP Creating Faux Columns New Perspectives on Blended HTML, XHTML, and CSS, 2e25


Download ppt "Tutorial 6 Creating Fixed-Width Layouts. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a two-column layout Use id selectors to."

Similar presentations


Ads by Google