IMAGES Controlling size of images in CSS Aligning images in CSS
Adding background images
Slide 2
IMAGES Controlling the size and alignment of your images using
CSS keeps rules that affect the presentation of your page in the
CSS and out of the HTML markup.
Slide 3
IMAGE SIZE IN CSS control the size of an image using the width
and height properties in CSS chapter-16/image-sizes.html Whenever
you use consistently sized images across a site, you can use CSS to
control the dimensions of the images, instead of putting the
dimensions in the HTML.
Slide 4
IMAGE ALIGNMENT WITH CSS using the float property to align
images. The float property is added to the class that was created
to represent the size of the image New classes are created with
names such as align-left or align-right to align the images to the
left or right of the page. These class names are used in addition
to classes that indicate the size of the image
chapter-16/aligning-images.html
Slide 5
IMAGE CENTERING WITH CSS On the containing element, you can use
the text-align property with a value of center. On the image
itself, you can use the use the margin property and set the values
of the left and right margins to auto.
chapter-16/centering-images.html
CONTRAST OF BACKGROUND IMAGES High Contrast Low Contrast
Screen
Slide 13
SUMMARY IMAGES You can specify the dimensions of images using
CSS. Images can be aligned both horizontally and vertically using
CSS. You can use a background image behind the box created by any
element on a page Background images can appear just once or be
repeated across the background of the box You can create image
rollover effects by moving the background position of an image To
reduce the number of images your browser has to load, you can
create image sprites
Slide 14
HTML5 LAYOUT HTML5 layout elements How old browsers understand
new elements Styling HTML5 layout elements with CSS
Slide 15
TRADITIONAL HTML LAYOUTS used elements to group together
related elements on the page
Slide 16
NEW HTML 5 LAYOUT ELEMENTS
Slide 17
HEADERS AND FOOTERS chapter-17/example.html
Slide 18
NAVIGATION chapter-17/example.html
Slide 19
ARTICLES The element acts as a container for any section of a
page that could stand alone and potentially be syndicated
chapter-17/example.html
Slide 20
ASIDE The element has two purposes, depending on whether it is
inside an element or not. chapter-17/example.html
Slide 21
SECTIONS The element groups related content together, and
typically each section would have its own heading.
chapter-17/example.html
Slide 22
HEADING GROUPS The purpose of the element is to group together
a set of one or more through elements so that they are treated as
one single heading. chapter-17/example.html
Slide 23
FIGURES can be used to contain any content that is referenced
from the main flow of an article (not just images).
chapter-17/example.html
Slide 24
SECTIONING ELEMENTS Where there is no suitable element to group
a set of elements, the element will still be used.
chapter-17/example.html
Slide 25
LINKING AROUND BLOCK-LEVEL ELEMENTS HTML5 allows you to place
an element around a block level element that contains child
elements. This allows you to turn an entire block into a link.
chapter-17/example.html
Slide 26
HELPING OLDER BROWSERS UNDERSTAND HTML5 Older browsers that do
not know the new HTML5 elements will automatically treat them as
inline elements. Therefore, to help older browsers, you should
include the line of CSS on the left which states which new elements
should be rendered as block-level elements.
chapter-17/example.html
Slide 27
SUMMARY HTML5 LAYOU T The new HTML5 elements Indicate the
purpose of different parts of a web page and help to describe its
structure. The new elements provide clearer code (compared with
using multiple elements). Older browsers that do not understand
HTML5 elements need to be told which elements are block-level
elements. To make HTML5 elements work in Internet Explorer 8 (and
older versions of IE), extra JavaScript is needed, which is
available free from Google.
