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

ð I H C ðÀ N NG
TRƯ NG CAO ð NG CƠNG NGH
KHOA ðI N – B MƠN CNTT
--------------------------------------------

GIÁO TRÌNH

THI T K WEBSITE

Biên so n: GV. Tr n B u Dung

ðà N ng, tháng 09/2012


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

CHƯƠNG 1: GI I THI U CHUNG
I.1 Các khái ni m c
b n
I.1.1 M ng máy tính
• M ng (Network) là t p h p các h th ng máy tính và các thi t b m ng chia s d li u,
chương trình, tài nguyên thơng qua 1 đư ng truy n k t n i truy n thông dùng chung,
trên cơ s 1 h ñi u hành m ng.
• ðư ng truy n là 1 h th ng các thi t b truy n d n v t lý ñ chuy n t i các tín hi u sóng
đi n t . ðư ng truy n v t lý có th phân thành 2 lo i:
o H u tuy n: Cáp ñ ng tr c, cáp đơi dây xo n, cáp quang, cáp đi n tho i, cáp đi n
năng thơng thư ng.
o Vơ tuy n: Sóng viba, h ng ngo i,…
• Có th phân m ng thành 5 lo i:
o M ng c c b (LAN: Local Area Network): m ng c c b

ph m vi nh .

o M ng di n r ng (WAN: Wide Area Network): s d ng các ñư ng dây ñi n tho i
ho c các phương ti n liên l c khác ñ liên k t các máy tính v i nhau trong ph m
vi t vài ch c đ n vài nghìn d m. LAN và WAN khác nhau nhi u v qui mô và
m c ñ ph c t p, m ng LAN ch có th liên k t vài máy tính v i 1 thi t b ngo i
vi như máy in. Các h th ng ph c t p hơn thì có các máy tính trung tâm và cho
phép ngư i dùng ti n hành thông tin v i nhau thông qua thư ñi n t ñ phân ph i
các chương trình nhi u ngư i s d ng và đ có th s d ng ñư c các cơ s d
li u dùng chung.
o M ng đơ th (MAN): là 1 m ng tr i dài trên 1 khơng gian đ a lý l n hơn LAN
nhưng nh hơn WAN. MAN thư ng ñư c s d ng như 1 m ng c a thành ph
hay 1 khu công nghi p
o M ng toàn c u (GAN: Global Area Network ): m ng tồn c u bao g m các máy
tính nhi u nư c khác nhau k t n i v i nhau, ví d như m ng Internet
o M ng Intranet
I.1.2 Internet – Intranet

Gi ng viên: Tr n B u Dung

2


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

• Intranet là m ng c c b không n i vào Internet và cách truy n thơng c a chúng cũng
theo ngơn ng chung là TCP/IP.

• Internet là m t m ng máy tính tồn c u trong đó các máy truy n thơng v i nhau theo
m t ngôn ng chung là TCP/IP. M ng Internet mang l i r t nhi u ti n ích cho ngư i s
d ng như h th ng thư đi n t (email), trị chuy n tr c tuy n (chat), máy truy tìm d
li u (search engine), các d ch v thương m i và chuy n ngân, và các d ch v v y t ,
giáo d c như ch a b nh t xa ho c t ch c các l p h c o…Vì v y, ngày nay m ng
Internet là m ng trao đ i thơng tin tồn c u, bao g m hàng trăm tri u ngư i s d ng.
I.1.3 Mô hình Client - Server
• Request-Reponse (u c u – H i ñáp) là 1 trong các phương th c cơ b n mà các máy
tính s d ng đ giao ti p v i nhau.
• Mơ hình client-server (mơ hình khách - ch ) là m t mơ hình n i ti ng trong m ng
máy tính, đư c áp d ng r t r ng rãi và là mô hình c a m i trang web hi n nay.
o Server s ch a tài nguyên dùng chung cho nhi u máy khách (client) như tài li u,
máy in, t p tin …
o Cách ho t ñ ng c a mơ hình này là server tr ng thái ho t đ ng 24/24 và ch
máy con (đóng vài trị là máy khách) g i m t yêu c u (request) đ n máy ch
(đóng vai trị ngư i cung ng d ch v ), máy ch s x lý và tr k t qu v cho
máy khách.
o Ưu ñi m c a mơ hình này là ti t ki m th i gian, tài chính, d qu n tr h th ng
I.1.4 Giao th c m ng TCP/IP
• ð m t chương trình server và m t chương trình client có th giao ti p đư c v i nhau
thì gi a chúng ph i có m t chu n ñ nói chuy n, chu n này ñư c g i là giao th c. Giao
th c m ng là t p h p các qui t c truy n thông c a m ng mà t t c các th c th tham
gia truy n thông ph i tuân theo. N u m t chương trình client nào đó mu n yêu c u l y
thông tin t server thì nó ph i tn theo giao th c mà server đó đưa ra. V i s phát tri n
m ng như hi n này thì có r t nhi u giao th c chu n trên m ng ra ñ i nh m ñáp ng nhu
c u phát tri n này. Các giao th c chu n ( t ng m ng và v n chuy n) ñư c s d ng r ng
rãi nh t hi n nay như: giao th c TCP/IP, giao th c SNA c a IBM, OSI, ISDN, X.25
ho c giao th c LAN-to-LAN NetBIOS.

Gi ng viên: Tr n B u Dung

3


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

