Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 3 : Template trong Dreamweaver MX

Nội dung text: Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 3 : Template trong Dreamweaver MX

1. Bài 3 : Template trong Dreamweaver MX Môn : Lập trình và Thiết kế Web 1 KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN 2007 Authored by: Nguyễn Hoàng Anh - Lương Vĩ Minh
2. Bài 3 : Template trong Dreamweaver MX Môn : Lập trình và Thiết kế Web 1 Contents 1. Tạo Site 2 2. Tạo một Template 4 3. Tạo vùng có thể chỉnh sửa (Editable Region) cho trang Template 6 4. Tạo một trang mới từ Template 8 5. Cập nhật Template 10 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 1
3. 1. Tạo Site Trên menu chọn Site New Site Các thông tin cơ bản cần cung cấp là:  Tên Site (Site name)  Đường dẫn đến thư mục gốc (Local root folder)  Thư mục chứa hình ảnh (Default images folder) 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 2
4. Sau đó chọn OK, Site mới được tạo. 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 3
5. 2. Tạo một Template Bước 1: Thiết kế trang Html như hình sau để làm trang Template: Các vùng Template trong trang Html vừa tạo Hình vẽ Ý nghĩa Vùng cố định (Locked – Non Editable) Vùng có thể chỉnh sửa ( Editable) 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 4
6. Bước 2: Save as trang html trên thành trang Template. o Sau khi thiết kế xong trang html ở bước 1, Trên menu của Dreamweaver vào File Save as o Chọn kiểu save là Template files (*.dwt) 9/26/2007 | o Chọn Save , trang Template đã được tạo. Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 5
7. 3. Tạo vùng có thể chỉnh sửa (Editable Region) cho trang Template • Sau khi lưu trang dạng template ở trên, tất cả các vùng trong trang đều ở dạng không thể chỉnh sửa ở các trang được tạo từ trang Template vừa tạo ( Locked – Non Editable). • Trong bài Bookstore chúng ta đang xây dựng, tất cả các vùng đều ở dạng cố định (Locked) cho tất cả các trang ngoại trừ vùng (main content) là khác nhau ở các trang. • Để tạo vùng có thể chỉnh sửa cho các trang sinh từ trang Template, ta làm theo các bước sau: Bước 1: Chọn vùng cần tạo Bước 2: Trên thanh menu chọn Insert Template Objects Editable Region hoặc nhấn tổ hợp phím Ctr+Atl+V 9/26/2007 | Vùng có khả năng chỉnh sửa (Editable Region) MX Dreamweaver trong Template 3: Bài 6
8. • Sau đó đặt tên cho vùng này là Main_Content • Kế tiếp chọn Ok, hoàn thành tạo vùng có thể chỉnh sửa trong trang Template (Editable Region) 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 7
9. 4. Tạo một trang mới từ Template Trên thanh menu vào File New , chọn tab Templates , sau đó chọn Templates main trên site Bookstore Template Sau đó chọn Create, trang mới được tạo ra giống như trang Template main. 9/26/2007 | MX Dreamweaver trong Template 3: Bài 8
10. Trong vùng Main_Content, ta thiết kế trang như sau: Tương tự ta tạo các trang còn lại từ trang Tempalte: 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 9
11. 5. Cập nhật Template • Mở file main.dwt . • Ta tạo link cho Home là /index.html Nhấn Ctr+S hoặc vào File Save để lưu lại main.dwt. Khi đó Dreamweaver sẽ hiện dialog yêu cầu cập nhật thông tin lại cho tất cả các trang được phát sinh từ trang main.dwt Chọn Update, khi đó tất cả các trang của chúng ta đều được cập nhật đồng nhất. 9/26/2007 | Bài 3 : Template trong Dreamweaver MX Dreamweaver trong Template 3: Bài 10