Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Ni dung ca trang ny thuc bn quyn ca B tc Monte Cristo - Final Fantasy v www.vietphotoshop.com. Nhng bi vit
trong ny c th c in ra dng vi mc ch c nhn v phi thng mi. Nu bn mun pht hnh li trong trang web ca bn lm
n lin lc vi ti hoc t nht phi trch dn li ngun l: B tc Monte Cristo - Final Fantasy v www.vietphotoshop.com

Bi hc ny s cp v cc lt ct v cc nh x nh cn bn - nhng c trng m bn s dng

khi to nhng mi lin kt siu vn bn phc tp ngay trong phm vi mt file ha n gin. Ngi
s dng c th ch cn click vo mt phn th b ct lt hoc c gn nh x nh trong mt
trang Web m mt site v click vo mt vng khc i n mt site khc.
C 2 k thut m bn s ng khi to cc mnh chia c gn lin kt trong mt bc nh m
ngi dng c th click vo m nhng site khc nhau trong mt trnh duyt Web. Mt trong 2
phng php l nh ngha lt ct (t y v sau s c vit theo nguyn bn ting Anh l slice),
l nhng mnh nh hnh ch nht thu c t qu trnh chia ct mt bc nh trong Adobe Photoshop
hay trong Adobe ImageReady. Phng php cn li l khi to cc nh x nh (t y v sau s c
vit theo nguyn bn ting Anh l image maps), khng nht thit phi l hnh ch nht.
Trong bi ny, bn s c hc cc ch im sau :

Mt s phng php khi to image slices.

Phn bit s khc nhau gia user slices v auto slices.

Lin kt user slices vi cc trang hay a ch HTML.

Khi to cc lt ct khng phi l nh (no image slice) cha text c th bin tp c

trong HTML.

nh ngha cc vng nh x nh (image-map areas) bng 3 phng php khc nhau.

Lin kt image-map areas vi cc trang hay a ch HTML.

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Bng mt qui trnh t ng, to ra mt trang HTML cha bc nh b ct trong mt bng table
no .

Bn s phi dnh ra khong 90 pht hon thnh bi hc ny. Bn c th thc hin vic to cc
slices trong c Adobe Photoshop ln Adobe ImageReady, nhng ch trong ImageReady mi c nhng
cng c to lp image maps.
Lu rng, nhng ngi dng Windows 2000 cn phi unlock nhng tp tin bi hc trc khi dng
chng. c thm thng tin, xin tham kho trang 3 Copying the Classroom in a Book files (iu ny
khng cn thit i vi ngi dng Windows XP hoc Mac OS).
Khi u
Trong bi hc ny bn s lm vic trn nhng th c tr liu sn cho mt Web home page. Mc
tiu ca bn l nhng cc liu kt siu vn bn vo bn trong 1 bc nh phc hp vn l 1 file .psd
n l.
Nhng vng khc, hoc cc im nng (hotspots - khu vc nh hoc th m bn c th click vo
nhy n 1 a ch c xc nh bng 1 URL) ca 1 image map lin kt vi nhng file khc, sao cho
ngi dng c th click ln 1 vng no ca trang ch m 1 trang lin kt hoc click ln 1 vng
khc ca trang ch m 1 trang lin kt khc. S c c nhng vng khng lin kt ca trang ch m
khng mang li mt thay i no nu ngi dng click mt cch ngu nhin hay h ha.
Bi hc sau trong cun sch ny s bao trm quy trnh ti u ha cc lt ct ring l vi cc thit lp
khc nhau t vng tnh ca bc nh v cch lm cho cc slices tr nn sinh ng bng cch nh
ngha cc hiu ng tng tc ng (rollover effects).
i iu v slices v image maps
Phng php u tin l khi to cc slices. Slices l nhng vng trn mt tm nh c bn nh
ngha da trn cc lp (layers), cc ng dn (guides), hoc cc vng chn c bit trong mt tm
nh, hoc bng cch dng cng c Slice. Khi bn nh ngha 1 slice trn mt bc nh, Photoshop hay
ImageReady s to mt bng (table) HTML hoc 1 tm rm kiu dng (cascading style sheet) cha
v ging hng cc slices. Nu mun, bn c th to ra (bng mt quy trnh t ng) v xem trc 1 file
HTML cha tm nh b ct lt cng vi table hoc cascading style sheet.
Mt image map cng l 1 vng nh phc v cho vic h tr 1 lin kt siu vn bn. Nhng qu trnh
qun l vic to lp cc image maps ch din ra trong Adobe ImageReady; v vy, bn phi chuyn
sang ImageReady lm vic ny nu file c m t Photoshop. ImageReady s khi to c clientside image maps ln server-side image maps. Khng nh Slice vn lun lun l hnh ch nht, image
maps c th mang hnh dng bt k.

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Xem trc kt qu
Bn s bt u bi hc bng cch xem trc mt v d v 1 trang ch HTML hon thnh m bn s
phi khi to. V tin trnh ny, bn s dng ng dng duyt Web quen thuc ca mnh (Chng hn,
Netscape, Internet Explorer, hoc Safari) thay v Photoshop hay ImageReady. Bn cng khng cn
phi kt ni Internet.
1. Khi ng 1 trnh duyt Web v file kt thc 15End.html trong th mc Lesson15/15End.
File ny cha 1 HTML table vn lin kt vi mt s nh Web, tt c u c to lp t Photoshop
v ImageReady slices.