• TCP/IP đư c vi t t t t Transmission Control Protocol / Internet Protocol (Giao th c
đi u khi n truy n thơng / Giao th c Internet)
• Internet Server là các Server cung c p các d ch v Internet (Web Server, Mail Server,
FTP Server…)
• Internet Service Provider (ISP): Là nơi cung c p các d ch v Internet cho khách hàng.
M i ISP có nhi u khách hàng và có th có nhi u lo i d ch v Internet khác nhau.
• Hosting Provider là cơng ty ho c t ch c đưa các trang web lên m ng.
• IP (Internet Protocol) : Các máy s d ng trong m ng Internet liên l c v i nhau theo
m t tiêu chu n truy n thơng g i là Internet Protocol (IP).
• IP Address (ñ a ch IP): ñ vi c trao ñ i thông tin trong m ng Internet th c hi n ñư c
thì m i máy trong m ng c n ph i ñư c ñ nh danh ñ phân bi t v i các máy khác.
o M i máy tính trong m ng ñư c ñ nh danh b ng m t nhóm các s đư c g i là ñ a
ch IP. ð a ch IP g m 4 s th p phân có giá t 0 đ n 255 và ñư c phân cách
nhau b i d u ch m.
o Ví d : 192.168.0.1 đ a ch IP này có giá tr trong tồn m ng Internet.
o U ban phân ph i ñ a ch IP c a th gi i s phân chia các nhóm đ a ch IP cho
các qu c gia khác nhau. Thông thư ng ñ a ch IP c a m t qu c gia do các cơ
quan bưu ñi n qu n lý và phân ph i l i cho các ISP. M t máy tính khi thâm nh p
vào m ng Internet c n có m t đ a ch IP. ð a ch IP có th c p t m th i ho c c p
vĩnh vi n. Thông thư ng các máy Client k t n i vào m ng Internet thơng qua m t
ISP b ng đư ng ñi n tho i. Khi k t n i, ISP s c p t m th i m t IP cho máy
Client.

I.1.5 Phương th c truy n thông tin
Khi m t máy tính có đ a ch IP là x (máy X) g i tin đ n máy tính có ñ a ch IP là y (máy Y) thì
phương th c truy n tin cơ b n di n ra như sau: N u máy X và máy Y cùng n m trên m t m ng
con thì thơng tin s ñư c g i ñi tr c ti p. Cịn máy X và Y khơng cùng n m trong m ng con thì
thơng tin s đư c chuy n t i m t máy trung gian có đư ng thông v i các m ng khác r i m i
chuy n t i máy Y. Máy trung gian này g i là Gateway.

I.2 Website và các khái ni m liên quan
I.2.1 World Wide Web

Gi ng viên: Tr n B u Dung

4


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

• World Wide Web (WWW) đư c m t k sư ngư i Anh là Tim Berners – Lee phát minh
và hoàn thi n vào năm 1991. Xu t phát t nhu c u h th ng l i nh ng ghi chép l n x n
c a mình, nhanh chóng tìm ra và liên k t ñư c v i nh ng tài li u tham kh o t i b t c
ch nào trên m t văn b n, Tim Berners-Lee ñã phát minh ra m t ph n m m trên m t
giao di n văn b n có th t o ra các liên k t v i các file d li u trong máy tính c a mình,
sau đó phát tri n tính năng này có th liên k t v i b t c file d li u nào trong các máy
tính trên m ng Internet. T p h p các trang web kh p nơi trên th gi i thông qua m ng
Internet t o thành World Wide Web.
• World Wide Web (WWW) ch là 1 ph n nh c a Internet và là m t d ch v ph bi n
nh t hi n nay trên Internet, đó là m t h th ng siêu văn b n có th liên k t nhi u lo i
văn b n nhi u ngu n khác nhau. D ch v này ñưa ra cách truy xu t các tài li u c a

các máy client d dàng thông qua các giao ti p ñ h a. ð s d ng d ch v này máy
Client c n có m t chương trình g i là Web Browser.
• T ch c W3C (World Wide Web Consortium) ñư c thành l p vào năm 1994 là hi p h i
l p ra các chu n cho Internet, nh t là cho WWW.
• HTTP (HyperText Transfer Protocol - Giao th c truy n t i siêu văn b n) là giao
th c Client/Server dùng cho World Wide Web, ñư c dùng ñ liên h thông tin gi a máy
cung c p d ch v (Web server) và máy s d ng d ch v (Web client). HTTP là m t giao
th c ng d ng c a b giao th c TCP/IP (các giao th c n n t ng cho Internet).
I.2.2 Website
a. Khái ni m
• Web Site là m t lo i siêu văn b n có đ a ch c th và duy nh t, đó là 1 t p h p các
trang web liên quan đ n 1 cơng ty, m t t p đồn, 1 t ch c hay 1 cá nhân nào đó.
Trên 1 trang web có th đ t các liên k t t i các trang web khác m t cách ñơn gi n và
ti n l i.
• Trang web (Web page) là m t file văn b n ch a nh ng th HTML ho c nh ng đ an
mã đ c bi t mà trình duy t web có th hi u và thơng d ch ñư c, file ñư c lưu v i ph n
m r ng là .html ho c htm. Web page ñư c ñ t trên máy ch Web sao cho các máy
khách có th truy c p đư c nó
• Nói cách khác, website tương t như qu ng cáo trên các trang vàng, nhưng có đi m khác
ch nó cho phép ngư i truy c p có th tr c ti p th c hi n nhi u vi c trên website như
giao ti p, trao đ i thơng tin v i ngư i ch website và v i nh ng ngư i truy c p khác,
Gi ng viên: Tr n B u Dung

5


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

tìm ki m, mua bán ... ch không ph i ch xem như qu ng cáo thông thư ng. Hàng tri u
ngư i trên kh p th gi i có th truy c p website - nhìn th y nó ch khơng gi i h n trong
ph m vi lãnh th nào c . Khi b n xem thơng tin trên m t trang Web thì trang Web đó có
th đ n t M , t Vi t Nam, hay b t c nơi nào khác trên th gi i.
• Các Website đư c s h u b i m t cá nhân ho c t ch c nào đó.
• ð i v i m t doanh nghi p, Website là m t c a hàng o v i hàng hố và d ch v có th
đư c gi i thi u và rao bán trên th trư ng tồn c u. C a hàng đó m c a 24 gi m t
ngày, 7 ngày m t tu n, cho phép khách hàng c a b n tìm ki m thơng tin, xem, mua s n
ph m và d ch v c a b n b t c lúc nào h mu n. Website là m t văn phòng o c a
doanh nghi p trên m ng Internet. Website bao g m tồn b thơng tin, d li u, hình nh
v các s n ph m, d ch v và ho t ñ ng s n xu t kinh doanh mà doanh nghi p mu n
truy n ñ t t i ngư i truy c p Internet. V i vai trò quan tr ng như v y, có th coi
Website chính là b m t c a cơng ty, là nơi đ đón ti p và giao d ch v i các khách hàng
trên m ng. Website khơng ch đơn thu n là nơi cung c p thông tin cho ngư i xem, cho
các khách hàng và ñ i tác kinh doanh c a doanh nghi p, nó cịn ph i ph n ánh đư c
nh ng nét ñ c trưng c a doanh nghi p, ñ m b o tính th m m cao, ti n l i, d s d ng
và ñ c bi t ph i có s c lơi cu n ngư i s d ng ñ thuy t ph c h tr thành khách hàng
c a doanh nghi p.
b. L ch s phát tri n web
• Ngày 6-8-1991: Tim Berners-Lee cơng b d án “World Wide Web” t i newsgroup
alt.hypertext.
• Ngày 12-12-1991: Paul Kunz, m t nhà khoa h c thu c trung tâm Stanford Linear
Accelerator Center (SLAC), sau chuy n thăm phịng thí nghi m Cern (nơi Berners Lee
làm vi c) quy t ñ nh l p m t máy ch cho B c M . ðây là vi c làm c n thi t ñ ñưa
web ra kh p th gi i. Máy ch c a SLAC dùng các ph n m m do chính Berners Lee
phát tri n.
• Tháng 11-1992: ðã có 26 máy ch web online
• Ngày 22-4-1993: Trình duy t Mosaic đ u tiên cho h đi u hành Windows ra đ i
• Ngày 30-4-1993: Cơng ngh web và các mã chương trình mi n phí cho t t c m i ngư i
• Tháng 5-1993: Vi n công ngh Massachusetts tung ra công ngh m i, l n ñ u tiên ñưa

