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.
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Fwd week2 tw-20120903
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>