Bai 4 template dreamweaver

Bai 4 template dreamweaver

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

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

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)

Sau đó chọn OK, Site mới được tạo

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

Vùng cố định (Locked – Non Editable)

Vùng có thể chỉnh sửa ( Editable)

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)

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

Để 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)

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

Sau đó chọn Create, trang mới được tạo ra giống như trang Template

main.

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:

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

Chọn Update, khi đó tất cả các trang của chúng ta đều được cập nhật đồng nhất