ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.
-
Upload
crystal-barnett -
Category
Documents
-
view
212 -
download
0
Transcript of ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.
![Page 1: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/1.jpg)
ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 10
![Page 2: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/2.jpg)
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
![Page 3: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/3.jpg)
First Page:
Blank 2nd column in 3rd row.
![Page 4: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/4.jpg)
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.
![Page 5: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/5.jpg)
This Week:
Multiple Choice Page-Type: Graphic Hyperlinks,
CSS Box Model
![Page 6: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/6.jpg)
Multiple Choice Page-Type
Instructions in the left column
Questions in the right column
![Page 7: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/7.jpg)
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;
}
![Page 8: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/8.jpg)
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 (<a>) to make them clickable. Each is a link to a new page.
![Page 9: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/9.jpg)
Multiple Choice Page-Type
The Next button is a graphic, wrapped between <a href=“q2.html”> and </a> tags.
![Page 10: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/10.jpg)
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.
![Page 11: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/11.jpg)
Multiple Choice Page-Type
The answer block is indented because a CSS “indented” class is applied to it:
.indented { margin-left: 1em;}
![Page 12: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/12.jpg)
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.
![Page 13: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/13.jpg)
• 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
![Page 14: ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 10.](https://reader035.fdocuments.in/reader035/viewer/2022070411/56649f2b5503460f94c4569a/html5/thumbnails/14.jpg)
• 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