The document summarizes Week 2 of a fundamentals of web design course. It outlines assignments due, including posts on content management systems and creating an HTML/CSS document. It then covers content management systems, HTML tags and structure, CSS rules and selectors for styling pages, and color theory and typography for design.
1. FWD - Week 2
Fundamentals of Web Design
Course 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 Management
Systems
Types of CMS
◦ General purpose
◦ Blog
◦ E-commerce
◦ Discussion Forums
◦ Photo and video galleries
5. Content Management
Systems
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>
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>
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.)
13. Applying CSS
HTML tags
IDs
One per page
Classes
Multiple per page (commonly used
styles)
14. CSS Selectors – HTML Tags
To 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 – 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”>Allof the font in the “footer” p
tag is red.</p>
16. CSS Selectors – Classes
To 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 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>
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>
