Thiết kế trang“Hệ thống lý thuyết”

2.5.2.1. í tưởng thiết kế

Trang “Hệ thống lý thuyết” được thiết kế dựa trờn cơ sở của trang chủ Default.html, bao gồm cỏc nội dung: thiết kế menu phần “Hệ thống lý thuyết”, tạo cỏc mục kiến thức theo sỏch tài liệu dưới dạng cỏc file flash để thuận tiện cho việc trỡnh bày trờn trang web.

Menu “Hệ thống lý thuyết” như sau:

Hỡnh 2.15. Menu trang“Hệ thống lý thuyết”

2.5.2.2. Thực hiện

Quỏ trỡnh thực hiện theo cỏc bước sau:

- Để tạo danh mục cho menu trang “Hệ thống lý thuyết” ta mở phần menu với dạng mĩ JavaScript được đặt trong bảng của trang Default.html và lần lượt thờm cỏc danh mục liờn kết bằng cỏch thờm cỏc thẻ <ul> và <li>

- Mở chương trỡnh Marcromedia Flash – chọn File/New/Flash Slide Presentation rồi nhấn OK để tạo màn hỡnh thiết kế flash dạng trỡnh diễn. Lựa chọn kớch thước của slide, ở đõy chỳng ta đặt là 900 x 500 pixels. Tiếp đến copy phần văn bản của sỏch tài liệu vào cỏc slide. Chỳng ta cũng cú thể chốn cỏc ảnh vào cỏc slide trỡnh diễn bằng cỏch mở File/Import/Import to Stage rồi chọn đường dẫn đến cỏc file ảnh cần chốn. Chỉnh sửa hỡnh nền và màu chữ cho đẹp, tạo 2 nỳt chức năng để cú thể nhấn chuyển qua lại giữa cỏc slide một cỏch dễ dàng. Màn hỡnh thiết kế như hỡnh sau đõy:

Hỡnh 2.16. Tạo cỏc file flash cho trang “Hệ thống lý thuyết”

Để xuất bản ra dạng file flash, ta chọn File/Export/Export Image và đặt tờn cho cỏc file tương ứng với cỏc phần kiến thức trờn trang “Hệ thống lý thuyết”.

- Mở trang Default.html để chỉnh sửa bằng cỏch bấm chuột phải, chọn Open with/Dreamweaver, tiếp đến chọn File/Save as. Tại đõy tương ứng với mỗi phần kiến thức chỳng ta tạo một file *.html riờng biệt, giả sử như ở hỡnh 2.10 là file Axit- Bazo.html. Trờn cơ sở kế thừa trang Default.html, chỳng ta sẽ tạo ra cỏc trang giới thiệu tồn bộ nội dung của phần hệ thống lý thuyết cần đưa lờn website.

Tạo cỏc liờn kết đến từng trang HTML của phần hệ thống lý thuyết tương ứng với mỗi liờn kết trờn thanh menu ngang của website chỳng ta được kết quả trang “Hệ thống lý thuyết” như sau:

Hỡnh 2.17. Giao diện bài Axit-Bazơ của trang “Hệ thống lý thuyết”