Giáo trình thiết kế web

BÀI 6
Tên bài : GIỚI THIỆU CÁC CÔNG CỤ THIẾT KẾ VÀ TỔ CHỨC FILES CỦA SITE MAP
Mã bài : ITPRG13.6
Giới thiệu 
Khi xây dựng bất kỳ website nào, bước đầu tiên là xác định rõ mục đích của mình.Khơng
có mục đích và nhiệm vụ rõ ràng, các dự định sẽ khó có thể đạt được kết quả như mong
muốn.Lập kế hoạch cẩn thận kết hợp với việc đề ra mục tiêu rõ ràng là chìa khóa để xây dựng
web site thành công.
Mục tiêu thực hiện
Học xong bài này học viên sẽ có khả năng:
- Chọn các cơng cụ xây dựng các đối tượng trong trang WEB một cách hợp lý
- Tổ chức và quản lý các File của một trang WEB theo cấu trúc của Sitemap
Nội dung chính
6.1 Phân tích và chọn lựa các cơng cụ để xây dựng các đối tượng trong trong Web.
Sau khi đã xác định được mục tiêu của mình,tìm hiểu về khán giả,tổ chức trang và thiết
kế khung trang chủ,một thành phần cuối cùng của bản kế hoạch còn lại là kiểm tra các công cụ
và vật liệu để tiến hành xây dựng web.Giai đoạn này bao gồm cả việc chúng ta đã có các văn
bản đã soạn thảo và chỉnh sửa,các file đồ hoạ đã thay đổi kích cỡ phù hợp,các bức ảnh số
hoặc được quét,và các công cụ để sắp xếp tất cả các mục trên trang web.Như vậy chúng ta
thấy các tác vụ trong giai đoạn này rất cụ thể và đơn giản nhưng để hồn thành nhìn chung
mất nhiều thời gian vì vậy chúng ta phải có kế hoạch cụ thể.Về cơ bản trước khi tạo trang web
chúng ta cần phải liệt kê tất cả các công cụ như liệt kê danh sách kiểm tra công cụ dưới đây:
Danh sách kiểm tra công cụ:


Văn bản đã sữa lỗi kiểm tra chính tả và nội dung



Ảnh,đồ hoạ và các minh hoạ(bao gồm các nút,thanh tiêu đề,logo chất
lượng cao)



Khung phác thảo và khn mẫu các trang



Trình soạn thảo HTML,trình soạn thảo văn bản,hoặc các cơng cụ tạo trang
web như frontpage,Dreamwave...



Chương trình đồ hoạ như Photoshop,corel...



Tên miền (hoặc mua,hoặc được phân bổ)



Không gian máy chủ

6.2 Tổ chức và quản lý các đối tượng và xây dựng bản đồ tổ chức File
Như chúng ta đã biết trang web thường bao gồm một số ít tập tin kết hợp với nhau để
tạo ra diện mạo cho một trang.Hơn nữa một website bao gồm nhiều trang web.Do đó tính chất
của các trang web và website là gồm nhiều tập tin nên chúng ta phải lập kế hoạch cho việc đặt
tên và tổ chức các tập tin.Đồi với phần lớn các trường hợp,một website tiêu chuẩn có thể gồm
cấu trúc đơn giản như cho thấy hình bên dưới:

47


Giáo trình thiết kế web

Hình 6.2:Tổ chức file đơn giản của một website
Thư mục chính: chứa các tập tin html,danh mục ảnh.Chúng ta có thể đặt tên bất kỳ cho
danh mục này khi thiết kế các trang trên máy tính.Khi tải các trang này lên dịch vụ máy
chủ,chúng ta sẽ đặt nội dung của các thư mục chứa danh mục chính vào một thư mục trực
tuyến có tên là web và sao lưu toàn bộ thư mục ảnh,âm thanh,video vào thư mục web.
Thư mục phụ:chứa các tập tin ảnh gif và jpg được sử dụng trong trang web.Thư mục
này thường được lưu trữ trong thư mục chính.
Trong
hình
trên
thư
mục
chính
bao
gồm
4
tập
tin
HMTLcontact.html,history.html,index.html,products.html-mỗi tập tin cho một trang chính của
website.Chúng ta phải nhớ rằng mỗi tập tin HTML là tên tập tin xuất hiện trên URL của trang
web.Ví dụ muốn ghé thăm trang sản phẩm của website Curiosity Shop,chúng ta sẽ gõ vào
Như vậy có thể thấy ,địa chỉ URL này bao
gồm tên miền( www.creationguide.com),tên thư mục chứa tập tin (csshoppe),và tên tập tin
products.html.
Đối với hầu hết các trang chủ và trang con,chúng ta thấy rằng khơng cần gõ vào tên tập

tin.Nếu khơng có tên tập tin HTML được chỉ ra sau tên miền hay thư mục,hầu hết các máy chủ thoe
mặc định sẽ hiển thị một tên tập tin đặt biệt –đa số là index.html,hoặc một số máy chủ hỗ trợ một số
tên đặt biệt như index.htm,default.html..Hãy hỏi dịch vụ cung cấp cho biết chúng ta nên dùng tên gì
cho trang chủ của mình,thơng thường nhất vẫn là index.html.
Bởi vì tên tập tin HTML xuất hiện trong URL nên chúng ta cần tuân theo một số quy tắc cơ
bản sau khi đặt tên cho tập tin:
 Tên tập tin phải đơn giản,ngắn và có ý nghĩa.Người sử dụng có thể muốn truy
cập trực tiếp đến các trang phụ,vì vậy nên tạo ra các tên URL dễ nhớ và dễ gõ.
 Tránh dùng các ký hiệu và các dấu chấm câu.Hầu hết mọi người điều thấy rằng
nếu dùng ký hiệu và dấu chấm câu sẽ làm chậm đi tốc độ gõ và khả năng sai xót cao.


Sử dụng dấu gạch dưới để chỉ thị một khoảng trống trong tập tin.



