2.5.1.1. í tưởng thiết kế
Đõy là một website hỗ trợ dạy học nờn yờu cầu cỏc nội dung cần cú: Hệ thống lý thuyết, bài giảng, thớ nghiệm, bài tập, kiểm tra – đỏnh giỏ…ngồi ra cũn cú thể cú mục “Húa học vui”, “Tư liệu”. Tất cả cỏc nội dung này được thể hiện trờn một thanh Menu ngang mà chỳng tụi đĩ sử dụng thư viện jQuery của JavaScript để thiết kế. Khi di chuyển chuột qua cỏc danh mục, sẽ cú một vệt sỏng di chuyển theo và kốm theo đú là cỏc menu đổ xuống, rất thuận tiện cho người sử dụng cú thể theo dừi và thao tỏc. Người học chỉ cần di chuyển vệt sỏng qua cỏc danh mục và bấm lựa chọn cỏc chủ đề mỡnh muốn xem.
Hỡnh 2.8. Giao diện trang chủ Default.html
Trang Default.html là trang chủ của website. Trang này được thiết kế dựa vào cụng cụ Dreamweaver, thư viện jQuery, Adobe Photoshop CS2 và Flash Intro Maker giỳp người sử dụng cú thể thấy được tổng thể website và dễ dàng thao tỏc.
2.5.1.2. Thực hiện
Cỏch tạo trang chủ Default.html như sau:
- Ban đầu, dựng Photoshop thiết kế cỏc file ảnh cho việc tạo banner của website và cỏc file flash giới thiệu trờn trang chủ. Chỳng ta làm theo cỏc bước như sau:
+ Mở phần mềm Adobe Photoshop và chọn File/New, đặt tờn cho file ảnh trong ụ Name, đặt kớch thước cho file ảnh với cỏc thuộc tớnh width và height, cỏc thuộc tớnh khỏc để mặc định.
+ Chốn ảnh nền cho khung hỡnh Banner vừa tạo bằng cỏch mở File/Open rồi chọn ảnh nền cần chốn.
+ Chốn chữ cho ảnh Banner rồi lưu file theo dạng *.jpg bằng cỏch mở File/Save as, chọn định dạng JPEG trong ụ Format, đặt tờn file là Banner sau đú nhấn Save/OK. Để cho ảnh được sắc nột, khi chọn lưu ảnh ta chọn Quality ở mức cao nhất (Maximum).
Hỡnh 2.10. Chốn ảnh nền và chữ cho Banner
+ Tiếp đú, sử dụng phần mềm Flash Intro Maker tạo cỏc hiệu ứng cho Banner. Mở chương trỡnh và chọn kớch cỡ cho ảnh bằng cỏch điền thụng số vào mục Size and sound trong mục Main của phần mềm.
+ Chọn Background chớnh là file ảnh Banner.jpg mà chỳng ta vừa tạo bằng cụng cụ Photoshop ở bước trước đú.
+ Lựa chọn cỏc hiệu ứng cho phự hợp, sau đú nhấn nỳt Publish để thực hiện việc xuất bản ra cỏc dạng file mà chỳng ta cú thể chốn trờn website, giả sử ở đõy là tệp “Banner.swf”
Hỡnh 2.12. Xuất bản file flash với định dạng *.swf
- Mở chương trỡnh Dreamweaver tạo một tệp mới cú tờn là Default.html. Tiếp đú là tạo cỏc bảng (table) chứa banner và một bảng cho thanh giới thiệu với dũng trữ trụi ngang. Việc tạo cỏc bảng này ta thực hiện như sau: trong cửa sổ Design của Dreamweaver chọn Insert/Table với độ rộng table width: 1010 pixels bằng với độ rộng của file Banner.swf ở trờn. Căn giữa cho bảng ta chọn thuộc tớnh align là center:
<table width="1010" border="0" align="center"> </table>
- Chốn Banner cho trang Default.html bằng cỏch mở Insert/Media/Flash rồi chọn file Banner.swf vừa tạo ở trờn.
- Trong hàng (row) thứ hai của bảng ta chọn ảnh nền với thuộc tớnh Background rồi gừ vào đoạn văn bản giới thiệu nằm trong thẻ đúng <marquee></marquee> như sau:
<marquee scrollamount="3">
<span class="style13">Chào mừng cỏc bạn đến với website hỗ trợ dạy và học mụn Húa học</span>
</marquee>
- Tải về bộ mĩ nguồn JavaScript với thư viện jQuery để tạo menu ngang cho website rồi chốn phần menu vào một bảng vừa tạo trờn trang Default.html.
Hỡnh 2.14. Màn hỡnh thiết kế trang Default.html bằng cụng cụ Dreamweaver
- Trờn trang chủ cũn thiết kế thờm phần “Liờn kết website” để người sử dụng cú thể nhanh chúng truy cập đến cỏc trang web tham khảo, cỏc trang blog của một số thày, cụ cũng giảng dạy bộ mụn Húa học biờn soạn một cỏch dễ dàng bằng cỏch bấm vào mục “Danh mục website” và chọn trờn menu thả xuống địa chỉ mong muốn.
- Thờm thụng tin tỏc giả vào phần Footer cựng với một số thuộc tớnh màu cho đẹp ta sẽ được giao diện trang chủ website như hỡnh 2.1.