Presentation is loading. Please wait.

Presentation is loading. Please wait.

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.2.

Similar presentations


Presentation on theme: "TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.2."— Presentation transcript:

1 TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.2

2 Objectives  Set display properties  Create a reset style sheet  Explore fixed, fluid, and elastic layouts  Set the width and height  Float elements in a Web page

3 The display style  Most page elements are displayed in one of two ways  Blocks occupy a defined rectangular area within a page  Inline elements flow within a block

4 The CSS Box Model

5 Creating a Reset Style Sheet /* Display HTML5 structural elements as blocks */ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; } /* Set the default page element styles */ * { font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.2em; list-style: none; }

6 Creating a Reset Style Sheet  Many designers create a reset style sheet to define their own default styles  Two steps:  Step #1: Display HTML5 structural elements as blocks  Step #2: Set the default page element styles

7 Practice – Reset Style Sheet 1. Download cyclepathology.zip from my website. 2. Open race.css in Notepad++ 3. Add a style rule to display the header, article, aside, figure, figcaption, hgroup, section, and nav elements as blocks. 4. Create a style rule to set the default style for every element so that every element: 1. Is displayed in Verdana, Geneva, sans-serif 2. Has a font size of 100%

8 Fixed and Fluid Layout

9 Elastic Layouts  Some designers propose the use of elastic layouts, in which all measurements are expressed relative to the default font size using the em unit  If a user or the designer increases the font size, the width, height, and location of all of the other page elements, including images, change to match

10 Setting the width and height  Page width and height  For fixed layout: width: value; height: value;  For fluid layout: min-width: value; min-height: value; max-width: value; max-height: value;

11 Setting width and height  Example: body { width: 95%; min-width: 900px; max-width: 1400px; } Width and height can also be used to define the width and height of other elements.

12 Setting width and height 1. In the style rule for the page body, set the page width to 98% of the width of the browser window in a range from 1000 pixels up to 1400 pixels. 2. Create a style rule for the header element that: 1. Sets the width to 20% of the page body 2. Changes the background color to black 3. For inline images within the header element, set the width to 100% of the width of the header. 4. For the hgroup within the article element, set the height to 60 pixels and indent the text 20 pixels. 5. For the figure box, create a style rule to set the width of the figure box to 79%.

13 Floating Elements  Floating an element takes that element out of the normal flow of the document and positions it along the left or right edge of its containing element.  With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. float: position; Where position is left, right, none, or inherit.  Example: float: right;

14 Floating Elements – The Rules  You can't float every element on a Web page.  Any element that follows the floated element will flow around the floated element on the other side.  If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available regardless of the float => you should always define a width on floated elements.

15 Floating Elements - Images  Example of a floating image:  Open float_image_layout folder Image with no float property Image with float to the left Image with float to the right  Example of multi-column layout:  Open multicolumn_layout folder Layout with no float Layout with section floating to the left Layout with section and article floating to the left Layout with section, article, and aside floating to the left

16 Floating Elements  Turning Off the Float clear: position; Where position is left, right, both, none, or inherit.

17 Floating Elements 1. For list items within the horizontal navigation list, add styles to: 1. Display each list item as a block floated on the left 2. Add the following styles to the main section of the page: 1. Float the main section on the left margin once the left margin has been clear of previously floated objects 2. Set the width to 49% of the page body 3. For the article element, create a style rule to: 1. Float the element on the left with a width of 29% 2. Set background color to the value (215, 181, 151) 4. For the figure box, float the figure box on the left once the margin is clear.


Download ppt "TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.2."

Similar presentations


Ads by Google