ProfBurnett.com

ITI 133 HTML5 Desktop and Mobile Level I - Session III

Session Outline:

  • Chapter 5 - How to use the CSS box model for spacing, borders, and backgrounds
  • Chapter 6 - How to use CSS for page layout

Class Presentations

Chapter 5 Presentation

Chapter 6 Presentation

Student Exercises

Student Exercise 1

  • 1. Complete Exercise 4-1, page 160 using Dreamweaver.
  • 2. In this exercise the "town_hall_1" directory has been replaced by the "ch04" directory in the Exercise 4 Zip file.
  • 3. In this exercise the "styles" directory has been replaced by the "css" directory.
  • 4. Replace the Javascript script for the html5shiv.googlecode.com/svn/trunk/html5.js with the modernizr.custom.01309.js file in the downloaded exercise files. Place the modernizr.custom.01309.js in a seperate js subdirectory for the website.
  • 5. Students will upload files to live site.
  • 6. Students will preview in browser website files.
  • 7. Download link for files for Exercise 4-1 Zip file.

Student Exercise 2

  • 1. Complete Exercise 5-1 and 5-2, page 193 using Dreamweaver.
  • 2. In this exercise the "town_hall_1" directory has been replaced by the "ch05" directory in the Exercise 5 Zip file.
  • 3. In this exercise the "styles" directory has been replaced by the "css" directory.
  • 4. Students will upload files to live site.
  • 5. Students will preview in browser website files.
  • 6. Download link for files for Exercise 5-1 & 5-2 Zip file.

Student Exercise 3

  • 1. Complete Exercise 6-1, 6-2 and 6-3, page 227 using Dreamweaver.
  • 2. In this exercise the "town_hall_1" directory has been replaced by the "ch06" directory in the Exercise 6 Zip file.
  • 3. In this exercise the "styles" directory has been replaced by the "css" directory.
  • 4. Students will upload files to live site.
  • 5. Students will preview in browser website files.
  • 6. Download link for files for Exercise 6-1, 6-2, & 6-3 Zip file.

Session 3 Support Links

MC Web for Students Site: ITI 133-Summer 2015-CRN:41206

General Computer Files & Windows Skills

Keyboard Shorcuts

General Web Development Links

Wireframe Design Apps

Free Cloud Based

IDE's

Free Web Design IDEs

Free Web Development IDEs

Downloadable DesktopWeb Development Apps

Cloud Based Web Development

Cloud-Based Web Development Sites

Online Website Builder Sites

Learning Management Systems (LMS)

CSS Links

CSS Minifiers

CSS Precompilers

CSS Postprocessors

CSS Tools

jQuery Links

jQuery Forms

Slideshows, Carousels, Graphic Plugins & Components

Calendar & Datepicker jQuery Plugins

JavaScript Minifiers

RWD Testing Emulators

Browser Plugin Apps

Imaging Programs

WSDL, SOAP, REST, & ODATA Introduction and Resources