-
Days: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Description
Students are introduced to the fundamentals of Xhtml (Extensible Hypertext Markup Language), Css (Cascading Style Sheets) and the concept of semantic web design, which strives to make the web “meaningful” to both people and machines. Through theory and practice, students will learn to design and create hand coded, standards compliant web pages.
Hours of Instruction
40 hours of instruction and 10 hours of lab time.
Learning Objectives
Students will be able to hand-code websites using current web design best practices, incorporating Xhtml 1.0 Transitional and css 2.1. Also, students will have a basic understanding of:
- Usability
- Asset management
- Accessibility issues
- Cross-browser design issues
- Search Engine Optimization (seo)
Curriculum
Day 1
Define web design by focusing on the differences between web and print documents, and analyzing real world examples.
File structure and workspace organization: Show students how web pages are stored, file and site management, project planning, how links work.
Assign Personal Portfolio project, due at the end of Day Nine. Assign website mock up, due start of Day Five.
Day 2
Layout grids and the importance of sketching/planning page designs before coding them.
Introduction to semantic coding (separation of structure and design in a web document).
Xhtml tags:
<!DOCTYPE />, <HTML>, <HEAD>, <TITLE>, <BODY>, <DIV>, <IMG />, <H1>, <H2>, <H3>, <P>, <BR />and the ID attribute.Create basic pages using these tags and lorem ipsem text generated by http://www.lipsum.com.
Day 3
Introduction to CSS; three ways to incorporate style rules to a web page; creating an external style sheet and linking it to the pages created the day before. Explain why tableless design is necessary.
Xhtml tags:
<LINK />, <EM>, <STRONG>, <SPAN>, <A>and the CLASS and ID attributes.Css properties: padding, margin, font-family, font-size, colour, background, border and position.
Add styles to pages created the day before, change size and position and other attributes of these pages within the stylesheet.
Day 4
Image optimization and selection for portfolio. Differences between illustrative and decorative images.
Xhtml tags:
<IMG /> and the ALT and TITLE attributes.Css pseudo-classes: A:LINK, A:VISITED, A:HOVER, A:ACTIVE.
Day 5
Lists: proper uses of lists, organizing information in lists, creating two- and three-columned page layouts using lists and Css.
Xhtml tags:
<UL>, <OL> and <LI>Xhtml & Css exam (two hours).
Day 6
Review internal and external links.
Work on final project.
Day 7
Writing for the web and Search Engine Optimization (SEO).
Work on final project.
Xhtml tag:
<META />.Day 8
Website accessibility.
Work on final project.
Day 9
Work on final project.
Day 10
Work on project until end of Hour 3 (if necessary).
Review projects for remainder of the day.
Text
Castro, Elizabeth. HTML, XHTML & CSS: Sixth Edition. Peachpit Press, Berkley, CA. 2007.
Evaluation
- Portfolio Website 60% (Due at the start of Hour 3 on Day 10). Grade break down:
- (10%) sitemap and folder structure
- (10%) comply with specifications
- (10%) no broken links
- (15%) website plan
- (15%) overall design
- (20%) standards compliant style sheet
- (20%) standards compliant XHTML
- Xhtml & Css exam: 25%
- Attendence, Attitude and Work Habits 15%