bài giảng học phần thiết kế lập trình web chương 1 - gv. trần minh hùng

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

thực hiện trao đổi dữ liệu
được chính xác
 Ví dụ: TCP/IP, HTTP, FTP,…
Địachỉ IP: IP Address
 Xác định một máy tính trong mạng
dựa trên giao thức TCP/IP. Hai máy tính trong
mạng có 2 địa chỉ IP khác nhau
 Có dạng x.y.z.t (0 ≤ x, y, z, t ≤255)
 Ví dụ: 203.162.168.130: địa chỉ
máy chủ web của báo điện tử ViệtNamNet.
 Đặc biệt: địa chỉ: 127.0.0.1 (địachỉ loopback)
là địa chỉ của chính máy tính đang sử dụng
dùng để thử mạng
Tên miền: Domain Name
 Là tên được “gắn” với 1 địa chỉ IP.
 Máy chủ DNS thựchiệnviệc“gắn” (ánh xạ)
 Ở dạng văn bản nên thân thiện với con người
 Được chia thành nhiềucấp, phân biệtbởidấuchấm
(.) Đánh số cấplầnlượttừ phảisangtráibắt đầutừ
1.
 Cấp lớn hơn là con của cấp nhỏ hơn
 Ví dụ: xxxx.rtc2.edu.vn gắnvới 210.245.22.25
trong đó:
– vn: Nước Việt Nam (Cấp 1)
– edu: Tổ chứcgiáodục(Cấp2)
– rtc2: Tên cơ quan (Cấp 3)
– xxxx: đơn vị nhỏ trong cơ quan (Cấp 4)
 Đặcbiệt: Tên localhost đượcgắnvới 127.0.0.1
Máy chủ -máy phụcvụ: Server
 Là máy tính chuyên cung cấptàinguyên,

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ụ

củamáychủ
–2dịch vụ khác nhau chiếmcáccổng
khác nhau
–Mỗidịch vụ thường chiếmcáccổng
xác định,
ví dụ:
•Web:80
•FTP:21
Chương I:
Giới thiệuWEB
Giới thiệuWEB
 Lịch sử
 Các thành phần của web
 Trang web, web site, World Wide Web
 Chuỗi định vị tài nguyên (địa chỉ): URL
(Uniform Resource Locator)
 Web server, Web browser
5/10/2013
4
Lịch sử:
–Mạng Internet xuấtpháttừ mạng ARPANET củaMỹ (1969) - mạng giữacác
trường ĐH
– 1989 - Tim Berners Lee phát minh ra giao thức World Wide Web (tạiphòng
TN vậtlýphântử-Geneva), sau đó Hypertext Markup Language - HTML
– 1990 – Tim viếttrìnhduyệt (Web Browser) và Web server đầutiên
(info.cern.ch)
–Việt nam có Internet vào tháng 11/1997
– Đếnnay,cókhoảng hơn30tỉ trang web thuộchơn
100 triệuwebsite
Các thành phầncủaweb

 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ụ:

:8080/html/test.htm
Trong trường hợp mặc định, nhiều thành phần có thể bỏ qua:
–Giao thức, cổng: Được trình duyệt đặt mặc định
– Tên file: được máy chủ đặt mặc định
5/10/2013
5
Web server, Web browser
 Web server:
–Máyphụcvụ web
–Mộtsố phầnmềm web server chuyên dụng:
• Apache: mã nguồnmở
• Internet Information Services (IIS): SảnphẩmcủaMicrosoft
 Web Browser:
–Phần mềm chạy trên client để khai thác dịch vụ web
–Mộtsố Web browser:
• Nescape
• Mozilla Firefox
• Internet Explorer (IE): tích hợpsẵn trong windows
•
Phân loạitrangweb
Phân loại trang web
 Dựa vào công nghệ phát triển
 So sánh
Phân loạitrangweb
–Web tĩnh:
• Dễ phát triển
• Tương tác yếu, không
cho phép NSD tương tác
• Sử dụng HTML
• Người làm web tĩnh

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