2. Click nt lnh why organic? nh trang Web Organic Foods. Mt ca s duyt Web mi m ra
m 1 trang mi. (Khng phi l 1 trang m rng y ; N cn hn 1 trang gi ch (placeholder
page) ch ra rng nhng g bn click vo thc s trnh by cc lin kt).
3. ng file Why page c a ra lm v d trong Web browser.
4. Cng trong Web browser, hy m trang Organic Foods, click nt lnh products nh trang web.
K n, hy ng file v d mi ca Web browser ang ch th trang Product.
5. Mt ln na, hy m trang Organic Foods trong Web browser, di chuyn tr chut bn trn bc nh
mng ty cnh phi trang web. Ch rng u tr chut s chuyn thnh biu tng bn tay ang
tr (

), biu th rng vng nay c lin kt. Di chuyn tr chut ln trn v lt qua nhng vng

khc ca trang v ch rng khi th tr chut hin th nh 1 mi tn, khi th hin th nh mt bn tay.
6. Click vo b mng ty m thm mt trang lin kt khc. on ng Web browser xem trang

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

ch. Click thm mt vi lin kt khc m bn tm thy trn trang web.

7. Khi xem xong cc files kt thc, hy ng tt c ca s trnh duyt web v thot ra khi ng
dng.
Trong tin trnh ny, bn c chng kin 2 dng thc lin kt khc nhau : slices (Trong cc nt
lnh nh trang Web) v image maps (b mng ty, qu u , v cc vng nh tho mc, trong
vng lin kt ph hp vi dng ca mc c m t).
Bn s bt u cng vic vi Slices, vn lun l nhng hnh ch nht.
Ct lt mt tm nh trong Photoshop
Bn c th nh ngha Slices trong Photoshop bng cch r cng c Slice hoc chuyn i cc lp
hoc vng chn thnh Slices. Bn s bt u bi hc bng vic ct lt cc nt lnh menu cho trang
Web, dng cng c Slice trong Photoshop.
V vic thit k trang Web vi Photoshops v ImageReady
Khi dng Photoshop v ImageReady thit k Web pages, phi lun nh nh in trong u cc cng
c v c trng kh thi trong tng ng dng.
Photoshop cung cp nhng cng c khi to v thao tc trn nhng nh tnh dng cho Web. Bn c
th chia nh bc nh thnh nhiu Slices , t cc mi lin kt v HTML text, ti u ha cc slices, v
lu nh nh l 1 trang Web.
ImageReady cung cp nhiu - nhng khng phi tt c - nhng cng c bin tp nh tng t nh
Photoshop. Thm vo , n cn bao hm c nhng cng c v pallettes dnh cho vic x l v khi
to cc nh Web ng chng hn animations v rollovers.
Chun b to lp Slices
Trc khi bt u cng vic, bn nn ty bin cc ty chn cng vic sao cho mi th vo trng thi
sn sng hot ng.
1. Khi ng Adobe Photoshop, n t hp Ctrl+Alt+Shift (Windows)/ Command+Option+Shift (Mac OS)
tr v cc thit lp mc nh.
2. Click nt File Browser (

) v dng palette File Browser Folders nh v v chn folder

Lessons/Lesson15
3. Double-click ln nh nh biu th file 15Start.psd, hoc chn file y v bm lnh File > Open trn
thanh menu ca trnh duyt File Browser.
Nu 1 thng bo xut hin hi liu rng bn c mun update cc text layers cho kt xut vect khng,
hy chn Update.
File bi hc ny bao hm nhng ng dn ngang v dc mu blue. Bn s dng nhng ng dn
ny bt dnh cc lnh khi v cc vng chn sao cho chng c ging hng mt cch ngay ngn.
4. Click nt lnh close trn thanh tiu File Browser hoc click nt lnh File Browser trn thanh ty

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

chn cng c 2 ln ng File Browser gim thiu cn tr trong khng gian lm vic.
5. Hy m bo rng cc lnh sau y c chn (c du kim), nu khng, hy chn chng ngay
lc ny.

View > Show > Guides

View > Show > Slices

View > Snap

View > Snap To > Guides

View > Snap To > Slices

ng dn blue c to lp trc nhm gip bn v chnh xc cc slices. Khi to lp cc slices

gn cc ng dn, cc mp bin ca n s bt dnh ng dn sao cho cc slices lun ng nht v
hiu qu.
Dng cng c Slice khi to cc slices.
Bn c th t hi ti sao u ch ny li dng slices thay v a slice. Cu tr li l, tr phi bn
to ra 1 slice bao hm ton b tm nh - vn r rng l mt iu v ch, nht l v l slice c to
ra mt cch t ng - bn khng th no khi to ch duy nht 1 slice c. Bt k 1 slice mi no bn
trong 1 bc nh (1 user slice no ) cng u gy ra s hnh thnh nhng slices khc (auto slice) ph
kn mi vng nh pha ngoi user slice m bn va to ra.
Hy ch n hnh ch nht rt nh mu xm gc trn bn tri nh. Trong vng , bn s thy s
01 v 1 icon thm ch cn nh hn hoc 1 huy hiu (badge), tng t nh mt dy ni thu nh. Hnh
ch nht ny xc nh slice 01 vn bo hm ton b tm nh. Mu xm thng bo cho bn bit rng n
l mt auto slice, khng phi l 1 user slice. Cn ci biu tng ch ra rng slice ny hm cha mt ni
dung hnh nh bn trong n

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

.1. Trn hp cng c, hy chn cng c Slice (

Photoshop CS

).

2. R cng c Slice theo ng cho t n ny sang bn kia khu vc text why organic?, vi im u
v im cui gn st bn cc ng dn (guides) bao quanh text.

Mt hnh ch nht mu xanh tng t vi hnh ch nht biu th Slice 01 s xut hin gc trn bn
tri ca Slice 02 m bn va khi to. Mu xanh ca n nhc nh bn rng y l 1 user slice, khng
phi l auto slice.
Mu xm nguyn thy biu th auto slice 01 vn cn nguyn, khng thay i g, nhng vng c cha
bn trong slice 01 nh i, ch bao ph cnh tri ca trang.
Slice 03 - mt auto slice khc, cng c biu th bi mu xm c hu - bao ph vng cn li ca
thanh menu bn phi ca slice 03. Mt auto slice th ba, slice 04, bao ph khu vc bn di ca
thanh menu v v pha bn phi ca slice 01.

