Cong ty Cong Nghe Tin hoc Nha truong http://www.vnschool.net
Thiết kế Menu trên Web bằng Sothink DHTMLMenu
16/01/2006

Trước đây, bạn phải mất hàng giờ để thiết kế menu bằng các công cụ DHTML hay JavaScript thì giờ đây với Sothink DHTML Menu, mọi thứ đều trở nên rất đơn giản. Chương trình cho phép bạn tạo các menu pop-up mà không phải viết một dòng lệnh nào. Bằng những tính năng đơn giản, chỉ mất vài phút bạn đã có được một sản phẩm đầy tính chuyên nghiệp.
- Giao diện chương trình thân thiện, dễ sử dụng.

- Các menu tạo ra tương thích với hầu hết mọi trình duyệt Web như IE, Netscape, Mozilla và Opera.

- Sothink DHTMLMenu hỗ trợ menu nhiều mức với đầy đủ các đối tượng như văn bản, kiểu chữ, màu nền, bullet và các hiệu ứng.

- Dữ liệu xuất ra dễ dàng được sử dụng để tạo hoặc chèn vào các trang web.

Đó là một số tính năng nổi bật mà Sothink DHTMLMenu có thể đem lại cho các bạn.

Yêu cầu hệ thống

Chương trình cài đặt với hầu hết các hệ điều hành từ Windows 98, ME, 2000, XP.

Bạn có thể download phiên bản dùng thử tại địa chỉ: http://www.sothink.com/download/sdmenu.zip hoặc http://www.thnt.com.vn/download/sdmenu.zip.

Sau khi cài đặt, bạn có thể chạy chương trình từ biểu tượng trên Desktop hoặc thực hiện lệnh: Start/Programs/SourceTec/Sothink DHTMLMenu/Sothink DHTMLMenu.exe.

I. Sử dụng chương trình

1. Cách tạo Menu trong Sothink DHTMLMenu

- Thực hiện lệnh File/New.

- Chọn Blank Menu để thiết kế mới, From Template nếu muốn chọn một kiểu menu có sẵn.

- Trong cửa sổ Menu Tree, bạn có thể thực hiện các thao tác như cắt, dán,.. các chủ đề, chuyên mục cho menu thông qua các nút lệnh trên thanh công cụ.



2. Thiết kế Menu

Toàn bộ quá trình thiết kế trong Sothink DHTMLMenu được thực hiện chủ yếu bởi các cửa sổ: Popup Menu, Menu Item. Ngoài ra, trong quá trình thiết kế, bạn có thể tìm hiểu thêm về các cửa số: Scrolling và Global Setting.

2.1 Cửa sổ Menu Item

Cửa sổ này cho phép bạn định dạng cho từng chủ đề, từng mục trong menu.

a. Tạo mục menu

- Chọn nhãn General để nhập các mục cho menu:



+ Chọn Text để nhập tên chủ đề.

+ Chọn mục HTML để nhập tên chủ đề được định dạng trong các cặp thẻ HTML. Ví dụ, nếu bạn nhập vào ô Text dòng lệnh DHTML Menu sẽ hiển thị nút lệnh Văn học

+ Để chèn ảnh vào menu, bạn chọn Image, xác định ảnh từ nút lệnh .

- Căn chỉnh vị trí hiển thị nội dung trên các mục menu với Align (left, right, center) hoặc Valign (top, miđle, bottom).

- Đặt liên kết cho các mục menu thông qua mục Link.

b. Tạo sự kiện chuột

DHTMLMenu đưa ra hai trạng thái chuột là mouse out (trạng thái hiển thị bình thường) và mouse over (trạng thái di chuột qua nút lệnh).

- Để thiết lập các sự kiện chuột cho các mục menu, bạn chọn nhãn Mouse Out, Mouse Over.

- Thường khi thiết kế, bạn nên tuỳ chỉnh và định dạng cho hai trạng thái khác nhau để tạo nên nhiều hiệu ứng đẹp mắt, sinh động hơn.

2.2. Cửa sổ Popup Menu



Sau khi tạo xong menu, cửa sổ này sẽ giúp bạn thiết kế màu sắc, kiểu hiển thị menu… và điều quan trọng bạn có thể tạo những hiệu ứng đặc biệt cho menu.

a. Định dạng menu

- Thay đổi kiểu dáng hiển thị của menu: Trên cửa sổ Popup Menu, chọn nhãn Genaral. Trong mục Display chọn Horizontally để hiển thị menu nằm ngang và Vertically cho kiểu menu dọc.

- Đặt màu cho menu: Trong mục BG color, kích nút và chọn màu nền cho menu từ bảng màu. Cũng có thể chọn ảnh nền của menu bằng cách nhấn nút trong mục BG image.

- Đặt màu viền cho menu: Kích chọn nút mũi tên trên nút để đặt màu cho mỗi cạnh của Menu.

b. Chọn hiệu ứng cho menu

Để đặt các hiệu ứng cho menu, bạn chọn nhãn Effects từ cửa sổ Popup Menu.

