duyệt.
1.
Chọn Window > Documents > 15Start.psd để chuyển chúng trở lại bức ảnh banner.2.
Trong hộp công cụ, hãy click vào nút Preview In Default Browser hoặc chọn một trình duyệt từ menu phụ mở ra.3.
Khi trang này đã được mở trong một của sổ trình duyệt, bạn hãy di chuyển con trỏ chuột qua mỗi nút rollover trên banner.Một hình ảnh khác xuất hiện cho mỗi nút trong ba nút đầu tiên, và dòng chữ biến dạng sẽ xuất hiện trong nút cuối cùng
cùng
4.
Hãy giữ chuột khi con trỏ di chuyển qua mỗi nút.Khi bạn giữ chuột, bạn sẽ thấy: Trên nút Design, các chữ màu trắng “tech” hiển thị; trên nút Structures, các chữ màu trắng “arch” hiển thị và trên nút Art, các chưa màu trắng “art” hiển thị.
trắng “arch” hiển thị và trên nút Art, các chưa màu trắng “art” hiển thị.
5.
Click vào vòng tròn xanh ở giữa của bức ảnh để mở trang Team.html6.
Hãy di chuyển con trỏ qua các tên dick, jayne và sal để kiểm tra về các trạng thái Over State hoạt động một cách đúng đắn.7.
Bạn hãy click vào mỗi nút sal, jayne, dick và Team để kiểm chứng rằng các trạng thái Selected hoạt động đúng.8.
Khi bạn đã xem xong các Rollovers, hãy thoát khỏi trình duyệt và quay lại ImageReady.Bây giờ, banner và các trang team đã hoàn thành, bạn sẽ lưu các slice đã tối ưu hoá và chuyển chúng thành file định dạng HTML chứa mọt bảng HTML của các hình ảnh đã được slice.
ImageReady cũng cho phép bạn lưu các slice trong các bảng mẫu xếp tầng (tốt hơn lưu trong các bảng). Để sắp xếp file cho các bảng mẫu xếp tầng, bạn chọn File > Output Settings > HTML. For Slice Output, chọn Generate CSS, và click OK.
1.
Với file 15Start.psd được kích hoạt, chọn File > Save Optimized2.
Trong hộp thoại Save Optimized, hãy nhập tên Banner.html. Trên của sổ trình đơn mở ra, chọn HTML và Images, chọn All Slice từ menu Slices. Chỉ định vị trí là thư mục Lesson/Lesson15/15Start/Architech Pages và click Save.Hộp thoại Replace Files xuất hiện cho hình ảnh cả bốn nút mà bạn lưu trước đây trong Photoshop.
3.
Click Replace để lưu phiên bản mới cho hình ảnh này.ImageReady lưu bảng HTML của các slice ảnh đầu vào trong một file HTML và lưu các hình ảnh đã tối ưu hoá cho tất cả các auto slice, user slice, layer-base slices và các trạng thái rollover trong thư mục Images. Tên file của các bức ảnh
cả các auto slice, user slice, layer-base slices và các trạng thái rollover trong thư mục Images. Tên file của các bức ảnh
dựa trên tên của chúng mà bạn đặt cho các slice hoặc tên mặc định kèm số slice.
4.
Chọn Window > Documents > Team.psd để chuyển chúgn thành file psd và lặp lại bước 1 và 2 nhưng bạn hãy nhập tên là Team.html làm tên file cho phiên bản đã được tối ưu hoá.5.
Để kiểm tra URL kết nối mà bạn gán cho các slice, hãy bắt đầu với một trình duyệt Web và sử dụng nó để mở file Banner.html. Một lần nữa hãy kiểm tra các hiệu ứng của các rollover đối với các slices, bạn cũng nhớ phải click vào vòng tròn xanh để mở kết nối đến trang Team và kiểm tra các hiệu ứng rollover cho trang web này.6.
Đóng trình duyệt, và đóng các file, bạn có thể thoát khỏi ImageReady và Photoshop. Bạn đã hoàn tất bài học của chương 15. Để tìm hiểu kỹ hơn về sử dụng các hình động với các slice và rollover, bạn hãy xem chương 16 “Tạo các hình ảnh động cho trang Web”Câu hỏi ôn tập
1. Slice là gì?
2.
Hãy mô tả 5 cách tạo slice cho một bức ảnh.3.
Thuân lợi của việc liên kết các slice lại với nhau?4.
Mô tả phương pháp tạo slice với các đường biên bao quanh chính xác một đối tượng xác định có hình dạng bất kỳ hoặc đối tượng nhỏ.5.
Làm thế nào để tạo slice Không hình ảnh? Mục đích cho mỗi slice sử dụng là gì?6.
Tên hai trạng thái rollover phổ biến và các hoạt động của chuột tạo ra tác động lên trạng thái của rollover. Có bao nhiêu trạng thái Slice?7.
Mô tả một cách đơn giản để tạo các trạng thái Rollover cho một bức ảnh?Trả lời câu hỏi ôn tập
1.
Slice là các vùng hình chữ nhật của một bức ảnh mà bạn có thể tạo ra trong ImageReady và Photoshop cho việc tối ưu hoá riêng rẽ hình ảnh cho trang Web. Với Slice, bạn có thể tạo hình động dạng GIFs, kết nối URL và rollover.2.
Các slice được tạo ra khi bạn xác định một vùng trong một bức ảnh bằng công cụ slice, hoặc khi bạn chuyển đổi các đường định hướng, hoặc các vùng chọn thánh slice. Chũng cũng được tạo một cách tự động cho các vùng trong một bức ảnh đã được phân chia (slice) mà bạn để nguuyên không xác định.3.
Thuận lợi của việc kết nối các slice lại với nhau là chúng sẽ được chia sẻ các tuỳ chọn tói ưu hoá, điều này có nghĩa là khi bạn thay đổi các tuỳ chọn của một slice liên kết, thì các thông số tuỳ chọn sẽ tự động thay đổi đối với tất cả các slice trong nhóm.4.
Sử dụng công cụ Magic Wand (hoặc công cụ chọn tương đương khác) trong ImageReady để chọn đối tượng và chọn Slices > Create Slice from Selection.5.
Chọn Slice với công cụ Slice Selection. Trong hộp thoại Slice Option (Photoshop) hoặc palette Slice (ImageReady), chọn No Image từ menu Type. Slice không hình ảnh có thể chứa màu nền, văn bản và mã nguồn HTML hoặc chúng có thể sử dụng như một trình dữ chỗ cho các hình đồ hoạ được bổ sung sau.6.
Nomal và Over. Nomal được kích hoạt trong khi không có các hoạt động của chuột còn Over được kích hoạt bằng việc di chuyển con trỏ chuột qua slice. Selected là một trạng thái khác, nó được kích hoạt bằng cách click vào một slice. Có 8 trạng thái rollover được xác định trước, tính cả Custom và None. Nhưng vì bạn có thể tạo các trạng thái riêng của bạn nên thực sự không có giới hạn về số lượng trạng thái slice có thể có.7.
Sử dụng một hình bức ảnh đa lớp, ẩn và hiện các lớp để tạo các phiên bản khác nhau của bức ảnh cho mỗi trạng thái rollover.
Một phần của tài liệu
CÁC SLICE TƯƠNG TÁC VÀ ROLLOVERS
(Trang 35 -38 )