To lp thm nhiu user slices

Gi th bn thy rng cc slices c to ra tht l d dng, bn s ct ri nhng khong dng ca
dng text trn thanh menu thnh 4 nt lnh na.
1. Cng bng cng c Slice c chn trn thanh cng c, bn hy r chut t bn ny sang bn kia
dng text products to lp mt user slice khc.
Slice mi ny s tr thnh slice 03. Con s biu th mi slice ng sau slice 03 s t ng tng mi ln
1 n v.

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Bn c th thay i cch thc con tr hin th trn mn hnh i vi cng c Slice bng cch thay
i cc thit lp u tin cho Photoshop. chuyn i con tr chun biu th cng c Slice (

) thnh

con tr presice - chnh xc, hy vo menu Edit > Preferences > Display & Cursors (Windows) hoc
Photoshop > Preferences > Display & Cursors (Mac OS 10), chn Pricise for Other Cursors option, v
click OK.
2. Tng ln 1 k tip nhau, hy k cc nt v bng cng c Slice quanh tng mi mc text mt
trong cng 1 dng nh sau : bao quanh cc t shop online, contacts, v help khi to thm 3
slices na cho cc nt lnh menu.
Bc nh ca bn s c c thay 8 slices : 5 user slices v 3 auto slices. Nu con s ca bn khng
ng nh vy, hy ng lo g c v bn s sa iu ngay y thi !
3. Trn hp cng c, hy chn cng c Zoom (

) v click ln khu vc cc button slices m rng

khung nh ln 300% hoc 400%

4 . Hy kho st tht cn thn cc user slice m bn to lp xem coi c bt k khong trng no
gia chng khng. (Nu c, nhng khong trng ny s l cc auto slices.) Nu khng c khong
trng no gia chng, bn c th b qua bc 5 v 6.

C khong trng gia cc slices Khng c khong trng gia cc slices

5. Trn hp cng c, Hy chn cng c Slice Select (

) n bn di cng c Slice v chn trong

nhng user slices khng b bt dnh ng dn, ngha l, 1 slice m gia n v user slice st bn tn
ti 1 khong trng.
6. Ko r 1 handle no nh du slice c chn cho n khi ng bin ca slice ny bt dnh v
tr p st cc ng dn v nhng slices khc.
Ch : Bn cng c th dng cng c Slice Select ko r slice t v tr ny n v tr khc.

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

7. Nhp p cng c Zoom tr v phng i 100%, chn File > Save.

Nu bn nhn thy rng nhng biu tng ch th ca cc auto slices ang lm ri rm tm nhn,
hy chn cng c Slice Select on click vo nt lnh Hide Auto Slices trn thanh ty chn cng c.
Bn cng c th n cc ng dn bng cch chn View > Show > Guides, bi v bn s khng cn
cn n chng na.
Thit lp cc ty chn cho slice trong Photoshop
Cc slices s khng c bit hu dng cho ti khi bn thit lp cc ty chn cho chng. Cc ty chn
slices bao hm tn slice v URL c m ra khi ngi dng click vo slice. Tin trnh thit lp cc ty
chn slice trong Photoshop c hi khc mt t so vi cch bn s p dng trong ImageReady. Trong
Photoshop, bn s thit lp cc ty chn trong 1 hp i thoi. Cn trong ImageReady, bn s thit lp
chng trong 1 palette.
Du bng cch no i chng na, quy trnh ny cng kh n gin, nhng iu quan trng l bn c
th thc hin c cng vic trong tng ng dng nu bn ang chun b cc th cho vic xy dng 1
trang Web.
Ch : Bn c th thit lp cc ty chn cho 1 auto slice, nhng lm nh vy s lm cho 1 auto slice
t ng chuyn thnh 1 user slice.
1. Chn cng c Slice Select (

), v dng n chn slice 02, vi dng text why organics?.

2. Trn thanh ty chn cng c, click nt lnh Slice Options.

Photoshop mc nhin t tn cho tng slice da trn tn file hay con s biu th slice, v vy, filename
hin hnh l 15Start_02,biu th slice s hai trong file 15Stard.psd.
3. Trong hp thoi Slice Options, hy g vo cc thng tin : Trong Name, g Why_button ; trong URL,
g pages/why.html ; v trong Target, g _blank. (Hy cn thn ng st du gch chn (_) trc k
t b.) on click OK.

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Ch : Ty chn Target s qun l cch m 1 file lin kt khi bn click vo ng link. Ty chn
_blank s m trang lin kt trong 1 tnh hung mi ca 1 Web browser. Nu bn mun ng link m
n tnh hung nguyn thy ca Web browser, bn c th g 1 code khc thay v _blank.
c thm thng tin, hy xem Adobe Photoshop Help hoc 1 HTML reference (chng hn, 1 cun
sch in hoc l 1 Web site din gii HTML code)
4. Dng cng c Slice Select , chn slice 03, l slice c cha text products , an click Slice Options
trn thanh ty chn cng c
5. Nhp vo cc thng tin sau y:

Trong Name, g Products_button.

Trong URL, g pages/products.html.

Trong Target, g _blank.

6. Click OK ng hp thai.
7. Chn File > Save.
Bn ng ng ti liu vi v chng ta cn n n trong phn k tip
C th bn s nhn thy l c nhiu hn 3 ty chn trong hp thai m bn in thng tin cho
nhng slices ny. Th d, bn c th g g vo ty chn Alt Tag nu mun. Thng th Alt Tag text
c dng xc nh 1 slice c ni dung khng th nhn thy c hoc n kh kh hiu. N c th
xut hin trong tooltips ca 1 vi Web browser hoc nh 1 trnh gi ch (placeholder) trong sut 1 qu
trnh download di. N cng c th c c thnh ting bng mt vi ng dng screen-reader.
c thm thng tin v cch dng ty chn ny, hy xem Photoshop Help.