Sử dụng hoàn toàn các chữ thường.

Đặt tên cho hình ảnh
Bên cạnh việc đặt tên cho các tập tin HTML ,chúng ta cũng cần đặt tên cho các
tập tin ảnh.Nói chung người sử dụng khơng truy cập trực tiếp đến các tập tin ảnh mà các trang
48


Giáo trình thiết kế web

HTML tham chiếu đến các tập tin ảnh bất kỳ lúc nào mà chúng cần đến.Vì vậy sẽ khó khăn hơn
khi đặt tên cho các tập tain ảnh.Cách đặt tên ảnh logic và khoa học sẽ giúp chúng ta thuận tiện
hơn trong việc tìm kiếm và truy xuất đến chúng.Cụ thể chúng ta nên đặt trước các tên tập tin
ảnh chữ p_,b_,t_.Trong đó p_ là tên của một bức tranh,ví dụ p_mask chỉ ra bức tranh về cái

mặt nạ.Hình ảnh b_ là nút bấm,ví dụ b_products đó là bức tranh về nút bấm chuyển hướng
products.Và hình ảnh t_ ý nói là thanh tiêu đề,ví dụ t_contacs là hình vẽ thanh tiêu đề được sử
dụng trong trang contacs.
Đến bây giờ chúng ta thấy rằng việc tổ chức file và các đối tượng đóng vai trị
quan trọng trong lập kế hoạch cho website.Vì vậy chúng ta cần phải xem cần phải hệ thống
hoá các tập tin như thế nào,bằng cách nào cho logic nhất.
Chúng ta nên tạo hồ sơ cấu trúc trang có một bố cục rõ ràng bao gồm tất cả các
thông tin dưới một định dạng có thể truy cập dễ dàng.Ví dụ xem hình dưới:

Hình 6.3: Một trong các hồ sơ ban đầu về cấu trúc và cách tổ chức file của một trang web
Bài tập chương 6:Học sinh tham khảo bài tập 1 và 2 trang 140

49


Giáo trình thiết kế web

BÀI 7
KIỂM THỬ VÀ CHUYỂN TẢI TRANG WEB LÊN SERVER
Mã bài : ITPRG13.7
Giới thiệu 
Sau khi thiết kế xong một website,dù trang web chúng ta đẹp đến mứa nào nó sẽ chỉ
sống trong vơ danh nếu bạn khơng thể kết nối internet và chuyển tải web lên máy chủ.Bài này
sẽ giúp cho chúng ta thực hiện công việc đó.
Mục tiêu thực hiện
-Kiểm tra lại trang WEB được xây dựng và chuyển tải lên Server
-Sử dụng được các công cụ kiểm thử là các phần mềm quản trị web
-Biết cách đưa website lên mạng internet
Nội dung chính
7.1 Giới thiệu WEB Server

Là phần mềm cài trên máy chủ cung cấp các thông tin thông qua các trang web cho các
các máy trạm bằng việc sử dụng giao thức HTTP. Cấu trúc hoạt động của Web Server dựa
trên mơ hình client/server và sử dụng giao thức HTTP trong việc truyền dữ liệu. Các web
server thông thường là một phần trong bộ các phần mềm ứng dụng để phục vụ cung cấp dịch
vụ email, ftp … và xây dựng, xuất bản các trang web trong mạng Internet hay Intranet.
Có khá nhiều sản phẩm web server khác nhau, việc lựa chọn một web server phù hợp sẽ dựa
trên các tiêu chí đánh giá: Khả năng làm việc với hệ điều hành và các ứng dụng khác, khả
năng thiết lập các chương trình ứng dụng phía server, khả năng bảo mật dữ liệu, khả năng
xuất bản trang web, các công cụ hỗ trợ khi xây dựng các trang web.
7.2. Giới thiệu một số phần mềm Web Server
SunOne Web Server
SunOne cho phép phát triển rất nhiều lĩnh vực khác nhau trên các dịch vụ ứng dụng
và các dịch vụ web, dựa trên nền J2EE với hiệu năng và sự thực thi rất cao. Đây là một phần
mềm được phát triển theo các modul dựa trên các chuẩn về HTTP server, Java Message
Service (JMS), Enterprise Edition (J2EE).
Apache Web Server
Apache Web Server được xem như một sự nỗ lực rất lớn trong việc phát triển và
duy trì một Web Server mã nguồn mở cho các hệ điều hành, bao gồm Unix, Linux và Windows
NT. Đây là một Web Server hội tụ tất cả các tính năng: bảo mật, hiệu suất, mở rộng và phát
triển cung cấp các dịch vụ Web được đồng bộ trong các chuẩn Web hiện hành.
Các đặc điểm nổi bật của Apache:
- Ngày nay Apache có thể chạy kết hợp (hybrid) giữa chế độ đa sử lý và chế độ
đa chỉ lệnh.
- Hỗ trợ nhiều giao thức: Apache được phát triển để có thể phục vụ trên nhiều
giao thức khác nhau.
- Ngày càng hỗ trợ tốt hơn cho các hệ điều hành khác như BeOS, OS/2 và
Windows.
- Ngày càng phát triển và hoàn thiện các API (Application Program Interface).
- Hỗ trợ IPv6.
- Hỗ trợ nhiều modul dùng để lọc (Filtering) các dòng dữ liệu đến hoặc đi từ

50


Giáo trình thiết kế web

