Hướng dẫn sử dụng Template trong 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 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