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 2 nd column in 3 rd row.

Module Pages: Place your learning objectives and topic list in the 2 nd column of the 3 rd 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 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 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 ( ) to make them clickable. Each is a link to a new page.

Multiple Choice Page-Type The Next button is a graphic, wrapped between and 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 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 ( 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 and 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 Turn in a plain text file containing your name and the URL to your assignment For Next Week