server.
- Hỗ trợ nhiều ngơn ngữ hiển thị các thông báo lỗi.
- Ngày càng đơn giản và dễ dàng thiết lập các tham số cho Web Server qua các
file cấu hình.
Internet Information Services (IIS)
IIS là dịch vụ thông tin Internet do Microsoft phát triển, sản phẩm này được tích hợp
cùng với hệ điều hành Windows. Phiên bản mới nhất hiện nay là IIS 6.0 được chạy trên hệ
điều hành Windows 2003. Trong IIS bao gồm nhiều dịch vụ dịch vụ như: dịch vụ Web Server,
dịch vụ FTP Server … Trong phần này ta chỉ đề cập đến dịch vụ Web Server. IIS Web Server
(gọi tắt là IIS) đáp ứng mọi yêu cầu chủ yếu của một Web Server như: độ tin cậy, hiệu năng,
khả năng theo dõi giám sát (quản trị), tính bảo mật và tính khả thi trong việc phát triển các dịch
vụ ứng dụng. Tất cả các cải tiến này là kết quả là sự kết hợp chặt chẽ cùng với các tính năng
mới
được
cung
cấp
trong
hệ
điều
hành
Windows.
Độ tin cậy và hiệu năng: Với một số các tính năng mới ngày càng làm cho IIS trở nên tinh cậy
hơn và hiệu suất hơn. Các tính năng này giúp khởi động lại IIS một cách nhanh chóng và dễ
dàng. Người quản trị có thể khởi động các dịch vụ Web mà không cần khởi động lại máy chủ.
Để tăng cường độ tin cậy, tính năng Application Protect cung cấp các khả năng để chạy các

ứng dụng chung (pool) hoặc riêng biệt (separate) trong các dịch vụ Web (Web services). Thêm
vào đó các tính năng mới như: CPU Throttlinh và Socket Pooling cũng tăng cường rất nhiều về
độ tin cậy. Đối với các người phát triển ứng dụng, hiệu suất của các web site được cải thiện
qua các tính năng mới chẳng lạn như scriptless Microsoft Active Server Pages (ASP)
processing, ASP self-tuning, và performance-enhanced ASP objects. Quản trị: IIS rất dễ dàng
trong việc cài đặt và duy trì. Một số tính năng mới hỗ trợ thêm cho người quản trị trong việc
duy trì bao gồm đơn giản hố q trình cài đặt, nhiều các thao tác bảo mật theo các thuật có
sẵn giúp người quản trị thực hiện một cách dễ dàng, có khả năng theo dõi thời gian sử lý, cũng
như rất linh hoạt trong việc quản trị từ xa, và cho phép khởi tạo các thông báo lỗi theo ý tưởng
của người quản trị.
Bảo mật: IIS bổ sung thêm các chuẩn hỗ trợ các giao thức bảo mật trên các chuẩn
công nghiệp quan trọng bao gồm: Digest Authentication, Server Gated Cryptography, Kerberos
v5 authentication protocol, Transport Layer Security, and Fortezza. Thêm vào đó có các thuật
thao tác mới có sẵn, giúp dễ dàng hơn cho người quản trị thiết lập và cấu hình bảo mật cho
website. Mơi trường ứng dụng: Các người phát triển ứng dụng có thể dễ dàng phát triển các
ứng dụng của mình dựa trên các cơng nghệ mới được phát triển và tích hợp cùng với hệ thống
như dịch vụ Active Directory hoặc COM+... Thêm vào đó các cải tiến trong IIS ASP đã cải thiện
rất nhiều trong việc điều khiển các luồng dữ liệu cũng như bắt lỗi giúp người phát triển phát
triển các ứng dụng của mình một cách rất hiệu quả và linh hoạt.
7.3 Phương thức chuyển tải hệ thống Web sites lên Server mạng LAN, mạng WAN bằng
phần mềm IIS
7.3.1 Cài đặt Internet Information Services
IIS thường được cài đặt mặc định cùng với hệ điều hành Windows (NT Server hoặc Windows
2000 Server), tuy nhiên người quản trị có thể thể lựa chọn để bổ sung hoặc loại bỏ các modul
không cần thiết. Tuy nhiên người quản trị cần phải hoạch định các các yêu cầu cũng như khả
năng phát triển và mở rộng của web server trước khi thao tác.
Lưu ý: Trong phần này ta thực hiện việc cài đặt và quản trị IIS 5.0 trên hệ điều hành Windows
2000 Advanced Server.
Việc cài IIS có thể thao tác theo các thao tác sau:
+ Start/Settings/Control Panel.

+ Nhấn đúp chuột trái vào mục Add/Remove Programs.
51


Giáo trình thiết kế web

+ Nhấn vào biểu tượng Add/Remove Windows Components. Một cửa sổ
hiện ra cho phép bạn lựa chọn cài đặt thêm hoặc loại bỏ các modul cùng
với hệ điều hành.
+ Chọn mục Internet Information Services IIS (Xem hình 8.1)
Chú ý: IIS bao gồm các modul thành phần:
+ Common Files: Đây là các file yêu cầu cho IIS, và các file này được dùng cho nhiều
modul thành phần khác nhưng thông thường không cài đặt là một modul độc lập.
+ Documentation: Là các tài liệu và ví dụ để người quản trị tham khảo. + File Transfer
Protocol (FTP) Server: Modul thành phần này thiết lập một FTP Site (FTP Server), dùng để
upload và download các file. + FrontPage 2000 Server Extension: cho phép quản trị các web
site thông qua Microsoft FrontPage và Visual InterDev.
+ Internet Information Services Snap-In: Một giao diện quản trị IIS, được dùng trong
MMC (Microsoft Management Console). Qua giao diện này người quản trị có thể dễ dàng thiết
lập, thay đổi và cấu hình
các tham số cho web site.
+ Internet Services Manager (HTML): Một giao diện quản trị IIS qua giao diện Web.
+ NNTP Service.
+ SMTP Service.
+ Visual InterDev RAD Remote Deloyment Support: Cho phép triển khai từ xa các ứng
dụng trên Web Server.
+ World Wide Web Server: hỗ trợ việc truy cập các web site.

Hình 7.1: Lựa chọn để cài đặt IIS
Cài đặt mặc định (Typical Install)

