công nghệ website - chương viii_deamweaver

CHƢƠNG VIII DREAMWEAVER I.GIỚI THIỆU  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, 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  Dreamweaver MX có thể thiết kế bằng Design view hoặc Code view hoặc Code and Design II. CÀI ĐẶT  Dreamweaver MX 2004 là một chương trình trong bộ Macromedia MX.  Sau khi cài đặt, khởi động Draemvaerver MX: Start Programs Macromedia  Macromedia Dreamweaver MX 2004 III. MÀN HÌNH DREAMWEAVER  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… III. MÀN HÌNH DREAMWEAVER  Document Toolbar: – Show code view: hiển thị mã HTML – Show Design view: chế độ thiết kế, sử dụng cá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 III. MÀN HÌNH DREAMWEAVER  Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web.  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 đối tượng được chọn. III. MÀN HÌNH DREAMWEAVER  Panel groups: nhóm các Panel dùng để quản lý 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. III. MÀN HÌNH DREAMWEAVER  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. III. MÀN HÌNH DREAMWEAVER – 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ủ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Ế WEBSITE  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ụng chung 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. [...]...IV.KẾ HOẠCH THIẾT KẾ WEBSITE  Xác định cấu trúc của Website, có 3 kiểu cấu trúc: – Tuyến tính: Hiển thị thông tin một cách tuần tự Chỉ thích hợp cho các website nhỏ IV.KẾ HOẠCH THIẾT KẾ WEBSITE – Phân cấp: theo tầm quan trọng của nội dung IV.KẾ HOẠCH THIẾT KẾ WEBSITE – Ô 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  Cách tạo một Website mới: Trong... ĐƢA WEBSITE LÊN WEB SERVER  Xuất bản Website là chép thư mục gốc của Site lên Server của các nhà cung cấp dịch vụ Internet (ISP)  Để 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 VII ĐƢA WEBSITE LÊN WEB SERVER  Kết nối với Remote Site: – 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 khi Put File chương. .. 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 V.TẠO WEBSITE BẰNG DREAMWEAVER  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 V.TẠO WEBSITE BẰNG DREAMWEAVER  Mở một site đã tạo: – Cách 1: Chọn tên Site trên Toolbar của SitePanel – Cách 2:... chọn Site Manage sites… 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ủa folder lưu trữ Web – Default Images folder: đường dẫn đến thư mục chứa các hình ảnh của Website V.TẠO WEBSITE BẰNG DREAMWEAVER – Refresh Local file list Automatically: Nếu chọn Dreamweaver tự động cập nhật cấu trúc file trong... của Site lần lượt được chép từ site lên Remote Site VII ĐƢA WEBSITE LÊN WEB SERVER  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  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  Cách tạo Site Map: – Trước hết cần phải định nghĩa trang... File chương trình yêu cầu kết nối với Remote Site VII ĐƢA WEBSITE LÊN WEB SERVER  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 ổ đĩ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 VII ĐƢA WEBSITE LÊN WEB SERVER  Xuất bản Site lên Remote Site: – Trong... 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 V.TẠO WEBSITE BẰNG DREAMWEAVER 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 V.TẠO WEBSITE BẰNG DREAMWEAVER  Thiết kế trang web đơn: – Tại màn hình khởi động chọn Create new  HTML – Xuất hiện... Site Pane: click nút Expand/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ác tậ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 trang Homepage – Click Manage File Edit VIII SITE MAP  Trong cửa sổ Site Definition chọn Site Map Layout – HomePage: chỉ đến tập tin HomePageOK... trang web đơn – Sau khi thiết kế xong mỗi trang trang web được lưu trong thư mục HTML đã được khai bá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  Trong một Website các trang phải được liên kết theo một cấu trúc được xác định trước  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 . phân giải. IV.KẾ HOẠCH THIẾT KẾ WEBSITE  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. THIẾT KẾ WEBSITE  Xác định cấu trúc của Website, có 3 kiểu cấu trúc: – Tuyến tính: Hiển thị thông tin một cách tuần tự. Chỉ thích hợp cho các website