Download ITEC 715

ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 10
Job Posting I Received Last Year
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
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
Multiple Choice Page-Type
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;
}
Multiple Choice Page-Type
Checkbox graphics
are surrounded with
anchor tags (<a>) to
make them
clickable. Each is a
link to a new page.
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;
}
Multiple Choice Page-Type
The Next button is a graphic, wrapped
between <a href=“q2.html”> and </a>
tags.
Multiple Choice Page-Type
To 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.
Multiple Choice Page-Type
The answer block is
indented because a
CSS “indented” class
is applied to it:
.indented {
margin-left: 1em;
}
Multiple Choice Page-Type
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.
For Next Week
• 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