ITEC 745

1
ITEC 745

• Instructional Web Authoring I
• Instructor Ray Cole

Week 10
2
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
3
First Page Blank 2nd column in 3rd row.
4
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.
5
This Week
Multiple Choice Page-Type Graphic
Hyperlinks,CSS Box Model
6
Multiple Choice Page-Type
Instructions in the left column
Questions in the right column
7
Multiple Choice Page-Type

• Checkboxes are graphics embedded into the page
  with the ltimggt 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
8
Multiple Choice Page-Type
Checkbox graphics are surrounded with anchor tags
(ltagt) 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
9
Multiple Choice Page-Type
The Next button is a graphic, wrapped between lta
hrefq2.htmlgt and lt/agt tags.
10
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 ltimggt tag an attribute of
border0. This can be done in the Dreamweaver
Properties panel for each image, which is also
where you can turn the graphic into a link.
11
Multiple Choice Page-Type
The answer block is indented because a CSS
indented class is applied to it .indented
margin-left 1em
12
Multiple Choice Page-Type
As before, the checkboxes are graphics (ltimggt
tags with border0 attributes), surrounded by
anchor tags to make them clickable. To give them
a little bit of visual breathing room, these
images also have an hspace3 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 lta hrefq1.htmlgt and
lt/agt tags to make it clickable.
13
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 thats 5
  pages for each multiple choice question and 3 for
  each True/False question

14
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