m t t báo lên web.

Gi ng viên: Tr n B u Dung

6


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

• Tháng 6-1993: Ngơn ng HTML (Hypertext Mark Language) dùng trong l p trình web
đư c cơng b .
• Tháng 2-1994: Ti n thân c a Yahoo ñư c ñưa lên internet.
• Ngày 1-7-1995: Hi u sách tr c tuy n Amazon khai trương.
• Tháng 8-1995: ðã có 18.957 website
• Ngày 24-8-1995: Microsoft Internet Explorer (IE) đư c phát hành và là m t ph n trong
Windows 95.
• Tháng 9-1998: Google m c a văn phịng đ u tiên c a mình t i m t gara

California.

• Tháng 8-2000: ðã có g n 20 tri u website
• Ngày 9-11-2004: Mozilla Firefox ra m t cơng chúng
• Tháng 2-2005: Website chia s video youtube.com ra đ i
• Tháng 11-2006: ðã có kho ng 102 tri u websites.
• Tháng 12-2009: có kho ng 234 tri u website
c. Phân lo i
• Web tĩnh (static pages): Tính ch t c a lo i trang web này ch y u hi n th n i dung cho
ngư i dùng xem.

• Form pages (m u bi u): Ngoài n i dung như web tĩnh, nó cịn ch a các m u bi u cho
phép nh p các yêu c u t phía ngư i s d ng. Khi ngư i dùng ñi n xong các form và n
nút Submit thì t t c các thơng tin u c u s đưa đ n ñ u vào c a 1 chương trình CGI
(Common Gateway Interface: cho phép t o các chương trình ch y khi ngư i dùng g i
các yêu c u) ch y trên Server. Lo i web này thư ng dùng ñ làm các phi u ñi u tra,
trưng c u ý ki n, mua hàng
• Web đ ng (Dynamic pages): N i dùng c a trang web ñ ng tương t như trang web
tĩnh, ngồi ra nó cịn ch a các ño n mã l nh cho phép truy c p cơ s d li u trên m ng.
Tùy theo nhu c u, ng d ng có th cung c p kh năng truy c p d li u, tìm ki m thông
tin.
I.2.3 M t s khái ni m liên quan
a. Web server
• Web Server là máy ch có dung lư ng l n, t c ñ cao, ñư c dùng đ lưu tr thơng tin
như m t ngân hàng d li u, ch a nh ng website ñã ñư c thi t k cùng v i nh ng thông
tin liên quan khác. (các mã Script, các chương trình, và các file Multimedia)
Gi ng viên: Tr n B u Dung

7


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

• Web Server có kh năng g i đ n máy khách nh ng trang Web thơng qua môi trư ng
Internet (ho c Intranet) qua giao th c HTTP - giao th c ñư c thi t k đ g i các file đ n
trình duy t Web (Web Browser), và các giao th c khác.
• T t c các Web Server đ u có m t ñ a ch IP (IP Address) ho c cũng có th có m t
Domain Name. Gi s khi b n nh p vào thanh Address trên trình duy t c a b n m t
dịng sau đó nh n phím Enter, b n s g i m t yêu c u đ n m t

Server có Domain Name là www.dantri.com. Server này s tìm trang Web có tên là
index.html r i g i nó đ n trình duy t c a b n. B t kỳ m t máy tính nào cũng có th tr
thành m t Web Server b i vi c cài đ t lên nó m t chương trình ph n m m Server
Software và sau đó k t n i vào Internet, đơi khi ngư i ta cũng g i chính ph n m m đó là
Web Server.
• T t c các Web Server đ u hi u và ch y ñư c các file *.htm và *.html, tuy nhiên m i
Web Server l i ph c v m t s ki u file chuyên bi t ch ng h n như:
o IIS c a Microsoft dành cho *.asp, *.aspx...
o Apache dành cho *.php...
o Sun Java System Web Server c a SUN dành cho *.jsp...
Trong ñó, Apache HTTP Server là web server m nh m , uy n chuy n, tương thích v i
giao th c HTTP/1.1
b. Web browser
Web Browser là trình duy t Web, dùng ñ truy xu t các tài li u và xem thơng tin trên các Web
Server.
Ngày nay, có nhi u trình duy t đư c s d ng trên Internet . M i trình duy t có nh ng đ c ñi m
khác nhau và chúng hi n th trang web khơng hồn tồn gi ng nhau. Mozilla Firefox và
Microsoft Internet Explorer (IE) là hai trình duy t đư c s d ng ph bi n. Ngồi ra, cịn có các
chương trình duy t Web thơng d ng khác như:
• Opera c a Opera Software
• Safari trong Mac OS X, c a Apple Computer
• Maxthon c a MySoft Technology
• Avant Browser c a Avant Force (Ý).
• Google Chrome c a Google
c. Home page

Gi ng viên: Tr n B u Dung

8

ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

