5/10/2013
1
Mở đầu về thiết kế web
Nội dung
 Nhắclạimộtsố khái niệm
 Phân loạitrangweb
 Một số bước chính trong phát triển website
 Công bố website trên internet
 Mộtsố nguyên tắc quan trọng trong thiếtkế web
 Cấu trúc website và bố cụctrangweb
 Tiếng Việt trong trang web
Nhắclạimộtsố khái niệm
Nhắc lại một số khái niệm
 Mạng và giao thức
 Địa chỉ IP: IP Address
 Tên miền: Domain Name
 Máy chủ -máy phục vụ: Server
 Máy khách: Client
 Cổng dịch vụ: Service Port
5/10/2013
2
Mạng và giao thức
 Mạng máy tính:
 Computer Network:
 Hệ thống các máy tính
được kết nối với nhau
nhằm trao đổi dữ liệu.
 Giao thức: Protocol:
 Tập hợp các quy tắc được
thống nhất giữacácmáy
tính trong mạng nhằm

dịch vụ cho máy tính khác.
 Thường được cài các phần mềm
chuyên dụng để có khả năng cung cấp
 Mộtmáychủ có thể dùng cho mộthay
nhiềumục đích. Tên máy chủ thường gắn
vớimục đích sử dụng.
Ví dụ:
–
File server
–
Application server
–
Mail server
–
Web server
 Thựctế: các máy chủ có cấu hình cao, khả
năng hoạt động ổn định
5/10/2013
3
Máy khách: Client
 Máy khai thác dịch vụ củamáy
chủ Vớimỗidịch vụ,thường có
các phầnmềm chuyên biệt để
khai thác
 Một máy tính có thể vừalà
client vừalàserver
 Một máy tính có thể khai thác
dịch vụ của chính nó.
Cổng dịch vụ: Service Port
–Làsố  [0; 65535] xác định dịch vụ

 Web là gì?
–Làcácdịch vụ
phân tán
cung cấp thông
tin
multimedia
dựatrên
hypertext
 Các thành phầncủaweb
–Web Page
–Web site
– Uniform Resource Locator (URL)
– Web Server, Web Browser
Trang web, web site, World Wide Web
Trang web: Web page:
–Làmộttrangnội dung
–Cóthểđượcviếtbằng nhiềungônngữ khác nhau nhưng
kếtquả trả về client là HTML
Web site:
–Tậphợpcáctrangwebcónộidungthống nhấtphụcvụ
cho mộtmục đích nào đó
World Wide Web (WWW):
-Tậphợp các web site trên mạng internet.
Chuỗi định vị tài nguyên (địa chỉ): URL
(Uniform Resource Locator)
 Tài nguyên: file trên mạng
 URL: Xác định vị trí và cách khai thác file
 Cấutrúc:
giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file
Ví dụ:

thường dùng các công
cụ trựcquan để tạo ra
trang web
–Web động:
• Khó phát triển hơn
• Tương tác mạnh
• Sử dụng nhiều ngôn ngữ khác
nhau
• Thường phải viết nhiều mã lệnh.
Mã lệnh được thực thi trên server,
gửi kết quả là HTML về NSD
5/10/2013
6
So sánh
 Trang Web tĩnh:
-Có nội dung không thay đổi trên Browser, chỉ thay đổi khi nhà
thiết kế thay đổi nội dung trình bày
-Thường có tên mở rộng là .html, .htm bao gồm các thẻ HTML
 Trang Web động:
-Có thể thay đổi nội dung trình bày trên Browser khi người sử
dụng triệu gọi chúng
-Thường được xây dựng từ ASP, JSP, PHP, ASP.NET
Một số bước chính trong
phát
triểnwebsite
Các bước thiết kế web
・ Các tiêu chuẩnthiếtkế web: Tương thích các
web browser, các hệ điều hành, các loạimàn
hình,…
・ Tiếntrìnhthiếtkế web

tương tác tức thời - mắt thấy tay làm")
Tiến trình thiếtkế web
1. Phân tích ý tưởng, mục tiêu, hoạch định kế
hoạch
2. Hoạch định cấu trúc website
3. Tạo các trang đơn và đưa nội dung vào
4. Thử nghiệm, kiểm tra và đánh giá
5. Tải lên server và thử nghịêm lầncuối
6. Duy trì hoạt động và quản lý website
Bước 1: Phân tích ý tưởng, mục tiêu,
hoạch định kế hoạch
 Xác định chính xác mục tiêu của trang này một cách ngắn
gọn.
Lập website này để làm gì? cung cấp gì cho user? cho user
làm gì trên website
 Xác định vấn đề giải quyết, chủ đề website
website thuộc loại gì?sẽ có những tính năng gì?
 Xác định người dùng
 Ai là user chính? họ thuộc tầng lớp nào? dự đoán về tốc
kết nối của user, HĐH, kích thước màn hình, tầnxuất truy
cập
 Liệt kê các nguồn tài nguyên
Trang thiết bị, công cụ phần mềm, trình độ chuyên môn của
mình, cáigìmìnhlàm, cáigìcầngiúp?
 Xây dựng bảng tiến độ thực hiện
5/10/2013
8
Bước 2: Hoạch định cấu trúc website
・ Phân loại trang web thiếtkế:
– Cá nhân

–Cần quan tâm đến vị trí, các thể hiện (có hay không
có hiệu ứng)
–Vị trí logo, định danh công ty phải cố định nhất quán
 Các trang thành viên
