لطفا منتظر باشید ...
Getting started
In this lesson you''ll work on graphics that are destined for a Web home page. Your goal is to embed multiple hypertext links within a complex image that is a single .psd file. Different areas, or hotspots, of the image map link to different files, so a Web site visitor can click one area of the home page to open a linked page, or click a different area of the home page to open a different linked page. There will also be unlinked areas of the home page that produce no change if the user clicks randomly or by accident.Let''s start now by viewing the finishe205 page that you will create.
1. Start Adobe Photoshop, holding down Ctrl-Alt-Shift (Windows) or Command-Option-Shift (Mac OS) to restore the default preferences. (See "Restoring default preferences" on page 6.)2. When prompted, click Yes to confirm that you want to reset preferences, and Close to close the Welcome Screen.3. Click the Go to Bridge button (
) on the tool options bar to open Adobe Bridge.4. In the Favorites palette in the upper left corner of Bridge, click the Lessons favorite, and then double-click the Lesson13 folder in the preview area, then double-click the 13End folder.5. Right-click (Windows) or Control-click (Mac OS) on the 13En205 file, and choose Open With from the contextual menu. Choose a Web browser to open th206 file.[View full size image]
6. Click the "why organic?" button at the top of the page.A new Web browser window opens to a new page. (It''s not a fully developed page; it''s just a placeholder page to show that the things you click really do represent links.)7. Close the Why page instance of the Web browser.8. At the top of the Organic Food Web page, click the "products" button. Then, close the new instance of the Web browser that shows the Products page.9. Again in the Organic Food Web page, move the pointer over the picture of asparagus on the right side of the page. Notice that the pointer changes to a pointing-finger icon (
), indicating that this area is linked. Move the pointer around the page and notice when it appears as an arrow and when as a hand.10. Click the asparagus to jump to its linked Web page. Then, close the linked Asparagus page and return to the Organic Food home page. Try some of the other links you find on the page.11. When you finish viewing the Organic Food Web site, quit your browser and return to Bridge.In the preceding steps, you experienced two different types of links: slices (in the menu buttons at the top of the page) and image maps (the asparagus, papaya, and herbs image areas).Slices are rectangular areas in an image that you define based on layers, guides, or precise selections in the image, or by using the Slice tool. When you define slices in an image, Photoshop creates a215 table or Cascading Style Sheet to contain and align the slices. If you want, you can generate and preview a215 file that contains the sliced image along with the table or Cascading Style Sheet.An image map is also an image area that supports a hypertext link. In an image map, different areas of the image, called hotspots, link to different files. As a result, a Web site visitor can click one area of the image to open a linked page, or click a different area of the image to open a different linked page. Unlike slices, which are always rectangular, image maps can be any shape. The controls for making image maps are available only in Adobe ImageReady, so you will jump to ImageReady to do this work when the time comes in this lesson.In this lesson you will embed multiple hypertext linksby creating both slices and an image mapwithin a complex image that is a single .psd file. You''ll start by working with slices, which are always rectangular.
