Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor...

75
Website Design 1 Professor Danne Woo webdesign.dannewoo.com ΑRTS 214 – 02 Spring 2016 Thursday 2:00 pm – 5:50 pm I-Building 213

Transcript of Website Design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · Website Design 1 Professor...

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

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 –

Homework

Finish programming your homepage and post your HTML and CSS code to your blogs.