Embed Size (px)
DESCRIPTION
Citation preview
FWD - Week 2 Fundamentals of Web Design
Course Director: Terry Weber
AgendaReview Week 2 AssignmentsContent Management SystemsHTML & CSSOpen Discussion
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
Content Management SystemsTypes of CMS
◦General purpose◦Blog◦E-commerce◦Discussion Forums◦Photo and video galleries
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)
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 Rule
Property/value pair within curly braces:
Applying CSSHTML tags
IDsOne per page
ClassesMultiple per page (commonly
used styles)
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>
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>
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>
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
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>
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
TypographySans-serif:
{font-family: Arial, Helvetica, sans-serif}Serif:
{font-family: “Times New Roman”, serif}http://font-family.com/
Open DiscussionWimba = Wednesday at 7 pm EST
