Creating HTML Content Files for ANGEL

1. Creating HTML Content Files for ANGEL File Structure, Using Dreamweaver, Exporting with CASE, and Uploading to ANGEL

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

3. 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 WC Template Sites v. casedata • Upload to user/coursefolder • Upload to casedata/coursefolder • Image files in a standalone user/coursefolder/imagesdirectory • Image files within individual lesson folders (ex: casedata/course/content/lesson03/images)

4. File Structure: WC Template

5. File Structure: casedata

6. Exporting casedata: Individual ZIPs

7. How CASE Generates Lesson Pages

8. Using Dreamweaver Setting Up a Site, Using a Template, and Using CSS

9. Step 1: Setting Up a Site in Dreamweaver • SiteNew 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 SiteManage SitesDuplicate and make minor changes.

10. Step 2: Using the Dreamweaver Template • Use WindowFiles to download the remote site. • FileNew. 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

11. 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.

12. 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 TextCSS 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.

13. How to Create a New Style • Use the right-click or TextCSS 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.

14. Types of CSS Definitions: Classes • Preceded by a period. • Example: .specialHeading { 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>)

15. Types of CSS Definitions: Tags • Not preceded by a period or pound sign. • Example: h1 { 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.)

16. Types of CSS Definitions: IDs • Preceded by a pound sign. • Example: #mainImage { 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”/>)

17. 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; }

18. Exporting With CASE Choosing an Export, Downloading the ZIP File, and Uploading to ANGEL

19. 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 1: Choosing an Export

20. 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.

21. Step 3: Uploading to ANGEL • On the Lessons tab choose, Add ContentAdd 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.

22. 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.