www.vietphotoshop.com - L Thun

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Lm vic vi slices trong ImageReady

Mc du bn c th tip tc thit lp cc ty chn slice trong Photoshop, nhng thc hin cng vic
c bit ny trong ImageReady s hiu qu hn. Bn s dng nt lnh Jump To chuyn sang
ImageReady.
Nt lnh Jump To khng ch n gin l bt u vo ImageReady m cn l nhy tt lun vo file
ang m trong Photoshop, chuyn i lun cc tc v qun l sang ImageReady cho ti khi, hoc l
bn ng file, hoc l bn nhy tr v Photoshops.
Mt khi m ImageReady, bn s phi nh ngha li khng gian lm vic (Workspace) thch hp
phc v nhng nhu cu c th cho bi hc ny. Bn s bt u tin trnh vi file 15Start.psd m
Photoshop.
Ch : Workspace xc nh nhng palettes no c m, v nhng v tr ca chng trong vng lm
vic. S minh nh Workspace khng nh hng g n kch thc, v tr hay cc thit lp view ca
ca s nh.
1. Hy chc chn rng bn lu file. K tip, trong hp cng c Photoshops, click nt lnh Jump to
ImageReady (

).

ImageReady m ra cng vi file 15Start.psd. Lu rng, ImageReady c 1 menu Slices v 1 palette

Slices, nhng ci ny khng c trong Photoshop.
2. Chn Window > Workspace > Interactivity Palette Locations ng mt vi palettes bn khng cn
cho bi hc ny.
3. ng nhm palettes Animation v Web Content bng cch click cc nt lnh close trn thanh tiu
ca tng palette hoc khng chn cc palettes ny trong menu Windows.
4. R nhm palette Slice v pha bn phi cho n khi n bt dnh v tr cnh bin ca vng lm vic.
Khu vc lm vic ca bn s trng ging nh minh ha di y

www.vietphotoshop.com - L Thun

10

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

5. Chn Window > Workspace > Save Workspace.

6. Trong hp thai Save Workspace, hy g : 15_Links, v click OK.
Gi th 15_Links Workspace xut hin trong trnh n ph ca menu Windows.
Bn c th kim tra iu ny bng cch chn 1 workspace khc v sau chn 15_Links 1 ln na.
Lu : Custom workspaces bn va khi to v lu li cho hoc ImageReady hocPhotoshops s
khng mt i khi ng ng dng hoc ti thit lp cc ch mc nh. Workspace ca bn s lun
lun kh thi trn trnh n ph Workspace cho ti khi bn ch ng xa chng. Tt nhin l,
ImageReady workspace s khng chuyn sang Photoshop hoc ngc li bi v 2 ng dng ny c
nhng palettes khc nhau.
Thit lp cc ty chn slice trong ImageReady
Khng gian lm vic ca ImageReady c 1 thun li hn so vi Photoshops trong tc v n nh cc
ty chn slice. Palette Slice trong ImageReady lm cho n hp l hn nhp cc ty bin slice bn
mun m khng cn phi i hi cc tc v m rng nh phi m mt hp i thoi ri li phi mt
cng ng n li.
Tin trnh lin theo y s tip tc cng vic thit lp cc ty chn cn dang d i vi 3 user slices
trn thanh menu.

www.vietphotoshop.com - L Thun

11

Chng 15: To lp cc lin kt bn trong mt bc nh

1. Trong hp cng c, hy chn cng c Slice Select

Photoshop CS

thng nm di cng c Slice hn l n

pha di n.
2. Chn slice 04, vn cha text shop online.
3 . Trong Slice palette, nhp vo cc thng tin sau y:

i vi Name, g Shop_button.

i vi URL, g pages/shop.html.

i vi Target, g _blank t pop-up menu.

4. Chn slice 05 v g Contact_button i vi Name v pages/contact.html cho URL. Chn _blank cho
Target.
5. Chn slice 06 v g Help_button cho Name v pages/help.html cho URL. Chn _blank cho Target.
6. Chn File > Save.

Mt khi bn g mt URL no cho bt k slice no, ImageReady s gn vic lit k y trn URL
pop-up menu trong Slices v Image Maps palettes. Nu bn khi to mt lin kt khc trn cng 1
trang, bn c th chn URL t danh sch thay v phi g tn vo.
To lp mt layer-based slice
Mt phng php khc nh ngha slices trong Photoshop v ImageReady l chuyn i (convert)
layers thnh slices. Mt layer-based slice (slice c ngun gc t layer) s bao gm tt c d liu pixel
trong layer c chn. Khi bn bin tp li layer , hoc di chuyn n, hoc p dng ln n mt hiu
ng layer, layer-based slice s hiu chnh hon thin cc pixels mi. tch lin kt 1 layer-based
slice ra khi layer to ra n, bn c th convert n thnh 1 user slice.
Bn s khi to 1 slice da trn text layer v bn quyn, v ri p dng 1 hiu ng layer cho n sao
cho bn c th thy slice ny hiu chnh ph hp vi hiu ng mi.

www.vietphotoshop.com - L Thun

12

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

1. Trong Layers palette, hy chn To edit in Slice palette text layer.

2. Chn Layer > New Layer Based Slice.
ImageReady s i ch nhng vng ca cc auto slices bng mt layer-based slice cho ton b layer.
Hy ch biu tng layer (
Cng vy, 1 slice icon (

) gc trn bn tri ca slice, ch ra rng n c ngun gc t layer.

) xut hin trn To edit in Slice palette text layer, nhc nh bn rng layer