Các tiêu chuẩnthiếtkế
・ Thiết kế cho các loại Browser khác nhau:
– Internet Explorer, Netscape Navigator,
Mozilla Firefox, Opera, Lynx,…
・ Tương thích các loại hệ điều hành
・ Theo sở thích của người sử dụng
・ Độ phân giải màn hình hoặc kích thước cửa
sổ
・ Tốc độ kết nối
・ Màu sắc, độ sáng và phông chữ
5/10/2013
7
Thiếtkế màn hình - PC
Left edge = 2px Rightt edge =3px Left edge = 2px Rightt edge =3px
Title bar (18px)
(26px) Menu bar (32px)
Status bar (23px)
Task bar (23px)
Vertical scrollbar
Vertical scrollbar
Mộtthiếtkế tốt
 Nội dung là quan trọng, nhưng nội dung đơn độc
sẽ làm cho nó mất tác dụng trên trang web
 Một thiết kế web được gọi là tốt khi:
-Dễ hiểu
-Tạo ấn tượng khi vào
-Dễ sử dụng
-Dễ nhìn và cảmnhận
- WYSIWYG (What You See Is What You
Get: "thấy gì có nấy" và hiểu như là "Giao diện

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

– Doanh nghiệp
–Thương mại
・ Phầnnội dung chính:
• Liệtkêcácmụcnội dung chính trong website => website có
những trang chính nào
・ Chọnlựacáchthiếtkế:
• Dạng bảng
• Dạng khung
Dạng Templates, Masterpage
Phác thảo sơ đồ cây của website
Bước 3: Tạo các trang đơn và đưa nội
 Nội dung luôn là phầnquantrọng nhất
 Tạo,kiểm tra, hiệu chỉnh, đánh giá, các trang riêng lẻ.
‾ Nếu thông tin không cần thay đổi thì nên dùng web
tĩnh => nhanh hơn, an toàn hơn
‾ Nếu thông tin thay đổi thường xuyên => web động
‾ Nếu có nhiềutrangcóbố cụcgiống nhau => dùng
masterpage cho tất cả các trang đó
 Làm việc theo module
‾ Nên chia thành các module để dễ quản lý và sử dụng
hơn. VD: Module menu, module kết nối CSDL,
module hiển thị kếtquả,…
Các thành phần cơ bản của website
 Trang chủ (HomePage)
–Mọi website đều được thiết lập quanh Homepage
– Điều kiện cơ bản để website thành công
–Lưu ý khi sử dụng hệ thống đồ họa
 Hệ thống Menu, Logo, định danh
–Hệ thống menu phải rõ ràng, đầy đủ sẽ giúp đọc giả
hình dung được cấu trúc, tổ chức website.

–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

10
Thông tin tóm tắt – chi tiết
Bước 4: Thử nghiệm, kiểm tra và đánh giá
 Dùng IIS Tạo Virtual Directory để kiểm
tra (hoặc Apache Sever)
 Kiểm tra hoạt động của các liên kết (nội
+ngoại) và các nguồn tài nguyên.
 Thử với nhiềutrìnhduyệt khác nhau.
 Đánh giá chung kếtquả
Tạo virtual Directory
 Khởitạo IIS bằng cách:
– Start-> Programs-> Administartive Tools -> Internet
Information Service.
–Hoặc trong classic Start->
Settings->Control Panel ->
Administartive Tools-> Internet
Information Service.
Tạo virtual Directory (tt)
 Bố trí một virtual directory PTTH
–Nhấpphải (right click) vào Default Web Site,
chọn New, Virtual Directory
5/10/2013
11
Tạo virtual Directory (tt)
 Nhấp vào nút <Next> và gõ PTTH ở hộp Alias
PTTH
Tạo virtual Directory (tt)
 Nhấp vào nút <Next> và dùng
 <Browse > để chọn sub folder
 D:\11CDTH\ PTTH

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

– www.somee.com
• 105MB
• 3GB monthly bandwidth
• FTP access
• ASP, ASP.NET
• MS Access Databases
• Dạng địa chỉ:

– www.webng.com
• 350MB
• 10GB/m
• ASP
• MS Access
• hoặc
www.webng.com/user
5/10/2013
13
Tên miền+ Hosting Free
 Các trang web trên
mạng cho free
– www.freewebpage.org
• 150MB
• FTP access
• 500MB/m
• Upload: 10Files (max: 8MB)
• Linux
• />– www.freespaces.com
• 50MB
• 1,5GB/m
• Upload: 10files (max: 8MB)

• 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.

 Thử lại (Test, test and test!!!)
 Đánh giá chung kếtquả
Bước 6: Duy trì hoạt động và quản lý website
 Ai sẽ quảnlýwebsite
 Hàng ngày cần đưa thông tin gì?
 Website cần được cập nhật thông tin để đọc
giả luôn cảm nhận được cái mới
 Ghi thời gian cập nhật, số người truy cập…
 Liên kếttrang, quảng cáo
 Tạo liên kết đến các trang thông tin (đốitác,
khách hàng…) → tăng uy tín
–Khi đã ổn định → chuyển đổi hình thức kinh
doanh, thu phí: Thuê đặt logo, quảng cáo, Thu phí
thành viên, ….
5/10/2013
15
Quảng bá website
 Quảng bá Website
– Đăng ký Website vào các máy tìm kiếm trong
nước và thế giới(search engine)
• Vietnam Searchengine: Panvietnam, vinaseek…
• Global Searchengine: google, altavista, hotboot…
– Nâng cao vị trí của Website trong hệ thống xếp
hạng Website thế giới.
• Google rank (the important of website: 1-10)
• Alexa rank: Traffic ranking of website.
 Nâng tầmpháttriểnWebsite
–Tự động hoá dần các chức năng của Website.
–Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24
trên Internet.

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

16
Các nguyên tắc cơ bản

Nội dung không có hình ảnh
 Nếubạncómộtnội dung vô giá trong trang web,
hãy làm cho nó dễ đọc. Hãy chia thành những
đoạn quan trọng, gạch chân hoặc bôi đậm những
câu quan trọng trong từng đoạn và bạn đừng ngại
trang trí với một số màu.Tô màu văn bản thay thế
file đồ hoạ nếu có thể.

Dễ theo dõi "quá trình bán hàng".
 Phải tạo điều kiện để khách hàng hiểu rõ những
lợi ích của sản phẩm và dịch vụ của bạn đem lại
cũng như cung cấp cho khách hàng phương thức
đặt hàng thuậntiện nhất.
Các nguyên tắc cơ bản
 ・
Tương thích với đa số trình duyệt web
 ・
Một số vấn đề quan trọng khác

-
Đọcvàkiểmtracẩnthậntấtcả các nội
dung
 -Mộtyếutố thành công khác trong
marketing trực tuyến
Cấutrúcwebsite vàbố
cụctrangweb
Định hướng

 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

 - JavaScript
 - DHTML
 - XML
 - PHP
 - Perl
 - ASP (ASP.NET)
 - JSP
 - ????
Hoạt động của trang web
 Internet và Web
 Địachỉ trang web – URL
 :8080/2007/dba
se/index.html
Các triếtlýxâydựng web
 -Mục đích của Website cần thiết kế
 -Xác định đối tượng độc giả của Website
 -Thiết lập các chủ đề
 -Thiếtkế các khối thông tin chủ yếusẽ cung cấp
5/10/2013
18
Các triếtlýxâydựng web
 Các bước trong tổ chức thông tin
 - Chia thành các đơn vị logic, cắt đoạn thông tin
 -Thiếtlậphệ thống cấpbậctheotầmquantrọng
và tính
 tổng quát
 -Tạocấutrúcquanhệ giữa chúng
 - Phân tích sự thành công về chức năng và thẩm
mỹ của hệ thống