Web Design & Development - Tutorial 04
Short Description
Web Design and Development - Tutorial 03. XHTML & CSS …. CSS Positioning and Layout. During this tutorial, you will gain experience with layout and …
Website: www.chakarov.com | Filesize: 382kb
Content
Web Design and Development - Tutorial 03 XHTML & CSS
. 2006 Trevor Adams, Staffordshire University - 1 -
Table of Contents
Web Design & Development - Tutorial 04……………………………………………………………………….. 1
CSS Positioning and Layout……………………………………………………………………………………….. 1
Conventions ………………………………………………………………………………………………………… 2
What you need for this tutorial ……………………………………………………………………………….. 2
Common Terminology………………………………………………………………………………………………….. 2
Layout with CSS…………………………………………………………………………………………………………. 3
Review the Box Model ……………………………………………………………………………………………… 3
CSS Positioning………………………………………………………………………………………………………. 4
Exercise 1 - Investigate the CSS rules……………………………………………………………………….. 5
Normal Flow ……………………………………………………………………………………………………….. 5
Relative Positioning………………………………………………………………………………………………. 5
Exercise 2 - Using relative positioning ……………………………………………………………………… 6
Absolute Positioning……………………………………………………………………………………………… 7
Exercise 3 - Using absolute positioning…………………………………………………………………….. 7
Further Selectors …………………………………………………………………………………………………………. 8
Child Selectors………………………………………………………………………………………………………… 9
Exercise 4 - Using Child Selectors……………………………………………………………………………. 9
Further Exercises ……………………………………………………………………………………………………….. 10
References ……………………………………………………………………………………………………………….. 10
Acknowledgements……………………………………………………………………………………………………. 10
Web Design & Development - Tutorial 04
CSS Positioning and Layout
During this tutorial, you will gain experience with layout and positioning using CSS and
XHTML. You will learn about the different types of positioning available when rendering CSS
and how to manipulate elements on a page. You shall understand the differences between fixedWeb Design and Development - Tutorial 03 XHTML & CSS
. 2006 Trevor Adams, Staffordshire University - 2 -
and liquid layouts. You shall also examine some of the common layouts used with web sites in
operation today.
Conventions
This type of print indicates an exercise. They are usually present at the end of a major
section of information
This type of text indicates a code example / listing. You may wish
to type this code out or copy & paste.
Italic Text indicates code elements inline with a sentence. E.g.
The
element.
What you need for this tutorial
?Access to the Internet (validation engine)
?A suitable web page / CSS editor such as Microsoft?Notepad?or Macromedia?
Dreamweaver?MX 2004 / 8 (Refer to week 1 tutorial notes for Macromedia?
Dreamweaver?MX 2004 assistance).
?A selection of web browsers for testing. E.g. Microsoft?Internet Explorer 6.x, Opera
7.54+, Mozilla Firefox 1.x or Safari
?An understanding of the topics presented in the previous tutorials. Please ensure that you
are comfortable and grasp the concepts from all prior tutorials before proceeding or…
Get the file Download here
Related Searches: staffordshire university, trevor adams, css positioning, css rules, exercise 1
Comments
Leave a Reply
