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 .ắ ể ị ư ắ ể ị 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 .ắ ể ị ư ắ ể ị
5. Click vào vòng tròn xanh ở giữa của bức ảnh để mở trang Team.html
6. 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.
Lưu các hình ảnh đã phân chia trong 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.ẫ ế ầ ạ ọ ọ
2. 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, layerbase slices và các tr ng thái rollover trong th m c Images. Tên file c a cácấ ả ạ ư ụ ủ t t c các auto slice, user slice, layerbase 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.