Creating HTML Content Files for ANGEL

File Structure, Using Dreamweaver, Exporting with CASE, and Uploading to ANGEL

File Structure

WC Template v. casedata, Exporting casedata, and How CASE Generates Lesson Pages

WC Template Sites v. casedata Upload & export to the actual

live registered site Upload to non-published area

on our server and export ZIP files that are downloaded to a desktop and uploaded to ANGEL

Upload to casedata/coursefolder

Image files within individual lesson folders (ex: casedata/course/content/lesson03/images)

Image files in a standalone user/coursefolder/images directory

Upload to user/coursefolder

File Structure: WC Template

lesson01_01.shtmllesson01_02.shtml

lesson01

lesson02_01.shtml

lesson02

content

lesson01fig01.giflesson01fig02.giflesson02fig01.gif

images

coursefolder(ex: abc123sp06)

user(https://courses.worldcampus.psu.edu)

File Structure: casedata

lesson01_01.htmllesson01_02.html

content.css

corefiles

lesson01fig01.giflesson01fig02.gif

images

lesson01

lesson02_01.html

content.css

corefiles

lesson02fig01.gif

images

lesson02

content

content.css

corefiles lesson.dwt

Templates

coursefolder(ex: abc123sp06)

casedata(not a published site)

Exporting casedata: Individual ZIPs

lesson01_01.html

corefiles

images

lesson01

lesson02

content

Templates

coursefolder(ex: abc123sp06)

corefiles

images

lesson01_01.html

print.html

toc.html

lesson01.zip("Baby ZIP")

lesson02.zip("Baby ZIP")

abc123sp06.zip("Mama ZIP")

How CASE Generates Lesson Pages

Using Dreamweaver

Setting Up a Site, Using a Template, and Using CSS

Step 1: Setting Up a Site in Dreamweaver

SiteNew Site. Use the following:

– Site Name: abc123su06_ANGEL– Site URL: leave blank– Server Technology: none– Name your local copy: abc123su06_ANGEL– Connection: FTP– Hostname: splogin.cac.psu.edu– Server:

/.../dce.psu.edu/fs/services/www/wdwebct/webct/casedata/abc123su06/– FTP Login & Password: your access account– Check SFTP– No check in/check out

The next time you set up a site you can choose SiteManage SitesDuplicate and make minor changes.

Step 2: Using the Dreamweaver Template

Use WindowFiles to download the remote site.

FileNew. Click on Templates, select your site and click lesson and Create.

Save in lesson01 as lesson01_01.html.

Replace insert_title with the page title.

Replace Insert Content Here with your page content

Step 3: Using CSS in Dreamweaver

Styles defined within an HTML page will not be included in the CASE export.

Styles should be created in or moved to your content.css stylesheet.

Make all of your lesson folders have the same copy (all of the same styles in the same order) of corefiles/content.css by copying your latest updated content.css into every folder.

Give your files a descriptive name, like pinktext, smallCenter, or courierFont so you know which one to use.

How to Apply an Existing Style Method 1: Highlight the text you want to

change, right click, and select the style from a list.

Method 2: Highlight the text, go to TextCSS Styles, and choose a style.

Method 3 (Best Way): Under Window, make sure Properties is checked. Now when you highlight the text you can see the CSS styles from a drop-down list in the Properties Pane.

How to Create a New Style

Use the right-click or TextCSS method and go to New.

You can select a class, tag, or ID. (For now use a class.)

Give it a descriptive name. Make sure it is defined in content.css. Set the ONLY the properties you need so

you can reuse the styles later. Make sure the latest copy of content.css

is in every lesson/corefiles folder.

Types of CSS Definitions: Classes

Preceded by a period. Example:

font-weight: bold;font-variant: small-caps;color: #003366;text-align: center;

} Applied only if this class is used. (Example: <h3 class=“specialHeading”>My Title</h3>)

– .specialHeading {–

Types of CSS Definitions: Tags

Not preceded by a period or pound sign. Example:

font-weight: bold;font-variant: small-caps;color: #003366;text-align: center;

} Applied automatically any time the tag is used. (Ex: All <h1> tags will be in this style.)

– h1 {–

Types of CSS Definitions: IDs

Preceded by a pound sign. Example:

vertical-align: middle;border: 1px outset #000000;background-position: center center;

} Can only be used once per page; called specifically. (Example: <img

id=“mainImage” src=“myPicture.jpg”/>)

– #mainImage {––

CSS Tip: Setting Hyperlink Behaviors

You can set link properties for links, active links, hovering over links, and visited links:

a:link {color: #FFFFFF !important;

}

a:hover {font-weight: bold;color: #99FF00 !important;/*for no underline:*/text-decoration: none;

}

a:active {font-weight: bold;color: #99FF99 !important;/*for no underline:*/text-decoration: none;

}

a:visited {color: #FFFF00 !important;

}

Exporting With CASEChoosing an Export, Downloading the ZIP

File, and Uploading to ANGEL

Step 1: Choosing an Export

Individual ZIP Files

You can split up your lessons into individual TOC files that can be placed in separate lesson folders.

This is the best way to debug your export because you can narrow the problem down to a specific lesson.

ZIP File for All Content

You can have a single content link with a TOC of all lessons and link to assignments and quizzes directly from your content.

You use special design templates along with themes in ANGEL to give the course a more appealing look.

Step 2: Downloading the ZIP File

When the export is completed, click on the link, “You can access the results of your export here.”

Choose to Save (download) the file. If you choose an individual ZIP files export, like

“Traditional WC Look”, you will need to unzip the downloaded file to access the smaller lesson ZIP files.

Don’t worry; your export makes no changes to the files on our server.

Step 3: Uploading to ANGEL

On the Lessons tab choose, Add ContentAdd a File.

Select the ZIP file to upload, title it Table of Contents, and Upload.

DO NOT CLICK OK! Instead, select the toc.html from the Default File listing and click Extract Files.

Summary of Steps… Set up the site in Dreamweaver. Download the server content from casedata. Create new files from the lesson.dwt template. Use and/or add styles to content.css. Make sure all copies of content.css within each

lesson/corefiles folder are identical and have all of your styles.

Upload content. Choose export option, export, and download ZIP

files from CASE. Upload the files to ANGEL.