Thiết kế website động với Adobe Dreamweaver CS3
Nội dung trang web trong một website động bao gồm
những phần cố định và những phần có thể thay đổi theo
yêu cầu của người xem hay theo yêu cầu cập nhật. Vì vậy,
hầu hết các website cần có sự cập nhật thường xuyên đều ở
dạng động để tiết kiệm công sức thiết kế và điều hành. Đối
với website tĩnh, phần mềm thiết kế phổ biến là FrontPage, nhưng để thiết kế website
động, người ta thường dùng Dreamweaver của hãng Adobe. Kể từ số này, LBVMVT sẽ
khởi đăng loạt bài nhiều kỳ, hướng dẫn từng bước cách thiết kế một website động chuyên
về bán hàng trực tuyến bằng Dreamweaver CS3. Kỳ này nói về tạo web server, templates
và database.
Adobe Dreamweaver CS3 là một chương trình hỗ trợ thiết kế website được sử dụng rất phổ
biến vì với những công cụ mạnh mẽ, được bố trí hợp lý trong một giao diện thân thiện, nó
rất thích hợp cho mọi đối tượng, từ những nhà thiết kế website chuyên nghiệp cho đến
những ai mới vào nghề. Với Adobe Dreamweaver CS3, bạn sẽ dễ dàng nhận biết được rằng
mình nên bắt đầu thiết kế một website ra sao bằng cách sử dụng các template sẵn có của
nó hoặc tải về từ Internet rồi từ đó hiệu chỉnh lại cho phù hợp với nhu cầu. Bên cạnh đó,
với khả năng can thiệp trực tiếp vào database (cơ sở dữ liệu), Adobe Dreamweaver CS3 sẽ
là một trợ thủ đắc lực cho bạn trong việc thiết kế các website động với các ngôn ngữ lập
trình mạnh mẽ và phổ biến như: PHP, ASP/ASP.NET, ColdFusion v.v... mà không cần biết
nhiều về lập trình web.
Trong phần đầu của của loạt bài hướng dẫn thiết kế website động với Adobe Dreamweaver CS3
này, chúng ta cùng nhau tìm hiểu các tính năng của nó thông qua việc thiết kế một website bán
máy tính trực tuyến bằng ngôn ngữ ASP (VB Script). Bạn có thể tìm mua đĩa CD Adobe
Dreamweaver CS3 tại các cửa hàng tin học hoặc liên hệ với người viết bài này qua email hoặc số
điện thoại 0917488773 để được hỗ trợ.
I. Tạo web server
Web server là một ứng dụng được cài đặt trên máy chủ để xử lý các đoạn mã (script) mà người
lập trình web viết ra, sau đó trả về kết quả cho trình duyệt dưới dạng một tập tin HTML. Nếu không
có điều kiện thuê một hosting để thực nghiệm, bạn có thể tạo một web server ngay trên máy tính
cá nhân để chạy được các ứng dụng web động. Trong chuyên đề này, bạn cần cài đặt một ứng