• Home page là trang web đ u tiên trong website, hay còn g i là trang ch
d. Hyperlink
• Hyperlink là tên khác c a hypertextlink , g i là siêu liên k t
• Siêu liên k t giúp ta d dàng tìm ki m các thơng tin khác nhau v 1 ch đ .
• M t siêu liên k t là 1 ph n c a trang web. Khi ta click chu t vào đó thì s t ñ ng th c
hi n 1 trong các cơng vi c sau :
o ðưa đ n 1 ph n khác c a trang
o ðưa ñ n 1 trang khác trong cùng 1 site
o ðưa ñ n 1 trang khác c a 1 site khác
o Cho phép download 1 file
o Ch y 1 ng d ng, trình di n ho c 1 đo n video
e. URL
•

M i ngu n trên web có duy nh t m t đ a ch r t khó nh . Vì v y, ngư i ta s d ng URL
(Uniform resource locator) là m t chu i cung c p ñ a ch Internet c a m t web site
ho c ngu n trên WWW. ð nh d ng đ c trưng là: www.nameofsite.typeofsite.countrycode

• URL: là m t ñ a ch , ch ñ n m t file c th trong ngu n tài nguyên m ng.
• URL cũng nh n bi t giao th c c a site ho c ngu n ñư c truy c p. Có hai d ng URL :
o URL tuy t ñ i – là ñ a ch Internet ñ y ñ c a m t trang ho c file, bao g m giao
th c, v trí m ng, ñư ng d n tuỳ ch n và tên file.
Ví d : http:// www.microsoft.com/ms.html
o URL tương đ i - mơ t ng n g n đ a ch t p tin k t n i có cùng đư ng d n v i
t p tin hi n hành, URL tương ñ i ñơn gi n bao g m tên và ph n m r ng c a t p

tin.
Ví d : index.html

I.3 Công c h tr thi t k và ngơn ng l p trình web
I.3.1 Cơng c h tr

thi t k web

• Ph n m m thi t k giao di n, t o và x lý nh cho các trang web như Photoshop, Corel
Draw…
• Ph n m m Macromedia Dreamweaver là trình biên so n HTML chuyên nghi p dùng ñ
thi t k , vi t mã và phát tri n website cùng các trang web và các ng d ng web.
Gi ng viên: Tr n B u Dung

9


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

I.3.2 Ngơn ng

l p trình web

• PHP: ðư c ch y trên máy ch Linux ho c Windows, có đ c đi m m nh m , d vi t, d
dùng, d phát tri n. ði đơi v i PHP là cơ s d li u MySQL. PHP đã tr thành ngơn ng
l p trình web ph bi n nh t hi n nay.
• ASP: Ch y trên máy ch

Windows, thư ng s

d ng cơ s

d

li u Access, ñư c

Microsoft phát tri n nh m vào các đ i tư ng ng d ng văn phịng.
• ASP.NET: Ch y trên máy ch Windows. ðư c Microsoft xây d ng trên n n t ng .NET,
k t h p v i cơ s d li u MSSQL Server.
• JSP, CGI, Python: Ch y trên máy ch Windows / Linux, hi n nay đã khơng cịn ph
bi n.

I.4 Qui trình xây d ng 1 ng d ng web
Qui trình xây d ng 1 ng d ng web g m các bư c sau:
• Giai đo n 1. Giai đo n ti p xúc, tìm hi u (Initial Planning Phase)
o Tìm hi u khách hàng
o Tìm hi u sơ b nhu c u làm Web site
• Giai đo n 2. Giai đo n phân tích (Analysis Phase)
o Xác đ nh m c tiêu kinh doanh, yêu c u v ch c năng và ý đ cơng ngh chi ti t
c a Web site
o Kh o sát các n i dung và nhu c u n i dung c a ngư i xem; các ví d Web site
tương t
o Th o lu n l ch trình và th ng nh t gi i pháp, kh i lư ng cơng vi c
• Giai ño n 3. Giai ño n thi t k (Design Phase)
o Thi t k ñ ho và duy t Design Prototype v i khách hàng
o Th nghi m ý ñ : User prototype và k ch b n tương tác
o Phát tri n chi ti t các design ñ ho ñ ng
o Th o lu n, duy t và th ng nh t b n thi t k & k ch b n

• Giai đo n 4. Giai đo n xây d ng (Production Phase)
o Chuy n hoá thi t k ñ ho thành các m u trang Web
o Tích h p v i h th ng qu n tr n i dung WEB++
o T o c u trúc n i dung
o C p nh t m u các bài n i dung thông tin
o Gi i thi u và hư ng d n sơ b ch c năng
Gi ng viên: Tr n B u Dung

10


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

o Hi u ch nh các yêu c u m i & t ch c đánh giá
• Giai ño n 5. Giai ño n Ki m th (Test Phase)
o L y b sung yêu c u và l p trình thêm ch c năng
o Ki m th và hi u ch nh Website theo tho thu n ban đ u
• Giai đo n 6. Giai đo n Chuy n giao (Deyloyment Phase)
o ðào t o và hu n luy n
o ðánh giá và B o trì
Trong th c t , ñ ti t ki m th i gian, tăng tính hi u qu và chuyên nghi p, các cơng ty l p trình
web thư ng xây d ng ng d ng web theo mơ hình sau:

I.5 Ngun t c thi t k website
I.5.1 Nguyên t c chung
1. Trang ph i ñư c t ch c ch t ch , d s d ng
2. Các thông tin quan tr ng nên đ v trí đ u trang
3. Dung lư ng c a m t trang b t kỳ khơng nên n ng q 50K

4. Tương thích v i ña s các trình duy t
5. D dàng khám phá các ñư ng link
6. Thư ng xuyên ñ i m i site
Gi ng viên: Tr n B u Dung

11


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

7. S d ng t ng d hi u, ng n g n
8. Có thơng tin liên h
9. ð ng b t bu c ngư i ñ c ph i download plug-ins
10. ð ng dùng Javascript cho con tr chu t
11. ð ng canh gi a t t c m i th
12. Ngư i đ c khơng mu n ph i kéo thanh cu n ngang: Theo kinh nghi m c a nhi u ngư i
thì b n nên thi t k web

ch ñ 800 x 600 px vì hi n t i ch có 5% s ngư i dùng màn

