Thông tin tài liệu
Tác giả : Khắc Nam - softnd.com Chào các bạn !.Hôm nay mình sẽ tiếp tục loạt bài "Ứng dụng CSS cho thiết kế web" để bạn có thể hiểu được CSS quan trong như thế nào trong thiết kế và lập trình web. Bài viết này sẽ kết hợp giữa CSS với DreamWeaver 8 để làm một cái menu xổ ngang màn hình mỗi khi di chuột qua.Hiệu ứng này bạn có thể thấy ở những trang web chuyên nghiệp.Để làm được nó bạn phải có kiến thức về JavaScript kha khá.Nhưng trong khuôn khổ bài viết này mình sẽ hướng dẫn các bạn làm đúng như thế mà không cần biết 1 tý gì về javascript vì ta hoàn toàn dùng công cụ trong Dreamweaver 8. Mời các bạn xem trước kết quả Phần 1 Được rồi, ta bắt tay vào làm thôi.Đầu tiên bạn tạo mới 1 trang web trong Dreamweaver 8 , tạo mới xong bạn save vào luôn nha. Bước thứ 1, mở code của trang đó lên , thêm đoạn mã CSS này vào(hoặc bạn có thể gõ bằng notepad rồi save lại với đuôi .css, rồi chèn vào trang bạn muón làm menu xổ ngang, đoạn code đó như sau <link rel="stylesheet" href="tênfile.css" type="text/css" /> ) Code cụ thể như sau Quote: #menu { width:170px; background:#000; } #menu a { height: 25px; border-top: #272727 1px solid; text-indent: 20px; padding-top: 2px; text-decoration: none; color: #FFF; display:block; } #menu a:hover { border-top: #484848 1px solid; } Tiếp theo ở phần body bạn gán thẻ <div> có id = menu .Để mình đưa source code của cả phần này ra để các bạn dễ hình dung nha Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style> #menu { width:170px; background:#000; } #menu a { height: 25px; border-top: #272727 1px solid; text-indent: 20px; padding-top:2px; text-decoration: none; color: #FFF; display:block; } #menu a:hover { border-top: #484848 1px solid; } </style> </head> <body> <div id="menu"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">Downloads</a> <a href="#">Support</a> </div> </body> </html> Xong phần này các bạn sẽ được như hình sau Phần 2 :Thiết kế phần xổ ra ,trên thanh menu của DreamWeaver bạn chọn Window > Behaviors hoặc nhấn Shift + F4.Cửa sổ Behaviors hiện ra như sau Quay lai với phần ta menu đang thiết kế của ta.Bạn hãy chọn phần muốn xổ ra ( ở đây là thẻ <a>).Chọn như hình Hình ảnh này đã được thu nhỏ lại. Hãy click vào đây để xem hình gốc. Kích thước của hình gốc là 935x577, dung lượng 44KB. Tiếp theo cửa sổ showpoup-menu hiện ra .Nếu hiện ra 1 thông báo bạn hãy nhấn OK rồi tiếp theo cửa sổ như bên dướihiện ra.Để thêm trang khi xổ ra bạn chọn dấu + .muốn giảm đi chọn dấu trừ Vẫn tiếp tục ở cửa sổ này,ta qua tab thứ 2 Appererance.Hãy cứ chọn như hình,khoan thắc mắc Tab Advanced cũng chọn như hình Xong bước này ta được như sau Tuy nhiên như thế này khá là xấu và hiển thị chưa rõ ràng.Chúng ta cần thay đổi vị tríhiển thị của nó như sau Ta sửa đổi thuộc tính hiển thị của menu sổ ra bằng cách thêm vào như hình trên,xong bước này thì ta đã thành công 8/10 rùi đó.Xem hình minh họa Nhưng thế này thì vẫn chưa đẹp lắm.Giả sử chúng ta muốn thay đổi màu bên trong và thuộc tính đường viền của nó thì sao.Trong cửa sổ show-popup menu bạn hãy chọn qua lại giữa 2 tab Apprance và Advanced để thay đổi màu cũng như đường viền nhé.(phần này bạn tự làm cho nhớ). Chú ý 1 điều là nếu làm sai, lỡ bấm ok rồi thì bạn vẫn có thể sửa lại bằng cách từ cửa sổ Behaviours bạn nhìn thấy bên dưới dấu + là 2 dòng chữ ,có chữ -show pupup va hide popup gì đó.Bạn chọn dòng thứ 2 click chuột phải >edit >cửa sổ show-popup menu lại hiện ra.Bạn lại có thể chỉnh sửa lại theo ý mình Đây là kết quả cuối cùng của mình sau khi thêm chút mắm muối Các bạn có thể xem demo ở đây http://users2.titanichost.com/khacnam47/postbai/bai2/demo_drop.html Tác giả : Khắc Nam - softnd.com - copy nhớ ghi tên tác giả các bạn cứ làm , có gì không hiểu thì hỏi mình . như thế mà không cần biết 1 tý gì về javascript vì ta hoàn toàn dùng công cụ trong Dreamweaver 8. Mời các bạn xem trước kết quả Phần 1 Được rồi, ta bắt tay vào làm thôi.Đầu tiên bạn tạo mới 1. Document</title> <style> #menu { width:170px; background:#000; } #menu a { height: 25px; border-top: #272727 1px solid; text-indent: 20px; padding-top:2px; text-decoration: none; color: #FFF; display:block; } #menu. bên dưới dấu + là 2 dòng chữ ,có chữ -show pupup va hide popup gì đó.Bạn chọn dòng thứ 2 click chuột phải >edit >cửa sổ show -popup menu lại hiện ra.Bạn lại có thể chỉnh sửa lại theo ý mình Đây
Ngày đăng: 07/08/2014, 00:20
Xem thêm: Tạo popup menu không cần JavaSript pot
