Những thủ thuật chung cho mọi phiên bản MS FrontPage

NGUYỄN NGỌC LONG (VnRAMGroup)

Hiệu ứng nút nhấn thay đổi

Đây là một hiệu ứng rất thường được sử dụng trong các Website. Nếu biết vận dụng nó một cách khéo léo, Website của bạn sẽ chuyên nghiệp và sinh động hơn rất nhiều.

Mô tả: Nút nhấn thay đổi là một nút nhấn (button) bằng hình, và mỗi khi người dùng (duyệt Web) đưa chuột lên nút nhấn thì hình ảnh của nút nhấn đó sẽ được thay thế bằng một hình ảnh khác.

Phân tích: Để làm được một nút nhấn như mô tả, chúng ta cần chuẩn bị hai hình ảnh, một hình để hiển thị khi người dùng chưa đưa chuột vào, và hình thứ hai để hiển thị khi người dùng trỏ chuột vào.

Tiến hành:

- Bước 1: Chọn chức năng chèn hình ảnh của FrontPage (FP) để chèn hình thứ nhất vào vị trí mong muốn. Bấm chuột vào hình ảnh vừa chèn để chọn nó, sau đó nhấp chuột vào biểu tượng Insert hyperlink để liên kết nó đến trang Web mong muốn. (Đây là thao tác cơ bản và chúng tôi coi như bạn đã biết).

- Bước 2: Bấm chuột vào menu Format, chọn mục Dynamic HTML effects để làm xuất hiện thanh công cụ DHTML Effects.

- Bước 3: Bấm chuột vào hình thứ nhất (hình mà bạn vừa chèn vào trang Web) để chọn nó (khi này xung quanh hình sẽ xuất hiện tám điều khiển hình vuông nhỏ màu đen. Nếu không có thì bạn phải bấm chuột để làm lại). Sau đó, từ thanh công cụ DHTML Effects, bạn bấm chuột vào khung liệt kê On và chọn mục Mouse Over. Khi này, khung Apply sẽ tự động đổi thành Swap Picture. Bạn tiếp tục bấm chuột vào mục Choose Picture và chọn Choose Picture. FP hiển thị hộp thoại Picture để chờ bạn chọn một hình ảnh. Bạn hãy chuyển đến thư mục chứa hình thứ hai (mà bạn đã làm trong khâu chuẩn bị), và bấm chọn hình đó, nhấp vào Open để chấp nhận.

- Bước 4: Chọn chế độ Preview để xem nút nhấn có hoạt động tốt không. Bạn thử đưa chuột vào hình và thấy nó biến thành hình thứ hai. Sau khi đưa chuột ra ngoài, nó lại trở về hình thứ nhất nghĩa là bạn đã làm đúng và mọi chuyện “khởi đầu” như thế là OK (cũng có nghĩa là chúng ta còn phải giải quyết một số vấn đề “hậu sự” nữa đó bạn, hì hì)

Lo hậu sự cho “chàng” DHTML Effects

Nếu bạn đang làm một trang Web chỉ chạy trên localhost (máy tính cá nhân của bạn), hoặc mạng LAN, mà không có nhu cầu upload nó lên mạng Internet cho “cả thế giới cùng chiêm ngưỡng” thì bạn có thể bỏ qua mục này.

- Vướng mắc 1: Nếu rành về HTML, bạn có thể xem source (mã nguồn) trang Web mà mình vừa làm. Bạn sẽ thấy FP đã tự động chèn thêm cho mình một số đoạn code để tạo hiệu ứng Swap picture, nhìn đoạn mã phía trên thẻ đóng </head> bạn sẽ thấy hai dòng sau:

<script language=”JavaScript1.2"

fptype=”dynamicanimation”

src=”animate.js”>

</script>

Đoạn mã này dùng để báo cho trình duyệt biết bạn sử dụng JavaScript và nội dung của nó nằm ở tập tin animate.js – Như vậy, khi upload trang Web lên máy chủ, bạn phải nhớ tìm và upload cả tập tin animate.js lên cùng với tập tin .htm và hai tập tin hình của bạn.

- Vướng mắc 2: Đã upload tập tin animate.js lên máy chủ nhưng khi xem thử trang Web vẫn không thấy hiệu ứng có tác dụng. À, bạn đừng nóng, hãy thử đưa chuột vào hình thứ nhất, để ý xem “quả địa cầu” trên IE có xoay không, có phải không bạn, nó đang đọc dữ liệu của tập tin hình thứ hai để thực hiện hiệu ứng Swap picture đó, hãy đợi một lúc, bạn sẽ thấy ngay thôi.

Làm thế nào để cho hiệu ứng xuất hiện ngay lập tức khi chúng ta đưa chuột vào? Chỉ có một cách là yêu cầu trình duyệt tự động đọc nội dung của tập tin hình thứ hai trước khi người xem đưa chuột vào hình thứ nhất. Bạn có thể viết một đoạn mã JavaScript nhỏ. Tuy nhiên, nếu không rành về JavaScript, bạn vẫn “chip” được nó theo một cách rất HTML: Chèn một table (bảng) có một hàng một cột, không có viền, và hình nền là hình thứ hai vào cuối cùng của trang Web, bằng cách đưa trực tiếp đoạn mã sau vào trước thẻ đóng </body>

<table>

<tr>

<td style=”background-image:

url(‘_duong_dan_den_hinh_thu_hai _’)” >

</td>

</tr>

</table>