itec 745 instructional web authoring i instructor: ray cole week 10

ITEC 745

Instructional Web Authoring I

Instructor: Ray Cole

Week 10

Subject: Web developer / designer contract position in Montvale, NJ

Hi,

My name is Steve, and I'm a recruiter at Access Staffing. Our records show that you are an experienced professional.

We have the following Web developer / designer contract position in Montvale , NJ:

The successful candidate will work in collaboration with the Web Production and Traffic Submission departments to produce various web assets. This person will be one of several web producers in a small, but fast-paced agency where quality work, solidarity and an attention to detail are all required. Further, this position will require a solid understanding of HTML without the of assistance automatic code generators such as DreamWeaver or FrontPage.

Responsibilities:

* Web Development: o Produce optimized images from pre-existing layered Photoshop documents o Create HTML Web pages using table structure or style sheets o Generate text documents from pre-existing HTML Web pages o Stream copy/text from Word documents to HTML templates o Provide accurate and detailed print-outs of each layout creation or update o Update business documentation (contact maps, schematic flows, etc.) with the use of Illustrator or Photoshop

Job Posting I Received Last Year

First Page:

Blank 2nd column in 3rd row.

Module Pages:

Place your learning objectives and topic list in the 2nd column of the 3rd row.

Create a page like this for each module that you intend to build in your final project.

This Week:

Multiple Choice Page-Type: Graphic Hyperlinks,

CSS Box Model

Multiple Choice Page-Type

Instructions in the left column

Questions in the right column


Checkboxes are graphics embedded into the page with the <img> tag:

• checkbox_checked.gif

• checkbox.gif

A red box surrounds the feedback whenever the learner chooses an incorrect answer. This box is implemented purely with CSS:

.answer_box_no {padding: 10px;width: 610px;border: 2px solid #ec3333;

}


A green box surrounds feedback whenever the learner chooses a correct answer. This box is implemented purely with CSS:

.answer_box_yes {width: 610px;border: 2px solid #009933;padding: 10px;

}

Checkbox graphics are surrounded with anchor tags (<a>) to make them clickable. Each is a link to a new page.


The Next button is a graphic, wrapped between <a href=“q2.html”> and </a> tags.

Multiple Choice Page-TypeTo prevent a blue outline from appearing around the checkboxes and the next and back buttons, you have to give the <img> tag an attribute of border=“0”. This can be done in the Dreamweaver Properties panel for each image, which is also where you can turn the graphic into a link.


The answer block is indented because a CSS “indented” class is applied to it:

.indented { margin-left: 1em;}


As before, the checkboxes are graphics (<img> tags with border=“0” attributes), surrounded by anchor tags to make them clickable. To give them a little bit of visual “breathing room”, these images also have an hspace=“3” attribute to prevent the text from pressing right up against them.

The back button, like each checkbox, is a gif image. It is surrounded by <a href=“q1.html”> and </a> tags to make it clickable.

• Create an end-of-module quiz consisting of at least 2 multiple choice questions with four answer choices each, and one True/False question. Use a layout similar to the one presented in class

• You will have 1 page for each question, plus one additional page that will be displayed for each answer choice the learner can click. So that’s 5 pages for each multiple choice question and 3 for each True/False question

For Next Week

• Upload your pages and any supporting files (such as your CSS file, and any graphics) to your SFSU web space

• After uploading, run each page through the XHTML validation service at http://validator.w3.org/

• Turn in a plain text file containing your name and the URL to your assignment

For Next Week

itec 745 instructional web authoring i instructor: ray cole week 10

Documents