nay l ngun gc ca 1 slice.

Lu : Bn vn c th p dng cc layer styles cho layer m bn dng khi to mt layer-based

slice. Cc kch thc ca slice ny s t ng tng ln n khp vi bt k khng gian m rng cn
c hin th hiu ng nu bn p dng chng trong trnh t ny. Nu khng, c th bn cn phi
quay tr li cc bc trc v nh li kch c cc slices, nh bn s thy trong Bi 17, To hiu
ng Rollover cho trang web.
3. Chon File > Save lu li cng vic ca bn trong ImageReady.
To lp No Image slices
Trong ImageReady v Photoshop, bn c th to lp cc No Image slices v sau t thm text hoc
m ngun HTML vo . No Image slices c th c mu nn v c lu gi nh l mt phn ca file
HTML.
Thun li u tin ca vic dng No Image slices i vi vn bn l vn bn c th c bin tp
trong bt k trnh bin tp HTML no, trnh cho bn s phin h phi quay tr li Photoshops hoc
ImageReady bin tp n. iu bt tin l, nu vn bn pht trin n mc qu ln cho 1 slice, n
s b b gy thnh bng table HTMLv bt u to ra nhng khong trng khng mong mun. Gii
php l phi lm cho slice rng c th iu chnh cho ph hp vi nhng thay i v phi chn
cc thuc tnh font thch hp vi kch thc ca slice.

www.vietphotoshop.com - L Thun

13

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

1. Hy chc chn rng layer-based slice m bn to ra cho thng tin v bn quyn c chn trong
ca s nh. Nu cha, hy dng cng c Slice Select

chn n ngay.

2. Trong Slice palette, chn No Image t Type pop-up menu.

3. Dng Text box trong Slice palette (ch khng phi trong ca s nh). g vo vi thng tin v bn
quyn. ( y chng ti dng 2004 Organic Support Group). Hy m bo rng ty chn Text is
HTML c xc nhn.

Bn c th t thm mt biu tng bn quyn bng cch nhn gi phm Alt v g 0169 trn dy
phm s (Windows) hoc nhm gi phm Option v g G (Mac OS).
Do bn chn No Image cho dng thc slice, nn layer ca trnh gi ch vn bn (To edit in Slice
palette) m gi y bn thy trong ca s nh s khng xut hin trong trang Web. Cn dng text m
bn g vo trong Slice palette s hin ra trong trang Web; tuy nhin, n s khng xut hin trong
bc nh b ct lt ca bn trong ImageReady hay Photoshop.

www.vietphotoshop.com - L Thun

14

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

4. Click vo mt vng trng trong Layers palette kh chn slice.

5. Chn File > Save.
Xem trc 1 No Image slice trong 1 trnh duyt Web
Gi th bn nn m bo rng on text bn g s lp y trong table, v vy bn nn xem trc bc
nh trong 1 trnh duyt Web. thc hin nhim v ny, bn phi c 1 Web browser c ci t sn
trong my tnh.
Lu : (Ch trong Mac OS ) Hy m bo rng bn c 1 b danh (alias) ca trnh duyt Mac OS 10
ang c t ch sn sao cho trnh duyt khng m c trong dng thc c in.
1. Trong hp cng c, click nt lnh Preview In Default Browser (nh l

hoc

) hoc chn 1 trnh

duyt t pop-up menu ca nt lnh.

Bc nh s xut hin trong ca s duyt, v ngun HTML xem trc cng s xut hin bng table
bn di bc nh
2. Hy c dng text v bn quyn gc di bn phi ca nh v m bo rng n ph hp vi
nhng thng tin m bn g vo Slice palette (ch khng phi trong placeholder text) trong ca s
nh ImageReady.
3. Thot khi trnh duyt.
4. Trong ImageReady, hy chn nt lnh Toggle Slices Visibility

trn hp cng c (hoc nhn phm

Q) n cc vch nh du slice v loi b vt m khi bc nh.

Ch : Vic thm chn la v cc trnh duyt ca bn vo nt lnh Preview In Default Browser l 1 tc
v n gin m bn c th thc hin c ngay trn desktop. Bn ch cn khi to 1 shortcut
(Windows) hoc 1 alias (Mac OS) cho ng dng Web browser ca bn, an r n vo trong folder
Preview In trn desktop. Folder nay s c t bn trong folder Helpers trong th mc Photoshop
CS.
Ni thm v vic to lp cc slices
Bn va hon thnh bi thc hnh i vi bi hc ny. Bn cng khm ph c mt vi cch ct
lt 1 tm nh v thit lp c cc ty chn slice trong Photoshop v ImageReady, nhng khng phi
l tt c. C nhiu phng php khi to cc slices khc m bn c th t mnh lm th. Chng hn :

Nu dng cc ng dn quen thuc trong cng vic thit k ca mnh, bn c th chia ct

ngay tc khc ton b tm nh thnh nhiu users slices vi 1 ty chn trn thanh ty chn
cng c (Photoshops) hoc trong Slices menu (ImageReady). Tuy nhin, k thut ny nn
c dng mt cch c cn nhc, bi l n s hy b tt c cc slices no c khi to
trc cng nh cc ty chn c lin quan ti cc slices y. Hn na, mi slices m n to
ra u l user slices, m bn li c th khng cn nhiu nh vy.

www.vietphotoshop.com - L Thun

15

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Khi bn cn khi to cc slices c kch thc (thm ch c l v khong cch) y ht nhau, hy

th xy dng tht chnh xc 1 user slice ring l bao quanh ton b khu vc. Sau , dng c
trng Divide Slice trn thanh ty chn cng c Slice Select (Photoshop) hoc trong Slices
menu (ImageReady) chia ct slice gc thnh nhiu slices theo chiu ngang v chiu dc m
bn mun.

