Ch ng 15ươ : Thêm các Slice t ng tác và Rolloversươ
Các Slice là các ph n chia c a m t vùng b c nh mà b n có th xác đnh b ng cách s d ng Adobe Photoshop ho c ImageReady. B nầ ủ ộ ứ ả ạ ể ị ằ ử ụ ặ ạ
cũng có th làm s ng đng h n các Slice c a b n, k t n i chúng đn các đa ch URL và s d ng chúng cho các nút Rollover. M t ngể ố ộ ơ ủ ạ ế ố ế ị ỉ ử ụ ộ ứ
d ng khác c a s d ng Slice là t i u hoá chúng m t cách riêng l trong các đnh d ng hình nh khác cho Web site đ t i đa các hi u ngụ ủ ử ụ ố ư ộ ẻ ị ạ ả ể ố ệ ứ
cho hình nh c a Web site c a b n trong khi th i gian t i v là nh nh t.ả ủ ủ ạ ờ ả ề ỏ ấ
Trong Ch ng này, b n s tìm hi u v :ươ ạ ẽ ể ề
· Tạo các Slice ảnh bằng các phương pháp khác nhau.
· Tối ưu hoá các slice ảnh riêng rẽ sử dụng các tuỳ chọn riêng biệt và các định dạng file
· Tạo các slice “không hình ảnh” cho mục đích chứa văn bản và HTML.
· Tạo nút Rollover
· Ứng dụng dạng chữ biến dạng đối với Layer văn bản
· Tạo Rollover trạng thái trên, dưới và lựa chọn cho các slice
· Chỉ định sự kết hợp khác nhau của các layer ẩn và trong suốt như các điều kiện chỉ định của các trạng thái rollover
khác nhau.
· Tạo một trang HTML chứa đựng hình ảnh đã phân cắt trong một bảng.
B n s m t kho ng 90 phút đ hoàn thành ch ng này. Ch ng này đc biên so n cho Adobe Photoshop và ImageReady. M t s ph nạ ẽ ấ ả ể ươ ươ ượ ạ ộ ố ầ
trong ch ng này b n ph i th c hi n trong ImageReady.ươ ạ ả ự ệ
N u c n thi t, hãy xoá b đi thu m c bài h c tr c trong máy tính c a b n và copy thu m c Lesson15 thay vào đó. Vì khi b n th c hi nế ầ ế ỏ ụ ọ ướ ủ ạ ụ ạ ự ệ
ch ng này, b n s ghi ch ng lên file m đu. N u mu n khôi ph c file này, hãy copy chúng t ươ ạ ẽ ồ ở ầ ế ố ụ ừ H c Adobe Photoshopọ trong CD kèm theo.
Chú ý: Ng i s d ng Windows c n gi i nén bài h c này tr c khi s d ng. Đ hi u rõ h n, hãy xem ph n “Sao chép các bài h c” trênườ ử ụ ầ ả ọ ướ ử ụ ể ể ơ ầ ọ
trang 4.
Bắt đầu
Tr c khi b t đu bài h c này, hãy khôi ph c các tu ch n ng d ng m c đnh cho Adobe Photoshop và Adobe ImageReady. Xem “Ph cướ ắ ầ ọ ụ ỳ ọ ứ ụ ặ ị ụ
h i các thông s m c đnh” trên trang 5.ồ ố ặ ị
B n s b t đu bài h c này b ng cách xem m t ví d c a m t bi u ng (ạ ẽ ắ ầ ọ ằ ộ ụ ủ ộ ể ữ banner) HTML đã hoàn ch nh mà b n s t o ra. Đ h a c aỉ ạ ẽ ạ ồ ọ ủ
bi u ng này ph n ng v i các thao tác c a b n khi s d ng chu t. Ví d nh b c nh s thay đi hình th c khi con tr chu t di chuy nể ữ ả ứ ớ ủ ạ ử ụ ộ ụ ư ứ ả ẽ ổ ứ ỏ ộ ể
qua m t s vùng trên b c nh ho c khi b n click vào các vùng đó.ộ ố ứ ả ặ ạ
1. Khởi động một trình duyệt, và mở file kết thúc Banner.html từ thư mục Lessons/Lesson15/15End/Architech Pages.
File này chứa đựng một bảng HTML được liên kết đến một số hình ảnh khác mà tất cả chúng được tạo ra từ các slice của
Photoshop và ImageReady.
2. Di chuyển con trỏ chuột qua các nút “designs”, “structures”, “art” và “contact” trong banner.
Chú ý về các hình đồ hoạ nhỏ xuất hiện bên trái của các nút khi bạn di chuyển con trỏ chuột qua 3 nút đầu tiên. Cũng chú ý như
thế về sự thay đổi của từ Architech khi bạn di chuyển con trỏ chuột qua nút cuối cùng.
3. Giữ chuột và drag con trỏ qua ba nút đầu tiên, hãy để ý xem từ Architech thay đổi nhu thế nào trong lần này. Nhả chuột.
4. Di chuyển con trỏ chuột qua vòng tròn màu xanh lớn gần rung tâm của bức ảnh và hãy để con trỏ chuột ở khu vực này
cho đến khi bạn nhìn thấy một hộp văn bản mở ra với một vài thông tin bổ sung. Sau đó hãy click vào vòng tròn xanh để
đến trang Team.
5. Trên trang Team, hãy thủ cuộn con trỏ chuột qua 3 nút khác nhau và để ý về sự thay đổi. Hãy thủ click vào mỗi nút và
sau đó là click vào nút Team. Chú ý về sự thay đổi.
Nếu bạn muốn quay trở lại trang banner, hãy dùng nút Back trên trình duyệt.
6. Bạn đã xem xong file này, hãy đóng nó và thoát khỏi trình duyệt.
Thế nào là Slice
Slice là các vùng trong m t b c nh mà b n xác đnh trên c s các l p, h ng d n hay các vùng ch n chính xác trong b c nh, ho c b ngộ ứ ả ạ ị ơ ở ớ ướ ẫ ọ ứ ả ặ ằ
cách dùng công c Slice. Khi b n xác đnh các Slice trong m t b c nh, Photoshop ho c ImageReady s t o m t b ng HTML ho c các tụ ạ ị ộ ứ ả ặ ẽ ạ ộ ả ặ ờ
m u x p t ng đ ch a và canh l cho các slice. N u b n mu n, b n có th t o m t file HTML ch a b c nh đã slice theo d ng b ngẫ ế ầ ể ứ ề ế ạ ố ạ ể ạ ộ ứ ứ ả ạ ả
ho c d ng các t m u x p ch ng.ặ ạ ờ ẫ ế ồ
B n cũng có th t i u hoá các Slice nh các hình nh cho các trang Web riêng bi t, thêm HTML hay văn b n đn các slice và liên k t cácạ ể ố ư ư ả ệ ả ế ế
slice đn các đa ch URL. Trong ImageReady, b n có th làm sinh đng các slice và t o rollover v i chúng.ế ị ỉ ạ ể ộ ạ ớ
Trong ch ng này, b n s khám phá v các cách khau nhau đ t o slice c a m t b c nh trong Photoshop và ImageReady, t i u hoá cácươ ạ ẽ ề ể ạ ủ ộ ứ ả ố ư
slice và t o b n nút rollover cho banner. B n cũng s tìm hi u v b ng cách nào đ làm sinh đng các slice, b n có th xem thêm trongạ ố ạ ẽ ể ề ằ ể ộ ạ ể
ch ng 16, “T o các hình nh đng cho Web site”.ươ ạ ả ộ
Phân chia m t b c nh trong Photoshop ộ ứ ả
Adobe Photoshop cho phép bạn xác định các slice sử dụng công cụ Slice hoặc biến đổi các lớp thành slice. Bạn sẽ đặt tên cho
các Slice và liên kết chúng đến các địa chỉ Url sau đó sẽ tối ưu hoá chúng. Sau nữa, bạn sẽ tiếp tục phân chia hình ảnh của
banner trong ImageReady và tạo rollover cho các nút slice.
Thiết kế các trang Web với Photoshop và ImageReady
Khi bạn thiết kế các trang Web sử dụng Adobe Photoshop và ImageReady, hãy hình dung về các công cụ và các tính năng mà
bạn có thể dùng trong mỗi ứng dụng.
· Photoshop cung cấp các công cụ cho phép bạn tạo và thao tác trên các bức ảnh tĩnh dùng cho các trang Web. Bạn có
thể chia một bức ảnh thành các slice, bổ sung thêm các liên kết và văn bản dạng HTML, tối ưu hoá các slice và lưu hình
ảnh như một trang Web.
· ImageReady cung cấp cho bạn nhiều công cụ tương tự cho việc chỉnh sửa ảnh như Photoshop. Thêm vào đó,
ImageReady cũng có các công cụ và các Palette cho các thao tác nâng cao với các trang Web và tạo các hình ảnh động
cho Web site như các ảnh động và rollover.
Thử nghiệm với các Slice trong Photoshop
Trong ph n th c hành này, b n s h c không ch m t s cách đ b n có th t o Slice mà b n còn h c v các cách khác nhau gi a ầ ự ạ ẽ ọ ỉ ộ ố ể ạ ể ạ ạ ọ ề ữ slice
ng i dùngườ (user slices) và các slice t đngự ộ (auto slices). Slice ng i dùng và Slice t đng có công d ng khác nhau, đây là lý do quanườ ự ộ ụ
tr ng đ hi u bi t v các nét đc đáo riêng c a chúng.ọ ể ể ế ề ộ ủ
· User Slice là những vùng mà người sử dụng chỉ định như các Slice
· Auto Slice là các phần chia hình chữ nhật của phần còn lại của bức ảnh - tất cả các phần mà không thuộc một user
slice. Photoshop và ImageReady tạo ra các slice này cho bạn.
1. Khởi động Adobe Photoshop
N u có m t chú ý xu t hi n h i b n có mu n tu ch nh các tu ch n màu s c, hãy click Noế ộ ấ ệ ỏ ạ ố ỳ ỉ ỳ ọ ắ
2. Chọn File > New, và click OK chấp nhận các tuỳ chọn mặc định.
3. Chọn View > Show > Slices để đánh dấu kiểm tra về lệnh Slices
4. Trong hộp công cụ, chọn công cụ Slice ( ), và hãy drag một hình chữ nhật nhỏ ở bất kỳ đâu trong của sổ hiển thị hình
ảnh. Bạn vừa tạo ra một User slice.
Đ ý r ng hình ch nh t đc ch n (có khung n i b t và hi n rõ). Ngoài ra, b n hãy chú ý r ng còn có nhi u slice khác mà đã đcể ằ ữ ậ ượ ọ ổ ậ ệ ạ ằ ề ượ
xác đnh b i các nhãn màu khác nhau. Có các slice khác là auto slice. M i slice đã đc đánh s .ị ở ỗ ượ ố
5. Tạo một user slice khác bằng cách drag công cụ Slice trong một vùng khác của bức ảnh hiển thị.