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

Fwd week2 tw-20120903






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Fwd week2 tw-20120903 Fwd week2 tw-20120903 Presentation Transcript

  • 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 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
  • Content ManagementSystems Types of CMS ◦ General purpose ◦ Blog ◦ E-commerce ◦ Discussion Forums ◦ Photo and video galleries
  • 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)
  • 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>
  • Structure of an HTML5 Page
  • 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.
  • 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 should look (color, font style, borders, background image, etc.)
  • 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” tag is red.</p>
  • 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>
  • 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>
  • 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
  • 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>
  • 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>
  • 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>
  • 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
  • Color Theory http://kuler.adobe.com
  • Typography Sans-serif:  {font-family: Arial, Helvetica, sans-serif} Serif:  {font-family: “Times New Roman”, serif} http://font-family.com/
  • Open Discussion Wimba = Wednesdayat 7 pm EST