Nu bn chn sn 1 vng no bng cc cng c to vng chn (marquee) ca

ImageReady m bn cn phn hoch nh l phm vi ca 1 slice, bn c th dng lnh Create
Slice From Selection trn menu Select. Hy lun thc rng, cho d vng chn c hnh dng
g i chng na, th slice m bn to ra cng s lun l mt hnh ch nht.

Lm vic vi with image maps (ImageReady)

Khi to cc image maps l mt trong nhng chc nng bn phi thc hin trong Adobe ImageReady.
Bn c th dng Photoshop khi to cc slices, m trong chng mc no c th chia s chc
nng vi image maps, nhng bn khng th to lp c cc image maps bng Photoshop c.
Trong phn ny, bn s khi to 1 image map trong mt bc nh tng t m bn tng thao tc
cng trong bi hc ny, l trang ch organic food. Nhim v ca bn l to ra cc lin kt n cc
trang Web khc nhau sao cho ph hp vi hnh dng ca cc mc c biu th bng nhng hnh
nh ca sn phm - iu m s khng d lm vi cc slices bi v tnh cht lun l hnh ch nht ca
n.
Nu ImageReady cha c m sn, hy khi ng chng ngay, nhn v gi t hp phm ph hp
vi h iu hnh ca bn phc hi cc thit lp mc nh. (Xem Restoring default preferences Phc hi cc thit lp mc nh trang 4). on, chn ly workspace m bn nh ngha trc
t trnh n ph Workspace trong menu Window. (Xem Working with slices in ImageReady - lm vic
vi slices trong ImageReady.)
Dng layers khi to image maps
Bn s nh ngha cc vng image-map da trn mt s layers to nn bn thit k trang ch. Bng
cch dng cc layers nh ngha cc hotspots, bn s d dng p t s kim sot ln nhng hnh
nh ca nhng vng . Nu file 15Start.psd vn cha c m ra trong ImageReady, th y l lc
phi m n.
1. Trong Layers palette, chn Asparagus layer.
Hy lu rng 1 layer style, Drop Shadow effect, c p dng sn cho layer ny.

www.vietphotoshop.com - L Thun

16

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

2. Chn Layer > New Layer Based Image Map Area.

Mt hnh ch nht m m vin xung quanh s hin ra, bao quanh phm vi b mng ty trong bc
nh. ng vin m ny xc nh khu vc hotspot c hm cha trong image map.

3. Trong nhm Slice palette, click tab Image Map em Image Map palette ln pha trn.
4. Click vo mi tn m rng ty chn Layer Based Settings (nu cn), v chn Polygon t Shape
pop-up menu.
Gi th ng vin mu tr nn gn ging vi hnh dng ca b mng ty, bao gm c bng
cnh thp bn phi ca n.

www.vietphotoshop.com - L Thun

17

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

5. Trong ty chn Quality trn Image Map palette, ko thanh trt hoc g vo gi tr 90 lm cho
ng vin m st hn hnh dng vng nh b mng ty.
6. Trong Image Map palette, g Asparagus trong Name, g pages/veggies.html cho URL, v chn
_blank cho Target pop-up menu.
By gi, trong Layers palette, mt icon hnh bn tay xut hin trn layer Asparagus, biu th rng c 1
layer-based image map.

7. Click vo vng trng ca Layers palette kh chn layer Asparagus, v ri chn File > Save.
S dng cc cng c image map
Khi nhng thnh t bn cn dng cho image maps c b tr mt cch thun li trn nhng layer
ring bit, th vic nh ngha cc vng image-map ny tr nn tht n gin, nh bn thy trong
tin trnh trc.
Tin trnh ny v tin trnh sau na s trnh by cho bn mt cp k thut nh ngha cc image maps
bn trong 1 layer n gin.

www.vietphotoshop.com - L Thun

18

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Phng php th nht cng tng t nh k thut Photoshop m bn dng trc y trong cung
sch ny khi bn chn 1 thnh phn bng cng c Pen. Trc khi bt u lm vic, bn s phi tt cc
ty chn snap-to, vn c chc nng lm cho d dng hn vic b tr tht chnh xc cc im neo ni
m bn mun.
1. Chn View > Snap sao cho lnh khng c chn (tt du kim).
2. Trong hp cng c, hy chn cng c Polygon Image Map (
(

) n pha di cng c Image Map

).

3. Click vo mp ca tri u thit lp 1 im neo.

4. Di chuyn tr chut dc theo bin ngoi ca hnh qu v nhn u , click lin tc nhiu ln thit
lp nhiu im neo hn.
ng lo lng nu nhng im ny khng c b tr hon ho lm v bn s thc hin mt s bin i
hiu chnh n sau.

www.vietphotoshop.com - L Thun

19

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

5. Khi cc im neo hu nh vin hon ton xung quanh qu u , hy click ln im neo ban u
ng kn hnh dng ca image-map. (icon con tr s bin i khi bn tr sang bn phi, cho thy 1
vng trn nh biu th c nhp chut s lm hnh v ng kn)

ng bin image-map mu s xut hin xung quanh qu u vi cc cc im neo ch bn

thit lp cho n.
Dng cc vng chn to cc image maps
Bn cng c th convert cc vng chn(do bn to ra bng cc cng c chn) thnh cc image maps.
By gi bn s th vi nhnh tha l, chn n vi cng c Magic Wand.
1. Chn cng c Zoom v click ln cnh tha l (HERBS) cho ti khi phng i l c gi tr l
300%.
2. Trong Layers palette, chn Background layer.
3. Chn cng c Magic Wand (

www.vietphotoshop.com - L Thun

), n ng sau cng c Marquee (

).

20

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

