DREAMWEAVER CS3

THIẾT KẾ WEB

THEO MẪU

BÀI 7 NGÀY 15.8.2009 UTBINH SOẠN

TRONG DREAMWAEVER CÓ RẤT NHIỀU MẪU WEB , BÀI NÀY HƯỚNG DẪN BẠN THIẾT KẾ CĂN CỨ VÀO MẪU ĐÃ CÓ SẴN . MẪU WEB GỒM CÓ 6 TRANG , SAU KHI TẠO XONG TRANG INDEX BẠN CÓ THỂ TẠO TIẾP 5 TRANG CÒN LẠI , ĐẶT TÊN TỪNG TRANG HOẶC LẬP LIÊN KẾT ĐẾN CÁC TRANG KHÁC . TRONG TRANG INDEX BẠN CÓ THỂ GIỚI THIỆU ĐẠI Ý CỦA TỪNG CHỦ ĐỀ VÀ NHẤP LÊN CHỦ ĐỀ ĐỂ ĐẾN TRANG MỞ RỘNG CHỦ ĐỀ . BÀI NÀY CŨNG HƯỚNG DẪN CÁC BẠN TẠO 1 FORM EMAIL ĐỂ NGƯỜI XEM CÓ Ý KIẾN VỚI TÁC GIẢ THIẾT KẾ WEB . HƯỚNG DẪN CÁCH TẠO 1 FOLDER WEBSITE VÀ TẠO 1 FOLDER TRUNG GIAN , CÁCH UPLOAD CÁC FILES LÊN HOST SERVER ĐỂ LẤY LINK URL GIỚI THIỆU NGƯỜI XEM .

CHỌN TRANG WEB MẪU VÀ TẠO SITE CỤC BỘ

Mở Dreamweaver CS3 > Menu File > New > Cột đầu chọn Page From Sample > Cột Sample Folder chọn Start Page ( Theme ) > Cột Sample Page chọn Mẫu : Health & Nutrition > Xem Preview và mô tả > Nhấp đúp lên Trang Web Mẫu > Hiện ra nội dung trong Cửa Sổ Hồ Sơ .
Menu Site > New > Ra bảng Editing Files , Trường trên nhập : 090812 ( Ngày thiết kế ) – Trường dưới nhập tên Host Server Free : www.byethost.com > Next .
Ra Bảng Editing Files , Part 2 > Next .
Ra Bảng Editing Files , Part 3 > Next .
Ra Bảng Sharing Files , nhấp xổ xuống của Trường trên > Chọn FTP > Hiện ra các Trường tương ứng của FTP , nhập tuần tự kế tiêp : ftp.buyethost5.com

( Host cho bạn khi tạo account ) – htdocs ( Tên Folder trung gian của Host Server) – b5_3613197 ( Username ) – tangnhu ( Password - Bạn nào không tạo được Account của Host này tạm thời sử dụng Password này ) – UTL là : www.minh.byethost5.com ( Do Host server cung cấp ) > Nhấp Nút Test Connection giữa Server và Folder090812 > Khi kết nối thành công sẽ ra Bảng Adobe Dreamweaver Cs3 thông báo việc kết nối đã hoàn tất > Ok > Next .

Ra Bảng Sharing Files , Part 2 > Next .
Ra Bảng Summary > Done > Trong BĐK Files , Menu Browse có Folder090812 – Đang chọn Site-090812 và Đường dẫn nằm sau .
Trang Web mẫu này có 6 Trang . Bạn tạo 1 Trang chủ index.html và tạo 5 Trang còn lại hoặc tạo liên kết cho từng trang . Trong nội dung bài này hướng dẫn bạn tạo các liên kết cho 5 Trang còn lại .(H1).

Nhập Tiêu Đề - Nhập Văn bản cho Trang Index.html và đại ý cho từng Chủ Đề bên Cột Trái .

CÁCH TẠO LINK URL CHO 1 VĂN BẢN

CÓ KÈM HÌNH ĐỊNH DẠNG DOC

