Your SlideShare is downloading. ×
Fwd week2 tw-20120903
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fwd week2 tw-20120903


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. FWD - Week 2Fundamentals of Web DesignCourse 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 ManagementSystems Types of CMS ◦ General purpose ◦ Blog ◦ E-commerce ◦ Discussion Forums ◦ Photo and video galleries
  • 5. Content ManagementSystems 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>
  • 10. HTML Tag Examples
  • 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 RuleProperty/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 TagsTo 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 – IDsTo 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 – ClassesTo 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 HTMLPage<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 TheoryRed: Passion, Love, AngerOrange: Energy, Happiness, VitalityYellow: Happiness, Hope, DeceitGreen: New Beginnings, Abundance, NatureBlue: Calm, Responsible, SadnessPurple: Creativity, Royalty, WealthBlack: Mystery, Elegance, EvilGray: Moody, Conservative, FormalityWhite: Purity, Cleanliness, VirtueBrown: Nature, Wholesomeness,DependabilityTan/Beige: Conservative, Piety, DullCream: Calm, Elegant, Purity
  • 22. Color Theory
  • 23. Typography Sans-serif:  {font-family: Arial, Helvetica, sans-serif} Serif:  {font-family: “Times New Roman”, serif}
  • 24. Open Discussion Wimba = Wednesdayat 7 pm EST