hình 640 x 480 px
13. Thơng tin quá dài m t trang: M t trang web không nên ñ ngư i ñ c ph i kéo 3 l n
màn hình đ đ c h t n i dung. Tuy nhiên tr trư ng h p ñ c bi t n u đó là m t chương
sách thì khơng nói t i vì n u ngư i đ c đã bi t nó là m t chương sách và n i dung phù
h p v i cái h c n thì h s khơng ng i kéo đ n c ch c trang.
14. Th i gian t i v nhanh. B n có th tăng t c đ truy n c a trang web b ng các cách sau:
o Gi m kích c đ ho trong trang web: Ch c n 72 dpi cho ñ phân gi i c a
màn hình và đ ho cũng ch c n 256 màu. M t đ ho kích c nh 4" - 2" khơng

nên l n hơn 10K. Thu nh kích c ñ ho , ñ sâu c a màu. Hãy ñ ch ñ phân
gi i ñ ho và hình nh n n m c 256 màu. N u c n m t đ ho l n thì b n có
th cung c p cho ngư i xem m t hình nh nh v i tuỳ ch n xem ti p m t hình
nh l n hơn.
o Quy đ nh c th kích c file đ h a trong mã HTML. N u b n quy đ nh c th
kích c các file đ ho trong mã HTML, trình duy t web s rút ng n kích c c a
trang n u c n thi t và nơi hình nh s xu t hi n, hi n th văn b n và ñ m t
kho ng tr ng cho file ñ ho t i v .
o Gi m s file trong trang web (c file ñ ho và HTML k t h p v i nhau): M i
ngư i thu ng có t i đa 4 k t n i (socket) trong trình duy t web c a h . M i m t
socket s cho phép chuy n m t file v máy tính c a b n, vì th n u b n có 4
socket thì b n có th t i cùng lúc 4 file v . N u b n có 6 nh trong trang ch và
m t file HTML thì t t c là có 7 file c n ph i t i v . Trình duy t s t i 4 file v
trư c , sau khi t i xong m t file socket s t i ti p file cịn l i. Nói cách khác file
th 5 s ch ñư c t i v khi file th nh t ñư c t i xong. Và file th 6 s chưa
ñư c t i v cho đ n khi q trình t i file th hai hồn thành... q trình t i v có
th kéo dài n u có q nhi u file đ c bi t khi nh ng file này r t l n. Theo như

Gi ng viên: Tr n B u Dung

12


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

nguyên t c, (gi s ñ ho c a b n có kích c khiêm t n 5-12K) b n hãy c g ng
có du i 5 file m i trang.
I.5.2 Nh ng lưu ý khi thi t k

1. M u thi t k s d ng kích thư c th t c a màn hình v i khung hình chu n c a web theo
chi u ngang là 778px. Ph n l n ngư i xem v n xem mode màn hình 800 x 600, ngo i
tr m t s trư ng h p ñ c bi t có thi t k riêng.
2. S d ng Mode màu RGB vì web ch hi n th trên màn hình.
3. N u dùng Photoshop đ d ng layout, yêu c u b t bu c ph i dùng Folder Set đ qu n lý
layer, vì m i website khi thi t k hồn ch nh, có hàng trăm layer.
4. Vi c dùng Flash cũng c n ph i cân nh c v i nh ng website thông tin vì nó ch thu hút
ngư i xem vào nh ng l n truy c p đ u, sau đó s ch làm cho website n ng lên không
c n thi t. Khi làm file flash l n, c n ph i có ph n loading.
5. Khi thi t k , c n ñưa tương ñ i ñ y ñ n i dung v i màu s c, font ch ñúng v i website
sau này.
6. Khi ñ t n i dung, nên ñ font ch
ch ñ Smooth là none, ko nên ñ là Crisp vì khi ra
k t qu cu i cùng (web page) s khác v i thi t k .
7. Không s d ng các font ch không chu n cho n i dung website, vì n u máy ngư i xem
khơng có font đó thì s hư tồn b layout. N u website s d ng ti ng Vi t, nên s d ng
các font Unicode chu n như Arial, Verdana, Tahoma, Times News Roman.
8. Các website thương m i nên h n ch s d ng các ñư ng cong, hình nh l n, background
l n chi m di n tích thơng tin c a website tr khi có th qu n lý chúng. Vi c s d ng
ñư ng cong hay background s gây r t nhi u tr ng i khi chuy n qua HTML.
9. C n nghĩ qua v vi c làm sao chuy n chúng thành HTML trư c khi thi t k m t thành
ph n nào.
10. Thi t k web c n tính tốn làm sao đ tương thích v i c u trúc HTML c a website, n u
không, khi phân tích ra thành các trang web HTML s tr nên r t khó khăn cho vi c xây
d ng n i dung cũng như l p trình.
11. Trư c khi thi t k , c n có sitemap c th , đ vi c trình bày thơng tin tr nên rõ ràng, d
thuy t ph c ngư i duy t m u. - Nên xem m u thi t k trên các lo i màn hình khác nhau,
t t nh t trên màn hình CRT bình thư ng, vì ñây là màn hình c a ngư i s d ng. Tránh
vi c duy t m u, xem m u b ng gi y in láng (ho c r a hình), ho c màn hình laptop,

Gi ng viên: Tr n B u Dung

13


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

LCD. - Màu s c website c n nh nhàng, phù h p v i m c đích c a website, thơng tin rõ
ràng.
12. C n có m t m u GUI Logic trư c khi b t tay vào thi t k , GUI Logic này c n ñư c
duy t qua b i Ngư i ñ i tác. GUI Logic là b n thi t k thơ, bao g m các v trí c a các
thành ph n trên website, ngư i thi t k s d a trên đó đ làm graphic. B n GUI Logic
này đư c tính tốn trư c v m t th m m và quan tr ng là usabilities.
13. Sau quá trình thi t k web là quá trình phân tích, chuy n đ i m u thi t k thành trang
web HTML, c n theo các yêu c u c th sau:
o Chương trình d ng trang web, chương trình thích h p nh t là Macromedia
Dreamweaver, vì ñây là chương trình do r t nhi u l p trình viên đang s d ng đ
code tr c ti p, tuy t đ i khơng dùng Frontpage. Frontpage có th giúp đơn gi n
cho ngư i s d ng nhưng vi c sinh mã HTML r t ph c t p, ñ c bi t là sinh ra
nh ng mã HTML ko c n thi t và gây r i cho ngư i l p trình.
o C t web html c n có đ t m cao, n u thi t k m u layout, m t t 4->8h (khơng
tính th i gian sáng t o), thì vi c c t web m t t 2->4h m t trang
o Khâu thi t k và khâu c t web có vai trị r t quan tr ng, vì s ti t ki m ñư c th i
gian cho các l p trình viên, tester sau này. M t trang web đư c c t t t khơng
ch a các thành ph n không c n thi t như mã HTML dư, hay các l i v c u trúc
HTML. Vì khi ngư i l p trình làm vi c, h g n như ch làm vi c trên code ch
không làm vi c trên ph n design.
o C n tính tốn rõ ràng, c th vi c áp d ng Template trong website. Template giúp

