Dreamweaver MX là một công cụ thiết kế web chuyên nghiệp, phần cốt lõi của nó là HTML. Dreamweaver MX là một công cụ trực quan, trong đó có thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiều loại đối tượng khác mà không cần viết một đoạn mã nào. Trong chương này sẽ giới thiệu về Dreamweaver, cách cài đặt và sử dụng Dreamweaver. Mời các bạn cùng tham khảo.
CHƯƠNG VIII DREAMWEAVER I GIỚI THIỆU Dreamweaver MX công cụ thiết kế web chuyên nghiệp, phần cốt lõi HTML Dreamweaver MX cơng cụ trực quan, bổ sung Javascrip, biểu mẫu, bảng biểu nhiều loại đối tượng khác mà không cần viết đoạn mã Dreamweaver MX thiết kế chế độ Design view Code view Code and Design II CÀI ĐẶT Dreamweaver MX 2004 chương trình Macromedia MX, bạn nên cài đặt máy trọn Macromedia MX Sau cài đặt, khởi động Draemvaerver MX: Start Programs Macromedia Macromedia Dreamweaver MX 2004 III MÀN HÌNH DREAMWEAVER Insert Bar: Gồm chức tiện ích dùng để chèn đối tượng vào trang web a) Common: Chèn đối tượng: Image, Flash, Date, Template, … b) Layout: Chứa cơng cụ trình bày trang, gồm chế độ: Standard, Expended, Layout c) Forms: Chứa công cụ tạo Form d) Text: Dùng định dạng văn e) HTML: chứa công cụ tạo trang web code view Document Toolbar: Chứa nút cho phép xem trang web dạng Design hay dạng Code a) Show code view: Xem dạng trang HTML b) Show Design view: Xem trang dạng thiết kế, sử dụng công cụ Dreamwerver c) Show code and design view: Chia cửa sổ làm phần: phần dạng code view, phần dạng Design view d) Title: tiêu đề trang Web e) Preview/Debug in Browser:Xem kết trang web thơng qua trình duyệt web f) Document Window: Cửa sổ dùng để tạo hiệu chỉnh trang Web Properties Inspector: Hiển thị thuộc tính đối tượng chọn, đồng thời cho phép chỉnh sửa thuộc tính Panel groups: nhóm Panel cho phép quản lý đối tượng trang Web a) Bật / tắt Panel: Chọn menu Window Chọn Panel tương ứng b) Mở rộng Panel: Click vào mũi tên góc trái Panel Status bar: Thanh trạng thái, nằm đáy Document Window, hiển thị Tag Selector, Window size, Document size Download time a) Tag Selector: Hiển thị tag HTML vị trí hành trỏ b) Document size and Download time: Kích cở ước chừng tài liệu thời gian tải tài liệu xuống c) Window size: Hiển thị kích thước tài liệu, tính Pixel Khi định kích thước trang web phải tính đến việc cho an toàn độ phân giải IV KẾ HOẠCH THIẾT KẾ MỘT WEBSITE Các yêu cầu thiết kế website: a) Xác định yêu cầu mục đích Website b) Chuẩn bị nội dung cho trang c) Phác thảo khn mẫu (Template) cho trang, thường trang có chủ đề sử dụng chung template d) Xác định cấu trúc Website, có kiểu cấu trúc: – Tuyến tính – Phân cấp – Hình chóp Tuỳ theo mục đích Website mà chọn kiểu phù hợp Khi thiết kế Website cần lưu ý vấn đề: a) Nội dung chủ đề chính, từ chọn bố cục, hệ màu cho tương ứng, (ví dụ: Website thương mại phải sáng sủa, rõ ràng bố cục, …) sau thu thập đầy đủ tài liệu, phân nhóm theo nội dung, từ định cần trang, nội dung trang b) Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí… Phác hoạ sơ đồ liên kết giấy để thấy rỏ mối liên kết trang đơn website Một số kiểu liên kết trang: Mở site tạo: Cách 1: Click vào menu hiển thị tên Site Toolbar Site Panel, chọn tên Site muốn mở Cách 2: Chọn menu Site Manage Sites Chọn tên Site muốn mở Done Hiệu chỉnh Site: – Chọn menu Site Manage Sites – Chọn tên Site cần hiệu chỉnh Click nút Edit – Xuất hộp thoại Site Definition thực hiệu chỉnh OK Done Tạo Site Hiệu chỉnh Site Tạo Site giống site chọn Xoá Site Xuất thông tin Site tập tin ste Dẫn nhập thư mục, tập tin vào Site VI – – THIẾT KẾ TRANG WEB ĐƠN Tại hình khởi động chọn Create new HTML Xuất Document Window, nơi thiết kế trình bày nội dung trang web đơn, sau thiết kế xong trang trang web lưu dạng tập tin có phần mở rộng mặc định HTM (hoặc HTML) thư mục HTML khai báo mục Local Root Folder VII LIÊN KẾT CÁC TRANG WEB ĐƠN Cách tạo: – Để tạo liên kết, cần phân biệt trang nguồn trang đích – Trang nguồn: chứa nút liên kết – Trang đích trang cần liên kết đến – Mở trang nguồn Chọn nút liên kết – Trong Properties Inspector, mục link, thực hai cách sau: – Cách 1: Click nút kéo mũi tên đến tên tập tin cần liên kết Site Panel – Cách 2: Click nút mở hộp thoại Select File Look in: Chọn tên Site File name: Chọn tên trang Web cần liên kết đến Kiểm tra liên kết: File Check PageCheck link – Check links for entire Site: kiểm tra liên kết cho tất trang site – Check links for Selected files /folders in Site: kiểm tra nhóm tập tin/ thư mục chọn Site Xem kết trình duyệt hiệu chỉnh – Chọn File / Preview in Browser / iexplore – Hoặc Click nút Preview /Debug in Browser I KẾT NỐI VÀ ĐƯA WEBSITE LÊN WEB SERVER Cách thực hiện: – Cần phải lưu lại tất tập tin trước xuất Website Xuất Website chép thư mục gốc (root) Site lên Server nhà cung cấp dịch vụ Internet (ISP) – Trong Macromedia Dremwearver MX 2004, xuất Website cần có bước kết nối với Server trước Put File lên sau Kết nối với Remote Site:Nếu tạo Site ta chưa xác định Remote Site (Thư mục chứa Site Server), nên sau click Put File xuất thông báo yêu cầu kết nối với Remote Site – – Chọn Yes, Xuất hộp thoại Site Definition Chọn mục Remote Info, khung Access, chọn Local/ Network (giả lập thư mục mạng cục bộ, thư mục khác ổ đĩa cứng) – Tại mục Remote Folder, Click biểu tượng Folder, để tìm thư mục chứa Site Xuất Site lên Remote Site: – Trong Site Panel, chọn lại tên Site cần xuất – Click nút Put File – Xuất hộp thoại: Are you sure you wish to put the entire site? Click OK – Xuất hộp thoại kết nối, tập tin thư mục Site chép từ site lên Remote Site Kiểm tra lại Remote Site – Click nút Expand Site Panel: Màn hình chia làm phần: Bên trái Remote Site, Bên phải Local Site VIII SITE MAP GIỚI THIỆU: Site map sơ đồ cấu trúc WebSite, hiển thị vị trí phân cấp tập tin WebSite Một WebSite tạo đầy đủ liên kết, xem dạng Site map Cần phải định nghĩa trang HomePage trước Site phải có trang Index.htm Xem Site Map: – Trong Site Panel, chọn Map view khung Site view Tạo liên kết Site Map:Có thể tạo liên kết trang cách trực quan đơn giản cách sử dụng Site Map Cách tạo: a) Chỉ định đường dẫn đến trang home page – Tạo Site phải có trang Index.htm Home Page – Chọn Site Manage Sites Click nút Edit – Xuất cửa sổ Definition Chọn Site Map Layout – Home Page: đường dẫn đến tập tin Index OKDone b) Tạo liên kết SiteMap – Click nút Expand/Collapse để mở rộng Site Panel – Click chọn nút SiteMap – Màn hình xuất trang Index.htm site Tạo liên kết phân cấp: – Click phải file Index chọn Link to new File Xuất hộp thoại Link to New File: File Name: Nhập tên file Title: tiêu đề trang Text of Link: dòng text để liên kết Liên kết đến File Liên kết đến File Tạo liên kết nhanh: – Chọn tập tin cần tạo liên kết – Click biểu tượng liên kết bên cạnh tập tin chọn – Kéo mũi tên liên kết đến tập tin liên kết đến ... liên kết Liên kết đến File Liên kết đến File Tạo liên kết nhanh: – Chọn tập tin cần tạo liên kết – Click biểu tượng liên kết bên cạnh tập tin chọn – Kéo mũi tên liên kết đến tập tin liên kết... tập tin vào Site VI – – THIẾT KẾ TRANG WEB ĐƠN Tại hình khởi động chọn Create new HTML Xuất Document Window, nơi thiết kế trình bày nội dung trang web đơn, sau thiết kế xong trang trang web... Window size: Hiển thị kích thước tài liệu, tính Pixel Khi định kích thước trang web phải tính đến việc cho an toàn độ phân giải IV KẾ HOẠCH THIẾT KẾ MỘT WEBSITE Các yêu cầu thiết kế website: a)