Thiết kế website phần mềm Adobe Dreamweaver CS5

Thiết kế website phần mềm Adobe Dreamweaver CS5 Biên soạn: Nguyễn Trọng Thành Biên soạn: Nguyễn Trọng Thành  Adobe Dreamweaver công cụ xử lý mạnh mẽ dành cho người thiết kế web, người dùng tự lập trình phát triển ứng dụng web nhiều cấp độ Nếu dừng mức độ hiểu biết chưa nhiều ngôn ngữ lập trình web Dreamweaver đáp ứng nhu cầu thiết kế Website chun nghiệp  Ngồi tính kéo thả để xây dựng trang web, Dreamweaver cung cấp môi trường viết mã với đầy đủ chức bao gồm công cụ viết mã (như tô màu mã, bổ sung thẻ tag, công cụ mã), hỗ trợ ngơn ngữ lập trình thơng dụng HTML, CSS, Javascript, ASP VBScript, PHP hay XML Biên soạn: Nguyễn Trọng Thành Tạo thư mục chứa web  Trong thư mục đó, bạn tạo tiếp thư mục khác dùng để chứa liệu như:  Thư mục Image dùng để chứa tồn hình ảnh trang web  Thư mục Flash dùng để chứa tập tin flash, video clip, …  Thư mục Data dùng để chứa liệu  Và thư mục khác tùy theo mục đích người tạo web Biên soạn: Nguyễn Trọng Thành Tạo website  Vào menu Site > New site Biên soạn: Nguyễn Trọng Thành Tạo website  Nhập thông tin:  Site name: tên website  Local Site Folder: thư mục gốc chứa website  Chuyển quan tab Advanced Settings, chọn Local Info để chọn Thư mục mặc định chứa hình ảnh cho website  Bấm nút Save Biên soạn: Nguyễn Trọng Thành Tạo trang web  Khởi động Dreamweaver, cửa sổ chương trình chọn HTML để mở trang tài liệu Hoặc vào menu File, chọn New Trong mục Blank Page chọn HTML bấm vào nút Create để khởi tạo trang (hình) Biên soạn: Nguyễn Trọng Thành Lưu trang web  Trước bắt tay vào thiết kế, bạn nên lưu trang web lại cách vào menu File, chọn Save Save as Sau lưu trang web vào thư mục chứa web với dạng *.html Lưu ý, trang chủ website bắt buộc phải đặt tên index.html phải lưu thư mục chứa web Biên soạn: Nguyễn Trọng Thành Cửa sổ hình Biên soạn: Nguyễn Trọng Thành Thanh công cụ Document Thiết kế HTML Thiết kế công cụ Thiết kế HTML công cụ Biên soạn: Nguyễn Trọng Thành Tiêu đề trang hành Thể lỗi thiết kế Quản lý file Các tùy chọn thiết kế Xem thử kết trình duyệt Định dạng trang web  Sau lưu lại trang web thành công, vào menu Modify chọn Page Properties chuột phải lên hình thiết kế chọn Page Properties để cài đặt định dạng cho trang web  Trong hộp thoại Page Properties bạn chỉnh thông số sau:  Mục Appearance (HTML):  Background image: Chọn Browse duyệt đến tập tin ảnh dùng làm cho trang web  Background: Bấm vào nút bảng màu màu cho trang web  Text: Chỉ định màu chữ mặc định  Link: Chỉ định màu chữ mặc định bạn tạo liên kết cho  Left margin: Nhập vào khoảng cách lề trái so với nội dung trang web  Top margin: Nhập vào khoảng cách lề so với nội dung trang web  Margin width: Nhập vào độ rộng trang web  Margin height: Nhập vào độ cao trang web Biên soạn: Nguyễn Trọng Thành 10 Chèn hình vào trang web  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: Biên soạn: Nguyễn Trọng Thành 18 Chèn hình vào trang web  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 để hoàn tất Biên soạn: Nguyễn Trọng Thành 19  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 Biên soạn: Nguyễn Trọng Thành 20 Tạo menu cho trang web  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, 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) Biên soạn: Nguyễn Trọng Thành 21  Đầ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) Biên soạn: Nguyễn Trọng Thành 22 Tạo menu cho trang web  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: Biên soạn: Nguyễn Trọng Thành 23 Tạo menu cho trang web  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 Itemlà Font, Icon, Background, Border, Condition, Style, Advanced Biên soạn: Nguyễn Trọng Thành 24 Tạo menu cho trang web  Khung 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) Biên soạn: Nguyễn Trọng Thành 25  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, 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) Biên soạn: Nguyễn Trọng Thành 26  Để đặ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)  Các hiệu ứng mục sau: Biên soạn: Nguyễn Trọng Thành 27  Đổ 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 Biên soạn: Nguyễn Trọng Thành 28  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)  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 Biên soạn: Nguyễn Trọng Thành 29  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 Biên soạn: Nguyễn Trọng Thành 30 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à cịn 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 Biên soạn: Nguyễn Trọng Thành 31 Chèn form vào trang web  Cách chèn:   Insert – Form – Form Chèn đối tượng form:  Insert – Form –>  Text Field  Button  Radio Button  Check Box  … Biên soạn: Nguyễn Trọng Thành 32