View
227
Download
0
Category
Preview:
Citation preview
Today’s objectives
Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop
RULES, SELECTORS, DECLARATIONS
CSS
The Rule
h1 { color : #c0c0c0;
font-family : Arial;
font-size : 2em;
}
Selector
Declaration block
Rule
The Declaration
h1 { color : #c0c0c0; font-size : 2em;
}
p { font-family : Arial;}
Brackets distinguish declarations | rules
Colon separates property and values
Semicolon separates declarations
TYPES OF SELECTORS
CSS
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
Types of selectors | HTML | Tag
h1 {color : #c0c0c0;}body {background-color : #FFFFFF;}p {padding : 10px;}
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>
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
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>
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>
HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.
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>
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>
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>
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
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.
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>
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.
ATTRIBUTE SELECTORS
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
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.
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.
Attribute Selectors | *
img[src*="Ire"] {border : solid 5px green;}
<img src="banner_Ire.png“ />
<img src="banner.png“ />
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; }
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.
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; }
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>
Selectors
http://gallery.theopalgroup.com/selectoracle/
Type selectors to understand why they do
WEB DESIGN & DEVELOPMENT PROCESS
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.
Development process
Teague (2009):1. Plan site2. Build site3. Deploy site4. Iterate the process
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
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
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.
PLANNING
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.
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.
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.
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.
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.
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.
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.
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.
Planning
Must be clear about your expectations and resources early on in the process, particularly when attempting to work within a budget.
Analysis: Understanding problem
So you examined: Problem | Need | Context | Environment Users Tasks Project Goals and objectives.
Now, move to design
DESIGNING & PRODUCING
From Analysis/Problem Space
Conceptualizing design space
Source: www.theaterxtremeseattle.com/
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
Create and Organize Content
Collect and organize content
Always remember…
Content is still king on the Internet
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.
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
Plan site | wireframes
Elements/information to include in wireframe: Fixed/fluid layout Widths Heights Margins/padding Scrolls lines Colors
Source: Heim, S. (2008), p. 190
Wireframes
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/)
Plan site
Mood boards Visual compositions (comps)
Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.
Flowchart symbols
Source: Hannafin & Peck
Blueprint/specifications
Flowcharts
Visio PowerPoint
DESIGNING & PRODUCING
Prototype | Model
Prototyping and construction
•Different kinds of prototypinglow fidelityhigh fidelity
•Compromises in prototypingvertical horizontal
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
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
Flowchart Horizontal
Site Map
Horizontal
Vertic
al
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
Low-fidelity Prototype
Source: Heim, S. (2008), p. 188
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.
Source: Heim, S. (2008), p. 190
Wireframes
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.
DESIGNING & PRODUCING
Build site
Build
Cutting Chrome Use background images Transparent png Photoshop/Illustrator, etc. Use grids for layout (http://960.gs/)
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.
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?
TESTING & DELIVERY
Deploy
Alpha – site not released Beta – site made available to public –
not promoted.
Usability testing Analytics
Iterations
LAYOUTS
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.
<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
<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
<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;}
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;}
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
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)
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)
<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.
Wrapper
banner
NavContent Events
Site Information
<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>
LAYOUT | THE GOLDEN RATION
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
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.
The Golden Ratio
9001.62 = 555 px
900 PX
The Golden Ratio
900 PX
555 px 345 px
The Golden Ratio
Apply the Golden Ratio to other element's width in relation to its height or vice-versa.
The Golden Ratio
W- 300 PX
3001.62 = 185 px H-185 PX
940PX
580PX
The Golden Ratio
A + B
B
A
Source: http://www.deltaflow.com/?p=199
1 : 1.67 = iPod
POSITIONING
Positioning
CSS offers four types of positioning: Absolute Relative Fixed Static
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.
<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.
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.
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
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.
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.
PADDING, MARGINS, ANDBORDERS
CSS
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).
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
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
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
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
Background-color: fills space inside border, including padding area.
Margin separates one element from another.
Padding, Margins, and Borders
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
Padding adds space between the content, and the border.
Margins add white space (gutter) between elements.
Padding, Margins, and Borders
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
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
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
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
Recommended