Mở văn bản có kèm hình định dạng .doc > Ctrl+ A chọn hết > Chọn Size 8 pt > Hiệu chỉnh lại không cho Hình đè lên chữ và thu hình nhỏ lại .
File > Save As > Other Formats > Chọn Desktop lưu tại đây > File name nhập : FILES > Save As Type chọn Web Page > Save > Continue > Nội dung hiện ra trong Trình Duyệt > Bạn xem và hiệu chỉnh lại lần nửa cho Hình và chữ nằm đúng vị trí .
Ra Desktop đã có 2 Files vừa tạo > Bạn tạo 1 Folder tên FILES để chứa 2 Files này : File FILES.htm ( Nội dung trong Trình Duyệt ) và Folder_FILES ( Các Files Hình cảu văn bản này và 1 số Files của Office Word 2007 tạo ra ) .
Dùng Chương Trình Cute FTP upload Folder FILES lên Host Server để lấy Link URL > Copy Link này .

Kết quả : http://utbinh.com/A8/FILES/FILES.htm (H2).

Tiếp tục tạo Link cho 2 Chủ Đề còn lại bên Cột Trái :

Giới thiệu Dreamweaver CS3 : http://utbinh.com/A8/GIOITHIEU/gioithieu.htm

Tạo Site Cục Bộ và Ở Xa : http://utbinh.com/A8/TAOSITE/taosite.htm

Tạo liên kết cho từng Chủ Đề Cột Trái :

· Bôi đen Chủ Đề > Nút Hyperlink > HT Hyperlink hiện ra , Hàng Text đã có Tên Chủ Đề vừa bôi đen > Dán Link URL vào hàng Link > Ok > File Save .

· Nhấp Preview > Chọn Trình Duyệt > Hiện ra nội dung Trang index.html > Nhấp lên liên kết vừa tạo > Hiện ra nội dung của Chủ Đề .

TẠO LIÊN KẾT CHO CÁC VĂN BẢN TRONG THANH LIÊN KẾT

Cột Trái là Thanh Liên Kết của Trang web Mẫu này có 5 văn bản chủ đề : Topics – guidelines – educators – special needs và food science . Bạn bôi đen từng văn bản và tạo liên kết .

Bôi đen văn bản : TOPICS > Nhấp Nút Hyperlink > HT Hyperlink hiện ra .
Hàng Text nhập Thực Tập Thiết Kế Trang Khung – Hàng Link nhập : http://thunam.byethost15.com/site010709/index.htm

Nhấp Nút Preview > Hỏi bạn có muôn lưu sự thay đổi này của Trang index không ? > Yes.
Đã hiện ra nội dung trên Trình Duyệt > Nhấp lên liên kết vửa tạo > Hiện ra nội dung Trang web đã liên kết .
Tiếp tục thực hiện tạo liên kết cho 4 văn bản còn lại :

· Thiết kế Website : http://minh.byethost5.com/site150609/index.htm

· Website 120609 : http://utbinh.com/A6/120609/index.htm

· Website của utbinh : http://utbinh.com/ub/index.php?

· Forum của utbinh : http://utbinh.com/ub/index.php?option=com_fireboard&Itemid=27

· Thư cho utbinh : http://utbinh.byethost10.com/goithu.html

CÁCH TẠO FORM EMAIL CHO TRANG WEB

Trong Văn bản : THƯ CHO UTBINH , bạn phải tạo 1 Form Email lập liên kết với văn bản này để Người Xem khi nhấp lên sẽ hiện ra Khung có các Trường trong đó khung lớn để Người Xem nhập ý kiến đánh giá nhận xét ( Comments ) và nhấp Nút Gởi . Nội dung này sẽ đến Hộp Thư của Người Thiết Kế Web để có ý kiến phản hồi hoặc giải đáp thắc mắc .

Utbinh đã tạo 1 Form Email PHP trong http://utbinh.com/ykien/goithu.php

Các bạn có thể tạo 1 Form Email giống trên khi mở bài hướng dẫn trong :

http://utbinh.com/MAY08/100508/FormEmailPHP.doc

( Host Server phải có hổ trợ PHP ) .

Hoặc tạo 1 Form Email HTML giống như utbinh đã tạo :

