Tạo menu cho trang web bằng dreamweaver CS5

Discussion in 'HTML & jQuery' started by nvbac007, Jan 29, 2013.

  1. nvbac007

    nvbac007 New Member

    Menu là một phần không thể thiếu cho mọi trang web. Nó là nơi liên kết các trang rời rạc của bộ web lại với nhau thành một hệ thống. Việc tạo ra một menu thật đẹp và chuyên nghiệp là ước ao của nhiều người thiết kế web.

    Đối với phần mềm thiết kế web Dreamweaver, đã có một cộng cụ tích hợp hỗ trợ tạo menu thật chuyên nghiệp là SothinkDHTMLMenu. Bạn có thể dùng phần mềm đó để thiết kế menu cho trang web của mình.

    SothinkDHTMLMenu được cung cấp bản dùng thử tại trang chủ http://www.sothink.com/product/dhtmlmenu. Sau khi cài đặt thành công phần mềm SothinkDHTMLMenu, trên thanh menu của Adobe Dreamweaver sẽ có thêm menu Sothink và với menu này bạn sẽ tạo ra một menu bóng bẩy cho website của mình (hình 11).

    [​IMG]
    Hình 11. Khởi động DHTML Menu


    Đầu tiên mở trang web cần tạo menu bằng phần mềm Adobe Dreamweaver đặt con trỏ ở vị trí cần chèn menu, chọn menu Sothink, trong bảng hiện ra chọn DHTML Menu (hoặc bấm tổ hợp phím Alt+Shift+D). Lưu ý, bạn phải lưu trang web trước khi tiến hành tạo menu.

    Trong cửa sổ mở ra của SothinkDHTMLMenu, 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 (menu đứng ở bên trái), 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ụ.

    Toàn bộ quá trình thiết kế trong SothinkDHTMLMenu được thực hiện chủ yếu bởi các khung tính năng: 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 Global Setting (hình 12).

    [​IMG]
    [​IMG]
    Hình 12. Các tác vụ thiết kế

    - Khung 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 (hình 13). Trong cửa sổ này, bạn có thể điều chỉnh các mục như sau
    [​IMG]
    Hình 13. Thuộc tính của 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.
    + Để 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, middle, bottom).
    + Đặt liên kết cho các mục menu thông qua mục Link.

    - Khung Popup Menu

    [​IMG]
    Hình 14. Cửa sổ Popup Menu


    Sau khi tạo xong menu, cửa sổ này sẽ giúp chúng ta 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 (hình 14).


    Các bước thực hiện như sau:

    Trong nhãn Genaral của Popup Menu, chọn Horizontally trong khung Display để hiển thị menu nằm ngang hoặc chọn Vertically cho kiểu menu dọc (hình 15).

    [​IMG]
    Hình 15. Chọn kiểu hiển thị

    Tiếp theo chọn nhãn Background, trong mục Bg color, bấm nút và chọn màu nền cho menu từ bảng màu, còn nếu muốn menu có nền trong suốt thì bấm đánh dấu chọn trước mục Transparent. 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 (hình 16).

    [​IMG]
    Hình 16. Chọn màu nền hay hình nền


    Để đặt màu nền cho menu, bạn chọn nhãn Border, bấm chọn nút mũi tên trên nút để đặt màu cho mỗi cạnh của Menu. Trong nhãn Effects từ cửa sổ Popup Menu, bạn sẽ đặt hiệu ứng cho menu (hình 17). Các hiệu ứng trong mục như sau:

    [​IMG]
    Hình 17. Chọn hiệu ứng


    + Đổ 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): bấm 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): bấm 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.
    - Khung 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ổ Scrolling khi trên màn hình không đủ không gian để hiển thị tất cả chúng (hình 18).

    [​IMG]
    Hình 18. Tùy chỉnh kiểu dáng thanh cuộ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).
    + Đánh dấu chọn Enable Scrolling.

    Sau khi đã hoàn tất các bước thiết lập cho menu, bạn chọn lệnh Save and close để hoàn tất công việc.SothinkDHTMLMenu sẽ tự động đưa menu mà bạn vừa tạo vào trang web của mình mà không cần phải làm việc với những đoạn code nữa. Tuy nhiên, SothinkDHTMLMenu lại có một nhược điểm là bị lỗi font tiếng Việt Unicode khi chạy menu trên trình duyệt và các tập tin do chương trình tạo ra là rất nhiều và nằm cùng thư mục với tập tin web vừa tạo nên có phần nào đó làm cho phần thiết kế không có tính khoa học.

    Trước tiên, người lập trình thiết kế website có thể khắc phục lỗi font bằng cách vào đoạn code do chương trình tạo ra trong Dreamweaver tìm đến các từ bị lỗi font và sửa lại cho đúng. Tiếp theo, để khắc phục các tập tin do SothinkDHTMLMenu tạo ra nằm “mất trật tự” trong thư mục chứa trang web bạn tạo ra một thư mục mới trong thư mục chứa trang web , tiếp theo sao chép tất cả các tập tin mà SothinkDHTMLMenu tạo ra vào thư mục mới này. Sau đó vào cửa sổ soạn thảo code và thêm phần “menu\” vào trước các dẫn cũ là xong.

    Trên đây là bài mình sưu tầm được chia sẻ để mọi người tham khảo.
    Last edited by a moderator: Jan 29, 2013
    Chiều Muộn likes this.

Share This Page