Xin được giới thiệu cùng các bạn phần mềm tạo MENU ( ngang và dọc ) SOTHINK DTHTML MENU sẽ giúp các bạn đang tạo web trên nền UCOZ có được một giao diện đẹp và chuyên nghiệp. Bạn tải phần mềm TẠI ĐÂY . Sau khi tải về , giải nén và cài đặt. Ta tiến hành tạo menu nhé. Bắt đầu nào!
Cửa sổ làm việc:
- Mở chương trình lên, bạn sẽ thấy 4 Palettes làm việc như sau:
+ Palette chính (tạm gọi là Main Palette):
Main Palette có 2 thành phần panel là Menu (bên trái) và Preview (bên phải).
+ Palette Global Settings
+ Palette Popup Menu:
+ Palette Menu Item (bên dưới):
Trong quá trình tạo menu, ta chỉ làm việc với Main Palette, Global Settings và Menu Item Palette.
Tạo menu:
* Bước 1 :
- Tạo một file mới bằng cách File -> New -> Blank menu. Lưu lại worksheet bằng cách bấm Ctrl+S, sau đó lưu vào thành 1 file nào đó, công việc lưu này rất cần thiết cho việc dùng lại hoặc chỉnh sửa menu. Bài ví dụ này sẽ lưu vào thư mục menufolder với tên file là menudata.
* Bước 2 :
- Chọn Template cho menu:
+ Template -> Aplly A New Template
+ Một list tất cả các kiểu dáng menu sẽ hiện ra. Bạn chọn một loại ưu thích bằng cách nhấp chuột vào khung Existing Templates. Ở đây tôi chọn Blue fade. Xong bấm OK.
* Bước 3 :
- Tạo menu:
1. Click chuột vào chữ Menu Item 1 ở Menu Panel trong Main Palette.
2. Xem dưới Menu Item Palette, bạn sẽ thấy chữ Menu Item 1, ví dụ sửa nó là DIEN DAN. (Chú thích cho việc chữ không dấu: Sothink chưa hỗ trợ tiếng Việt có dấu, cho nên ta cứ viết chữ không dấu. Nhưng bạn đừng lo lắng, tí nữa chúng ta sẽ khắc phục điều này).
3. Ở ô trống Link : bạn cần mở đúng trang bạn đang tạo để thấy link và điền chính xác ( nếu không đúng link sau này khi bấm vào menu sẽ không load được trang và menu không hoạt động ). Ví dụ ở đây là :
http://gocomi.co.cc/forum
4. Trở lại Main Palette, bấm vào chữ DIEN DAN. Click phải chọn Append Sub Menu Item.
5. Bấm vào chữ Menu Item 1 vừa mới tạo ra. Trở xuống Menu Item Palette, sửa chữ Menu Item 1 thành Audio. Ở ô trống Link bạn điền vào địa chỉ tương ứng, ví dụ http://gocomi.co.cc/forum/audio. Ở chỗ Target, thông thường để mặc định là _self.
6. Trở lại Main Palette, bấm vào chữ DIEN DAN. Click phải chọn Append Sub Menu Item.
7. Bấm vào chữ Menu Item 1 vừa mới tạo ra. Trở xuống Menu Item Palette, sửa chữ Menu Item 1 thành Text. Ở ô trống Link bạn điền vào địa chỉ tương ứng, ví dụ http://gocomi.co.cc/forum/text. Bạn không cần điền vào ô Tip vì sau này khi chuyển đổi sang tiếng việt sẽ làm bạn rối.
8. Về Main Palette, click vào chữ Top Level Menu ở Menu Panel. Click phải chọn Add Sub Menu Item. Bạn tiếp tục tạo menu khác theo Module của trang web bạn tạo. Ở mổi menu này, muốn tạo menu phụ thì bạn thực hiện lại thao tác 6 , 7 của bước 3 .
Bấm Ctrl+S lần nữa để lưu trữ dữ liệu.
9. Trở lại với Global Setting Palette, ở chỗ Web Path, bạn gõ vào địa chỉ mà tí nữa các file dữ liệu của menu sẽ được upload lên, ví dụ http://gocomi.co.cc/menufolder chẳng hạn. Nếu để trống (mặc định) thì menu chỉ có hiệu lực khi bạn upload folder menufolder lên thẳng mà không tạo menu MENUFOLDER ở FILE MANAGER
10. Bấm vào nút Publish ở Main Palette, một popup sẽ hiện ra, bạn chọn View or copy code :
+ Bấm Next. Một đoạn code nho nhỏ sẽ hiện ra, bạn bấm vào nút Copy All. Bạn copy đoạn code này vào giữa 2 thẻ <Head> </Head> trong Site bạn.
++ Tiếp theo bấm nút Next, lại một đoạn code không nhỏ mới hiện ra, bạn cũng bấm Copy All rồi dán đoạn code này vào giữa 2 thẻ <body> </body>. Đây chính là đoạn code sẽ hiện menu vì vậy bạn chọn vị trí đặt cho thích hợp.
+ Bấm Next, chắc chắn rằng ô I want to copy the resource files now đã được chọn, bấm Next, Bấm Srowse đến folder lúc nãy đã lưu file menudata, ở đây là menufolder. Bấm Next sau đó Finish
+ Công việc cuối cùng của bạn là Upload toàn bộ 5 files có trong thư mục menufolder lên thẳng FILE MANAGE hoặc tạo thư mục mới trong FILE MANAGE với tên là menufolder rồi upload 5 files vào thư mục này. Lưu ý là phải đúng như lúc nãy bạn đã chọn ở Global Settings Palette (ở đây là http://gocomi.co.cc/menufolder ). Tiếp theo hãy chỉnh sửa tất cả các dòng menu text mà lúc nãy ta đánh chữ không dấu, bây giờ chỉnh thành chữ có dấu, không phải chỉnh trong sothink nữa mà là chỉnh ở đoạn code nhận được trong bước ++. Với sự hỗ trợ tìm kiếm của một trình Text Editor bất kì này cũng sẽ giúp bạn dễ dàng làm việc này.
*** Sothink DHTML Menu còn rất nhiều tùy biến khác để bạn có thể làm một menu hoàn toàn theo ý muốn. Bạn hãy tự khám phá thêm nhé, vì thời gian và hiểu biết có hạn tôi không thể chỉ toàn bộ ở đây được. Hy vọng bài viết này sẽ có nhiều bổ ích cho các bạn.
