fwd week2 tw-20120903
DESCRIPTION
TRANSCRIPT
![Page 1: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/1.jpg)
FWD - Week 2 Fundamentals of Web Design
Course Director: Terry Weber
![Page 2: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/2.jpg)
AgendaReview Week 2 AssignmentsContent Management SystemsHTML & CSSOpen Discussion
![Page 3: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/3.jpg)
Week 2 AssignmentsDiscussion 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
![Page 4: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/4.jpg)
Content Management SystemsTypes of CMS
◦General purpose◦Blog◦E-commerce◦Discussion Forums◦Photo and video galleries
![Page 5: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/5.jpg)
Content Management SystemsOpen 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)
![Page 6: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/6.jpg)
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>
![Page 7: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/7.jpg)
Structure of an HTML5 Page
![Page 8: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/8.jpg)
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.
![Page 9: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/9.jpg)
Most Common HTML Tags- <h1>Heading 1</h1>
- <h2>Heading 2</h2>
- <h3>Heading 3</h3>
- Up to <h6>Heading 6</h6>
![Page 10: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/10.jpg)
HTML Tag Examples
![Page 11: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/11.jpg)
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.)
![Page 12: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/12.jpg)
CSS Rule
Property/value pair within curly braces:
![Page 13: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/13.jpg)
Applying CSSHTML tags
IDsOne per page
ClassesMultiple per page (commonly
used styles)
![Page 14: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/14.jpg)
CSS Selectors – HTML Tags
To style all “p” tags to use a red font color:
p {color: red;}
Result:<p>All of the font in the “p” tag is
red.</p>
![Page 15: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/15.jpg)
CSS Selectors – IDs
To 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”>All of the font in the
“footer” p tag is red.</p>
![Page 16: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/16.jpg)
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”>All of the font in this “summary”
p tag is red.</p>
![Page 17: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/17.jpg)
CSS Code Can Be UsedInternal
In the “<head>” area of the HTML page
InlineWithin an HTML tag (p, div, span)
ExternalIn a separate .css file
![Page 18: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/18.jpg)
CSS Examples – On HTML Page
<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>
![Page 19: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/19.jpg)
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>
![Page 20: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/20.jpg)
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>
![Page 21: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/21.jpg)
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
![Page 23: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/23.jpg)
TypographySans-serif:
{font-family: Arial, Helvetica, sans-serif}Serif:
{font-family: “Times New Roman”, serif}http://font-family.com/
![Page 24: Fwd week2 tw-20120903](https://reader033.vdocuments.mx/reader033/viewer/2022061114/5458b214af79590b088b5500/html5/thumbnails/24.jpg)
Open DiscussionWimba = Wednesday at 7 pm EST