on, trn thanh ty chn cng c, g gi tr 42 vo ty chn Tolerance v m bo rng hp kim

Contiguous cng ang c chn, hoc l phi chn n ngay lc ny.
4. Click ln nhnh tha l ch nhn Herbs vt ngang qua n.

5. Nhn v gi phm Shift, sao cho con tr cng c Magic Wand xut hin du cng (+) k bn, v cn
thn click ln 1 vng khng c chn ca nhnh tha l. Lp li 2 hoc 3 ln cho ti khi hu ht
nhnh tha l u c chn vng chn khng nht thit phi tht hon ho.

www.vietphotoshop.com - L Thun

21

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Lu : Nu vng chn c v nh khng xut hin sau c nhp chut, bn c th click mt cch
ngu nhin ln th g, lm cho vng chn gp thnh mt khu vc qu rng. Trong trng hp ny,
hy chn Edit > Undo v th li 1 ln na.
6. Chn Select > Create Image Map From Selection m hp thoi Create Image Map. Xc nhn ty
chn Polygon, with Quality, v nhp gi tr 80, click OK.

Trong ca s nh, hnh nh nhnh tha l s m i. 1 ng vin xc nh hnh dng ca image

map xut hin bao quanh nhnh tha l.
7. Chn Select > Deselect g b vng chn.
Trau chut hnh dng image map v n nh lin kt
Trong hai tin trnh trc ta khng th khi to cc dng image-map ph hp mt cch tht hon
ho vi cc mc c m t. Bn s ci thin cc hnh dng ny ngay y thi, v sau n nh
URL v t tn tin cho cc image maps ca bn. Bn s bt u vi image map t thi im nhnh
tha l hin th v c phng i ln 300%.
1. Chn cng c Image Map Select (

). Nu image map xc nh nhnh tha l cha c chn sn

(n mc ng bin ca image-map hin ra nh l mt ng vin cng vi cc im neo), th

hy chn n.
2. Chn 1 trong nhng im neo cha m kht hnh dng ca nhnh tha l v r n n 1 v tr tt hn.

www.vietphotoshop.com - L Thun

22

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Dragging an anchor point Finished image map area

3. Tng bc 1, chn nhng im neo khc v ko r chng n cc v tr mbn cm thy hi lng
vi hnh dng ca image map.

Bn c th thm vo nhng im neo ring l bng cch Shift-click : u tin, nh v con tr ch

bn mun xc nh 1 im t.Nhn v gi phm Shift, cho n khi xut hin mt du cng (+) nh ni
icon tr chut ri hng click. g b im neo, Alt-click (Windows) hoc Option-click (Mac OS). Trong
trng hp ny, 1 du tr (-) xut hin v tr icon tr chut.
4. Trong Image Map palette, g Herbs cho Name, pages/herbs.html cho URL, v chn _blank cho
Target.
5. Hon tt phn cn li ca cng vic vi image map xc nh tri u bng cch lm theo cc bc
sau :

Nhn gi phm spacebar tm thi chuyn sang cng c Hand v r chut cho n khi bn
c th thy c vng image-map qu u .

Chn v di chuyn cc im neo cho ti khi bn hi lng vi hnh dng ca image-map.

www.vietphotoshop.com - L Thun

23

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Chn cc ty bin trong Image Map palette, v g Papaya cho Name, pages/fruits.html cho
URL, v chn _blank cho Target.

6. Chn Select > Deselect Image Maps.

7. Double-click ln cng c Hand (

) hoc cng c Zoom thu nh khung nh.

8. Chn File > Save.

Lu : Nu bn mun xem nh m b qua ng vin m mu blue sng ca image-map, hy chn
nt lnh Toggle Image Maps Visibility [ ] trong hp cng c, hoc nhn phm A. Chn li nt lnh ny
hoc nhn phm A mt ln na xem cc ch th image-map.
Trong chng mc ca bi hc ny bn to 3 lin kt image map v 5 lin kt slice trong bc nh
cho trang Web ca bn. Bn c th tha thng xng ln to thm cc image maps cho qu l v chm
nho nu mun c thm c hi thc hnh, hoc l bn c th tip tc chuyn sang ch mi ti y
cng c.
Kho st tt c cc vng lin kt v to 1 file HTML
Khi bn lu 1 image map trong 1 file HTML, nhng th (tags) HTML cn thit hin th nh ny trong
1 trang Web s t ng c sinh ra. Cch d nht lm iu ny n gin ch l xc nhn ty chn
HTML And Images khi bn lu li bc nh hon chnh.
Mt khi bn to xong 1 file HTML, th vic cp nht phn nh cc thay i (chng hn, cc URLs
hoc vng image-map c hiu chnh hay to mi) tr nn tht d dng.
1. Trong ImageReady, chn Window > Web Content m palette c lin quan. Nu cn, hy click vo
mi tn m rng Image Maps v Slices categories, v ko gc di bn phi ca palette xung
nhn thy c ton b cc mc c lit k.
2. Xem trc bng lit k Web Content vn bao gm cc nh nh (thumbnails) biu th cc slices v
image maps. Lu rng cc image-map thumnails cng bao gm lun c cc ng bin ca cc

www.vietphotoshop.com - L Thun

24

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

vng image map.

