CMT-111: HTML & Dreamweaver

This course teaches the student the principles and concepts of designing and creating WEB pages in an HTML format. The course is designed to expose the student to the constructs of HTML tags, the attribute modification of HTML tags, the incorporation of CSS tags, CSS pseudo tags, dynamic effects using styles, and class assignments. Additionally, the course will teach the student the utilization of graphics and dynamic graphics used in Web design. Also included will be content presentation control via HTML tables, HTML layers, and HTML frames. The course will explore the requirements, tools and controls used in WEB page development by lecture, in-class practical exercises, and home study exercises. The course will also teach the student to create WEB sites using Dreamweaver as a state-of-the-art web authoring tool to enable rapid deployment of WEB development projects. Register for this class at BHCC website.

 

Sample Class Syllabus: click here.

 

Assignments

This chapter introduces students to the concept and terms that are needed to work with HTML and CSS. After completing this chapter, students will have the background needed for learning how to build web sites.

 

Lessons
How Web Applications Work
An Introduction to HTML and CSS
Tools for Web Development
How to View Deployed Web Pages
Three critical Web Development Issues

 

Labs
1.1 Creating Website Directory Folders

 

This chapter reviews how to create and edit HTML and CSS files, how t test those files and to make sure they work correctly. Students will also learn how to validatre the code in students to the concept and terms that are needed to work with HTML and CSS. After completing this chapter students will be able to code, test and validate HTML and CSS files to make sure that the file doesn't contain errors.

 

Lessons
The HTML Syntax
The CSS Syntax
Using a Code Editor to work with HTML and CSS files
How to Test, debug, and validate HTML and CSS files

 

Labs
2.1 Planning A Website

2.2 Creating Your First Website

 

Additional Resouces
W3C Validation Service for HTML
W3C Validation Service for CSS

 

 

This chapter focuses on how to code the HTML elements that you'll use in most of the documents you create. After completing this chapter, students will know how to properly setup the structure of a Web page, create the head section, code the text elements and create the structure for the body element using HTML5 semantic elements. Students will also create links, list and include images on their website and review site folder setup.

 

Lessons
How to Code the Head Section
How to Code text elements
How to structure the content of a page
How to code links, list, and images

 

Lab: How to Use HTML to Structure a Web Page
Lab 3.1 Habitat for Humanity
Lab 3.2 Colorado Mountain Family Resort

 

This chapter will look at how to code the CSS rule sets that determine how the page is formatted. Students will learn how to code selectors, and how to code the properties and values for rule sets. After completing this chapter students will be able to code all types of selectors, and how to apply the CSS properties for formatting text.

 

Lessons
An Introduction to CSS
How to Specify Meaurements and Colors
How to Code Selectors
How to Work with Text

 

Labs:
4.1 Adding CSS to the Habitat for Humanity Website
4.2 Adding CSS to the Colorado Mountain Family Resort Website

 

This chapter will build on the CSS that was presented in the previous chapter and focus on the properties for controlling the spacing between elements and for displaying borders and backgrounds. After completing this chapter students will be able apply how to use the CSS box model for those purposes.

 

Lessons
An Introduction to the Box Model
How to Size and Space Elements
A Web Page that Illustrates Sizing and Spacing
How to Set Borders and Backgrounds

 

Labs:
5.1 How to Apply the CSS Box Model to the Habitat for Humanity Page
5.2 Applying the Box Model to Colorado Mountain Family Resort

 

This chapter will focus on how to use CSS to control the layout of a page. You will be able to control where each of the HTML elements appear on a page. After completing this chapter students will be able to implement 2- and 3-column page layouts.

 

Lessons
How to Float Elements in 2- and 3-Column Layouts
Two Web Pages That Use a 2-Column, Fixed-Width Layout
How to Use CSS to Create Text Columns
How to Position Elements

 

Labs:
6.1 How to Use CSS for Page Layout Habitat for Humanity

6.2 How to Use CSS for Page Layout Colorado Mountain Family Resort

 

This chapter build on the skills that were introduced in previous Lessons. Students will review those skills and then expand on them by learning how to create Navigation Lists and Bars and how to create placeholder links (also known as jump links).

 

Lessons
How to Code Lists
How to Format Lists
How to Code Links
How to Create Navigation Lists and Bars

 

Labs:
7.1 Habitat for Humanity – Adding Lists and Links
7.2 Colorado Mountain Family Resort –Adding Lists and Links

 

The Midterm Project is design for students to take the skills they have learned in the first 7 Chapters and create an HTML 5 Web Site to showcase their knowledge.

 

Midterm Project Phases
Research the Site Topic
Creating a Storyboard
Creating a Wireframe
Building the site
Peir Review and Presentations
Sample Site

 

Chapter 8 focuses on Responsive Web Design. By using Responsive Web Design in the development of a web site the page will automatically resize to the device that is accessing the information.

 

Lessons
Using Responsive Design

 

Labs:
8.1 Responsive Web Design Habitat for Humanity

 

This chapter will look at the three common formats for images, how to adjust the size of an image using attriutes and applying CSS to for alignment with the aid of block elements. This chapter will also look at new HTML5 image elements and how to apply them. Finally, we will look at creating thumbnails, image rollovers and image mapping.

 

Lessons
Basic Skills for Working with Images
Advanced Skills for Working With Images
Related Skills for Working With Images

 

Labs:
9.1 How to Work with Images

 

This chapter will look at how HTML5 has changed the way tables are used on the page. Tables are still an important element but are no longer used to create the structure of the page. Tables are now used to display tabular data and present information. After creating tables we will look how to apply CSS for formatting and how to make them accessable to visually impared users.

 

Lessons
Basic skills for using tables
Other skills working with tables

 

Labs:
10.1 How to work with tables

This chapter will look at how to create a dynamic web page using HTML5 to crate forms that let the user enter data. Then, the user can click on a button to submit the data to a web server for processing. In this chapter, students will learn how to code forms and the controls they contain. We will also examin the new HTML5 features for data validation and how to use the new HTML5 controles.

 

Lessons
How to Use Forms and Controls
Other Skills for Working With Forms
How to Use the HTML Features for Data Validation
How to Use the HTML5 Controls

 

Labs:
11.1 HFH Forms
11.2 CMFR Forms

 

Lessons
An introduction to media on the web
How to add audio and video to a web page
A web page that offers both audio and video

 

Labs:
12.1 Adding Media to the HFH site
12.2 Adding Media to the CMFR site

Student ePortfolio Project

 

Lab Samples

Habitat for Humanity

Colorado Mountain Family Resort

Midterm Project

Sample ePortfolio

 

Student Sites

Fall 2016

Spring 2016

Find Jeannette on Social Media

  • Facebook Facebook
  • LinkedIn LinkedIn
  • YouTube YouTube
  • Follow @jrpassanisi Twitter