This document provides instructions for creating HTML page templates. It describes how to: 1. Download a template folder from Google Docs using provided credentials. 2. Create new pages by saving the main.html page as index.html and blog.html. Add links to these pages in the main.html navigation. 3. Save the main.html content as an editable region template that can then be applied to other pages to maintain a consistent layout. Instructions are provided for converting the template to a one-column or two-column layout.

1. Create A Template
• Download folder from Google Docs
Username: USCiml140
Password: imlpassword
• IML 140 Template 1 (contents):
css folder
main.html
vuvox url

2. Create A Template
• Create new pages and “save as”:
index.html
blog.html
video.html

3. Create A Template
• Add links to topnav on main.html
home = index.html
blog = blog.html
video = video.html
“save all”

4. Open main.html (source code)
1.File > Save as template
2.Name new template 2-column
3.Update links? YES
4.In code view- highlight text and images in content area
5.Insert > Template objects > Editable region
6.Name
7.Save all
8.Then apply template to pages:
A. Modify > Templates > Add template to page

5. Create A Template
Create a new HTML page
• File > New > HTML 5
delete code and paste code from
main.html so we have two
identical pages, but save the
other as main-wide.html
• In code view:
• Delete entire “right-side” div
• Change name of “content” div to “content-
wide” and “save all”

6. Open main.html (source code)
1.Highlight entire <div id="right-side"> </div> and delete
2.Change <div id="content"> to <div id="content-wide">
3.Save all
4.Click CSS stylesheet
5.Add #content-wide { width: 100%; } under #content
6.Save all
7.File > Save as template
8.Name new template 1-column
9.Update links? YES
10.In code view- highlight text and images in content area
11.Insert > Template objects > Editable region
12.Name
13.Save all

7. Add new template to page
1.Open video.html
2.We already have a template connected to this page
3.Modify > Templates > Detach template from page
4.Click code view
5.Highlight all code and delete
6.Now we will add the new template
7.Modify > Templates > Apply template to page
8.Save all
9.Copy all contents from vuvox.doc on desktop
10.Delete images and paste in embed code
11.Save all
12.Open in browser