Economics 2010 Lecture 4 Growth and Trade Rober Martinez-Espineira.
Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober [email protected].
-
Upload
shavonne-mitchell -
Category
Documents
-
view
212 -
download
0
Transcript of Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober [email protected].
![Page 2: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/2.jpg)
Using “display: inline”
W3 Schools does it best… http://www.w3schools.com/css/tryit.asp?filen
ame=trycss_display
![Page 3: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/3.jpg)
How to Structure
If you’ve peeked at some of my code, you’ll see I make use of <div> tags a lot.
You can also use <span> tags for short passages you’d like to change.
![Page 4: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/4.jpg)
Possible Structures
Separate Header elements from Content and Footer.
You may also want to include a Navigation element.
Break up your page into logical organizations. This way, you can manipulate many different parts of the document or the whole document.
![Page 5: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/5.jpg)
Design
If you have a good document design, you can just change the style sheet whenever you want to change your design. You won’t even have to touch your HTML again!
![Page 6: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/6.jpg)
Tables vs. DIVs
Tables aren’t very flexible when designing pages.
DIV tags can be directly manipulated through CSS.
What if your manager wants the design of a page to change and everything is controlled by tables? What if he wants the bottom row of every design to now be at the top?
![Page 7: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/7.jpg)
Example 1
http://cpu.rachelober.com/lecture3/example1.html
![Page 8: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/8.jpg)
Common Layout Suggestions
http://www.intensivstation.ch/en/templates/
![Page 9: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.](https://reader035.fdocuments.us/reader035/viewer/2022072016/56649ee65503460f94bf5bd9/html5/thumbnails/9.jpg)
Lab #3: Designing Without Tables
http://cpu.rachelober.com/lab3 Objective:
Change a <table> layout into a <div> layout! Stock Images for use:
http://cpu.rachelober.com/stock