1 / 14

Page Layout with CSS

CS110: Computer Science and the Internet. Page Layout with CSS. The Flow. Block elements vertically Float Should give them a width Clear. Your mission, should you choose to accept it…. First sketch the layout. header. d iv id=“intro”. nav. d iv id=“read”. d iv class=“week”.

sari
Download Presentation

Page Layout with CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS110: Computer Science and the Internet Page Layout with CSS

  2. The Flow • Block elements vertically • Float • Should give them a width • Clear

  3. Your mission, should you choose to accept it…

  4. First sketch the layout header div id=“intro” nav div id=“read” div class=“week” div class=“week” footer

  5. Use Firebug to experiment with CSS Load the following page into Firefox and turn on Firebug: http://cs.wellesley.edu/~cs110/ellen/amLit/initPage.html

  6. Starting from the top… HTML: <header> <imgsrc="images/banner.jpg" alt="banner"> <h1>American Poetry and Prose</h1> </header> CSS: header{ border-bottom: 4px double maroon; border-top: 4px double maroon; background-color: tan; padding: 10px; } We can use the new <header> tag in HTML5!

  7. Use Firebug to “add” more CSS* * but not to the original source View the HTML code and initial CSS for the <nav> element and “intro” div How can we move the <nav> element to the far right? How can we get the intro text to wrap around the image? Use Firebug to add properties to the CSS for the <nav> tag and intro div Links have three states: (1) initial unvisited link (2) visited link (3) “hovered” link We can create a different style for each state with the selectors (1) a:link (2) a:visited (3) a:hover

  8. Now let’s tackle the “week” div View the HTML code for the first “week” div and the “photo” div nested inside: <div class="week"> <div class="photo"> <imgsrc="images/poe.jpg" alt="Edgar Allen Poe" width="80"> <br>E. A. Poe </div> . . . </div> Add CSS code to the .photo class to create the new look

  9. Layout • Frozen • Liquid • Jello

  10. Back to the big picture… Q: Hmmm… How do we get those dark regions on the side, and the “wheat” background only in the middle? A: Create a “fixed layout” by setting the width of the “allcontent” div and center this div by setting the left and right margins to auto Suppose we’d like a two-column layout? Add CSS code to the “main” div to create this two-column layout … or suppose we want the width of the web page to change as we change the window size (a “liquid layout”)?

  11. two-column fixedlayout <body> <div id=“allcontent”> <header> . . . </header> <nav> . . . </nav> <div id=“main”> <div id=“intro”> . . . </div> <div id=“read”> . . . </div> <div class=“week”> . . . </div> <div class=“week”> . . . </div> </div> <footer> . . . </footer> </div> </body> nav { width: 150px; float: right; . . . } #allcontent{ width: 800px; margin: 0 auto; . . . } #main { width: 600px; . . . } Key CSS:

  12. Create a two-column liquid layout Load the following page into Firefox and turn on Firebug: http://cs.wellesley.edu/~cs110/ellen/amLit/fixedPage.html How does the page change as you shrink the window size? Using Firebug, edit the CSS rules to create a two-column liquid layoutthat spans the width of the window and has columns that change size as you shrink the window size Hint: the value of the width property can be specified as a percentage, e.g. width: 60%; Why use fixed vs. liquid layouts?

  13. The display property: block vs. inline? Block elements can be displayed inline, and vice versa, using the display property: p { display: inline; } img { display: block; } Use this idea to create a horizontal navigation bar Hint: the CSS contains empty rules for p and h3 tags inside the nav element, which may come in handy

  14. Server Side Includes (SSI) Suppose we have the same code on lots of web pages: <html> <head> . . . </head> <body> <nav> . . . lots of hyperlinks . . . </nav> . . . </body> </html> <html> <head> . . . </head> <body> <nav> . . . lots of hyperlinks . . . </nav> . . . </body> </html> <html> <head> . . . </head> <body> <nav> . . . lots of hyperlinks . . . </nav> . . . </body> </html> . . . home.htmlmission.htmlmembers.html (1) Place code in a new file (2) include the new file in the HTML code: <body> <!--#include nav.part --> . . . (3) change filename extensions to .shtml <nav> . . . lots of hyperlinks . . . </nav> nav.part

More Related