website design 1webdesign.dannewoo.com/lectures/webdesign_week10.pdf · website design 1 professor...
TRANSCRIPT
Website Design 1 Professor Danne Woowebdesign.dannewoo.com
ΑRTS 214 – 02Spring 2016Thursday 2:00 pm – 5:50 pm I-Building 213
CSS
CSS Styling
- Color- Type- Boxes
- Lists, Tables and Forms
- Images- Layout
CSS
ol {list-style-type: lower-roman;
}
CSS: Lists, Tables and Forms
Bullet Point Styles
RESULT
CSS: Lists, Tables and Forms
Bullet Point Styles
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
CSS
ul {list-style-image: url("star.png");
}
li {margin: 10px 0px 0px 0px;
}
CSS: Lists, Tables and Forms
Images for Bullets
RESULT
CSS: Lists, Tables and Forms
Images for Bullets
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
RESULT
CSS: Lists, Tables and Forms
Positioning the Bullet Point
CSS
ul {list-style: inside circle;width: 300px;}
li {margin: 10px 0px 0px 0px;}
CSS: Lists, Tables and Forms
List Shorthand
RESULT
CSS: Lists, Tables and Forms
List Shorthand
CSS: Lists, Tables and Forms
Table Styles
background-color
padding
width
text-transform
font-size
letter-spacing
border
text-align
:hover
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
RESULT
CSS: Lists, Tables and Forms
Border on Empty Cells
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
RESULT
CSS: Lists, Tables and Forms
Gaps Between Cells
CSS: Lists, Tables and Forms
Styling Forms
CSS: Lists, Tables and Forms
Styling Text Inputs
font-sizecolorbackground-color
:focus:hoverbackground-image
borderborder-radius
padding
CSS: Lists, Tables and Forms
Styling Buttons
colortext-shadowborder-bottom
background-colorborder-radius:hover
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
RESULT
CSS: Lists, Tables and Forms
Align Form Controls
CSS
a {cursor: move;
}
CSS: Lists, Tables and Forms
Cursor Styles
RESULT
CSS: Lists, Tables and Forms
Cursor Styles
CSS
img.large {width: 500px;height: 500px;}img.medium {width: 250px;height: 250px;}img.small {width: 100px;height: 100px;}
CSS: Images
Controlling Image Size
RESULT
CSS: Images
Controlling Image Size
CSS
img.align-left {float: left;margin-right: 10px;}
img.align-right {float: right;margin-left: 10px;}
CSS: Images
Aligning Images
RESULT
CSS: Images
Aligning Images
CSS
img.align-center {display: block;margin: 0px auto;}
img.medium {width: 250px;height: 250px;}
CSS: Images
Centering Images
RESULT
CSS: Images
Centering Images
CSS
p {background-image: url("images/pattern.gif");
}
CSS: Images
Background Images
RESULT
CSS: Images
Background Images
CSS
body {background-image: url("images/header.gif");
background-repeat: repeat-x;}
CSS: Images
Background Images Repeating
RESULT
CSS: Images
Background Images Repeating
CSS
body {background-image: url("images/tulip.gif");
background-repeat: no-repeat;background-attachment: fixed;}
CSS: Images
Background Images Fixed
RESULT
CSS: Images
Background Images Fixed
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
RESULT
CSS: Images
Background Images Positioning
CSS
body {background: #ffffff url("images/
tulip.gif") no-repeat top right;}
CSS: Images
Shorthand
RESULT
CSS: Images
Shorthand
CSS: Images
Image Rollovers and Sprites
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
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
RESULT
CSS: Images
Image Rollovers and Sprites
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
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
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
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.
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
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
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
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
RESULT
CSS: Layout
Normal Flow
CSS
p.example {position: relative;top: 10px;left: 100px;
}
CSS: Layout
Relative Positioning
RESULT
CSS: Layout
Relative Positioning
CSS
h1 {position: absolute;top: 0px;left: 500px;width: 250px;}
p {width: 450px;}
CSS: Layout
Absolute Positioning
RESULT
CSS: Layout
Absolute Positioning
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
RESULT
CSS: Layout
Fixed Positioning
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
RESULT
CSS: Layout
Overlapping Elements: z-index
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
RESULT
CSS: Layout
Floating Elements
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
RESULT
CSS: Layout
Floating Elements Side-by-Side
CSS
p {width: 230px;float: left;margin: 5px;padding: 5px;background-color: #efefef;}
.clear {clear: left;
}
CSS: Layout
Clearing Floats
RESULT
CSS: Layout
Clearing Floats
CSS
div {border: 1px solid #665544;}
CSS: Layout
Floating Elements Problem
RESULT
CSS: Layout
Floating Elements Problem
CSS
div {border: 1px solid #665544;overflow: auto;width: 100%;
}
CSS: Layout
Floating Elements Solution
RESULT
CSS: Layout
Floating Elements Solution
CSS
.column1of2 {float: left;width: 620px;margin: 10px;}
.column2of2 {float: left;width: 300px;margin: 10px;}
CSS: Layout
Multi-Column Layouts with Floats
RESULT
CSS: Layout
Multi-Column Layouts with Floats
CSS: Layout
Simple Grid Layout
In Class Assignment
Try to incorporate what we discussed today into your website.
- Lists- Forms- Tables- Images- Layout
Homework
Finish programming your homepage and post your HTML and CSS code to your blogs.