![Page 1: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/1.jpg)
Website Design 1 Professor Danne Woowebdesign.dannewoo.com
ΑRTS 214 – 02Spring 2016Thursday 2:00 pm – 5:50 pm I-Building 213
![Page 2: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/2.jpg)
CSS
CSS Styling
- Color- Type- Boxes
- Lists, Tables and Forms
- Images- Layout
![Page 3: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/3.jpg)
CSS
ol {list-style-type: lower-roman;
}
CSS: Lists, Tables and Forms
Bullet Point Styles
![Page 4: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/4.jpg)
RESULT
CSS: Lists, Tables and Forms
Bullet Point Styles
![Page 5: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/5.jpg)
CSS: Lists, Tables and Forms
List Styles
upper-roman
none
disc
circle
square
01 02 03
A B C
a b c
i. ii.
I II III
1 2 3
lower-alpha
decimal-leading-zero
decimal
lower-roman
upper-alpha
UNORDERED ORDERED
![Page 6: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/6.jpg)
CSS
ul {list-style-image: url("star.png");
}
li {margin: 10px 0px 0px 0px;
}
CSS: Lists, Tables and Forms
Images for Bullets
![Page 7: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/7.jpg)
RESULT
CSS: Lists, Tables and Forms
Images for Bullets
![Page 8: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/8.jpg)
CSS
ul {width: 250px;}
li {margin: 10px;}
ul.illuminations {list-style-position: outside;}
ul.season {list-style-position: inside;}
CSS: Lists, Tables and Forms
Positioning the Bullet Point
![Page 9: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/9.jpg)
RESULT
CSS: Lists, Tables and Forms
Positioning the Bullet Point
![Page 10: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/10.jpg)
CSS
ul {list-style: inside circle;width: 300px;}
li {margin: 10px 0px 0px 0px;}
CSS: Lists, Tables and Forms
List Shorthand
![Page 11: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/11.jpg)
RESULT
CSS: Lists, Tables and Forms
List Shorthand
![Page 12: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/12.jpg)
CSS: Lists, Tables and Forms
Table Styles
background-color
padding
width
text-transform
font-size
letter-spacing
border
text-align
:hover
![Page 13: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/13.jpg)
CSS
td {border: 1px solid #0088dd;padding: 15px;
}
table.one {empty-cells: show;
}
table.two {empty-cells: hide;
}
CSS: Lists, Tables and Forms
Border on Empty Cells
![Page 14: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/14.jpg)
RESULT
CSS: Lists, Tables and Forms
Border on Empty Cells
![Page 15: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/15.jpg)
CSS
td {background-color: #0088dd;padding: 15px;border: 2px solid #000000;}
table.one {border-spacing: 5px 15px;}
table.two {border-collapse: collapse;}
CSS: Lists, Tables and Forms
Gaps Between Cells
![Page 16: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/16.jpg)
RESULT
CSS: Lists, Tables and Forms
Gaps Between Cells
![Page 17: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/17.jpg)
CSS: Lists, Tables and Forms
Styling Forms
![Page 18: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/18.jpg)
CSS: Lists, Tables and Forms
Styling Text Inputs
font-sizecolorbackground-color
:focus:hoverbackground-image
borderborder-radius
padding
![Page 19: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/19.jpg)
CSS: Lists, Tables and Forms
Styling Buttons
colortext-shadowborder-bottom
background-colorborder-radius:hover
![Page 20: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/20.jpg)
CSS
div {border-bottom: 1px solid #efefef;margin: 10px;padding-bottom: 10px;width: 260px;}
.title {float: left;width: 100px;text-align: right;padding-right: 10px;}
.submit {text-align: right;}
CSS: Lists, Tables and Forms
Align Form Controls
![Page 21: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/21.jpg)
RESULT
CSS: Lists, Tables and Forms
Align Form Controls
![Page 22: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/22.jpg)
CSS
a {cursor: move;
}
CSS: Lists, Tables and Forms
Cursor Styles
![Page 23: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/23.jpg)
RESULT
CSS: Lists, Tables and Forms
Cursor Styles
![Page 24: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/24.jpg)
CSS
img.large {width: 500px;height: 500px;}img.medium {width: 250px;height: 250px;}img.small {width: 100px;height: 100px;}
CSS: Images
Controlling Image Size
![Page 25: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/25.jpg)
RESULT
CSS: Images
Controlling Image Size
![Page 26: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/26.jpg)
CSS
img.align-left {float: left;margin-right: 10px;}
img.align-right {float: right;margin-left: 10px;}
CSS: Images
Aligning Images
![Page 27: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/27.jpg)
RESULT
CSS: Images
Aligning Images
![Page 28: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/28.jpg)
CSS
img.align-center {display: block;margin: 0px auto;}
img.medium {width: 250px;height: 250px;}
CSS: Images
Centering Images
![Page 29: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/29.jpg)
RESULT
CSS: Images
Centering Images
![Page 30: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/30.jpg)
CSS
p {background-image: url("images/pattern.gif");
}
CSS: Images
Background Images
![Page 31: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/31.jpg)
RESULT
CSS: Images
Background Images
![Page 32: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/32.jpg)
CSS
body {background-image: url("images/header.gif");
background-repeat: repeat-x;}
CSS: Images
Background Images Repeating
![Page 33: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/33.jpg)
RESULT
CSS: Images
Background Images Repeating
![Page 34: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/34.jpg)
CSS
body {background-image: url("images/tulip.gif");
background-repeat: no-repeat;background-attachment: fixed;}
CSS: Images
Background Images Fixed
![Page 35: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/35.jpg)
RESULT
CSS: Images
Background Images Fixed
![Page 36: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/36.jpg)
CSS
body {background-image: url("images/tulip.gif");background-repeat: no-repeat;background-position: center top;}
body {background-image: url("images/tulip.gif");background-repeat: no-repeat;background-position: 50% 50%;}
CSS: Images
Background Images Positioning
![Page 37: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/37.jpg)
RESULT
CSS: Images
Background Images Positioning
![Page 38: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/38.jpg)
CSS
body {background: #ffffff url("images/
tulip.gif") no-repeat top right;}
CSS: Images
Shorthand
![Page 39: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/39.jpg)
RESULT
CSS: Images
Shorthand
![Page 40: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/40.jpg)
CSS: Images
Image Rollovers and Sprites
![Page 41: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/41.jpg)
CSS
a.button {height: 36px;background-image: url("images/button-sprite.jpg");
text-indent: -9999px;display: inline-block;}a#add-to-basket {width: 174px;background-position: 0px 0px;}a#framing-options {width: 210px;background-position: -175px 0px;}
CSS: Images
Image Rollovers and Sprites
![Page 42: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/42.jpg)
CSS
a#add-to-basket:hover {background-position: 0px -40px;}
a#framing-options:hover {background-position: -175px -40px;}
a#add-to-basket:active {background-position: 0px -80px;}
a#framing-options:active {background-position: -175px -80px;}
CSS: Images
Image Rollovers and Sprites
![Page 43: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/43.jpg)
RESULT
CSS: Images
Image Rollovers and Sprites
![Page 44: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/44.jpg)
CSS: Layout
BLOCK LEVEL INLINE
Lorem IpsumLorem ipsum dolor sitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiam ut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.Morbi justo velit,rutrum velplacerat in,adipiscing vitaesapien.
• Duis inerat neque.• Pellentesque habitantmorbi• Praesent accondimentum neque
Lorem ipsum dolor sitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiam ut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.Morbi justo velit,rutrum velplacerat in,adipiscing vitaesapien.
Suspendisse potenti.Duis ineratneque.Pellentesque habitantmorbi tristiquesenectus etnetus etmalesuada famesacturpisegestas.
Building Blocks
![Page 45: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/45.jpg)
CSS: Layout
Lorem Ipsum
Lorem ipsum dolor sitamet,consectetur adipiscing elit.Nullam sodalespretium ipsum.Etiam ut enim augue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.Morbi justo velit,rutrum vel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,vel scelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.Praesent nisidolor,ornare quis sodales id,lacinia ut mauris.
Suspendisse potenti.Duis inerat neque.Pellentesque habitantmorbi tristique senectus etnetus etmalesuada famesacturpis egestas.
Lorem Ipsum Dolor Consectetur
Duis aute irure dolor inreprehenderit invelit esse cillum dolore eu fugiat nulla pariatur.
Containing Elements
![Page 46: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/46.jpg)
CSS: Layout
Controlling Positioning: Normal Flow
orem Ipsum
Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.
Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.
Praesent nisidolor,ornare quis sodales id,lacinia utmauris.
Lorem Ipsum
![Page 47: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/47.jpg)
CSS: Layout
Controlling Positioning: Relative Positioning
orem Ipsum
Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.
Praesent nisidolor,ornare quis sodales id,lacinia utmauris.
Lorem Ipsum
Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.
![Page 48: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/48.jpg)
CSS: Layout
Controlling Positioning: Absolute Positioning
Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.
Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.
Praesent nisidolor,ornare quis sodales id,lacinia utmauris.
Lorem Ipsum
![Page 49: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/49.jpg)
CSS: Layout
Controlling Positioning: Fixed Positioning
Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.
Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.
Praesent nisidolor,ornare quis sodales id,lacinia utmauris.
Lorem Ipsum
![Page 50: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/50.jpg)
CSS: Layout
Controlling Positioning: Floating Elements
Lorem ipsumdolorsitamet,consecteturadipiscingelit.Nullam sodales pretiumipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis
eget nunc.
Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.
Praesent nisidolor,ornare quis sodales id,lacinia utmauris.
LoremIpsum
![Page 51: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/51.jpg)
CSS
body {width: 750px;font-family: Arial, Verdana, sans-serif;color: #665544;}
h1 {background-color: #efefef;padding: 10px;}
p {width: 450px;}
CSS: Layout
Normal Flow
![Page 52: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/52.jpg)
RESULT
CSS: Layout
Normal Flow
![Page 53: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/53.jpg)
CSS
p.example {position: relative;top: 10px;left: 100px;
}
CSS: Layout
Relative Positioning
![Page 54: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/54.jpg)
RESULT
CSS: Layout
Relative Positioning
![Page 55: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/55.jpg)
CSS
h1 {position: absolute;top: 0px;left: 500px;width: 250px;}
p {width: 450px;}
CSS: Layout
Absolute Positioning
![Page 56: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/56.jpg)
RESULT
CSS: Layout
Absolute Positioning
![Page 57: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/57.jpg)
CSS
h1 {position: fixed;top: 0px;left: 0px;padding: 10px;margin: 0px;width: 100%;background-color: #efefef;}
p.example {margin-top: 100px;}
CSS: Layout
Fixed Positioning
![Page 58: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/58.jpg)
RESULT
CSS: Layout
Fixed Positioning
![Page 59: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/59.jpg)
CSS
h1 {position: fixed;top: 0px; left: 0px;margin: 0px; padding: 10px;width: 100%;background-color: #efefef;z-index: 10;}
p {position: relative; top: 70px;left: 70px;}
CSS: Layout
Overlapping Elements: z-index
![Page 60: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/60.jpg)
RESULT
CSS: Layout
Overlapping Elements: z-index
![Page 61: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/61.jpg)
CSS
blockquote {float: right;width: 275px;font-size: 130%;font-style: italic;font-family: Georgia, Times, serif;margin: 0px 0px 10px 10px;padding: 10px;border-top: 1px solid #665544;border-bottom: 1px solid #665544;}
CSS: Layout
Floating Elements
![Page 62: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/62.jpg)
RESULT
CSS: Layout
Floating Elements
![Page 63: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/63.jpg)
CSS
body {width: 750px;font-family: Arial, Verdana, sans-serif;color: #665544;}p {float: left;width: 230px;margin: 5px;padding: 5px;background-color: #efefef;}
CSS: Layout
Floating Elements Side-by-Side
![Page 64: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/64.jpg)
RESULT
CSS: Layout
Floating Elements Side-by-Side
![Page 65: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/65.jpg)
CSS
p {width: 230px;float: left;margin: 5px;padding: 5px;background-color: #efefef;}
.clear {clear: left;
}
CSS: Layout
Clearing Floats
![Page 66: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/66.jpg)
RESULT
CSS: Layout
Clearing Floats
![Page 67: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/67.jpg)
CSS
div {border: 1px solid #665544;}
CSS: Layout
Floating Elements Problem
![Page 68: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/68.jpg)
RESULT
CSS: Layout
Floating Elements Problem
![Page 69: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/69.jpg)
CSS
div {border: 1px solid #665544;overflow: auto;width: 100%;
}
CSS: Layout
Floating Elements Solution
![Page 70: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/70.jpg)
RESULT
CSS: Layout
Floating Elements Solution
![Page 71: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/71.jpg)
CSS
.column1of2 {float: left;width: 620px;margin: 10px;}
.column2of2 {float: left;width: 300px;margin: 10px;}
CSS: Layout
Multi-Column Layouts with Floats
![Page 72: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/72.jpg)
RESULT
CSS: Layout
Multi-Column Layouts with Floats
![Page 73: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/73.jpg)
CSS: Layout
Simple Grid Layout
![Page 74: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/74.jpg)
In Class Assignment
Try to incorporate what we discussed today into your website.
- Lists- Forms- Tables- Images- Layout
![Page 75: Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm –](https://reader033.vdocuments.pub/reader033/viewer/2022052314/5f07176e7e708231d41b42a1/html5/thumbnails/75.jpg)
Homework
Finish programming your homepage and post your HTML and CSS code to your blogs.