CHUONG VIII Deamweaver - xuanhien.files.wordpress.com · – Forms: Chứa các công cụtạo...

CHƯƠNG VIII

DREAMWEAVER

Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.

I.GIỚI THIỆU

q Dreamweaver MX là một công cụ thiết kế webchuyên nghiệp, phần cốt lõi của nó là HTML

q Dreamweaver MX là một công cụ trực quan, 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ếtmột đoạn mã nào

q Dreamweaver MX có thể thiết kế bằng Designview hoặc Code view hoặc Code and Design


II. CÀI ĐẶT

q Dreamweaver MX 2004 là một chương trìnhtrong bộ Macromedia MX.

q Sau khi cài đặt, khởi động Draemvaerver MX: Startà Programsà Macromedia à Macromedia Dreamweaver MX 2004


III. MÀN HÌNH DREAMWEAVER

q Insert Bar:

– Common: Chèn các đối tượng: Image, Flash,Date, Template, …

– Layout: Chứa các công cụ trình bày trang,gồm 3 chế độ: Standard, Expended, Layout

– Forms: Chứa các công cụ tạo Form

– Text: Dùng định dạng văn bản

– HTML: Tạo trang web bằng code view…



q Document Toolbar:

– Show code view: hiển thị mã HTML

– Show Design view: chế độ thiết kế, sử dụngcác công cụ của Dreamwerver

– Show code and design view: hiển thị mãHTML và chế độ Design view

– Title: tiêu đề của trang Web

– Preview/Debug in Browser:Xem kết quảtrang web thông qua trình duyệt web



q Document Window: Cửa sổ dùng để tạo vàhiệu chỉnh trang Web.

q Properties Inspector:

– Hiển thị các thuộc tính của các đối tượngđang được chọn.

– Cho phép hiệu chỉnh các thuộc tính của đốitượng được chọn.



q Panel groups: nhóm các Panel dùng để quảnlý các đối tượng trong trang Web

– Bật / tắt các thanh Panel:

Chọn menu Window

à Chọn thanh Panel tương ứng

– Mở rộng các thanh Panel:

à Click vào mũi tên ở góc trái

của mỗi Panel.



q Status bar: Thanh trạng thái, nằm dưới đáycủa Document Window, hiển thị Tag Selector,Window size, Document size và Download time.



– Tag Selector: Hiển thị tag HTML hiện hành

– 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

– Window size: Hiển thị kích thước hiện tại củatài liệu, được tính bằng Pixel. Khi định kíchthước của trang web phải tính đến việc saocho an toàn đối với mọi độ phân giải.


IV.KẾ HOẠCH THIẾT KẾ WEBSITE

q Các yêu cầu cơ bản khi thiết kế website:

– Xác định yêu cầu và mục đích của Website

– Chuẩn bị nội dung cho các trang

– Phác thảo khuôn mẫu (Template) cho trang,thường các trang có cùng chủ đề thì sử dụngchung một template.

– Mọi trang web phải có ít nhất một liên kết.

– Cho phép truy cập trực tiếp.

– Đơn giản và nhất quán.



q Xác định cấu trúc của Website, có 3 kiểu cấutrúc:

– Tuyến tính: Hiển thị thông tin một cáchtuần tự. Chỉ thích hợp cho các website nhỏ.



– Phân cấp: theo tầm quan trọng của nộidung.



– Ô lưới: Các chủ đề thường không có sựphân cấp về mức độ quan trọng.


V.TẠO WEBSITE BẰNG DREAMWEAVER

q Cách tạo một Website mới:

Trong Document Window, chọn Siteà Managesites… àNew à Siteà hộp thoại Site Definitionà Chọn Tab Advance, trong mục Local info:

– Site name: Tên WebSite

– Local Root Folder: Khai báo đường dẫn củafolder lưu trữ Web

– Default Images folder: đường dẫn đến thưmục chứa các hình ảnh của Website.



– Refresh Local file list Automatically: Nếuchọn Dreamweaver tự động cập nhật cấutrúc file trong bảng Local Folder của SitePanel. bằng cách chọn View à Refresh Localfiles trong Site Window