IIS mặc định cài đặt các modul: Common Files, Documentation, Internet Information
Services Snap-In, World Wide Web Server. Để cài đặt mặc định trong cửa sổ cài đặt (Windows
Components Wizard) lựa chọn Internet Information Services (IIS), rồi nhấn vào nút Next để tiếp
tục. Toàn bộ modul đã ngầm định sẽ được cài đặt.
Cài đặt tuỳ chỉnh (Custom Install)
Để cài đặt tuỳ chỉnh trong cửa sổ cài đặt nhấn vào nút Detail. Các modul sẽ được liệt
kê cho phép bạn lựa chọn chi tiết các modul để cài đặt. Sau khi lựa chọn xong, nhấn vào nút
Next để tiếp tục, toàn bộ các module mà bạn lựa chọn sẽ được cài đặt. Vì trong giáo trình này
ta đề cập tới Web Server nên bạn phải chọn modul World Wide Web Server.

52


Giáo trình thiết kế web

Hình 7.2: Chi tiết các modul trong IIS
Lưu ý: Một số điều trước khi cài đặt:
- Nên cân nhắc các modul để cài đặt, không nên cài đặt các modul không cần thiết.
- Nên cài IIS trên một máy chủ riêng (Standalone Server).
- Nên cài đặt IIS trên một máy chủ mà máy chủ không phải hỗ trợ bất
kỳ dịch vụ nào khác.
- Nên loại bỏ các giao thức khơng cần thiết.
Trong q trình cài đặt Windows sẽ tự động cài đặt và cấu hình các module.

53


Giáo trình thiết kế web

Hình 7.3: Cài đặt IIS

7.3.1 Quản trị Internet Information Services (IIS)
7.3.1.1 Cấu hình Internet Information Services
+ Thiết lập một Web Site mới
Để thiết lập một web site mới yêu cầu đầu tiên mà cũng là tối thiểu một người quản trị cần biết
thông tin về về web site bao gồm:
- Miêu tả web site: đây là thông tin giúp người quản trị nhận biết và phân
loại các web site trên máy chủ mình quản trị.
web site
header):
thường
nhiều

