To Temple CollegeIMED 2311 logoR. Craig Collins > IMED 2311 > Lab 8

Lab 8 UNDER CONSTRUCTION © R. Craig Collins, 2009

General Lab Directions
Note: There is not enough time in lecture to cover all the material; read your book BEFORE you begin the lab
Note: Typically labs will require you to invest some time in the lab, outside of class lecture hours

•Note: Please read the related overview material before continuing
Check with your Instructor for due date, typically Friday, 11:59PM (see due dates)

   •Theory introduced in Lab 8 (link to theory part of lab)
   •Begin creating, editing, and modifying documents for Lab 8 (link to activity requirements)
   •Answer questions concerning topics covered in Lab 8
     (You will later transfer this information into a D2L quiz)

At the end of this process,
1) you will submit the document files by zipping them, and placing them in the Desire2Learn dropbox area. Instructions on zipping are below.
2) you will be 'turning in' your documentation and Q&A by taking the Lab 8 quiz in the Quizzes area of Desire2Learn. So, to get the best score, complete the documentation and Q&A as directed below, first.

 

 

 

Part 1: Documentation, (30%)
  
At the end of this process, you will be turning in answers using the Quizzes area of Desire2Learn, based on the following. So, to get the best score, fill in all the answers in this document first.

Theory

   • Intro to Dreamweaver (includes links to making and using backgrounds, and tables)

A note about structure:
In the folder that you will store your web site in, create the default document that will open if no other document is specified... this is typically called index.html. Also create sub directories that will contain your content.

Example: exploring the contents of your lab8 folder:

index.html

Folderpages
                 page1.htm or images.htm, etc.
                 page2.htm or documents.htm
                 page3.htm or media.htm
Folderimages
                 bg.gif (a background image)
                 artifact.png
                 artifact.jpg
Foldermedia
                 audio1.mp3
                 video1.avi
                 video1.swf
Folderdocs
                 doc1.pdf
                 doc2.pdf
                 doc2.pdf

Thoughts on text format
Leverage your knowledge of word processors to use Bold, Italic, paragraph alignment, and formatting paragraphs, such as headlines. All of this is ABOVE the Page Properties when text is selected.
Dreamweaver page properties

Thoughts on organization

You might want to use a table, as illustrated below.

[Banner]
Navigation Content
Navigation
Navigation
Navigation

Real World Example: (For advanced users: this effect may be also be achieved with frames, but the end result is the same)

NISOD Web Design

More coming soon


Part 2, Activity (40%):

Planning (30%)

 • Create some sort of plan for your capstone web site on paper. You may make a Word document, or draw something and scan it;
     your plan should include what the index page (the page that opens when no other is specified... your HOME page) will look like and the links it will have;
     your plan should include what you want your color scheme and backgrounds to be;
     your plan should include what you want supporting pages to look like (try and keep a consistent look and feel); and
     your plan should include navigation, that is, how your user will get from index to various pages, and how they will get back to the index

Web site structure (10%)

Your web site structure must include a rough draft index.html, a pages folder, a documents folder, an images folder, and a media folder
(All other web pages will go in pages, all your pdfs will go in documents, pngs, gifs, and jpgs in images, and movies in media... you do not need everything copies over now, but I need to see the structure, and maybe that you have copied a few artifacts over)


The long term plan

 • Web site
   • Create a lab8 folder
   • Within the lab8 folder, create a folder called pages, media, docs, and images

 • Populate the images folder
    • Copy one or more Free background images, or, Creating a background or optimize an image for background use, save in lab8\images
    • Copy one or images from previous labs for web display, save in lab8\images
    • Using Photoshop, create or optimize other image for use in the web page, save in lab8\images
    For lab 9 and lab 10 you will need more image artifacts

 • Populate the docs folder
    • Copy one or more pdfs from previous labs and save in lab8\docs
    • Using Acrobat, create pdfs and save in lab8\docs
    For lab 9 and lab 10 you will need more document artifacts

 • Populate the media folder
    • Copy one or more movies from previous labs and save in lab8\media
    • Create additional movies and save in lab8\media
    For lab 9 and lab 10 you will need more document artifacts

 • Using Dreamweaver
   • Create and save a file named index.html in the lab8 folder
   • Adjust the text, background, and title settings
   • Using Dreamweaver, implement your web page design, including a table, image, link, and formatted text.
 • Save project as index.html

 • Populate the pages folder
    • Copy index.html and modify it as a template for your images display page (jpg) and save in lab8\pages
    • Create an additional web page to display printable images (png) and save in lab8\pages
    • Create an additional web page to display a movie and save in lab8\pages
    • Create an additional web page to with links to your pdfs and save in lab8\pages
    For lab 9 and lab 10 you will need more document artifacts


To Zip, browse to the the location of lab8 folder (don't open the folder) and your 'plan' document
Right click the Lab8 folder
Choose Send To...
Choose Compressed (Zipped) Folder
 
You may rename the new zip by right clicking it.
The file name should be yourname-lab8.zip

Grading Points

  • 30 points for design document, including:
    planned text color and link colors,
    planned background color and
    planned background image,
    starting text,
    planned table usage, and
    planned link items and layout;
  • lab 8 folder contains a draft index.html and correct folders, perhaps with a few copied artifacts
    Zip should have the filename and all files submitted correctly, 10 points

Part 3: Hands On (60%): Be prepared to discuss editing a web page

Question 1 (10 points)
You should choose both a background color and background image because the background image may fail to load; by using the background color you will still have a similar look and feel for you web page.
Question 2 (10 points)

The title of a web page appears within the main window of the browser, along with the text and images

Question 3 (10 points)
Background images should be
Question 4 (10 points)
The FULL URL for Temple College is
www.templejc.edu
Question 5 (10 points)
Alternative text is added to images to provide support for
challenged users
Question 6 (10 points)
Tables can be used to organize web pages, and can contain text, links, and images.

 

Problems? Zip the entire folder and attach to an email:
       •Send the mail to your instructor, cc yourself
       •The subject line should include your name, your class, your section, and what you are submitting
       •Make sure you attach the zipped file

SUBMITTING THE LAB

In Windows, zip the entire Lab4 directory, and rename to yourname-Lab8.zip.
       •Example: yourname-Lab8 or yourname-Lab8.zip (if your extensions are visible)
Log into Desire2Learn, choose this class, choose Dropbox, and select Lab 8.
Browse to yourname-Lab8.zip and upload it. (Scroll down to see detailed instructions)

You will then transfer your answers to the D2L Quiz for Lab 8. You may use your notes for this part of lab.
Choose the Quizzes menu, and locate lab 8.
      • Using D2L dropbox       • Using D2L Quizzes      • Logon to D2L
To submit by Temple College Desire2Learn:
       •Log into D2L, scroll to the bottom, and choose the correct course
       •When the Course Home Page appears, click on the Dropbox link.
              •You may click on Discussions, Dropbox, or Quizzes below, for more info

       D2L navigation D2L Dropbox notes D2L Quizzes Notes D2L Discussion Notes
Dropbox directions