HTML and CSS Reference
In-Depth Information
<input type="hidden" name="cost2" id="cost2" value="29.95" />
<input type="submit" value="Add to Cart" />
h. Configure a paragraph with the view.jpg below the sweatshirt graphic, as
shown in Figure 12.22. The view.jpg image should have no border. Use an
appropriate value for the alt attribute. Visitors will click on this image to view
the contents of the shopping cart. Recall that when you use server-side scripts
there are sometimes special configuration needs. Add anchor tags around the
image to indicate that it is a special link to the cart. The XHTML follows:
<p><a href="
cart.asp?view=yes"> image tag goes here </a></p>
Save your page and test it in a browser. It should look similar to the one shown in
Figure 12.22. Click the Add to Cart button for the tote. The demonstration shopping
cart will display and your screen should look similar to the one shown in Figure 12.18.
Experiment with the cart and try to purchase both items. You can simulate placing an
order, as shown in Figure 12.19. The shopping cart and order pages are for demonstra-
tion purposes only.
Pasha the Painter
See Chapter 2 for an introduction to the Pasha the Painter Case Study. Figure 2.34
shows a site map for the Pasha the Painter Web site. The pages were created in earlier
chapters. Use the Chapter 9 paintercss folder.
Pasha Poduslawa is the owner of Pasha the Painter. He has begun to write how-to
books for his clients and would like to offer them for sale on the Web site. He would
like a new Store page that will offer two of his books. This new Store page, store.html,
will be part of the main navigation of the site. All pages should link to it. A revised site
map is shown in Figure 12.23.
Figure 12.23
Revised Pasha the
Painter site map
The Store page should contain the description, image, and price of each product. It
should link to a shopping cart system when the visitor wants to purchase an item. You
may access a demonstration shopping cart/ordering system available on the textbook's
Web site. If you have access to a different shopping cart system, check with your
instructor and ask if you can use it instead.
Hands-On Practice Case
1. Copy the primer.jpg, decorate.jpg, and viewtrans.gif image files from the Chapter
12 folder in the student files and save them to your paintercss folder.
2. Launch Notepad and modify each existing Web page (index.html, services.html,
testimonials.html, estimates.html) in the paintercss folder to link to the Store page
(store.html) in the main navigation. See Figure 12.24 for a sample navigation.
Search WWH ::

Custom Search