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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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