1 / 117

Today’s objectives

Today’s objectives. Review CSS Selectors Web Development process Review: Layout and positioning Measurement units Images/Photoshop. Rules, Selectors, Declarations. CSS. The Rule. Rule. h1 { color : #c0c0c0; font-family : Arial; font-size : 2em; }. Selector. Declaration block.

aiko-mathews
Download Presentation

Today’s objectives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Today’s objectives • Review CSS Selectors • Web Development process • Review: Layout and positioning • Measurement units • Images/Photoshop

  2. Rules, Selectors, Declarations CSS

  3. The Rule Rule h1 { color : #c0c0c0; font-family : Arial; font-size : 2em; } Selector Declaration block

  4. The Declaration h1 { color : #c0c0c0; font-size : 2em; } p { font-family : Arial; } • Semicolon separates declarations • Colon separates property and values • Brackets distinguish declarations | rules

  5. Types of selectors CSS

  6. 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

  7. Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}

  8. 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>

  9. Types of selectors | Dependent Classes • 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>

  10. 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>

  11. 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>

  12. HTML Tree: relationship of one element to another.

  13. 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>

  14. HTML Tree <html> Ancestor to all tags Ancestor to h1, p, strong <head> <body> Descendent of <html> <title> <h1> <p> Descendent of <html> and <head> Siblings <strong> Child of <p>

  15. 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>

  16. 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

  17. 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.

  18. 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>

  19. 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.

  20. Attribute selectors

  21. Attribute Selectors • Format a tag based on any attributes it has. img[title] {border : solid 4px #EFEFEF;} <imgsrc=“image.png” title=“CO XYZ” /> All images with a title attribute will have a border

  22. Attribute Selectors | ^ and $ Format external links: a[href^="http://"] { color : yellow; } ^ - begins with Any link that begins with “http://” is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.

  23. 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.

  24. Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;} <img src="banner_Ire.png“ /> <img src="banner.png“ />

  25. 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; }

  26. Pseudo-Classes • Proper way to order four link pseudo-classes: • a:link { color: #F60; } • a:visited { color: #900; } • a:hover { color: #F33; } • a:active {color: #B2F511; } • If order is changed, the hover and active don’t work.

  27. 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; }

  28. 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>

  29. Selectors • http://gallery.theopalgroup.com/selectoracle/ • Type selectors to understand why they do

  30. Web Design & Development process

  31. 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.

  32. Development process Teague (2009): • Plan site • Build site • Deploy site • Iterate the process

  33. Iterative design process • User Analysis:What to know about the users? • Task Analysis:What are users’ goals? Tasks? • Environment analysis: What are users’ surroundings and what impact do they have? • Recruiting users: Where can you find them? • Usability specifications: What specs will you choose for rating your site/software? McCracken, 2004

  34. What is involved in the process? • Identifying needs and establishing requirements • Developing alternative designs to meet these needs • Building interactive prototypes that can be communicated and assessed • Evaluating what is being built throughout the process

  35. Core characteristics of process • Users should be involved in the development of the project. • Specific usability and user goalsneed to be identified, clearly documented and agreed at the beginning of the project. • Iteration is needed through core activities.

  36. Planning

  37. 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.

  38. 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.

  39. 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.

  40. 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.

  41. 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.

  42. 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.

  43. 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.

  44. 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.

  45. Planning • Must be clear about your expectations and resources early on in the process, particularly when attempting to work within a budget.

  46. Analysis: Understanding problem So you examined: • Problem | Need | Context | Environment • Users • Tasks • Project Goals and objectives. Now, move to design

  47. Designing & Producing

  48. Conceptualizing design space From Analysis/ Problem Space Source: www.theaterxtremeseattle.com/

  49. Conceptualizing design space From Analysis/problem space to design space: • A thorough analysis or good understanding of the problemspace helps inform the design space

  50. Create and Organize Content • Collect and organize content • Always remember… Content is still king on the Internet

More Related