- Đổ bóng cho menu: Bạn có thể đổ bóng cho menu bằng cách chọn Simple hoặc Complex từ menu con của Drop shadow, chọn đường nét, độ dày cho bóng và màu sắc cho bóng.

- Hiệu ứng hiển thị menu (Effects for showing): Kích chọn menu và chọn một hiệu ứng đặc biệt từ danh sách.

- Hiệu ứng đặc biệt để ẩn menu (Effect for Hiding): Kích chọn mũi tên, chọn hiệu ứng để ẩn menu.

- Effect Speed: Nhập giá trị vào ô text đặt tốc độ hiển thị cho hiệu ứng menu.



Nếu trong menu có quá nhiều menu con, bạn có thể làm cho các menu con cuộn lại bằng cách tuỳ chỉnh trong cửa sổ Scrolling khi trên màn hình không đủ không gian để hiển thị tất cả chúng. Chức năng này chỉ hỗ trợ cho IE5.0 trở lên.

- Tuỳ chỉnh kiểu dáng cho thanh cuộn theo chiều ngang ( Horizontal Popup Menus ) hoặc theo chiều dọc (Vertical Popup Menus).

- Tích chọn Enable Scrolling.

Đây là những bước chính để bạn có thể tạo menu một cách sinh động. Bạn nên tìm hiểu thêm một số chức năng khác của chương trình để có thể hoàn thiện sản phẩm một cách tốt nhất, tận dụng được hết khả năng mà phần mềm mang lại cho bạn.

Sau khi thiết kế xong menu, bạn ghi lại file với đuôi mở rộng mặc định *.pgt. Đặc biệt, bạn có thế thực hiện lệnh Save As Template để ghi lại file menu vừa thiết kế vào thư viện.

4. Xuất Sothink DHTMLMenu sang Web

Như các bạn đã biết, Sothink DHTMLMenu có thể được thiết kế dễ dàng và điều quan trọng là chương trình tương thích và xuất sang Web một cách rất tiện lợi.

4.1. Tính năng Publish

Trên thanh công cụ, nhấn chọn nút lệnh Publish hay thực hiện lệnh File/Publish để mở cửa sổ Publish Wizard. Trên cửa sổ này, bạn có thể bổ sung menu sang trang Web hoặc có thể chọn và copy toàn bộ source nguồn của Menu: Sau khi kích nút lệnh Next trên cửa sổ Publish, bạn có thể chọn một số phương thức để đưa Menu sang Web:

- Chèn đoạn code sang file HTML đã có: kích chọn Insert code to an existing HTML file, chọn một file để chèn đoạn code, tiếp đó giữa hai cặp thẻ của file HTML, kích nút Insert để chèn đoạn code menu vào file này. Sau đó kích nút Save để ghi lại.

- Tạo một file JavaScript để include vào trang Web: cũng trên cửa sổ Publish, bạn chọn phương thức Create a Java (*.js) include file, kích nút Next để đặt tên và ghi lại file *.js vào thư mục gốc. Từ đây, bạn có thể include file *.js vào trang web.

Đây là hai cách thức đơn giản và nhanh nhất để bạn xuất file DHTMLMenu sang trang Web trực tiếp từ chương trình Sothink.

4.2. Sothink DHTMLMenu với FrontPage

Phần mềm này có thể làm việc với FrontPage như một Ađ - In.

Sau khi cài đặt chương trình DHTMLMenu, bạn khởi động FrontPage. Trên màn hình của FrontPage, thanh công cụ Sothink Widgets sẽ hiển thị.



Nếu không thấy thanh công cụ này hiển thị, bạn thực hiện lệnh Tools / Ađ–Ins để mở hộp thoại COM Ađ–Ins. Chọn Sothink Widgets, kích OK.

Để bổ sung menu vào FrontPage, bạn thực hiện các bước sau:

- Trên màn hình FrontPage, mở một trang HTML trong chế độ Normal, ghi lại tên trang.

- Đặt trỏ chuột tại vị trí chèn menu, kích DHTMLMenu trên thanh công cụ Sothink Widgets.

- Trong hộp thoạiNew Widgets tích chọn mục Create from existing file và kích nút … để xác định file *.pgt bạn thiết kế (file là định dạng file của Sothink DHTMLMenu).

- Ngoài ra bạn có thể chọn các mẫu menu có sẵn trong Sothink DHTMLMenu bằng cách tích mục Create from template và chọn mẫu từ danh sách.

- Chọn mục Preview để xem trước kiểu menu được chọn.
Màn hình của Sothink DHTML xuất hiện, trên thanh công cụ của chương trình, bạn kích chọn nút lệnh Save and Close để kết thúc quá trình chèn menu vào FrontPage.
Cuối cùng, bạn có thể chạy thử tên file *.HTML để hiển thị menu vừa thiết kế.

Các bạn hãy tìm hiểu thêm về công cụ thú vị này để tạo ra những menu hấp dẫn, làm đẹp cho website của bạn.

Chúc các bạn thành công!
URL của bài viết này::http://www.vnschool.net/modules.php?name=News&file=article&sid=25
© Cong ty Cong Nghe Tin hoc Nha truong contact: sales@schoolnet.vn