Tác giả : Khắc Nam - softnd.comChà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 t
Trang 1Tá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>
Trang 2<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
Trang 3Phầ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.
Trang 4Tiế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ừ
Trang 5Vẫ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
Trang 6Tab Advanced cũng chọn như hình
Trang 7Xong 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
Trang 8Ta 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
Trang 9Đâ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