cho 1 website v i nh ng trang có thành ph n gi ng nhau ñư c qu n lý m t cách
th ng nh t, n u c n thay ñ i nh ng ph n này, ch vi c ch nh s a file Template
này.
o Ph i h p ch t ch v i b ph n ph trách n i dung website ñ b c c, c u trúc
website rõ ràng hơn.
o Khi c t web, c n ñưa các style css file riêng, khơng đưa đ nh d ng font tr c ti p
trong website, vi c ñ t tên các CSS c n s nghiêm túc, có s th ng nh t. H n ch
vi c ñ nh d ng font ch b ng tag < font >. N u có các link, vi c đ t các css: link,
active, visited, hover là c n thi t. Nên ñ nh font chu n cho tồn website b ng
cách đ nh nghĩa l i tag < td >.
o S d ng file spacer.gif đ trang web có thêm các tùy bi n thay vì đ nh kích thư c
ngang d c cho các < table > hay < td >
Gi ng viên: Tr n B u Dung

14


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

o File spacer.gif là 1 file gif trong su t có kích thư c 1x1. Khi c n đ nh chi u cao
cho 1 td thì nên chèn file này vào td đó và đ nh chi u cao cho file spacer.gif.
o Tránh vi c Merge các Table l i v i nhau quá nhi u, t i ña 1 cái. Vi c này r t
quan tr ng, vì nó s gây khó khăn và m t th i gian cho các l p trình viên khi làm
vi c.
o C n xem k l i c u trúc, yêu c u c a bên thi t k web, đ có th cho phép
website co giãn theo kích thư c màn hình ho c c đ nh (nh t i ña 800px). N u
là các co giãn theo kích thư c màn hình, c n tính tốn thi t k sao cho khi giãn ra
khơng có nh ng kho ng tr ng hình nh.

o N u là 1 web ñ ng hay c p nh t thư ng xun, tuy t đ i khơng s d ng
ch c năng slice c a Photoshop hay Imageready. Ch c năng này ch thích h p
cho các website tĩnh vì HTML sinh ra r t ph c t p và có r i d n t i vi c các l p
trình viên khơng th đ c hi u hay ch nh s a ñư c.

Gi ng viên: Tr n B u Dung

15


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

CHƯƠNG 2: CÔNG C H

TR

THI T K WEBSITE

II.1 Ph n m m Adobe Photoshop
II.1.1 Gi i thi u chung
a. Gi i thi u
Adobe Photoshop (PS) là m t ph n m m ñ h a c a hãng Adobe System, ra ñ i vào năm 1988
trên h máy Macintosh. PS hi n nay là s n ph m ñ ng ñ u th trư ng ph n m m ch nh s a nh,
và ñư c coi là tiêu chu n c a các nhà ñ h a chuyên nghi p.
Phiên b n m i nh t hi n nay là Photoshop CS6 (Tháng 3/2012). Phiên b n s đư c gi i thi u
trong giáo trình này là Photoshop CS3, phát hành vào ngày 16 tháng 4 năm 2007.
b.

ng d ng

Ngồi ch c năng chính là ch nh s a nh, PS cịn đư c s d ng r ng rãi trong các lĩnh v c thi t
k ñ h a, thi t k web, v tranh và v texture cho các ng d ng 3D. Nh ng ng d ng tiêu bi u
c a PS là:
• L p ghép hình nh
• T o nh ngh thu t
• Thi t k m u (Poster, Prochure, Catalogue)
• H tr thi t k web
• Ph c h i nh cũ
• Hi u ch nh nh màu
• Chuy n ñ i nh ñen tr ng sang màu
c. Kh i ñ ng PS3
Kh i ñ ng Adobe Photoshop b ng cách nh p vào nút Start góc trái phía dư i màn hình:
Start → Programs → Adobe Photoshop CS3.
Sau khi kh i đ ng xong, màn hình Photoshop CS3 xu t hi n: thanh trình đơn (thanh menu),
thanh thu c tính (thanh Options), thanh cơng c , các b ng (Layers, Channel, History, Actions,
Info, Brushes…).

Gi ng viên: Tr n B u Dung

16


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

d. Thoát kh i PS3
Vào File → Exit ho c nh n nút Close (Alt + F4 ho c Ctrl + Q)

e. Các khái ni m cơ b n
• ði m nh: Là nh ng ph n t hình vng c u t o nên file nh. Nói cách khác file nh là
t p h p c a nhi u ñi m nh, s lư ng và ñ l n c a các ñi m nh trong nh ph thu c
vào ñ phân gi i c a nh đó.
• ð phân gi i: Là s lư ng ñi m nh trên 1 ñơn v dài (thư ng dùng là inch).
Ví d : đ phân gi i 80 có nghĩa là 80 đi m nh / 1 inch.
ð phân gi i t l thu n v i ñ nét c a nh.
• Vùng ch n: Là vùng nh ñư c gi i h n b ng ñư ng biên và nét ñ t, ñư c dùng ñ
khoanh vùng x lý riêng. M i thao tác x lý hình nh ch có tác d ng bên trong vùng
ch n.
• Layer: Là l p nh, trong layer ch a các vùng có đi m nh ho c khơng có đi m nh.
Vùng khơng có đi m nh g i là vùng trong su t (Transparent)
• Màu ti n c nh (Foreground color) và màu h u c nh (Background color): là 2 h p
màu cơ b n trong photoshop, nó n m trên thanh công c . Màu ti n c nh là màu s tô vào
cho nh, màu h u c nh là màu n n gi y.
• Layer: Khi t o m i 1 file, photoshop s m c đ nh nó là layer Background (L p n n).
o Layer Background có th là 1 t m hình ho c là 1 màu tr ng gi ng như trang
gi y ñ b n th c hi n các thao tác v hình.
M i nh ch có 1 l p n n. V i lo i layer này b n khơng th thay đ i ch
đ hịa tr n và m c Opacity c a nó
ð ch nh s a nh, b n ph i chuy n layer Background thành layer thư ng
Cách 1: Click chu t ph i vào layer → ch n Duplicate

