|
HỒ LÔ BIẾN |
|
"Màu mè hóa" trang
Web của bạn
Nguyễn Trí Trung (trungnt88@yahoo.com)
|
|
Nếu bạn có trang Web cá nhân trên Internet, tôi xin
trình bày vài mẹo nhỏ để bạn có thể làm cho “cục
cưng” của mình trở nên độc đáo. |
|
Đổi màu thanh cuộn |
|
Thử nghĩ mà xem, bạn mất
bao công sức để đì-dzai trang Web thật hợp với “gu”
của mình theo một tông màu nhất định. Thế thì tại
sao các thanh cuộn (scroll bar) vẫn phải giữ cái màu
nhàm chán của Windows? Để đổi màu thanh cuộn, bạn
làm như sau: |
|
1. Mở FrontPage, mở trang mà bạn cần “chế biến” cái
thanh cuộn, chuyển sang chế độ xem mã nguồn HTML. |
|
2. Trong cửa sổ mã nguồn HTML, bạn tìm đến đoạn
<head>…</head> và chèn đoạn mã sau vào trước thẻ
</head> : |
<style>
BODY
{
SCROLLBAR-FACE-COLOR:#c3d3fd;
SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;
SCROLLBAR-SHADOW-COLOR:#ffffff;
SCROLLBAR-3DLIGHT-COLOR:#89afd5;
SCROLLBAR-ARROW-COLOR:#003399;
SCROLLBAR-TRACK-COLOR:#edf2f8;
SCROLLBAR-DARKSHADOW-COLOR:#89afd5
}
</style> |
|
Chỉ thế thôi. Bạn hãy lưu
(save) cái trang đó và chuyển sang chế độ Preview.
Bạn thấy sao nào? |
|
Đổi màu các liên kết, nút
lệnh, ô nhập liệu |
|
Bạn có thể tiếp tục "sự
nghiệp màu mè hóa" đối với các liên kết (link), nút
lệnh (button), ô nhập liệu (text box),... Cũng dùng
FrontPage tương tự như trên, bạn thêm vào đoạn mã
như sau để đổi màu liên kết: |
<style>
A:link {color:#0099ff;
text-decoration:none}
A:visited {color:#ff0000;
text-decoration:none}
A:hover {color:#0099ff;
text-decoration:underline}
</style> |
|
|
|
Đoạn mã dưới đây giúp bạn
quy định màu cho nút lệnh và ô nhập liệu: |
<style>
.btn
{
border:1px solid #0099ff;
background-color: #0099ff;
color: #FFFFFF;
font-size: 10pt;
font-family: arial;
font-weight: bold
}
.txtbox
{
border:1px solid #0099ff;
background-color: #ffffff;
font-family: arial;
color: #0099ff;
}
</style> |
|
Để đoạn mã vừa nêu có hiệu lực,
bạn cần dùng tên lớp btn, txtbox trong các thẻ HTML
của mình. Ví dụ: |
|
<input
type=”button” class=”btn” value=”Xin chào”> |
|
Bạn chú ý, màu sắc được biểu diễn như sau:
#rrggbb (rr là chỉ số đỏ, gg là chỉ số xanh lá cây
và bb là chỉ số xanh lam). Bạn tùy ý thay đổi các
chỉ số màu trong đoạn mã ở trên cho hạp nhãn. |
|
Đổi màu đoạn văn theo chuột |
|
Không phải là đổi màu cho giống... lông chuột
mà là đổi màu khi có các tình huống liên quan đến
con chuột máy tính: onmouseover (chuột "bò" lên),
onmouseout (chuột "bò" đi),
onclick (chuột nhấn
vào). |
|
Ví dụ, ta làm cho đoạn văn đổi màu theo chuột bằng
cách viết như sau: |
|
<p
onmouseover="this.style.color='red';"
onmouseout="this.style.color='green';">
Đoạn text này có màu đỏ khi di chuột lên,
có màu xanh khi rời chuột
</p> |
|
Ta còn có thể làm cho đoạn văn "phát sáng" khi di
chuột lên. Trước hết, bạn đưa đoạn mã sau vào phần
<HEAD>…</HEAD>: |
<script>
function glowLink(which)
{
which.style.filter=
"glow(color=red,strength=4)";
}
function unGlowLink(which)
{
which.style.filter="";
}
</script> |
|
Sau đó, bạn dùng hàm glowLink và unGlowLink trong
trang Web như thế này: |
<div style=
"position:absolute;left:100;top:100"
onmouseover="glowLink(this);"
onmouseout="unGlowLink(this);">
Đoạn text cần áp dụng hiệu ứng phát sáng
</div> |
|
Còn nhiều hiệu ứng khác nữa! Tôi mong sẽ có
dịp trình bày tiếp để giúp bạn tạo ra những trang
Web thật “chíp”. Dù sao cũng phải nhắc bạn rằng chớ
có lạm dụng các hiệu ứng. Nếu người ta vào xem trang
Web của bạn mà phải đợi dài cả cổ thì... thôi rồi!
“Sin trào” và hẹn gặp lại. |
|
|
