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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
391
On Slideshare
391
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 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