http://utbinh.byethost10.com/goithu.html

· Các bạn có thể tạo 1 Form Email HTML giống trên khi mở bài hướng dẫn vô

http://www.vietwebguide.com/2008/06/email-contact-form-bn-thu- gn.html?showComment=1233810180000

· Copy đoạn Mã Code lập sẵn của tác giả > Mở NotePad > Dán vào .

· Thay thế các văn bản màu đỏ bằng nội dung khác của bạn .

· Menu File > save As > Chọn nơi lưu là Desktop – Hàng File name nhập : goithu.html – Hàng Save As type chọn All Files – Hàng Encoding chọn : UTF-8 > Save < Close NotePad .

Ra Desktop đã có File này > Nhấp lên > Hiện ra nội dung Form Email > Bạn dùng 1 Chương Trình Upload FTP tải lên Host Server để lấy Link URL > Kết quả đã có Link URL là : http://utbinh.byethost10.com/goithu.html

· Test : Nhập nội dung vào > Nhấp nút Gởi .

· Mở Hộp Thư của bạn đã nhập trong Form > Đã có nội dung vừa gởi .

· Mở Hộp Thư của bạn đã nhập trong Form , đã có nội dung vừa gởi

UPLOAD FILES LÊN HOST SERVER BẰNG NÚT PUT FILES CỦA ADOBE DREAMWEAVER CS3

Sau khi thiết kế hoàn tất 1 Folder Website để sẵn sàng upload nó lên Host Server Free là : www.byethost.com , bạn phài nhấp Menu File > save All để lưu tất cả những gì đang hiện có trong các Trang này .

Như đã trình bày trong bài Thiết kế Web 6 Trang , sau khi tạo ra 1 Folder site090806 trong Adobe Dreamweaver CS3 , upload lên Host thành công nhưng khi nhập Link URL trên Address của Trình Duyệt tuần tự là Link URL của Host /site090806/index.htm thì trang Web không hiện ra . Do đó utbinh phải tạo 1 Folder trong gian 080906 gộp chung các Files của Website này vào theo đường dẫn : site090806/foder trung gian 090806/Tên các Files . Khi nhập Link URL này không có folder site090806 mà chỉ có tên Folder Trung Gian 090806:http://utbinhdesign.byethost2.com/090806/index.html

Utbinh không biết lý do tại sao , xin bạn nào hiểu biết rành về các tạo Link URL trong Dreamweaver CS3 hướng dẫn cho utbinh để kỳ sau bổ sung bài viết

( Thư về : utbinhdesign@gmail.com) .

Ra Desktop nhấp My Documents > Nhấp lên Folder 090812 > Tạo 1 Folder Trung Gian tên site090812 > Folder này chứa tất cả các Files của Website mà bạn vừa tạo .

Giải thích : Chình vì trở ngại này nên lúc ban đầu Tạo Folder Website utbinh chỉ tạo Folder bằng con số 090812, sau đó tạo tiếp Folder Trung Gian là site090812 . Folder site090812 bao gôm các Files của Trang Web và nằm trong Folder 090812 .

Nhấp Dreanweaver CS3 trong Thanh Task bar > Nhấp Nút Refresh trong BĐK Files > Đã thấy site090812 trong Vùng Hiển Thị Files > Nhấp chọn Đường dẫn site_090812( C:\Documents . . .} > Nhấp Nút Put Files .
Ra Bảng Background Files Activity_090812 đang kết nối với Host > Xong hỏi bạn có muốn Put toàn phần Site ? > Ok > Bảng Background Files Activity_090812 đang tải lên Host từng Files > Khi hoàn tất bảng này biến mất .
Vùng View chọn Remote Site > a94 thấy toàn bộ nội dung của Host liệt kê các Folders và Files mà bạn đã upload lên trong đó có site090812.(H5) .

Nhấp Nút Expand to show local and remote Sites ( Trình bày mở rộng nội dung Site Cục Bộ và Site Ở xa ) > Hiện ra 2 cột của Site Cục Bộ và Site ở Xa có nội dung giống nhau 100% . (H6) .