Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 - Phần 2

Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 - Phần 2

Formatted: Centered Thiết kế website phần mềm Adobe Dreamweaver CS5 - Phần Formatted: Justified Trong phần giới thiệu đến bạn cách chèn nội dung đa phương tiện ảnh (kèm hiệu ứng di chuyển trỏ chuột), đoạn flash, video clip Đồng thời hướng dẫn sử dụng phần mềm SothinkDHTMLMenu (tích hợp vào Adobe Dreamweaver) tạo menu động Chèn hình vào trang web - Chèn ảnh tĩnh Trước muốn chèn hình ảnh vào trang web, bạn nên chép tất hình ảnh cần chèn vào thư mục Image web Việc lựa chọn hình ảnh để chèn vào trang web phải ý đến số lượng kích thước ảnh chèn nhiều ảnh lớn làm cho trang web có dụng lượng lớn, việc tải xem chậm Để thực việc chèn hình ảnh vào trang web, bạn làm sau: vào Insert, chọn Image tìm đến hình ảnh muốn chèn Sau chèn hình ảnh vào trang web, bạn tiến hành thiết lập thuộc tính cho hình ảnh vừa chèn khung Properties (hình 8) Hình Thuộc tính hình ảnh - Tạo Rollover Images Rollover Images hình ảnh thay đổi trỏ ngang qua Khi tạo Rollover Images hai ảnh phải có kích thước Nếu hai ảnh có kích thước khơng Dreamweaver tự chỉnh cho chúng Trước tiên bạn đặt trỏ vị trí muốn chèn Sau chọn Insert > Image objects > Rollover Image Hộp thoại Insert Image Rollover xuất ta thiết lập nội dung sau: Hình Tạo hiệu ứng ảnh động di chuyển trỏ chuột - Image name: đặt tên cho Image - Original image: bấm vào nút Browse định hình xuất - Rollover Images: bấm vào nút Browse định hình thay đổi di chuyển chuột qua - When Clicked, Go to URL: bấm vào nút Browse trang web liên kết đến bấm vào Chọn OK để hồn tất (hình 9) - Chèn ảnh động flash, video clip vào trang web Vào Insert > media > chọn SWF FLV tùy theo định dạng tập tin cần chèn Sau duyệt đến File flash File Video bấm OK Hình 10 Chèn tập tin đa phương tiện Tạo menu cho trang web Menu phần khơng thể thiếu cho trang web Nó nơi liên kết trang rời rạc web lại với thành hệ thống Việc tạo menu thật đẹp chuyên nghiệp ước ao nhiều người thiết kế web Đối với phần mềm thiết kế web Dreamweaver, có cộng cụ tích hợp hỗ trợ tạo menu thật chuyên nghiệp SothinkDHTMLMenu Bạn dùng phần mềm để thiết kế menu cho trang web SothinkDHTMLMenu cung cấp dùng thử trang chủ http://www.sothink.com/product/dhtmlmenu Sau cài đặt thành công phần mềm SothinkDHTMLMenu, menu Adobe Dreamweaver có thêm menu Sothink với menu bạn tạo menu bóng bẩy cho website (hình 11) Hình 11 Khởi động DHTML Menu Đầu tiên mở trang web cần tạo menu phần mềm Adobe Dreamweaver đặt trỏ vị trí cần chèn menu, chọn menu Sothink, bảng 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 tiến hành tạo menu Trong cửa sổ mở SothinkDHTMLMenu, chọn Blank Menu để thiết kế mới, From Template muốn chọn kiểu menu có sẵn Trong cửa sổ Menu Tree (menu đứng bên trái), bạn thực thao tác cắt, dán,… chủ đề, chuyên mục cho menu thông qua nút lệnh cơng cụ Tồn q trình thiết kế SothinkDHTMLMenu thực chủ yếu khung tính năng: Popup Menu, Menu Item Ngồi ra, q trình thiết kế, bạn tìm hiểu thêm cửa số: Scrolling Global Setting (hình 12) Hình 12 Các tác vụ thiết kế - Khung Menu Item: Cửa sổ cho phép bạn định dạng cho chủ đề, mục menu (hình 13) Trong cửa sổ này, bạn điều chỉnh mục sau: Hình 13 Thuộc tính menu + Chọn nhãn General để nhập mục cho menu + Chọn Text để nhập tên chủ đề + Chọn mục HTML để nhập tên chủ đề định dạng 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 mục menu với Align (left, right, center) Valign (top, middle, bottom) + Đặt liên kết cho mục menu thông qua mục Link Ngoài cửa sổ Menu Item bạn cịn định dạng font chữ, màu chữ, màu nền, hình nền, khung, kiểu cho menu nhãn tương ứng cửa sổ Menu Item Font, Icon, Background, Border, Condition, Style, Advanced - Khung Popup Menu Hình 14 Cửa sổ Popup Menu Sau tạo xong menu, cửa sổ giúp thiết kế màu sắc, kiểu hiển thị menu… điều quan trọng bạn tạo hiệu ứng đặc biệt cho menu (hình 14) Các bước thực sau: Trong nhãn Genaral Popup Menu, chọn Horizontally khung Display để hiển thị menu nằm ngang chọn Vertically cho kiểu menu dọc (hình 15) Hình 15 Chọn kiểu hiển thị Tiếp theo chọn nhãn Background, mục Bg color, bấm nút chọn màu cho menu từ bảng màu, cịn muốn menu có suốt bấm đánh dấu chọn trước mục Transparent Cũng chọn ảnh menu cách nhấn nút mục Bg image (hình 16) Hình 16 Chọn màu hay hình Để đặt màu cho menu, bạn chọn nhãn Border, bấm chọn nút mũi tên nút để đặt màu cho cạnh Menu Trong nhãn Effects từ cửa sổ Popup Menu, bạn đặt hiệu ứng cho menu (hình 17) Các hiệu ứng mục sau: Hình 17 Chọn hiệu ứng + Đổ bóng cho menu: Bạn đổ bóng cho menu cách chọn Simple Complex từ menu Drop shadow, chọn đường nét, độ dày cho bóng màu sắc cho bóng + Hiệu ứng hiển thị menu (Effects for showing): bấm chọn menu chọn 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 menu có nhiều menu con, bạn làm cho menu cuộn lại cách tuỳ chỉnh cửa sổ Scrolling hình khơng đủ khơng gian để hiển thị tất chúng (hình 18) Hình 18 Tùy chỉnh kiểu dáng cuộn + Tuỳ chỉnh kiểu dáng cho cuộn theo chiều ngang (Horizontal Popup Menus) theo chiều dọc (Vertical Popup Menus) + Đánh dấu chọn Enable Scrolling Sau hoàn tất bước thiết lập cho menu, bạn chọn lệnh Save and close để hồn tất cơng việc SothinkDHTMLMenu tự động đưa menu mà bạn vừa tạo vào trang web mà không cần phải làm việc với đoạn code Tuy nhiên, SothinkDHTMLMenu lại có nhược điểm bị lỗi font tiếng Việt Unicode chạy menu trình duyệt tập tin chương trình tạo nhiều nằm thư mục với tập tin web vừa tạo nên có phần làm cho phần thiết kế khơng có tính khoa học Nhưng hai lỗi khắc phục dễ dàng cách làm việc với đoạn code Trước tiên, bạn khắc phục lỗi font cách vào đoạn code chương trình tạo Dreamweaver tìm đến từ bị lỗi font sửa lại cho Tiếp theo, để khắc phục tập tin SothinkDHTMLMenu tạo nằm “mất trật tự” thư mục chứa trang web bạn tạo thư mục thư mục chứa trang web (thư mục Menu chẳng hạn), chép tất tập tin mà SothinkDHTMLMenu tạo vào thư mục Sau vào cửa sổ soạn thảo code thêm phần “menu\” vào trước dẫn cũ xong (các đường dẫn cũ tên tập tin SothinkDHTMLMenu tạo ra) Tạo liên kết cho trang web Một trang web thiết kế không chứa thơng tin nội trang web mà phải liên kết với nhiều trang web khác để nội dung thêm phong phú Có thể tạo liên kết từ hình ảnh đến trang web từ dịng chữ tùy theo sở thích người thiết kế Các bước thực sau: - Chèn hình nhập dòng chữ cần tạo liên kết - Bấm chọn hình chọn dịng chữ cần tạo liên kết Nhập vào ô Link khung Properties địa trang web cần liên kết tới Hình 19 Thuộc tính địa liên kết Lưu ý, địa trang web liên kết nhập vào cần ghi đầy đủ tên trang web Ví dụ, liên kết đến trang Quantrimang cần nhập địa http://www.quantrimang.com.vn  ... Menu phần thiếu cho trang web Nó nơi liên kết trang rời rạc web lại với thành hệ thống Việc tạo menu thật đẹp chuyên nghiệp ước ao nhiều người thiết kế web Đối với phần mềm thiết kế web Dreamweaver, ... dùng phần mềm để thiết kế menu cho trang web SothinkDHTMLMenu cung cấp dùng thử trang chủ http://www.sothink.com/product/dhtmlmenu Sau cài đặt thành công phần mềm SothinkDHTMLMenu, menu Adobe Dreamweaver. .. trình thiết kế SothinkDHTMLMenu thực chủ yếu khung tính năng: Popup Menu, Menu Item Ngồi ra, q trình thiết kế, bạn tìm hiểu thêm cửa số: Scrolling Global Setting (hình 12) Hình 12 Các tác vụ thiết