Chương 15: Tạo lập liên kết bên ảnh Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy có thểđược in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn ơn liên lạc với tơi phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Bài học sẽđề cập lát cắt ánh xạảnh - đặc trưng mà bạn khởi tạo mối liên kết siêu văn phức tạp phạm vi file đồ họa đơn sử dụng cần click vào phần đồ thịđã bị cắt lát gán ánh xạảnh trang Web để mở site click vào vùng khác đểđi đến Có kỹ thuật mà bạn sẽđùng để khởi tạo mảnh chia gán liên kết người dùng click vào để mở site khác trình duyệt Web phương pháp định nghĩa lát cắt (từđây sau sẽđược viết theo nguyên tiếng Anh mảnh nhỏ hình chữ nhật thu từ trình chia cắt ảnh Adobe hay Adobe ImageReady Phương pháp lại khởi tạo ánh xạảnh (từđây sau viết theo nguyên tiếng Anh image maps), không thiết phải hình Trong này, bạn sẽđược học chủđiểm • Một số phương pháp khởi tạo image • Phân biệt khác user slices auto • Liên kết user slices với trang hay địa • Khởi tạo lát cắt “không phải ảnh” (”no image” slice) để chứa text biên • Định nghĩa vùng ánh xạảnh (image-map areas) phương pháp • Liên kết image-map areas với trang hay địa www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh • Bằng qui trình tựđộng, tạo trang HTML chứa ảnh bị cắt Bạn phải dành khoảng 90 phút để hoàn thành học Bạn thực việc slices Adobe Photoshop lẫn Adobe ImageReady, ImageReady công cụ tạo lập image Lưu ý rằng, người dùng Windows 2000 cần phải unlock tập tin học trước chúng Để có thêm thơng tin, xin tham khảo trang “Copying the Classroom in a Book không cần thiết người dùng Windows XP Khởi Trong học bạn làm việc đồ thịđược trù liệu sẵn cho Web home tiêu bạn nhúng liêu kết siêu văn vào bên ảnh phức hợp vốn đơn Những vùng khác, điểm nóng (hotspots - khu vực ảnh đồ thị mà bạn nhảy đến địa chỉđược xác định URL) image map liên kết với file người dùng click lên vùng trang chủđể mở trang liên kết click khác trang chủđể mở trang liên kết khác Sẽ có vùng khơng liên kết trang không mang lại thay đổi người dùng click cách ngẫu nhiên Bài học sau sách bao trùm quy trình tối ưu hóa lát cắt riêng lẻ với khác từ vùng tĩnh ảnh cách làm cho slices trở nên sinh động nghĩa hiệu ứng tương tác động (rollover Đôi điều slices image Phương pháp khởi tạo slices Slices vùng ảnh nghĩa dựa lớp (layers), đường dẫn (guides), vùng chọn đặc biệt ảnh, cách dùng công cụ Slice Khi bạn định nghĩa slice ảnh, ImageReady tạo bảng (table) HTML rèm kiểu dáng (cascading style sheet) gióng hàng slices Nếu muốn, bạn tạo (bằng quy trình tựđộng) xem HTML chứa ảnh bị cắt lát với table cascading style Một image map vùng ảnh phục vụ cho việc hỗ trợ liên kết siêu văn Những quản lý việc tạo lập image maps diễn Adobe ImageReady; vậy, bạn sang ImageReady để làm việc file mở từ Photoshop ImageReady khởi tạo side image maps lẫn server-side image maps Không Slice vốn luôn hình chữ maps mang hình dạng www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Xem trước kết Bạn bắt đầu học cách xem trước ví dụ trang chủ HTML hoàn thành phải khởi tạo Về tiến trình này, bạn dùng ứng dụng duyệt Web quen thuộc Netscape, Internet Explorer, Safari) thay Photoshop hay ImageReady Bạn phải kết nối Khởi động trình duyệt Web file kết thúc 15End.html thư mục File chứa HTML table vốn liên kết với sốảnh Web, tất cảđều tạo lập từ ImageReady Click nút lệnh “why organic?”ởđỉnh trang Web Organic Foods Một cửa sổ duyệt Web mở trang (Không phải trang mở rộng đầy đủ; Nó cịn trang giữ chỗ page) để bạn click vào thực trình bày Đóng file Why page đưa làm ví dụ Web Cũng Web browser, mở trang Organic Foods, click nút lệnh “products” ởđỉnh Kếđến, đóng file ví dụ Web browser thị trang Một lần nữa, mở trang Organic Foods Web browser, di chuyển trỏ chuột bên măng tây cạnh phải trang web Chú ý đầu trỏ chuột chuyển thành biểu tượng bàn tr ), biểu thị vùng liên kết Di chuyển trỏ chuột lên lướt qua khác trang ý trỏ chuột hiển thị mũi tên, hiển thị Click vào bó măng tây để mở thêm trang liên kết khác Đoạn đóng Web browser để www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh chủ Click thêm vài liên kết khác mà bạn tìm thấy Khi xem xong files kết thúc, đóng tất cửa sổ trình duyệt web dụn Trong tiến trình này, bạn chứng kiến dạng thức liên kết khác : slices lệnh ởđỉnh trang Web) image maps (bó măng tây, quảđu đủ, vùng ảnh thảo mộc, vùng liên kết phù hợp với dạng đề mục Bạn bắt đầu công việc với Slices, vốn ln hình Cắt lát ảnh Bạn có thểđịnh nghĩa Slices Photoshop cách rê công cụ Slice chuyển đổi vùng chọn thành Slices Bạn bắt đầu học việc cắt lát nút lệnh menu Web, dùng công cụ Slice Về việc thiết kế trang Web với Photoshops Khi dùng Photoshop ImageReady để thiết kế Web pages, phải nhớ in đầu cụ đặc trưng khả thi ứng • Photoshop cung cấp công cụ khởi tạo thao tác ảnh tĩnh dùng cho thể chia nhỏ ảnh thành nhiều Slices , đặt mối liên kết HTML text, tối ưu hóa lưu ảnh trang • ImageReady cung cấp nhiều - tất - công cụ biên tập ảnh Photoshop Thêm vào đó, cịn bao hàm công cụ pallettes dành cho việc xử tạo ảnh Web động chẳng hạn animations Chuẩn bị tạo lập Trước bắt đầu công việc, bạn nên tùy biến tùy chọn công việc cho thứở vào sẵn sàng hoạt Khởi động Adobe Photoshop, ấn tổ hợp Ctrl+Alt+Shift (Windows)/ để trả thiết lập mặc Click nút File ) dùng palette File Browser Folders đểđịnh vị chọn Lessons/Lesson Double-click lên ảnh nhỏ biểu thị file 15Start.psd, chọn file bấm lệnh File > menu trình duyệt File Nếu thơng báo xuất hỏi liệu bạn có muốn update text layers cho kết xuất chọn File học bao hàm đường dẫn ngang dọc màu blue Bạn dùng để bắt dính lệnh vẽ vùng chọn cho chúng gióng hàng cách Click nút lệnh close tiêu đề File Browser click nút lệnh File Browser www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh chọn cơng cụ lần đểđóng File Browser để giảm thiểu cản trở không gian Hãy đảm bảo lệnh sau chọn (có dấu kiểm), khơng, chọn lúc • • • • • View > Show > View > Show > View > View > Snap To > View > Snap To > Đường dẫn blue tạo lập trước nhằm giúp bạn vẽ xác slices Khi tạo lập gần đường dẫn, mép biên bắt dính đường dẫn cho slices đồng hiệu Dùng công cụ Slice để khởi tạo Bạn tự hỏi ởđầu chủđề lại dùng “slices” thay “a slice” Câu trả lời là, tạo slice bao hàm toàn ảnh - vốn rõ ràng điều vơ ích, lẽ slice cách tựđộng - bạn khởi tạo slice Bất kỳ slice ảnh (1 user slice đó) gây hình thành slices khác (auto kín vùng ảnh phía ngồi user slice mà bạn vừa Hãy ý đến hình chữ nhật nhỏ màu xám góc bên trái ảnh Trong vùng đó, bạn 01 icon chí cịn nhỏ huy hiệu (badge), tương tự dãy núi thu chữ nhật xác định slice 01 vốn bào hàm tồn ảnh Màu xám thơng báo cho bạn auto slice, user slice Còn biểu tượng slice hàm dung hình ảnh bên www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Trên hộp công cụ, chọn công cụ ) Rê công cụ Slice theo đường chéo từ ên sang bên khu vực text “why organic?”, với điểm cuối gần sát bên đường dẫn (guides) bao Một hình chữ nhật màu xanh tương tự với hình chữ nhật biểu thị Slice 01 xuất góc trái Slice 02 mà bạn vừa khởi tạo Màu xanh nhắc nhở bạn user phải auto Màu xám nguyên thủy biểu thị auto slice 01 nguyên, khơng thay đổi gì, vùng bên slice 01 nhỏđi, bao phủ cạnh trái Slice 03 - auto slice khác, biểu thị màu xám cố hữu - bao phủ vùng menu bên phải slice 03 Một auto slice thứ ba, slice 04, bao phủ khu vực bên menu phía bên phải Tạo lập thêm nhiều user Giờ bạn thấy slices tạo thật dễ dàng, bạn cắt rời khoảng dòng text menu thành nút lệnh Cũng công cụ Slice chọn công cụ, bạn rê chuột từ bên sang dòng text “products” để tạo lập user slice Slice trở thành slice 03 Con số biểu thị slice đứng sau slice 03 tựđộng tăng đơn www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Bạn thay đổi cách thức trỏ hiển thị hình cơng cụ Slice đổi thiết lập ưu tiên cho Photoshop Để chuyển đổi trỏ chuẩn biểu thị công ) trỏ presice - xác, vào menu Edit > Preferences > Display & Cursors Photoshop > Preferences > Display & Cursors (Mac OS 10), chọn Pricise for Other Cursors click Từng lần nhau, kẻ nét vẽ công cụ Slice quanh đề mục dòng sau : bao quanh từ “shop online”, “contacts”, “help” để khởi slices cho nút lệnh Bức ảnh bạn có thay slices : user slices auto slices Nếu số vậy, đừng lo bạn sửa điều Trên hộp công cụ, chọn công cụ ) click lên khu vực button slices để khung ảnh lên 300% Hãy khảo sát thật cẩn thận user slice mà bạn tạo lập để xem coi có khoảng chúng khơng (Nếu có, khoảng trống auto slices.) Nếu khơng trống chúng, bạn bỏ qua bước Có khoảng trống slices Khơng có khoảng trống Trên hộp cơng cụ, Hãy chọn công cụ Slice ) ẩn bên công cụ Slice chọn user slices không bị bắt dính đường dẫn, nghĩa là, slice mà user slice sát khoảng Kéo rê handle đánh dấu slice chọn đường biên slice trí áp sát đường dẫn slices Chú ý : Bạn dùng cơng cụ Slice Select để kéo rê slice từ vị trí đến vị www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Nhấp đúp công cụ Zoom để trả vềđộ phóng đại 100%, chọn File Nếu bạn nhận thấy biểu tượng thị auto slices làm rối rắm chọn công cụ Slice Select đoạn click vào nút lệnh Hide Auto Slices tùy Bạn có thểẩn đường dẫn cách chọn View > Show > Guides, bạn cần đến chúng Thiết lập tùy chọn cho slice Các slices không đặc biệt hữu dụng bạn thiết lập tùy chọn cho chúng Các slices bao hàm tên slice URL mở người dùng click vào slice Tiến trình thiết chọn slice Photoshop có khác so với cách bạn áp dụng Photoshop, bạn thiết lập tùy chọn hộp đối thoại Còn ImageReady, bạn chúng Dẫu cách nữa, quy trình đơn giản, điều quan trọng thể thực công việc ứng dụng bạn chuẩn bị thứ cho việc trang Chú ý : Bạn thiết lập tùy chọn cho auto slice, làm làm cho tựđộng chuyển thành user Chọn công cụ Slice ), dùng để chọn slice 02, với dịng text “why Trên tùy chọn cơng cụ, click nút lệnh Slice Photoshop đặt tên cho slice dựa tên file hay số biểu thị slice, vậy, hành “15Start_02,”biểu thị slice số hai file Trong hộp thoại Slice Options, gõ vào thông tin : Trong Name, gõ Why_button ; gõ pages/why.html ; Target, gõ _blank (Hãy cẩn thận đừng để sót dấu gạch chân (_) tự “b”.) Đoạn click www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Chú ý : Tùy chọn Target quản lý cách mở file liên kết bạn click vào đường link _blank mở trang liên kết tình Web browser Nếu bạn muốn đến tình nguyên thủy Web browser, bạn gõ code khác thay Để có thêm thơng tin, xem Adobe Photoshop Help HTML reference (chẳng sách in Web site diễn giải HTML Dùng công cụ Slice Select , chọn slice 03, slice có chứa text “products” , đọan click tùy chọn Nhập vào thông tin sau • Trong Name, gõ • Trong URL, gõ • Trong Target, gõ Click OK đểđóng hộp Chọn File > Bạn đừng đóng tài liệu vội cần đến phần Có thể bạn nhận thấy có nhiều tùy chọn hộp thọai mà bạn điền slices Thí dụ, bạn gõ vào tùy chọn Alt Tag muốn Thường dùng để xác định slice có nội dung khơng thể nhìn thấy khó hiểu xuất tooltips vài Web browser trình giữ chỗ (placeholder) trình download dài Nó có thểđược đọc thành tiếng vài ứng dụng Để có thêm thông tin cách dùng tùy chọn này, xem www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Làm việc với slices Mặc dầu bạn tiếp tục thiết lập tùy chọn slice Photoshop, thực đặc biệt ImageReady hiệu Bạn dùng nút lệnh Jump To để ImageRea Nút lệnh Jump To khơng chỉđơn giản bắt đầu vào ImageReady mà cịn “nhảy tót” mở Photoshop, chuyển đổi ln tác vụ quản lý sang ImageReady bạn đóng file, bạn “nhảy” trở Một mở ImageReady, bạn phải định nghĩa lại không gian làm việc (Workspace) phục vụ nhu cầu cụ thể cho học Bạn bắt đầu tiến trình với file Photosh Chú ý : Workspace xác định palettes mở, vị trí chúng việc Sự minh định Workspace khơng ảnh hưởng đến kích thước, vị trí hay thiết lập cửa Hãy chắn bạn lưu file Kế tiếp, hộp công cụ Photoshops, click nút ImageRea ) ImageReady mở với file 15Start.psd Lưu ý rằng, ImageReady có menu Slices Slices, khơng có Chọn Window > Workspace > Interactivity Palette Locations đểđóng vài palettes bạn cho học Đóng nhóm palettes Animation Web Content cách click nút lệnh close palette khơng chọn palettes menu Rê nhóm palette Slice phía bên phải bắt dính vị trí cạnh biên vùng Khu vực làm việc bạn trông giống minh họa www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Trong Layers palette, chọn “To edit in Slice palette” Chọn Layer > New Layer Based ImageReady sẽđổi chỗ vùng auto slices layer-based slice cho toàn Hãy ý biểu tượng ) góc bên trái slice, có nguồn gốc từ Cũng vậy, slice ) xuất “To edit in Slice palette” text layer, nhắc nhở bạn nguồn gốc Lưu ý : Bạn áp dụng layer styles cho layer mà bạn dùng để khởi tạo slice Các kích thước slice tựđộng tăng lên đểăn khớp với khơng gian mở có để hiển thị hiệu ứng bạn áp dụng chúng trình tự Nếu khơng, bạn quay trở lại bước trước định lại kích cỡ slices, bạn thấy Bài 17, ứng Rollover cho trang Chon File > Save để lưu lại công việc bạn Tạo lập No Image Trong ImageReady Photoshop, bạn tạo lập No Image slices sau đặt thêm mã nguồn HTML vào No Image slices có màu lưu giữ HT Thuận lợi việc dùng No Image slices văn văn có thểđược trình biên tập HTML nào, tránh cho bạn phiền hà phải quay trở lại ImageReady để biên tập Điều bất tiện là, văn phát triển đến mức lớn cho bị bẻ gãy thành bảng table HTMLvà bắt đầu tạo khoảng trống không mong pháp phải làm cho slice đủ rộng để có thểđiều chỉnh cho phù hợp với thay đổi thuộc tính font thích hợp với kích thước www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Hãy chắn layer-based slice mà bạn tạo cho thông tin quyền cửa sổảnh Nếu chưa, dùng công cụ Slice để chọn Trong Slice palette, chọn No Image từ Type pop-up Dùng Text box Slice palette (chứ cửa sổảnh) gõ vào vài thơng quyền (Ởđây chúng tơi dùng ©2004 Organic Support Group) Hãy đảm bảo tùy HTML xác Bạn có thểđặt thêm biểu tượng quyền cách nhấn giữ phím Alt gõ 0169 phím số (Windows) nhấm giữ phím Option gõ G Do bạn chọn No Image cho dạng thức slice, nên layer trình giữ chỗ văn (“To palette”) mà giờđây bạn thấy cửa sổảnh không xuất trang Web Còn dòng bạn gõ vào Slice palette trang Web; nhiên, khơng xuất ảnh bị cắt lát bạn ImageReady hay www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Click vào vùng trống Layers palette để khử Chọn File > Xem trước No Image slice trình duyệt Giờ bạn nên đảm bảo đoạn text bạn gõ lấp đầy table, bạn nên xem ảnh trình duyệt Web Để thực nhiệm vụ này, bạn phải có Web browser máy Lưu ý : (Chỉ Mac OS ) Hãy đảm bảo bạn có bí danh (alias) trình duyệt đặt chỗ sẵn cho trình duyệt khơng mởđược dạng thức Trong hộp công cụ, click nút lệnh Preview In Default ho ) chọn duyệt từ pop-up menu nút Bức ảnh xuất cửa sổ duyệt, nguồn HTML để xem trước xuất bên Hãy đọc dịng text quyền góc bên phải ảnh đảm bảo phù thông tin mà bạn gõ vào Slice palette (chứ khơng phải placeholder text) ảnh Thốt khỏi trình Trong ImageReady, chọn nút lệnh Toggle Slices Q) đểẩn vạch đánh dấu slice loại bỏ vết mờ khỏi hộp công cụ (hoặc nhấn Chú ý : Việc thêm chọn lựa trình duyệt bạn vào nút lệnh Preview In Default vụđơn giản mà bạn thực desktop Bạn cần khởi tạo (Windows) alias (Mac OS) cho ứng dụng Web browser bạn, đọan rê vào Preview In desktop Folder sẽđược đặt bên folder Helpers thư mục C Nói thêm việc tạo lập Bạn vừa hoàn thành thực hành học Bạn khám phá vài lát ảnh thiết lập tùy chọn slice Photoshop ImageReady, tất Có nhiều phương pháp khởi tạo slices khác mà bạn tự làm thử • Nếu dùng đường dẫn quen thuộc cơng việc thiết kế mình, bạn tức khắc toàn ảnh thành nhiều users slices với tùy chọn công cụ (Photoshops) Slices menu (ImageReady) Tuy nhiên, kỹ thuật dùng cách có cân nhắc, lẽ hủy bỏ tất slices trước tùy chọn có liên quan tới slices Hơn nữa, slices user slices, mà bạn lại khơng cần nhiều www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh • Khi bạn cần khởi tạo slices có kích thước (thậm chí lề khoảng cách) y hệt thử xây dựng thật xác user slice riêng lẻ bao quanh toàn khu vực Sau đó, trưng Divide Slice tùy chọn công cụ Slice Select (Photoshop) menu (ImageReady) để chia cắt slice gốc thành nhiều slices theo chiều ngang chiều bạn • Nếu bạn chọn sẵn vùng cơng cụ tạo vùng chọn ImageReady mà bạn cần phân hoạch phạm vi slice, bạn dùng Slice From Selection menu Select Hãy ý thức rằng, cho dù vùng chọn có nữa, slice mà bạn tạo ln hình Làm việc với with image maps Khởi tạo image maps chức bạn phải thực Adobe Bạn dùng Photoshop để khởi tạo slices, mà chừng mực chia với image maps, bạn tạo lập image maps Trong phần này, bạn khởi tạo image map ảnh tương tự mà bạn học này, trang chủ organic food Nhiệm vụ bạn tạo liên trang Web khác cho phù hợp với hình dạng đề mục biểu thị ảnh sản phẩm - điều mà không dễ làm với slices tính chất ln hình chữ n Nếu ImageReady chưa mở sẵn, khởi động chúng ngay, nhấn giữ tổ hợp phím với hệđiều hành bạn để phục hồi thiết lập mặc định (Xem “Restoring default Phục hồi thiết lập mặc định” trang 4) Đoạn, chọn lấy workspace mà bạn định từ trình đơn phụ Workspace menu Window (Xem “Working with slices in với slices Dùng layers để khởi tạo image Bạn sẽđịnh nghĩa vùng image-map dựa số layers tạo nên thiết kế trang cách dùng layers đểđịnh nghĩa hotspots, bạn dễ dàng áp đặt kiểm soát lên ảnh vùng Nếu file 15Start.psd chưa mở ImageReady, phải mở Trong Layers palette, chọn Asparagus Hãy lưu ý layer style, Drop Shadow effect, áp dụng sẵn cho www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Chọn Layer > New Layer Based Image Map Một hình chữ nhật mờ mờ viền đỏ xung quanh ra, bao quanh phạm vi bó măng tây ảnh đường viền đỏ mờ xác định khu vực hotspot hàm chứa Trong nhóm Slice palette, click tab Image Map đểđem Image Map palette lên Click vào mũi tên để mở rộng tùy chọn Layer Based Settings (nếu cần), chọn Polygon pop-up Giờ đường viền màu đỏ trở nên gần giống với hình dạng bó măng tây, bao gồm cạnh thấp bên phải www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Trong tùy chọn Quality Image Map palette, kéo trượt gõ vào giá trị 90 đường viền đỏ ôm sát hình dạng vùng ảnh bó Trong Image Map palette, gõ Asparagus Name, gõ pages/veggies.html cho _blank cho Target pop-up Bây giờ, Layers palette, icon hình bàn tay xuất layer Asparagus, biểu thị layer-based image Click vào vùng trống Layers palette để khử chọn layer Asparagus, chọn Sử dụng công cụ image Khi thành tố bạn cần dùng cho image maps bố trí cách thuận lợi riêng biệt, việc định nghĩa vùng image-map trở nên thật đơn giản, bạn tiến trình Tiến trình tiến trình sau trình bày cho bạn cặp kỹ thuật định nghĩa bên layer đơn www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Phương pháp thứ tương tự kỹ thuật Photoshop mà bạn dùng trước sách bạn chọn thành phần công cụ Pen Trước bắt đầu làm việc, bạn tùy chọn snap-to, vốn có chức làm cho dễ dàng việc bố trí thật xác điểm mà bạn Chọn View > Snap cho lệnh không chọn (tắt dấu Trong hộp công cụ, chọn cơng cụ Polygon ( ) ẩn phía công cụ Image ) Click vào mép trái đu đủđể thiết lập Di chuyển trỏ chuột dọc theo biên ngồi hình nhãn đu đủ, click liên tục nhiều lập nhiều điểm neo Đừng lo lắng điểm không bố trí hồn hảo bạn thực để hiệu chỉnh www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Khi điểm neo hầu nhưđã viền hoàn toàn xung quanh quảđu đủ, click lên điểm neo đểđóng kín hình dạng image-map (icon trỏ biến đổi bạn trỏ sang bên phải, vòng tròn nhỏ biểu thị cú nhấp chuột làm hình Đường biên image-map màu đỏ xuất xung quanh quảđu đủ với các điểm neo thiết lập cho Dùng vùng chọn để tạo image Bạn convert vùng chọn(do bạn tạo công cụ chọn) thành Bây bạn thử với nhánh thìa là, chọn với cơng cụ Magic Chọn cơng cụ Zoom click lên cành thìa (“HERBS”) độ phóng đại 300 Trong Layers palette, chọn Background Chọn công cụ Magic www.vietphotoshop.com - ), ẩn đàng sau công cụ ) Chương 15: Tạo lập liên kết bên ảnh Đoạn, tùy chọn công cụ, gõ giá trị 42 vào tùy chọn Tolerance đảm bảo Contiguous chọn, phải chọn Click lên nhánh thìa chỗ nhãn “Herbs” vắt ngang Nhấn giữ phím Shift, cho trỏ công cụ Magic Wand xuất dấu cộng (+) kế thận click lên vùng “không chọn” nhánh thìa Lặp lại lần nhánh thìa chọn — vùng chọn không thiết phải thật www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Lưu ý : Nếu vùng chọn không xuất sau cú nhấp chuột, bạn có thểđã click ngẫu nhiên lên thớ gỗ, làm cho vùng chọn gộp thành khu vực rộng Trong trường chọn Edit > Undo thử lại lần Chọn Select > Create Image Map From Selection để mở hộp thoại Create Image Map Xác chọn Polygon, with Quality, nhập giá trị 80, Trong cửa sổảnh, hình ảnh nhánh thìa mờđi đường viền đỏ xác định hình dạng map xuất bao quanh nhánh Chọn Select > Deselect để gỡ bỏ vùng Trau chuốt hình dạng image map ấn định liên Trong hai tiến trình trước ta khơng thử khởi tạo dạng image-map phù hợp cách hảo với đề mục mô tả Bạn cải thiện hình dạng thơi, sau URL đặt tên tin cho image maps bạn Bạn bắt đầu với image map từ thời thìa hiển thị phóng đại lên Chọn công cụ Image Map ) Nếu image map xác định nhánh thìa chưa (đến mức đường biên image-map đường viền đỏ với điểm chọn Chọn điểm neo chưa ơm khít hình dạng nhánh thìa rê đến vị www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh Dragging an anchor point Finished image Từng bước 1, chọn điểm neo khác kéo rê chúng đến vị trí màbạn cảm thấy với hình dáng image Bạn thêm vào điểm neo riêng lẻ cách Shift-click : Đầu tiên, định vị bạn muốn xác định điểm đặt.Nhấn giữ phím Shift, xuất dấu cộng icon trỏ chuột click Để gỡ bỏđiểm neo, Alt-click (Windows) Option-click (Mac trường hợp này, dấu trừ (-) xuất vị trí icon Trong Image Map palette, gõ Herbs cho Name, pages/herbs.html cho URL, chọn Targ Hoàn tất phần cịn lại cơng việc với image map xác định trái đu đủ cách làm theo sa • Nhấn giữ phím spacebar để tạm thời chuyển sang cơng cụ Hand rê chuột thấy vùng image-map • Chọn di chuyển điểm neo bạn hài lịng với hình dáng www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh • Chọn tùy biến Image Map palette, gõ Papaya cho Name, URL, chọn _blank cho Chọn Select > Deselect Image Double-click lên công cụ Chọn File > ) công cụ Zoom để thu nhỏ khung Lưu ý : Nếu bạn muốn xem ảnh mà bỏ qua đường viền mờ màu blue sáng image-map, nút lệnh Toggle Image Maps Visibility [ ] hộp công cụ, nhấn phím A Chọn lại nhấn phím A lần để xem thị Trong chừng mực học bạn tạo liên kết image map liên kết slice cho trang Web bạn Bạn thừa thắng xơng lên tạo thêm image maps cho lê nho muốn có thêm hội thực hành, bạn tiếp tục chuyển sang chủđề Khảo sát tất vùng liên kết tạo file Khi bạn lưu image map file HTML, thẻ (tags) HTML cần thiết để hiển trang Web tựđộng sinh Cách dễ để làm điều đơn giản xác nhận HTML And Images bạn lưu lại ảnh hoàn Một bạn tạo xong file HTML, việc cập nhật để phản ánh thay đổi (chẳng hạn, vùng image-map hiệu chỉnh hay tạo mới) trở nên thật dễ Trong ImageReady, chọn Window > Web Content để mở palette có liên quan Nếu cần, mũi tên để mở rộng Image Maps Slices categories, kéo góc bên phải palette nhìn thấy tồn đề mục Xem trước bảng liệt kê Web Content vốn bao gồm ảnh nhỏ (thumbnails) biểu thị image maps Lưu ý image-map thumnails bao gồm đường biên www.vietphotoshop.com - Chương 15: Tạo lập liên kết bên ảnh vùng image Đóng Web Content palette chuyển khỏi đường Chọn File > Save Optimized As (Hãy cẩn thận đừng chọn nhầm Trong hộp thọai Save Optimized As, chấp nhận tên mặc định, 15Start.html, làm bước • Chọn HTML And Images pop-up menu Save As Type (Windows) pop-up (Mac • Định vị chọn folder Lessons/Lesson15/15MyPage làm địa • Click Chuyển desktop double-click để mở file 15Start.html ứng dụng Web browser Click vào vài vùng slices image maps mà bạn tạo kiểm tra xem coi liệu đối tượng chúng không liên kết cách đắn không (tức có số nối được) Khi bạn xong việc, chuyển trở ImageReady, thoát khỏi Web browser 15Start.ht Lưu ý : Trong Photoshop, bạn tạo lập file HTML hộp thọai Save Optimized As xuất hoàn thiện file ảnh click OK hộp thoại Save Biên tập thông tin liên kết cập nhật file Vài image maps file HTML không liên kết cách đắn, ta thay số trang đích để có mơ tả cụ thể loại rau file ảnh dễđược khắc phục file ImageReady nguyên thủy sau tiến hành cập nhật HT Trong hộp công cụ ImageReady, chọn công cụ Image Map Trong cửa sổảnh, click chọn vùng image-map Trong Image Map palette, đổi the URL sang www.vietphotoshop.com - )