Gi ng viên: Tr n B u Dung

17


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

Cách 2: Nh n ñúp chu t vào layer background trong Layer Palette

Cách 3: Layer → New → Layer Via Copy (Ctrl + J)

o Layer thư ng: là lo i layer b n có th thay đ i ch đ hịa tr n và m c Opacity
c a nó. ð chuy n layer thư ng thành layer Background ta làm như sau:
Cách 1: Ch n layer trong Layer Palette Click r i ch n Layer →
Flatten Image

Cách 2: Layer → New → Background From Layer

Gi ng viên: Tr n B u Dung

18


Giáo trình Thi t k website

ðHðN – Trư ng Cao đ ng Cơng ngh

f. Các đ nh d ng nh
• .psd: là ñ nh d ng chu n c a Photoshop
• .gif: file nh d ng nén, gi i h n trong 256 màu.
• .jpeg: dùng đ nén các hình nh su t cho web. Do ch ñ jpeg cho phép nh lên ñ n 16
tri u màu nên các hình nh có ch t lư ng hình nh và màu cao.
• .png: là đ nh d ng t p ñ nén các hình nh s ñư c xu t cho web.
• .bmp: đ nh d ng dùng cho file nh, có th dùng r ng rãi cho các chương trình ch y
trong window.

• .tiff: Ch t lư ng cao, dùng ñ ñ nh d ng cho nh ñ u vào và dùng trong in n (dùng cho
máy PC ho c MAC).
II.1.2 Các thành ph n cơ b n c a PS3
a. Giao di n PS3

• ð tr v giao di n hi n th m c ñ nh c a s làm vi c: vào Window → Workspace →
Reset Palette Location
• ð lưu l i c a s làm vi c hi n hành: Vào Window → Workspace → Save Workspace
Gi ng viên: Tr n B u Dung

19


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

b. Các thanh cơng c
• Title bar (Thanh tiêu đ ): Ch a tiêu đ chương trình ng d ng Adobe Photoshop. Bao
g m 3 nút ch c năng: đóng, phóng to/thu nh c a s , t m th i n c a s .
• Menu bar (Thanh th c ñơn): Ch a các menu t p h p l nh như File, Edit, View, …

STT Tên ch c năng

Ý nghĩa
Ch a các ch c năng liên quan ñ n các thao tác trên t p

1

File

2

Edit

3

Image

4

Layer

5

Select

6

Filter

Ch a các ch c năng liên quan ñ n t o hi u ng nh

7

View

Ch a các ch c năng xác l p ch đ hi n th hình nh

8

Window

Ch a các ch c năng hi n th hay n các Palettes

9

Help

Ch a các thông tin tr giúp

tin như: open, save, exit…
Ch a các ch c năng liên quan ñ n ch nh s a t p tin như:
undo, copy, paste …
Ch a các l nh v biên t p hình nh như: ch đ màu,
quay hình nh …
Ch a các ch c năng x lý l p
Ch a các ch c năng liên quan ñ n các thao tác ch n/
khơng ch n hình nh, bi n đ i vùng ch n.

• Option bar (Thanh tùy ch n): Thanh tùy ch n n m phía dư i thanh menu, trình bày
các tuỳ ch n và thu c tính c a các cơng c .
• Status bar (Thanh tr ng thái): Thanh tr ng thái hi n th m t s thơng tin liên quan đ n
vi c thao tác và đ i tư ng trên vùng làm vi c.
• ToolBox (H p công c ): cho phép ch n, v hình và hi u ch nh, các h p ch n màu
Foreground (màu ti n c nh) và màu Background (màu h u c nh), các công c xem nh.
o Khi c n ch n công c trên thanh công c , ch c n nh p chu t ho c nh n phím
nóng trên bàn phím đ ch n cơng c c n ch n.
Ví d : N u c n ch n công c Rectangular Marquee Tool, ch c n nh p
chu t trái vào bi u tư ng

bàn phím).
Gi ng viên: Tr n B u Dung

