Embed Size (px)
Citation preview
CS
W1
31
Ste
ven
B
att
ilan
a
1
CSW 131 – Chapter 6CSW 131 – Chapter 6Laying Out PagesLaying Out Pages
Prepared by Prof. B. for use withPrepared by Prof. B. for use withTeach Yourself Visually Web DesignTeach Yourself Visually Web Design
by Ron Huddleston, Wileyby Ron Huddleston, Wiley
CS
W1
31
Ste
ven
B
att
ilan
a
2
Set Up Your Pages for CSS Layouts Set Up Your Pages for CSS Layouts (pp. 152-153)(pp. 152-153)
Laying out pages Laying out pages using CSS requires we using CSS requires we first mark off first mark off different divisions / sectionsdifferent divisions / sections of the page using of the page using <div> <div> with with varying logically-named IDs. Typically pages have a varying logically-named IDs. Typically pages have a headerheader, , bodybody, , footerfooter, , additional columns additional columns and or and or sidebarssidebars.. First download ch06.zip into downloads subfolder copy & paste ch06zip into class_work subfolder extract (unzip) ch06.zip, which becomes subfolder
ch06 into class_work subfolder Right-click index.html and select Edit with Notepad++
On a new line after On a new line after <body> <body> type:type: <div id="sidebar"><div id="sidebar">And on a new line after the 1And on a new line after the 1stst paragraph paragraph </p> </p> typetype</div> </div> [closes the sidebar div][closes the sidebar div]
More . . .More . . .
CS
W1
31
Ste
ven
B
att
ilan
a
3
Set Up Your Pages for CSS Layouts Set Up Your Pages for CSS Layouts (pp. 152-153 CONT.)(pp. 152-153 CONT.)
On a new line after On a new line after </div> </div> typetype
<div id="mainContent"><div id="mainContent">
And on a new line before And on a new line before </body> </body> typetype
</div> </div> [closes the mainContent div][closes the mainContent div] SaveSave index.htmlindex.html..
CS
W1
31
Ste
ven
B
att
ilan
a
4
Float Elements Float Elements (pp. 154-155)(pp. 154-155)
ColumnsColumns are easily created in CSS using are easily created in CSS using floatfloat. . Three values Three values for float are for float are leftleft, , rightright, and , and nonenone. If you use . If you use float: left;float: left; for an for an element, that element, that means it will float to the left of following means it will float to the left of following elementselements, right, it will float to the right of following elements, , right, it will float to the right of following elements, and none removes the float .and none removes the float .
Open Open styles.css styles.css usingusing Notepad++ Notepad++, and on a new last line type:, and on a new last line type:
#sidebar#sidebar{{width: 150px; width: 150px; [we MUST set a width for float to work!][we MUST set a width for float to work!]float: left;float: left;}}
SaveSave styles.cssstyles.css and and view index.html view index.html in browser, noting two in browser, noting two columns, but clearly more coding needs to be columns, but clearly more coding needs to be added/corrected.added/corrected.
NoteNote: Since all element default widths are 100%, : Since all element default widths are 100%, you must set you must set a width for any element you wish to floata width for any element you wish to float..
Note2Note2: : clear: both;clear: both; & & float: none;float: none; can be can be used to set a used to set a footnotefootnote. .
More …More …
CS
W1
31
Ste
ven
B
att
ilan
a
5
Clear Float for Footnotes Clear Float for Footnotes (NOT IN BOOK)(NOT IN BOOK)
Within Within index.html index.html on a new line before on a new line before </body> </body> type:type:
<div id="footer"><p>Copyright © 2013 Your Name.</p></div>
Within index.html on a new line before </head> type<style type="text/css">#footer p{float: none; float: none; OR clear: both;clear: both;font-size: 70%;font-weight: bold;color: #FFFFFF;border-top: #FFFFFF 1px solid;width: 560px;text-align: center;margin-top: 20px;}</style>
SaveSave index.html index.html andand view view in browser. in browser. See available symbols..
CS
W1
31
Ste
ven
B
att
ilan
a
6
Using Margins and Padding to Fix Float Problems Using Margins and Padding to Fix Float Problems (pp. 156-157)(pp. 156-157)
Margins and and paddings are most commonly are most commonly used to fix spacing issues when using floats..
Continuing in Continuing in styles.css styles.css usingusing Notepad++ Notepad++, , in the sidebar in the sidebar on on a new line before the closing a new line before the closing } } type:type: padding-right: 20px;padding-right: 20px;and withinand within mainContent mainContent before the closing before the closing } } type:type:margin-left: 170px; margin-left: 170px; SaveSave style.css and view style.css and view index.html index.html in browser.in browser.
NoteNote: : If float is rightIf float is right,, thenthen use padding-left use padding-left.. Use similar Use similar left / right consideration for elements that are not floated left / right consideration for elements that are not floated (next to the floated elements). (next to the floated elements). Remember the box model!Remember the box model!
The element contentThe element contentPaddingBorderMargin
CS
W1
31
Ste
ven
B
att
ilan
a
7
Work with Overflow Work with Overflow (pp. 158-159)(pp. 158-159)
CSS CSS overflowoverflow allows you to handle content that goes beyond allows you to handle content that goes beyond the size of a container you define (the size of a container you define (using both height and using both height and weight propertiesweight properties).).
Continuing in Continuing in styles.css styles.css usingusing Notepad++ Notepad++, , in the sidebar in the sidebar on on a new line before the closing a new line before the closing } } type:type:
height: 500px;height: 500px;overflow: auto; overflow: auto; [adds scrollbar ONLY if needed][adds scrollbar ONLY if needed]
SaveSave style.css and view style.css and view index.html index.html in browser.in browser. NoteNote: See “Tip” at bottom of p. 159 for other overflow : See “Tip” at bottom of p. 159 for other overflow
options.options.
CS
W1
31
Ste
ven
B
att
ilan
a
8
To Do ListTo Do List
Start preparing for Quiz 2!Start preparing for Quiz 2! Read Chapter 6Read Chapter 6 Revisit what we did in classRevisit what we did in class
Be careful as we do not follow book Remember, MUCH more detail about anything Remember, MUCH more detail about anything
we cover is:we cover is: at w3.org the Appendices of your book
DOCUMENT Your Project DOCUMENT Your Project If we have not reviewed your progress today,
we will next week. Remember, websites about one of your
passions is usually a winner.
