0
FWD - Week 2Fundamentals of Web DesignCourse Director: Terry Weber
Agenda Review Week 2 Assignments Content Management Systems HTML & CSS Open Discussion
Week 2 Assignments   Discussion Board: Content Management    Systems    ◦ Initial post due Wednesday    ◦ Second post due...
Content ManagementSystems   Types of CMS    ◦   General purpose    ◦   Blog    ◦   E-commerce    ◦   Discussion Forums   ...
Content ManagementSystems   Open source vs. closed    ◦ Consider:        Availability of documentation        Number of...
HTML Tags-   Based on tags (“markup” language)-   Most tags have a beginning and end:     - <p>Text here…</p>     -   Begi...
Structure of an HTML5 Page
Most Common HTML Tags-   <div>…</div>    -   Div (a “bucket” for content)-   <p>…</p>    -   Paragraph (text)-   <span>…</...
Most Common HTML Tags-   <h1>Heading 1</h1>-   <h2>Heading 2</h2>-   <h3>Heading 3</h3>-   Up to <h6>Heading 6</h6>
HTML Tag Examples
Cascading Style Sheets(CSS)-   Tells the browser:     - where content should be placed on the       page     - how it shou...
CSS RuleProperty/value pair within curly braces:
Applying CSS   HTML tags   IDs      One per page   Classes      Multiple per page (commonly used       styles)
CSS Selectors – HTML TagsTo style all “p” tags touse a red font color: p {color: red;}Result:<p>Allof the font in the “p” ...
CSS Selectors – IDsTo style one specific “p” tag on the page use a  “#” sign and assign it an “id”:  p#footer {color: red;...
CSS Selectors – ClassesTo style certain “p” tags on the page use a “.”  sign and assign it a “class”:  p.summary{color: re...
CSS Code Can Be Used Internal    In the “<head>” area of the HTML page Inline    Within an HTML tag (p, div, span) Ex...
CSS Examples – On HTMLPage<html>   <head>   <meta charset=“utf-8”>   <title>Title of page</title>   <style>      p {color:...
CSS Examples – Inline<html>    <head>    <meta charset=“utf-8”>    <title>Title of page</title>    <style>        p {color...
CSS Examples – External<html>   <head>   <meta charset=“utf-8”>   <title>Title of page</title>   <link href="css/style.css...
Color TheoryRed:        Passion, Love, AngerOrange:     Energy, Happiness, VitalityYellow:     Happiness, Hope, DeceitGree...
Color Theory   http://kuler.adobe.com
Typography   Sans-serif:      {font-family: Arial, Helvetica, sans-serif}   Serif:      {font-family: “Times New Roman...
Open Discussion   Wimba = Wednesdayat 7 pm EST
Upcoming SlideShare
Loading in...5
×

Fwd week2 tw-20120903

336

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
336
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Fwd week2 tw-20120903"

  1. 1. FWD - Week 2Fundamentals of Web DesignCourse Director: Terry Weber
  2. 2. Agenda Review Week 2 Assignments Content Management Systems HTML & CSS Open Discussion
  3. 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. 4. Content ManagementSystems Types of CMS ◦ General purpose ◦ Blog ◦ E-commerce ◦ Discussion Forums ◦ Photo and video galleries
  5. 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. 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. 7. Structure of an HTML5 Page
  8. 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. 9. Most Common HTML Tags- <h1>Heading 1</h1>- <h2>Heading 2</h2>- <h3>Heading 3</h3>- Up to <h6>Heading 6</h6>
  10. 10. HTML Tag Examples
  11. 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. 12. CSS RuleProperty/value pair within curly braces:
  13. 13. Applying CSS HTML tags IDs  One per page Classes  Multiple per page (commonly used styles)
  14. 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. 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. 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. 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. 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. 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. 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. 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. 22. Color Theory http://kuler.adobe.com
  23. 23. Typography Sans-serif:  {font-family: Arial, Helvetica, sans-serif} Serif:  {font-family: “Times New Roman”, serif} http://font-family.com/
  24. 24. Open Discussion Wimba = Wednesdayat 7 pm EST
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×