web development -2

sri999

t3.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Designing a Page Layout

Tutorial 3

Carey

Objectives

Create a reset style sheet

Explore page layout designs

Center a block element

Create a floating element

Clear a floating layout

Prevent container collapse

Explore grid-based layouts

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Create a layout grid

Format a grid

Explore the CSS grid styles

Explore positioning styles

Work with relative positioning

Work with absolute positioning

Work with overflow content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Page Layout with Floating Elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing the display Style

HTML elements are classified into

Block elements, such as paragraphs or headings

Inline elements, such as emphasized text or inline images

The display style can be defined for any page element using

display: type;

where type defines the display type

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing the display Style (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Reset Style Sheet

Reset style sheet supersedes a browser’s default styles and provides a consistent starting point for page design

The first style rule in a sheet is the display property used to display HTML5 structural elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Reset Style Sheet (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Page Layout Designs

Web page layouts fall into three categories:

Fixed layout – Size of the page and page elements are fixed, usually using pixels as the unit of measure

Fluid layout – The width of the page elements are set as a percent of the available screen width

Elastic layout – Images and text are always sized in proportion to each other in em units

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Page Layout Designs (continued)

Responsive design – The layout and design of a page changes in response to the device that is rendering it

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Width and Height

The width and height of an element are set using the following properties:

width: value;

height: value;

where value is the width or height using one of the CSS units of measurement or as a percentage of the width or height of the parent element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Width and Height (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Centering a Block Element

Block elements can be centered horizontally within their parent element by setting both the left and right margins to auto

body {

margin-left: auto;

margin-right: auto;

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Vertical Centering (continued)

Centering an element vertically can be accomplished by displaying the parent element as a table cell and setting the vertical-align property to middle

For example, to vertically center the following h1 heading within the div element:

<div>

<h1>Pandaisia Chocololates</h1>

</div>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Vertical Centering

Apply the style rule

div {

height: 40px;

display: table-cell;

vertical-align: middle;

}

Using this style rule, the h1 heading will be vertically centered

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Floating Page Content

Floating an element takes it out of position and places it along the left or right side of its parent element

To float an element, apply

float: position;

where position is none (the default), left to float the object on the left margin or right to float the object on the right margin

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Floating Page Content (continued 1)

For elements to be placed within a single row, the combined width of the elements cannot exceed the total width of their parent element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Floating Page Content (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clearing a Float

To ensure that an element is always displayed below floated elements, use

clear: position;

where position is left, right, both, or none

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clearing a Float (continued 1)

left – Displays the element only when the left margin is clear of floating objects

right – Displays the element only when the right margin is clear of floating objects

both – Displays the element only when both margins are clear of floats

none – Displays the element alongside any floated objects

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clearing a Float (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clearing a Float (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clearing a Float (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Refining a Floated Layout

Content box model – The width property refers to the width of an element content only

Additional space include padding or borders

Border box model – The width property is based on the sum of the content, padding, and border spaces

Additional space taken up by the padding and border is subtracted from space given to the content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Refining a Floated Layout (continued 1)

The layout model can be chosen using

box-sizing: type;

where type is content-box (the default), border-box, or inherit (to inherit the property defined for the element’s container)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Refining a Floated Layout (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Container Collapse

Container collapse – An empty container with no content

Elements in the container are floated

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Container Collapse (continued 1)

Use the after pseudo-element to add a placeholder element after the footer

The general style rule is

container::after {

clear: both;

content: “”;

display: table;

}

where container is the selector for the element containing floating objects

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Container Collapse (continued 2)

The clear property keeps the placeholder element from being inserted until both margins are clear of floats

The element itself is a web table and contains an empty text string

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Page Layout Grids

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Overview of Grid-Based Layouts

Rows and columns form a grid

The number of rows is based on the page content

The number of columns is based on the number that provides the most flexibility in laying out the page content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Overview of Grid-Based Layouts (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Overview of Grid-Based Layouts (continued 2)

Advantages of using a grid:

Grids add order to the presentation of page content

A consistent logical design gives readers the confidence to find the information they seek

It is easily accessible for users with disabilities and special needs

It increases the development speed with a systematic framework for the page layout

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Fixed and Fluid Grids

Fixed grids – Every column has a fixed position

Widths of the columns and margins are specified in pixels

Fluid grids – Provides more support across different devices with different screen sizes.

Column width is expressed in percentages

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

CSS Frameworks

A framework is a software package that provides a library of tools to design a website

Includes style sheets for grid layouts and built-in scripts to provide support for a variety of browsers and devices

Some popular CSS frameworks include

Bootstrap

YAML4

960 Grid System

Foundation 3

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting up a Grid

A grid layout is based on rows of floating elements

Each floating element constitutes a column

The set of elements floating side-by-side establishes a row

Many grid layouts use the div (or division) element to mark distinct rows and columns of the grid

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting up a Grid (continued 1)

This is an example of a simple grid consisting of a single row with two columns:

</div>

The page content is placed within the div elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting up a Grid (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting up a Grid (continued 3)

The code for the grid layout for the Pandaisia Chocolates website is as follows:

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Designing the Grid Rows

Grid rows contain floating columns

Since a grid row starts a new line within a page, it should only be displayed when both margins are clear of previously floated columns

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Designing the Grid Columns

Every grid column needs to be floated within its row

Grid columns are placed within a div element having the general class name

class=“col-numerator-denominator”

where numerator-denominator provides the fractional width of the column

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Designing the Grid Columns (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding the Page Content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Outlining a Grid

Outlines – Lines drawn around an element, enclosing the element content, padding, and border spaces

Outline-width: value; – Specifies the width of a line.

Properties of value are: thin, medium, or thick

Outline-color: color; – Specifies the color of a line.

Properties of color are: CSS color name or value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Outlining a Grid (continued)

Outline-style: style; – Specifies the design of a line

Properties of style are: solid, double, dotted, dashed, groove, inset, ridge, or outset

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a CSS Grid

To create a grid display without the use of div elements, use the following grid-based properties:

selector {

display: grid;

grid-template-rows: track-list;

grid-template-columns: track-list;

}

grid – Selected elements in a grid

track-list – Space-separated list of row heights or column widths

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a CSS Grid (continued)

fr unit – Represents the fraction of available space left on the grid after all other rows or columns have attained their maximum allowable size

For example, the following style creates four columns with the dimension specified in the style rule:

grid-template-columns: 200px 250px 1fr 2fr;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Assigning Content to Grid Cells

Elements in a CSS grid are placed within a grid cell at the intersection of a specified row and column

By default, all of the specified elements are placed in the grid cell located at the intersection of the first row and first column

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Assigning Content to Grid Cells (continued)

To place an element in a different cell, use

grid-row-start: integer;

grid-row-end: integer;

grid-column-start: integer;

grid-column-end: integer;

where integer defines the starting and ending row or column that contains the content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Layout with Positioning Styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Layout with Positioning Styles (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The CSS positioning Styles

To place an element at a specific position within its container, use

position: type;

top: value;

right: value;

bottom: value;

left: value;

where type indicates the kind of positioning applied to the element and top, right, bottom, and left properties indicate the coordinates of the element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The CSS Positioning Styles (continued 1)

Static positioning – The element is placed where it would have fallen naturally within the flow of the document

Relative positioning – The element is moved out of its normal position in the document flow

Absolute positioning – The element is placed at specific coordinates within containers

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The CSS Positioning Styles (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The CSS Positioning Styles (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Fixed and Inherited Positioning

Fixed positioning – Fixes an object within a browser window to avoids its movement

Inherited positioning – Allows an element to inherit the position value of its parent element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the Positioning Styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the Positioning Styles (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the Positioning Styles (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the Positioning Styles (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the Positioning Styles (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Handling Overflow

Overflow – Controls a browser that handles excess content

overflow: type;

where type is visible (the default), hidden, scroll, or auto

visible – Instructs browsers to increase the height of an element to fit overflow contents

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Handling Overflow (continued 1)

hidden – Keeps an element at the specified height and width, but cuts off excess content

scroll – Keeps an element at the specified dimensions, but adds horizontal and vertical scroll bars

auto – Keeps an element at the specified size, adding scroll bars when they are needed

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Handling Overflow (continued 2)

CSS3 provides the overflow-x and overflow-y properties to handle overflow specially in the horizontal and vertical directions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Handling Overflow (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clipping an Element

Clip – Defines a rectangular region through which an element’s content can be viewed

Anything that lies outside the boundary of the rectangle is hidden

The syntax of the clip property is

clip: rect(top, right, bottom,left);

where top, right, bottom, and left define the coordinates of the clipping rectangle

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Clipping an Element (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Stacking elements

By default, elements that are loaded later by a browser are displayed on top of elements that are loaded earlier

To specify different stacking order, use the following z-index property:

z-index: value;

where value is a positive or negative integer, or the keyword auto

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Stacking elements (continued 1)

The z-index property works only for elements that are placed with absolute positioning

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Stacking elements (continued 2)

An element’s z-index value determines its position relative only to other elements that share a common parent

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition