Zip File Import into Canvas


What it is…

You compress a number of HTML files, Cascading Style Sheets (CSS), images, documents into a single file and import everything at once.

Why do it…

Zip File Import into Canvas provides interactive pages with consistent navigation, style and color. You import a complete Website and everything works.

What it accomplishes…

  • Saves Time
  • Decreases Trivial/ Busy Work
  • Organizes Work
  • Provides a Consistent “Look and Feel”
  • Content can be updated with Global Editors, then imported

Zip File Import into Canvas gives your course a professional look.

When not to Use it…

Avoid this strategy if the content changes a lot, or when you need to use the same content in multiple courses. Once you import the Zip File, you need to make changes outside Canvas, and re-import.

Don’t try this for an entire course.

How to do it…

Collect HTML, CSS, Images, Documents, Mind Maps, Charts, Graphs… one folder and compress with a Zip Utility. Then Import the file into Canvas. Link to the pages as Canvas content pages.

Step #1

Build a working HTML/ CSS system (Website)

Step #2

Test the links within the system

Step #3

Compress everything into one file

Step #4

Import into Canvas

Step #5

Link the Internal Pages in your course modules

Strategy/ Tactics

Consider the HTML/ CSS System as a course components boilerplate.

Goals/ Objectives

Save time creating consistent pages with navigation that functions inside Canvas


Customized pages function inside Canvas

Taking Action

Use an HTML or Text Editor to create content and interlink pages with a navigation system.

Free HTML templates are available.

Cascading Style Sheets (CSS) are not required, but make editing fast and easy because you make only one change to the code for an entire site.

Adobe Dreamweaver is a high-end, professional program. If you have access to Dreamweaver, use it.

HTML Kit is a professional product. The previous version is free.

If you use tables in your design, avoid What you See is What you Get (WYSIWYG) editors.

Tools/ What you need…

  • Software – Text or HTML Editor.

Resource Materials

Free HTML Editors

HTML Page Templates