3. ng Web Content palette hoc chuyn n khi ng i ca bn.
4. Chn File > Save Optimized As. (Hy cn thn ng chn nhm Save As)
5. Trong hp thai Save Optimized As, hy chp nhn tn mc nh, 15Start.html, v lm theo cc
bc sau :
Chn HTML And Images trong pop-up menu Save As Type (Windows) hoc pop-up menu Format
(Mac OS).
nh v v chn folder Lessons/Lesson15/15MyPage lm a ch ch.
Click Save.
6. Chuyn ra desktop v double-click m file 15Start.html trong ng dng Web browser mc nh
ca bn.
7. Click vo vi vng slices hoc image maps m bn to c v kim tra xem coi liu c bt k
i tng no trong chng khng lin kt c mt cch ng n khng (tc l c mt s khng kt
ni c). Khi bn xong vic, hy chuyn tr v ImageReady, thot khi Web browser ang m trang
15Start.html.
Lu : Trong Photoshop, bn to lp 1 file HTML trong hp thai Save Optimized As xut hin sau khi
hon thin file nh v click OK trong hp thoi Save For Web.
Bin tp thng tin lin kt v cp nht file HTML
Vi image maps trong file HTML khng lin kt c mt cch ng n, bi v ta thay i tn ca
mt s trang ch c nhng m t c th hn i vi cc loi rau qu trong file nh. Trc trc ny
cng d c khc phc trong file ImageReady nguyn thy v sau tin hnh cp nht cho file
HTML.
1. Trong hp cng c ca ImageReady, chn cng c Image Map Select (

).

2. Trong ca s nh, click chn vng image-map ca qu u .

3. Trong Image Map palette, i the URL sang pages/papaya.html.

www.vietphotoshop.com - L Thun

25

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

4. Trong ca s nh, chn image-map ca b mng ty, on i URL trong Image Map palette thnh
pages/asparagus.html.
Lu : Bng cch tng t, bn c th i thng tin lin kt cho slices, bng cch dng cng c Slice
Select (thay v cng c Image Map Select) v Slice palette (thay v Image Map).
5. Chn File > Update HTML.
6. Trong hp thai Update HTML, chn file 15Start.html, v click Open. Click Replace khi hp thoi
Replace Files xut hin, v click OK trong thng bo update.
7. Tr li trnh duyt Web v chn icon refresh hay reload ty trnh duyt, hoc lnh View menu. Click
cc lin kt chc chn rng chng hon ho, v sau tr v ImageReady.
8. Chn File > Close ng file nh. Nu 1 thng bo xut hin nhc nh bn rng file khng m
c na trong Photoshop, hy click Yes cho qua.
Bn c th dng trnh duyt Web ca mnh m v xem file 15Start.html. Bn cng c th m 1 file
trong 1 ng dng x l vn bn hay 1 trnh to Web t mnh kim tra li i vi m HTML.
Cc quy c v t tn file HTML dnh cho Web
Dng quy c t tn file UNIX, bi v nhiu chng trnh network s gin lc nhng tn file di.
Quy c ny i hi 1 tn file phi c ti a 8 k t, c ko theo sau bi 1 phn m rng. Dng
phn m rng l .html hoc .htm.
ng dng nhng k t c bit nh l du hi (?) hoc du sao (*), hoc cc khong cch gia
nhng ch ci trong tn file ca bnmt s trnh duyt c th khng nhn bit tn di. Nu phi dng
nhng k t bit hoc cc khong trng trong tn file, hy kim tra bng 1 ti liu hng dn vic
bin tp HTML dng cho chnh xc. Chng hn, to khong trng gia cc ch ci bn s cn
rt ngn 1 n v khong cch xung 20%.
Bn va hon thnh chng 15. hc thm cch dng hot hnh cho slices v rollovers, hy xem
chng 18, To hnh ng cho trang Web v ImageReady Help.

www.vietphotoshop.com - L Thun

26

Chng 15: To lp cc lin kt bn trong mt bc nh

Photoshop CS

Cu hi n tp
1. Slices l g?
2. M t 5 cch to lp image slices.
3. M t phng php khi to1 slice vi ng bin chnh xc m kht 1 i tng c hnh dng dng
nh b hoc bt thng.
4. Lm th no khi to mt slice khng cha hnh nh ? Mt slice nh vy c to ra nhm mc
ch g ?
5. Nhng im khc nhau v ging nhau gia cc slices v image maps?
p n
1. Slices l nhng vng hnh ch nht ca 1 bc nh m bn c th nh ngha trong Photoshop hoc
ImageReady nhm mc ch ti u ha trang Web. Vi slices, bn c th to lp cc hnh ng, cc
lin kt URLs, hoc cc hiu ng rollovers.
2. Bn c th ch ng to image slices bng cch chn cc vng nh vi cng c Slice. Nhng
phng php linh hat khc to cc slices bao gm : chuyn i cc layers, ng dn hoc vng
chn thnh cc slices bng cch dng cc lnh trong cc menu Layers, Slices, hoc Select. Mt cch
gin tip, cc auto slices s c t ng to ra i vi nhng vng nh b ct lt m bn b qua
khng nh ngha khi dng cc phng php to lp user slice khc.
3. Dng cng c Magic Wand (hoc cng c vng to chn thch hp) trong ImageReady, hy xc nh
1 i tng, v chn lnh Select > Create Slice From Selection.
4. Xc nh slice vi cng c Slice Select. Trong hp thoi Slice Options (trong Photoshop) hoc Slice
palette (trong ImageReady), chn No Image t menu Type. No Image slices c th cha 1 mu nn,
vn bn v m ngun HTML, hoc l chng c nhim v nh 1 trnh gi ch (placeholder) dnh cho
cc th s c thm vo sau .
5. Cc Slices c th c to lp hoc trong Photoshop hoc trong ImageReady; chng lun c dng
ch nht; chng cng c th c nh ngha nh l c nh, hoc khng c nh, hoc c ni dung
Table. Cn cc Image maps ch c th c to ra trong ImageReady ; chng c th mang hnh dng
bt k; v chng lung c ni dung nh. C slices v image maps u c th c nh hnh vi cc
trng thi rollover m bn c th nghin cu thm trong Chng 17, To hiu ng Rollovers cho trang
Web.

www .vietphotoshop.com - Dch bi L Thun

www.vietphotoshop.com - L Thun

27