Tài liệu Thiết+kế+website+động+với+Adobe+Dreamweaver+CS3 ppt

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

dụng web server có tên gọi là Internet Information Services (IIS). Cách cài đặt như sau:
- Cho đĩa CD chứa Windows XP vào ổ đọc.


- Vào Start > Control Panel > Add or Remove Progams. Tại cửa sổ Add or Remove Progams, chọn
Add/Remove Windows Components, đánh dấu chọn vào mục Internet Information Services (IIS),
bấm Next rồi làm theo hướng dẫn để hoàn tất quá trình cài đặt.
- Sau khi cài đặt xong, bạn sẽ có thêm một thư mục mới với tên là Inetpub trên phân vùng C (nếu
bạn cài Windows XP ở phần vùng này), có thể kiểm tra bằng cách mở trình duyệt Internet Explorer
rồi gõ http://localhost, nếu nhận được màn hình chào mừng là bạn đã cài đặt thành công IIS.
Ngoài ra, nếu muốn sử dụng thêm các ngôn ngữ lập trình web như PHP,
ColdFusion..., bạn cần tải về và cài đặt một trong các gói (pack) cài đặt đã
bao gồm Apache, PHP, mySQL, PHPmyAdmin... như sau:
- FoxServ 3.0 (bản này ổn định hơn bản 3.1 beta):
24751
- PHP Triad 2.2: http://sourceforge. net/project/platformdownload.php?
group_id=9325
- WampServer 2: http://www. wampserver.com/en/
II. Tạo một dự án website
Công việc này sẽ giúp Adobe Dreamweaver CS3 dễ dàng kiểm soát và
quản lý toàn bộ hệ thống website động mà bạn sắp thiết kế.
- Khởi động Adobe Dreamweaver CS3, từ giao diện chính của nó, bạn vào menu Site > New site.
Một cửa sổ mới hiện ra, tại đây, bạn nhập tên cho dự án website là ComputerStore vào khung
What would you like to name your site. Sau đó, nhập http://localhost vào ô What is the HTTP
Address (URL) of your site. Bấm Next để tiếp tục.
- Trong cửa sổ tiếp theo, bạn đánh dấu chọn vào mục Yes, I want to use a server technology, rồi
chọn ASP VBScript trong khung Which server technology?. Bấm Next để tiếp tục. Bấm Next cho
đến khi xuất hiện cửa sổ có nút Done, bấm nút Done để bắt đầu quá trình tạo dự án website mới.
- Lúc này, bạn sẽ thấy tên của thư mục ComputerStore nằm trong khung File bên phải của Adobe
Dreamweaver CS3. Thư mục này sẽ được lưu trữ tại C:\Inetpub\wwwroot\ComputerStore và hiện

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ỉ
/>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
bên dưới dòng chữ COMPONENTS rồi đặt tên là Menu1. Trước mắt, chúng ta cứ đặt 3 vùng chọn

này, nếu cần bạn vẫn có thể tạo thêm các vùng chọn khác.
IV. Áp dụng template cho một trang web
Sau khi đã tạo xong một template (có tên là MainTemp.dwt), bạn có thể tiến hành áp dụng nó cho
một trang web bằng cách:
- Từ giao diện chính của Adobe Dreamweaver CS3, bạn bấm phải vào thư mục ComputerStore
trong khung File rồi chọn New File, đặt tên cho file mới tạo này là default.asp. Bấm Enter để xác
nhận.
- Bấm đôi vào file default.asp vừa tạo để xem nội dung của nó trong cửa sổ chính của Adobe
Dreamweaver CS3.
- Vào menu Modify > Templates > Apply Templates to page...
- Một cửa sổ hiện ra, bạn chọn MainTemp rồi bấm nút Select để xác nhận.
- Lúc này, bạn sẽ thấy trang default.asp đã được bổ sung giao diện giống như giao diện của trang
MainTemp.dwt mà bạn đã tạo ra ở các bước trên, chỉ khác ở chỗ là bạn chỉ được thao tác trong
phạm vi các ô có viền màu xanh, các ô viền màu xanh này là các vùng chọn không bị ảnh hưởng
mỗi khi bạn sửa đổi nội dung của tập tin MainTemp.dwt, các vùng khác bạn sẽ không thể thao tác
được.
V. Tạo database
Adobe Dreamweaver CS3 hỗ trợ rất nhiều loại database (SQLserver, MySQL, Microsoft Access,
v.v...). Trong chuyên đề này, chúng ta sẽ bắt đầu tạo một database bằng Microsoft Access 2003
để tiện cho việc lưu trữ và di chuyển. Cách thực hiện như sau:
- Tạo thêm một thư mục có tên là Database trong thư mục ComputerStore. Khởi động Microsoft
Access 2003.
- Vào menu File > New, bấm vào liên kết Blank database trong khung bên phải.
- Chọn nơi lưu trữ tập tin database sắp tạo tại C:\Inetpub\wwwroot\ ComputerStore\database, đặt
tên tập tin này là data.
Sau khi đã có được tập tin database (có tên và phần mở rộng là data.mdb), bạn sẽ tiến hành tạo
ra các bảng biểu để phục vụ cho quá trình ghi / xóa dữ liệu:
- Mở tập tin data.mdb bằng Microsoft Access 2003.
- Bấm đôi vào mục Create table in Design view. Tại đây, bạn tiến hành nhập vào các Field name
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
làm như sau:

- Mở tập tin data.mdb bằng Microsoft Access 2003.
- Vào menu Tool > Relationships.
- Một cửa sổ có tên là Show table hiện ra. Tại đây, bạn chọn bảng tblProduct rồi bấm nút Add, tiếp
tục chọn bảng tblCategory rồi bấm Add. Thao tác này sẽ giúp bạn đưa 2 bảng trên vào cửa sổ
Relationships. Sau cùng bấm Close để đóng cửa sổ Show table lại.
- Từ cửa sổ Relationships, bạn bấm trái chuột vào mục intcatID trong bảng tblProduct rồi kéo rê nó
vào mục intcatID trong bảng tblCategory. Lúc này bạn sẽ thấy một đường thẳng màu đen nối liền 2
mục này. Thoát khỏi cửa sổ Relationships và chọn Yes để lưu lại.
- Sau cùng, vào menu Tool > Database Utilities > Compact and Repair Database... để Microsoft
Access 2003 xác lập lại các thông tin cho tập tin data.mdb. Nếu không có thời gian để làm theo
hướng dẫn, bạn có thể tải về tập tin data.mdb từ địa chỉ
/>Kỳ tới: Quản trị website - Kết nối database và đăng nhập hệ thống. ✯