Giáo trình Photoshop CS - Chương 15: Tạo lập các liên kết bên trong một bức ảnh

giá trị 80, click OK. 
Trong cửa sổ ảnh, hình ảnh nhánh thìa là sẽ mờ đi. 1 đường viền đỏ xác định hình dạng của image 
map xuất hiện bao quanh nhánh thìa là. 
7. Chọn Select > Deselect để gỡ bỏ vùng chọn. 
Trau chuốt hình dạng image map và ấn định liên kết 
Trong hai tiến trình trước ta đã không thử khởi tạo các dạng image-map phù hợp một cách thật hoàn 
hảo với các đề mục được mô tả. Bạn sẽ cải thiện các hình dạng này ngay đây thôi, và sau đó ấn định 
URL và đặt tên tin cho các image maps của bạn. Bạn sẽ bắt đầu với image map đó từ thời điểm nhánh 
thìa là đã hiển thị và được phóng đại lên 300%. 
1. Chọn công cụ Image Map Select ( ). Nếu image map xác định nhánh thìa là chưa được chọn sẵn 
(đến mức đường biên của image-map hiện ra như là một đường viền đỏ cùng với các điểm neo), thì 
hãy chọn nó. 
2. Chọn 1 trong những điểm neo chưa ôm khít hình dạng của nhánh thìa là và rê nó đến 1 vị trí tốt hơn. 
www.vietphotoshop.com - Lê Thuận 22
Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 
Dragging an anchor point Finished image map area 
3. Từng bước 1, chọn những điểm neo khác và kéo rê chúng đến các vị trí màbạn cảm thấy hài lòng 
với hình dáng của image map. 
Bạn có thể thêm vào những điểm neo riêng lẻ bằng cách Shift-click : Đầu tiên, định vị con trỏ ở chỗ 
bạn muốn xác định 1 điểm đặt.Nhấn và giữ phím Shift, cho đến khi xuất hiện một dấu cộng (+) nhỏ nơi 
icon trỏ chuột rồi hẵng click. Để gỡ bỏ điểm neo, Alt-click (Windows) hoặc Option-click (Mac OS). Trong 
trường hợp này, 1 dấu trừ (-) xuất hiện ở vị trí icon trỏ chuột. 
4. Trong Image Map palette, gõ Herbs cho Name, pages/herbs.html cho URL, và chọn _blank cho 
Target. 
5. Hoàn tất phần còn lại của công việc với image map xác định trái đu đủ bằng cách làm theo các bước 
sau : 
• Nhấn giữ phím spacebar để tạm thời chuyển sang công cụ Hand và rê chuột cho đến khi bạn 
có thể thấy được vùng image-map quả đu đủ. 
• Chọn và di chuyển các điểm neo cho tới khi bạn hài lòng với hình dáng của image-map. 
www.vietphotoshop.com - Lê Thuận 23
Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 
• Chọn các tùy biến trong Image Map palette, và gõ Papaya cho Name, pages/fruits.html cho 
URL, và chọn _blank cho Target. 
6. Chọn Select > Deselect Image Maps. 
7. Double-click lên công cụ Hand ( ) hoặc công cụ Zoom để thu nhỏ khung ảnh. 
8. Chọn File > Save. 
Lưu ý : Nếu bạn muốn xem ảnh mà bỏ qua đường viền mờ màu blue sáng của image-map, hãy chọn 
nút lệnh Toggle Image Maps Visibility [ ] trong hộp công cụ, hoặc nhấn phím A. Chọn lại nút lệnh này 
hoặc nhấn phím A một lần nữa để xem các chỉ thị image-map. 
Trong chừng mực của bài học này bạn đã tạo 3 liên kết image map và 5 liên kết slice trong bức ảnh 
cho trang Web của bạn. Bạn có thể thừa thắng xông lên tạo thêm các image maps cho quả lê và chùm 
nho nếu muốn có thêm cơ hội thực hành, hoặc là bạn có thể tiếp tục chuyển sang chủ đề mới tại đây 
cũng được. 
Khảo sát tất cả các vùng liên kết và tạo 1 file HTML 
Khi bạn lưu 1 image map trong 1 file HTML, những thẻ (tags) HTML cần thiết để hiển thị ảnh này trong 
1 trang Web sẽ tự động được sinh ra. Cách dễ nhất để làm điều này đơn giản chỉ là xác nhận tùy chọn 
HTML And Images khi bạn lưu lại bức ảnh hoàn chỉnh. 
Một khi bạn đã tạo xong 1 file HTML, thì việc cập nhật để phản ánh các thay đổi (chẳng hạn, các URLs 
hoặc vùng image-map đã được hiệu chỉnh hay tạo mới) đã trở nên thật dễ dàng. 
1. Trong ImageReady, chọn Window > Web Content để mở palette có liên quan. Nếu cần, hãy click vào 
mũi tên để mở rộng Image Maps và Slices categories, và kéo góc dưới bên phải của palette xuống để 
nhìn thấy được toàn bộ các đề mục được liệt kê. 
2. Xem trước bảng liệt kê Web Content vốn đã bao gồm các ảnh nhỏ (thumbnails) biểu thị các slices và 
image maps. Lưu ý rằng các image-map thumnails cũng bao gồm luôn cả các đường biên của các 
www.vietphotoshop.com - Lê Thuận 24
Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 
vùng image map. 
3. Đóng Web Content palette hoặc chuyển nó khỏi đường đi của bạn. 
4. Chọn File > Save Optimized As. (Hãy cẩn thận đừng chọn nhầm Save As) 
5. Trong hộp thọai Save Optimized As, hãy chấp nhận tên mặc định, 15Start.html, và làm theo các 
bước sau : 
• Chọn HTML And Images trong pop-up menu Save As Type (Windows) hoặc pop-up menu Format 
(Mac OS). 
• Định vị và chọn folder Lessons/Lesson15/15MyPage làm địa chỉ đích. 
• Click Save. 
6. Chuyển ra desktop và double-click để mở file 15Start.html trong ứng dụng Web browser mặc định 
của bạn. 
7. Click vào vài vùng slices hoặc image maps mà bạn đã tạo được và kiểm tra xem coi liệu có bất kỳ 
đối tượng nào trong chúng không liên kết được một cách đúng đắn không (tức là có một số không kết 
nối được). Khi bạn xong việc, hãy chuyển trở về ImageReady, thoát khỏi Web browser đang mở trang 
15Start.html. 
Lưu ý : Trong Photoshop, bạn tạo lập 1 file HTML trong hộp thọai Save Optimized As xuất hiện sau khi 
hoàn thiện file ảnh và click OK trong hộp thoại Save For Web. 
Biên tập thông tin liên kết và cập nhật file HTML 
Vài image maps trong file HTML không liên kết được một cách đúng đắn, bởi vì ta đã thay đổi tên của 
một số trang đích để có những mô tả cụ thể hơn đối với các loại rau quả trong file ảnh. Trục trặc này 
cũng dễ được khắc phục trong file ImageReady nguyên thủy và sau đó tiến hành cập nhật cho file 
HTML. 
1. Trong hộp công cụ của ImageReady, chọn công cụ Image Map Select ( ). 
2. Trong cửa sổ ảnh, click chọn vùng image-map của quả đu đủ. 
3. Trong Image Map palette, đổi the URL sang pages/papaya.html. 
www.vietphotoshop.com - Lê Thuận 25
Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 
4. Trong cửa sổ ảnh, chọn image-map của bó măng tây, đoạn đổi URL trong Image Map palette thành 
pages/asparagus.html. 
Lưu ý : Bằng cách tương tự, bạn có thể đổi thông tin liên kết cho slices, bằng cách dùng công cụ Slice 
Select (thay vì công cụ Image Map Select) và Slice palette (thay vì Image Map). 
5. Chọn File > Update HTML. 
6. Trong hộp thọai Update HTML, chọn file 15Start.html, và click Open. Click Replace khi hộp thoại 
Replace Files xuất hiện, và click OK trong thông báo update. 
7. Trở lại trình duyệt Web và chọn icon refresh hay reload tùy trình duyệt, hoặc lệnh View menu. Click 
các liên kết để chắc chắn rằng chúng hoàn hảo, và sau đó trở về ImageReady. 
8. Chọn File > Close để đóng file ảnh. Nếu 1 thông báo xuất hiện nhắc nhở bạn rằng file không mở 
được nữa trong Photoshop, hãy click Yes để cho qua. 
Bạn có thể dùng trình duyệt Web của mình để mở và xem file 15Start.html. Bạn cũng có thể mở 1 file 
trong 1 ứng dụng xử lý văn bản hay 1 trình tạo Web để tự mình kiểm tra lại đối với mã HTML. 
Các quy ước về đặt tên file HTML dành cho Web 
Dùng quy ước đặt tên file UNIX®, bởi vì nhiều chương trình network sẽ giản lược những tên file dài. 
Quy ước này đòi hỏi 1 tên file phải có tối đa 8 ký tự, được kéo theo sau bởi 1 phần mở rộng. Dùng 
phần mở rộng là .html hoặc .htm. 
Đừng dùng những ký tự đặc biệt như là dấu hỏi (?) hoặc dấu sao (*), hoặc các khoảng cách giữa 
những chữ cái trong tên file của bạn—một số trình duyệt có thể không nhận biết tên dài. Nếu phải dùng 
những ký tự đặ biệt hoặc các khoảng trống trong tên file, hãy kiểm tra bằng 1 tài liệu hướng dẫn việc 
biên tập HTML để dùng cho chính xác. Chẳng hạn, để tạo khoảng trống giữa các chữ cái bạn sẽ cần 
rút ngắn 1 đơn vị khoảng cách xuống 20%. 
Bạn vừa hoàn thành chương 15. Để học thêm cách dùng hoạt hình cho slices và rollovers, hãy xem 
chương 18, “Tạo hình động cho trang Web” và ImageReady Help. 
www.vietphotoshop.com - Lê Thuận 26
Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 
Câu hỏi ôn tập 
1. Slices là gì? 
2. Mô tả 5 cách tạo lập image slices. 
3. Mô tả phương pháp khởi tạo1 slice với đường biên chính xác ôm khít 1 đối tượng có hình dạng dạng 
nhỏ bé hoặc bất thường. 
4. Làm thể nào để khởi tạo một slice không chứa hình ảnh ? Một slice như vậy được tạo ra nhằm mục 
đích gì ? 
5. Những điểm khác nhau và giống nhau giữa các slices và image maps? 
Đáp án 
1. Slices là những vùng hình chữ nhật của 1 bức ảnh mà bạn có thể định nghĩa trong Photoshop hoặc 
ImageReady nhằm mục đích tối ưu hóa trang Web. Với slices, bạn có thể tạo lập các hình động, các 
liên kết URLs, hoặc các hiệu ứng rollovers. 
2. Bạn có thể chủ động tạo image slices bằng cách chọn các vùng ảnh với công cụ Slice. Những 
phương pháp linh họat khác để tạo các slices bao gồm : chuyển đổi các layers, đường dẫn hoặc vùng 
chọn thành các slices bằng cách dùng các lệnh trong các menu Layers, Slices, hoặc Select. Một cách 
gián tiếp, các auto slices sẽ được tự động tạo ra đối với những vùng ảnh bị cắt lát mà bạn bỏ qua 
không định nghĩa khi dùng các phương pháp tạo lập user slice khác. 
3. Dùng công cụ Magic Wand (hoặc công cụ vùng tạo chọn thích hợp) trong ImageReady, hãy xác định 
1 đối tượng, và chọn lệnh Select > Create Slice From Selection. 
4. Xác định slice với công cụ Slice Select. Trong hộp thoại Slice Options (trong Photoshop) hoặc Slice 
palette (trong ImageReady), chọn No Image từ menu Type. No Image slices có thể chứa 1 màu nền, 
văn bản và mã nguồn HTML, hoặc là chúng có nhiệm vụ như 1 trình giữ chỗ (placeholder) dành cho 
các đồ thị sẽ được thêm vào sau đó. 
5. Các Slices có thể được tạo lập hoặc trong Photoshop hoặc trong ImageReady; chúng luôn có dạng 
chữ nhật; chúng cũng có thể được định nghĩa như là có ảnh, hoặc không có ảnh, hoặc có nội dung 
Table. Còn các Image maps chỉ có thể được tạo ra trong ImageReady ; chúng có thể mang hình dạng 
bất kỳ; và chúng luông có nội dung ảnh. Cả slices và image maps đều có thể được định hình với các 
trạng thái rollover mà bạn có thể nghiên cứu thêm trong Chương 17, “Tạo hiệu ứng Rollovers cho trang 
Web.” 
© www .vietphotoshop.com - Dịch bởi Lê Thuận 
www.vietphotoshop.com - Lê Thuận 27