page layout 2010
TRANSCRIPT
![Page 1: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/1.jpg)
Using CSS and <div> tags for page layout
1
![Page 2: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/2.jpg)
In Lab1 we used tables to define how the page layout will look.
Works fine but if asked to redesign it is difficult to modify.
A <div> tag combined with CSS will create a page that is easy to manage and manipulate later.
A <div> tag defines a division or section in a HTML document
It is often used to group block elements to format them with styles.
The <div> tag is supported in all major browsers2
![Page 3: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/3.jpg)
The <div> tag is a block level element The <div> tag can contain nearly any other tag The <div> tag cannot be inside <p> tags The <div> tag is not a replacement <p> tag The <p> tag is for paragraphs only while <div> tag defines
more general divisions within a document Don’t replace <p> tags with <div> tags Good idea to label your <div> tags as you place them in the
document Also good idea to close your <div> tags as soon as you open
them, then place the contents within the element
3
![Page 4: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/4.jpg)
Site logo at top leftThe logo appears at the top left and also acts as a hyperlink back to sites home page
Navigation barThis incorporates the site logo in a top horizontal navigation bar but also has a left hand side navigation bar .
Breadcrumbsbreadcrumbs tell the user where they are relative to the home page. Also the components of the breadcrumb list should be hyperlinked.
Three-region layoutuses the above patterns where there is a site logo, navigation bar top and left (and maybe breadcrumbs) and a third section for content
4
![Page 5: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/5.jpg)
5
breadcrumbs
Left navigation
logo search
Main contentRight side content
![Page 6: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/6.jpg)
6
Left navigation
logo
Main content
Top navigation
![Page 7: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/7.jpg)
Just setting up three separate <div> like in the code below will not result in the page being laid out correctly
7
![Page 8: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/8.jpg)
8
To get the divisions positioned correctly you need to use CSS
![Page 9: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/9.jpg)
9
Need to add the link into the code
div_styles.css
![Page 10: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/10.jpg)
10
This shows the three divisions but they are not lined up all that well. We need to understand a little more about how “float” works
![Page 11: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/11.jpg)
11
float property allows you to position your web page designs Can only float block-level elements
eg <img />, <p> </p>, <ul> </ul>, and <div> </div> Can float to either the left or right. Any element that follows the floated element will flow around
the floated element on the other side. Should always define the width of a floated element A floated element will move as far to the left or right of the
container element as it can. If the container element is the <body> tag the floated div will
sit on the margin on the page If the container element itself is contained by something else
the floated div will sit on the margin of the container We are going to add a “wrapper” div to our previous eg.
![Page 12: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/12.jpg)
12
The next slide shows the CSS
wrapper div
![Page 13: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/13.jpg)
13
![Page 14: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/14.jpg)
14
Finally if you would like your layout to be centred then you centre the wrapper div by setting the left and right margin to be equal
![Page 15: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/15.jpg)
P (a) Create the following web page using <div> tags and CSS. Choose your own colours and fonts
15
300px wide 300px wide
![Page 16: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/16.jpg)
( (b) Modify the code from part (a) and place a wrapper class around the two divs and centre them.
16
![Page 17: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/17.jpg)
( (a) Create the following web page using <div> tags and CSS. Choose your own colours and fonts
17
Download the Act10 images folder from the MyChisholm web site
![Page 18: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/18.jpg)
You are going to change the way Lab2 is set up and now use <div> tags and CSS (rather than a table) to layout your page.This means your XHTML and your CSS file will both need to be modified
Reminder:
The site consists of four pages:welcome.htmlbaked_pears.htmlpumpkin_creme_brulee.htmlcontact_me.htmlThese pages are shown over the next four slides
18
![Page 19: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/19.jpg)
19
header <div>
left_nav <div>content <div>
![Page 20: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/20.jpg)
20
![Page 21: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/21.jpg)
21
![Page 22: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/22.jpg)
22
![Page 23: Page Layout 2010](https://reader033.vdocument.in/reader033/viewer/2022052912/55a05a171a28ab04688b4682/html5/thumbnails/23.jpg)
In this section you learnt how to use <div> tags and CSS to layout a web page. Covered: <div> tags float property CSS Design patterns
The next section looks at how to make your page more interactive by adding javaScript to your page
23