Sothink DHTML Menu là bộ công cụ tạo menu sổ
xuống tốt nhất, giúp bạn có thể tạo các thanh điều hướng cho website mà
không cần một chút kinh nghiệm gì về JavaScript. Với bộ tạo
JavaScript menu thông minh này, bạn có thể tạo cho các trình duyệt, load
nhanh DHTML menu để điều hướng website, nhanh chóng truy cập được trang
mục tiêu.
Sothink DHTML Menu cung cấp nhiều mẫu phong phú cũng
như các kiểu thiết lập trước để đơn giản hóa tất cả các công việc thiết
kế nặng nhọc. Tích hợp xuyên suốt với tất cả các bộ soạn thảo HTML chủ
đạo, cho phép bạn có thể add trực tiếp JavaScript menu vào trang web.
Diện mạo của menu có thể được tùy chỉnh.
JavaScript menu builder hỗ trợ Dreamweaver CS5
Các menu sổ xuống làm việc tốt trên Safari 5 (cho Win/Mac)
Tải tại đây(Bản Full): http://www.mediafire.com/?bzhzs4jiyg4bj61
Tính năng chính
Hiệu suất tốt hơn
• Làm việc với hầu hết các trình duyệt: gồm có IE, Google Chrome, Firefox, Opera và Safari 5 (Win/Mac).
• Navigation bar builder tích hợp xuyên suốt với các bộ soạn thảo web như các add-on, chẳng hạn như Dreamweaver (Support CS5), Front Page, Expression Web và Adobe GoLive.
• Liên kết cơ sở dữ liệu JavaScript menu với ASP, PHP, JSP, ASP.NET, ColdFusion,
Menu đặc biệt
• Tạo các DHTML menu dễ dàng, chẳng hạn như tab menu, menu nổi, menu cuộn,…
• Cho phép ẩn các bộ chia tách menu nào đó hoặc các mục khi cần bằng cách thiết lập drop down menu builder.
• Có thể đặt thanh điều hướng bất cứ chỗ nào trên trang web.
Kiểu tùy chỉnh
• Tùy chỉnh thuộc tính cho web menu, chẳng hạn như font, icon, background, border, cursor, tool tip, surround, effects, alignment, transparency, size,..
• Chọn và chỉnh sửa ảnh từ Image Library và Background Library để thiết lập biểu tượng, mũi tên, background và bộ chia tách.
• Dễ dàng điều chỉnh màu sác, độ sáng để chỉnh sửa ảnh.
Dễ dàng sử dụng
• Cung cấp nhiều mẫu, kiểu và thư viện ảnh trong JavaScript menu builder.
• Lưu màu background của cửa sổ preview trong file PGT, làm thuận tiện cho việc chỉnh sửa tiếp theo.
• Mã HTML được sử dụng bên trong mục JavaScript menu
• Hỗ trợ W3C Valid XHTML 1.0.
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 được định dạng kiểu font tiếng việt trong Menu.
+ Để 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.
3. Cửa sổ Scrolling 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ổ Scrollingkhi 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 Nexttrê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ẻ <BODY> và </BODY> 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 Add - 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 Add–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 *. pgt 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.
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 được định dạng kiểu font tiếng việt trong Menu.
+ Để 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.
3. Cửa sổ Scrolling 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ổ Scrollingkhi 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 Nexttrê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ẻ <BODY> và </BODY> 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 Add - 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 Add–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 *. pgt 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.
0 comments:
Post a Comment