BÀI 5: TẠO PAGE TRONG DREAMWAVER CS6
NGÀY 11.5.2014
Video Hướng dẫn tại: http://goo.gl/O2xrZX
LINKS DOWNLOAD CÁC BÀI VIẾT
CHUYÊN ĐỀ DREAMWEAVER CS6:
Bài 1: Download và cài đặt
Dreamwaever CS6
Bài 2: Danh sách 15 video hướng dẫn
thiết kế web:
Bài 3: Làm chủ giao diện Dreamweaver
CS6
Bài 4: Quản Lý Site trong Dreamweaver
Bài 5: Tạo Page trong Dreamweaver:
Bài học này hướng dẫn các
bạn cách tạo một Web Page trong Website, hướng dẫn sử dụng thuộc tính
properties để định dạng cho các Wb Page này.
Trong các
video hướng dẫn thiết kế Web bằng Chương trình Dreamweaver của Zend.vn có áp dụng
Host của Zend.vn. Điều này gây rất nhiều khó khăn cho học viên. Út Bỉnh đề nghị
các bạn sử dụng Host Free BYETHOST hoặc thiết kế trên LocalHost (Tạo Server
trong Máy tính của bạn). Khi cần thiết Upload các Files lên Host thì dùng giao
thức FTP bằng chương trình FILE ZILLA đã có đề cập trong bài trước.
Vậy trước tiên bạn cần tạo LoaclHost bằng cách download và
cài đặt phần mềm này sau đó tạo một Folder tại Desktop chứa các Website mà bạn
sắp tạo ra để thực tập.
1. CÀI ĐẶT WEB SERVER TẠO LOCALHOST BẰNG PHẦN MỀM
APPSERV.
Download Chương trình appserv-win32-2.5.10 tạo
Localhost (16,40 MB) tại:
Để tạo một
web server trong máy tính của bạn thì bạn có thể dùng các phần mềm sau: Appserv
và Xampp, hoặc Wamp. Các phần mềm này có đặc điểm chung là sau khi cài đặt sẽ cấu
hình và tích hợp sẵn PHP/MySQL và Apache. Ở đây tôi chọn Appserv để cài đặt vì
trong quá trình sử dụng tôi thấy 1 số code Joomla chạy ổn ở local và trên host,
nhưng khi chép qua web server mà sử dụng phần mềm Xampp và Wamp thì lại xuất hiện
1 số lỗi mà bên Appserv không có
Tìm phiên bản cài đặt: Để tìm phiên bản cài đặt hợp lý thì
bạn phải xác định là bạn cài Joomla phiên bản mấy? và mỗi phiên bản của Joomla
khi down load thì sẽ có thông tin yêu cầu về cấu hình phiên bản của PHP và
MySQL. Ở đâu tôi chọn Joomla 2.5, và phiên bản PHP thích hợp cho Joomla 5.2.x,
MySQL thích hợp là 5.0.51. Và gói Appserv thích hợp cho bạn Appserv 2.5.10 vì
có PHP 5.2.6 và 5.0.51b
Download: Bấm lên link của dòng Souceforge.net:
http://prdownloads.sourceforge.net/appserv/appserv-win32-2.5.10.exe?download sẽ xuất hiện cửa sổ download của IDM
(Download và cài đặt IDM: http://tinyurl.com/utbinh1124).
Bạn chỉ định lưu tại Desktop.
Cài đặt:
Bấm lên shortcut của chương trình cài đặt qua những bước đơn
giản. Và đây là màn hình đầu tiên
Sau khi nhấn Next
Sau khi nhấn I Agree,
xuất hiện màn hình chọn vị trí lưu trữ thư mục Appserv. Bạn nên lưu trữ
trong Ổ D để tránh trường hợp khi Ghost sẽ không bị mất các dữ liệu lưu trữ
trong LocalHost.
Sau khi nhấn Next. Chọn check vào 4 ô
vuông bên dưới
Sau khi nhấn Next.
Server name: nhập localhost (trong hình root), Nhưng các bạn
nên nhập là localhost
Email: nhập
Email bất kỳ
Port: Mặc định là port 80. Nếu port 80 đã
sử dụng thì bạn đổi lại port khác (ví dụ: 8080). Nếu đổi port thành 8080 thì
khi chạy trên trình duyệt kiểm tra là: localhost:8080, với port mặc định thì
chúng ta chỉ cần gõ localhost. Khi bị đụng port nó quá trình cài đặt sẽ không
thành công, qua việc kiểm tra url: http://localhost trên trình duyệt
B6. Sau khi
nhấn Next. Nhập mật khẩu cho user root (user mặc định của hệ quản trị CSDL
MySQL) và check Enable InnoDB (tránh bị lỗi những trường hợp database có số lượng
lớn về table)
Kết thúc quá
trình cài đặt
Kiểm
tra kết quả cài đặt: Vào trình duyệt gõ:
localhost. Xuất hiện giao diện của AppServ
- Bấm lên dòng: phpMyAdmin Database Manager Version 2.10.3. Xuất hiện CS Authentication Required, dòng User Name nhập: root- Dòng Pass word nhập: 1234546. Bấm Ok.
- Xuất hiện CS PhpMyAdmin. Trong Ô Create new database nhập: chubinh. Trong Ô Collation chọn utf8_unicode_ci và bấm nút Create. Ben phải xuất hiện tên database vừa đặt và không có Tab nào đã thiết lập.
2. Tạo đường dẫn mới cho 3 trang web đã tạo :
Sau khi bạn đã học 4 bài, các bạn có 4
trang web tên : demo, example và new. Bay giờ chúng ta sẽ dời và tạo đường
dẫn mới cho các trang web này trong Localhost. Chúng sẽ được lưu trữ trong
Folder www. Cách thực hiện như sau :
- Thiết lập tên trang Web demo và đường dẫn của trang Web trong Localhost : Bấm nút Site > Chọn Site Manager. Bấm đúp lên demo > Bấm nút Browse > Bấm Ổ D > Bấm đúp Folder AppServ > Bấm đúp Folder www > Bấm nút Create New Folder > Đặt tên demo > Bấm đúp lên nó > Bấm Select. Bạn đã thấy đường dẫn của Website demo, bấm Save > Bấm Ok > Bấm Done. Trong Panel Files đã thấy Trang Web demo và đường dẫn của nó.
- Thiết lập tên trang Web example và đường dẫn của trang Web trong Localhost : Bấm nút Site > Chọn Site Manager. Bấm đúp lên demo > Bấm nút Browse > Bấm Ổ D > Bấm đúp Folder AppServ > Bấm đúp Folder www > Bấm nút Create New Folder > Đặt tên demo > Bấm đúp lên nó > Bấm Select. Bạn đã thấy đường dẫn của Website demo, bấm Save > Bấm Ok > Bấm Done. Trong Panel Files đã thấy Trang Web demo và đường dẫn của nó.
- Thiết lập tên trang Web new và đường dẫn của trang Web trong Localhost : Bấm nút Site > Chọn Site Manager. Bấm đúp lên demo > Bấm nút Browse > Bấm Ổ D > Bấm đúp Folder AppServ > Bấm đúp Folder www > Bấm nút Create New Folder > Đặt tên demo > Bấm đúp lên nó > Bấm Select. Bạn đã thấy đường dẫn của Website demo, bấm Save > Bấm Ok > Bấm Done. Trong Panel Files đã thấy Trang Web demo và đường dẫn của nó.
- Trong bài
học bạn thấy đang mở Web site demo trong đó có các Folder 03 và 04. Trong
04 có Folder images. Chúng ta sẽ tạo giống như trong bài học nhu sau: Copy
Folder 03 và 04 dán vào trang web demo. Bây giờ bạn đã thấy Folder 03 và
04 trong trang Web demo xuất hiện trong Panel Files. Bấm 04 xuất hiện
images. Thư mục này chứa các hình ảnh cho bạn thao tác trong bài học hôm
nay.
- Trong Dream có rất nhiều loại trang để bạn chọn
thiết kế, bài học hôm nay bạn sẽ chọn : Nhấp nút More trong màn hình
Welcome > Chọn Blank Page > Page Type chọn HTML > Layout chọn: none
> Bạn thấy kết quả trongkhung Peview. Loại DocType chọn: XHTML 1.0
Transitional > Bấm nút Create. Bạn đã tạo một tài liệu HTML.
- Bạn nhập nội dung: Hello. Bạn Delete các Files có
sẵn trong Images. Bấm Ctrl+S để Save lại trang. Bấm đúp Folder 04 để lưu
trang này trong 04. Đặt tên 01. Phần Save as Type và Unicode để mặc định.
Bấm nút Save. Bạn đã thấy File 01.html xuất hiện trong images trong Panle
Files. Bạn Preview với Trình duyệt Chrome.
- Tạo Title cho trang Web Page : Trang Hello , Trong Title nhập: Page 1. Xem Preview đã thấy Pager 1 trong Title.
- Tạo trang mới: Vào File > New > Chọn theo hình, bấm Create.
·
Bạn
đã thấy Dream đã tạo sẵn nội dung cho Web Page này.
·
Bạn đặt Tiltle là : Page 2. Ctrl+S để Save lại. Cũng đặt trong Thư
mục 04 và giữa mặc định. Bấm Nút Save. Đã xuất hiện file 02.html.
·
Dùng
Phím tắt tạo nhanh Web Page: Ctrl+N.
Xuất hiện cửa sổ New Documents và bạn chọn loại File muốn tạo. Hoặc bấm phải
lên Folder 04 > Chọn New File và đặt tên Page là 03.html.
·
Thay đổi cấu hình cho Page: Vào Edit > Preferences > Cột
trái chọn New Document > Dòng Default document chọn PHP > Bấm Ok.
o
Bây
giờ bạn tạo một File mới: Bấm phải lên Folder 04 > Chọn New File > Nhập tên
04. Bạn đã thấy Fle mới có phần mở rộng 04.php.
·
Tìm
hiểu cửa sổ New Documents: Vào Edit > Preferences > Cột trái chọn New
Document > Bên phải hiển thị nội dung của nó:
o
Default
document: Chọn HTML. Phần mở rộng bên dưới tự động thay đổi .html.
o
Default
Document Type : Loại chọn mặc định là XHTML 1.0 Transition.
o
Default encoding : Unicode (UTF-8). Mã hóa mặc định chọn
loại này để phù hợp với các văn bản Tiềng Việt.
o
Hủy dấu chọn tại Dòng: Show New Document Dialog Box on
Ctrl+N. Hủy chọn Hiện hộp thoại New
Document khi bấm Vtrl+N.
o
Bấm Ok. Bây giờ khi bấm Ctrl+N không còn hiển
thị HT New Document nửa. Bạn đánh dấu chọn lại.
·
Định dạng cho Trang: Bạn tạo một Page mối là Page
05.html. Bấm đúp Page này để mở ra. Bấm phải lên MHLV > Chọn Page
Properties > Hiện ra CS Page Properties:
o
Trong cột trái bạn có các phần định dạng
để chọn. Chọn Appearance
(CSS). Bạn chọn tiếp: Dòng Page font chọn Time new roman, chữ đậm, Size chọn 16
và bấm Ok. Bạn Mở Page 05.html và nhập Hello. Bạn thấy chữ đậm có Size đã chọn
là 16. Bạn mở lại HT Page Properties, chọn Size 24 và bấm nút Apply. Gỏ chữ lại
thấy chữ cở 24.
o
Bạn
chọn màu cho chữ trong Dòng Text Color. Bấm Apply.
o
Bạn
chọn màu cho nền trong Dòng Background Color. Bấm Apply.
o
Bạn
có thể hủy chọn bằng cách bấm dấu gạch bên phải. Bấm Apply.
·
Thiết lập Hình ảnh làm Background cho
Web Page: Bấm nút Images
> Bấm Foilder 04 > Bấm Folder images > Bấm lên hình > Xuất hiện hình
này trong MHLV. Bạn trở lại CS Page Properties, trong Dòng Repeat có các tùy chọn:
No repeat (Không lặp lại) – repeat (Lặp lại) – Repeat – x (lặp lại theo chiều dọc
– Repeatr – Y (Lặp lại theo chiều đứng).
·
Chọn khoản cách lề Margins: Bạn nhập giá trị khoảng cách lề cho
văn bản. ấm Aply và Ok. Sau đó xem trong Trình duyệt để kiểm chứng lại.
·
Appearance (HTML): Bạn tạo Tập tin 06.html. Bấm đúp lên
tập tin vừa tạo. Bấm phải lên MHLV. Chọn Page Properties. Chọn Apperance
(HTML). Thiết lập ảnh nền: Bấm nút Browse > Chọn ảnh nền. Bạn thấy ảnh nền đã
phủ toàn bộ Trang. Ở đây không có sử dụng Repeat như CSS. Phần Background và Marins
sử dụng tương tự như trong Phần Appearance (CSS).
·
Màu của Links: Bạn chọn màu cho Links (Xanh) -
Visited Links (màu đỏ) – Actived Links (Vàng). Bấm Apply và Ok.
·
Tạo Hyperlinks: Bấm Insert > Chọn Hyperlinks >
Xuất hiện CS Hyperlinks, dòng Tect nhập: hình nền, bấm nút Browse > Chọn hình
nền trong Folder images > Ok. Bấm Ok. Đãm xuất hiện văn bản có liên kết là hình
nền trong MHLV. Tương tự như vậy, bạn tạo Icon trong Dòng Text và Browse đến
Icon trong Images > Bấm Ok và Ok. Xuất hiện liên kết Icon.
o
Ctrl+S
lưu lại và xem trình duyệt Chrome. Bấm liên kết: hình nền. Xuất hiện hình nền.
Bấm liên kết: icon. Xuất hiện icon. Liên kết mang giá trị màu đỏ do bạn đã Visited
nó.
·
Thuộc tính Title/Encoding: Bạn tạo Page mới 07.html. Bấm đúp lên
File này. Bấm phải lên MHLV và chọn Page Properties. Chọn
Title/Encoding. Dòng Title nhập : Page 2. Giữ nguyên mặc định phần
Document Type và Encoding. Bấm Ok.
·
Thuộc
tính Tracing Image: Đây là thuộc tình thường xuyên sử dụng để tạo hình
nền. Bạn tạo Page mới 08.html. Bấm đúp lên File này. Bấm phải lên MHLV và chọn
Page Properties. Chọn Tracing
Image. Bấm nút Browse chọn một ảnh nền. Bạn giàm % của Dòng Transparency để ảnh
nền nhạt dần. Bấm Apply để xem Preview.
ÔN LẠI CÁCH SỬ DỤNG FILE ZILLA
NGÀY 12.5.2014
1.Nhập
Domaine – Username – Password và bấm nút Quickconnect. Khung dưới kết nối với
Server và thông báo Directory listing succeswsfull. Kết nối với Sever hoàn tất.
2.Ô Local
Site bấm lên Website cần Upload. Ô dưới Filename hiện ra nội dung của Website.
3.Ô Remote
site nhập : /public_html. Bấm phải lên khung dưới, xuất hiện CS Create
Directory, nhập tên Website là: table1. Bấm Ok. Khung trên tạo kết nối thông báo
Directory listing succeswsfull. Kết nối với Sever hoàn tất. Bấm đúp lên Table1
đã thấy đường dẫn:public_html/table1 trong Dòng Remote site.
4.Rê File
index.html của Website table1 qua phải Ô Filename. Nếu kết nối thành công sẽ xuất
hiện Directory listing succeswsfull.
- Bấm phải lên index.html > Chọn Vew/Edit. Xuất hiện Trang này trên Trình duyệt
UPLOAD BẰNG HOSDR MUA:
Khi Uploaf FTP bằng File Zilla kết quả thể hiện có lỗi. Út Bỉnh
đã Upload bằng Host mua như sau:
1.
Bấm
Phải lên Website table1 > Chọn Add To Archived > Chọn Zip > Chọn Best
để tạo File nén.
2.
Vào
Control Panel của Hosting > Bấm Public_html > Bấm nút Upload. Chờ thông báo
Upload hoàn tất. Bấm nút Back. Bấm chọn File nén vừa Upload > Bấm nút
Extract. Xòa File nén.
3.
Vào
trình duyệt nhập đường dẫn: table1/index.html sẽ ra kết quả.
Kết quả mời các bạn xem trang Web
table1:
No comments:
Post a Comment