Bai 4 template dreamweaver
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (509.16 KB, 13 trang )
Bài 4
HƯỚNG DẪN SỬ DỤNG TEMPLATE
TRONG DREAMWEAVER
GVLT:
Trần Thị Bích Hạnh
Lương Vĩ Minh
GVHDTH:
Nguyễn Hoàng Anh
Trần Duy Hoàng
Ngô Bá Nam Phương
Lê Hoài Tâm
1
MỤC LỤC
1. Giới thiệu về Template trong Dreamweaver 3
2. Các kiểu vùng Template (Template Region) trong Dreamweaver 3
3. Sử dụng Template trong Dreamweaver 3
3.1. Tạo Site 3
3.2. Tạo một Template 5
3.3. Tạo vùng có thể chỉnh sửa (Editable Region) cho trang Template 7
3.4. Tạo một trang mới từ Template 9
3.5. Cập nhật Template 12
2
1. Giới thiệu về Template trong Dreamweaver
2. Các kiểu vùng Template (Template Region) trong
Dreamweaver
3. Sử dụng Template trong Dreamweaver
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)
3
Sau đó chọn OK, Site mới được tạo.
4
3.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)
5
Bước 2: Save as trang html trên thành trang Template.
Sau khi thiết kế xong trang html ở bước 1, Trên menu của
Dreamweaver vào File
Æ
Save as
Chọn kiểu save là Template files (*.dwt)
6
Chọn Save , trang Template đã được tạo.
3.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.
7
Để 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
Vùng có khả năng
chỉnh sửa
(Editable Region)
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)
3.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
9
Sau đó chọn Create, trang mới được tạo ra giống như trang Template
main.
10
Trong vùng Main_Content, ta thiết kế trang như sau:
11
Tương tự ta tạo các trang còn lại từ trang Tempalte:
3.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
12
Chọn Update, khi đó tất cả các trang của chúng ta đều được cập nhật đồng
nhất.
13