Tiêu đề của
(host
Thơng
có thể có
tiêu
đề
hoặc
tên
miền
ánh xạ vào
web site.
Địa chỉ IP:
Là địa chỉ
IP của card
mạng dùng

nhiều
cùng

một
-

để phục vụ web site.
- Cổng truy cập (Port Number): Giá trị mặc định là 80, với một số web site vì các
mục đích bảo mật người quản trị có thể thay đổi giá trị này.
- Thư mục gốc: Mỗi Web site có một thư mục gọi là thư mục gốc (home directory),
thư mục này là duy nhất. Trong thư mục gốc này bao gồm toàn bộ các file và các
thư mục hoặc thư mục ảo liên quan đến web site này.
Bạn có thể tạo một Web site mới theo nhiều cách, qua các câu lệnh (command) hoặc qua giải
thuật (wizard) với giao diện đồ hoạ mà chỉ cần vài lần nhấn chuột.
+ Start/Programs/Administrative Tools/Internet Service Manager
+ Bấm chuột phải tên máy chủ Web Server. Chọn New/Web Site
+ Tại cửa sổ Web Site Creation Wizard, nhấn vào nút Next để tiếp tục.

Hình 7.4: Lựa chọn Web Site Creation Wizard để tạo web site mới

54


Giáo trình thiết kế web

Hình 7.5: Web Site Creation Wizard
+ Điền tên miêu tả của web site cần khởi tạo: Ví du: mycompany.com.vn

Hình 7.6: Dùng Web Site Creation Wizard để tạo web
site mới
55



Giáo trình thiết kế web

+ Ấn nút Next để tiếp tục. Tiếp theo xin điền địa chỉ IP, số hiệu cổng, cũng như tiêu đề
của web site (host header).

Hình 7.7: Dùng Web Site Creation Wizard để tạo web site mới
+ Tiếp theo chọn thư mục gốc của web site

Hình 7.8: Dùng Web Site Creation Wizard để tạo web site mới
+ Lựa chọn các quyền đối với thư mục chủ (home directory)

56


Giáo trình thiết kế web

Hình 7.9: Dùng Web Site Creation Wizard để tạo web site mới
+ Nhấn Next để hoàn thành việc khởi tạo web site mới.

Hình 7.10: Web Site Creation Wizard thơng báo hồn thành việc khởi tạo
+ Tạo thư mục ảo
Về bản chất việc tạo thư mục ảo là là ánh xạ một thư mục vật lý trong
máy thành một
thư
mục con tương
đối
của thư mục
hiện
tại. Với cách ánh
xạ

này giúp người
quản
trị có thể linh
hoạt
hơn trong việc tổ
chức
các thư mục
trên máy chủ.
Người
quản trị có thể
thiết
lập các thư mục
ảo là
thư mục con của
bất kỳ thư mục
nào:
thư mục chủ (home document), thư mục con hoặc thư mục
ảo bất kỳ.
Để tạo một thư mục ảo, trong cửa sổ IIS Snap-In, nhấn chuột phải vào
thư mục cần thêm thư mục ảo, chon New/Virtual Directory. Tại menu cửa sổ
Virtual Directory Creation Wizard nhấn nút Next để tiếp tục.

57


Giáo trình thiết kế web

Hình 7.11: Dùng Virtual Directory Creation Wizard để tạo thư mục ảo
+ Điền tên bí danh (Alias name): Tên này được Web Server “hiểu” như
tên của thư mục con của thư mục hiện tại.


Hình 7.13: Dùng Virtual Directory Creation Wizard để tạo thư mục ảo
+ Chọn thư mục trên ổ đĩa muốn ánh xạ theo tên ảo này

Hình 9.15: Dùng Virtual Directory Creation Wizard để tạo thư mục ảo

58


Giáo trình thiết kế web

+ Đặt quyền truy cập cho thư mục ảo này

Hình 7.16: Dùng Virtual Directory Creation Wizard để tạo thư mục ảo
+ Nhấn vào nút next để hồn thành việc khởi tạo một thư mục ảo

Hình 7.17: Virtual Directory Creation Wizard thơng báo hồn thành việc khởi tạo
Sau khi hoàn tất cài và thiết lập IIS chúng ta có thể bắt đầu việc chạy và kiểm thử trang web
trên máy nội bộ hoặc trên mạng Lan.
Phương thức chuyển tải hệ thống website lên mạng internet.
Để thực hiện việc chuyển tải hệ thống website lên mạng đầu tiên chúng ta cần phải có
khơng gian lưu trữ trên mạng internet và tên miền cho website của bạn.Không gian máy chủ
bạn có thể liên hệ với các nhà cung cấp dịch vụ để mua hoặc tìm trên mạng những máy chủ
cho phép chúng ta đăng ký những khoản không gian miễn phí.Sau khi đã có khơng gian trên
inetnet,nhà cung cấp khoản khơng gian đó sẽ cung cấp cho bạn một tên miền hoặc bạn có thễ
mua tên miền ví dụ như:www.tenban.com
Việc tiếp theo của chúng ta là sử dụng phần mềm hỗ trợ giúp chuyển tải hệ thống
website của bạn lên khơng gian đó.
Phần mềm CutFTP:


59


Giáo trình thiết kế web

Hỉnh 7.19: Phần mềm CutFTP
Sau khi chúng ta có khoản khơng gian trên mạng chúng ta sẽ có tài khoản và mật khẩu
để truy cập vào khoản khơng gian đó.Hãy sử dụng tài khoản và mật khẩu đó để đăng nhập vào
chương trình Cutftp(sau khi cài và khởi động chương trình này từ máy tính nối internet).Khi
đăng nhập thành cơng giao diện chương trình sẽ như trên hình.Một bên là thư mục trên
máy ,phần cịn lại là thư mục trên mạng.Đến đây chúng ta thực hiện việc upload như copy
trong máy tính.Phần mềm này sẽ giúp bạn upload dữ liệu lên không gian của bạn.
Bài tập chương 7: Sinh viên tham khảo bài tập 1 và 2 trang 140

60


Giáo trình thiết kế web

BÀI 8
THIẾT KẾ WEB THEO CHỦ ĐỀ
Mã bài : ITPRG13.8
Giới thiệu 
Đây là công đoạn cuối cùng của chu trình thiết kế ra một website,sau khi đã hồn
thành hồ sơ thiết kế,chúng ta sẽ sử dụng một phần mềm giúp đưa các đối tượng từ hồ
sơ vào trang web,bài học này sẽ giúp chúng ta sử dụng thành thạo các công cụ trong
phần mềm giúp việc thiết kế nhanh chóng và hiệu quả hơn.
Mục tiêu thực hiện
-Xây dựng trang Web từ hồ sơ thiết kế bằng một phần mềm thiết kế WEB như
Dreamwaver hoặc Frontpage

-Nắm vững và sử dụng được các đối tượng trên phần mềm.
Nội dung chính
8.1 Bắt đầu với Frontpage
Chào mừng các bạn khi đến với Microsoft FrontPage, một bộ công cụ tạo và
điều hành web site một cách lí tưởng mà người thiết kế khơng nhất thiết phải biết
những kiến thức về lập trình, FrontPage có mọi thứ mà bạn cần để thiết kế và xây
dựng trang Web và Web site cho bạn.
FrontPage bao gồm FrontPage Explorer, tại đây, bạn có thể tạo, thiết kế, quản lí tồn
bộ Web site và FrontPage Editor, nơi mà bạn có thể tạo và sửa đổi các trang Web mà
không cần phải biết ngôn ngữ đánh dấu siêu văn bản (HTML). FrontPage bao gồm
nhiều tính năng hỗ trợ cho việc tạo Web site một cách dễ dàng nhất, chẳng hạn như
bộ thư viện thiết kế đồ hoạ chuyên nghiệp, một tập hợp đầy đủ các các wizard và các
mẫu để tạo trang và FrontPage web, những phần tử active cung cấp những chức năng
và hàm phức tạp mà không cần lập trình, và một danh sách các nhiệm vụ dành cho
việc kiểm sốt và tạo FrontPage web.
Bạn có thể dùng FrontPage Explorer để tạo cấu trúc của Web site, áp dụng các bố cục
đồ hoạ cho trang, tổ chức các file và folder, nhập và xuất các file, kiểm tra và so sánh
các siêu liên kết, quản trị quyền truy nhập, giám sát các nhiệm vụ, và đặc biệt là cho phép
tiếp cận với FrontPage Editor để thiết kế và sửa đổi nội dung của trang Web. Bạn có thể
dùng FrontPage Explorer để xuất bản các trang web trên máy tính của mình, trên một một
tổ chức intranet hoặc World Wide Web.

61


Giáo trình thiết kế web

FrontPage Editor hỗ trợ cho bạn việc tạo, thiết kế và sửa đổi các trang Web. Chẳng hạn
như đưa text, ảnh, bảng, các mẫu biểu và các phần tử khác nữa vào trang web,
FrontPage Editor sẽ hiển thị chúng như khi chúng xuất hiện trên trình duyệt. Mặc dù là

một cơng cụ có tính năng hồn hảo, FrontPage Editor lại rất dễ dàng cho việc sử dụng
bởi vì nó trở nên thân thiện khi có giao diện của một trình xử lí văn bản. Bạn khơng cần
phải học ngôn ngữ HTML để sử dụng FrontPage Editor bởi vì nó có thể tạo mọi thẻ
HTML cho bạn, các thẻ mở rộng như style-sheet, frame, các điều khiển ActiveX.

Nếu bạn muốn soạn trực tiếp các mã lệnh HTML, bạn có thể sử dụng chế độ view
HTML của FrontPage. Trong chế độ này, bạn có thể vào text, soạn các thẻ HTML và
các mã kịch bản, sử dụng các lệnh chuẩn của trình soạn thảo văn bản như cắt, dán, tìm
kiếm và thay thế.
FrontPage là một thành viên trong họ sản phẩm của Microsoft Office và chia sẻ nhiều
tính năng của Microsoft Word và Microsoft Excel, chẳng hạn như thư viện ClipArt, kiểm
tra lỗi chính tả và tạo bảng một cách dễ dàng. Ngồi ra, FrontPage cũng quản lí các
siêu liên kết được tạo trong tài liệu Microsoft Office 2000. Dưới đây là một vài đặc điểm
của FrontPage Editor:
- Bạn có thể tạo một trang HTML mơi dựa trên các wizard và template. FrontPage
Editor đưa ra nhiều lựa chọn về định dạng trang, và bạn có thể tạo mẫu thiết kế
của chính mình.
- Bạn có thể áp dụng một hay nhiều các bố cụ đồ hoạ của FrontPage, chúng được
tạo bởi các nhà thiết kế chuyên nghiệp, tạo cho bạn các trang web sống động và
hấp dẫn. Bạn cũng có thể đưa vào và thiết kế viền trang, chèn các thanh định
hướng liên kết, giúp người sử dụng lướt trên Web site của bạn.
- Bạn cũng có thể mở bất kì file HTML nào trong FrontPage Editor và tồnbộ tag
của chúng sẽ được dịch và hiển thị trên màn hình của FrontPage hoặc mở các
file với nhiều khn dạng khác nhau và FrontPage Editor tự động chuyển đổi
chúng thành HTML, chẳng hạn như Microsoft Word, Microsoft Excel,
WordPerfect,...FrontPage Editor tự động nhận ra các siêu liên kết từ tài liệu
Microsoft Office 2000.
- Bạn có thể chèn text trong mọi style HTML, tạo các danh sách đa cấp, thay đổi
kích thước và màu sắc của text, áp dụng các khuôn dạng cơ bản cho text. Sử
dụng style sheet, bạn có thể điều khiển lề, khoảng cách giữa các dòng, màu sắc,

font và kích thước của chữ.
- Bạn có thể đưa các ảnh với bất kì định dạng nào, và FrontPage Editor tự động
chuyển đổi chúng sang dạng GIF hoặc JPEG. Kích đúp vào ảnh, bạn có thể sử
dụng chương trình tạo ảnh tương ứng. Bạn cũng có thể tạo ánh xạ ảnh bằng
cách thêm các Hotspot trên ảnh chứa siêu liên kết. Sử dụng các lệnh sửa đổi
62


Giáo trình thiết kế web

ảnh, bạn có thể cắt xén, quay, thay đổi kích thước, tạo ảnh đen trắng, tạo độ
sáng tối cho ảnh. FrontPage cũng hỗ trợ một thư viện phong phú ClipArt, các
ảnh, và các video clip.
Bạn có thể tạo form chứa các trường text, check box, radio button, thực đơn drop-down,
và push button. Khi bạn tạo form, điều khiển form mặc định tự động cất thông tin trên
form vào một file hoặc gửi chúng tới một địa chỉ e-mail. Bạn có thể chọn một điều khiển
từ tập các điều khiển form của FrontPage hoặc thêm điều khiển của mình cho form.
Sử dụng các lệnh về tạo bảng, bạn có thể tạo, chèn hàng và cột, dóng lề cho chúng, tạo
màu nền,...
Bạn có thể thêm các chức năng mạnh vào trang bằng cách chèn các cấu thành
FrontPage. Chúng sẽ thêm các khả năng tương tác chẳng hạn như thanh định hướng,
nhóm thảo luận, tìm kiếm, và điều khiển form. Ví dụ, cấu thành mục lục (Table of
Contents) tự động tạo outline của FrontPage web với các siêu liên kết đến từng trang...
Bạn có thể tạo một trang frame mới, thay đổi hiển thị của chúng và gán trang khởi tạo
cho mỗi frame. FrontPage hiển thị trang frame của bạn dưới dạng những gì bạn nhìn
thấy là những gì bạn có (WYSIWYG).
Bạn có thể chèn các điều khiển ActiveX, plug-ins, và các Java applet trên FrontPage
Editor. Bạn cũng có thể tiếp cận tới một phiên soạn các kịch bản, tạo và chèn các kịch
bản JavaScript và VBScript.
A. Không gian làm việc FrontPage

Không gian làm việc của FrontPage bao gồm hai phần chính trên màn hình giao diện
của nó, FrontPage Explorer và FrontPage Editor. Cả hai bao gồm:
- Thực đơn
- Thanh cơng cụ
- Màn hình soạn thảo
- Các vùng điều khiển
FrontPage Explorer chỉ cho bạn các chế độ hiển thị khác nhau của FrontPage web:
-

Folders View
All Files View
Navigation View
Hyperlinks View
Hyperlink Status View
Themes View
Tasks View

Màn hình làm việc của FrontPage Editor:
63


Giáo trình thiết kế web

Hình 8.1:Khơng gian làm việc của Frontpage
Menu (Thực đơn)
Các thực đơn cơ bản của FrontPage bao gồm:
- File: các lệnh làm việc với file và tổng thể trên trang Web.
- Edit: Các lệnh soạn thảo thông dụng (tương tự các lệnh trong mọi hệ soạn thảo
văn bản khác ngoại trừ một vài lệnh đặc thù).
- View: Hiển thị các thanh công cụ.

- Go: Các lệnh sắp xếp các đối tượng đồ họa tương đối với nhau.
- Insert: Chèn các đối tượng vào trang Web.
- Format: Các lệnh tạo khuôn.
- Tools: Các công cụ và lựa chọn.
- Table: Các lệnh tạo bảng trên trang.
- Frame: Các lệnh làm việc với Frame.
- Windows, Help: Các thực đơn truyền thống của Windows.
Thanh ToolBar
FrontPage có một số ToolBar có thể hiện hoặc ẩn trên màn hình.
Các lệnh trong thực đơn View dùng để làm ẩn hoặc hiện các Toolbar này.
Một hình ảnh đầy đủ của các ToolBar
64


Giáo trình thiết kế web

Hình 8.2:Hình ảnh đầy đủ của Toolbar
Màn hình soạn thảo
Màn hình soạn thảo nằm ở trung tâm. FrontPage có hai chế độ soạn thảo cho mỗi trang
(file) Web: Normal và HTML.
Chế độ Normal là chuẩn và là mặc định của FrontPage. Trong chế độ HTML, FrontPage
cho phép làm việc trực tiếp với các Tag theo chuẩn của HTML. Kết hợp hài hòa giữa hai
chế độ soạn thảo này sẽ tạo ra các trang Web vừa ý.
Chế độ Preview cho phép xem trực tiếp kết quả của trang Web trên các browser mà
khơng cần phải có thêm các phần mềm này.
Các vùng điều khiển
Bao gồm các nút điều khiển cửa sổ, thanh cuốn và dòng trạng thái.
Các thành phấn

Mô tả


Page Tab

Dùng để chọn trang làm việc.

Title Bar

Hiển thị tên cuả trang Web và vị trí cuả trang
trong Web site.

Menu Bar

Chứa các thực đơn lệnh.

Ask a Question Box

Hổ trợ người sử dụng khi cần hướng dẫn thực
hiện các thao tác

Close Page

Đóng trang hiện hành.

Scroll Bars

Dùng để di chuyển trên trang hiện hành.

Status Bar

Thanh trạng thái, thường dùng để quan sát đích

cuả các liên kết.

Page View Panes

Các khung hiển thị trang: Gồm 3 chế độ normal,
html và preview.

Progress Indicator

Chỉ thị cuả tiến trình.

Estimated Download Time

Thời gian tải trang ước lượng.

65


Giáo trình thiết kế web

Task Pane

Khung tác vụ

Thanh cơng cụ Standard và
Các thanh công cụ thường sử dụng.
Formatting
Views bar

Thanh chuyển đổi chế độ views.


B. Các lệnh đơn giản của FrontPage
Các nhóm lệnh sau trên trang soạn thảo FrontPage có ý nghĩa và kết quả tương tự như đối
với các phần mềm soạn thảo khác (ví dụ WinWord, Lotus WordPro, ....).
Các lệnh làm việc với tệp (file)
Các lệnh trên thực đơn File hoặc trên Standard Toolbar: New, Open, Close, Save,
Save As, Page Setup, PrintPreview, Print.
Các lệnh soạn thảo
Các lệnh soạn thảo cơ bản trên thực đơn Edit: Copy, Cut, Paste, Clear (delete),
Select All, Find, Replace
C. Ngôn ngữ HTML và tổng quan về trang Web
Thơng tin chính mà chúng ta truy nhập trên dịch vụ World Wide Web là các trang Web.
Trang là tài liệu cơ bản trên dịch vụ World Wide Web. Chúng được viết theo một ngôn
ngữ gọi là ngôn ngữ đánh dấu siêu văn bản Hypertext Markup Language –HTML. Một
trang HTML bao gồm text và các tag của HTML được nhúng trong tài liệu, các tag này
cung cấp thông tin về cấu trúc trang, hình thức hiển thị và nội dung của nó. Thực chất,
một tài liệu HTML là một file được lưu dưới dạng .htm hoặc .html mà nội dung của nó
tn theo ngun tắc của ngơn ngữ HTML.
Ngôn ngữ HTML (Hyper Text Markup Language) là tập hợp các nguyên tắc và qui định
dùng để mô tả và thể hiện các trang Web. Các qui tắc này được thể hiện thành những
"Tag" được chèn vào các vị trí thích hợp của trang Web. Các tag này sẽ qui định cách
mà dữ liệu sẽ hiển thị trên trình duyệt. Một tag HTML bao gồm hai phần: phần mở và
phần đóng tag (phần này là tuỳ chọn).
Dữ liệu nằm sau phần mở sẽ chịu ảnh hưởng của tag, có nghĩa là nó sẽ xuất hiện với
hiệu ứng phụ thuộc vào các thuộc tính đi kèm với tag.

66


Giáo trình thiết kế web


Một vài tag HTML xây dựng một đặc tả về cấu trúc các phần tử của trang, chẳng hạn
như bảng và mẫu biểu, những phần tử này được tạo bởi từ nhiều phần tử. Trình duyệt
Web (chương trình hiển thị các trang Web) sử dụng những thông tin này để nhận ra cách
mà dữ liệu hiển thị dựa trên mối liên hệ giữa các phần tử này. Ví dụ, tag HTML đặc tả bảng
miêu tả số dịng, số cell trên một dịng,...

Cáctag
tagmiêu
miêutảtả
Các
hàng,cột
cộtcủa
của
hàng,
bảng
bảng

Hình 8.3:Hiển thị của tag bảng trên trình duyệt
Các tag HTML cũng cung cấp các thuộc tính đi kèm với giá trị. Ví dụ, tag dùng để chèn
ảnh tại trang có một thuộc tính chỉ ra tên của file ảnh cần chèn. Một vài thuộc tính cung
cấp các giá trị tham chiếu về sự hiển thị của phần tử trên trang. Ví dụ, bảng có những
thuộc tính mơ tả độ dày và khoảng cách giữa các ô...

67


Giáo trình thiết kế web

Để trợ giúp bạn thiết kế trang được nhanh chóng, FrontPage hỗ trợ hơn 50 bài trí thiết kế

chuyên nghiệp, chúng sẽ giúp bạn trang trí những trang Web của mình bằng những phần
tử có sẵn như bullet, font, ảnh, thanh định hướng...
D. Tạo trang mới
Tại FrontPage Editor, thực hiện lệnh File/New. Hiển thị hộp hội thoại New.
Chọn Page, chọn template hoặc wizard để tạo trang mới, mẫu thu nhỏ của chúng
xuât hiện trên vùng Preview.

Mẫu tương
ứng xuất hiện
trên Preview

Kích OK.
Hình 8.4:Khung Preview khi tạo trang mới.
E. Cất nội dung trang hiện thời vào file
1. Tại FrontPage Editor, thực hiện lệnh File/Save As.
2. Kích nút File

.

3. Tại hộp hội thoại Save As, chọn ổ đĩa và thư mục để cất trang.

68


Giáo trình thiết kế web

Chọn vị trí để cất
nội dung trên trang

Hình 8.5:Chọn ổ đĩa thư mục để cất trang

4. Gõ tên file trong hộp File Name và kích OK.
5. Kích OK khi xuất hiện hộp hội thoại với danh sách các phần tử như tranh ảnh, âm
thanh, các điều khiển ActiveX và những phần tử khác chứa trong trang.
F. Cất nội dung của trang tại FrontPage web hiện thời
Nếu trang được mở từ web hiện thời hoặc từ World Wide Web, tại FrontPage
Editor, thực hiện lệnh File/Save. Nếu trang được mở từ một file, để cất dưới tên
khác, thực hiện lệnh File/Save As.
Nếu là lần đầu cất trang tại FrontPage web, gõ tiêu đề trang tại Title.
Gõ URL tương đối tới gốc của FrontPage web đang mở hiện thời, hoặc chấp nhận
URL mặc định của FrontPage. Ví dụ, nếu bạn gõ tại URL là music/index.htm,
trang sẽ được cất tại folder Music là con trực tiếp của folder gốc của FrontPage
web hiện thời và kích OK.

Vào tiêu đề và
URL tương đối
của trang

Hình 8.6:Cất nội dung của trang tại FrontPage web hiện thời

69


Giáo trình thiết kế web

Kích OK khi xuất hiện hộp hội thoại với danh sách các phần tử như tranh ảnh, âm
thanh, các điều khiển ActiveX và những phần tử khác chứa trong trang.
G. Tạo trang mẫu
Trong FrontPage Editor, bạn có thể cất một trang dưới dạng mẫu. Sau đó, mẫu này sẽ được
hiển thị cùng với mẫu trang FrontPage chuẩn tại hộp hội thoại New.
Thực hiện lệnh File/Save As.

Chọn As Template.
Tại hộp hội thoại Save As Template, gõ tiêu đề trang tại Title, tên trang tại Name,
đặc tả ngắn cho trang tại Description.
Kích OK.
H. Mở một trang trong FrontPage Editor
Thực hiện lệnh File/Open.
Tại hộp hội thoại Open, thực hiện một trong các bước dưới đây:
- Mở một trang trên FrontPage web hiện tại, kích chọn một trang. Để xem nội dung
của folder, kích đúp vào folder này và chọn trang trong đó. Kích OK.
- Mở một trang từ hệ thống file của bạn, kích nút File, và chọn file mà bạn muốn từ
hộp hội thoại Select File.
- Mở một file từ World Wide Web, chọn nút World Wide Web
. FrontPage khởi
tạo trình duyệt Web, chuyển đến trang mà bạn muốn mở và trở lại ứng dụng
FrontPage. Vị trí của trang mà bạn đã xem được hiển thị tại URL của hộp hội
thoại Open. Kích OK để mở trang.
I. Thuộc tính trang
Thực hiện lệnh File/Page Properties. Xuất hiện hộp hội thoại

Hình 8.7:Thuộc tính trang
Các tuỳ chọn của hộp hội thoại Page Properties:
70


Giáo trình thiết kế web

Tại General:
- Location: URL đầy đủ của trang. Nếu trang được mở từ một file, URL bắt đầu
bởi “File://”. Nếu trang chưa được cất, URL sẽ là “FrontPage:///Editor/New
Page n.htm.”

- Title: Tiêu đề của trang.
- Base Location: URL cơ sở của trang.
- Default Target Frame: Nếu bạn muốn mọi đích liên kết của trang được hiển thị
trên một frame khác của một trang frame, gõ tên của đích frame mặc định,
hoặc kích vào nút Target Frame để chọn frame đích.
- Nếu siêu liên kết khơng được đặc tả tới một frame đích khác, trang đích của
siêu liên kết sẽ được hiển thị tại frame đích mặc định.
Background Sound:
- Location: Gõ tên của file âm thanh nền cho trang. Trình duyệt Web sẽ chạy file
này khi trang được hiển thị. Bạn có thể đặc tả một file trên FrontPage web
hiện tại hoặc từ hệ thống file của bạn.
- Browse: Kích nút này để duyệt file trong FrontPage web hiện tại hoặc tại hệ
thống file.
- Loop: Gõ số lần lặp lại của file âm thanh này.
- Forever: Chọn để đặt chế độ chạy file âm thanh cho đến khi trang khơng được
hiển thị nữa.
- Style: Kích nút này để thay đổi thuộc tính style sheet cho phần tử được chọn.
Khuôn dạng của Style-sheet cho phép điều khiển khoảng cách, lề, font, màu
sắc mà với những thuộc tính của HTML cơ bản, bạn không thể điều khiển
được.
Lựa chọn trên Margin
Đặc tả các thuộc tính để điều khiển lề của trang. Nếu trang hiện thời sử dụng chung
đường viền, lề thiết lập được áp dụng cho những cạnh chung đường viền (thay cho
cạnh của trang).
Specify Top Margin: Chọn lề trên và lề dưới cho trang bằng điểm.
Specify Left Margin: Chọn lề trái và lề phải cho trang bằng điểm.
Lựa chọn Custom
Tại đây thiết lập các tag meta (biến hệ thống và biến được định nghĩa bởi người sử
dụng), chúng sẽ có ảnh hưởng tới trang hiện thời.
System Variables (HTTP-EQUIV): Phần này liệt kê các tag meta dùng thuộc tính HTTPEQUIV như một phần cặp tên và giá trị. Những tag này cung cấp những giới thiệu đặc

biệt tới trình duyệt, chẳng hạn như thời hạn hiển thị hoặc nạp lại của trang.
- Name: Tên của tag
- Value: Giá trị tương ứng với tag
- Add: Kích nút này để thêm tag mới
71