trên thanh cơng c (hay nh n phím M trên

20


Giáo trình Thi t k website

ðHðN – Trư ng Cao ñ ng Công ngh

o Trong trư ng h p công c mu n ch n b n, nh p ph i trên cơng c cùng nhóm,
m t danh sách x xu ng, rê và nh p vào công c c n ch n.
Ví d : Mu n ch n cơng c t o vùng hình ellipse (Elliptical Marquee Tool)
trên thanh cơng c nhưng l i đang b n. Bi t cơng c này n m cùng nhóm
v i cơng c Rectangular Marquee Tool. Vì v y nh p ph i chu t vào công
c Rectangular Marquee Tool, nh p ch n Elliptical Marquee Tool trong
danh sách hi n ra.

STT

Công c

Công d ng
Rectangular Marquee Tool dùng

1

t o vùng ch n hình ch nh t.

Elliptical Marquee Tool ñư c dùng
t o vùng ch n hình trịn.
Lasso Tool dùng v vùng ch n t
do trên hình.

2

Polygon Lasso Tool dùng t o vùng
ch n có th bo theo đ i tư ng.
Magnetic Lasso Tool dùng t o
vùng ch n hít vào biên c a ñ i
tư ng.

3

Magic Wand Tool ñư c dùng ch n l a
các hình nh d a trên nh ng đi m tương
t màu s c c a các ñi m nh k c n.
Cơng c này r t có ích khi b n mu n
ch n m t ph n c a hình nh (ví d : mái
tóc) mà khơng ph i v theo các nét vi n
b ng công c Lasso Tool.

Gi ng viên: Tr n B u Dung

21


Giáo trình Thi t k website

4

ðHðN – Trư ng Cao ñ ng Công ngh

Crop Tool ñư c dùng c t xén l i kích
thư c hình nh. B n có th xén hình
theo kích thư c t do ho c theo kích
thư c chu n c a máy nh như 3x4; 4x6;
9x12…b ng cách thi t l p giá tr trên
thanh thu c tính. Nh n phím Enter khi
th y hình v a ý.

5

Type Tool dùng nh p ch vào hình nh.

Hand Tool đư c dùng đ cu n hình nh
6

lên xu ng, n u như hình nh này quá l n
và không n m l t trong c a s làm vi c
hi n hành.
Zoom Tool ñư c dùng đ phóng l n
hình nh khi c n th c hi n nh ng cơng

7

vi c chi ti t, địi h i c n c nh và đ thu
nh hình nh l i khi mu n nhìn th y
t ng th . Cơng c này s đư c phân tích

k hơn trong m c “ Ch ñ xem nh”.

8

H p màu Set foreground color
dùng ñ thi t l p màu ti n c nh cho
ñ i tư ng.
H p màu Set background color
dùng ñ thi t l p màu h u c nh cho
ñ i tư ng. Nh p vào ô này, h p
tho i xu t hi n thi t l p màu.

9

Gi ng viên: Tr n B u Dung

Paint Bucket Tool đư c dùng đ tơ
màu ti n c nh (Foreground) cho
vùng nh ñư c ch n.
Gradient Tool ñư c dùng ñ t o

22


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

m t dãy màu chuy n s c.

10

11

Line Tool ñư c dùng ñ v m t ño n
th ng.
Eyedropper Tool dùng ñ ño màu cho
h p màu ti n c nh và màu h u c nh hi n
hành trong s các màu c a m t nh.
Eraser Tool đư c dùng đ xóa màu c a
các ñi m nh. ð i màu cho chúng thành

12

màu h u c nh (màu Background). Công
c này cho phép b n khôi ph c l i m t
ph n c a hình nh thành phiên b n đư c
lưu sau cùng.
Pencil Tool ñư c dùng v các
ñư ng nét t do hay các ño n th ng
s c nét v i màu ti n c nh
(Foreground).

13

Brush Tool ñư c dùng tô v nh ng
nét b ng màu ti n c nh(
Foreground). B n có th l a ch n
kích thư c c a c trên thanh thu c
tính.

14

Pattern Stamp Tool ñư c dùng ñ
phun khu ch tán màu ti n c nh trên
m t hình nh.
Clone Stamp Tool đư c dùng ñ
l y m u m t ph n c a nh b ng cách
nh p vào vùng c n l y m u ñ ng
th i nh n Alt và đ t m t b n sao
chính xác (nghĩa là m t b n copy
hoàn ch nh) c a nh m t nơi khác.

Gi ng viên: Tr n B u Dung

23


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

Dodge Tool ñư c s d ng tơ m t
ph n hình nh nh t đi.
Burn Tool ñư c dùng làm m t ph n
c a nh t i (s m).

15

16

History Brush Tool dùng l y l i m t
ph n nh g c.

17

Blur Tool dùng làm m và m n m t
ph n hình nh.

Bi u tư ng Tên công c

Công d ng

Marquee

T o vùng ch n hình ch nh t, hình e-lip, vùng ch n
r ng m t hàng, vùng ch n r ng m t c t .

Move

D ch chuy n vùng ch n, l p, và đư ng gióng

Magic Wand

Ch n nh ng vùng đư c tơ màu tương t nhau

Crop

Xén b t hình nh

Slice

T o m nh

Slice Selection

Ch n m nh

Healing Brush

S d ng h a ti t ho c nh m u ch m s a l i trên hình
nh.

Patch

Ch m s a vùng nh ñư c ch n b ng m t m u hình
nh ho c ho ti t

Brush

T o nét v b ng c v (hi u ng v b ng c )

Pencil

T o nét v có đư ng vi n s c nét

Clone Stamp

Tô v b ng b n sao c a hình nh

Pattern Stamp

L y m t ph n hình nh làm màu tơ

History Brush

Tơ v b ng b n sao tr ng thái ho c nh ch p nhanh
ñư c ch n vào c a s hình nh h ên hành

Art History Brush

Tơ v b ng nh ng nét phác cách đi u, mơ ph ng
nhi u ki u tô v khác nhau, thông qua tr ng thái hay
nh ch p nhanh ñư c ch n .

Eraser

Xoá pixel và ph c h i các ph n nh v l i tr ng thái

Gi ng viên: Tr n B u Dung

24


ðHðN – Trư ng Cao đ ng Cơng ngh

Giáo trình Thi t k website

đã lưu trư c đó
Background Eraser

Kéo xố vùng nh thành trong su t

Magic Eraser

Xoá các vùng màu thu n thành trong su t b ng m t
l n nh p

Gradient

T o hi u ng hoà tr n d ng đư ng th ng (Linear), to
trịn (Radial), xiên (Angle), ph n chi u (Reflected),
hình thoi (Diamond) gi a hai hay nhi u màu
Tơ đ y nh ng vùng có màu tương t nhau b ng màu

Paint Bucket

m t

Custom Shape

T o hình d ng tuỳ bi n đư c ch n t danh sách hình
d ng tuỳ bi n

Annotations

T o chú thích nói và vi t kèm theo hình nh

Eyedroper

L y m u màu trong hình nh

Measure

ðo kho ng cách, v trí, và góc đ

Hand

Di chuy n hình nh trong c a s .

Zoom

Phóng l n và thu nh

nh xem

• Canvas: Là c a s t o và hi u ch nh hình nh, đư c gi i h n b i kích thư c chi u dài
và r ng c a hình nh.
• Palettes (Các b ng): S d ng đ qu n lý hình nh & các tính ch t khác c a file nh.
M i palette s ch a các ch c năng riêng, bao g m các palette sau:
STT

Qu n lý vi c xem nh, giúp trư t hình nh và đi u ch nh t
l hi n th c a hình nh

Infor

Cho bi t thơng tin màu và t a đ c a đi m t i v trí con tr
cũng như các thơng tin khác tùy thu c vào cơng c đư c
ch n

Histogram

Ch a các l nh v biên t p hình nh như: ch đ màu, quay
hình nh …

Color

Qu n lý màu s c

Swatches

Qu n lý màu cho s n

Style

2

Ý nghĩa

Navigator

1

Tên Palette

Qu n lý hi u ng cho s n

Gi ng viên: Tr n B u Dung

25