![Page 1: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/1.jpg)
Today’s objectives
Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop
![Page 2: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/2.jpg)
RULES, SELECTORS, DECLARATIONS
CSS
![Page 3: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/3.jpg)
The Rule
h1 { color : #c0c0c0;
font-family : Arial;
font-size : 2em;
}
Selector
Declaration block
Rule
![Page 4: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/4.jpg)
The Declaration
h1 { color : #c0c0c0; font-size : 2em;
}
p { font-family : Arial;}
Brackets distinguish declarations | rules
Colon separates property and values
Semicolon separates declarations
![Page 5: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/5.jpg)
TYPES OF SELECTORS
CSS
![Page 6: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/6.jpg)
Types of selectors
Tag or HTML Selectors: Page-Wide Styling Class Selectors: Pinpoint Control ID Selectors: Specific Page
Elements/sections
Group Selectors: h1, h2, h3, h4, h5, h6 { color : #F1CD33; }
Child selectors: div > h1 {color : blue; } Adjacent Siblings: h1+p {color : green;} Attribute Selectors
![Page 7: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/7.jpg)
Types of selectors | HTML | Tag
h1 {color : #c0c0c0;}body {background-color : #FFFFFF;}p {padding : 10px;}
![Page 8: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/8.jpg)
Types of selectors | Classes
Classes (apply to more than one type of element)
.mytext {font-family: Verdana; font-size: 14px;}
<p class=“mytext”>Hello World</p>
<span class=“mytext”>Learning CSS</span>
![Page 9: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/9.jpg)
Dependent Classes (when the class is applied to a specific tag - .hiLight only applies to h1 element)
h1.hiLight {background-color : blue;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
Types of selectors | Dependent Classes
![Page 10: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/10.jpg)
Types of selectors | ID
ID selectors identify: Major sections Unique content | a rule to ONE element on a page. Configured with #idname
#banner { background-color : #FF00FF;}
<div id=“banner”></div>
![Page 11: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/11.jpg)
Types of selectors | ID
Creates a rule for an id titled “banner”.
Red, large, italic font.
Applies to ID “banner”<style type="text/css">
#banner { color : #FF0000;font-size:2em; font-style: italic;
}
</style>
<h1 id=“banner”>Hello world!
</h1>
![Page 12: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/12.jpg)
HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.
![Page 13: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/13.jpg)
HTML Tree
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>
A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>
![Page 14: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/14.jpg)
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<strong>
Ancestor to all tags
Ancestor to h1, p, strong
Siblings
Child of <p>
Descendent of <html>
Descendent of <html> and <head>
![Page 15: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/15.jpg)
HTML Tree
Ancestor: tag that wraps around another tag. <html> ancestor of all other tags
Descendent: A tag inside one or more tags. Parent: tag’s closest ancestor
<p><a>HOME</a></p>
Child: tag directly enclosed by another tag.<p><cite><a>HOME…</a></cite></p>
![Page 16: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/16.jpg)
Specificity | Descendent selectors
Specific descendent selectors override less specific selectors
li a {color : green;} All anchors in line items are green
ol li a {color : green;}Only anchors in line item in ordered lists
are green
![Page 17: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/17.jpg)
Selectors | Descendent selectors
p.intro { color : red;}<p class=“intro”>Hello World</p>
Any paragraph with .intro class will be Red.
p .intro {color : red;}<p>Hello <span class=“intro">
World</span</p>
Any tag with .intro class that is in a <p> tag will be Red.
![Page 18: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/18.jpg)
Child selectors
div > h1 {color : blue; } All heading 1 that are children of div will be
blue.
<div><h1>Hello world</h1><h1>Hello everyone</h1>
</div>
![Page 19: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/19.jpg)
Adjacent Siblings
A tag that appears immediately after another tag in HTML
h1+p {color : green;}
Paragraphs that are adjacent to heading 1 will be green.
![Page 20: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/20.jpg)
ATTRIBUTE SELECTORS
![Page 21: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/21.jpg)
Attribute Selectors
Format a tag based on any attributes it has.
img[title] {border : solid 4px #EFEFEF;}
<img src=“image.png” title=“CO XYZ” />
All images with a title attribute will have a border
![Page 22: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/22.jpg)
Attribute Selectors | ^ and $Format external links:
a[href^="http://"] { color : yellow; }
^ - begins withAny link that begins with “http://” is yellow
a[href$=".zip"] { color : green; }$ - Ends withAny link URL that ends with “zip” is green.
![Page 23: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/23.jpg)
Attribute Selectors | *
img[src*="Ire"] {border : solid 5px green;}
<img src="banner_Ire.png“ />
All images where src attribute contains “Ire” get a green, solid border.
![Page 24: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/24.jpg)
Attribute Selectors | *
img[src*="Ire"] {border : solid 5px green;}
<img src="banner_Ire.png“ />
<img src="banner.png“ />
![Page 25: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/25.jpg)
Pseudo-Classes
a:link | a:link { color : #EFEFEF; } a:visited | a:visited { color :
#CCCCCC; } a:hover | a:hover { color : # F33333; } a:active | a:active {color : #B2F511;}
Hover: (these will also work) h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }
![Page 26: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/26.jpg)
Pseudo-Classes
Proper way to order four link pseudo-classes:
1. a:link { color: #F60; }2. a:visited { color: #900; }3. a:hover { color: #F33; }4. a:active {color: #B2F511; }
If order is changed, the hover and active don’t work.
![Page 27: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/27.jpg)
Pseudo-elements
:first-letter –
p:first-letter {font-size : 2em;
font-weight: bold;color: red;}
:first-line –
p:first-line { font-size : 2em;
font-weight: bold;color: red;}
.hiLite:first-line { text-transform: uppercase; }
![Page 28: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/28.jpg)
Pseudo-element | :first-child:first-child the first of all children an OL may have.
ol li:first-child { font-size:1.2em; }
<ol>
<li>Item 1</li>
<li>Item 2 </li><li>Item 3 </li></ol>
![Page 29: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/29.jpg)
Selectors
http://gallery.theopalgroup.com/selectoracle/
Type selectors to understand why they do
![Page 30: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/30.jpg)
WEB DESIGN & DEVELOPMENT PROCESS
![Page 31: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/31.jpg)
Development process
Developing a website generally involves:1. Conceptualize and research.2. Create and organize content.3. Develop the “look and feel.”4. Produce a working prototype.5. Testing.6. Launching the site.7. Maintaining the site.
![Page 32: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/32.jpg)
Development process
Teague (2009):1. Plan site2. Build site3. Deploy site4. Iterate the process
![Page 33: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/33.jpg)
Iterative design process
1. User Analysis: What to know about the users?
2. Task Analysis: What are users’ goals? Tasks?
3. Environment analysis: What are users’ surroundings and what impact do they have?
4. Recruiting users: Where can you find them?
5. Usability specifications: What specs will you choose for rating your site/software?
McCracken, 2004
![Page 34: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/34.jpg)
What is involved in the process?
1. Identifying needs and establishing requirements
2.Developing alternative designs to meet these needs
3.Building interactive prototypes that can be communicated and assessed
4.Evaluating what is being built throughout the process
![Page 35: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/35.jpg)
Core characteristics of process
1.Users should be involved in the development of the project.
2.Specific usability and user goals need to be identified, clearly documented and agreed at the beginning of the project.
3. Iteration is needed through core activities.
![Page 36: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/36.jpg)
PLANNING
![Page 37: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/37.jpg)
Planning
Robbins (2007) suggests that before doing any development work, ask the client numerous questions related to: resources, goals, and, audience – very important.
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 38: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/38.jpg)
Planning
Questions to ask clients during the research phase of design.Strategy Why are you creating this web site? What do you expect to accomplish? What are you offering your audience? What do you want users to do on your web
site? And after they’ve left? What brings your visitors back?
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 39: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/39.jpg)
Planning: Questions for clients
General Site Description What kind of site is it? (promotional?
Informational?) What features will it have? What are your most important messages? Who are your competitors? What are they
doing right? What could be improved upon?
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 40: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/40.jpg)
Planning: Questions for clients
Target Audience Who is the primary audience? How Internet-savvy are they? How technically
savvy? What can you determine about user’s
connection speed? Platform? Monitor size? Browser use?
How often do you expect them to visit your site?
How long will they stay during an average visit?
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 41: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/41.jpg)
Planning : Questions for clients
Content Who is responsible for generating original
content? How will content be submitted (process and
format)? How often will the information be updated
(daily, weekly, monthly)?
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 42: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/42.jpg)
Planning : Questions for clients
Resources What resources have been dedicated to the
project (e.g., budget, staff, time)? Does site require content management
system? Who handles maintenance? Is there a server for your site?
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 43: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/43.jpg)
Planning : Questions for clients
Visual design Envisioning a certain look and feel for the
site? Do existing standards (logos and colors)
need to be incorporated? Is site part of a larger site? What are some other web sites you like? What do you like about them? What sites do you NOT like?
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 44: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/44.jpg)
Planning
Often large web development firms spend more time on researching and identifying clients’ needs than on any other stage of production.
They conduct case studies, interviews, and extensive market research.
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 45: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/45.jpg)
Planning
Must be clear about your expectations and resources early on in the process, particularly when attempting to work within a budget.
![Page 46: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/46.jpg)
Analysis: Understanding problem
So you examined: Problem | Need | Context | Environment Users Tasks Project Goals and objectives.
Now, move to design
![Page 47: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/47.jpg)
DESIGNING & PRODUCING
![Page 48: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/48.jpg)
From Analysis/Problem Space
Conceptualizing design space
Source: www.theaterxtremeseattle.com/
![Page 49: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/49.jpg)
Conceptualizing design space
From Analysis/problem space to design space:
A thorough analysis or good understanding of the problem space helps inform the design space
![Page 50: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/50.jpg)
Create and Organize Content
Collect and organize content
Always remember…
Content is still king on the Internet
![Page 51: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/51.jpg)
Plan site
1. Make sketches2. Define site structure - 3. Decide page flow
Fixed width/fluid height Fluid width/fluid height Fixed width/fixed height Fluid width /fixed height
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
![Page 52: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/52.jpg)
Plan site
4. Make wireframes Help in planning structure of pages Serve as blueprints for development Should include placement and
measurement of elements in pixels Wireframe Example
![Page 53: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/53.jpg)
Plan site | wireframes
Elements/information to include in wireframe: Fixed/fluid layout Widths Heights Margins/padding Scrolls lines Colors
![Page 54: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/54.jpg)
Source: Heim, S. (2008), p. 190
Wireframes
![Page 55: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/55.jpg)
Page size & Layout
Page layouts to accommodate users:
Fixed width (http://www.corvusart.com/)
Fluid width (http://simplebits.com/)
Elastic – (http://www.mirella-furlan.de/)
![Page 56: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/56.jpg)
Plan site
Mood boards Visual compositions (comps)
Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.
![Page 57: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/57.jpg)
Flowchart symbols
Source: Hannafin & Peck
Blueprint/specifications
![Page 58: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/58.jpg)
Flowcharts
Visio PowerPoint
![Page 59: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/59.jpg)
DESIGNING & PRODUCING
Prototype | Model
![Page 60: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/60.jpg)
Prototyping and construction
•Different kinds of prototypinglow fidelityhigh fidelity
•Compromises in prototypingvertical horizontal
![Page 61: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/61.jpg)
Macro Flowchart vertical
Lesson 1
Begin Lesson
Lesson Menu 1 - 6
Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6No No No No No
Begin Lesson 1 Begin Lesson 2 Begin Lesson 3 Begin Lesson 4 Begin Lesson 5 Begin Lesson 6
Present 1
Question 1
Correct ?
Lesson Menu
Negative Feedback
Yes Yes Yes Yes Yes Yes
Etc. Etc. Etc. Etc. Etc.
Present 2
No
Yes
Glossary
Quit
End Program
No
Yes
![Page 62: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/62.jpg)
Macro Flowchart
Horizontal
Lesson 1
Begin Lesson
Lesson Menu 1 - 6
Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6No No No No No
Begin Lesson 1 Begin Lesson 2 Begin Lesson 3 Begin Lesson 4 Begin Lesson 5 Begin Lesson 6
Present 1
Question 1
Correct ?
Lesson Menu
Negative Feedback
Yes Yes Yes Yes Yes Yes
Etc. Etc. Etc. Etc. Etc.
Present 2
No
Yes
Glossary
Quit
End Program
No
Yes
![Page 63: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/63.jpg)
Flowchart Horizontal
![Page 64: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/64.jpg)
Site Map
Horizontal
Vertic
al
![Page 65: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/65.jpg)
Low-fidelity Prototyping
• Uses a medium which is unlike the final medium, e.g. paper, cardboard
• Is quick, cheap and easily changed
• Examples:• Sketches of screens, task sequences, etc.• Post-it notes• Storyboards
![Page 66: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/66.jpg)
Low-fidelity Prototype
Source: Heim, S. (2008), p. 188
![Page 67: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/67.jpg)
Prototypes Wireframe (web)
• Sketches of basic screen design and layout.
• Sketches of how users might progress through a task.
• Developed from flowcharts and low-fidelity prototypes
• Illustrator, PowerPoint, etc.
![Page 68: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/68.jpg)
Source: Heim, S. (2008), p. 190
Wireframes
![Page 69: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/69.jpg)
High-fidelity prototyping
• Uses materials that may be in final product.
• More like final system than low-fidelity.
• For a high-fidelity prototype, common
environments include Adobe Flash and Visual
Basic, Dreamweaver.
![Page 70: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/70.jpg)
DESIGNING & PRODUCING
Build site
![Page 71: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/71.jpg)
Build
Cutting Chrome Use background images Transparent png Photoshop/Illustrator, etc. Use grids for layout (http://960.gs/)
![Page 72: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/72.jpg)
Build
Create styles guide | Guide should include information about: Topography – font families, sizes, styles Colors – list colors used in site with
hexadecimal and RGB values List default styles – fonts, sizes, colors,
backgrounds Chrome – show images and file names.
![Page 73: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/73.jpg)
Build
Prototype Define HTML structure Create CSS
Organize CSS Segment or combine styles? - How will you
handle this? Loading styles - @import, LINK? - How will you
handle this?
![Page 74: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/74.jpg)
TESTING & DELIVERY
![Page 75: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/75.jpg)
Deploy
Alpha – site not released Beta – site made available to public –
not promoted.
Usability testing Analytics
Iterations
![Page 76: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/76.jpg)
LAYOUTS
![Page 77: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/77.jpg)
Layouts
Fixed Width - regardless of the browser window’s width, the page content’s width remains the same.
Liquid. Design adjusts to fit the browser’s width
Elastic. A fixed width with type size flexibility. Define page’s width using em values. em changes size when the browser’s font size
changes Page width is based on the browser’s base font size.
![Page 78: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/78.jpg)
<div id=“wrapper”>
<div id=“banner”> </div
<div id=“nav”> </div>
<div id=”mainContent”> </div>
<div id=“siteInfo”> </div>
</div>
Page Layout
• DIVs used often to section document• DIVs given IDs• CSS formats IDs or sections
![Page 79: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/79.jpg)
<div id=“wrapper”>
<h1 id=“banner”></h1>
<ul id=“nav”><li>Home</li><li>About</li><li>Buy</li><li>Customer Service</li>
</ul>
<div id=”mainContent”> </div>
<p id=“siteInfo”> </p>
</div>
Page Layout
• Do not overuse DIVs• If another element can be used, use it
![Page 80: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/80.jpg)
<div id=“banner”>1. BANNER</div>
<div id=“nav”>2. NAVIGATION</div>
<div id=“content”>3. CONTENT</div>
1.BANNER
2 3.CONTENT
FLOAT LEFT
L
Normal Flow
#nav {float : left;}
![Page 81: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/81.jpg)
1.BANNER
23.CONTENT
FLOAT RIGHT
R
Normal Flow
<div id=“banner”>1. BANNER</div>
<div id=“nav”>2. NAVIGATION</div>
<div id=“content”>3. CONTENT</div>
#nav {float : right;}
![Page 82: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/82.jpg)
FLOAT Left & RIGHT
1.BANNER
34.CONTEN
T
R
2
L
Normal Flow(notice sequence of content)
<div id=“banner”>1. BANNER</div>
<div id=“nav”>2. NAVIGATION</div>
<div id=“content”>4. CONTENT</div>
<div id=“events”>3. EVENTS</div>
#nav {float :left;}#events {float :right;} With left and right floats,
content fills in the middle space
![Page 83: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/83.jpg)
1.BANNER
43.CONTEN
T
FLOAT Left & RIGHT
R
2
L L
<div id=“banner”>1. BANNER</div>
<div id=“nav”>2. NAVIGATION</div>
<div id=“content”>3. CONTENT</div>
<div id=“events”>4. EVENTS</div>
#nav {float :left;}#content {float :left;}#events {float :right;}
Section 3 wraps to the right of section 2
Normal Flow(notice sequence of content)
![Page 84: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/84.jpg)
1.BANNER
4. EVENTS
3.CONTENT
Without Floats
2. NAVIGATION
<div id=“banner”>1. BANNER</div>
<div id=“nav”>2. NAVIGATION</div>
<div id=“content”>3. CONTENT</div>
<div id=“events”>4. EVENTS</div>
Without floats, sections appear as they do in the normal document flow.
Normal Flow(notice sequence of content)
![Page 85: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/85.jpg)
<div id=“wrapper”>
Normal Flow | Box | Wrapper
<div id=“banner”>1. BANNER</div>
<div id=“nav”>2. NAVIGATION</div>
<div id=“content”>3. CONTENT</div>
<div id=“events”>4. EVENTS</div>
</div>
Set properties at wrapper level to affect the properties of children of the wrapper.
![Page 86: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/86.jpg)
Wrapper
banner
NavContent Events
Site Information
![Page 87: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/87.jpg)
<html>
<body>
<div id="wrapper“><div id="banner">banner</div><div id="nav">nav</div><div id="content">content</div><div id="events">events</div><div id="footer">footer</div>
</div>
</body>
</html>
![Page 88: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/88.jpg)
LAYOUT | THE GOLDEN RATION
![Page 89: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/89.jpg)
The Golden Ratio
Visual appeal based on ratio (i.e. The Golden Ratio).
Studies suggest the golden ratio plays a role in human perception of beauty.
A common ratio that is aesthetically pleasing. What is the number? 1.62.
Source: http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design
![Page 90: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/90.jpg)
The Golden Ratio
Take total width of your content area (e.g., 900px).
Divide that by 1.62.
Divide 900px by 1.62 and get 555.55px.
![Page 91: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/91.jpg)
The Golden Ratio
9001.62 = 555 px
900 PX
![Page 92: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/92.jpg)
The Golden Ratio
900 PX
555 px 345 px
![Page 93: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/93.jpg)
The Golden Ratio
Apply the Golden Ratio to other element's width in relation to its height or vice-versa.
![Page 94: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/94.jpg)
The Golden Ratio
W- 300 PX
3001.62 = 185 px H-185 PX
![Page 95: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/95.jpg)
940PX
580PX
![Page 96: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/96.jpg)
The Golden Ratio
A + B
B
A
Source: http://www.deltaflow.com/?p=199
1 : 1.67 = iPod
![Page 97: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/97.jpg)
POSITIONING
![Page 98: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/98.jpg)
Positioning
CSS offers four types of positioning: Absolute Relative Fixed Static
![Page 99: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/99.jpg)
Absolute Positioning
Absolute : Specify left, right, top, or bottom position. Detached from normal flow of page. Other elements fill-in the space left by an
absolutely position element. Absolutely positioned element is
placed relative to the boundaries of its closest ancestor.
![Page 100: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/100.jpg)
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
<img src=“photo.jpg” alt=“logo” width=“200” height=“150” />
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut abore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Position in Document Flow
Absolute Positioning
Original space in doc flow is filled in.
![Page 101: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/101.jpg)
Relative positioning
Relative. Element placed relative to its current
position in the normal document flow. Other elements do NOT fill in the space left
in the document flow.
![Page 102: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/102.jpg)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,</a> quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Position in Document FlowRelative Positioning
Positioned Relative to its position in document flow
![Page 103: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/103.jpg)
Positioning Rules
Element positioned relative to the browser window if: it has an absolute position and it’s not inside any other tag that has
absolute, relative, or fixed positioning applied to it.
Element positioned relative to the edges of another element if: it’s inside another tag with absolute,
relative, or fixed positioning.
![Page 104: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/104.jpg)
Fixed & Static Positioning
Fixed. Element is locked into place on the screen.
Static. Normal positioning method – where an
element appears in the normal document flow.
![Page 105: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/105.jpg)
PADDING, MARGINS, ANDBORDERS
CSS
![Page 106: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/106.jpg)
Padding, Margins, andBorders Web browsers treat all html elements as
boxes.
A tag is a box with content inside (text, graphic or other html element).
![Page 107: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/107.jpg)
Padding, Margins, and Borders
HELLO WORLD!
TOP PADDING
RIGHT PADDING
LEFT PADDING
BOTTOM PADDING
TOP MARGIN
BOTTOM MARGIN
LEF
T M
AR
GIN
RIG
HT
MA
RG
IN
RIG
HT
BO
RD
ER
LEF
T B
OR
DE
R
TOP BORDER
BOTTOM BORDER
Other Element
Other Element
Oth
er E
lem
ent
Oth
er E
lem
ent
![Page 108: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/108.jpg)
Padding: space between the content and the content’s border.
Separates content from its border.
HELLO WORLD!
TOP BORDER
PADDING
PADDING
PA
DD
ING
PA
DD
ING
Padding, Margins, and Borders
![Page 109: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/109.jpg)
Border: line drawn around each edge of the box.
Can be four sides, on any single side, or any combination of sides.
HELLO WORLD!
Padding, Margins, and Borders
![Page 110: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/110.jpg)
Border style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. groove: Defines a 3D grooved border. ridge: Defines a 3D ridged border. inset: Defines a 3D inset border. outset: Defines a 3D outset border.
HELLO WORL
D!
Padding, Margins, and Borders
![Page 111: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/111.jpg)
Background-color: fills space inside border, including padding area.
Margin separates one element from another.
Padding, Margins, and Borders
![Page 112: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/112.jpg)
Margins
HELLO WORLD!
TOP MARGIN
LE
FT
MA
RG
IN
RIG
HT
MA
RG
IN
Other Element
Other Element
Oth
er E
lem
ent
Oth
er E
lem
ent
BOTTOM MARGIN
![Page 113: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/113.jpg)
Padding adds space between the content, and the border.
Margins add white space (gutter) between elements.
Padding, Margins, and Borders
![Page 114: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/114.jpg)
Four properties control padding: padding-top, padding-right, padding-bottom, and padding-left.
Four properties control margin edges: margin-top, margin-right, margin-bottom, and margin-left.
margin-top : 5px;margin-right : 5px;margin-bottom : 5px;margin-left : 5px;
padding-top : 5px;padding-right : 5px;padding-bottom : 5px;padding-left : 5px;
padding: 10px 5px 5px 10px;margin: 0 10px 10px 20px;
Padding, Margins, and Borders
![Page 115: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/115.jpg)
margin-top : 5px;margin-right : 5px;margin-bottom : 5px;margin-left : 5px;
padding-top : 5px;padding-right : 5px;padding-bottom : 5px;padding-left : 5px;
padding: 10px 5px 5px 10px;margin: 0 10px 10px 20px;
The order of the four values is: top, right, bottom, and left.
TRouBLe - Top, Right, Bottom, and Left.
Shortcut
Padding, Margins, and Borders
![Page 116: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/116.jpg)
When value is 0, don’t need measurement unit (e.g., em, px).
Use margin: 0; instead of margin: 0px;.
When same value for all four sides, use a single value margin: 5px;
Padding, Margins, and Borders
![Page 117: Today’s objectives Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop](https://reader035.vdocuments.net/reader035/viewer/2022062422/56649eda5503460f94bea09f/html5/thumbnails/117.jpg)
When same value for both top and bottom and another value for left and right, use two values:
margin : 0 2em;
Sets top and bottom margins to 0 ; left and right margins to 2ems.
Padding, Margins, and Borders