Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 8: DreamWeaver

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