– HTTP Address: Nhập địa chỉ của site.

– Enable Cache: Tạo một file lưu trữ các thôngtin về link giữa các file trong site. Sau khichọn xong Click OKà Click Done.



q 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 trong đó các

biểu tượng file/folder

có màu xanh.



q Mở một site đã tạo:

– Cách 1: Chọn tên Site trên Toolbar củaSitePanel

– Cách 2: Chọn menu Siteà Manage Sites àChọn tên Site muốn mở à Done

q 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ựchiệ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 đangchọ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



q 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ơithiết kế trình bày nội dung của từng trangweb đơn.

– Sau khi thiết kế xong mỗi trang trang webđược lưu trong thư mục HTML đã được khaibáo trong mục Local Root Folder, phần mởrộng mặc định là HTML


VI. LIÊN KẾT CÁC TRANG WEB ĐƠN

q Trong một Website các trang phải được liên kếttheo một cấu trúc được xác định trước.

q Cách tạo liên kết:

– Mở trang nguồn àChọn nút liên kết

– Trong Properties Inspector, tại mục link,nhập địa chỉ của trang liên kết bằng 2 cách



– Cách 1: Click nút kéo mũi tên chỉ đến têntậ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ênkết đến



q Kiểm tra liên kết: Fileà Check PageàChecklink

– Check links for entire Site: kiểm tra liên kếtcho 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ọntrong Site

q 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


VII. ĐƯA WEBSITE LÊN WEB SERVER

q Xuất bản Website là chép thư mục gốc của Sitelên Server của các nhà cung cấp dịch vụInternet (ISP).

q Để xuất bản Website

– Phải lưu lại tất cả các tập tin của website

– Kết nối với Server sau đó thực hiện Put File



q Kết nối với Remote Site:

– Khi tạo Site mới ta chưa xác định RemoteSite (Thư mục chứa Site trên Server), nênkhi Put File chương trình yêu cầu kết nối vớiRemote Site.



q Trong cửa sổ Site Definition chọn 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 ổ đĩacứng).

– Tại mục Remote Folder, Click biểu tượngFolder, để tìm thư mục mới chứa Site.



q Xuất bản Site lên Remote Site:

– Trong Site Panel, chọn lại tên Site cần xuấtbản, Click nút Put File

– Xuất hiện hộp thoại: Are you sure you wishto 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ừ sitelên Remote Site.



q Kiểm tra lại trên Remote Site

– Click nút Expand trong Site Panel: Màn hìnhchia làm 2 phần: Bên trái là Remote Site, Bên phải là Local Site


VIII. SITE MAP

q 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 tintrong WebSite.

q Cách tạo Site Map:

– Trước hết cần phải định nghĩa trangHomePage, hoặc trong Site phải có trangIndex.htm


VIII. SITE MAP

– Trong khung Site Pane: click nútExpand/Collapse để mở

rộng Site Panel

§ Click chọn nút SiteMap

§ Map Only: Chỉ hiển thị Site Map

§ Map and Files: Hiển thị Site Map và cáctập tin trong website


VIII. SITE MAP

– Nếu chưa chỉ định trang Hompage, thìchương trình yêu cầu chỉ định trangHomepage.

– Click Manage Fileà Edit


VIII. SITE MAP

q Trong cửa sổ Site Definitionà chọn Site Map Layout

– HomePage: chỉ đến tập tin HomePageàOK

– Done


VIII. SITE MAP

q Trong cửa sổ Site Map xuất hiện bản đồ liên kết


VIII. SITE MAP

q Xem một Site Map:

– Trong Site Panel, chọn Map view trongkhung Site view


VIII. SITE MAP

q Tạo liên kết bằng Site Map

– Trong Site Map, Click phải trên tập tin muốntạo liên kết, chọn

§ Link to New File: Liên kết đến tập tin mới

§ Link to Existing File: liên kết đến tập tin cósẵn.


CHUONG VIII Deamweaver - xuanhien.files.wordpress.com · – Forms: Chứa các công cụtạo...

Documents

Transcript of CHUONG VIII Deamweaver - xuanhien.files.wordpress.com · – Forms: Chứa các công cụtạo...