List of Figures
Chapter 14: Project Overview—Introducing Center Park School
-
Figure 14.1: Highlighted navigation buttons on the home page draw attention to major site functionality.
-
Figure 14.2: Visitors are able to see "at a glance" events for the school planned for the week, month, or year.
-
Figure 14.3: Students are able to quickly view assignments for the week. Being able to view assignments online makes it impossible to say, "But I didn't know that paper was due today!"
-
Figure 14.4: Direct links to the exams are found within the monthly calendars; students simply click on the test link…
-
Figure 14.5: …to be taken to the actual test form.
-
Figure 14.6: Students must provide an answer of some kind to each question, or else the test will not be submitted.
-
Figure 14.7: Upon submission of the answers, the test is immediately scored and presented to the student.
-
Figure 14.8: The "Center Park Store" home page allows visitors to select an item of interest. Note that navigation links are present that quickly take the visitor to other areas of the site.
-
Figure 14.9: Once an item is selected, it is automatically added to the online cart. Note that the total cost of the cart is also updated.
-
Figure 14.10: Ready for check out. Note the list of all items ready for purchase as well as the total cost.
-
Figure 14.11: Stop! Who goes there? If you don't have an authorized password, you're not going anywhere in this specific section of the Center Park Web site.
-
Figure 14.12: The rotating banner ad for the Bug Festival. Note the difference in this rotating graphic versus the graphic seen in Figure 14.2.
-
Figure 14.13: When the mouse cursor is placed over the button, it changes colors to show it is highlighted. Also note the functionality of these buttons is duplicated in the right frame of the site (next to the rotating graphic, the links for "Log In", "Store" and "Customize").
Chapter 15: Creating a JavaScript Calendar
-
Figure 15.1: A simple calendar that displays the current month in a table layout.
-
Figure 15.2: An enhanced calendar, with more attractive date naming (note the addition of the "st" and "rd" to dates), as well as jump forward/back buttons to previous year and months.
-
Figure 15.3: Now the calendar includes a hyperlink to a student test, prior and next month navigation buttons at bottom, and today's date is highlighted in red (in this figure, the date of 5/24)
-
Figure 15.4: By utilizing a pop-up calendar in this way, you can allow users an easy and accurate method of selecting a specific date. Note that this pop-up functionality can carry over to other form functions
Chapter 16: Creating an Online Test or Survey
-
Figure 16.1: A five-question online test. Utilizing the power of the Web, students can access the test at any time and have their results instantly returned to them.
-
Figure 16.2: All questions must be answered; otherwise, this pop-up message appears. This ensures consistency amongst the test takers.
Chapter 17: Creating a Client-Side Shopping Cart
-
Figure 17.1: Note the major functionality of an online store neatly and simply presented:
Items for sale are readily visible, a mechanism for selecting them is apparent (the Add button), and the overall order process is represented by the View Cart and Check Out buttons.
Chapter 18: Setting Up a Members-Only, Password-Protected Web Site
-
Figure 18.1: A simple (but not very secure) password-protected site.
-
Figure 18.2: This looks just like Figure 18.1, but in reality is utilizing frames in an attempt to give more security to the site.
-
Figure 18.3: Success! Security has been achieved via the use of frames
-
Figure 18.4: Failure! Security is easily compromised by simply looking at the source code for the authenticate.html page.
-
Figure 18.5: The potential misnomer of describing JavaScript as secure.
Chapter 19: Creating Hyperlinked Ad Rotators
-
Figure 19.1: In this shot, we see the nerds getting a little publicity.
-
Figure 19.2: In this view, the advertisement has switched from the nerds to the school sports team.
-
Figure 19.3: Hyperlinking rotating ads is a great way to further take advantage of limited screen space.
-
Figure 19.4: Rotating image ads can bring a new sense of urgency to your information, thus encouraging visitors to pay more attention to what you have to say.
Chapter 20: Using JavaScript to Create Dynamic HTML (DHTML) Effects
-
Figure 20.1: A typical (boring?) frames-based Web page, highlighting the usual navigation frame (the left frame) where links are placed that, when clicked, open information in the main content frame (the right frame).
-
Figure 20.2: The plain text links have now been "spiced up" with some simple graphics.
-
Figure 20.3: The onMouseOver image event can highlight specific functionality, as well as bring a more visually appealing quality to your Web design.
-
Figure 20.4: Even simple user-customizable options such as this can bring a real sense of personalization to your Web site, encouraging users to feel a stronger sense of ownership (translation: they will be more inclined to return to your site).
-
Figure 20.5: Individual users can be quite particular about how they like their information displayed. A customization feature such as this can go a long way towards making their experience on your Web site a happier one.
-
Figure 20.6: While perhaps not visually pleasing to one person, this custom color scheme might be just the ticket for someone else.
Chapter 21: Project Wrap-up—Center Park Web Site Functional Overview
-
Figure 21.1: The Center Park home page, highlighting the rotating banner functionality.
-
Figure 21.2: A different graphic is now being displayed. Also note that navigation buttons at the left of the screen are duplicated in the right frame as hyperlinks.
-
Figure 21.3: When you move your mouse pointer over each navigation button, it changes color to indicate that it is active and ready to be selected.
-
Figure 21.4: The Log In functionality allows users to access private or otherwise secure content within the Center Park Web site.
-
Figure 21.5: The "customized calendar", which is presented to the users after they successfully log in to the Center Park site.
-
Figure 21.6: Users can add a task to their calendar via this "Schedule Task" function of the Task Calendar.
-
Figure 21.7: The Date Chooser pop-up allows a user to select a specific date for their task. Note that the date and month can be changed so that the task can be assigned to any date, not just during the current month.
-
Figure 21.8: Once a date is chosen in the Date Chooser, it is placed into the Date of task field.
-
Figure 21.9: An example of a five-question online test, made possible via JavaScript!
-
Figure 21.10: All fields must have something entered into them, or else this error message appears.
-
Figure 21.11: Instant analysis of the submitted answers is possible via the JavaScript functionality of the testing feature of the Web site.
-
Figure 21.12: User can customize the appearance of the Center Park site.
-
Figure 21.13: A simple custom feature, but one that can make a big impact on the appearance of the site.
-
Figure 21.14: The home page of the store, listing all the items for sale.
-
Figure 21.15: In this example, the visitor has added one school hat and one school T-shirt.
-
Figure 21.16: By clicking on the Check Out button, the shopper is presented with all the items they have selected and the total charge for the items.
