Successfully reported this slideshow.

Page Layout 2010


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Page Layout 2010

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