Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Fwd week2 tw-20120903
Similaire à Fwd week2 tw-20120903 (20)
Dernier
Dernier (20)
Fwd week2 tw-20120903
- 1. FWD - Week 2 Fundamentals of Web Design Course Director: Terry Weber
- 2. Agenda Review Week 2 Assignments Content Management Systems HTML & CSS Open Discussion
- 3. Week 2 Assignments Discussion Board: Content Management Systems ◦ Initial post due Wednesday ◦ Second post due Monday A Minimal HTML & CSS Document - due Monday ◦ Select Aptana or Dreamweaver CS5 to use ◦ Watch video tutorial ◦ Zip up and submit to FSO Blog - due Monday ◦ Add RSS widget ◦ Add RSS feed
- 4. Content Management Systems Types of CMS ◦ General purpose ◦ Blog ◦ E-commerce ◦ Discussion Forums ◦ Photo and video galleries
- 5. Content Management Systems Open source vs. closed ◦ Consider: Availability of documentation Number of developers Add-on modules Security Support Integration with the company’s other software (e.g., CRM)
- 6. HTML Tags - Based on tags (“markup” language) - Most tags have a beginning and end: - <p>Text here…</p> - Beginning tag in brackets:<p> - Ending tag in brackets with a slash after the first bracket: </p>
- 7. Structure of an HTML5 Page
- 8. Most Common HTML Tags - <div>…</div> - Div (a “bucket” for content) - <p>…</p> - Paragraph (text) - <span>…</span> - Used inline, such as within a <p> tag to change the style.
- 9. Most Common HTML Tags - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - Up to <h6>Heading 6</h6>
- 11. Cascading Style Sheets (CSS) - Tells the browser: - where content should be placed on the page - how it should look (color, font style, borders, background image, etc.)
- 12. CSS Rule Property/value pair within curly braces:
- 13. Applying CSS HTML tags IDs One per page Classes Multiple per page (commonly used styles)
- 14. CSS Selectors – HTML Tags To style all “p” tags touse a red font color: p {color: red;} Result: <p>Allof the font in the “p” tag is red.</p>
- 15. CSS Selectors – IDs To style one specific “p” tag on the page use a “#” sign and assign it an “id”: p#footer {color: red;} Result: <p>The font in this regular “p” tag is black.</p> <p id=“footer”>Allof the font in the “footer” p tag is red.</p>
- 16. CSS Selectors – Classes To style certain “p” tags on the page use a “.” sign and assign it a “class”: p.summary{color: red;} Result: <p class=“summary”>All of the font in this “summary” p tag is red.</p> <p>The font in this regular “p” tag is black.</p> <p class=“summary”>Allof the font in this “summary” p tag is red.</p>
- 17. CSS Code Can Be Used Internal In the “<head>” area of the HTML page Inline Within an HTML tag (p, div, span) External In a separate .css file
- 18. CSS Examples – On HTML Page <html> <head> <meta charset=“utf-8”> <title>Title of page</title> <style> p {color: red;} </style> </head> <body> <p>This font is red.</p> </body> </html>
- 19. CSS Examples – Inline <html> <head> <meta charset=“utf-8”> <title>Title of page</title> <style> p {color: red;} </style> </head> <body> <p> This font is <span style=“color:blue;”>blue</span>. </p> </body> </html>
- 20. CSS Examples – External <html> <head> <meta charset=“utf-8”> <title>Title of page</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <p>This font is red.</p> </body> </html>
- 21. Color Theory Red: Passion, Love, Anger Orange: Energy, Happiness, Vitality Yellow: Happiness, Hope, Deceit Green: New Beginnings, Abundance, Nature Blue: Calm, Responsible, Sadness Purple: Creativity, Royalty, Wealth Black: Mystery, Elegance, Evil Gray: Moody, Conservative, Formality White: Purity, Cleanliness, Virtue Brown: Nature, Wholesomeness, Dependability Tan/Beige: Conservative, Piety, Dull Cream: Calm, Elegant, Purity
- 22. Color Theory http://kuler.adobe.com
- 23. Typography Sans-serif: {font-family: Arial, Helvetica, sans-serif} Serif: {font-family: “Times New Roman”, serif} http://font-family.com/
- 24. Open Discussion Wimba = Wednesdayat 7 pm EST