Thiếtkế giao diện-frame
5/10/2013
9
Thiếtkế giao diện- Table within a table Thiếtkế giao diện–cấutrúcphứctạp
Kiểuchữ, màu sắc
 Phông chữ phụ thuộcvàocácyếutố:
– Đặc điểm thông tin
– Độcgiả
– Trình duyệt, độ phân giải
–Ngônngữ sử dụng
 Gam màu thống nhấttrongtoànbộ Website
 Font tiếng Việt: Chỉ dùng Unicode
Hiểnthị thông tin tóm tắt–chi tiết
 Tóm tắt thông tin có một số lợi điểm:
– Đọcgiả có ít thờigianđể đọccáctàiliệutrênmàn
hình.
– Luôn có nhu cầumuốntìmphần thông tin chủ
định, không nên chia cắt quá nhỏ,tómlượcquángắn
 gây thấtvọng
–Hìnhthứcvàcáchtổ chức đồng nhất  kinh
nghiệmtìmkiếm, khám phá.
– Thông tin ngắngọn, súc tích thích hợpvớimàn
hình máy tính (bị giớihạntầm nhìn).
 Thông tin chi tiết chỉ khi đi vào một vấn đề,
nội dung cụ thể
5/10/2013

D:\10CDTH\PTTH
Tạo virtual Directory (tt) Tạo virtual Directory (tt)
 Dùng tên PTTH như tên một trang web với điều
kiện trong Documents của PTTH Properties phải
có chứa trang web đó.
5/10/2013
12
Bước 5: Tải lên server và thử nghịêm lầncuối
 Mua tên miền
 Tên miền= Tênwebsite
 Tên ngắn
 Gợinhớ
 Dễ đọc, không gây nhầm lẫn
 Thể hiện được tên công ty hoặc nhãn hiệu
chính củacông ty
 Thuê chỗ hosting
 Tảilênvàthử nghiệm
Mua tên miền
Thuê chỗ hosting
 Hệ điều hành
 Dung lượng
 Băng thông
 Ngôn ngữ hỗ trợ
 Hệ quảntrị CSDL hỗ trợ
 Email POP3
 SSL
 ・ …
Tên miền+ Hosting Free
 Các trang web trên
mạng cho free

• No FTP access
•
hoặc
www.freespaces.com/user
Tên miền+ Hosting Free
Đưa website lên mạng Internet

Cách I
: Dùng các tiện ích của nhà cung
cấp web hosting
 Vào www.freewebpage.org ->Login:
 Copy các file từ máy user lên máy chủ
Đưa website lên mạng Internet

Cách 2
: Dùng các chương trình FTP
 Dùng Core FTP Lite (WS FTP, FTP Cute,…)
5/10/2013
14
Đưa website lên mạng Internet
 Core FTP Lite:
 Menu:
 File->connect:
Đưa website lên mạng Internet
Thử nghịêm lầncuối
 Thử các trang bằng nhiềucáchkếtnối khác nhau.
 Thử các trang ở tình trạng mức độ truy cậpcao (giờ cao
điểm).
 Thử các trang với nhiều dạng người dùng khác nhau trên
nhiềuloại máy tính với màn hình khác nhau.

Mộtsố nguyên tắcquan
trọng trong thiếtkế web
Các nguyên tắc cơ bản
 Tổ chứcwebsite chặtchẽ và dễ sử dụng
 Website củabạncầncócấu trúc càng rõ ràng dễ
hiểu càng tốt. Điều quan trọng ở đây là phải làm sao
để khách hàng thấy được ngay các thông tin mà họ
hy vọng có thể thu được từ website của bạn

Sử dụng từ ngữ dễ hiểu
 Khi một người đến thăm website của bạn, có thể
anh ta chưa biết bạn là ai?. Bạn đang chào bán sản
phẩmgì?. Bạn phải giúp khách hàng hiểu rõ những
vấn đề này trong thờigianngắnnhất. Hãy dùng các
câu ngắn gọn, cô đọng và giữ kiểu thiết kế cố định
đối với tất cả các trang con.
Các nguyên tắc cơ bản

Dễ dàng khám phá các đường link
 Hãy tạo các đường link bằng chữ hay biểu tượng
ở tấtcả các trang con để mọi người có thể xem lại
hoặcxem tiếp mà không phải sử dụng đến nút
"Back" hay "Forward" củatrìnhduyệt.

Thờigiantảiweb phải nhanh
 Nhân tố thời gian là vô cùng quan trọng vì mọi
ngườithường không kiên nhẫn khi vào mạng. Nếu
trang củabạn phải mất thời gian quá lâu để tải về
thì khách hàng có thể nhấn chuột và bỏ đi
5/10/2013

 Khi nào thì bắt đầu? Bắt đầu từ đâu?
 Cần học những gì để thiết kế web?
-Thiết kế đồ họa, Thiết kế giao diện
-Thiếtkế thông tin
-Tạo các trang web vớiHTML
-Lập trình và quá trình tạomãkịch bản
-Truyền thông đa phương tiện
5/10/2013
17
Phầnmềmtrợ giúp
Thiết kế đồ họa
- Adobe Photoshop
- Adobe ImageReady
- Macromedia Fireworks
- Adobe Illustrator
-JASC Paint Shop Pro
Multimedia
- Macromedia Flash
- Adobe LiveMotion
- Apple Quicktime
- Apple Final Cut Pro
- Adobe Premiere
ASPNET PHP
ASP.NET
Web Matrix
PHP
PHP ZendStudio
Ngôn ngữ lập trình web
 Cầnhọcnhững gì?
 - HTML