thời thư mục này trống rỗng vì bạn chưa tạo ra bất kỳ tập tin nào trong này cả.
III. Tạo template cho website
Theo mặc định, Adobe Dreamweaver CS3 cung cấp cho bạn một vài web template (khuôn mẫu
web), tuy nhiên chúng không được bắt mắt cho lắm vì vậy bạn có thể tải về bộ template mà tác giả
dùng để minh họa cho loạt bài này tại địa chỉ
http://rapidshare.com/files/91363672/ComputerStore_Temp.rar.
Sau khi tải về, bạn tiến hành giải nén rồi chép 3 tập tin Index.html, Index2.html, style.css cùng với
thư mục Images vào thư mục C:\Inetpub\wwwroot\ComputerStore.
- Khởi động Adobe Dreamweaver CS3, bấm đôi vào tập tin index.htm trong khung File nằm phía
bên phải để mở nội dung của tập tin này trong cửa sổ chính của Adobe Dreamweaver CS3. Tại
đây, bạn vào menu File > Save as Template..., đặt tên cho template sắp tạo là MainTemp trong ô
Save as, bấm Save để lưu lại. Lúc này, bạn sẽ thấy tên của tập tin index.html đã trở thành
MainTemp.dwt. Và lúc này Adobe Dreamweaver CS3 sẽ tự động tạo thêm một thư mục có tên là
Templates trong thư mục ComputerStore, thư mục Templates sẽ chứa tập tin MainTemp.dwt.
Tương tự bạn tiếp tục chọn File > Save as Template... rồi đặt tên là admin_temp để sử dụng
template này cho các trang web thuộc phần Quản trị mà bạn sẽ tạo ở các phần sau.
- Ưu điểm của việc sử dụng template là cho phép bạn dễ dàng thay đổi nhanh nội dung cho toàn
bộ hệ thống website mà không phải tốn nhiều thời gian để sửa đổi trên từng trang web, bạn chỉ
cần thay đổi nội dung trên template thì lập tức các trang web được áp đặt template này sẽ tự động
thay đổi theo. Thông thường những nội dung cố định, ít bị thay đổi là các menu, banner...nhưng
mỗi trang web lại hiển thị những nội dung khác nhau tùy theo mục đích mà bạn tạo ra nó, vì vậy
bạn cần phải tạo ra những vùng không chịu ảnh hưởng của template để nhập những nội dung
khác nhau cho nó. Adobe Dreamweaver CS3 gọi những vùng này là Editable Region.
- Quay lại với giao diện chính của Adobe Dreamweaver CS3, bạn hãy chọn table (bảng biểu) có
chứa dòng chữ Sản phẩm mới bằng cách rê con trỏ vào cho đến khi thấy xuất hiện một khung viền
màu đỏ thì bấm trái, sao cho thấy xuất hiện một đường viền đen bao quanh table là bạn đã có
được một vùng chọn. Tiếp tục, vào menu Insert > Template Objects > Editable Region (hoặc bấm
tổ hợp phím Ctrl+Alt+V). Một cửa sổ hiện ra, tại đây bạn đặt tên cho Editable Region này là Title1.
Bấm OK để xác nhận. Lúc này, bạn sẽ thấy vùng chọn có viền màu xanh xuất hiện. Tương tự, bạn
hãy chọn vùng chọn bên dưới dòng chữ Sản phẩm mới rồi đặt tên là Content 1, chọn vùng chọn

và Data type rồi lưu lại theo các tên gọi (tblUser, tblCategory và tblProduct) theo mẫu sau:
1. Bảng tblUser
- Bảng này sẽ chứa thông tin của người quản trị và chỉ những ai nhập đúng Username, Password
có trong bảng này thì mới vào được quyền quản trị website. Sau khi nhập xong phần Field name
và Data type, bạn lưu lại bảng này với tên gọi tblUser. Nội dung bảng này như sau:- Sau khi nhập dữ liệu xong. Bạn trở lại giao diện chính của Microsoft Access 2003, bấm đôi vào
bảng tblUser vừa tạo rồi nhập giá trị là admin vào 2 ô txtUsername và txtPassword.
2. Bảng tblCategory
- Bảng này sẽ chứa danh mục các sản phẩm mà bạn tạo ra. Sau khi nhập xong phần Field name
và Data type, bạn lưu lại bảng này với tên gọi tblCategory. Nội dung bảng này như sau: - Trong đó, Catname là tên gọi của danh mục sản phẩm (category) và CatSort là thứ tự sắp xếp
của danh mục sản phẩm.
3. Bảng tblProduct
- Bảng này sẽ chứa các thông tin có liên quan đến các sản phẩm mà bạn đang muốn kinh doanh.
Sau khi nhập xong phần Field name và Data type, bạn lưu lại bảng này với tên gọi tblProduct. Nội
dung bảng này như sau:- Trong đó, TitleProduct là tiêu đề tên của sản phẩm, DatePost là ngày bạn thêm sản phẩm vào
database, intcatID là ID của Category, mo_ta là phần miêu tả sơ lược về sản phẩm và chi_tiet là
phần miêu tả chi tiết về sản phẩm.
4. Mối tương quan giữa các bảng (Relationships)
Nếu xem xét kỹ, bạn sẽ thấy rằng mỗi intcatID của 1 sản phẩm lại được gắn kết vào một intcatID
của category nếu nó thuộc category đó. Như vậy, mỗi khi bạn tiến hành sửa / xóa một sản phẩm
nào đó thì bắt buộc phần intcatID trong bảng biểu tblCategory sẽ phải thay đổi theo. Muốn vậy bạn
cần phải sử dụng thêm lệnh Relationships trong Microsoft Access 2003 để khai báo chúng. Cách