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.. Dùng công[r]
(1)Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com. Những viết trong 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 phát hành lại trang web bạn làm
ơ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 - Final Fantasy www.vietphotoshop.com
Bài học đề cập lát cắt ánh xạ ảnh - đặc trưng mà bạn dùng để 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 giản Người 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 để đến site khác
Có kỹ thuật mà bạn đùng để khởi tạo mảnh chia gán liên kết ảnh mà người dùng click vào để mở site khác trình duyệt Web Một phương pháp định nghĩa lát cắt (từ sau viết theo nguyên tiếng Anh slice), mảnh nhỏ hình chữ nhật thu từ trình chia cắt ảnh Adobe Photoshop hay Adobe ImageReady Phương pháp lại khởi tạo ánh xạ ảnh (từ sau viết theo nguyên tiếng Anh image maps), không thiết phải hình chữ nhật
Trong này, bạn học chủ điểm sau : • Một số phương pháp khởi tạo image slices
• Phân biệt khác user slices auto slices • Liên kết user slices với trang hay địa HTML
• Khởi tạo lát cắt “khơng phải ảnh” (”no image” slice) để chứa text biên tập HTML
(2)• Bằng qui trình tự động, tạo trang HTML chứa ảnh bị cắt bảng table
Bạn phải dành khoảng 90 phút để hồn thành học Bạn thực việc tạo slices Adobe Photoshop lẫn Adobe ImageReady, ImageReady có công cụ tạo lập image maps
Lưu ý rằng, người dùng Windows 2000 cần phải unlock tập tin học trước dùng chúng Để có thêm thông tin, xin tham khảo trang “Copying the Classroom in a Book files” (Điều không cần thiết người dùng Windows XP Mac OS)
Khởi đầu
Trong học bạn làm việc đồ thị trù liệu sẵn cho Web home page Mục 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 file psd đơn lẻ
Những vùng khác, điểm nóng (hotspots - khu vực ảnh đồ thị mà bạn click vào để nhảy đến địa xác định URL) image map liên kết với file khác, cho người dùng click lên vùng trang chủ để mở trang liên kết click lên vùng khác trang chủ để mở trang liên kết khác Sẽ có vùng khơng liên kết trang chủ mà không mang lại thay đổi người dùng click cách ngẫu nhiên hay hú họa
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 thiết lập khác từ vùng tĩnh ảnh cách làm cho slices trở nên sinh động cách định nghĩa hiệu ứng tương tác động (rollover effects)
Đôi điều slices image maps
Phương pháp khởi tạo slices Slices vùng ảnh bạn đị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, Photoshop hay ImageReady tạo bảng (table) HTML rèm kiểu dáng (cascading style sheet) để chứa gióng hàng slices Nếu muốn, bạn tạo (bằng quy trình tự động) xem trước file HTML chứa ảnh bị cắt lát với table cascading style sheet
(3)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 mà bạn 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 (Chẳng hạn, Netscape, Internet Explorer, Safari) thay Photoshop hay ImageReady Bạn không cần phải kết nối Internet
1 Khởi động trình duyệt Web file kết thúc 15End.html thư mục Lesson15/15End
File chứa HTML table vốn liên kết với số ảnh Web, tất tạo lập từ Photoshop ImageReady slices
2 Click nút lệnh “why organic?”ở đỉnh trang Web Organic Foods Một cửa sổ duyệt Web mở để mở trang (Không phải trang mở rộng đầy đủ; Nó cịn trang giữ chỗ (placeholder page) để bạn click vào thực trình bày liên kết)
3 Đóng file Why page đưa làm ví dụ Web browser
4 Cũng Web browser, mở trang Organic Foods, click nút lệnh “products” đỉnh trang web Kế đến, đóng file ví dụ Web browser thị trang “Product”
(4)chủ Click thêm vài liên kết khác mà bạn tìm thấy trang web
7 Khi xem xong files kết thúc, đóng tất cửa sổ trình duyệt web khỏi ứng dụng
Trong tiến trình này, bạn chứng kiến dạng thức liên kết khác : slices (Trong nút lệnh đỉnh trang Web) image maps (bó măng tây, đu đủ, vùng ảnh thảo mộc, vùng liên kết phù hợp với dạng đề mục mô tả)
Bạn bắt đầu công việc với Slices, vốn ln hình chữ nhật Cắt lát ảnh Photoshop
Bạn định nghĩa Slices Photoshop cách rê công cụ Slice chuyển đổi lớp 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 cho trang Web, dùng công cụ Slice Photoshop
Về việc thiết kế trang Web với Photoshops ImageReady
Khi dùng Photoshop ImageReady để thiết kế Web pages, phải nhớ in đầu công cụ đặc trưng khả thi ứng dụng
• Photoshop cung cấp công cụ khởi tạo thao tác ảnh tĩnh dùng cho Web Bạn chia nhỏ ảnh thành nhiều Slices , đặt mối liên kết HTML text, tối ưu hóa slices, lưu ảnh trang Web
• ImageReady cung cấp nhiều - tất - công cụ biên tập ảnh tương tự Photoshop Thêm vào đó, cịn bao hàm cơng cụ pallettes dành cho việc xử lý khởi tạo ảnh Web động chẳng hạn animations rollovers
Chuẩn bị tạo lập Slices
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 trạng thái sẵn sàng hoạt động
1 Khởi động Adobe Photoshop, ấn tổ hợp Ctrl+Alt+Shift (Windows)/ Command+Option+Shift (Mac OS) để trả thiết lập mặc định
2 Click nút File Browser ( ) dùng palette File Browser Folders để định vị chọn folder Lessons/Lesson15
3 Double-click lên ảnh nhỏ biểu thị file 15Start.psd, chọn file bấm lệnh File > Open menu trình duyệt File Browser
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 vectơ không, chọn Update
(5)chọn công cụ lần để đóng File Browser để giảm thiểu cản trở không gian làm việc
5 Hãy đảm bảo lệnh sau chọn (có dấu kiểm), khơng, chọn chúng lúc
• View > Show > Guides • View > Show > Slices • View > Snap
• View > Snap To > Guides • View > Snap To > Slices
Đườ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 slices 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 slices
Bạn tự hỏi đầu chủ đề lại dùng “slices” thay “a slice” Câu trả lời là, bạn tạo slice bao hàm toàn ảnh - vốn rõ ràng điều vơ ích, lẽ slice tạo cách tự động - bạn khởi tạo slice Bất kỳ slice bên ảnh (1 user slice đó) gây hình thành slices khác (auto slice) phủ kín vùng ảnh phía ngồi user slice mà bạn vừa tạo
(6)4 Trong cửa sổ ảnh, chọn image-map bó măng tây, đoạn đổi URL Image Map palette thành pages/asparagus.html
Lưu ý : Bằng cách tương tự, bạn đổi thơng tin liên kết cho slices, cách dùng công cụ Slice Select (thay cơng cụ Image Map Select) Slice palette (thay Image Map)
5 Chọn File > Update HTML
6 Trong hộp thọai Update HTML, chọn file 15Start.html, click Open Click Replace hộp thoại Replace Files xuất hiện, click OK thông báo update
7 Trở lại trình duyệt Web chọn icon refresh hay reload tùy trình duyệt, lệnh View menu Click liên kết để chắn chúng hồn hảo, sau trở ImageReady
8 Chọn File > Close để đóng file ảnh Nếu thông báo xuất nhắc nhở bạn file không mở Photoshop, click Yes qua
Bạn dùng trình duyệt Web để mở xem file 15Start.html Bạn mở file ứng dụng xử lý văn hay trình tạo Web để tự kiểm tra lại mã HTML Các quy ước đặt tên file HTML dành cho Web
Dùng quy ước đặt tên file UNIX®, nhiều chương trình network giản lược tên file dài Quy ước đòi hỏi tên file phải có tối đa ký tự, kéo theo sau phần mở rộng Dùng phần mở rộng html htm
Đừng dùng ký tự đặc biệt dấu hỏi (?) dấu (*), khoảng cách chữ tên file bạn—một số trình duyệt khơng nhận biết tên dài Nếu phải dùng ký tự đặ biệt khoảng trống tên file, kiểm tra tài liệu hướng dẫn việc biên tập HTML để dùng cho xác Chẳng hạn, để tạo khoảng trống chữ bạn cần rút ngắn đơn vị khoảng cách xuống 20%
(7)Câu hỏi ôn tập Slices gì?
2 Mơ tả 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 xác ơm khít đối tượng có hình dạng dạng nhỏ bé bất thường
4 Làm thể để khởi tạo slice không chứa hình ảnh ? Một slice tạo nhằm mục đích ?
5 Những điểm khác giống slices image maps? Đáp án
1 Slices vùng hình chữ nhật ảnh mà bạn định nghĩa Photoshop ImageReady nhằm mục đích tối ưu hóa trang Web Với slices, bạn tạo lập hình động, liên kết URLs, hiệu ứng rollovers
2 Bạn chủ động tạo image slices cách chọn vùng ảnh với công cụ Slice Những phương pháp linh họat khác để tạo slices bao gồm : chuyển đổi layers, đường dẫn vùng chọn thành slices cách dùng lệnh menu Layers, Slices, Select Một cách gián tiếp, auto slices tự động tạo vùng ảnh bị cắt lát mà bạn bỏ qua không định nghĩa dùng 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) ImageReady, xác định đối tượng, 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) Slice palette (trong ImageReady), chọn No Image từ menu Type No Image slices chứa màu nền, văn mã nguồn HTML, chúng có nhiệm vụ trình giữ chỗ (placeholder) dành cho đồ thị thêm vào sau
5 Các Slices tạo lập Photoshop ImageReady; chúng ln có dạng chữ nhật; chúng định nghĩa có ảnh, khơng có ảnh, có nội dung Table Cịn Image maps tạo ImageReady ; chúng mang hình dạng bất kỳ; chúng lng có nội dung ảnh Cả slices image maps định hình với trạng thái rollover mà bạn nghiên cứu thêm Chương 17, “Tạo hiệu ứng Rollovers cho trang Web.”
và