စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....
စိုင္းသီဟစိုး ဆိုက္မွအားလံုးကို လိႈက္လွဲေႏြးေထြးစြာနဲ႕ႀကိဳဆိုပါတယ္။ ကၽြန္ေတာ္ဆိုက္ကို လာေရာက္သူအားလံုး ကိုယ္စိတ္ႏွစ္ပါး က်န္းမာခ်မ္းသာပါေစလို႕ ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္.....

Tuesday, December 18, 2012



LEARNING WEB DESIGN
Web Design vufawG Yoifcef;pmrsm;
'wYdk m0e f ta&;o;Hk yg;
jynfaxmifpkrNydKuGJa&; 'kdYta&;
wkdif;&if;om; pnf;vkH;nDñGwfrI rNydKuGJa&; 'kdYta&;
tcsKyftjcmtmPm wnfwHhckdifjrJa&; 'kdYta&;
jynfolYoabmxm;
Ä jynfytm;udk;ykqdef½kd; tqkd;jrif0g'Drsm;tm; qefYusifMu/
Ä EkdifiHawmf wnfNidrfat;csrf;a&;ESifh EkdifiHawmf wkd;wufa&;udk aESmifh,SufzsufqD;olrsm;tm; qefYusif
Mu/
Ä EkdifiHawmf\ jynfwGif;a&;udk 0ifa&mufpGufzuf aESmifh,Sufaom jynfyEdkifiHrsm;tm; qefYusifMu/
Ä jynfwGif;jynfy tzsuform;rsm;tm; bkH&efoltjzpf owfrSwf acsrIef;Mu/
Eidk if aH &; O;Dwncf su f (4) &yf
Ä EkdifiHawmfwnfNidrfa&;? &yf&Gmat;csrf;om,ma&;ESifh w&m;Oya'pkd;rdk;a&;
Ä trsKd;om; jyefvnf pnf;vkH;nDñGwfa&;
Ä ckdifrmonfh zGJUpnf;ykH tajccHOya'opf jzpfay:vma&;
Ä jzpfay:vmonfh zGJUpnf;ykH tajccHOya'opfESifhtnD acwfrD zGHUNzdK;wkd;wufaom EkdifiHawmfopfwpf&yf
wnfaqmufa&;
pD;yGm;a&; OD;wnfcsuf (4) &yf
Ä pkdufysKd;a&;udk tajccHí tjcm;pD;yGm;a&;u@rsm;udkvnf; bufpkHzGHUNzdK;wdk;wufatmif wnfaqmuf
a&;
Ä aps;uGufpD;yGm;a&;pepf yDjyifpGm jzpfay:vma&;
Ä jynfwGif;jynfyrS twwfynmESifh t&if;tESD;rsm; zdwfac:í pD;yGm;a&; zGHUNzdK;wkd;wufatmif wnf
aqmufa&;
Ä EkdifiHawmfpD;yGm;a&; wpf&yfvkH;udk zefwD;EdkifrIpGrf;tm;onf EkdifiHawmfESifh wkdif;&if;om;jynfolwkdY\
vuf0,fwGif&Sda&;
vlrIa&; OD;wnfcsuf (4) &yf
Ä wpfrsKd;om;vkH;\ pdwf"mwfESifh tusifhpm&dwå jrifhrm;a&;
Ä trsKd;*kPf? Zmwd*kPfjrifhrm;a&;ESifh ,Ofaus;rItarGtESpfrsm; trsKd;om;a&;vu©Pmrsm;
raysmufysufatmif xdef;odrf; apmifha&Smufa&;
Ä rsKd;cspfpdwf"mwf &Sifoefxufjrufa&;
Ä wpfrsKd;om;vkH; usef;rmMuHhckdifa&;ESifh ynm&nfjrifhrm;a&;
LEARNING WEB DESIGN
Web Design vufawG Yoifcef;pmrsm;
pmrcl GijhfyKtrwS f - 4003400307? tz;kH ciG jhfyKtrwS f - 4007180707
apmiaf & - 500? wezf ;kd -5000 usy?f yxrtMurd /f 2007 cEk pS f Mo*wk vf /
O;D armivf iG f aevi;f yEkH ydS wf ukd f ? awmi'f * kH purf ZI ek f (2)wiG f yEkH ydS íf
a':0ikd ;foZiaf X;vidI f (atmiyf ikd rf i;f pmay)?
trwS f 222? pu½f vkH r;f ? Armat;&yuf uG ?f a'gy kHu xwk af 0on/f
197 (B), 33 rd Street, Yangon,
Myanmar.
pmjyKol
OD;aomif;0if; (yef;cs,f&D)
rmwdum
tydkif; wpf Getting Start 7
tcef; 1 pwif rdwfqufjcif; 9
tcef; 2 Web Work \ tajccHvkyfief;rsm; 21
tcef; 3 Web ay:wGif rdrd\ Web Page &,ljcif; 33
tcef; 4 Web Design ESifh Print Design uGmjcm;ykH 51
tcef; 5 Web twGuf'DZkdif; pDpOfaqmif&Gufjcif; 67
tydkif; ESpf HTML ukd avhvmjcif; 77
tcef; 6 Creating a Simple Page (HTML overview) 79
tcef; 7 Text rsm;tm; format vkyf,ljcif; 101
tcef; 8 Graphic Element rsm; xnfhoGif;jcif; 137
tcef; 9 Adding Links 159
tcef; 10 Tables 179
tcef; 11 Frames 211
tcef; 12 Color on the Web 231
tydkif; okH; Web Graphic rsm;ukd zefwD;,ljcif; 245
tcef; 13 All About Web Graphics 247
tcef; 14 Creating GIFs 263
tcef; 15 Creating JPEGs 297
tcef; 16 Animate GIFs 313
tcef; 17 Web Design Techniques 325
tcef; 18 Building Usable Web Sites 355
tcef; 19 Web Design twGuf aqmif&ef? a&Smif&efrsm; 387
Glossary 401
6 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 7
tyidk ;f wpf
Getting Started
urmÇ wp0f e;fv;Hk & dSueG yf sLwmrsm;tcsi;f csi;f cswd qf urf I jyKvyk xf m;&odS n hfwpuf rmÇ v;Hk qidk &f m
tBu;D rm;q;Hk ueG &f upf epBfu;Du kdtiwf meu[f k em;vn fo&d xdS m;Muon/f rwS wf r;f
rwS &f mrsm;? owi;f rsm;? pmtyk rf sm;? ½yk yf ?Hk "mwyf rHk sm;EiS hf ½yk &f iS rf sm;? pum;ajymcsuEf iS hf
aw;*wD rsm;wuYdk kd non linear structure ypHk tH jzp fueG yf sLwmu dkto;Hk csum
tiwf meuwf iG fwijfyrrI sm;tm; wnaf qmu,f Mluon/f tqydk g wijfyrrI sm;u kdHypertext
documents[ k ac:q dkowrf wS xf m;Muon/f
tiwf meutf wiG ;f cswd qf u f aqmi&f uG rf vI yk if e;f &ywf iG f ay;yjYdkci;f ? vucf jHci;f ?
tjyetf veS jfyKjci;f upd tö 00u kd Hypertext Protocal (HTTP) jzi hf to;Hk cs
aqmi&f uG rf I jyKMu\/ urmÇ wp0f e;fv;Hk &d S HTTP server rsm;twuG f Hypertext
documents rsm; wn&f adS omae&mu kdWorld Wide Web[ k ac:qMdkuaMumi;f o&d NdSy;D
jzpyf gvrd rhf n/f ¤i;fu kdtcsKuUd twadk umuof auwF tm;jzi hf www [íl vn;f aumi;f ? W3
[íl vn;f aumi;f ? web[íl vn;f aumi;f ac:a0:o;Hk pMJGuon/f
xodk aYdk om web rsm;u kd rnof Ydk ypHk jHyK wnaf qmu,f Mluoen;f ? web rsm;\
vyk if e;f aqmiwf m obm0rsm;on f rnof &Ydk MdSurnef n;f ponwf uYdk kdtajccíH
web designtaMumi;fu kd avvh m&e fueG yf sLwmynm&y foiMfum;aeMuonhf
pmoiof m;rsm;twuG fvtdk yaf eapygon/f Web Designu dkoiMfum; avvh mrqI &dk mü
v;Hk 0 o&d edS m;vnxf m;jci;f r&adS omorl sm;tjyi fvu&f dS en;f ynmavmutwiG ;f ü
usivf naf eMuorl sm;yi f yrdk dk zewf ;D rrI sm; jyKvyk Ef idk af &;twuG ftpOwf pudk f
avvh mqn;f y;l rrI sm; &ydS gon/f
8 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 9
,aeYacwfwGif web taMumif; us,fus,favmifavmif ajymvmMuNyDjzpfojzifh ¤if;udk rodusKd;
uRefjyKíae&ef rjzpfEkdifawmhay/ tcGifhtvrf;opfwpfcktwGufaomfvnf;aumif;? NydKifqkdifrI
rufvkH;wpfcktaejzifhvnf;aumif;? urÇmu odcGifh&&Sda&; tcGifhta&;wpfckudk arQmfrSef;ívnf;
aumif; vlawmfawmfrsm;rsm;onf pdwf0ifwpm; vIyf&Sm;vmMu&ayonf/ Web onf avmu
om;tm;vkH;udk vTrf;rkd;rIjyKvmoa,mif xifjrifvmrd\/
Web design ESifh ywfoufí avhvmoifMum;olrsm;onf tajccHobm0csif; rwlnDMu
aomfvnf; qE´toD;oD;onf rnfuJhokdY web page rsm;udk wnfaqmufEkdifrnfenf; [laom
pdwf0ifpm;rIrSm twlwlyifjzpfMuonf/ Oyrmtm;jzifh vufawGUusus awGUqkHcGifh&cJholtcsKdU\
b0toD;oD;udk rdwfqufwifjy&rnfqkdvQif
]]uRefawmfonf ykHESdyfvkyfief; 'DZkdif;q&mtjzpf vkyfukdifvmcJhonfrSm oufwrf;tm;jzifh
17 ESpf&SdNyD jzpfygonf/ ,ckawmh uRefawmf\azmufonfrsm;u web site twGuf tyf
ESH&ef qE´&SdaeMuNyD jzpfygonf}}
]]½kH;vkyfief;wpfckwGif twGif;a&;rª;tjzpf uRefr tvkyfvkyfvsuf &Sdaeygonf/ uRefr\
olaX;u tvkyform;rsm;tMum; ukrÜPD\ owif;tcsuftvufrsm;udk od&SdMuap&ef
XmewGif; web site av;wpfck zefwD;ay;Ekdifjcif; &Sd r&Sd uRefrukd ar;vmygonf}}
]]ESpftawmfMumyif programmer av;wpfOD;tjzpf uRefawmf &yfwnfvmcJhygonf/ ,ck
awmh visual design ykdrkd zefwD;,lcsifaerdygonf/ uRefawmfhtjrifwGif tawGUtMuHKopf
rsm; &&Sda&;twGuf web wnfaqmufEkdifygu tcGifhtvrf;aumif;rsm; jzpfvmp&m
taMumif;&Sdonf[k xifjrif,lqaerdonf}}
]]uRefawmf\ taygif;toif;awmfawmfrsm;rsm;onf web design e,fxJokdY ajymif;a&TU
0ifa&mufoGm;Muonfukd wpfcsdefvkH; awGUae&ygonf/ uRefawmf ukd,fwkdifvnf; designer
wpfa,mufjzpfaomaMumifh tm;usvmrdygonf/ okdYayrJh ,ckrS ¤if;wkdYuJhokdY
ajymif;a&TUvkyfukdifvQif aemufrsm;usaeNyDvm;[k cHpm;ae&ygonf}}
pwif rdwfqufjcif;
tcef; 1
10 WEB DESIGN vufawG Yoifcef;pmrsm;
]]uRefawmfonf yef;csD? yef;yktEkynm&SifwpfOD; jzpfygonf/ uRefawmfhtaejzifh rdrd\
vuf&mrsm;jzpfaom yef;csDum;csyfrsm;ESifh yef;ykxkxm;rI erlemrsm;udk online wGif rnfokdY
wifjy&rnfukd odvkdaompdwf jyif;jyaerdygonf}}
]]rMumao;rDuyif uRefawmfhtaejzifh aumvdyfrSynm&yfrsm; atmifjrifpGm oifMum;
NyD;pD;cJhygonf/ Web design vkyfief;rsm;wGif 0ifa&muf vkyfukdifvkdygu tvkyftukdif
tawmfaygrsm;onf[k em;vnfod&Sdxm;ygonf}}
rnfokdYaom &nf&G,fcsuf? cHpm;csufrsm;jzifh web design vkyfief;udk pdwf0ifpm;vmMu
onfjzpfap? rnfokdY pwif avhvmvkyfukdif&rnfenf;[lonfh ar;cGef;udk vlwkdif; &if0,fykduf
xm;Mu&ygonf/
odyfaemufusaeNyDavm
tu,fírsm; web design vkyfief;udk ,cktcsdefrS pwif avhvmoifMum;ygu odyfaemufus
aeNyDvm;[k ar;cGef;ar;vmygu vkH;0 aemufusrIr&Sdao;aMumif; odxm;apvkdygonf/ tifwm
eufukd tokH;jyKolwkdif; rdrdukd,fykdif web page rsm; xm;EkdifaeMuNyD jzpfaomfvnf; rdrdtwGuf
aemufusrI r&Sdyg/ rdrd\taygif;toif;rsm;u rdrdxufOD;pGm tawGUtMuHKrsm; &aeMuNyD jzpf
aomfvnf; rdrdtwGuf&,lEkdif&ef ae&mtajrmuftjrm; &Sdaeygao;onf/ vkyfief;tuGuftuGif;
rsm;pGm &Sdaeygonf/ vkyfief;Xmewkdif;u web page rsm; zefwD;Ekdifolukd wrf;w&SmazGaeMu&
qJjzpf\/ xkdYtjyif enf;ynm wkd;wufrIESifhtwl vuf&Sdtajctaersm;xuf jrifhrm;aom
tcGifhtvrf;rsm; us,fjyefYpGm jrifawGUae&qJ jzpfonf/
vuf&SdjrifawGUae&aom web page wnfaqmufrIrsm;wGif trsm;pkrSm avhvm vkyfukdif
aeqJ taetxm;ESifh tv,ftvwftqifhavmufom trsm;pku yg0ifaevsuf &Sdygonf/
rdrdtwGuf wDxGif wnfaqmufolwpfOD;tjzpf &&SdEkdifrnfh tajctaersm;pGm tcGifhta&; rsm;pGm
&SdaeqJjzpfaMumif; tjynfht0 ,kHMunfxm;Ekdifrnfjzpf\/
rnfokdY tpysKd;&rnfenf;
yxrtqifhtaejzifh HTML ESifh ywfoufonfh A[kokwrsm;? server rsm;\ tcef;u@ESifh
browser rsm; ta&;ygykHwkdYtygt0if web vkyfief;rsm; rnfokdY&Sdonf qkdaom tajccHrsm;udk
em;vnf oabmaygufxm;&rnfjzpfonf/ okdYygí qufvufazmfjyay;rnfh tykdif;u@
taMumif;t&mrsm;udk zwf½Iavhvm&efom &Sdawmhonf/ tajccHtm;vkH;ukd jcHKikHrdoGm;onfESifh
web ay:wGif t&if;tjrpfqkdif&m taxmuftuljyK resource rsm;pGmudk qufvuf &SmazG,l
Ekdifygonf/ þvkyfief;e,fy,ftwGuf avhvmp&m pmtkyfpmwrf;rsm;pGm &SdaeaMumif; em;vnf
oabmaygufvmygvdrfhrnf/ jrefjrefqefqef wwfuRrf;vkdygu web design oifwef;rsm;udk
wufa&muf oifMum;&efom&Sd\/ tcsdefjynfh wufa&muf&onfh oifwef;rsKd;udk tajctaeray;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 11
vQifyif pae? we*FaEG okdYr[kwf naeykdif;oifwef;rsm;udk wufa&mufEkdifvQifyif tawmfhudk
oifhjrwfvSygonf/
Web design ukd toufarG;0rf;ausmif;jyK&ef taetxm;rsKd;txd rarQmfrSef;xm;ygu
,ckuJhokdYaom vrf;ñTefpmtkyfrsm;udk zwf½I avhvm½kHjzifh vkHavmufaom tajctaeukd &&SdEkdif
rnfjzpf\/ wpfNydKifeufwnf;qkdovkd Macromedia Dreamwaver uJhokdYaom web design
tool rsm;ukd ,ckvrf;ñTefESifhtwl aygif;pyfavhvmygu ukd,fykdif web page wpfckudk ukd,fwkdif
yDjyifpGm a&;qGJ,lEkdifrI &Sdygvdrfhrnf[k tmrcHvkdygonf/
avhvm oifMum;rItwGuf rnfonfhtcsufrsm; vdktyfoenf;
tvGef ar;oifhar;xkdufaom ar;cGef;jzpfygonf/ tqkdygar;cGef;\tajzrSm rdrdtaejzifh rnf
onfhae&mwGif pwifvkyfukdifí rnfonfht&mudk vkyfaqmifvkdygoenf;[laom tajctaersm;
tay: rlwnfaernfjzpf\/ Web design wGif vkyfaqmifp&m vkyfief;trsKd;rsKd; &Sdygonf/
Web design qkdonfh a0g[m&onf tm;vkH;udkjcHKí ajymqkdjcif;om jzpfonf/ Graphic
design rS programming txd pnf;pepfrsm;pGmjzifh trsKd;rsKd; 0ef;&Hyg&Sdaeygonf/ wpfckcsif;
avhvm,l&rnfjzpf\/
rdrdukd,fykdif web site ao;ao;av;wpfckudk 'DZkdif;ykHpHjyKaeonfqdkygu rdrd xdawGUcJh&aom
udpöt00udk jrifa,mif rSwfrdae&rnf/ þtcsufukd vlwkdif; owdxm;rdMurnf r[kwfay/
rdrd edpö"l0 vkyfukdifaexkdif&rIrsm;wGif &Hzef&Hcg csufa&;jyKwfa&;vkyfrdrnf? &Hzef&Hcg tdrfoefY&Sif;
a&;vkyfrdrnf? &Hzef&Hcg aiGpm&if; wGufcsuf,l&rnf/ xkdYtwl vlrIqufqHa&;? pkdufysKd;a&;
ponfjzifh rodromyg0ifaqmif&GufrIudpöt00onf tcsdefykdif; graphic designer tjzpf vnf;
aumif;? pma&;q&mtjzpfvnf;aumif;? xkwfvkyfoltjzpfvnf;aumif; rodrom vkyfukdifae&
jcif;yifjzpf\/ jrifawGU&orQ tajctaersm;ESifhyif web page ukd pdwful;,lEkdifygonf/
tBuD;pm; web site rsm; wnfaqmufvkdvQifrl wpfOD;wpfa,mufwnf;ESifh wnfaqmuf
,l&ef tvGefcufcJvS\/ okdYygí toif;tzGJUjzifh twlwuG wnfaqmuf,lrSom aumif;rGefaom
'DZkdif;wpfck jzpfvmEkdifrnf/ tzGJU0ifwkdif; ukd,fpDukd,fpD u@tvkduf 'DZdkif;ykHpHtwGuf ykdif;í
wm0ef,lvkyfaqmifrSom atmifjrifpGmtaumiftxnfazmfEkdifrnf/ rdrdtaejzifh pG,fpkH& wpfukd,f
awmf web designer wpfOD;tjzpf rEkdifeif;vQifyif web design BuD;\ vkyfief;wpfckwGif
tuRrf;usifqkH;jzpfatmif BudK;yrf;oifhonf/ rdrd vuf&SduRrf;usifNyD;jzpfonfhtqifhESifh topf
topfaom tqifhjrifhpau;wkdYtm; rjzpfrae qufpyf,l&rnf jzpf\/
*&yfzpf'DZdkif;
Web onf tjrifykdif;qkdif&mt0ef;t0kdif;wGif wnf&SdaecJhonfjzpfaomaMumifh web page rsm;
twGuf wifjycsufESifh 'DZdkif;ykHpHrsm;udk txl;tav;xm; tom;ay; aqmif&Guf,l&onf/
12 WEB DESIGN vufawG Yoifcef;pmrsm;
Web page wpfckay:wGif jrifawGU&orQ tajctaetm;vkH;onf pDpOfaqmif&Gufol graphic
designer ay: rlwnfvsuf&Sd\/ *&yfzpfykH&dyf? ykHpHzGJUpnf;rI? ta&miftaoG;? tcif;tusif;
ponfwkdYjzifh wefqmqifxm;&onf/ Web wGif rdrdonf graphic designer wpfOD; taejzifh
om vkyfukdifrnfqkdygu rdrdtaejzifh rnfonfh programming ukdrQ avhvm&ef rvkdtyfay/
pD;yGm;jzpf vkyfukdifaomvkyfief;wGif wpkdufrwfrwf toufarG;0rf;ausmif;jyKawmhrnfqkd
vQif xkH;pHtwkdif; *&yfzpf'DZkdif;oifwef;wpfckckukdawmh wufxm;&rnf/ NyD;vQif industry
standard jzpfonfh Adobe photoshop ukd txl; uRrf;usifxm;oifhonf/ þokdYtajctae
rsm; &,lxm;NyD;aemuf web wpfckudk vG,fvG,fulul uRrf;uRrf;usifusif jzpfap&ef vufvSrf;
,lEkdifrnfh taetxm;odkY a&mufoGm;ygvdrfhrnf/
Web design vkyfief;wGif graphic onf ta&;BuD;qkH; tpdwftykdif;wpfck jzpf\/
0goemtavsmuf vkyfukdifaom web designer rsm;onf image editing software rsm;
rnfokdYrnfykH tokH;cs&rnfukd tenf;qkH; odxm;&ef vkdtyfonf/ xkdYtjyif aumif;rGefaom
'DZkdif;wpfck\ tajccHrsm;udkvnf; okawoejyKxm;oifhygonf/
qufoG,frIMum;cH'DZdkif;
pmrsufESmrsm;udk rnfokdY Munfh½IEkdifrnfhudpöESifh graphic designer ywfoufvmrnfqkdygu
interface design ac: qufoG,frIMum;cH'DZkdif;onf page work rsm;tay: rnfokdY vkyfukdif
rnfenf;qkdonfhtcsufjzifh rSef;q&onf/ Web site wpfck\ interface wGif site wpfckudk
0ifa&muf&rnfhenf;vrf;rsm;jzpfonfh button, link, navigation device rsm; ponfwkdY yg0ifae
\/ xkdYtwl page rsm;udk zGJUpnf;aqmif&GufrIrsm;vnf; yg0ifonf/ Web site awmfawmf
rsm;rsm;onf interface design ESifh graphic design wkdYukd BudK;rsm;uspfouJhokdY yl;wGJ zefwD;
xm;aMumif; awGU&\/ Interface designer rsm;onf software design jyKvkyfonfh tajccH
tawGUtMuHKrsm; &Sdxm;&rnf jzpf\/ xkdYtwl graphic designer wpfOD;onf interface
design taMumif; em;vnfxm;NyD; jzpf&ygrnf/
owif;tcsuftvuf'DZdkif;
Information design ac: owif;tcsuftvuf'DZkdif;ESifh ywfoufí web design \
rsufESmpmrSmyif tvG,fwul awGUjrifEkdifonf/ taMumif;tcsufrsm; zGJUzGJUpnf;pnf; yg0ifae
aprIyifjzpfonf/ Information designer [kqkdqkd? information architect [líac:ac: tqkdyg
'DZkdif;orm;rsm;onf o½kyfjyoauFw ½kyfykHZ,m;rsm;ESifh ¤if;wkdY\ tpOftquf jyKpk xm;&SdrI
wkdYudkom vkyfukdifaqmif&GufMuonf/ ¤if;wkdYonf graphic ESifh text file udpörsm;udk ukdifwG,f&ef
rvkdtyfay/ rnfokdYyifjzpfap web site wpfck zefwD;rI vkyfief;&yfwGif information design
u@onf ta&;BuD;aom aqmif&Gufcsuftjzpf yg&Sdae&ygonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 13
tcsKdUaom owif;tcsuftvuf 'DZkdif;orm;rsm;wGif library science ac: pmMunfh
wkdufodyÜHynmykdif; tajccHrsm; &Sdxm;MuNyD;jzpf\/ xkdtajccH&Sdolrsm;twGuf owif;tcsuf
tvuf 'DZkdif;vkyfief;wGif rsm;pGm taxmuftuljyKEkdifonf[k qkd&rnfjzpfaomfvnf; bGJU&
tqifhtxd ynmoifMum;cJhzl;olrsm;twGufvnf; csOf;uyf avhvm&mwGif tqifajy
Ekdifygonf/ (Information design ESifh ywfoufí tao;pdwfudk qufvufazmfjyay;OD;rnfh
u@rsm;wGif yg0ifygvdrfhrnf/)
HTML xkwfvkyfjcif;
Web design vkyfief; taumiftxnfazmf&mwGif site wpfcktjzpf zefwD;&rnfh HTML
document rsm;twGuf zefqif;wnfaqmufrIESifh tjypftemtqm &SmazG jyKjyifrItykdif;vnf;
wpfpdwfwpfa'o yg0ifaeonf/ Document rsm; web wGif wnfaqmuf,l&mwGif Hypertext
Markup Language (HTML) udk tokH;jyK&\/ xkdYaMumifh 'DZkdif;xkwfvkyfolwkdYonf HTML
ESifhywfoufonfh A[kokwtawGUtMuHKrsm;? scripting ac: rSwfwrf;ynm okdYr[kwf programming
oabmobm0 tcsKdUwkdYudk em;vnfod&SdNyD; jzpfoifhonf/ tcsKdU web design
firm BuD;BuD;rsm;wGif HTML ESifh coding ukd ukdifwG,fajz&Sif;Ekdifrnfh development tzGJUwpfckudk
xm;&Sdonf/ tajccH HTML ukdvnf; ukd,fwkdifavhvmrIjzifh tvG,fwul od&SdEkdifygonf/
y½dk*&rfjyKvkyfjcif;
tjyeftvSef aqmif&Gufcsufrsm;? ykHpHjyKjcif;rsm;uJhokdYaom tqifhjrifh web functionality
aqmif&GufrIrsm;wGif scripts writing rsm;? program ESifh applications writing rsm;udk uRrf;
usifpGm vkyfukdif&ef vkdtyfygonf/ okdYrSom database rsm;ESifh server rsm;ukd ukdifwG,fajz&Sif;
,lEkdifrnfjzpfonf/ Web page vkyfief;rsm;\ aemufuG,f programmer awmfawmfrsm;rsm;
vkdtyfygonf/ Professional programmer rsm;onf rnfokdYaomtcgrQ graphic file ESifh
pages arrangement udpörsm;udk vkyfukdifay;vdrfhrnfr[kwfay/ Programmer wpfOD; jzpfvkd
olwkdif; uGefysLwmodyÜHbGJUwpfckudkawmh ykdifqkdifxm;oifhonf[k qkdaomfvnf; tajccH uGefysL
wmoifwef; NyD;pD;NyD; ukd,fwkdif EIdufEIdufcRwfcRwf avhvmqnf;yl;&if; programmer jzpfvm
olrsm;vnf; &SdMuygonf/
pmvHk;? ½kyfoH tpktpnf;jzpfonfh Multimedia
jrif&olwkdif; tm½kHpkdufvmaprnfh web wpfckjzpfvmap&ef pmvkH;? ½kyfoHtpktpnf;rsm;? vIyfvIyf
&Sm;&Sm;zefwD;rI animation rsm;? tjyeftvSef aqmif&Gufay;csufrsm;jzpfonfh interactivity
rsm; ponfh Multimedia rsm; aygif;pyfpDpOf vkyfukdif,l&ygonf/ þokdY aqmif&GufEkdif&ef
Macromedia Flash okdYr[kwf Director ponfh aqmhzf0JBuD;rsm;rS multimedia tool rsm;udk
14 WEB DESIGN vufawG Yoifcef;pmrsm;
avhvmvQifyif aqmif&GufEkdifygvdrfhrnf/ aemufcHtoHrsm;udk xnfhoGif;zefwD;ay;Ekdif&efvnf;
vkdtyfaernf jzpf\/ Standard multimedia tool rsm;udk uRrf;uRrf;usifusif vkyfukdifEkdifol
rsm;ukdom web development ukrÜPDrsm;u vdkvdkvm;vm; &SdwwfMu\/ xdkYtjyif multimedia
designer rsm; yuwdÓPfjzifh zefwD;EkdifrItwGuf tjrif&Sdolrsm;qkdvQif ykdí OD;pm;ay;
wwfMuygonf/
Java udk avhvm&ef vdktyfrnfvm;
Web design wpfck jyKvkyfvkdolrsm;onf Java ESifh ywfoufonfhpmtkyfrsm; 0,f,l zwf½IMuol
awmfawmfrsm;rsm;udk MuHKawGU&wwfygonf/ tu,fíom tqkdygpmtkyfrsKd; r0,f,l&olrsm;
jzpfygu 0,f,l&ef rvkdtyfaMumif; tMuHjyKvkdygonf/ Web designer wpfOD;twGuf Java
programming ukd od&Sdxm;&ef rvkdtyfay/ HTML omvQif web site rsm; zefwD;&mwGif
t"duae&mu yg0ifaernf jzpf\/
HTML (Hyper Text Markup Language)
Web page document rsm; a&;om;&eftwGuf tokH;jyKaom language jzpfonf/ (Learning
Web Design u@wGif tao;pdwf qufvufazmfjyay;&ef &Sdygonf/) HTML ukd
a&;om;rIonf programming r[kwfay/ vufa&;wkdvufESdyfpuf enf;ynm ryg0ifonfh
½kd;½kd;&Sif;&Sif; word processing toGiftjyifrsKd;om jzpf\/
Web design vkyfief;wGif yg0if ywfoufolwkdif; HTML \ vkyfief;pOf oabmw&m;udk
tajccH em;vnfod&SdNyD; jzpfae&ygrnf/ vkdtyfcsuftwkdif;twmtaejzifhrl rdrd vkyfukdifvkdonfh
taetxm;tqifhay: rlwnfaeygvdrfhrnf/ vuf&Sd &SdaeNyD;jzpfaom HTML editing tool
rsm;uvnf; taxmuftulrsm;pGm jyKay;Ekdifygonf/
Style Sheets
HTML ukd uRrf;usifNyD;onfESifh Cascading Style Sheets (CSS) ukd vufawGU BudK;pm;
vkyfukdifMunfh&ef vkdtyfygonf/ Text and page format ukd xdef;csKyfEkdifa&;twGuf style
sheet u aqmif&Gufay;\/ tvkdtavsmuf xkwfvkyfrItwGufvnf; taumif;qkH; aqmif&Guf
ay;Ekdifonf/ Web twGuf style sheet onf opfqef;aeqJjzpfojzifh browser tm;vkH;wGif
awmh yg&SdcsifrS yg&Sdygvdrfhrnf/ aemufESpftenf;i,ftwGif; Style Sheet onf ta&;ygvmrnf
jzpfaomaMumifh rvJGraoG avhvm&ayawmhrnf/
JavaScript
JavaScript [laom a0g[m&aMumifh JavaScript onf Java ESifh vkH;0 ywfoufaeapvdrfhrnf
[k r,lqoifhay/ JavaScript onf web-specific scripting language wpfckom jzpf\/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 15
Web page xJwGif txl;jyK aqmif&Gufcsufrsm; xnfhoGif;rIvkyfief;twGuf tokH;jyKonf/
Window topfwpfck xGufay:vmjcif; okdYr[kwf ¤if; window tay: mouse jzwfoGm;
aomtcg wpfckck ajymif;vJrI jzpfay:apjcif; ponfwkdYuJhokdY pDrHrIrsKd;udk jyKvkyfay;onf/
JavaScript wpfckukd avhvmjcif;onf programming language wpfckudk avhvmjcif;om
jzpfonf/ okdYtwGuf eufeuf½dIif;½dIif;awmh avhvm&rnfjzpfaomfvnf; JavaScript wpfckudk
ukd,fwkdif a&;om;onftxd avhvm&efrvkday/ Tool rsm;udk tao;pdwf tokH;cswwf&efom
vkdtyfygonf/
DHTML (Dynamic HTML)
DHTML onf oD;jcm; programming language wpfck jzpfonf/ HTML, JavaScript ESifh
CSS ukd aygif;pyf ukdifwG,fEdkif&ef tokH;jyKonfh page element rsm; a&GUvsm;jcif;? ajymif;vJjcif;
rsm;udk jyKvkyfay;aomenf;jzpfojzifh dynamic [k ac:a0:jcif;jzpf\/ taMumif;rSm browser
wkdif;onf enf;vrf;trsKd;rsKd;jzifh DHTML content udk ukdifwG,f xm;&aomaMumifhjzpfonf/
pdwf0ifpm;zG,f vSnfhpm; zefwD;rIrsm;udk DHTML jzifh jyKvkyfay;\/ DHTML code rsm;onf
tqifhjrifh web production uRrf;usifrIrsm;[k qdkEkdifygonf/ Web production ESifh programming
wGif txl;uRrf;usifrIrsm;vkdygu DHTML ukd avhvmjcif;jzifh taxmuftulrsm;pGm
ay;Ekdifrnfjzpfonf/ vlwkdif;twGufawmh rjzpfrae vkdtyfaeonf r[kwfay/ Macromedia
Dreamweaver wGif tvGefvG,fulaom interface wpfckjzifh tajccH DHTML trick rsm;?
animation rsm;udk tokH;csEkdif&ef ay;xm;onf/
CGI Programming
tcsKdU web page rsm;wGif ykHpHZ,m; form rsm;? taMumif;tcsuf tpktpnf; database rsm;
yg&Sdaewwfojzifh tokH;jyKolxHokdYvnf;aumif;? tokH;jyKolxHrSvnf;aumif; tykdYt,l vkyfEkdif
ap&ef txl;pDrHxm;aomy½kd*&rfrsm;tm; xm;Mu&onf/ xkduJhokdYaomy½kd*&rfrsm;udk CGI
(Common Gateway Interface) script rsm;[k ac:ygonf/ Programming Language
wpfrsKd;rsKd;wGifyif a&;om;EkdifMuonf/ omreftm;jzifh þokdYa&;om;aompepfrsm;onf web
designer rsm;twGufxuf programmer territory twGuf jzpfaewwfygonf/
XML
XML onf eXtensible Markup Language \ twkdaumuf a0g[m&jzpfonf/ HTML
uJhokdYyif uGif;quf language av;wpfckomjzpfonf/ BuD;rm;aom pau;twkdif;twm&Sdonfh
vkyfief;rsm;twGuf tokH;jyKwwfMuonf/ acgif;pOfrsm;? pmykd'frsm;? ñTef;qkdcsufrsm; pouJhokdY
page wpfckay:wGif element rsm;ESifhtwl HTML ukd,fwkdifyg0ifNyD; vkyfukdifapaom enf;vrf;
jzpf\/ a&;om;oltrnf? wnfaqmuf,laomaeY? aiGpm&if; eHygwfrsm; paom document
16 WEB DESIGN vufawG Yoifcef;pmrsm;
rsm;\ yg&Sdonfh taMumif;tcsufrsm;twGuf ykHpHrsm;udk cGJjcrf;pdwfjzm&mwGif XML ukd tokH;cs
ygonf/ XML onf rdrd\ information ESifh vkdufavsmnDaxG jzpfaprnfh tag rsm;ukd tpkH
vkduf zefwD;ay;Ekdifjcif;onfyif tvGefpGJrufp&m taumif;qkH; jzpfvm&\/ Oyrmtm;jzifh
publishing toGiftjyifrsKd;wGif <ingredient> <instruction> ESifh <serving> ponfh XML
tags rsm;jzifh wefqmqifxm;MurnfjzpfouJhokdY bank taetxm;rsKd;wGif <account>
<balance> ESifh <date> [laom XML tag rsm;jzifh rGrf;rHjyifqifMuonf/ Application
rsm;tMum; data rsm;udk transferring vkyfjcif;ESifh complex database rsm;twGif; data
rsm;udk ukdifwG,f ajz&Sif;jcif;wkdYtwGuf XML onf tvGeftm;aumif;aom tool wpfcktjzpf
aqmif&Gufay;rnf jzpf\/
Java
Applet taejzifh od&Sdem;vnfxm;cJhMuaom web twGuf tao;pm; application rsm; zefwD;
&eftwGufrl Java ukd tokH;jyKaumif; jyKEkdifp&m&Sdygonf/ ¤if;onf ½IyfaxG;rIvkyfief; tqifhqifh
yg&SdNyD; jynfhpkHaom complete and complex programming language wpfckjzpfonf/ tBuD;
pm;vkyfief;&yfBuD;rsm;wGif omreftm;jzifh tokH;jyKMu\/ Java programmer wpfOD;jzpfvkdvQif
awmh Java ukd avhvm&rnfjzpfonf/ tu,fíom web designer wpfOD;jzpf&efom &nf&G,f
csuf&Sdol wpfOD;wpfa,muftwGuf Java ESifh ywfoufí wpkd;wpdrQ rodvQifyif jzpfygonf/
Web design jyKvkyf&eftwGuf
rnfonfht&mrsm; 0,f,l&rnfenf;
Professional web designer rsm;onf [mh'f0Jykdif;qkdif&m ypönf;rsm;jzpfap? aqmhzf0Jykdif;qkdif&m
ypönf;rsm;jzpfap tawmftoifh&SdaeNyD; jzpf&rnfqkdonfrSm ,kHrSm;oHo, jzpfp&m taMumif;
r&Sdygay/ wdwdusus rnfonfhypönf;rsm;awmh rvGJraoG &Sdukd&Sdae&rnf [laom taetxm;
rsKd;txd ajymMum;&efrSm rjzpfEkdifyg/ a,bk,stm;jzifh jcHKikHajymqkdEkdifrnfh tajctaeom &Sdyg
onf/
Equipment
atmufygypönf;rsm;&SdaevQif website-creation vkyfief;&yftwGuf tqifajyEkdifygonf/
A solid, up-to-date computer - Windows trsKd;tpm;jzpfap? Macintosh trsKd;tpm;
jzpfap aumif;rGefpGm jyKvkyfEkdifaprnfjzpf\/ okdY&mwGif ,aeYtcsdefxd rsm;aomtm;jzifh
web design jyKvkyfaqmif&Gufonfh Xmersm;onf Mac-based rsm;udk tokH;csMuonf/
tvGefjrefqefaompufrsm;jzpfygu ykdaumif;onf[k qkdMu&aomfvnf; web page rsm;
jyKvkyfaomzkdifrsm;onf tvGefao;i,fvSojzifh tvGefwefzkd;BuD;jrifhaom uGefysLwmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 17
&SdrSom jzpfrnf[k rSwf,lrxm;oifhygay/ Sound tykdif;? video editing tykdif;vkyfí
&½kHrQESifhyif vkHavmufygonf/
Extra memory - aqmhzf0Jy½kd*&rfrsm;udk wpfNydKifeuf tokH;cs&rnfjzpfaomaMumifh RAM
vkHvkHavmufavmuf&Sdxm;aom uGefysLwmjzpfygu aumif;rGefygonf/ useftcsufrSm
rdrdtokH;jyKonfh program rsm;tay:vnf; rlwnfygonf/ tMurf;zsif; y½kd*&rfwkdif;
vkdvkd 128 MB cefY tenf;qkH; vkdtyfwwfonfukd owdjyK&rnf/ okdYtwGuf 256 MB
jzpfygu vufcHEkdifaom tajctae&Sdygonf/ 512 MB &SdvQifrl tBudKufqkH; taetxm;
udk &Ekdifrnfjzpf\/
A large monitor - tifrwefBuD;rm;aom ykHazmfrsufESmjyif&Sdae&ef rvkdtyfay/ Resolution
1024x768 pixels ESifh txuf&Sdaomjzpfygu vkyfukdif&mwGif ykdrkd vG,fulaponf/ taMumif;
rSm window awmfawmfrsm;rsm;udk wpfNydKifeuf zGifh,lum vkyfaqmif&rnf jzpfaomaMumifh
jzpf\/
A second computer - Web designer awmfawmfrsm;rsm;onf rdrd vuf&Sdvkyfukdifaeaom
primary computer rsm;xuf tjcm; platform wpfck &Sdaeaom computer rsm;jzifh
prf;oyf Munfh½Iavh&SdMuonf/ (Oyrmtm;jzifh rdrduGefysLwmonf yDpDjzpfygu Mac ESifh
prf;oyf Munfh½Ijcif;udk qkdvkdonf) Browser tajctaersm; uGJjym;pGm &SdMuaomaMumifh
jzpf\/ 0goemtavsmuf web design zefwD;oljzpfygu rdwfaqG wpfa,mufa,muf\
rsKd;uGJuGefysLwmjzifh prf;oyfMunfh½I,lEkdifygonf/
A scanner - Image rsm;? texture rsm; zefwD;Ekdif&eftwGuf scanner wpfvkH;awmh &Sdxm;
oifhonf/ Designer awmfawmfrsm;rsm;onf tvGefaumif;rGefaom scanner wpfvkH;ESifh
toifhtwifhom aumif;rGefaom scanner wpfvkH;xm;okH;avh&SdMuygonf/ &Hzef&Hcg
'pf*spfw,fuifr&myif vkdtyfaernfjzpf\/
Software
Web page rsm; zefwD;Ekdifa&;twGuf aqmhzf0Jrsm; jynfhjynfhpkHpkH &Ekdifygonf/ a&S;tcgu
tool rsm;onf print xkwfEkdif&efavmufom jyKvkyfxm;aom aqmhzf0Jrsm;jzpfaomfvnf; ,aeY
acwfwGif rdrdpdwful;&Sdoavmuf zefwD;,lEkdifaom tool rsm; tvQHty,f&SdaeNyDjzpf\/ aqmhzf0J
wkdif;ukd pm&if;jyKpkí wifjy&ef tajctaeray;aomfvnf; tokH;rsm;í web design twGuf
txl;oifhavsmfaom aqmhzf0Jrsm;udk atmufygtwkdif; rdwfquf wifjyvkdygonf/
18 WEB DESIGN vufawG Yoifcef;pmrsm;
Web page authoring
Web authoring tool onf desktop publishing tool rsm;ESifh cyfqifqifwlaomfvnf;
HTML file taejzifh web page document wpfckudk xkwfvkyf&eftwGufom jzpfonf/
tqkdyg tool onf WYSIWYG [laom interface jzpfum HTML code rsm; xyfumwvJvJ
½kdufESdyfae&jcif;rS oufomap&ef pDpOfxm;\/ WYSIWYG (What You See Is What You
Get) \ t"dyÜm,frSm tjrifjzifh zefwD;ay;jcif;? qif,ifjcif;[k qkdvkdjcif;jzpfonf/
Macromedia Dreamweaver - Clean code ESifh advanced feature rsm;pGm yg0ifí
industry standard tjzpfokH;onf/ Advanced feature rsm; yg0ifNyD; tvm;wl xdyfwef;
pm&if;0if tool jzpfonf/
Microsoft FrontPage - pD;yGm;a&;avmuwGif txl;ausmfMum;aom y½kd*&rfjzpfonf/
okdY&mwGif tykdaqmif; extra proprietary code rsm;udk zkdifwGif xnfhoGif;xm;rIaMumifhvnf;
a0zef ajymqkdjcif;cH&onf/ Professional web designer rsm;uawmh ¤if;udk tokH;jyKjcif;
r&SdMuyg/ tjcm; tm;enf;csufwpfckrSm function tcsKdUonf Microsoft software rsm;
yg0ifrSomvQif tokH;jyKí jzpfEkdifjcif;jzpf\/
HTML editors
Authoring tool ESifh vkH;0jcm;em;aom HTML editor onf HTML a&;om;&mwGif jrefjref
qefqef &ap&eftwGuf zefwD;xm;jcif;jzpf\/ WYSIWYG authoring tool jzifh vkyfukdifrI
twGufawmh tokH;rcsEkdifygay/ vufjzifh a&;qGJ&ef vkdvm;aom web designer rsm;twGuf
oabmus ESpfNcdKufzG,f&mjzpfonf/
Allaire HomeSite (Windows twGufom)- tvGefwefzkd;BuD;aom tool jzpfonf/ Shortcut
rsm;? template rsm;ESifh wizard rsm;pGm complex element twGuf xnfhoGif;ay;xm;
onf/
BB Edit by Bare Bones Software (Macintosh twGufom)- Mac-based designer rsm;
twGuf tvGefaumif;aom feature rsm;pGm yg0ifxm;onf/
Graphic Software
Page rsm;wGif ½kyfykHrsm; xnfhoGif;&rnfjzpfaomaMumifh image editing program rSm txl;
vkdtyfygonf/
Adobe Photoshop - ykHESdyfvkyfief;twGufjzpfap? web avmutwGufjzpfap? *&yfzpfqkdif&m
zefwD;rIvkyfief;pOfrsm;twGuf industry standard tjzpf vlwkdif; ESpfNcdKufpGm tokH;jyKMu
WEB DESIGN vuaf wGoY icf e;f pmrsm; 19
&onf/ Version 5.5 rSpí aemufydkif;xkwfvkyfaom Photoshop wkdYonf tqifhjrifh
web graphic rsm;udk zefwD;,lEkdifonf/ Professional designer wpfOD;jzpfvkdoltwGuf
Photoshop ukd txl;uRrf;usif&ef vkdtyf\/
Adobe Image Ready - Adobe Photoshop ESifhtwl yl;wGJa&mif;cswwfonf/ Graphic
program taejzifh tenf;i,fom taxmuftul&apaomfvnf; animation twGuf
txl;jyKaqmif&Gufcsuf rsm;pGm yg&Sdonf/
Macromedia Fireworks - Image editor yg0ifaom drawing program wpfckjzpfonf/
Macromedia Freehand ESifh Adobe Illustrator wkdYESifh qifqifwlonf/ Optimized
graphic rsm;wGif rsm;pGm tokH;0if\/
Adobe Illustrator - Photoshop jzifh vkyfukdifaqmif&GufNyD;oGm;aomtcgwGif fine-tuning
vkyf&mü tokH;csEkdifonf/
JASC Paint Shop Pro (Windows twGufom) - wefzkd;EIef;csKdomrItwGuf Windows
y&dowf image editor rsm; tvGef ESpfNcdKufzG,f jzpfaeaom y½kd*&rfjzpfonf/
Multimedia tools
pmoifom;rsm;twGufom azmfjyay;rnfh web design vrf;ñTefjzpfojzifh tqifhjrifhaom
multimedia element rsm;udk ñTef;qkdrI rjyKvkdyg/ tokH;0ifrnfh aqmhzf0Jrsm;avmufom azmfjyay;
vkdygonf/
Macromedia Flash - Animation toHrsm;ESifh interactive effect rsm;? web page wGif
xnfhoGif;ay;&mwGif vdktyfygu flash movies file rsm; xnfhoGif;ay;&onf/ tqkdygudpö
&yftwGuf tokH;jyKEkdifygonf/
Macromedia Director - rlv&nf&G,fcsufrSm CD-ROM ESifh Kiosk presentation rsm;
zefwD;rItwGuf tokH;jyK&ef wnfaqmufxm;aom y½kd*&rfjzpfonf/ Web delivery
twGuf ¤if;udk shockwave file rsm; jyKvkyf&mwGif tokH;jyKEkdifonf/
Adobe LiveMotion - Adobe \ topfvGifqkH; multimedia package wpfckjzpfonf/
Flash file rsm; zefwD;&mwGif tokH;jyKEkdifygvdrfhrnf/
20 WEB DESIGN vufawG Yoifcef;pmrsm;
Internet tools
Web design vkyfief;BuD;wpfckvkH;onf tifwmeufjzifh qufoG,fvkyfukdif&aom vkyfief;
BuD;jzpfojzifh uGef&ufay:rS moving file rsm;twGuf vkyfief;ay:vkdufí tool tcsKdU xyfrH
vkdtyfaewwfygonf/
A variety of browsers - Page rsm;udk 0ifa&muf Munfh½IEkdif&eftwGuf ukd,fykdif browser
zefwD;ay;&onf/ ¤if;twGuf browser rsm;rsm; toifh&Sdxm;&rnfjzpf\/ Netscape
Navigator ESifh Microsoft Internet Explorer wkdYrSm tedrfhqkH; tqifhavmuftxd &Sdae&
rnf jzpf\/ xkdYtwl Lynx uJhokdYaom text wpfrsKd;wnf;okH; browser rsKd;yif vkdtyfyg
onf/
A file-transfer program (FTP) - Web twGuf rdrdjyifqifxm;aom page rsm;ukd rdrduGefysL
wmrS upload (transfer) jyKvkyf&eftwGuf tokH;jyKonf/ Mac twGuf Fetch ESifh
Interarchy, Windows twGuf WSFTP tygt0if utility awmfawmfrsm;rsm; &Sd\/
Telnet - Unix operating system tokH;jyKolrsm;twGuf server ay:wGif zkdifrsm;udk
manipulating jyKvkyfEkdif&ef ¤if;udk vkdtyfaernfjzpf\/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 21
Web Work \ tajccHvkyfief;rsm;
tcef; 2
ukd,fykdif web design rsm;udk 1993 ckESpfupí ukd,fykdifwnfaqmufrIrsm; jyKvkyfcJhMuonf/
,cktcsdefwGif yxrqkH; web page wpfckukd pMunfhcJhrdonfh tajctaeudk ar;jref;vmygu
xkdtawGUtMuHKudk ajymjy&ef aocsmpGm rrSwfrdawmhyg[k ½kd;om;pGm 0efcH&rnfyif/ okdY&mwGif
wpfcsufawmh owd&rdygao;onf/ xkdtcsdefu tqkdyg owif;tcsuftvufrsm; rnfonfh
ae&mu a&mufvmMuonf? rnfokdY jyKvkyfxm;Muonfukd tenf;i,f ½IyfaxG;pGm acgif;xJokdY
a&mufvmrdjcif;yif jzpf\/
þokdYaom tawGUtMuHKwpf&yfukd tajccHí web vkyfief;rsm;ESifhywfoufonfh tajccH
avhvmrIynm&yfwcsKdUudk rdwfqufum tykdif;vkduf &Sif;vif;wifjyay;vkdygonf/
tifwmeufESifh Web
tifwmeufESifh Web qkdonfh pum;vkH;ESpfvkH;onf tjyeftvSef azmfñTef; ajymqkd&mwGif
rjzpfrae azmfjyrIwkdif;wGif ,SOfwGJ yg&Sdaernfjzpfonf/ t"dyÜm,fazmfñTef;&mwGifjzpfap? wpfckESifh
wpfck uGJjym;jcm;em;onfh oabmt"dyÜm,f &Sif;vif;&mwGifjzpfap? azmfjy okH;pGJMu&rnfjzpf\/
tifwmeufqkdonfrSm uGefysLwmrsm; qufoG,faqmif&Guf&m uGef&ufvkyfief;BuD;wpfck
jzpfonf/ tifwmeufukd rnfonfhukrÜPDurQ ykdifqkdifxm;jcif;r&Sdygay/ (þae&mwGif America
Online qkdonfh trnfrsKd;ESifh ½IyfaxG;rSwf,lrIr&Sdap&ef azmfjyjcif;jzpf\) pHjyKrIrsm;ESifh pnf;urf;
owfrSwfrIrsm;udk pepfwpfcktjzpf pkaygif; pDrHuGyfuJrItaetxm;wpfckom xm;&Sdonf/ uGefysL
wmrsm; wpfckESifhwpfck twlwuG qufoG,f&m wmqkHtjzpf todtrSwfjyKum owif;tcsuf
tvufrsm; rQa0 okH;pGJMujcif;jzpfonf/ uGefysLwmrsm;tMum; qufoG,fjzwfoef;rIenf;vrf;
rsm; trsKd;rsKd;&Sdaeygonf/ E-mail ESifh file transfer (FTP) tygt0if enf;vrf;rsm; jzpf\/
xkdYtwl WAIS (wide area information server) ESifh gopher uJhokdYaom outdate mode
rsm;vnf; yg0ifaeMuonf/ qufoG,frI jyKvkyfykHenf;vrf;udk protocol [laom a0g[m&jzifh
vnf; odxm;Muonf/ owif;tcsuftvufrsm;\ teHYtoufrsm;? &,ludkifwG,f jyKvkyfEkdifap
&ef rnfokdYaqmif&Guf&rnfukd odem;vnfaernfh txl;jyKy½kd*&rfrsm; vkdtyfvsuf &Sdaeygonf/
22 WEB DESIGN vufawG Yoifcef;pmrsm;
World Wide Web okdYr[kwf Web onf owif;tcsuftvufrsm; rQa0cHpm;Ekdifaprnfh
enf;vrf;rsm;xJrS wpfckaom enf;vrf;jyKonfh ae&momjzpfonf/ tifwmeufay:rS owif;
tcsuftvuftpkav; (subset) omjzpfNyD; ¤if;wGif ukd,fykdifvufcHpDpOfrI protocol &Sdonf/
tjcm; protocol rsm;tv,fwGif uGJjym;jcm;em;pGmjzifh ay:vGif xif&Sm;aponfh Web
rsufESmpmrsm;udk qif,ifjyKvkyfxm;wwfMuonf/ rdrdt"dyÜm,fESifh rdrdpyf[yfpGm jyKjyifxm;
&Sd\/ tusKd;&Sd&Sd tokH;csEkdifap&ef qufoG,fvG,fulrIudkvnf; OD;pm;ay;aqmif&Gufxm;onf/
Document rsm; wpfckESifhwpfck tvG,fwul qufoG,fEkdifaom link tcsdwftquf &SdouJhokdY
owif;qG,fxm;&Sdonfh BuD;rm;aom web twGif;rS document onf tjcm; link toD;oD;okdY
csdwfquf,lEkdifygonf/
pmom;rsm;jzifh qufoG,faqmif&GufrItwGuf xkH;pHtwkdif; ac:a0:aom a0g[m&onf
hypertext jzpf\/ Web rS owif;tcsuftvufrsm; ajymif;a&TUaom enf;vrf;twGufvnf;
enf;ynma0g[m&tjzpf Hypertext Transfer Protocol [k ac:qkdonf/ okdYr[kwf twkd
aumufjzifh HTTP [lívnf; ajymqkdavh&SdMuonf/ wu,fwrf; Web xJokdY 0ifa&muf
tokH;jyK&if; yg0ifaqmif&Gufawmhrnfqkdygu web site address ac: tñTef;vdyfpmrsm;\
pmom;tuefYav;uefY\ oabmw&m;ESifh twkdaumuftokH;jyKrIrsm;udk tuRrf;0ifpGm jzpfae
&ygvdrfhrnf/
Web wkdY\ vlBudKufrsm; ausmfMum;jcif;ESifhywfoufonfh t"dut&if;tjrpfrSm tjrif
Mum;cHwpfcktjzpf zefwD;&mwGif text rsm;? graphic rsm; a&maESmum qGJaqmifEkdifaom tajc
tae&SdrIESifh pmtkyf\pmrsufESmrsm;udk vG,fulpGm Munfh½IEkdif&ef jyKvkyfxm;onfh tcif;tusif;
oabmrsKd; &SdaerIwkdYtay: rlwnfaeygonf/ txl;ojzifh 0ifa&muf Munfh½Iolwkdif;onf ½Iyf
axG;vSaom aqmhzf0Jrsm;jzifhjzpfap? txl;jyK command rsm;jzifhjzpfap odxm;&ef rvkdaom
point-and-click pepfavmufom zefwD;jyifqifxm;rSom tokH;jyKoltvkdus jzpfapEkdifygvdrfh
rnf/
oif\ owif;tcsuftvufrsm;tm; 0efaqmifrIjyKjcif;
tifwmeufESifh qufoG,fxm;&Sdonfh uGefysLwmrsm;taMumif;udk tao;pdwf aqG;aEG;vkdyg
onf/ uGefysLwmtokH;jyKolrsm;\ awmif;qkdvkdtyfcsufrsm;udk 0efaqmifrIjyKay;onfh uGefysL
wmrsm;udk server rsm;[k odxm;NyDjzpf\/ xkdYxuf wduspGm t"dyÜm,f zGifhqkdrnfqkdygu uGef
ysLwmwpfvkH;rS tjcm;uGefysLwmrsm;qDokdY qufoG,frIjyKay;rnfh aqmhzf0Jy½kd*&rfrsm; pDpOfxm;
ay;aomae&m&Sd uGefysLwmtm; server [k ac:jcif;jzpfonf/ tqkdyg server software onf
owif;tcsuftvuf information twGuf awmif;cHvmrIudk tqifoifhapmifhaeum vkdtyf
csuftwkdif; pDpOfaqmif&Gufí tjrefqkH; taumiftxnfazmfNyD; ay;ykdYay;onf/ tao;pm;
tqifhedrfhwpfukd,fa&okH; uGefysLwmrS tBuD;pm; pGrf;&nfjrifh Unix machine rsm;txd rnfonfh
awmif;cHvmcsufrSeforQudk server software &Sdaeaom rnfonfhuGefysLwmrqkd tvm;wl
WEB DESIGN vuaf wGoY icf e;f pmrsm; 23
Web ESifh ywfoufonfh ordkif;tusOf;
1989 ckESpf qGpfZmvefEkdifiH *sDeDAmNrdKU&Sd cyfi,fi,f ½lyaA'"mwfcGJcef;Xme (CERN)
wpfckrS Web ukd arG;zGm;ay;vkdufonf/ uGef&ufBuD;wpfckay:wGif document rsm;udk
oufqkdif&m csdwfqufrI link rsm;ESifhtwl "hypertext" process ukd tokH;jyKí
information management system wpfckudk uGefysLwmodyÜHynm&SifwpfOD;jzpfol
Tim Berners-Lee u yxrOD;qkH; aqG;aEG; wifjycJhygonf/ ¤if;ESifhtwl Robert
Cailliau wkdYonf web \ rlvykHMurf;udk taumiftxnfazmfum wifjyay;cJhjcif;
jzpf\/ trsm;\ vufcHaqmif&GufrIESifhtwl jzpfay:vmaom web \ tpykdif;
ESpftawmfMumtxd web page rsm;rSm text jzifhom zefwD;ay;onf/ 1992 ckESpfwGif
wpfurÇmvkH; twkdif;twmjzifh a&wGufvQifyif web server 50 cefY &SdcJhonf/ Web
BuD;xGm;vmrI t&Sdeft0gudkvnf; 1992 ckESpfrS pwifcJhonf[k qkdEkdif\/
taMumif;rSm 1992 ckESpfwGifyif yxrqkH; graphical browser (NCSA Mosaic)
udk pwif rdwfqufvmcJhaomaMumifh jzpfonf/ xkdtcsdefrSpí okawoevkyfief;
tokdif;t0ef;rS jyify&Sd xkxnfBuD;rm;pGm qufoG,frIrsm; &SdvmapEkdifaom mass
media okdY a&muf&SdoGm;awmh\/ Web zGHUNzdK;wkd;wufrI udpöt00udk Massachusetts
Institute of Technology (MIT) &Sd taysmfwrf; aqmif&Gufaom
tzGJUtpnf;wpfckrS World Wide Web Consortium (W3C) trnfjzifh
aqmif&Gufay;cJhjcif; jzpfonf/ ykdrkdus,fjyefYpGm avhvmvkdygu
www.inria.fr/Actualites/ cailliau-fra.html okdYr[kwf WDVL.com/Internet/
History okdYr[kwf www.w3c.org/history.html wkdYwGif 0ifa&muf
Munfh½IEkdifygonf//
aqmif&GufrIudk pDpOfay;Ekdifonf/ Web twGif; yg0if aqmif&Gufaeaom uGefysLwmwpfvkH;
jzpfapEkdif&eftwGuf tqkdyguGefysLwmonf special web server software jzifh run ae&rnfh
oabmyifjzpf\/ xkd special web server software u Hypertext Transfer Protocol
tjzpf ajymqkdqufqHcGifhjyKay;onf/ Web server rsm;tm; HTTP server rsm;[lívnf;
ac:qkdowfrSwfMuonf/
Server wpfckpDonf xl;jcm;aom *Pef;trSwftom; (IP address) wpfckjzifh jy|mef;
owfrSwfay;xm;onf/ Oreilly.com [lonfh azmfjycsufrsKd; pmay;pm,ltrnf corresponding
name (domain or host name) wpfckvnf; yg0ifxm;aponf/ tqkdyg *Pef; trSwftom;ESifh
trnfemrwkdYonf tifwmeufay:wGif rnfonfh server ukd qkdvkdjcif; jzpfonfukd ppfaq;
a&G;cs,frIjyKEkdif&ef tokH;csjcif;jzpfonf/ okdYtwGuf rdrdonf rSefuef xda&mufaom owif;quf
oG,frIudk &,lEkdifonf/ Web ay:&Sd web server jzifh run aeaom machine rsm;\ azmfjycsuf
wkdif;\tpwGif "www" [laom trnf a0g[m& yg&Sdonf/
24 WEB DESIGN vufawG Yoifcef;pmrsm;
Web Page Address (URLs)
txufwGif azmfjyay;cJhonfh server rsm;tm;vkH;ay:&Sd tqkdyg web page rsm; tm;vkH;ESifh
twl rdrd\vkdtyfcsufukd &SmazGrIwpfcktwGuf rnfokdY jznfhqnf;ay;rnfenf;/ tqifajypGm
jzifh oifhavsmfaom tajz&Sdaeygonf/ xkd address rsm;udk URL (Uniform Resource Locator)
wpfck[k ac:onf/ þae&mwGif tm;vf (erl) [k toHxGuf ac:qkd&ef r[kwfyg/ ,ltm-
t,fvf [líom toHxGufac:qkd&rnf jzpf\/
URL rsm;onf tu©&moauFw twef;vkdufjzifh azmfjyrnfjzpfonf/ tu©&m oauFw
rsm;ukdvnf; tpuf dot (okdYr[kwf period) rsm;jzifhwpfrsKd;? rsOf;apmif; slashe rsm;jzifh
wpfoG,f yg&SdrnfjzpfNyD; tuefYvkduf azmfjyrIwkdif;wGif oD;jcm;t"dyÜm,frsm; &Sdaeygonf/
The Parts of a URL
jynfhpkHaom URL wpfckwGif tykdif;av;ykdif;jzifh uefYxm;í azmfjyyg&Sdygonf/
filename
browser wiG f azmjfyay;rnhf
file \ trnf
Protocol
File transfer twuG f to;kH jyKxm;aom
trsKd;tpm; azmfjycsuf? (þae&mwGif
Hypertext Transfer Protocol
jzpfonf/)
domain name
rnof nafh e&mo Ykdquof ,G &f e f jzpof nuf kd
azmjfyay;onh f web site trn/f
pathname
File twuG f Mun&hf e fvr;fñeT rf I
owfrSwfcsuf
http://
Hypertext Transfer Protocol ukd tokH;csrnf[k qkdvkdjcif;jzpfonf/
www.jendesign.com
www onf web server wpfckqDokdY nTef;qkdawmhrnf[k ueOD; t"dyÜm,fzGifhqkdrIjzpfNyD;
ukd,fykdiftrnfemrtm;jzifh jendesign.com [k trnfay;xm;aom website ukd oGm;rnf
[k azmfjyay;jcif;jzpfonf/ (rdrdoGm;vkdaom website \ domain name ukd xnfhay;jcif;
jzpf\)
Figure 2- 1
WEB DESIGN vuaf wGoY icf e;f pmrsm; 25
/2000/samples/
rsOf;apmif; slashe rsm;jzifh qufvufyg&SdvmrIonf oufqkdif&m zkdifwpfckokdY a&muf&SdEkdif&ef
vrf;ñTefrItñTef;rsm;jzpfygonf/ tifwmeufukd Unix operating system jzifh run
xm;aom uGefysLwmBuD;rsm;jzifh ueOD;ykdif;rsm;qDu pwifvmcJhjcif;aMumifh Unix pepf\
enf;Oya'ESifh azmfñTef;jyavh&Sdonfh xkH;pHrsm;twkdif; zGJUpnf;jyifqif aqmif&Guf,ljcif;
jzpf\/
first.html
URL \ aemufqkH;tykdif;wGif azmfjyyg&SdonfhtñTef;rSm rdrdtvkd&Sdaom zkdiftrnfukd azmfjy
,ljcif;jzpfonf/ tqkH;owf htm okdYr[kwf html [lonfh oauFwonf web page
document wpfcktjzpf owfrSwfxm;aMumif; od&Sdap&efjzpfonf/
txufyg erlem URL \ oabmt"dyÜm,fukd aumuf,lrnfqkdygu tifwmeufay:&Sd
web server wpfckudk HTTP tokH;csí domain name tm;jzifh jendesign.com trnf&Sdaom
ae&mudk qufoG,frnf/ xkdae&mokdY a&mufaomtcgü 2000 directory twGif; &Sdaeaom
simple directory rS first.html trnf&Sd document udk awmif;qkdygonf[lí t"dyÜm,f &yg
vdrfhrnf/
Server EiS hf Client
vkdtyfonfh awmif;qkdcsufESifhtnD owif;tcsuftvufrsm;udk server
software u ay;ykdYonf[k aqG;aEG;wifjycJhNyD; jzpfonf/ wpfcgwpf&H server
[laom pum;vkH;udk tqkdyg aqmhzf0Jjzifh run xm;aom uGefysLwmudk
ñTef;qkdac:a0:Mu\/ xkdYtwl awmif;qkdrIjyKaom aqmhzf0Judkvnf; client [k
owfrSwfxm;Muonf/ Web ay:wGif browser rsm;onf client software
rsm;yifjzpf\/ awmif;qkdcsufESifhtnD web server onf browser jzifh
jyo&eftwGuf document ukd ykdYvTwfay;onf/
rMumcPqkdovkd web design vkyfief;avmuwGif client side okdYr[kwf
screen-side [lí cGJjcm;ñTef;qkdrIrsm; awGU&ayrnf/ þa0g[m&
tac:ta0:jzifhyif tqkdyg machine onf rnfonfhvkyfief;udk
aqmif&Gufay;onfukd od&SdEkdifMuonf/ okdYygí Client-side application
rsm;onf tokH;jyKol\ machine ay:wGif run vsuf&SdNyD; server-side
application ESifh function rsm;udk server computer rsm;rS &&SdEkdifMuygvdrfh
rnf/
26 WEB DESIGN vufawG Yoifcef;pmrsm;
URL twakd umurf sm;
erlemazmfjycsuf URL twkdif; &Snfvsm;jynfhpkHpGm razmfjyMuaom web site tñTef;rsm;vnf;
&Sdaewwfygonf/ Oyrm- www.oreilly.com [k azmfjyrIrsKd;udk qkdvdkjcif;jzpf\/
http://
yxrqkH;tykdif; azmfjycsufjzpfonfh http:// csefvSyfazmfjyrIudk avhvmEkdifonf/ tifwmeuf
us,fjyefYpGm tokH;csvmaomacwfwGif web page wkdif;onf Hypertext Trasfer Protocol
rsm; tokH;csxm;onfcsnf;jzpfMu\/ em;vnfod&Sdxm;NyD;[laomoabm jzpfonf/ ¤if;tjyif
tifwmeuf&SmazGtokH;csrI Internet explorer wkdif;&Sd browser rsm;wkdYonf http:// ukd tvkd
tavsmuf jznfhoGif;ay;aomaMumifh jzpfygonf/
Index file
xkdenf;wlpGm URL \ aemufqkH;tuefY&Sd document tñTef;rSm ,aeYacwfwGif browser
jzifh jznfhqnf;,lEkdifaomaMumifh csefvSyfazmfjyxm;jcif;jzifhvnf; tcuftcJr&SdEkdifawmhyg/
xkdYaemuf index file onf vkHjcHKa&;t& ta&;BuD;vmaom taetxm;jzpfvmjyefonf/
owfowfrSwfrSwf zdkiftrnf ryg0ifaomtcg default page &SmazGEkdif&ef server rS pDpOf
aqmif&Gufay;ygvdrfhrnf/ tenf;qkH; directory wpfckvkH;&Sd rmwdumukd jyefcsay;ygrnf/
Directory wkdif;wGif yg0ifaeaom index file jzpfygu content rsm;udk csay;rnfr[kwfay/
Figure 2- 2
jynphf &kH iS ;fvi;f pGm ½ukd of Gi;f r I rjyKonwhf ikd f
"http://" [al om xyd pf ;D pmv;kHu kd xnohf Gi;f &ef
browser trsm;pku odNyD;jzpfonf/
wwkd &d iS ;f URLs rsm;wGi f rrd d
½ukd of Gi;f rrI jyK&e f rvokd n hf tpwd f
tyikd ;f tcsKuUd kdt&yd tf >ruf
vrf;jyavh&Sdonf/
Filename rygvmaomtcg server onf
default file wpfcktwGuf omreftm;jzifh
index.html [ k rnS ahf c:av&h odS n/f
Web page wpfck\ wnfaqmufrIt*Fg&yfrsm;
vrf;ñTefcsufrsm;tqkH;wGif web page document \ tcsuftcsmrsm;qDokdY a&muf&SdoGm;NyD;
jzpfonf/ uGefysLwmay:wGif rdrdMunfh½Iaomtcg rnfokdYcHpm;awGU&Sd&rnfukd odvmEkdifygvdrfh
rnf/ okdY&mwGif web ezl;pD;BuD;atmufwGif &Sdaernfh web page rsm;\ tcsif;t&mudk wpf
csufrQ avhvmp&m&Sdygonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 27
Figure 2- 3
wpcf vk ;kH Bu;DoY kd server azmjfycsurf sm;\
content u kd tvrkd &cdS vJh Qif
directory wikd ;fwiG f index wpcf k
taotcsm &adS eap&ayrn/f
URL wpfcktwGif;rSm filename twdtuswpfckrQ rygaom
½ukd of iG ;f jci;fwGi f default page twuG f Munjhfri&f ef prompts
ay:xuG vf mon/f omretf m;jzi hf "index.html" [k
trnfay;xm;wwfonf/
tu,íf sever rS "index. html" trnjfzi hf filename wpcf uk kd raw&GU ydS g
u directory wpcf vk ;kH yg0iof nh f content qoD Ykd jyeof Gm;rnjfzpof n/f
Intranet EiS hf Extranet
Web wGif rnfolrqkd 0ifa&muf Munfh½I&if; rdef;armrI(surfing) udk cHpm;EkdifMuonf[k
tMurf;zsif; rSwf,lxm;Muonfjzpf\/ ukrÜPDawmfawmfrsm;rsm;onf tHhMozG,faumif;
avmufatmif owif;tcsuf rQa0cHpm;jcif;\ tusKd;tjrwfudk t&,lum rdrdwkdY ukd,fykdif
pD;yGm;a&;taqmuftODtwGif;rSmyif tiftm; pkpnf;&,lEkdifcJhMuonf/ rdrdwkdYukd,fykdif t0ef;
t0kdif;twGif; txl;wnfaqmufMuaom web based network rsm;udk intranet [k ac:
qkd\/ Special security device (firewall) wyfqifxm;aom uGefysLwmrsm;ay:wGif
rlv web site BuD;tvm; aqmif&GufEkdifaom tajctaersm;jzifh zefwD; wnfaqmufxm;
onf/ tjcm;jyify&Sd web site rsm;ESifh uefYowfxm;onf/ Human resource information
rsm;udk zvS,f,lMujcif;uJhokdYaom vkyfief;&yfrsm;tm;vkH;udk Intranet jzifh aqmif
&GufMuygonf/ Internet wpfckESifh Extranet wpfckwkdYonf twlwl[k qkdEkdifonf/ okdY&m
wGif Extranet onf ukrÜPD\jyify&Sd rdrdwkdY\ tuefYtowfjzifh a&G;cs,fxm;aom ae&m
rsm;twGuf qufoG,frIudkom jyKay;jcif; jzpf\/ xkwfvkyfa&;ukrÜPDESifh rdrd\azmufonf
rsm;wkdYonf atmf'grSm,lrI tajcjy owif;tcsuftvufrsm;udk qufoG,fMunfh½IEkdifonfh
vkyfief;aqmif&GufrIrsKd;udk qkdvkdjcif; jzpfygonf/ odkYtwGuf oufqkdif&mazmufonfESifh
xkwfvkyfa&;ukrÜPDwkdY ESpfOD;oabmwl password ukd owfrSwftokH;jyKavh &SdMu\/
þokdYaom network sharing ykHpHrsKd;udk intranet jzifhjzpfap? extranet jzifhjzpfap ukrÜPD
rsm;\ pD;yGm;aqmif&GufMuygonf/
28 WEB DESIGN vufawG Yoifcef;pmrsm;
Figure 2- 4
Browser on f tqykd g element
wuYkd kd wo;Dwjcm;pD
&Sdaeaomfvnf; window
wpcf wk n;fwGi f &adS eMuon/f
HTML twGif;rS Tag rsm;onf
browser tm; rnof yYkd pkH jHzihf
page u kd ci;fusi;f jyoay;&rnuf kd
ñTef;ay;xm;onf/
ywkH iG jfyxm;onh f web page
erlemonf HTML text
document wpcf Ek iS hf
*&yzf pEf pS cf [k íl file o;kH rsK;d
oD;jcm; wnfaqmuf,lxm;onf/
azmfjyygykHwGif browser wpfcktwGif;&Sd tajccH web page wpfckudk jrifawGU&rnf jzpf\/
a&SUaemuf qDavsmfpGm jyKjyifjyifqifxm;aom page wpfckudk jrifawGU&rnfjzpfaomfvnf;
oD;jcm;zkdifokH;ckjzifh wnfaqmufxm;jcif;jzpfayonf/ ½kd;&Sif;aom HTML document (simplehtml)
wpfckESifh *&yfzpfzkdifESpfck (flower.gif ESifh simpleheader.gif) wkdYjzifh jyoay;onf/
HTML Documents
*&yfzpf jynfhjynfhpkHpkHESifh qGJaqmifrIaumif;aom page rsm;udk avhvmxm;NyD;oltaejzifh textonly
document rsm;udk jrifawGU&aomtcg ½kd;&Sif;vSonf[k rSwfcsufjyKMu&rnf jzpfaomfvnf;
¤if;wGif acwfa[mif;okH; ASCII text (pmESifhtwl oauFwvu©PmwcsKdU yg0if a&m,Sufxm;
onf) rsm;udk jrifawGUEkdifonf/
erlemtqkH;owfwGif&Sdonfh HTML [laom pum;vkH;wGifyif axmifhcsKd;uGif;p uGif;ydwf
wkdYjzifh jyoay;onfukd awGU&rnf/ xkduJhokdY csdwfwGJay;onfh tagging system ukd Hyper
Text Markup Language okdYr[kwf HTML jzifh a&;om;onfh document tjzpf odxm;&
onf/ Tag rsm;udkvnf; HTML tag [k odxm;&rnfjzpf\/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 29
½yk yf rkH sm;jzi hf azmjfyjci;f
HTML file wpfcktaejzifh ½kyfykHrsm; ryg&Sday/ þokdYqkdvQif aemufqkH; page wGif rnfokdY
taetxm;jzifh jyKvkyf&&SdcJhonfukd qufvuf avhvm,l&rnfjzpfonf/ ¤if;wGif&Sdaom image
wpfckpDwGif oD;jcm; graphic file rsm; &SdaeMuonf/ rnfonfhae&mwGif graphic (¤if;\
URL) udk &SmazGEkdifrnfukd browser tm; ajymjyEkdifaom image placement tag wpfckESifhtwl
wefqmqifxm;onf/ Browser onf <IMG>tag ukd jrifawGUonfESifh web page ay:wGif
tqufrjywfqkdovkd graphic rsm;udk xGufay:vmaponf/ þokdYjzifh server ESifh browser
wkdY twlwuG aqmif&Gufay;&if; &,lEkdifrnfjzpf\/
Tag rsm;taMumif;
HTML taMumif; tao;pdwfukd tydkif; 2 wGif qufvuf avhvmEkdifrnf jzpfygonf/ okdYyg
í ,ckuJhokdY rdwfquftñTef;u@wGif taMumif;t&mtcsKdUtm; tao;pdwf &Sif;vif; wifjyrI
rsm; vkdtyfaeygvdrfhrnf/ azmfjyygykHwGif avhvmcsuft& HTML document ukd page element
ESifh tag wkdYjzifh qufpyf wefqmqifxm;ykHudkom avhvmEkdif&ef azmfjyay;jcif;jzpfonf/
aocsmpGm avhvmMunfhygu final page wGif axmifhauG;uGif;puGif;ydwfrsm;ESifh azmfjyrI
r&SdaMumif; awGU&ygvdrfhrnf/ Text ESifh element rsm;udk page ay:wGif rnfokdY wifjyxm;onf
ukd jyoay;&eftwGuf ñTefMum;csufrsm;ESifhtwl browser tm; ½kd;&Sif;pGm tag rsm; wyfqifxm;
ay;jcif;jzpf\/ omreftm;jzifh tag onf ñTefMum;csufrsm;\ twkdaumufom jzpf\/ Oyrm
tm;jzifh Heading level 1 twGuf "H1" [lívnf;aumif;? Emphasized text twGuf "EM"
[lívnf;aumif; azmfjyay;jcif; jzpfonf/
xkdYaemuf rsm;aomtm;jzifh HTML tag rsm;udk tpkHvkdufawGU&wwfonf/ tqkdyg tpkHvkduf
azmfjyrIudk container [lívnf; ac:qkd owfrSwfMuonf/ ¤if;wGif tzGifhjyKrIrSm ON [k
owfrSwfí tydwfjyrIudk OFF [k owfrSwfEkdifonf/ HTML document wGif <H1> onf
heading tm; tqkH;owfí rlvorm;½kd;us text okdYjyefoGm;jcif;tjzpf ñTef;qkdonf/ Closing
tag rsm; tokH;rjyKaomtajctaersm;vnf;&Sd\/ ¤if;wkdYrSm page wpfckay:wGif instruction
okdYr[kwf element wpfcktm; csxm;rIjyKaejcif;twGuf tokH;jyKrnf jzpfojzifh
standalone tag rsm;[kac:qkdMuonf/ <HR> \ t"dyÜm,frSm rsOf;aMumif;wpfaMumif;udk
a&jyifnDtwkdif; a&;qGJxm;onf[lí jyqkdykHukd erlem,lEkdifygvdrfhrnf/
Browser
Browser wpfckonf aqmhzf0J\ tpdwftykdif;wpfckjzpfaMumif; od&SdcJhNyD;jzpfonfhtavsmuf
tqkdygtpdwftykdif;onfvnf; page rsm;udk cif;usif;jyoaMumif; em;vnfxm;&onf/
wpfenf;tm;jzifh web ukd Munfh½I&ef tokH;jyKaom tool jzpf\/
Browser onf HTML ukdjzwfí zwf,lonf/ xkdYaemuf text ESifh tag rsm;udk qufvuf
wifjyay;onf/ rdrdwkdY HTML ukd pwifa&;om;Muaomtcg tag ESifh text rsm;udk ykwD;aphrsm;udk
30 WEB DESIGN vufawG Yoifcef;pmrsm;
BudK;wpfacsmif;wGif oDukH;xm;onfhtvm; qDavsmfajyjypfpGm wpfckNyD;wpfck pDumpOfumjzifh
browser u aqmif&Gufay;onf/ HTML document wpfck tajctae ysufjym;rIudk uko
jyifqif&mwGif browser \ enf;vrf;udpöt00udk odxm;em;vnfjcif;jzifh taxmuftul
jzpfapygonf/
Web page ESifh ¤if;\ content rsm;udk awmif;qkdrIwkdif;twGuf pDpOf aqmif&Gufay;
Ekdif&ef browser ukd y½kd*&rfvkyfxm;NyD;jzpf\/ okdY&mwGif web file rsm;udk wnf;jzwfEkdifaom
tajctaeawmh browser wGif r&Sday/ zGifhMunfhEkdif½kHom y½dk*&rf yg&Sdavonf/ tcsKdU browser
rsm;wGif xl;xl;jcm;jcm; y½kd*&rfaygif;rsm;pGm xnfhoGif;xm;jcif;udkvnf; awGUEkdifygvdrfhrnf/
¤if;y½kd*&rfrsm;wGif browser wpfrsKd;? tD;ar;vfaqmif&Gufay;rIESifh file transfer pGrf;aqmif
ay;csufrsm;wkdY yg0ifxm;NyD; jzpfwwfonf/ xkdYtjyif HTML editor wpfckyg xnfhoGif;ay;
vmwwfonf/ tqkdygpGrf;aqmif&nfrsm;onf helper application rsm; tokH;csjcif;ESifh HTML
document rsm; taetxm;oufoufxufykdí audio rsm;? video rsm;ESifh pdwf0ifpm;ap&ef
zefwD;wifjycsufrsm; yg0ifapNyD; browser ukd taxmuftuljyKapaom plug-in pepfrsm;
tokH;csjcif;wkdY jzpfonf/
,aeYtcsdeftxd emrnfausmfMum; vlBudKuftrsm;qkH; browser rsm;rSm Netscape Navigator
ESifh Microsoft Internet Explore wkdY jzpfonf/ rnfokdYyifjzpfap vlodenf;vSaom
browser ao;ao;av;rsm; &mESifhcsDí &Sdaeygao;onf/
HTML Concept
HTML ESifh ywfouforQ tao;pdwfukd avhvmrnfqkdygu tawmfyif us,fjyefY
vSygonf/ þpmtkyfwGif tykdif; 2 ü tao;pdwf avhvmEkdif&ef qufvuf
wifjyay;oGm;ygvdrfhrnf/ azmfjyrIpwkdifESifhom oufqkdifrnfjzpfNyD; owif;tcsuf
tvufrsm; EIduf,l&&SdEkdif&ef jyifqifrI taetxm;jzpfygonf/ rdrdtaejzifh
document wpfckudk obm0usus HTML tagging vkyf,laomtcgwGif
particular headline wpfcktwGuf Heading Level 1 (<H1>) jzifh jyqkdrnf
jzpf\/ okdY&mwGif rnfonfh H1 ESifhwlonfukd twnfjyK&efrSm tokH;jyKolbufrS
browser uom xdef;csKyf,lEkdifonf/ tBuD;qkH; bold font rsm; &,lEkdifaom firstlevel
1 heading rsm;udk rsm;aomtm;jzifh browser wkdif;u jyefqkd aqmif&Gufay;
onf/ uHtm;avsmfpGm text rsm;udk rnfokdY format vkyfaqmif&rnfqkdaom
enf;vrf;rsm;udk designer rsm;u &&Sdxm;MuNyD;jzpf\/ okdYaomf document
zGJUpnf; wnfaqmufrIESifh content rsm;rS oD;jcm; cGJxkwfxm;aom style information
xm;&SdrIudkrl HTML \ rlv intent uvkyfaqmifay;onf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 31
Figure 2- 6
rrd td aejzi hf web page wpcf uk kd URL vyd pf mjzi hf browser xoJ Ydk wukd ½f ukd f ½ukd of iG ;f íaomvf n;f aumi;f ?
Linked text ay:wGi f click vyk jfci;f jziahf omvf n;f aumi;f awmi;f c,H El ikd fon/f URL wiG f tiwf meu[f k
o&d dS em;vnxf m;on hf ueG &f uBfu;D ay:& dS document wpcf uk kd twtd us &nñf eT ;f ay;&e f vtkd yaf om
information tm;v;kH yg0iof n/f

Web server EiS hf
½ukd xf m;on hf browser
onf URL twGif;rS
trnjfzi hfñeT ;fq kd azmjfy&i;f
File twtd uswpcf uk kd
awmif;cHay;onf/ tu,fí
ñeT ;fqakd zmjfyrn hf trnf
r&cdS vJh Qi f server awmaf wmf
rsm;rsm;r S default file ukd
&mS azG ,yl gvrd rfh n/f
omreftm;jzifh
index.html [k
ac:wGifonf/

<IMG> tag jzi hf ñeT jfyay;xm;on hf *&yzf prf sm;
page wGi f yg0iaf eon&f adS om f browser onf
server o Ykd *&yzf pwf pcf ck si;f quvf u f wiEf ikd &f ef
jyefvnf qufoG,f,lay;onf/ xdktcg
*&yzf pwf pcf ck si;f browser tay:oYkd
a&muf&SdvmapNyD; wpkwa0; jynfhpHkpGm
qifay;vdkufonf/
omretf m;jzi hf qiufh mqiuhf m jzpaf y:&i;f csucf si;f
jynfhpHkoGm;rnfjzpfaomfvnf; toHk;jyKaom
tifwmeuf qufoG,frIpepf aES;auG;aevQifrl
*&yzf pqf ikd &f m file Bu;D rsm;u kd apmiafh e&wwof n/f

File twGuf
web server
rS &SmazGNyD;
browser oYdk
jyefydkYay;jcif;
aomfvnf;aumif;? access rvkyfEdkifaMumif;
E-mail ydkYjcif;udkaomfvnf;aumif;
aqmi&f uG af y;on hf file u kd awGU Ny;D
browser o Ykd jyeaf &muvf mon/f qykd gp?Ykd
browser onf window wpfcktwGif;
HTML tag rsm;EiS thf n D &adS eonhf
Format rsm;twiG ;f document ukd
cif;usif; jyoay;onf/
32 WEB DESIGN vufawG Yoifcef;pmrsm;
¤if;wkdYteuf Lynx trnf&Sd browser wpfrsKd;ukdawmh odxm;oifhygonf/ taMumif;rSm
¤if;onf simple terminal ay:wGif tvkyfvkyfukdifxm;onf/ Text omvQif yg&SdrnfjzpfNyD;
graphic rsm;udk awGUjrif&rnfr[kwfay/ ¤if; browser ukd txl;ojzifh ynma&;ESifh odyÜHykdif;
qkdif&m uGef&ufrsm;wGif tokH;jyKavh&Sdonf/
twlwuG xnfhoGif;qif,ifrI
a&SUu rdwfqufwifjycJhaom web work \tajccHvkyfief;&yfrsm;udk tNyD;owf aygif;pnf;
jcHKikHrdygu web page rsm;wkdif;wGif ay:xGufvmaom jrifuGif;tm;vkH;udk oabmaygufpGm
jzifh ajc&maumufEkdifygvdrfhrnf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 33
Web ay:wGif rdrd\ Web Page &,ljcif;
tcef; 3
,ckazmfjyrnfh tcef; 3 wGif web page wpfckudk rnfokdY upload vkyf,l&rnfudk tqifhvkduf
o½kyfjyykHrsm;ESifhtwl azmfjyay;rnfhtjyif rdrd\ web site ukd vufcHaqmif&Gufay;rnfh server
wpfckudk rnfokdY&SmazG&rnf? rdrdukd,fykdif domain name ukd rnfokdY registering vkyf&rnf
ponfwkdYudkyg wifjyay;vkdygonf/
uGefysLwmESifh wdkuf½dkuf qufoG,fum zdkifrsm; xm;&Sdjcif;
uGefysLwmjzifh wkduf½kdufqufoG,fum owif;tcsuftvufrsm;udk vufcHay;ykdY,ljcif;udk online
[k ac:qkdMuonf/ rdrdqufoG,fykdifcGifh &&Sdxm;aom web server rS uGefysLwmqDokdY rdrd\
desktop computer rS rdrd jyifqifxm;&SdNyD;aom web document rsm;udk vTJajymif; ay;ydkYjcif;
udpöudk going online [k ajymqkdavh&SdMuonf/ Web server wpfckjzifh network wnfaqmuf
xm;NyD;jzpfaeaom ausmif;wpfausmif;wGifjzpfap? ½kH;cef;wpfcef;wGif jzpfap rdrda&muf&SdaecJhygu
rdrdukd,fwkdifyif network ay:rSwpfqifh tjcm; wpfae&m&mokdY wkduf½dkufqkdovkd file rsm;udk
vTJajymif;ay;ykdYrI jyKvkyfEkdifrnfjzpf\/
tifwmeufay:&Sd uGefysLwmrsm;tMum; zkdifrsm;udk vTJajymif;ay;ykdYvufcHjcif;twGuf FTP
(File Transfer Protocol) ukd tokH;jyKMu&onf/ FTP qkdonfrSm txl; pDpOf aqmif&Gufxm;
onfh internet protocol jzpfonf/ ¤if;udk jyKvkyfEkdif&ef aqmhzf0Judkawmh tokH;jyK&ef vkdtyf
aeygvdrfhrnf/ xkdYtjyif FTP file vkyfief;twGuf atmufygtcsuftvufrsm;udk od&Sdxm;&ef
vkdtyfygonf/
- rdrd\ web server (host) trnf / Oyrm/ / www.jenware.com
- rdrd\ login name ESifh user ID trnfrsm;
uGefysLwm system wpfckwGif ae&m,lxm;onfh tvkyfudpöaqmif&GufrIjyK&ef trnfukd
login name [k ac:qkdonf/ rdrd trSDo[JjyK aqmif&Gufrnfh server account wGif twnfjyKNyD;
onfhtcg server administrator rS rdrdtwGuf login name wpfckudk xkwfay;ygvdrfhrnf/
34 WEB DESIGN vufawG Yoifcef;pmrsm;
- rdrdtwGuf tokH;jyKxm;aom password
ukd,fykdifpum;0Suf password wpfckudk rdrd (client) pdwfBudKufjzpfap? server administrator
\ pdwfBudKufjzpfap &,lxm;Ekdifygvdrfhrnf/
- rdrd web page wnf&Sdaernfh directory
rdrdESifh oufqkdifonfh server administrator rS rdrd\ web page twGuf tokH;jyK&ef
rnfonfh directory wGif &Sdaernf[k ajymMum;ay;ygonf/
(omreftm;jzifh ¤if;\ www okdYr[kwf html ukd ñTef;ay;wwfonf/) rdrd\ server rS
log in ukd jznfhpGufay;vkdufonhftcg rSefuefaom directory wpfckqDokdY ykdYaqmifay;&eftwGuf
pDpOfxm;&SdNyD; jzpfae&ygonf/ Web page wpfckqDokdY qkdufqkdufNrdKufNrdKuf a&muf&SdrIwGif
administrator rS owfrSwfay;onfh directory onfvnf; tvGef ta&;BuD;aomtcsufjzpf\/
FTP Software
Macromedia Dreamweaver, Adobe GoLive ESifh Microsoft FrontPage uJhodkYaom
WYSIWYG aumif;aumif;vkyfay;onfh web-authoring tool wpfckwGif FTP aqmif&Gufcsuf
t&nftcsif;rsm; yg0ifxm;NyD; jzpfygonf/ (WYSIWYG qkdonfrSm What you see is
what you get qdkonfhtaMumif; tcef; 1 wGif azmfjycJhNyD;jzpf\) tvGef aumif;rGefaom
feature wpfckjzpfonf/ ¤if;jzifh rdrd\ web page ukd wnfaqmufzefwD;NyD; tm;vkH;udk
upload ay;Ekdifygonf/ All in one program [kyif qkd&rnf/
tu,fí rdrdtaejzifh xkduJhokdYaom tool wpfckck&&SdEkdifatmif 0,f,l&rnfhaiGaMu; rwwf
Ekdifygu rdrduGefysLwmwGif &SdaeNyD;jzpfaom ½kd;&Sif;onfh interface jzifh tokH;jyKEkdifygonf/
Mac tokH;jyKoljzpfu Fetch and Interarchie u drag and drop enf;jzifh ajymif;a&TUrIudk
cGifhjyKxm;onf/ yDpDtokH;jyKoljzpfu WSFTP and AceFTP wkdYudk tokH;jyKEkdifygonf/ tqkdyg
y½kd*&rfrsm;udk CNET \ www.download.com rS &,lEkdifonf/
vufawGU "Live" web page vkyfaqmifyHk tqifhqifh
aemufqkH;wGif vufawGUqkdovkd page wpfck wnfaqmufNyD; web ay:okdY xm;&SdEkdifa&;twGuf
vkyfief;pMu&awmhrnf/ rdrdtaejzifh cooking resources web site wpfcktwGuf ESpfoufpGm
a&G;cs,fNyD; rdrd&&Sdxm;aom domain name rSm jenskitchen.com wGif pm&if;oGif;,lvkdufonf/
(aemufykdif;tcef;u@wGif domain name twGuf pm&if;oGif;ykHudk qufvuf aqG;aEG;wifjy
ay;ygOD;rnf) ,ck page wpfckudk online ay:okdYxm;&ef aqmif&Gufygawmhrnf/
vkyfief;pOf tqifh (1) Web page udk zefwD;jcif;
rdrdonf HTML editor wpfckudk tokH;jyKxm;ojzifh HTML document ½kd;½kd;&Sif;&Sif;av;
wpfckudkyif ½kdufxkwfvkdufygonf/ NyD;vQif index.html [k trnfay;um save vkyfxm;vkduf\/
rdrd\ desktop ay:&Sd directory twGif; mysite [k owfrSwfay;xm;ygonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 35
Server ay:okdY wifray;rD rdrd hard drive xJwGif save vkyfxm;cJhaom tqkdyg file ukd
pdwfwkdif;us&Sdr&Sd zGifhvSpf ppfaq;,lvkdufonf/ xkdokdY vkyfaqmifrIudk rdrd\ pufay:wGif
viewing the file "locally" [kac:onf/
pdwfwkdif;usjrifawGU&NyDqkdygu upload vkyf&ef tqifoifhjzpfygNyD/
Figure 3- 1
HTML
editor
wpfck
twGif;
HTML
document
udk
zefwD;xm;yHk
Directory twGif;
rdrdvkyfxm;aom file udk
mysite [k trnfay;í
odrf;qnf;xm;vdkufonf/
Page u kd browser wpcf ck wk Gi f e;D e;D pypf y f ½jIri&f on/f
36 WEB DESIGN vufawG Yoifcef;pmrsm;
vkyfief;pOftqifh (2) FTP y½dk*&rfwpfckudk toHk;csí server okdY qufoG,fjcif;
Mac uGefysLwmwpfvkH;udk tokH;jyKMunfhonfhtcg zkdifrsm; a&TUajymif; ay;ykdYvkyfief;twGuf
Fetch ukd tokH;csjcif;jzifh tqifajyvSonf/ okdYaomf tjcm; FTP program rsm;onfvnf;
tvm;wl vkyfaqmifEkdifygonf/ vkyfaqmifykHrsm;rSmvnf; twlwlyifjzpfojzifh yl;wGJykHrsm;ESifh
o½kyfjyrIonf tokH;jyKvkyfukdifoltwGuf oabmayguf em;vnfEkdifygvdrfhrnf/
tifwmeufudk qufoG,frI pwifygawmhrnf/ þae&mwGif cable modem ukd tokH;cs
qufoG,fvkdygonf/ taMumif;rSm ¤if;onf tpOfojzifh zGifhxm;í &&SdaomaMumifhjzpfonf/
¤if;udkokH;jcif;tm;jzifh modem wpfckrSwpfqifh dial vkyfí ac:,l&avhawmh &Sdygonf/ Online
csdwfrdNyDqkdonfESifh Fetch wGif cs,lum server ukd tquftoG,fjyKvkdufEkdifygonf/
"New Connection" udk a&G;,lvkdufaomtcg window wpfckudk Fetch u ay:xGufvm
aponf/ (Figure 3-2 ) ¤if;u server \trnfudk ar;ygonf/ rdrd tquftoG,fjyKcGifh
Figure 3- 2
Servero Ykdquof ,G &f e f pNy;D
vyI &f mS ;vukd af omtcg rrd td aejzifh
server name twGuf
ar;jre;f jci;f c&H vrd rfh n/f
account EiS hf ywof uof nhf
tcsuftvufrsm; ? rdrd access
vyk vf akd om directory \ trn f wuYkd kd
jznohf Gi;f,&l rn/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 37
&Sdonfh server udk qkdvkdjcif;jzpf\/ (þae&mwGif rlvu azmfjycJhaom jenskitchen.com ukd
qkdvkdonf) (1) vkHjcHKrIpDrHcsuftwGuf rdrd\ username ESifh password (rdrd server rS
todtrSwfjyK &&Sdxm;aom trSwftom;)udk ar;ygonf/ (2) Directory ukd ar;ygonf/
(3) ¤if;twGuf rdrd\ server administrator u www udk tokH;jyK&efajymygrnf/
vkyfief;pOftqifh (3) File rsm;udk upload vkyfjcif;
csdwfqufrI&&SdNyD;onfhtcg Fetch u server ay:wGif directory structure ykH jyoay;aom
window wpfckudk ay;ygonf/ (Figure 3-3) rdrdxnfhoGif;xm;&Sdvkdaom zkdifwpfckudk server
ay: xm;&Sd&eftwGuf "Put File" cvkwfukd ESdyfvkduf&onf/ tjcm; FTP program rsm;wGif
"send" okdYr[kwf 'upload" [laom cvkwfudk tokH;cs aqmif&GufEkdifonf/
"Put File" cvkwfukd ESdyfjcif;jzifh rdrdtm; rdrd\ desktop ay:rS directory rsm;udk jzwf
í browse vkyf,lEkdif&ef window wpfckudk ay;ygrnf/ rdrdtaejzifh rdrd\ index.html file
ukd a&G;cs,fvkdufum "open" wGif click vkyf,l&rnf/
rdrd upload vkyfaeaom zkdifukd format vkyfay;&rnfh tajctaetcsKdU vkdtyfygao;onf/
Figure 3- 3
Upload vkyfNyD;oGm;
aomtcg FTP window \
directory list wGif
filename
ay:vmrnf
jzpof n/f
Server o Ykd file wpcf tk m; upload vyk &f ef
]]put file}} u kd EydS &f on/f
Upload vkyf,lrnfh
fileu kd a&;G cs,yf g/
File \ format u kdtwtd us azmjfyay;yg/
(HTML document rsm;twGuf ASCII
orYkd [wk f Text [k
a&G;cs,fay;&onf/)
38 WEB DESIGN vufawG Yoifcef;pmrsm;
Fetch rS option awmfawmfrsm;rsm; xkwfjy&mwGif tokH;0ifqkH;wpfckjzpfaom "Text" ukd
a&G;,l&onf/ ¤if;jzifh HTML doucment ukd tokH;jyKEkdifrnfjzpf\/ "Raw Data" udkvnf;
vkyfaqmifEkdifrnf jzpfonf/ Image okdYr[kwf tjcm;rD'D,mrsm; uploading jyKvkyf&mwGif
tokH;0ifygonf/ tqkdyg option ukd tcsKdUu ASCII ESifh Binary [lívnf; ac:qkdMu\/
"Text" ukd a&G;NyD;aomtcg OK ukd ESdyfvkduf&onf/ xkdtcg rdrd\zkdifonf server ay:
&Sd line rsm;qDokdY pwif ykdYaqmifay;awmhonf/ xkd upload vkyfaerItwGuf tcsdeftenf;i,f
apmifh,l&onf/ okdY&mwGif rsm;rMumrDqkdovkd server directory rS main Fetch window
twGif; rdrd\zkdif ay:xGufvmonfukd jrif&ygvdrfhrnf/
vkyfief;pOftqifh (4) Page tm; ppfaq;,ljcif;
,ckawmh rdrd\ page onf web ay:wGif w&m;0ifa&muf&SdoGm;NyDjzpfonf/ pdwfcsaocsmrI
&Sd½kHavmufawmh browser wpfckjzifh ppfaq;Ekdifygao;onf/ (Figure 3-4) rdrd\ favourite
browser udk zGifhum URL tjzpf http://www.jenskitchen.com/index.html. [k jznfhoGif;ay;
vkduf&onf/
Figure 3- 4
,ctk cg jyKvyk xf m;aom page onf web ay:wGi f &adS eNyD
jzpof n/f rrd td aejzih f browser twiG ;f r S ¤i;f \ URL oYkd
0iaf &mu,f jlci;f jzi hf ½jIriEf ikd of n/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 39
Web Authoring Toolwpcf jkzi hf uploadingvyk af qmijfci;f
Web authoring tool awmfawmfrsm;rsm;onf FTP programs rsm; toifhyg&SdvmNyD; jzpfyg
onf/ ,ckjyKvkyfaqmif&GufrIudk Macromedia Dreamweaver ukd Mac uGefysLwmwGif tokH;cs
o½kyfjyrnfjzpf\/ yDpDay:wGifvnf; vkyfaqmifykH twlwlyif jzpfygonf/ rnfonfh tool
jzpfap vkyfaqmifykHrSm twlwlyif jzpfMuygonf/
vkyfief;pOftqifh (1) Document topfwpfck zefwD;jcif;
rdrdtwGuf index.html file ukd zefwD;&eftvkdYiSm Dream weaver ukd tokH;jyKxm;onf/
(Figure 3-5) rdrdtaejzifh rdrdvkyfaqmifcsuf rSefuefaocsmrI&Sdr&Sdudk NyD;cJhaom Oyrmenf;wl
zGifh,l ppfaq;MunfhvkdonfrSm trSefyifjzpfygvdrfhrnf/
Figure 3- 5
½;kd &iS ;f aom welcome page
zefwD;&eftwGuf
Dreamweaver ukd
to;kH jyKxm;cJoh n/f xaYkd emuf
]]mysite}} directory wGif
index.html taejzi hf ¤i;fukd
odrf;qnf;,lonf/
40 WEB DESIGN vufawG Yoifcef;pmrsm;
vyk if e;f pOtf qi hf (2) "site" topwf pcf uk k d set up vyk ,f jlci;f
rdrd jyKvkyfaqmif&Gufrnfh project ukd Dreamweaver u "site" [laom a0g[m&jzifh tokH;jyK
aqmif&Guf,lygonf/ rdrd upload rjyKvkyfEkdifrD site topfwpfckudk jy|mef;owfrSwfí trnf
wpfckudkay;&ef vkdtyfonf/ (Figure 3-6) site manager (Site Window ukdjzwf&ef access
vkyfxm;onf) onf rdrd hard drive rS server qDokdY file transfer vkyfaqmifcsuf tm;vkH;udk
vkdufem aqmif&Gufay;jcif;jzpf\/
b,fbufwGif azmfjyyg&Sdonfh site trsKd;tpm; pm&if;wpfckpDtwGuf information jyKvkyf
aqmif&GufEkdif&ef dialogbox wpfckudk yHhykd; aqmif&Gufay;xm;onf/ "Web Server Info" [k
azmfjyxm;aom trsKd;tpm;onf host, username, password ESifh directory wkdYtwGuf
tokH;jyKcGifhay;um FTP transfers vkyfief;udk jyKvkyfEkdifonf/ ykHwGif azmfjyyg&Sdonfh "Local
Info" wGif directory ukd nTef;qkd&m rdrdzkdifyg&Sdxm;aom "mysite" ukd jyoay;vdrfhrnf/
Figure 3- 6
rrd \d ]site} u kd trnwf pcf k ay;vukd yf g/
xaYkd emuf hard drive ay:wGi f rrd \d
directory ay:o Ykd ae&mcsxm;,&l on/f
rrd wd ixf m;caJh om feature rsm;uk d access vyk &f ef ]]Site}} window ukd
zGivhf ukd yf g/ rrd \d local site ESifh rdr d server EiS hf ywof uof n hf owi;f
tcsutf vurf sm; jznohf iG ;f &e f xuG af y:vmaom menu rS ]]Define Sites}}
qokd nahf e&mu kd a&G;cs, f EydS vf ukd yf g/
Category abmiftwGif;rS ]]Web Server
Info}} twGi;f &adS eon hf Standard FTP
tcsutf vurf sm;u kd jznohf iG ;f yg/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 41
vyk if e;f pOtf qi hf (3) File u kd upload jyKvyk jfci;f
tifwmeuf qufoG,fNyD;pD;rItajctaeukd ppfaq;&onf/ (broadband jzifh qufoG,fonf
jzpfap? modem connection jzifh qufoG,fonfjzpfap) aocsmNyDqkdygu site window ay:
&Sd "Connect" [laom cvkwfukd ESdyf,ljcif;jzifh rdrd server qDokdY ykdYvTwfEkdifNyD jzpf\/ b,fbuf
jcrf;&Sd panel wGif server directory wnfaqmufxm;&SdykHudk jrifawGUEkdifonf/ Connection
&NyDqkdonfhtcg directory ukd highlight jyKvkyfívnf;aumif; zkdifukd vTJajymif;ykdYaqmifay;rnf/
"Put" [laom cvkwfudkESdyfívnf;aumif; jyKvkyfay;&onf/ Webserver okdY a&mufoGm;onf
ESifh wpfNydKifeuf b,fbufjcrf;&Sd panel wGif ay:xGufvmonfukd jrif&rnfjzpf\/
Figure 3- 7
Server o Ykd file u kd upload vyk &f ef ]]Put}} u kd click vyk af y;yg/
Filename onf a&mufvmvQif a&mufvmcsif; b,fbuf
window wGif ay:vmrnfjzpfonf/
Server quof ,G ,f &l ef ]Connect} u kd click
vyk vf ukd yf g/ ywkH iG f jyxm;onthf wikd ;f quof ,G Nfy;D
omG ;onthf cg server directory on f b,bf uf
window xJwGi f jriof mpGm &adS eygvrd rfh n/f
42 WEB DESIGN vufawG Yoifcef;pmrsm;
vyk if e;f pOtf qi hf (4) Page u kd ppaf q;,jlci;f
Server ay:wGif a&muf&SdoGm;onfhzkdifukd browser wpfckjzifh jyefvnf ppfaq; Munfh½IEkdifrnf
jzpfygonf/ Figure 3-4 wGif jrifawGU&ouJhokdY tvm;wltaetxm;twkdif; jrifawGU&ygrnf/
Server Space &SmazGjcif;
þtqifhokdYa&muf&SdNyD;aemuf web server wpfckay:wGif rdrdykdifqkdifaom page rnfuJhokdY
ae&m,lxm;rnfukd od&Sdxm;&ef vkdtyfvmygonf/ rdrd\pufonf HTTP server software
jzifh setup vkyfxm;jcif;r&Sdvsuf vkyfukdifaeaomtaetxm;rS vkyfief;twGuf jynfhpkH vkHavmuf
pGm wyfqifxm;NyD;jzpfaom uGefysLwmwpfvkH;okdY access vkyfí &Ekdifa&;udk vkdtyfvmygonf/
Web server wpfckay:wGif rdrdykdifqkdifEkdifaom ae&mav;&&SdrI BudK;pm;jcif;udk rdrd site twGuf
host wpfck &SmazGonf[kvnf; rSwf,lEkdif\/
uHaumif;axmufrpGmjzifh hosting option awmfawmfrsm;rsm; &Sdaeygonf/ tcrJh &&SdEkdifaom
ae&mrsm;rStp wpfESpfvQif a':vmaiG aomif;csDay;&aom ae&mrsm;txd &SdMu\/ rdrdvkyfief;
vkyfukdifrnfhobm0ESifh vkdufavsmnDaxGtjzpfEkdifqkH;wpfckudk a&G;cs,f,lEkdifygvdrfhrnf/ rdrd
tvkd&Sdí zefwD;aom site onf vkyfief;okH;ayvm;? udk,fa&;ukd,fwmudpö aqmif&Gufayrnf
vm;[lonfhtcsufay: rlwnfaeygonf/ wpfcgokH; ESpfcgokH;jzpfvm;? tpOfwpdkuf okH;vkdonf
vm;? hosting service wpfcktwGuf (rdrd\ client ESifh csdefqum) ukefusaiG rnfrQwwfEkdif
rnfenf; ponfjzifh pOf;pm;qkH;jzwfp&mrsm; &SdvmEkdifonf/
,ckwifjyrnfhtcef;u@wGif rdrd\ webpage ukd online ay:wGif ae&m&ae&eftwGuf
jzpfEkdifajc&Sdaom option rsm;udkom xkwfEkwf rdwfquf wifjyvkdygonf/ rdrdESifh tokH;wnfhrnfh
service trsKd;tpm;udk tMurf;zsif; ñTefjyay;Ekdifygvdrfhrnf/ rnfokdYyifqkdap a&G;cs,frI rSefuef
Ekdifap&efom t"dujzpf\/
Server wpfckudk qufcH&,ljcif;
rdrdonf ½kH;wpf½kH;wGif web designer tjzpfvkyfukdifae&ygu okdYr[kwf web design vkyfief;
ukrÜPDwpfckwGif wm0efxrf;aqmifae&ol wpfOD;jzpfygu rdrd½kH;vkyfief;rsm;onf ukrÜPD\
network ESifh server wpfckck csdwfqufaqmif&Gufxm;NyD; jzpfygvdrfhrnf/ xkdtajctaersKd;wGif
aocsma&&maom server machine qDokdY rdrd\zkdifrsm;udk copy vkyf,lvkduf½kHom &Sdawmhonf/
tu,fí rdrdonf ausmif;om;wpfOD;jzpfaeygu rdrdausmif; account \ wpfpdwf
wpfa'o yg0ifcGifh&&SdolwpfOD;uJhokdY ukd,fykdif personal page ykdifqkdifcGifh ay;xm;ygvdrfhrnf/
Webpage twGuf ae&mwpfck&ydkifcGifhudk oufqkdif&m rdrdoifwef;XmerSwpfqifh ar;jref;
awmif;qkdEkdifygonf/
tu,fí rdrdonf freelance wpfOD;taejzifh tvkyfvkyfukdifaeonfqkdygpkdY? rdrd\ client
onf olwkdY\ site twGuf server space ukd wm0ef,l aqmif&Gufvdrfhrnf[k rSwf,lEkdifyg
WEB DESIGN vuaf wGoY icf e;f pmrsm; 43
onf/ okdYaomf client tao;pm;av;rsm;taejzifhrl space udpöajz&Sif;Ekdifa&; enf;vrf;udk
&SmazGrItwGuf rdrdtm; aqG;aEG;vmygvdrfhrnf/
Online jzefYcsda&; tzGJYtpnf;rsm;
rdrdtaejzifh personal site wpfcktjzpf jzefYcsd½kHtaejzifhom qE´&Sdrnfqkdygu tqdkygudpö
twGuf aiGokH;pGJrIrjyKapvkdyg/ Yahoo! Geo Cities (geocities, yahoo.com) okdYr[kwf Tripod
(www.tripod.lycos.com) wkdYuJhokdYaom online jzefYcsda&;tzGJYtpnf;rsm;xHrS tcrJh web
space tcsKdUudk &,lEkdifcGifh&Sdygonf/ xkduJhokdYaom service Xmersm;u tcrJh server space
wpfckudk zefwD;ay;ygvdrfhrnf/ rdrd\ page wGifyg&Sdaom content ay:wGif trSDjyKum ¤if;wkdY
Organizing and Uploading a Whole Site
o½kyfjy azmfjyxm;aom erlemrsm;rSm web document wpfckudk zefwD;í upload
jyKvkyf,lykHomjzpfonf/ okdY&mwGif rdrdtaejzifh page wpfckxufykdaom
taetxm;jzifhvnf; aqmif&GufcGifh &SdMuygonf/ 12 rsufESmxufykdí rsm;jym;aom
document rsm;twGuf jzpfap? *&yfzpfrsm; yg0ifxm;aom? rsufESmrsm;aeaom
document jzpfap? rdrdtaejzifh directory rsm; xyfqifh sub-directory rsm; zGJUpnf;
wnfaqmuf&rnf jzpf\/ xkdokdY wnfaqmuf&ef vkdtyfcsufukd txl;*½kjyKí pDpOfrI
jyK&onf/ okdYrSom t&Snfojzifh vG,fulpGm rdrd site ukd manage
vkyf,lEkdifygvdrfhrnf/ Graphic [lí ac:ac:? image [líyif owfrSwf owfrSwf
directory wpfcktwGif;wGif *&yfzpfrsm;tm;vkH;udk xnfhxm;ay;jcif;onf
y"meusaom vkyf½kd;vkyfpOfwpfck jzpfonf/ awmfawmfrsm;rsm; vkyfaqmifrIwkdif;onf
rdrd sit taejzifhyif wnfaqmuf zGJUpnf;xm;rItay: tajccHxm;onf/ Overall
directory structure rsm; jzpfaewwfonf/ (þae&mwGif "News" [laom
trsKd;tpm;rsm;jzpfvQif owif;ESifhywfouforQ zkdifrsm;om yg0ifxm;rIudk
qkdvkdonf) Site structure ESifh ywfoufí aemufykdif; tcef;u@rsm;wGif
tao;pdwf wifjyay;ygOD;rnf/ rdrdtaejzifh wpfBudrfwnf;ESifh rdrd\ site wpfckudk
upload vkyf,lEkdifaMumif;ukdawmh aocsmayguf tmrcHEkdifygonf/ Directory
wpfckudk FTP'd ykHpH (FTP program jzifh aqmif&Guf,lEkdifonfjzpfap? authoring
tools jzifh aqmif&Guf,lEkdifonf jzpfap) wpfckudk a&G;cs,faomtcgwGif directory
a&m subdirectory ygrusef tm;vkH;udk upload vkyf,lEdkifrnf jzpf\/ Filename
wpfckpDjzifh upload vkyf,lrnfhtpm; ¤if;zkdiftm;vkH; yg0ifaom directory
wpfcktaejzifh upload vkyf,l&ygonf/ okdYygí rdrd hard drive twGif; rdrd site
twGuf directory structure ukd pdwfBudKuf wnfaqmufNyD;rSom upload udpö
qufvuf pOf;pm;vkyfaqmifoifhaMumif; owdjyK&rnf/
44 WEB DESIGN vufawG Yoifcef;pmrsm;
twGuf aMumfjimu@rsm;a&mxnhfjcif;jzifh tcGifhta&;csif;zvS,fonfhoabm aqmif&Gufay;
Muygonf/ þokdY aqmif&Guf,l&onfrSm rdrdtaejzifh uoduatmufawmh &SdEkdifrnfjzpfaomf
vnf; bwf*suf tqifajyEkdifa&; enf;vrf;wpfckjzpfaomaMumifh vkyfoifhvkyfxkdufygonf/
tm;omcsuf
tcrJh&onf/
ukd,fykdif&&SdrIESifh 0goemtavsmuf aqmif
&GufcGifhtaejzifh web page rsm;ukd aumif;
pGm pDpOfaqmif&GufEkdifonf/ aiGaMu; tuefY
towfjzifh acRwmokH;pGJae&ol q,fausmf
oufrsm;twGuf taumif;qkH; option
wpfckvnf; jzpfaeayonf/
tm;enf;csuf
¤if;wkdY\aMumfjimrsm; rMumcP xGufay:
vm&if; rdrd page ukd ½Ijrif&onfrSm pdwf
uoduatmuf jzpfEkdifonf/ Business
site rsm;twGuf qDavsmfrI &SdcsifrS &SdEkdifrnf/
Online Services EiS hf ISPs rsm;
America Online (www.aol.com) okdYr[kwf CompuServe (www.compuserve.com) wkdY
uJhokdYaom online service wpfckwGif pm&if;zGifhxm;cJhvQif ¤if;wkdYu rdrdtwGuf web server
space wpfckudk toifhtcGifhta&;ay;xm;ygvdrfhrnf/ Online service rsm;onf omreftm;jzifh
web page rsm; jyKvkyfaqmif&GufEkdifa&;twGuf tool rsm;? assistance rsm;jzifh yHhykd; aqmif&Guf
ay;Muygonf/
ISPs (Internet Service Provider) rsm; jzpfMuonfh Earthlink, MSN ESifh @Home wkdY
uvnf; ¤if;wkdYtoif;0ifrsm;twGuf xkdufoifhaom web server space (5 MB okdYr[kwf 6
MB) cefY ay;tyfjcif;jzifh qGJaqmifrI jyKwwfMuonf/
tm;omcsuf
p&dwfusOf;usOf;jzifh rdrdtwGuf hosting
service wpfcka&m tifwmeuf access yg
cHpm;cGifh&ygonf/
tqkdyg service rsm;onf omreftm;jzifh
wpfvvQif 15 a':vmrS 25 a':vmtxd
om aumufcHavh&SdMuonf/
rdrdukd,fykdif0goemtavsmuf zefwD;,lxm;
onfh web page wpfcktjzpf ao;i,fyif
ao;i,fjim;aomfvnf; xkdufxkdufwefwef
tokH;jyKEkdifonf/
tm;enf;csuf
uefYowfcsuf space wpfcktaejzifhom &&Sd
ojzifh business site wpfcktjzpf pdwfwkdif;
us wnfaqmufEkdifvdrfhrnfr[kwfay/ ISPbased
domain name tjzpfom URL wGif
&&Sdrnf/ (Oyrm www.earthlink.com/
member/-niederst) service taejzifh aES;
auG;aeapygvdrfhrnf/ taMumif;rSm tjcm;
toif;0ifrsm;ESifh twlwuG rQw okH;pGJ&
aom server rsm; jzpfaomaMumifhyifwnf;/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 45
Professional Hosting Services
ususee cHhcHnm;nm; business site wpfckay:wGif aqmif&Gufaejcif;jzpfygu okdYr[kwf
rdrd\ ukd,fykdif web toGiftjyifav;udk om;om;em;em; wifqufvkdygu professional
hosting service wpfckrS server space iSm;&rf;&&Sda&;udk vkdvm;rnfrSm trSefjzpf\/ Hosting
Service rsm;uvnf; ¤if;wkdY wwfpGrf;EkdiforQ server space wpfckudk yHhykd;aqmif&Gufay;
EdkifMuygonf/ IPs uawmh xkdokdYr[kwfay/ Internet access ukd cGifhjyKMuvdrfhrnf r[kwfay/
Hosting ukrÜPDrsm;onf omreftm;jzifh server package twGuf vkHavmufaom
twkdif;twmwpfckudk cGifhjyKay;avh&SdMu\/ Megabyte (MB) yrmPtcsKdUESifh e-mail address
wpfckudk ay;xm;jcif;jzifh e-commerce vkyfief;aqmifwmrsm;txd vkyfykdifcGifh tjynfht0
&&Sdaponf/ Server space ukdvnf; ykdrkd&rnf/ Feature rsm;pGmudkvnf; &&Sd aqmif&GufEkdifrnf
qkdonfhtwGuf rdrdtaejzifhvnf; vpOfaMu; ukefusaiG ykdvmrnfrSmtrSefyifjzpf\/
Shopping for Hosting Services
Hosting Service wpfck &SmazGrIrjyKrD rdrdukd,frdrd yxrqkH; ar;jref;ajzMum;xm;&ef tcsufrsm;
udk atmufwGif azmfjyay;ygrnf/ rdrduaqmif&GufoljzpfNyD; tyfESHvmol client rsm;udkvnf;
xkduJhokdYaom tcsuftvufrsm;udk ar;jref;&ygvdrfhrnf/
vkyfief;oHk;vm;? udk,fa&;oHk;vm;
tcsKdU hosting service rsm;onf personal site twGufom ae&may;Ekdifonf/ tu,fí
business site [k qkdvmygu personal site wpfckxuf usoifhaiG ykdrkd awmif;qkdavh&SdMuonf/
rdrdESifhoifhavsmfaom hosting package jzpfap&ef vufrSwfra&;xkd;rD aocsm pOf;pm; qkH;jzwf
oifhonf/ Personal account jzifh commercial site wpfckudk ckd;aMumifckd;0Suf rvkyfoifhay/
tm;omcsuf
[efcsufnDaom Scalable package wkdif;
onf website t&G,ftpm;wkdif;udk ajz&Sif;
,lEkdifonf/ tcsKdU okawoejyKcsufrsm;t&
rdrd\ vkdvm;csufESifh bwf*sufaiGudk pyf
[yfaprnfh host wpfckawmh &SmazGí &Ekdif
pjrJyg[k qkdonf/ rdrdukd,fykdif domain
name ukd &&SdEkdifrnf/ (Oyrm www.little
hain.com) [domain name ESifh ywfoufí
qufvuf azmfjyrnfhtcef;u@wGif yg0if
vmygvdrfhOD;rnf/]
tm;enf;csuf
rdrdtwGuf tqifajyrI &Sdr&Sd csdefukdufEkdifap
rnfh wpfckck aocsmpGm avhvm&SmazG&ef
vkdtyfygonf/ cdkifrmaom robust server
solution &Edkifa&;rSm tukeftus rsm;vSay
onf/ rjrifpGrf;Edkifao;aom usoifhaiGrsm;
vnf; xyfrHí pkvmEdkifygonf/
46 WEB DESIGN vufawG Yoifcef;pmrsm;
ae&myrmP rnrf Q tv&dk odS en;f
rsm;aomtm;jzifh small site rsm;onf server space 5 MB xuf rydkay/ tukeftus cHEkdifvQifrl
rdrdtaejzifh page rsm; &mausmfxm;Ekdifrnfhtjyif *&yfzpfawmfawmfrsm;rsm; okdYr[kwf
taumif;pm; audio ESifh video file rsm; zefwD;,lEkdifrnfjzpf\/
Traffic tBudrfa& rnfrQ oHk;rnfenf;
wpfvvQif rdrdtaejzifh data transfer rnfrQvkyfrnfukd pOf;pm;xm;&ygonf/ rdrd wif,lrnfhzkdif
rsm;\ t&G,ftpm;ESifh twiftus traffic rnfrQ&SdEkdifrnfukdvnf; BudKwif pOf;pm;xm;&onf/
(Oyrm browser okdYr[kwf download tBudrfrnfrQ&Sdrnf) rsm;aomtm;jzifh hosting service
rsm;u 5-10 gigabytes (GB) cefYom wpfv wpfvtwGuf cGifhjyKwwfonf/ (tedrfhpm;?
tvwfpm; traffice site twGuf vkHavmufygonf/) xkdYxuf ykdvmaomyrmPtwGuf megabyte
wpfckvQif rnfrQ[lí xyfrHawmif;qkdrI&SdEkdif\/ tu,fí rdrdzkdifrsm;onf audio okdYr[kwf
video uJhokdYaom media file rsm; jzpfygu aocsmayguf ykdrkdukefusrnfjzpfonf/ ay:jyLvm
jzpfvSaom site wpfckqkdvQif wpfvvQif 30 GB txuf data trasfer vkyf,l&aMumif; tod
ay; wifjyvkdygonf/ Unlimited data trasfer vkyfEkdifaom service vnf; &Sdygonf/ aps;csKd
aom hosting ukrÜPDudk &Sm&Smaygufayguf &Ekdifwwfovkd wpfvvQif a':vm 300 txuf
ay;aqmif&aom ukrÜPDrsm;vnf; &SdMu\/
e-mail account rnfrQ tvkd&Sdoenf;
rdrd domain wGif e-mail ay;ykdYvufcHol ta&twGuf rnfrQ&SdEkdifrnfudkvnf; BudKwif pOf;pm;
xm;&Sdoifhonf/ rdrdESifhywfoufí e-mail account tjzpf qufoG,fvmEkdifol tajrmuftjrm;
&SdEkdifygu ykdrkdckdifcHhaom server package ukd a&G;cs,foifhonf/ xkdYtwl aps;EIef;BuD;jrifhaom
package vnf; jzpfaumif;jzpfygvdrfhrnf/
extra functionality rsm; vdkygovm;
Hosting service awmfawmfrsm;rsm;onf special web site feature rsm;udk vufcH aqmif&Guf
avh&SdMuonf/ okdYtwGuf standard service twGufwpfrsKd;? extra functionality twGuf
wpfrsKd; aumufcH awmif;qkd,lMu\/
oyf&yfvSyaom spiffy scripts (e-mail form rsm; okdYr[kwf guestbook rsm;)twGuf
library rsm;twdkif;twmrS e-commerce solution NyD;jynfhpkHatmif aqmif&Gufay;onfh
twkdif;twmrsm;txd yg0ifEkdifygonf/ rdrdtaejzifh space &&Sda&;twGuf 0,f,l&mwGif
shopping cart, secure server (credit card transaction rsm;twGuf), Real Media server
(audio ESifh video rsm; xnfhoGif;rItwGuf), mailing list ponfwkdYuJhokdYaom extra feature
rsm; vkdtyfrI &Sdr&Sdukd xnfhpOf;pm;xm;&Sd&rnf/
txufyg rdrd\ vkdtyfcsufrsm;twGuf identified vkyfNyD;onfESifh rdrd vkdtyfcsufESifhtnD
&&Sda&;twGuf pkHprf;ar;jref;rIrsm; pwif&awmhonf/ yxr rdrd\ taygif;toif; oli,fcsif;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 47
rdwfaqGxHwGif ar;jref;aqG;aEG;,l&onf/ ¤if;wkdY\tawGUtMuHKjzifh axmufcH ajymqkd a0zefrI
rsm;jzifh csifhcsdefEkdifonf/ wpfenf;tm;jzifh web onf tvm;wl avhvmrIrsm;jyK&ef taumif;qkH;
ae&mwpfckjzpfaMumif; tvkdvkdodvmygvdrfhrnf/
tu,fí rdrd ar;jref;pkHprf;oifhoavmuf aqmif&GufNyD;pD;NyDqkdygu atmufyg site rsm;&Sd
hosting service tñTef;rsm;jzifh EIdif;,SOfMunfhum qkH;jzwf,lEkdifygonf/
HostSearch www.hostsearch.com
CNET Web Services webhostlist.internetlist.com
HostIndex www.hostindex.com
TopHosts.com www.tophosts.com
www."You".com!
rdrd\ home page address onf web ay:wGif cGJcGJjcm;jcm; &SmazG od&SdEkdif&eftwGuf jzpfonf/
just-for-fun page ac: taysmfoabmjzifh ae&mcsxm;vkdygvQif ISP URL (www.earthlink.
com/members/~niederst) uJhokdYaom wpfckcku ykdrkd qDavsmfrnfjzpf\/ xkdtaetxm;xuf
ykdaom tajctaersKd;jzpfygu rdrdukd,fykdif domain name ukd tvkd&Sdaeygvdrfhrnf/ okdYrSom
rdrd jyKvkyfvkdaom pD;yGm;a&;vkyfief; okdYr[kwf yg&Sdaom content ukd yDyDjyifjyif azmfjyEkdifrnfjzpf
\/ ESpfpOfaMu;ay;oGif;&rIenf;enf;ESifh aqmif&Gufonfhae&m&Sdygu rnfolrqkd domain
name wpfckudk &&Sda&;twGuf pm&if;oGif;Murnfomjzpfonf/
Dot What!
xkxnfBuD;rm;aom web site trsm;pkrSm .com jzifh tqkH;owfxm;ykHudk jrifawGUMu
&rnf/ okdY&mwGif tjcm;aemufquf suffixe rsm;ukdvnf; tokH;jyKMuao;onf/ tqkdyg
suffixe rsm;uyif site \ ykHpHobm0udk oabmayguf em;vnfvG,fEkdifygonf/ tar
&duefEkdifiH&Sd top-level-domain (TLDs [lívnf; ac:qdk owfrSwfMuonf/) rsm;\
suffixes rsm;rSm atmufygtwdkif;jzpf\/
.com commercial/business
.org nonprofit organization
.edu educational institutions
.net network organizations
.mil military
.gov government agencies
2000 jynfhESpfaemufydkif; wGif top-level domain rsm; wGif .biz,.coop ESifh .pro
[laom suffixes topfrsm; oHk;pGJvmaMumif;vnf; od&Sdxm;oifhygonf/
48 WEB DESIGN vufawG Yoifcef;pmrsm;
Name wpcf qk odk nrf mS rnof eYdk n;f
tifwmeufay:wGif IP (Internet Protocol) address wpfcktjzpf *Pef;oauFwrsm;ESifhtwl
vlwkdif; zwf,lEkdifatmif domain name ukd jrifawGUEkdifygonf/ My site onf server
space wpfae&mwGif 206.151.75.9 [lonfh *Pef;rsm;jzifh &Sdaeonfukd uGefysLwmrsm; em;vnf
pOfrSmyif rdrdwkdYtaejzifh littlechair.com ukd ac:í&NyDjzpf\/ IP address onf ta&;ygvSonf/
¤if;jzifhom rdrd\ domain name ukd pm&if;jyKpk&ef tcGifhtvrf;wpfck &SdvmEkdifjcif;aMumifh
jzpfonf/
&v,G Ef ikd yf gonaf vm
tvGef wyfrufzG,faumif;aom .com txufwef;tqifh domain rsm;twGif; ½dk;½dk; vG,fvG,f
domain name rsm;rSm awmfawmfrsm;rsm; a&G;cs,f owfrSwfxm;MuNyD;jzpfaMumif;udk em;vnf
xm;MuNyD; jzpfygvdrfhrnf/ olrsm;tokH;rjyK&ao;onfh trnfwpfckudk jyifqifEkdifa&;twGuf
search wpfcku vG,fvG,fulul &SmazGrIudk aqmif&Gufay;&ef toifh&Sdaeygonf/ ¤if;rSm
Network Solution Inc. (www.networksolution.com) \ home page ay:&Sd "Search for
a domain name" [k azmfjyxm;onfh box wGif Munfh½Ippfaq; a&G;,lEkdifygonf/
Domain wpcf tk wuG f pm&i;foiG ;f rwS yf wkH ijfci;f
NyD;cJhaom wpfESpf ESpfESpfupjyD; domain name wpfckudk pm&if;oGif;rSwfykHwifjcif;udpöonf
one-stop transaction jzifh tcuftcJr&Sd vG,fulpGm aqmif&GufrI jyKvmEkdifMuonf/ rsm;aom
tm;jzifh hosting ukrÜPDrsm;onf server account wpfck wnfaqmufvnfywfvsuf &SdaeNyD;
aom tpdwftykdif;av;ozG,f rdrdtwGuf domain wpfckudk toifhvG,fulpGmjzifh register
vkyfay;ygvdrfhrnf/ okdYaomf rdrdtaejzifh rdrdtwGuf owfrSwfay;xm;aom domain udk aocsmpGm
ar;jref;twnfjyK,lapvkdygonf/ Register vkyf&mwGif rdrdykdif domain name wpfcktwGuf
vkdtyfcsuftcsKdU &Sdaewwfygao;onf/
ukd,fykdif domain wpfckudk register vkyfawmhrnfqkdygu option awmfawmfrsm;rsm;udk
awGU&rnfyif/
rnfonfh domain name \ aemufwGifrqkd tqkH;owfpmvkH;rsm;rSm .com, .net okdYr[kwf
.org ponfjzifh awGUjrifEkdifygonf/ taumif;qkH; jyifqifrIwpfckudk network solution
(www.networksolutions.com) okdY OD;pGm wkduf½kdufqufoG,f avhvm,lapvkdygonf/ NyD;vQif
atmufygtcsufrsm;udk ar;jref;xm;&rnfjzpf\/
Ä taMumif;jcif;&mtwGuf administrative contact wpfck (name and address)
Ä pm&if;oGif; aiGpm&if;&Sif;wrf;vkyf&ef contact wpfck (name and address)
Ä enf;ynmydkif;qkdif&m tultnD&,l&ef contact wpfck (rdrd\ hosting service \
name and address)
WEB DESIGN vuaf wGoY icf e;f pmrsm; 49
Ä domain ukd host vkyfxm;ay;onfh server \ IP address ESpfck
Domain name wpfcktwGuf Network Solution wGif tyfESHum register vkyf,lygu
wpfESpfvQif a':vmaiG 35 cefYom ukefusrnf/ xkd register ukdvnf; wpfESpfrS 10 ESpftxd
tqkdjyKxm;&SdEkdifonf/
IP address r&Sdxm;vQif Network Solutions uyif pDpOf aqmif&Gufay;ygonf/ okdY&mwGif
tykdaqmif;aiGawmh &SdvmEkdif\/ þokdY aqmif&Gufay;jcif;udk site wGif "park" vkyf,lonf[k
ac:a0:Muonf/ Parking a site [k ajymqkdjcif;onf domain name ukd reserve vkyf,lonf
[k oabm&onf/ okdY&mwGif rdrdtaejzifh trSefwu,f hosting package wpfckudk r&rcsif;
rnfonfht&mrQ pwifaqmif&GufEkdifrnf r[kwfay/ tajccHoabmtm;jzifh IP address tcsKdU
udk iSm;&rf;okH;pGJjcif;yifwnf;/
,cktcg Network Solutions uJhokdY vkyfief;aqmif&Gufay;Muol trsm;tjym; ,SOfNydKif
ay:xGufvmaeMuNyD jzpf\/ Register.com ESifh Domainname.com [lí azmfjyxm;aom
Xmersm; jzpfygonf/ .com domain rsm;onf xdyfwef; level pm&if;0ifrsm;[k em;vnf,l
Ekdifrnfjzpf\/ tu,fírsm; rdrdtaejzifh a&G;cs,fqufoG,frIjyKrnfqkdvQif wpfESpfwGif site
wpfckudk park vkyf&ef ukefusp&dwfukd 35 a':vmrS 50 a':vmtxdom pOf;pm;oifhygonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 77
tyidk ;f EpS f
HTML u dk avvh mjci;f
HTML on f web page rsm; jyKvyk &f mwiG f rygrjzp f yg0iaf eon/f þtyidk ;fwiG f
HTML EiS hf ywof uíf tao;pwd f avvh mciG &hf Muawmrh njfzpof n/f HTML ukd
a&;S a[mi;f y½kH ;kd Mu;D rsm;jzi hf jyKvyk af qmi&f uG &f on hfvujfzi hf a&;om;en;fuvkd n;f rvrJG aoG
avvh moiyhf gon/f tce;f 6 erel m page wpcf k zewf ;D jci;f jzivhf n;f tv,G wf ul
pwiaf vvh mEidk Mfurnjfzpof jzi hf p;kd &rd yf yl epf &m rvtkd yyf gay/
rnof n hf web page rq kd zewf ;D &mwiG f web-authoring tool wpcf ck uk akd wmh
to;kH jyK&ygvrd rhf n/f otYkd wuG fto;kHwnohf n hf authoring program rsm;jzpof nhf
Macromedia Dreamweaver 3, Adobe Golive 4 EiS hf Microsoft Front Page
2000 wwYkd iG f tag rsm;u kd rnof Ykd ppD Oaf qmi&f uG xf m;aMumi;f wpjfyKdief uaf vvh mEidk &f e f Tool
Tip rsm;tjzp fxnohf iG ;f ay;xm;ygon/f
wu,wf r;ftm;jzi hftjcm;tjcm;aom web tool rsm; wpyf wkH pyf i f &adS eao;ojzihf
tqykd g y½*kd &rof ;kH rsK;dom to;kH jyKEidk of n[f k prJG wS rf xm;oiahf y/ Tag rsm;taMumi;f EiS hf
HTML tvyk vf yk yf ukH kd aumi;f pmG oabmaygurf nqf ykd gu tool rsm; uikd wf ,G &f mwiG f
yrkd kdv,G uf vl mygvrd rhf n/f
78 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 79
HTML Tag tm; rdwfqufjcif;
HTML Tag rsm;udk tokH;csí format vkyfxm;onfh web page rsm;taMumif;udk tydkif; 1
wGif azmfjycJhjyD; jzpfygonf/ Tag wkdYudk omreftm;jzifh formatting instruction wpfck\
twkdaumufwpfcktaejzifhom character tjzpf jyoavh &Sd\/ okdYr[kwf element wpfckukd
page tm; aygif;pyf&ef jyoonf/
Creating a Simple page (HTML overview)
tcef; 6
Figure 6- 1
Element wpcf uk k d page ay:wiG f ae&mcsxm;ykH
(Content display u kd rxcd ukd af p&e f owjdyKyg/)
HTML tag trsm;pkonf container tag rsm;jzpf\/ tpydkif; tokH;jyK&efwpfckESifh tqHk;
owf tokH;jyK&ef wpfck[lí tag ESpfckyg0ifaeonf/ Text \ yrmPwpfckudk xkyfydk;xm;&Sdonfh
oabmyif jzpfonf/ Tag instruction rS tag wGif yg0ifvsuf&Sdaom content tm;vHk;udk
yg0if ywfoufapygonf/ tzGifhtydwf jyKvkyfay;Ekdifaom cvkwfwpfcktaejzifhvnf; awG;Munfh
vQif &Ekdif\/ tqHk;owfend tag onf tpydkif; start tag twlwlyif jzpfonf/ tqHk;owf
end tag a&SUwGif slash(/) wpfckom tydkygaeonf/
80 WEB DESIGN vufawG Yoifcef;pmrsm;
tcsKdU tag rsm;onf stand alone tag rsm; jzpfMu\/ ay:xGufvmvdkaom element
wpfckwGif tqkdyg tag tm; csxm;ay;½Hkom jzpfonf/ tqHk;owftydwf tag xnfhay;&ef
rvkdtyfay/
o½kyfjy web page rsm;udk ykHpHESpfrsKd;vHk;jzifh toHk;cs azmfjyay;ygrnf/
Web Page wpfcktm; pkpnf;wyfqifjcif;
Web page wpfck wnfaqmufwyfqifrIudk atmufazmfjyyg tqifhav;qifhjzifh o½kyfjyay;vkdyg
onf/
HTML : the Hard Way
,aeYacwfwGif Web-authoring tool rsm;rSm tHhMozG,faumif;atmif ay:xGef;vsuf
&Sdaeojzifh rdrdudk,fwkdif page rsm; zefwD;&eftwGuf tcGihfaumif;yif jzpf\/ xkdaMumifh
tMuHÓPfxkwfNyD; cufcufcJcJ vkyfaqmif&rIrsKd;ESifh tcsdefukefcHum
BudK;pm;,l&rIrsKd;rsm;rS uif;vGwfcGifh &Muonf/ ]]Tool rsm;u xkdrQaumif;rGefonf[k
qkdrSawmh HTML ESifh ywfoufí *CeP tao;pdwfavhvm&ef vdkygao;ovm;}}
[laom ar;cGef;rsKd; ar;Ekdifp&m taMumif; &Sdygonf/ xkdar;cGef;twGuftajzrSm
udk,fwkdifvkyfMunfh&efom jzpfygonf/ oifhtwGuf tag wkdif;udk rSwfrdaep&m
vkdtyfrnf r[kwfay/ okdYaomf tcsKdU tuRrf;w0if jzpfNyD;aomt&mrsm;onf web
page rsm; jyKvkyf&ef vdktyfolwkdif;twGufawmh tcuftcJ &Sdwwfonfh
oabmudkawmh arhxm;í r&Ekdifyg/ tu,fí rdrdonf web designer wpfa,muf
taejzifh vkyfukdifaqmif&Guf&rnfh tvkyfrsKd;udk &SmazGaeoljzpfygu HTML document
wpfckESifh ywfouforQ tm;vHk;udk odxm;&ef vkdtyfaMumif; oabmaygufxm;&rnf
jzpf\/
HTML udk oifMum;&mü vufjzifha&;&aom enf;a[mif;BuD;ukdom oabmusp&m
aumif;aeygrnf/ HTML tvkyfvkyfykHudk em;vnf oabmayguf&ef
þenf;a[mif;onf taumif;qHk;jzpf\/ Document rsm;udk tag udk rSefrSefuefuef
jyKvkyfwwf&ef tcsdefrMumapaomenf; jzpfonf/ HTML udk aocsmpGm
em;vnfxm;jcif;jzifh authoring tool rsm;udk ydkrkdvG,ful jrefqefpGm tusKd;&Sd&Sd
tokH;cswwfygvdrfhrnf/ xkdYtjyif HTML ESifh ywfoufonfh source file udk Munfh½I
wwfjcif;jzifhvnf; udk,fhukd,fudk auseyfp&m aumif;aernf jzpf\/ rnfolrqkd
source rsm; tvkyfvkyfykHudk tpOfavhvmNyD; vkyfukdif&onf/ tu,fí source
wpfckonf xyfcgwvJvJjzifh yg&SdaevQif rnfokdYrQ aumif;Ekdifp&m taMumif;r&Sday/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 81
tqi fh (1) Setting up the HTML document
HTML document wGif tag rsm; tokH;csykH/
tqi hf (2) Formatting text
Page ay:wGif text rsm;twGuf format vkyf&ef container tag rsm; tokH;csykH/
tqi hf (3) Adding graphical elements
Page ay:wGif ½kyfyHkrsm;xnfhoGif;&ef standalone tag rsm; tokH;csyHk/
tqi hf (4) Adding a hypertext link
rdrd web page demo tm; web wGif linking vkyf,lyHk/
HTML rsm;udk pm½kdufoGif;&mwGif Mac uGefysLwmjzpfygu BBEdit ac: HTML editor
udk tokH;jyKí yDpDuGefysLwmjzpfygu Note Pad udk tokH;jyK&onf/ Microsoft Word
uJhokdYaom Word processing program rsm;onf qDavsmfrI r&Sday/ taMumif;rSm ¤if;wdkYonf
code wGif hidden information rsm; xnhfoGif;Muavh&Sdjcif;aMumifh jzpf\/ xkdokdYaom hidden
information aemufrSom pure text character (ASCII) &Sdaewwfonf/
o½kyfjywnfaqmufrI vkyfief;pOfwpfavQmufvHk;wGif browser wpfckjzifh ppfaq;ae&rnf
jzpf\/ HTML twGuf yxrqHk; rdwfqufaqmif&Guf&mwGif browser onf taxmuftul
rsm;pGm&onf/ erlemtm;jzifh ykHwGifazmfjyxm;ouJhokdY ]] Jen's Kichen }}trnf&Sd site wpfcktwGuf
home page ykHpHrsKd;udk azmfusL;&rnf jzpf\/
Figure 6- 2
,cok icf e;f pmwGif web page u kd tqivfh ukd f wnaf qmuof mG ;rnjfzpof n/f
vvS yS yypkH rH sK;d awm h r[wk af y/ oaYkd om f prwuf svaS om pwikd tf jzp f ½jIriEf ikd of n/f
82 WEB DESIGN vufawG Yoifcef;pmrsm;
tqi hf (1) Setting up the HTML Document
Browser zwf,lEkdifaom web document wpfcktwGuf ½kd;½kd; text file wpfckjyKvkyf&ef
tcsufESpfcsuf&Sdonf/ xkd document \ tqkH;owfwGif .htm okdYr[kwf .html [laom tqHk;
owf trnf &Sdxm;&rnf/ okdYrSom browser rS todtrSwfjyKay;onf/ aemufwpfcsufrSm
basic HTML tag rsm; yg0if&rnf/ ¤if;uom web document \ structure ukd cGJjcrf;
owfrSwfay;Ekdifygonf/
Basic Structure
Web document wpfck\vkyfief;pOftpwGif skeleton wpfckjzifh jyay;xm;\/
HTML document wpfcktwGuf tydkif;ESpfydkif;om ydkif;,l&efom &Sdonf/ acgif;pD;ydkif;
(head also called header) ESifh ukd,fxnfydkif; (body) jzpfonf/ Head wGif document \
taMumif;t&m t"dyÜm,fouf0ifaom acgif;pD;&Sdí body wGif document xJü trSefwu,f&Sd
aom content yg0ifaeonf/
Document \ structure onf < HTML>, <HEAD> ESifh <BODY> ponf container
tag rsm;udk tokH;jyKjcif;jzifh cGJjcm;ay;xm;ygonf/
Figure 6- 3
xnfhoGif;csufrjyK&ao;aom document yHkpHwpfck
yxrOD;pGm browser ukd xkd text onf ]] HTML }}tjzpf jynfhpkHrI&SdaMumif; label wyf
jyoay;&rnf/ tpwGif HTML tag <HTML> ESifh tqHk;wGif end HTML tag
</HTML>) wkdY xnfhay;&onf/
<HEAD> twGuf </HEAD> tags u document \ tptqkH;ukd udk,fpm;jyKay;&
onf/ ,ckwifjyaom tcef;wGif ¤if;udk xnfhoGif;xm;rI r&Sdyg/
<BODY> twGuf </BODY> tags u document \ ukd,fxnfudk ukd,fpm;jyK
cJGjcm;ay;onf/ Page wGif yg0ifaom taMumif;t&mukd xnfhay;&ef jzpfonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 83
Giving the page a title
Document \ tjcm; rygrjzpfaom tydkif;wpfykdif;rSm ¤if;\acgif;pD; (title) jzpfonf/ Page
udk trnfay;jcif;[k qkdvQifvnf; rrSm;ay/ ¤if;onf browser window \ tay:qHk; bar
xJwGif jyoxm;&ygonf/ acgif;pD;wpfcktpm; file name ukd okH;&ygvdrhfrnf/ acgif;pD;twGuf
<TITLE> container tag jzifh jyqkdxm;onf/
Figure 6- 4
tqykd g title onf browser
window \ tay:xyd yf ikd ;f bar
wGi f ay:vmvrd rfh n/f
Document acgi;f pOuf kd ]]Jen's Kitchen}}
trnfay;í title tag
(<TITLE>.....</TITLE>) ESihftwl
jznfhpGuf,lvdkufonf/
To Capitalize or Not to Capitalize
þoifcef;pm wpfavQmufvHk;wGif tokH;jyKaom tag rSeforQudk capital letter
rsm;udkom tokH;jyKxm;ygonf/ okdY&mwGif ¤if;wkdYonf lowercase letter trsKd;
tpm;tjzpfvnf; &yfwnfrI jyKay;Ekdifygvdrfhrnf/ Tag rsm;onf Case sensitive ac:
case letter a&G;cs,f ZDZmaMumifrI r&Sdygay/ rdrd ESpfoufovkd a&G;cs,f
tokH;jyKEdkifygonf/
Capital letter rsm;jzifh tm;vHk;udk tokH;jyKjcif;tm;jzifh tag rsm;onf code rsm;ESifh
uGJjym; jcm;em;oGm;aponfhtjyif vufa&;jzifh tMurf;a&;csonfhtcg HTML code
rsm; yDjyifrI &Sdapojzifh vGJrSm;p&m taMumif; r&Sdawmhay/
XML and XHTML wkdYuJhokdYaom tagging system ESifh ywfoufí lowercase tag
om vkdtyfaejcif;aMumifh HTML taejzifh oD;jcm; ay:vGifaponf/ rdrdtaejzifh
HTML udk yxrqHk; tokH;jyKí avhvmpOfumvtwGif; lowercase tag jzifh
a&;om;usifh &&Sdap&ef vkdtyfygonf/
84 WEB DESIGN vufawG Yoifcef;pmrsm;
Adding content
þrQavmuftxd tqifajyaeygonf/ tu,fírsm; browser window wGif wpfckck
ay:vmap&ef vkdvm;ygu document \body wGif content tcsKdUudk xnfhay;&ef vdktyfyg
onf/ erlemtjzpf atmufygtwkdif; ½kdufoGif; jyoay;vkdygonf/
Figure 6- 5
Document \
pmudk,frsm;udk
text rsm;jzihf
jznfhoGif;,lyHk
Free Software Samples
HTML editor rsm;udk
tcrJh &,lavhvmEkdifygonf/
BBEdit udk BareBones
Software site
(www.barebones.com) rS
free demo tjzpf &Ekdifonf/
Allaire Home Site udk
(www. allaire.com/
products/homesite/
index.cdm) rS "Download
Home Site 4.5" udk
a&G;cs,f,ljcif;jzifh
&,lEkdifonf/
The Importance of the Title
acgif;pD; (Title) onf information \
ta&;BuD;qHk; tpdwftydkif; jzpfonf/ xkdYtjyif
page udk zGifh,lvkdufaomtcg browser \
tay:bufwGif ay:xGufvmrSom rdrdtESpfoufqHk;
Bookmark menu wGif a&G;cs,f& vG,fulrnf
jzpf\/
rdrd\ page tm; tnTef;jyKaomtcgwGif search
engine rS xkd title udk a&G;í &SmazGay;&ygonf/
xkdtitle ukd ay;&mü t"dyÜm,f &Sd&SdESifh
tokH;wnfhapaom title jzpf&efom ta&;BuD;onf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 85
Tool Tip
Document Creation
Macromedia Dreamweaver okdYr[kwf Adobe GoLive uJhokdYaom web- authoring
tool wpfckckudk tokH;jyKaomtcgwGif document wpfckudk topftjzpf pwif zefwD;vkduf
onfESifh structural tags rsm; tvdktavsmuf xnfhoGif;NyD; jzpfaeygonf/ xkdYaMumifh
tool rsm;udk header tm; extra document information tcsKdUtwGuf xnfhay;&efom
&Sdygonf/(<META> tag uJhokdYaom file zefwD;&mwGif tokH;jyKxm;onfh aqmhzf0J azmfjyrI)
rsm;aomtm;jzifh tool rsm;rSm document wpfckvHk;twGuf setting rsm; jyKvkyf&mü page
ay:wGif&Sdonfh title u azmfjyay;&ef jyqkday;onf/
FRONTPAGE 2000
DREAMWEAVER 3
Page Properties dialog box twiG ;f document \ acgi;f pO f xnxhf m;on/f
GOLIVE 4
Page Inspector
palette twGif;
document \
acgif;pOfudk
xnfhoGif;yg/
Palette u kd zGi&fh ef
Page opwf pcf uk kd zGivfh ukd yf g/ Code wiG f default title ukd high light jyxm;ay;ygvrd rfh n/f
<TITLE>..... </TITLE> EpS cf tk Mum; rrd ½d ukd of Gi;fvakd om acgi;f pOuf kd ½ukd ½f okH mjzpof n/f
document icon ukd click vyk &f on/f Icon aemurf S uyvf su f acgi;f pOuf kd ½ukd of Gi;f &eof mjzpof n/f
86 WEB DESIGN vufawG Yoifcef;pmrsm;
Saving and Viewing the page
HTML Structure ESifh content tcsKdUtwGuf oifhwifhavsmufywfpGmjzifh document wpfck
awmh &&SdoGm;NyD jzpf\/ okdYaomf browser twGif; Munfh½IEkdif&eftwGuf zkdifudk save vkyf&efESifh
trnfwpfckckay;&ef vdktyfaeygao;onf/ Filename rsm;wGif tqHk;owfwkdif;twGuf .htm
okdYr[kwf .html [laom pmvHk;rsm;udk web document wpfcktjzpf browser rS todtrSwfjyK
ay;apEkdifa&;twGuf xnfhay;&ef vdktyfonf/ yHkwGif filename udk index.html [k jrifawGY&rnf
jzpf\/ (zkdiftrnfrsm;ESifh ywfoufí ]]Naming Conventions }} tnTef;azmfjycsufwGif avhvm
Ekdifonf/)
Figure 6- 6
Browser wGi f Mun½hf &I e f rjyKvyk rf D file uk d save
vkyfxm;ap&rnf/
Browser wGif Index. html [k rdrdwdkY MunfhjrifEkdifygNyD/ rdrduGefysLwm\ hard drive
wGif &Sdaeaom zkdifwpfckzGifh,ljcif;udk ]]locally }} file wpfcktm; zGifh,lonf[kac:qkd\/ Browser
wpfckay:wGif rdrdvkyfudkifaejcif;udk ppfaq;&mü Internet connection csdwfquf&ef rvdkyg/
Browser udk launch vkyfí ]] Open-Page }}okdYr[kwf ]]Open-Local }} [laom tnTef;ukdom
file menu rS a&G;cs,f&onf/ Text rsm;twlwuGjzifh run EkdifygNyD/ Browser wGif title ESifh
wuG tjynfhtpkHudk avhvm ppfaq;,lEkdifygonf/ þae&mwGif browser onf line break
udk todtrSwf rjyKao;yg/ ae&mtydk&SdaerIudkvnf; todtrSwfrjyKyg/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 87
zkdiftwGif;ü yHkwGifjyxm;onfhtwkdif; tag rsm;udk jyifqifNyD; pmykd'frsm;udk aocsmpGm
jznfhxm;rSom line break udpöESifh ae&m,lvkdrIudpöudk browser u vkyfay;ygvdrhfrnf/
xkdudpöudk aqmif&Guf&ef vG,fulygonf/ Return udk oGm;í rdrd\ HTML document
wGif BuKdufovkd jyifqif,lEkdifrnf jzpf\/ Editor xJwGif &SdaepOf vkyfaqmiforQonf final
product twGuf rnfonfhxdcdkufrIrQ r&SdEkdifay/ (What Browser Ignore wGif tao;pdwf
avhvm zwf½IEkdifygonf/)
Figure 6- 7
File uk d save vyk xf m;Ny;D aemuf ]]Open Page}}
[al om cvwk uf kd a&G;cs,Ef ydS &f i;f
rrd Mdun½hf vI kad om file u kd ae&mcsxm;,ol n/f
HTML tag taejzih f text format
vyk jfci;f r&adS om browser wpcf k
twiG ;f Mun½hf oI nthf cg my page
yg&cdS surf sm; twwl u G yg0if
aeaponf/
88 WEB DESIGN vufawG Yoifcef;pmrsm;
What Browsers Ignore
Browser wpfckwGif ppfaq;Munfh½Iaomtcg HTML document twGif;&Sd tcsKdU tcsuftvufrsm;udk
todtrSwfjyKrxm;aMumif; awGYjrif&ygvdrhfrnf/
Line breaks (carriage returns)
Document text \ flow wGif pmyk'ftwGuf (p) okdYr[kwf line break twGuf (<BR>) [laom tag
rsm; xnfhxm;rSom text ESifh element rsm; rdrdvdktyfonfh taetxm;twkdif; tpOfwpkduf ywfxkyfNyD;
jzpfaeygvdrfhrnf/
Tabs and multiple
Character space twGuf tab udk tokH;jyK&mü one consecutive blank xufydkí xm;&Sdaomtcg
ay:vmrnfhpmvHk;rsm;udk atmufygtwkdif; jrifawGUEkdifonf/
long, long ago
okdYtwGuf long, long ago jzpfap&ef tab wpfckukd okH;&onf/ (xkdudpötwGuf aemifvmrnhftcef;wGif
tao;pdwf azmfjyygOD;rnf/)
Multiple <P> tags
Browser rS <P> [laom tag udk jrifvQif ¤if;udk line space csay;ygvdrhfrnf/ <P> tags twGJvdkuf
(odkYr[kwf paragraph container <P> ....... <P/> onf Mum;cH text r&SdvQif vkdonfxufydkonf[k
t"dyÜm,foufa&mufaomaMumifh <P> tag wpfckwnf;taejzifhom display vkyfrnf jzpf\/ Browser
trsm;pkonf mutliple line break taejzifh multiple <BR> tag rsm;jzifhom display vkyfvdrhfrnf/
Unrecognized tags
Browser wpfckonf ¤if;em;rvnfonfh tag rsm;ESifh rrSefruef jyqkdxm;aom tag rsm; twGuf ½kd;om;pGm
todtrSwfrjyKwwfay/ Tag ESifh browser wkdYtay: rlwnfí &v'f tajymif;tvJ &SdEdkifonf/ rnfonfh
t&mudkrQ browser rS display rvkyfonfh tajctaersKd;vnf; &SdEdkifonf/ Tag \ content rsm;udkom
display vkyfonfhtcgrsKd;vnf; &SdEdkifonf/
Text in comments
Special <!....ESifh ....> element udk comment wpfcktwGuf jynTef;&ef tokH;jyKxm;onfh text rsm;udk
Browser u display vkyfvdrfhrnf r[kwfay/ Simple comment rSm
<! ....This is a comment ...>
<! ..... This is a
multiple line comment
that ends here ....>
initial <!....and preceding the final ....> \aemufwGif space wpfck&Sd&rnf/ okdYaomf comment
twGif;wGif bmrQ xnfhray;oavmufvnf; &SdEdkifrnf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 89
A Brief History of HTML
HTML ray:xGef;rD SGML (Standard Generalized Markup Language ) udk
tokH;jyKMuonf/ SGML tag rsm;onf wifjycJhNyD;aom HTML tag rsm;twkdif;
tvkyfvkyfygonf/ okdY&mwGif document element \ toGiftjyif azmfjycsufukd ykdí
qef;opfpGm pGrf;aqmifEkdifonf/ Publisher rsm;onf ¤if;wkdY\document rsm;udk
SGML version taejzifh pwif odrf;qnf;xm;Muonf/ ¤if;rSwpfqifh tokH;csrI
trsKd;rsKd;udk translate vkyf,lavh &SdMuonf/ Oyrmtm;jzifh heading wpfcktjzpf
text ukd tag vkyfxm;jcif;onf wpfrsKd;wnf; oHk;Ekdifaom format om jzpfapvdrfh
rnf/ Singel source file wpfckonf end product trsKd;rsKd; &EdkifrSomvQif ykdí
tusKd;&SdEdkifygonf/
HTML onf SGML tagging system wpfckrS aygufzGm;vmaom application
wpfckom jzpfonf/ tajccH wnfaqmufrIrSwpfqifh HTML udpörsm;twGuf
yifudkowdå usef&Sdapum cGJjcm; aqmif&GufrIjyKjcif; jzpf\/ þokdYjzifh ESpftawmfMum
jzwfoef; tokH;jyKcJh&ojzifh <FONT> tag uJhokdYaom 'DZkdifemrsm;u xdef;csKyf
ay;&onfh udpörsm;wGif HTML tag zefwD;rIudk tcuftcJ &SdcJh&onf/
Seprarate document wpfck twGif; all style instruction (okdYr[kwf source
document \ separate section ) rsKd;jzifh odrf;qnf;xm;aom content twGuf
style information udk yHkpH oGif;xm;ay;Ekdif&ef pdwfcs&onf/ System topf
wpfckrSm Cascading style sheet [k ac:onf/ ¤if;wGiftqifhjrifh acwfrD
enf;pepfrsm; yg0ifxm;ojzifh ,ckoifcef;pmrsm;wGif tao;pdwf azmfjyEdkifrnf
r[kwfay/
Document wpfcktwGif; heading wpfckonf type of the information ukd
nTefjyEkdif&ef standard <H1> wpfckjzifhom label jyKvkyfygvdrfhrnf/ tjcm;ae&mwGif
style wpfcktwGif; 'DZkdifemonf H1 rsm;ukd 36 point okH;í page ay:wGif blue
Helvetica ykHpHjzifh A[kdjyK ykHpHcs,l&rnf[k tao;pdwfowfrSwf,lMu\/
þokdY aqmif&Gufjcif;jzifh HTML \ rSefrSefuefuefuyf&ef urÜnf;uyf
pm&Gufuav;rsm;ESifh 'DZdkifemrsm;ukd tjyeftvSef tusdK;jyKay;ygonf/
90 WEB DESIGN vufawG Yoifcef;pmrsm;
tqi hf (2) Formatting Text
Text formatting tag tcsKdUudk jrefjrefxnhfMunfhMupkdY/ Text rsm;ukd ykHazmf&ef jzpfonf/
xkdae&mwGif specific tag rsm;ESifh ywfoufí pkd;&drf&ef rvdktyfay/ Tagging vkyfief;ESifh
tuRrf;w0ifjzpfap&efom avhusifhapjcif; jzpfygonf/
Figure 6- 8
Browser wiG f my page u kd toizhf Gixhf m;jci;f aMumihf
topaf y:vmrnh f my page tm; Mun½hf &I ef
]]Refresh}} odkYr[kwf
Reload u kd EydS vf ukd ½f okH m&odS n/f
Heading (<H1>, <H2>), paragraph (<p>), breaks (<BR>) EiS h f italic text (<I>) wYkd
zewf ;D &ef HTML file u kd text-formatting tag rsm; xnafh y;xm;on/f
Browser wGi f jyoEikd &f etf wGu f ajymi;fvJcsurf sm;ukd
vyk af p&etf viYkd mS rrd \d document ukd save vyk &f ef
ta&;Bu;Donuf kd owjdyKyg/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 91
<H1>- - - </H1>
,ck page \ headline 0ef;usifwGif start ESifh end first-level heading tags wkdYudk ae&mcs
xm;vkdufonf/ tBuD;qHk; bold text jzifh <H1> tag rsm;tMum;rS text rsm;udk browser rS
jyefqkdrI jyKonf/ rdwfquftnTef;\ aemufwGif 'kwd, level heading (<H2>) jzifh zefwD;
xm;vkdufonf/ þae&mwGif <H1> text xuf tenf;i,fao;i,fpGm xm;&Sdonfudk owdjyKrdyg
vdrfhrnf/ xkd tag rsm;aMumifhvnf; line breaks ESifh extra space rsm;udk tay:ESifhatmuf
heading ESpfcktMum; xnfh,laponfh taetxm; jzpfvmaMumif; owdjyKyg/
<P> - - - </P>
pmydk'frsm; cGJxm;ap&ef text rsm;udk paragraph container tags (<P> - - - </P>) jzifh xkyfxm;
aMumif; nTefjyay;xm;onf/ pmykd'fwpfckukd cGJjcm;,lvmaomtcg line onf tvdktavsmuf
break jzpfum txufESifhatmufwGif space tcsKdU xnfhxm;ay;onf/
Single <P> tag jzifhvnf; oD;jcm;pmykd'frsm;udk cGJxm;ívnf;&ygonf/ Browser onf
Container tags uJhokdYyif jyefqkdrI jyK,lonf/ rnfokdYyifjzpfap container tag udk tokH;csjcif;
onf enf;vrf;usaeí ydkrdkESpfoufzG,f&m jzpfygonf/ tu,fí rdrdtaejzifh style sheet
rsm;jzifh formatting rsm; xnfh,lvkdaomtcgwGif container rSm omí vkdtyfvmwwfonf/
xkdYaMumifh tpaumif;aumif;jzifh avhusifh&rnfom jzpf\/
<I> - - - </I>
Bon Appetit udk italic formatting <I> tags jzifh zGifhí </I> tag jzifh ydwf,ljcif;onf
¤if;pmvHk;rsm;ukd pmvHk;apmif;jzifh azmfjyay;&ef jzpfonf/
<BR>
Extra space ryg0ifapbJ line break jzpfay:ap&ef cGJjcm;vdkaom points ae&mrsm;wGif
<BR> break tags rsm;udk xnfh,lxm;onf/ Standalone tag wpfck\ erlemwpfckyif jzpfonf/
Range of text tjzpf tvkyfvkyfjcif; r[kwfbJ break vkyfay;&efom xnfhxm;jcif; jzpf\/
xkdokdY tajctaetxd tqkdygzkdiftm; save vkyfí browser window wGif NyD;pD;orQ
tajctaeudk ppfaq;,lonf/ ,cktcgrsKd;wGif ]]Reload }} okdYr[kwf ]]Refersh }} [laom
cvkwfrsm; ESdyfvkduf½Hkjzifh NyD;cJhaom jrifuGif;ukd jyefa&mufEkdifaom taetxm;&SdoGm;NyD jzpf\/
þae&mwGif owdxm;&rnfrSm save vkyf,lNyD;rSom tqkdyg reload cvkwfrsKd;udk okH;&ef
jzpfonf/
92 WEB DESIGN vufawG Yoifcef;pmrsm;
tqi hf (3) Adding Graphical Elements
,cktcsdefrSpí container tag rsm; cdkrSDyg&SdrI &Sdaeygonf/ rdrd\ page tm; pGrf;tm; ydkrdkaumif;rI
ay;aprnfh graphical element tcsKdUudk xnfh,lMu&awmhrnf/ þae&mwGifvnf; specific
tag rsm;ESifh ywfoufí tpdk;&drfvGefuJp&mtaMumif; r&Sdao;ay/ tcef; 8 a&mufrSomvQif
aocsmpGm tav;xm;aqmif&Guf&efrsm; qufvuf jyoay;ygrnf/
Page \ tay:ykdif;okdY Title graphic wpfck xnfh,lygrnf/ tqkdyg element rsm;u
standalone tag rsm;ESifh attribute vkyfief;wkdY rnfokdY&Sdonfudk MunfhEkdif&ef tcGifhta&;aumif;
wpfckudk ay;ygvdrfhrnf/
Figure 6- 9

ajymif;vJcsufrsm;
jriaf w&GU e f "Reflesh"ukd
EydS yf g/
tm;vHk;
tvkyfvkyfNyD;om;
awGU&ygvdrhfrnf/

Imageukd
xnfhyg/

Horizontal rule (line) wpcf uk kd xn,hf yl g/ t&nS uf kd
ajymi;f &ef attribute u kd xnofh ;kHxm;Ny;D rule \
txludkvnf; xnfh,l&rnf/
Saveom vyk vf ukd yf g/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 93
oyf&yfaom graphic heading rsm;ESifh text heading ukd tpm;xkd; xm;&Sdonf/ rdrdtae
jzifh graphic ay:xGufapvdkaomae&mwGif <IMG> tag udk xm;ay;jcif;tm;jzifh graphic
onf page okdY yl;aygif;yg0ifNyD; jzpfEkdifygonf/ Image tag onf standalone tag
wpfck\ erlemaumif;wpfckjzpfonf/ ¤if;wGif closing okdYr[kwf end tag ryg0ifay/
xkdae&mwGif ae&m,l&efom jzpf\/
Horizontal rule (line) wpfckudkvnf; <HR> standalone tag udk tokH;jyKí xnhfoGif;
xm;onf/
Action okdYr[kwf behavior udk modify vkyf&ef tag wpfckudk xnhfxm;aom information
\ tpteonf attribute wpfckjzpfonf/ Attribute rsm;onf equal sign
wpfckjzifh ¤if;wkdY\ value setting rS oD;jcm; cGJxGufvsuf &Sdonf/
<IMG> tag \ SRC= tydkif;onf vdktyfaom attribute wpfck\ erlemjzpfonf/
¤if;rygvQifbrowser onf graphic ukd zrf;xdef;xm;&ef rodjzpfaeygvdrhfrnf/
<HR> tag wGif attribute rsm;onf optional om jzpfygonf/ Attribute rsm; ryg
vQif default horizontal rule onf browser window \ tus,fESifhtxludk one
pixel om jzpfaeapygvdrfhrnf/
Figure 6- 10
Page twGuf NyD;ajrmufNyD;orQ tajctaeukd ppfaq;Edkif&ef save vkyfxm;NyD;aemuf
reload jyefvkyfxm;jcif; jzpfonf/
tqi hf (4) Adding a Hypertext Link
Web page wpfckwGif links rygvQif rnfokdY&SdEkdifrnfenf;/ ajzp&m taMumif;tcsuf r&Sd
oavmufyif jzpf\/ xnhfukdxnfh&rnf jzpf\/ tqkdygudpöudkvnf; ,cktqifhwGif tav;
teuf rpOf;pm;apvkdao;yg/ ¤if;udk tcef; 9 wGif tao;pdwf azmfjyay;ygrnf/ rnfokdY
aqmif&Guf,l&onfqkdonfudkom jyoay;vkdjcif; jzpfygonf/
94 WEB DESIGN vufawG Yoifcef;pmrsm;
Recipe name wdkYudk oufqkdif&m recip page rsm;jzifh link vkyfxm;apvdkonf/
erlemwpfckudk avhvmMunfhMuygpkdY/
1/ Anchor (<A> - - - </A>) [k ac:qkdxm;onfh container tag wpfckjzifh aygif;xm;í
link rsm;&Sdaeygonf/ rdrd link vkyfvkdaom text teD;wGif anchor tag rsm;udk container tag
rsm;uJhokdY xm;&Sday;xm;onf/ okdYaomf rnfonfh page ukd link vkyfvkdygonfqkdonfh tae
txm;awmh rSefuef&ef vkdtyfygonf/ þae&mwGif HREF= jzifh attribute rS 0ifvmygonf/
URL ukd attribute &nfnTef; page \ URL udk attribute rS browser ukd ay;&ef vdktyf\/
Naming Conventions
File rsm;tm; trnfay;&mwGif atmufazmfjyyg enf;Oya'ESifh xHk;xrf;pOfvmudk
vdkufem&ayrnf/
Ä zkdifrsm;twGuf rSefuefaom aemufquf (suffixe) rsm;ukd tokH;jyKyg/
HTML File rsm;\ tqHk;wGif .html okdYr[kwf .htm [laom
aemufquf&Sd&rnf/ Web graphic wkdif;wGif ¤if;wkdY\ file format ukd cable
jyKvkyf&mwGif .gif okdYr[kwf .jpg (.jpeg [lívnf; &\) ukd tokH;jyK&rnf/
Ä Filename rsm;twGif; rnfokdUaomtcgrQ character space udk
tokH;rjyKapvdkyg/
pmwpfvHk;csif; odomapvkdygu lynch_bio.html uJhokdYaom underline
character wpfckjzifhom okH;avhokH;x&SdMuonf/
Ä ?,%,#,/,:,:,.,tp&Sdonfh special character rsm;ukd a&SmifvTJokH;&rnf/
Filename rsm;wGif twwfEkdifqHk; letter, number, underscore, hyphen ESifh
period rsm;ukd uefYowf&ef jzpfonf/
Ä HTML wGif filenames rsm;onf case-sensitive jzpf\/
Filename twGif; lowercase letter rsm; tm;vHk;udk wnDwnf; tokH;jyKyg/
rvkdvm;tyfvQif tvG,fwul pDpOf&,lrIudk OD;pm;ay;vdkonfhoabm jzpfonf/
Ä Filename rsm;udk wkdwd&Sif; jzpfaeap&rnf/
tu,fí rjzpfraeudk &Snf&SnfESifh mutiword pepfudkom okH;&rnfhudpö
jzpfvmygu ALongDocumentTitle.htm uJhokdYaom file name jzpfvQif capital
letter jzifh ykdif;jcm; okH;yg? okdYr[kwf underscore tjzpf a_long_ document_
title.htm [k jyqkdEdkifygonf/
Filename rsm;wGif twwfEkdifqHk; letter, number, underscore, hyphen ESifh
period rsm;ukd uefYowf&ef jzpfonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 95
þae&mwGif URL onf relative URL wpfckjzpfonf/ (URL wpfckonf wlnDaom server
wpfckay:wGif document wpfck nTefjyay;onf/) tapenade recipe page qDokdY link
wpfckzefwD;Ekdif&ef jzpfygonf/ (tapenade.html)
Figure 6- 11
½;kd &iS ;f aom web
page wpfckawmh
&&Sdxm;NyD;jzpfonf/
¤i;fwiG f link wpcf Ek iS hf
*&yzf pwf pcf k yg&odS n/f
odyfvSyaom
toGiftjyifawmh
r[wk af y/ oaYkd omf
jynphf akH om web
page wpfckjzpfonf/

Link rsm;onf anchor tag <A> u kd xnxhf m;ay;on/f
þae&mwGi f rrd wd tYkd aejzih f linked document twuG f
URL u kd yyhH ;kd ay;xm;onh f HREF attribute
yg0ifxm;&rnfjzpfonf/ Save vkyfí refresh vkyf,lyg/
2/ File udk save vkyfNyD; reload vkyfvdkufaomtcg anchor text onf tjyma&mifjzifh
ay:vmum underline qJGvsufjzifh click vkyf,lEkdifaom text tjzpf browser wGif &SdaeNyD
jzpfonf/
Page vkyfief;pOfrsm; NyD;oGm;NyDjzpf\/ þtajctaejzifh server qDodkY upload vkyf,l
Ekdifonf/ vkyfyHkvkyfenf;udk tcef; 3 wGif tqifhvkduf azmfjyay;NyD; jzpfonf/
þodkYNyD;pD;oGm;cJhaom page onf pdwf0ifpm;p&m toGiftjyifrsKd;awmh &SdcsifrS &SdygvdrhfOD;
rnf/ aemif qufvufazmfjyay;rnfh vkyfcsufrsm; ygvmvQif tvGefudk pdwf0ifpm;zG,f&mrsm;
zefwD;,lEdkifrnf jzpf\/
96 WEB DESIGN vufawG Yoifcef;pmrsm;
When Good Pages Go Bad
NyD;cJhaom o½kyfjycsufrsm;onf tqifajyacsmarGYpGm &Sdvdrfhrnf[k arQmfvifh&ygonf/ okdY&mwGif
HTML code ½kdufESdyfpOf tao;trTm; tcsuftvuftcsKdU rSm;,Gif;p&mtaMumif; &SdvmEkdif
ygonf/ xkdokdYaom tao;trTm;tcsufav; wpfcsuf csKdU,Gif;rI&SdvQifyif page wpfckvHk;
ysufpD;oGm;Ekdifygonf/
tu,fí rdrdtaejzifh slash (/) udk closing header tag </H1> wGif ½kdufxnfh&ef
arhoGm;ygu ykHwGifjrifawGY&ouJhokdY big bold heading text ykHpHBuD; aysmufoGm;awmhonf/
taMumif;rSm slash (/) rygvmaomaMumifh browser onf heading ESifh ywfoufonfh
formatting vkyfief;pOfudk browser tm; rajymjzpfonfhoabm jzpfoGm;awmhonf/
About Attributes
HTML \ real power ESifh flexibility wkdYonf *kPfowåd attribute rsm;twGif;
wnf&Sdaeygonf/ Appearance okdYr[kwf behavior wkdYtm; modify vkyf&ef tag
wpfckü small instruction rsm; xnhfay;onfh tajctaersKd;udk qkdvkdonf/
Attribute ukd tokH;csjcif; ykHaoenf;rSm atmufygtwkdif; jzpfonf/
<TAG ATTRIBUTE = "value">
affected text </TAG>
attributes ESifh ywfoufí ta&;BuD;onfh tcsuftcsKdUwkdYudk
avhvmEkdifao;onf/
Ä Attribute onf opening container tag twGif;okdYom oGm;onf/ Opening
tag onf attribute jzifh xnfhoGif;xm;cJhvQifyif closing tag onf tag name
taerQom yg0ifonf/
Ä tm;vHk;awmh r[kwfay/ okdYaomf trsm;pk attribute onf value &Sdonf/
¤if;onf attribute's name aemufwGif equal sign (=) jzifh uyfygvmonf/
Value onf *Pef;ta&twGuf wpfck? pmvHk;wpfvHk;? text wpfwGJ? URL wpfck
odkYr[kwf twdkif;txGmwpfck jzpf&rnf/
Ä Single tag wpfcktwGif;ü attribute tajrmuftjrm; xnfh,lEdkifonf/
Ä Value ywfvnfwGif quotation mark xnfh,lrIonf aumif;aomtavhtusifh
jzpfaponf/ okdYyifjzpfjim;aomfvnf; value onf single word okdYr[kwf single
number jzpfaevQif ¤if;wkdYu omit vkyfay;ygvdrfhrnf/
Ä tcsKdU attribute rsm;onf vdkukd vkdtyfonf/ Oyrmtm;jzifh <IMG> tag
twGif;ü SRC attribute vkyfxm;&onf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 97
tu,fírsm; slash (/) awmh ygygonf/ yxrqHk; <H2> tag wGif bracket wpfck ½kduf
xnfh&ef arhoGm;cJhonf qkdygpkdY/ Foreign - looking tag udk todtrSwf rjyKawmhay/
odkYygí yxrqHk; HTML page rsm;udk tao;trTm;av; rSm;,Gif;vQif rnfokdYjzpfEkdifonf
udk erlemjyqkd&jcif; jzpfygonf/
Figure 6- 12
rrd \d page u kd þypkH tH wikd ;f jzp&f vQif slash
useaf ejci;f &rdS &udS kd ppaf q;&rn/f orYkd [wk f heading
wpcf tk wiG ;f end tag usecf íJh vn;f jzpEf ikd of n/f
jzpyf suyf tkH ajctae erel mjzpof n/f Closing
container tap rS slash csefvSyfcJhvQif
browser onf heading formatting ]off}
o Ykd ajymi;f &e f road wmah y/ xaYkd emuf
page wpcf vk ;kHon f tBu;D Eikd qf ;kH
ypkH tH wGi;f csed xf m;on/f
Figure 6- 13
þerlemyHkpHwGif uGif;puGif;ydwfwpfck
trwS wf r hJ csexf m;cohJ n/f Browser
wGif ]]From Jen's Cookbook}}
aysmufaeonf/
xdkuGif;puGif;ydwfr&SdonfhtwGuf
wpfcgrQ rjrifzl;ao;aom
elaborate tag tcsKUdtaejzihf
azmjfyygtu©&mpmvHk;rsm;udk
zwf½Iae&onf/
98 WEB DESIGN vufawG Yoifcef;pmrsm;
HTML Review - Structural Tags
Document \ structure wGif yg0if ywfoufaprnfh ta&;BuD;aom tag rsm; taMumif;ukd
þtcef; 6 wpfckvHk;wGif azmfjyay;cJhygonf/ o½kyfjycsufwGif qufvuf azmfjyrnfhtcef;rsm;?
usef&Sdaeao;aom tag rsm;udkvnf; rdwfqufay;vdkygao;onf/
Tag Function
<HTML> document wpfckvHk;udk HTML tjzpf todtrSwfjyKjcif;/
<HEAD> document \ acgif;pD;tjzpf todtrSwfjyKjcif;/
<BODY> document \ pmudk,f[k todtrSwfjyKjcif;/
<TITLE> Page \ acgif;pOfay;xm;csuf/
Browser twGi;f ü rrd d page u kd Mun½hf oI nthf cg text rsm; aysmuuf G,af eaMumi;f
aw&UG vQi f uiG ;f puiG ;f ywd f aysmuaf eonaf vm? quotation mark aysmuaf eonaf vm
taotcsmppaf q;,&l rn/f ¤i;fwaYkd Mumiofh m jzpEf ikd of n/f
Head Line rsm;
vGwfaeonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 99
Web page rsm; zefwD;&mwGifjzpfap? browser wGif ppfaq;Munfh½I&mwGifjzpfap rMum
cP awGUMuHKwwfaom jyóemtcuftcJtcsKdUudk atmufwGif avhvmMunfh½IEkdifygonf/
Q : uReaf wm\f document u dkten;f i, ftajymi;f tv Jvyk cf yhJ gon/f oaYkd omf page ukd
reload vyk íf browser wiG f Mun½hf &I m e*tdk widk ;f &adS eao;aMumi;f awaUG e&yg onf
A : Reloading rvkyfrD HTML document udk save rvkyfrdaomaMumifh jzpfygvdrfhrnf/
þtcsufonf ta&;BuD;qHk;wpfcsuf jzpfonf/
Q : uReaf wm f jyiqf ixf m;aom page ay:rS text rsm;tm;v;kH tBu;D Bu;D jzpaf eonf
A : Heading tag twGuf end tag arhusefchJíjzpfrnf/ xkdYtwl end tag wGif slash
(/) udkvnf; arhxm;cJhí rjzpfay/
Q : uReaf wm\f page wp0f ucf e Yf aysmuaf eygonf
A : Closing bracket (>) odkYr[kwf tag wpfcktwGif;&Sd quotation mark wpfck rxnfh
vdkufrdaomaMumifh jzpfEkdifonf/
Q : <IMG> tag u kdto;Hk csí graphic wpcf kxn,fh yl gon/f oaYdk omf broken - graphic
icon jzi hf jyovmygonf
A : Broken - graphic onf jzpfEkdifp&m taMumif;trsKd;rsKd; &SdEkdifonf/ yxrtcsufrSm
browser udk,fwkdifu graphic udk &SmrawGUjcif; jzpf\/ URL rSefuefrI &Sdr&Sd
ppfaq;,l&rnf/ (URL ESifh ywfoufí tcef; 8 wGif tao;pdwf aqG;aEG;wifjy
ay;ygrnf) aemufwpfcsufrSm rdrdxnfhoGif;aom graphic onf web browser rS
vufcHEkdifaomformat jzpfrjzpf ppfaq;,l&rnf/ Oyrmtm;jzifhGIF odkYr[kwf JPEG
wkdYudk jzpfonf/ ¤if;wkdYtwGuf proper suffix jzpf rjzpfudkvnf; ppfaq;,l&rnf/
Having Problems?
100 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 101
Text rsm;tm; format vkyf,ljcif;
tcef; 7
"Typesetting" on the web
Web twGuf[k text udk marking vkyf&mü print twGuf azmfnTef;onfhyHkpHESifh rwlay/ Text
rsm;tay: rnfokdY½Ijrif&rnfqkdonfh tcsufudk wdwdusus odxm;&ef enf;vrf;r&Sday/
rdrdbrowser \ reference rsm;ukd wpfcsufMunfhyg/ xkdtcg online viewing twGuf
rdrdBudKufESpfoufovdk font trsKd;tpm;ESifh t&G,ftpm;rsm;ukd tao;pdwfazmfjy&ef pGrf;aqmifEdkif
rIrsm;ukd awGU&ygvdrhfrnf/ Internet Explorer twGif;rS font control rsm;tm; access vkyf
&ef Edit ukd a&G;í Preference ukd oGm;yg/ xkdYaemuf Language/ Font ukd a&G;cs,f,l&ygonf/
Navigator jzpfygu Edit udk a&G;í Preference okdY oGm;um Appearance category rS font
ukd a&G;cs,f,l&ygonf/ Browser default twGuf rnfonfh font ukdrqkd a&G;cs,f,lEkdifonfh
oabmyifjzpfonf/
HTML document wGif font wpfckudk specifying vkyfjcif;jzifh browser default udk
vTrf;rdk;Ekdif&ef enf;vrf;rsm; &Sdygonf/ tokH;jyKol\pufay:wGif wdusaom font udk tqifoifh
install vkyfrxm;vQif azmfjyEkdifrnf r[kwfay/ xkdYaemuf Windows taejzifh rnfrQus,fjyefY
onfudk rodonfh tajctaersKd;yif &Sdvdrfhrnf/ okdYr[kwf rdrdpufay:wGif line rsm;u jzwfrnf?
rjzwfrnfukdyif tmrcHcsuf ray;Ekdifyg/ rdrdxdef;csKyfrI jyifywGif vkyfaqmifcsufrsm;pGm &Sdaeyg
onf/
Two Fonts
Proportional font ESifh fixed - width font [lí tvkyfvkyf&ef font ESpfrsKd;om &Sdonf/
¤if;udk browser \ font preference wGif setting vkyfxm;yHkudk jrifawGUEkdifonf/
rdrd\ page wGif yg0ifaom trsm;pkrSm body text , heading, lists , blockquotes
ponfwkdYtwGuf proportional font rsm;tjzpf jrifawGUEkdifonf/ Proportional font
(Netscape Navigator pepfwGif ¤if;ukd Variable Width font [k ac:onf/) wpfckonf
yrmP rwlnDaom yHkpHcsxm;rIrsm;rS character wpfckpDtwGuf wpfckomvQif jzpfonf/
102 WEB DESIGN vufawG Yoifcef;pmrsm;
Oyrmtm;jzifh capital ]]W }} [laom pmvHk;onf ]]i }} [laom pmvHk;xuf ae&mykd,lxm;\/
Web browser trsm;pktwGuf default proportional font onf Times okdYr[kwf Helvetica
omjzpfMuonf/ tMurf;zsif; vrf;nGefrIqkdygpkdY/ Body text rsm;twGuf tokH;jyK&mwGif ¤if;
fonts ESpfrsKd;rS tokH;jyKaom wpfckonf t&G,ftpm;tm;jzifh 10 point okdYr[kwf 12 point
jzpf&rnf/
Figure 7- 1
yakH otus, f (tus,tf 0e;f
wpfckwnf;)&Sdaom tu©&m
pmvHk;rsm; tm;vHk;onf
vikd ;f ay:wGi f wnl pD Gm
ae&mcsxm;ay;xm;onf/
tcsK;dusaom pmv;kH rsm; (tus,?f
tajymif;tvJ)?
tu©&mpmvHk;wpfckpDtwGuf
ae&myrmPtrsKd;rsKd; cGJa0
csxm;ay;on/f 'ZD ikd ;f tay:
rlwnfaeonf/
tjcm;tokH;jyKEkdifaom font rSm fixed -width font jzpfonf/ ¤if;onf txl;py,f&S,f
owif;tcsuftvufrsKd;rsm;twGufom tokH;jyKMuonf/ Fixed - width font (constant
width okdYr[kwf monospace font [lívnf; ac:a0:wwfonf/) wpfckonf character
tm;vHk;ukd ajrjyifnDtuGmta0;yrmP wlnDpGm cJGwrf;cs,lavh&Sdonf/ Capital ]W} onf
small letter ]i }ESifh space twlwljzpfonf/ Browser onf specific tag tcsKdUt0uftwGuf
om fixed-width font udk toHk;jyKMuonf/ (PRE) okdYr[kwf (TT) uJhokdYaom code twGuf
tcif;tusif;ESifh ywfoufaom ae&mrsm;wGifom toHk;jyKavh&Sdonf/ omreftm;jzifh tqkd
ygelement rsm;onf courier \ ajymif;vJcsuftcsKdUwGifom display vkyfygvdrfhrnf/
Text in Graphics
rdrd type \ display tay: wdwdusus xdef;csKyf,lEkdifaponfh wpfckwnf;aom enf;vrf;rSm
graphic wpfck\tpdwftykdif;tjzpf jyKvkyfapjcif;yif jzpf\/ Headline rsm;? subhead rsm;?
callout rsm;ESifh web page wpfckvHk;yif a,bk,soabm Munhf½I&efom jzpfayonf/ HTML
text xuf graphic tBuD;BuD;tjzpf xm;&Sd&eftwGuf qkdvkdonf/
tvHk;pkHxdef;csKyfrI\ [efvkyfxm;rIrsm; cdkifrmaepOf tb,faMumifh sinking text rsm;udk
GIF file rsm;tjzpfokdY ra&mufap&ef awmifhcHxm;aponfukd azmfjyaom taMumif;jycsuftcsKdU
WEB DESIGN vuaf wGoY icf e;f pmrsm; 103
&Sdaeygonf/ yxrtcsuf graphic onf text xuf download vkyf,l&mwGif tcsdefydk,lonf/
'kwd,tcsuf graphic twGif;rS rnfonfh information udkrqkd r&SmazGapEkdifjcif;? rnTef;qkd
Ekdifjcif;wkdY &Sdonf/ aemufqHk;tcsufrSm ¤if; content onf non-graphical browser rsm;ay:
wGif aysmufqHk;oGm;apwwfonf? okdYr[kwf graphic ydwfoGm;apwwfonf/ Graphic tag
wGif&Sd ]] Alternative }} text udk tokH;csaepOf ¤if;onf limited jzpfNyD; tjrJwrf;tjzpf pdwf
rcs&aom taetxm;wpfcktjzpfokdY tultnD jyKay;ygonf/
Building Blocks: Headings and Paragraphs
,ckazmfjyvsuf&Sdaom tcef;u@wGif paragraph level ay:&Sd format text tjzpf azmfjyaom
tag rsm;ukdom &nfnTef;azmfjyay;rnf jzpf\ / tqkdyg tag rsm;udk block element taejzifh
vnf; em;vnfxm;onf/ Web Page jzpfvmap&ef vkyfaqmifcsufjzpfonfh text \ woD;
wjcm;pD&Sdaeaom unit rsm;om jzpfonf/ Heading jzpfap? paragraph rsm;jzpfap? quotations
rsm;jzpfap? okdYr[kwf performatted text rsm;jzpfap tm;vHk;onf block element rsm;
om jzpf\/
Block element tag wpfckudk browser wpfckMunfhaomtcg text element \ txuf
atmufwkdYwGif tjzwftawmuf tuGmta0; vkdtyfcsufrSeforQudk tvkdvkd jzpfoGm;apygvdrfh
rnf/ Block element tm;vHk;wGif a,bk,stm;jzifh xm;&Sdaom characteristic omvQif
jzpfonf/ Heading wpfckuJhokdY vkdif;wpfckwnf;ay:wGif paragraph text rsm;udk rpwifEkdifay/
¤if;twGuf text \ ]]block }}topfwpfcktaejzifhom tjrJwrf; pwifrIjyKaprnfjzpf\/
atmufazmfjyyg Oyrmonf block element wpfckcsif;\ erlemtjzpf MunfhEkdifygonf/
Headings
<H#> - - - </H#>
Heading level # (þae&mwiG f # onf 1-6 to;Hk jyKon)f
NyD;cJhaomoifcef;pmwGif rdrdwkdY page twGuf heading wpfcktjzpf azmfnTef;qkdEkdif&eftwGuf
<H1> tag udk tokH;jyKcJhMuonf/ Heading rsm; \ level udk ajcmufrsKd; owfrSwfxm;\/
<H1> rS <H6> txd jzpfonf/
Heading rsm;udk bold text yHkpHjzifhom display vkyfygonf/ First level heading
<H1> onf tBuD;qHk; heading t&G,ftpm;jzifh jyoxm;onf/ a&SUqufí level eHygwfpOfvdkuf
twkdif; t&G,ftpm;onf wpfqifhcsif; ao;íao;íoGm;ygonf/ odkYtwGuf fifth-level ESifh
sixth - level headings wkdYqkdvQif yHkrSef tokH;jyKaom text t&G,ftpm;xufyif ao;i,fvsuf
&Sdaeapygonf/ Sixth - level heading qkdvQif zwf,l&efyif rvG,faMumif; awGY&rnf/
tMurf;zsif; pnf;urf;t&<H3> udk tao;qHk; taetxm;jzifh okH;avhokH;x &SdMuonf/
104 WEB DESIGN vufawG Yoifcef;pmrsm;
HTML documet wpfckudk logical structure tjzpf yHhydk;í xkdokdY vkyfavhvkyfx&Sdonf/
<H1> Heading jzifhom proper usage jzpfaernfh oabmyifwnf;/ NyD;rSom *Pef; tu©&m
pOftwkdif; qufvuf &yfwnfoGm;avh&Sd\/ okdYaomf tu,fí rdrdonf <H1> t&G,ftpm;udk
Munfh&onfrSm tvGefBuD;rm;onf[k xifjrif,lqí rBudKufESpfoufygu ¤if;tpm; <H2>
okdYr[kwf <H3> jzifh pokH;Ekdifygonf/ xkdudpötwGuf browser u oD;jcm; wm;qD;csuf r&Sd
ygu rdrdpdwfBudKuf taetxm;twkdif; aqmif&Guf,ljcif;onf taumif;qHk; jzpfapygvdrhfrnf/
Paragraphs
<P> - - - </P>
Body text paragraph
HTML text udk ykHpHazmf&eftwGuf taumif;qHk;ESifh t½kd;&Sif;qHk; aqmif&GufcsufrSm paragraph
rsm; cGJcs&ef jzpfonf/ txufESihfatmufwGif extra space ESifhtwl browser \ default
proportional font wGif paragraphs rsm;udk display vkyf,lavh &SdMuonf/
Figure 7- 2
Headings
HTML heading link
ajcmufck&Sdonf/ <H1> onf
tBu;Dq;kH jzpíf level tpOtf vukd f
wjzn;f jzn;f wpqf ichf si;f
ao;oGm;rnf jzpfonf/
Figure 7- 3
Paragraph pmy'kd rf sm;onf
default font twGif;
txuaf tmuf space rsm;jzihf
cif;usif;azmfjyay;onf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 105
Paragraph break wpfcktjzpf <P> wpfckwnf;udkvnf; rsm;aomtm;jzifh browser
rsm; recognize jyKvkyfay;rnfjzpfaomfvnf; Java Script ESifh style sheets rsm;uJhokdYaom
enf;ynmopf awmfawmfrsm;rsm;u opening tags ESifh closing tags ESpfckvHk;udkokH;&ef vkdvm;
wwfMuonf/ rdrdtaejzifh HTML ukd yxrqHk; tawGUtMuHKtjzpf avhvmjcif;jzpfygu
oifhavsmfaom enf;vrf;udkom aumif;pGm avhvm&ygvdrfhrnf/
Browser rsm;onf <P> </P> \ string wpfckudkjzpfap? wpfckxufydkaom tpOfvkduf
azmfjyxm;onfh <P> tag udkjzpfap? recognize vkyfvdrfhrnf r[kwfay/ okdYygí element rsm;
tMum; extra space xnfhoGif;jyKvkyf&ef empty paragraph rsm;udk rokH;Edkifay/ Word
processing wpfcktwGif;&Sd tokH;jyKaom enf;vrf;jzifhom okH;Ekdifonf/
<BR>
Line Break
Block elements wpfck r&SdvQif paragraphs rsm;ESifh ywfoufí break tag udk tokH;0ifpGm
aqmif&GufEdkif&ef rdwfqufay;vdkygonf/ rdrdtaejzifh text pmaMumif;wpfaMumif;tm; jzwf
awmufvkdvQif txufESifhatmufwGif space rsm; xnfhr,lawmhonfhtcgrsKd;wGif paragraph
wpfcktwGif;<BR> tag wpfckudk xnfhoGif;toHk;jyKEkdifonf/ Lock element wkdYwGifvnf;
xkdenf;udk tokH;jyKEkdifonf/ <BR> tag \ stock wpfckonf rsm;aomtm;jzifh browser rsm;
u blank line rsm;tjzpf display vkyfay;rnf jzpf\/
Figure 7- 4
Browser rS multiple paragraph
rsm;u kd csevf yS xf m;coJh n/f
Figure 7- 5 Line breaks
<BR> Tag onf block element
wpcf tk wGi;f vikd ;fopwf pcf jkzi hf pwicf oJh n/f
oaYkd om f tyk d space xnahf y;xm;jci;f r&adS y/
106 WEB DESIGN vufawG Yoifcef;pmrsm;
Long Quotations
<BLOCKQUOTE> - - -</BLOCKQUOTE>
Blockquote
Quotation t&SnfBuD;wpfck jzpfcJhvQif page ay:wGif txl;jyKvkyfcsuf xnfhoGif;Ekdif&eftwGuf
blockquote wpfcktoGifjzifh format vkyfxm;oifhonf/ Blockquote rsm;onf a,bk,s
tm;jzifh txufESifhatmufwGif extra space rsm; xnfhoGif;í margin \ b,fbufESifh nm
bufwkdYwGif indent wpfckESifhtwl display vkyfxm;onf/ xkdokdYaom taMumif;aMumifh text
\ pmwkdifusOf;usOf;av;udk zefqif;&ef t&efpDxm;aom pmuGufvyfwpfcktjzpf rMumcP
qkdovdk tokH;jyKMuavonf/ tcsKdUaom browser ta[mif;rsm;onf blockquote materials
rsm;udk pmtm;vHk;wGif italic ac: pmvHk;tapmif;ykHpHjzifh zwf&cufavmufatmif display
vkyfwwfaMumif; owdjyK&ayonf/
Figure 7- 6
Blockquote rsm;onf
b,fbufESifh nmbuf
abmifvdkif;rsm;ay:wGif
csKyfwifxm;onf/
Preformatted Text
<PRE> - - - </PRE>
Preformatted Text
HTML avmuwGif preformatted text rsm;onf wpfrsKd;wpfbmom jzpfaeapygonf/
Browser \ constant-width font (omreftm;jzifh courier) udk txufatmuf extra
space rsm;xnfhí display vkyfxm;ygonf/ okdYaomf trSefwu,f xl;jcm;csufrSm line
Figure 7- 7
Preformatted text woYkd n f pmp½D ukd xf m;ouohJ Ykd browser twiG ;f
wprf sK;dwpbf mom pcD i;f ay;xm;on/f ¤i;fwGif extra space rsm;EiS hf
carriage return rsm; yg0ifrnfjzpfonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 107
wpfckpDonf carriage return tm;vHk; multiple character space rsm;ESifh tab rsm; tygt0if
wdwdususpD½kdufoGif;xm;onfhtwkdif; dispaly vkyfay;Edkifapjcif;yif jzpf\/
NyD;cJhaom oifcef;pmwGif page ykHpH ½kd;½kd;wpfck zefwD;,ljcif;ukd jrifawGYcJhNyD; jzpfonfhtwkdif;
browser rsm;onf txufygykHpHuJhokdYaom udpörsKd;rsm;udk omreftm;jzifh ignore vkyfxm;cJhyg
onf/ Preformatted text rsm;onf code rsm;udk display vkyf&eftwGuf rlvu zefwD;xm;jcif;
jzpf\/ okdY&mwGif spacing rsm; content rsm;\ alignment rSeforQudk control vkyf&eftwGuf
¤if;udk tokH;csEkdifygonf/
Putting It Together - Block Elements
Text udk format vkyf&eftwGuf block element rsm;ESifh line break rsm;udk tokH;csum ykHpH
½dk;½kd;av;wpfck pDrHaqmif&GufMunfhEkdifonf/
Figure 7- 8
yxrtqihf heading
wnfaqmufrIjyKay;aom tag rsm;
Blockquote
wpfcktaejzifh
ñTef;qdkxm;ay;jcif;
'kwd,tqifh
heading
pmy'kd rf sm;wGi f txuaf tmuf
space rsm; &adS eNy;D
line break rsm;wGif space
xnfhoGif;jcif;rjyKay/
wnfaqmufrIjyKay;aom tag rsm;
108 WEB DESIGN vufawG Yoifcef;pmrsm;
Tool Tip
Formatting vyk &f ef text toolbar \ b,bf u&f dS qcJG s,&l aom
menu u kd to;kH cs&e f rrd d text rsm;ukd highlight vyk ,f &l on/f
Text element wiG f highlight vyk xf m;jci;f jzihf
properties palette ay:rS qJGcs,l&aom menu
wGi&f d S format rS paragraph style wpcf uk kd
a&G;cs,f,l&onf/
Blockquote rsm;onf
properties palette ay:wGif
]]Indent}} [al om cvwk uf kd
toHk;jyKjcif;jzifh
csdefwG,f,l&onf/
DREAMWEAVER 3
rrd pd mp½D ukd of Gi;forQon f default jzihf paragraph wpcf jkzpaf eon/f
Toolbar b,bf u&f dS qcJG s,&l aom menu r S tjcm;aom block
element style rsm;u kd a&;G,&l on/f
GOLIVE 4
FRONTPAGE 2000
WEB DESIGN vuaf wGoY icf e;f pmrsm; 109
Inline Styles
rsm;aomtm;jzifh text tag rsm;udk inline style jzifh ykHazmfxm;Muonf/ Block element tag
rsm;ESifh rwlMuum inline tag rsm;udk okH;onfhtcg line break wkdY extra space wkdYudk
xnfhokH;jcif; r&Sday/
<I> - - - </I>
Italic text
tqkdyg style tag onf pmvHk;tapmif;rsm;jzifh wJGzuf jyKvkyfxm;aponf/ Italic text rsm;udk
tokH;jyKcJMuonf/ taMumif;rSm zwf&cufcJonfhtjyif ae&m,lvGef;ygonf/
Figure 7- 9
Italic
<I> EiS h f <EM> EpS cf pk v;kHon f pmv;kH rsm;ukd italic ypkH aH jymi;f vyk af y;on/f
<EM> - - - </EM>
Emphasized text
¤if;onf rsm;aomtm;jzifh browser rsm;onf ¤if;udk italic ykHpHjzifhom a&;aomaMumifh Italic
text ESifh tvm;wlykHpHom jzpfonf/
<B> - - - </B>
Bold text
¤if; style text onf bold type rsm; xnfhoGif;ay;jcif; jzpf\/
Figure 7- 10
Bold
<B> EiS h f <STRONG> tag EpS cf vk ;kHon f pmv;kH rsm;u kd txol m; bold vyk af y;on/f
110 WEB DESIGN vufawG Yoifcef;pmrsm;
<STRONG > - - - </STRONG>
Strong text
¤if;\ ]] logical }}style equivalent onf <B> ESifh twlwljzpf\/
<TT> - - - </TT>
Teletype
tqkdyg style tag twGif;rS text rsm;onf browser \ constant width font (omreftm;jzifh
courier ) jzifhom display vkyfavh&Sdonf/ Pre-formatted text <PRE> ESifh rwlum inline
tokH;jyKxm;í extra character space okdYr[kwf return udk todtrSwf jyKrxm;aomykHpHudk
tokH;jyKxm;wwfonf/
Figure 7- 11
<TT> jzi hf ci;fusi;f ay;aom pmv;kH rsm;on f yakH otus,&f dS font rsm;
jzpof n/f oaYkd omf <PRE> EiS hf rwbl J &yef m;rrI sm;EiS hf
ae&mtyckd sexf m;rrI sm;u kd roEd ikd fapay/
<U> - - - </U>
Underlined text
yg&Sdvmaom text rsm;rSm Underlined vkyfxm;NyD; ykHpHjzpfonf/ þykHpHudk owdxm;í okH;oifh
onf/ taMumif;rSm link wpfckjzifh a&maxG;oGm;Ekdifygonf/ ykH 7-12 wGif Munfhyg/
<STRIKE> - - - </STRIKE>
Strike through text
vkdif;wpfck jzwfoGm;aomtoGifjzifh text rsm; ay:vmap&ef ¤if; style tag udk okH;Muonf/
tu,fí vdktyfvQif okH;&efomjzpfonf/ (ykH 7-12 wGif Munfhyg/)
Figure 7- 12
atmurf S rsO;fom;xm;on hf ypkH eH rel mrsm;EiS fh wn;f jzw f qJGom;csurf sm;? tay:wi f ñeT ;fqokd nhf
superscript rsm;EiS hf atmuñf eT ;fq kd jyay;onh f subscript pmv;kH rsm;\ erel mrsm;u kd awjGUri&f y/kH
WEB DESIGN vuaf wGoY icf e;f pmrsm; 111
<SUB> - - - </SUB>
Subscript
<SUP> - - - </SUP>
Superscript
oufqkdif&m text rsm;odkY subscript ESifh superscript rsm;toGif format vkyfxm;aom tag
jzpfonf/ (ykH 7-12 wGif Munfhyg/)
Putting It Together - Style Tags
Style tag rsm;tm;vHk; yg&Sdonfh page wpfckudk zefqif;xm;ykHudk erlemtjzpf avhvmMunfh½IEkdif
onf/
Figure 7- 13
blockquote vkyfjcif;xuf
Italic yukH kd
a&G;cs,fxm;ay;onf/
Teletype onf tjcm; text
rsm;EiS hf o;D jcm;jzpaf eapaom
ingredient list ukd
csdefay;onf/
Italic tapmi;f ypkH H ay:&ef
txl;ñTefMum;csufrsm;
t"duusaom
ñTefMum;csufrsm;udk
owdjyKrdap&eftvdkYiSm
bold u kd o;kHxm;on/f
112 WEB DESIGN vufawG Yoifcef;pmrsm;
Text Size, Font and Color
HTML text tag \ basic set ESifhtwl rdrdwkdY formatting vkyfudkifEdkifrIonf toifhtwifh
uefYowfcsufrsm; &SdaecJhonf/ okdY&mwGif text \ ta&miftwGufvnf;aumif;? typeface
toGiftjyifrsm;twGufvnf;aumif;? t&G,ftpm;rsm;twGufvnf;aumif; xdef;csKyf udkifwG,f
Ekdif&ef enf;vrf;wpfckawmh &Sdaeygonf/ <FONT> tag [lonfh tag ao;ao;av;wpfckESifh
vkyf,ljcif;jzpf\/ <FONT> tag onf typeface twGufjzpfap? t&G,ftpm;twGufjzpfap?
ta&miftwGufjzpfap xdef;csKyfudkifwG,fEkdif&eftwGuf udk,fpm;jyKrIudk tokH;cs&onf/ ¤if;\
vkyfaqmifcsufrsm;udk expend vkyf&ef tag twGif; instruction rsm; xnfhay;onfhoabm
jzpfonf/
Controlling Font Size
<FONT SIZE = number> . . . </FONT>
Font size
Size [lonfh pmvHk;onf xnfhoGif;tokH;jyKaom text \ t&G,ftpm;rnfrQjzpfonfudk
<FONT> tag twGif; tqkdjyKazmfnTef;jcif;jzpfonf/ þae&mwGif >cif;csuftaejzifh rSwf,l
&efrSm <FONT> tag onf yGKdifhpmvHk; okdYr[kwf pixel size jzifh trsKd;tpm;ykHpHudk vkyfaqmifEkdifcGifh
r&Sdacs/ Default font size ESifh qufET,faeonfh text \ t&G,ftpm; ykHpHudkom vkyfaqmifay;Ekdif
½Hkom jzpf\/
ajymifajymif&Sif;&Sif; ajymMum;&rnfqkdygu HTML pepfwGif t&G,ftpm;ykHpHtwGuf tokH;cs
rIrSm jrifawGY&cJvSygonf/ rdrdwkdYtaejzifh browser \ default font size ukd "3" [lí
value ay;xm;aMumif; od&Sdxm;&rnf jzpfonf/ User tcsKdUwGif tvGefao;i,fvSaom default
font size rsm; &SdaewwfouJhokdY tcsKdUwGif cyfvSrf;vSrf;rS jrifawGYEkdifonftxd BuD;rm;aom
default font size rsm; &Sdaewwfonf/ xkdYaMumifh rnfonfhtcgwGifrqkd t&G,ftpm;ESifh
ywfoufvQif user rsm;\ default text twGuf value - 3 jzifh &Sdaeonf/
xkdtcsufESifhywfoufí SIZE [laom pmvHk;\ukd,fpm;jyKrIonf default value - 3 ESifh
qufET,faeaom tenf;i,fBuD;rm;rI okdYr[kwf tenf;i,fao;i,faerIrsm;wGif tokH;jyKEkdif
onf/
Figure 7- 14
Browser wpcf ak y:wiG f ¤i;f \ default font EiS fh
tw l yGKdi hf10 u kdcsed wf ,G ,f ol n/f tqykd g value
on fte;D pyqf ;kH jyeqf ñkd eT Mfum;xm;jci;f jzpof n/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 113
Absolute value rsm;rSm *Pef;oauFw 1 rS 7 twGif;jzpfí size wpfckpD\ uGmjcm;csuf
rsm;rSm 1 rS 20&mcdkifEIef;pDwkd;í oGm;onf/ xkdYaMumifh type set to SIZE = 4 onf type set
to SIZE = 3 xuf 20 &mckdifEIef; ydkBuD;vsuf &Sdaeygvdrhfrnf/ tBuD;qHk; size t&G,ftpm;tjzpf
browser rS <FONT> tag udk 7 jzifh tokH;cs jyoay;rnf jzpf\/ tu,fí xkdxuf omvGef
BuD;rm;aom higher value wpfckudk azmfnTef; tokH;jyKvdkygonfqkdyguvnf; text set 7
wGif&Sdaom t&G,ftpm;twkdif;om jzpfygvdrfhrnf/
Relative value rsm;rSm taygif;vu©Pm okdYr[kwf tEkwfvu©Pm sign jzifh nTefjyavh
&SdMuonf/ Default 3 xuf avsmhenf;jcif; okdYr[kwf ydkjcif;udk jyoay;\/ xkdYaMumifh SIZE
= +1 onf SIZE = 4 ESifh xyfwlxyfrQjzpfaponf/ Browser onf display text rsm;udk size
value 7 xuf rydkEkdifjcif;aMumifh tjrifhqHk; relative value rSm +4 (3+4=7) om jzpfrnf/
Figure 7- 15
Copyright azmfjyaom
vikd ;fwGi f pmv;kH t&G,tf pm;
yakd o;ap&e f value-2 ukd
csdefxm;ay;onf/
aemufqHk;&&Sdapaom text t&G,ftpm;rsm;onf
default browser ay:&Sd font setting tay:
rwl níf &adS eapon/f SIZE=6 u kd xm;vukd jfci;f jzihf
rnrf Qtx d t&,G tf pm; Bu;Dvmonuf kd
jrifawGUEdkifygonf/
Head Lineu kd yíkd Bu;D rm;
aeap&e f value-6 ukd
a&G;cs,f csdef,lxm;onf/
t&G,ftpm; setting vkyf
rxm;aom default text.
114 WEB DESIGN vufawG Yoifcef;pmrsm;
Changing the default text size
<BASEFONT SIZE = number>
Sets the base (default ) size
Default font set -3 [líavmufESifh NyD;raeapEkdifyg/ Text \ default size udk <BASE
FONT> tag jzifh tokH;csEkdifygonf/ Document twGif; rnfonfh relative size specification
udkrqkd (+ odkYr[kwf -) jyKvkyfjcif;onf base font size topfqDokdY tokH;cs,lapygvdrfh
rnf/
Document \ <HEAD> wGif ae&mcsxm;aomtcg <BASEFONT> tag onf document
twGif;rS text tm;vHk;udk tusKH;0ifaprnf jzpf\/ xkdYaMumifh rdrdtaejzifh document
wpfckvHk;wGif ½kd;½kd; standard xuf tenf;i,fBuD;rm;apvkdvQif header wGif <BASEFONT
SIZE =4> [k xm;&Sd&onf/
<HTML>
<HEAD>
<TITLE> Sample Document </TITLE>
<BASEFONT SIZE =4>
</HEAD>
<BODY>
The Problem with <FONT>
<FONT> tag onf text rsm;udk pdwf0ifpm;zG,f ykdjzpfvmap&ef enf;vrf;rsm;
vkyfay;Ekdifonf[k qkdaomfvnf; tm;enf;csuftcsKdUawmh &Sdaeygao;onf/
tcef; 6 wGif azmfjyxm;cJhaom HTML jzpfpOftusOf;wGif awGUjrifcJh&onfhtwkdif;
document twGif; display information xnfh,lEkdifrI tajctaersKd;ESifh logically
wnfaqmufEkdifrIrsKd;wkdYukd rwnfaqmufEkdifjcif;rSm HTML \ tm;enf;csufyif
jzpfonf/ qufvufazmfjyrnfh oifcef;pmrsm;wGif <FONT>tag ESifh ywfoufí
tajymif;tvJrsm; jyKvkyfay;&ef vkdtyfvmrnfjzpfí vkyfcsufrsm;vnf;
ydkvmayawmhrnf/ xkdokdYaom tajccHtaMumif;w&m;rsm;aMumifh <FONT>tag
[laom obm0rsKd;rS Cascading Style Sheets (CSS) okdY a&mufoGm;&onf/ Style
sheet rsm;onf text formatting wGif ydkrdk opfvGif pwkdifusaeEkdifonf/ xkd information
rsm;udk oD;jcm; Style sheet wpfckpDwGif store vkyfay;rnf jzpf\/
<FONT>tag udk prf;oyf Munfh½IMu&awmhrnf/ taMumif;rSm container tag wpfck
jzpfvmNyD qkdaomaMumifh t&G,ftpm;qkdif&m tajymif;tvJrsm;udk jyKvkyfMu&awmhrnf
jzpfonf/ owdjyK&rnfrSm aemufqHk; wu,fht&G,ftpm;onf default font size
tay: rlwnfaejcif; jzpf\/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 115
Document BuD;\ wpfpdwfwpfa'oavmuftwGufom default text udk ajymif;,lvkdygu
<BASEFONT> tag udk text \ vdktyfaom pmom;twGif; xnhf,lEkdifonf/ Text tm;vHk;onf
basefont size topftjzpfESifh ay:vmrnfjzpf\/ rnfonfh relative font size setting rqdk
xkd size jzifh ywfoufaeaponfhoabm jzpfygonf/
Figure 7- 16
Relative font size (+1) wpcf uk kd to;kH jyKvukd af omtcg default size opwf pcf k
jznohf iG ;fxm;vukd of n/f &v'rf S font setting 5 (4+1) EiS hf wnl oD mG ;apon/f
Page wGi f yrkH eS tf o;kH jyKonhf
default text (SIZE =3) jzihf
pxm;onf/
<BASE FONT> tag
onf default rS
"4" oYkd
ajymif;ay;onf/
<FONT> setting
ryg&odS nwhf ikd f text
rsm;onf SIZE = 4 jzihf
ay:vmonf/
Specifying Type Color
<FONT COLOR = "Color"> . . . </FONT>
Specifies font color
<FONT> tag twGif; ta&mifudk ukd,fpm;jyKrIrsm; xnfhoGif; tokH;jyKjcif;jzifh ta&miftrsKd;rsKd;ukd
zefwD; ajymif;vJ,lEkdifonf/ Value tm;jzifh preset color names 140 rS wpfckckudk ukd,fpm;jyK
okH;pGJEkdifonf/ odkYr[kwf color ukd numeric value jzifhvnf; jyqkd okH;pGJEkdifonf/ tao;pdwf
udk tcef; 12 wGif qufvuf azmfjyay;ygrnf/ ykHwGif azmfjyxm;onfhtwkdif; rD;ckd;jyma&mif
text color ukd jyKvkyfEkdif&ef enf;vrf;ESpfckukd erlemtjzpf Munfh½IEkdifonf/
Figure 7- 17 ta&mirf sm;ukd name jzivhf n;f aumi;f ? numeric value
jzifhvnf;aumif; owfrSwfcGJjcm;ay;Edkifonf/
116 WEB DESIGN vufawG Yoifcef;pmrsm;
t&G,ftpm;? ta&miftrsKd;tpm; ponfjzifh <FONT> tag \ ukd,fpm;jyKrIrsm;udk
woD;wjcm;pD azmfjyay;cJhjcif;jzpfonf/ okdYaomf rdrdwkdYtaejzifh acgif;pOfudk txl;jyK BuD;rm;ap
vdkvQif <FONT>tag oHk;qavmuf okH;vdkvQifqkdygu rnfokdY aqmif&Guf,lMurnfenf;/
Single opener tag wpfcktwGif;rSmyif udk,fpm;jyKrI awmfawmfrsm;rsm; xnfhay;Ekdifonf/
okdYygí wpfNydKifeufwnf; size, font ESifh color wkdYukd xdef;csKyf,lí &ygonf/
<FONT SIZE = ]] +2 }} FACE = Helvetica COLOR = ]]teal }}>
Specifying a Typeface
<FONT FACE= "fontname"> . . . </FONT>
Text twGuf typeface wpfckudk twdtus azmfjyEkdif&ef FACE udk tokH;jyKxm;NyD; ukd,fpm;jyKap
onf/ Typeface ESifh ywfoufí rdrdtokH;jyKaom puftwGif;&Sd trsKd;tpm;rsm;rSom a&G;cs,f
tokH;jyKEkdifrnf jzpf\/ Browser rSvnf; string wGif yg&Sdaom first font udk tokH;jyKygvdrfhrnf/
Figure 7- 18

Font twtd usukd
browser r S rawaUG omtcg
(þae&mwGif "Ponyface"
font u kd o;kHxm;on/f )
default font wGi f pmv;kH
rsm;uokd m ci;f jyay;ygvrd fh
rn/f rnof Ykd vikd ;f jyKxm;onf
<3> EiS hfvikd ;fu kd rnof Ykd cJGjcm;
owfrSwfxm;onfudk
owdjyKyg/

Browser
twGif;wGif
default font ukd
jrifawGU&yHk

Trebuchet MS ukd
vdkif;ay:wGif <FONT
FACE => tag jzihf
csdefwG,ftoHk;jyKxm;yHk
WEB DESIGN vuaf wGoY icf e;f pmrsm; 117
þae&mwGif serif, sans-serif, monospace, cursive okdYr[kwf fantasy uJhokdYaom generic
font family rsm;vnf; yg0ifvmEkdifayonf/ tu,fí rdrdu a&G;cs,fowfrSwfvkdaom font
udk browser rS &SmazGrawGU&SdvQif ¤if;ESifh ykHpHpwkdifwlaom font wpfrsKd;udk erlemMunfh&if;
a&G;xkwf okH;pGJ,l&rnf jzpf\/
Combining Styles
Container tag rsm;\ csdwfqJGrIoabmudk od&SdNyD;aemuf atmufyg HTML code rsm;udk
browser wpfckwGif jrifawGY&NyDqkdygu rnfuJhokdYaomtajzxkwf,lrIudk &&SdEkdifrnfenf;/
<B> <I> <FONT COLOR = ]]red }} SIZE = ]] G }} > CAUTION !! <FONT> </I> </B>
yxrqHk; "CAUTION !!" [laom pmvHk;udkjrifawGUEkdifonf/ xkdYaemuf <FONT> tag
udk pmvHk;BuD;rnf/ teDa&mifxm;rnf[laom t"dyÜm,frsm;yg yg&Sdonf/ okdY&mwGif italic tag
(<I>) jzifhvnf; pmvHk;tapmif;obm0udk azmfnTef;xm;um bold tag (<B>) jzifhvnf; pmvHk;
txl;yHkpHjyK&ef &nfnTef;xm;ao;onf/
Figure 7- 19
nesting style tag rsm;jzihf combine style upd ö aqmi&f Guxf m;y/kH
HTML wGif style awmfawmfrsm;rsm;jzifh text udk ukd,fpm;jyK &nfnTef; zefwD;Ekdifygonf/
¤if;wkdYudk nesting tag rsm; okdYr[kwf element rsm;[k rSwf,lxm;cJhMuNyD; jzpfonf/
wpfckwnf;aom pnf;rsOf;rSm tqkdyg tag wpfckvHk;onf twlwuG yg&Sd&rnf jzpfaomf
vnf; wpfckESifhwpfck xyfaeonfhoabm r&Sdap&ef jzpfonf/
<B><FONT FACE= ]] Verdana }}>Step - by step </B> </FONT>
txufygtwkdif; azmfjyaom code onf rSm;,Gif;aernf jzpf\/ taMumif;rSm opening
<FONT> tag ESifh closing </FONT>tag wdkY ESpfckvHk;onf bold <B> tag twGif; &Sdrae
aomaMumifh jzpf\/ txufygtwkdif; jyqkdygu browser wpfckwGif aocsmpGm azmfjyay;Ekdifrnf
r[kwfay/ (okdY&mwGif tcsKdU browser rsm;onf xkduJhokdUrSm;,Gif;rIrsKd;udk tvkdtavsmuf
ausmfvTm;ay;um tqifajypGm vkyfudkifay;Ekdifygonf/)
118 WEB DESIGN vufawG Yoifcef;pmrsm;
Putting It Together - The <FONT> Tag
ydkrdkí pdwf0ifpm;zG,faumif;aom acgif;pOfBuD;ESifh acgif;pOfav;rsm;udk aqmif&Gufxm;ykHukd
Munfh½IEkdifygonf/ <FONT>tag wpfcktwGif; pkaygif;í ukd,fpm;jyKaponfh nesting tag
rsm;jzifh combined style rsm;jzifh aqmif&Guf,lxm;jcif; jzpf\/
Figure 7- 20
Section labels rsm;onf nested style
tags [ <B> & <FONT>] ukd
oHk;xm;onf/ pmvHk;tm;vHk;udk capital
letter jzi hf jriaf wvGU okd jzihf
jyefvnf½dkufoGif;&onf/

acgi;f pOuf kd cyBfu;D Bu;D ypkH ?H c&r;f a&miEf iS hf
Verdana type jzpfap&ef one font
tag jzi hf to;kH jyKxm;on/f


WEB DESIGN vuaf wGoY icf e;f pmrsm; 119
Tool Tip
DREAMWEAVER 3
a,b,k soabmrsK;d trsm;q;kH
to;kH jyKonh f text style csed nf rd§ Irsm;
onf text u kd highlight vyk cf ohJ n hftcgwiG f
Properties palette ay:rS nmbufwGif
&,lEdkifonf/
tydkaqmif; style rsm;udkrl
Text → Style menu rwS pqf ihf
&,lEdkifonf/
GOLIVE 4
tajccH style
setting rsm;ukd
toolbar ay:rS
&&SdEdkifonf/
tyakd qmi;f style setting rsm;urkd l Style menu
atmuwf iG f awEUG ikd of n/f orYkd [wk f ¤i;f \
Structure Submenu wGi f &Eikd of n/f

tyakd qmi;f style setting rsm;urkd l
format menu atmufwGif
awGUEdkifonf/
FRONTPAGE 2000
tajccH style setting uk d toolbar ay:r S &&EdS ikd fon/f
120 WEB DESIGN vufawG Yoifcef;pmrsm;
List rsm;
wpfcgwpf&H pmykd'frsm;jzifh azmfjyay;rIxuf itemize information ac: taMumif;udpötvdkuf
owif;azmfjyrIrsKd; vdktyfvmwwfygonf/
HTML ESifh wJGzufí list trsKd;tpm; okH;rsKd;&Sdonf/ Ordered list (numbered lists),
unordered lists (bulleted lists) ESifh defintion lists (terms ESifh ¤if;wkdY\ defination
rsm;twGuf) [lí jzpfonf/ List trsKd;tpm;wpfckpDwGif ukd,fykdif tag rsm; &SdMu\/
Ordered Lists
<OL> . . . </OL>
Ordered List
<LI>
List item
item rsm;tvdkuf tpDtpOfusjzpfaeap&ef ta&;BuD;aomudpörsm;twGuf ordered list (numbered
list) udk tokH;jyKMu&onf/ Browser onf tvkdtavsmufqkdovdk item rsm; wpfckpD\
a&SUwGif number wpfckpD xnfh,lonf/ xkdYaMumifh number rsm;udk udk,fwkdif type ½kdufoGif;
xnfhay;ap&ef rvdktyfay/ (tu,fí rdrdtaejzifh number ½kdufoGif;rdvQif item \a&SUwGif
number ESpfck xyfaeygvdrfhrnf/)Number list udk tokH;jyKjcif;jzifh &&SdEkdifaom advantage
rSm item wpfck yg&Sdvmwkdif; tpOftvdkuf number rsm; tvdktavsmuf wyfay;Ekdifrnfjzpf
ouJhokdY item wpfckjzKwfcsvdkufonfESifh tpOftvkduf number udk tvdktavsmuf ajymif;vJ
pOfay;Ekdifjcif; jzpf\/
Figure 7- 21
Ordered (numbered) list rsm;on f <OL>tag jzi hf jyqakd y;xm;on/f
List r S taMumi;f t&m wpcf ck si;fuk d list item tag <LI> wpcf jkzi hf quvf yk ,f El ikd of n/f Number
rsm;urkd l browser r S tvtkd avsmu f jznohf iG ;f ay;on/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 121
<OL> container tag onf ]] Ordered }}uJhokdY identify jzpfap&ef tokH;csxm;onf/
List wGif item wpfckcsif;onf <LI> (list item) tag jzifh azmfnTef;jyxm;onfukd ykHwGif jrif
awGUEkdifrnf jzpfonf/ Closing list item tag </LI> onf optional jzpf\/
Ordered List jzifh tvSty fancy vkyfEkdifouJhokdY TYPE ukd,fpm;jyKjzifhvnf; numbering
twGuf pwkdifrsm;ajymif;vJ&,lEkdifonf/ ¤if;wkdYtwGuf possible value ig;rsKd; &Sd\/
I (numbers), A (uppercase Letters), a (lowercase letters), I (uppercase roman numeral
) ESihf i (lowercase roman numeral) ponfwkdY jzpfonf/ Regular number rsm;onf
default jzpfaeonf/ tjcm; ajymif;vJykHrsm;udk Figure 7-22 wGif jrifawGUEkdifonf/
Number okdUr[kwf letter value jzifh list udk pwifvkyfaqmifEkdifonf/ Figure 7 - 23
wGif jrifawGUEkdifonf/
Figure 7- 22
Figure 7- 23
Numbering style u kd TYPE
attribute ESihftwl
ajymif;ay;Edkifonf/
Value rsm;u kd wpbf uwf iG f
jrifawGUEdkifonf/
START EiS hf TYPE
attributes rsm;udk
tag wpfcktwGif;
aygif;qHkEdkifonf/
List twiG ;f ü yxrq;kH
number u kd cGJjcm;
owfrSwfEdkif&ef START
attribute u kd o;kH yg/
122 WEB DESIGN vufawG Yoifcef;pmrsm;
Unordered Lists
<UL> . . . </UL>
Unordered lists
<LI>
List item
Unordered List rsm;onf bullet list tjzpf jyoay;ygonf/ Bullets onf browser jzifh
tvkdtavsmuf xnfhxm;NyD;vQif items rsm;onf indent wpfckay:wGif set vkyfxm;onf/
<UL> . . . </UL>tags onf bulleted list \ tpESifhtqHk;wGif nTefjyay;onf/ Ordered
list rsm;uJhokdY item wpfckcsif;onf <LI> (list item) tag jzifh mark vkyfay;xm;aMumif;
Figure 7 - 24 wGif jrifawGYEkdifonf/
tu,fí teufa&miftpuf0kdif;rsm;jzifhyif rauseyfao;ygu puf0kdif;rsm; okdYr[kwf
av;axmifhrsm;jzifh tokH;csEkdifonf/ <UL>tag twGif; TYPE tm; ukd,fpm;jyKjcif;onf
bullet \ toGiftjyifrsm;tay: xdef;csKyfrI tedrfhqHk;tajctaeom ay;onf/ Figure 7- 25
wGif azmfjyxm;ouJhokdY puf0kdif;rsm; av;axmifhuGufrsm;jzifh trsKd;rsKd; value rsm; &SdMu\/
tu,fí bullet uJhokdY *&yfzpfESifh wifjyykHrsm;udk tcef; 17 wGif jrifawGUMu&ygOD;rnf/
Figure 7- 24
Figure 7- 25
Unordened (bulleted) list rsm;onf
<UL> tag jzi hf ñeT jfyay;on/f List
iten (<LT>) wpfckcsif;twGuf
bullet r S tvtkd avsmuf
jznohf Gi;f,ol nuf kd owjdyKyg/
Bullet type u kd trsK;d tpm;tvukd f cGJjcm;owrf wS Ef ikd &f e f TYPE attribute u kd o;kH &on/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 123
Definition Lists
<DL> . . . </DL>
Dictionary (or definition) list <DT>
Dictionary term
<DD>
Dictionary definition
Descriptive text \ block rsm;ESifhtwl pmvHk;rsm;\ azmfjyrI pm&if;udpörsm;twGuf Dictionary
List rsm;udk tokH;jyKMuonf/ Format wGif;&Sd tjcm; HTML List ESpfrsKd;ESifh rwlygay/
<DL> . . .</DL> tags onf list \ tpESifhtqHk;udk rSwfom;&eftwGuf tokH;jyK,lonf/
List twGif; word (term) wpfckonf <DT>tag (closing <DT>tag onf omreftm;jzifh
csefvSyfxm;Muonf/) jzifh mark vkyfNyD; <DD> wpfckjzifh definition tjzpf mark vkyf,lonf/
Figure 7- 26
Definition lists rsm; on f <DL> tags EiS hf
rSwfom;xm;&Sdonf/ a0g[m&wpfckcsif;udk <DT>
wpcf jkzi hf quvf u f aqmi&f uG of mG ;apí
definition wpcf ck si;fon f <DD> wpcf uk kd
&,lxm;onf/
Figure 7- 27
Nesting Lists
Figure 7- 27 wGif jyxm;onfhtwkdif; rnfonfh list rqkd tjcm; list wpfcktwGif;wGif
nested vkyfxm;Ekdifygvdrfhrnf/
tu,fí nested list
tvGerf sm;pGm o;kHxm;cJvh Qif
rdrd\ content onf
nmbuf abmifvdkif;wGif;
xdk;aysmufoGm;aponf/
Ordered (numbered)
list wpfcktwGif;
unordered list wpcf jkzihf
xnfhoGif;
zGJpU n;fxm;on hf erel my/kH
124 WEB DESIGN vufawG Yoifcef;pmrsm;
Aligning Text
HTML onf text alignment rsm;tay: tenf;i,f xdef;csKyfjcif;jzifh 'DZdkifemrsm;twGuf
wefzdk; xdkufxdkufwefwef &aponf/ b,fbuf&Sd margin ESifh csdefn§d,lrnfvm;? nmbuf&Sd
margin ESifh csdefn§d,lrnfvm; odkYr[kwf tv,fwnfhwnhfudk t&,lrnfvm; ponfjzifh rdrd
pdwfBudKuf a&G;cs,f,lEdkifjcif;wdkY &Sdaernf/ tu,fí rdrdonf b,fbuf&Sd margin udk csdefn§d,l
&aom left-justified udk vdkcsifonfqdkygu rdrdukd,fwdkif rnfodkYrQ vkyfaqmif&efrvdkbJ tvdk
tavsmufjzifh toifh display vkyfay;vdrhfrnf jzpf\/ odkY&mwGif aqmif&GufcsufwpfcktwGuf
vkyfaqmifNyD;aemuf xyfrH rvdkawmhygu text xdef;csKyfrIudk jyefvnf ajymif;a&TUEdkifaom enf;
vrf;rsm;&SdaMumif; awGUjrifEdkifygonf/
ALIGN [laom pmvHk;onf heading acgif;pD;rsm;wGifjzpfap? paragraph tag rsm;udk
xdk paragraph \ text alignment odkY ajymif;vJxm;&Sd&mwGifjzpfap nTef;qdkaMumif;ESifh toHk;
jyKEdkifapvdkaMumif; rSwf,l&rnf/ rdrdtaejzifh ALIGN ESifh ywfoufonfh value udk left
(default) odkYr[kwf right odkYr[kwf center [k owfrSwfxm;Edkifonf/ rdrdwGif multiple
paragraph rsm; &Sdaeygu rdrdtaejzifh realign vkyfvdkrnfjzpfí <p>tag wdkif;wGif ALIGN
attribute xm;ay;&ef vdktyfrnf/
Putting It Together -Lists
List rsm;ESifh ywfoufí tqifhvdkuf? trsKd;tpm;vdkuf wpfckcsif; tokH;jyKEkdifykH azmfjyay;NyD;
aemuf ykH Figure 7-28 wGif twlwuG wGJzuf tokH;cs,lykHrsm;udkvnf; jrifawGY&rnf jzpf\/
Figure 7- 28
erlemESifh
udkufnDrI&Sdap&ef
rnof n hf list tag
rsm;jzi hf ñeT Mfum;rI
jyKay;rnfenf;/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 125
Tool Tip
DREAMWEAVER 3
yg0iaf prn hf list ukd
a&G;cs,xf m;Ny;D Text →List menu rwS pqf ihf
oiafh vsmaf om list style ukd
a&G;,l&onf/
wud saom list wpcf uk kd a&G;,Nly;D list
properties dialog box uk d Text-List
menu rwS pqf i hf zGi,hf yl g/ þae&mwGif list
item rsm;u kd tao;pwd f
aqmif&GufEdkfifonf/
GOLIVE 4
List setting
tm;v;kH onf
format →List
menu rS
&,lEdkifonf/
Numbered orYkd [wk f bulleted
lists rsm; jreqf epf Gm jyKEikd af &;twGuf
Toolbar ay:r S cvwk rf sm;u kdto;kH csyg/
FRONTPAGE 2000
tjrefqHk;
enf;vrf;rSm List
wpcf tk wGi;f yg&dS
ap&e f item u kd a&G;
ay;yg/ xaYkd emuf
Numbering icomukd
clickvkyf,lyg/
¤if;onf toolbar ay:
wiG f toi&hf adS eon/f
Format-Bullets u kd a&G;Ny;D
Numbering ukd Number tab tm;
click vyk íf style u kd a&G;ay;yg/
Formatting Lists
vlMudKufrsm;aom authoring program 3 rsdK;rS oifhtaejzifh tokH;csEdkifaom control list rsm;ukd
atmuyf gtwikd ;f awEGY ikd of n/f
tqykd g items rsm;onf default number list oYkd
a&mufoGm;aprnf/ Format tvdktavsmuf a&G;cs,fNyD;
jzpfoGm;ygvdrhfrnf/
126 WEB DESIGN vufawG Yoifcef;pmrsm;
ALIGN attribute \ ouf0ifvIyf&Sm;rIrsm;udk atmufyg erlemtcsKdUjzihf avhvmEdkifyg
onf/
Setting Text on the Right Margin
<P ALIGN = right>
Right alignment
ALIGN value udk right [k csdefwG,fcsxm;,laomtcg Figure 7-29 wGif jyxm;ouJhodkY
right margin ay:wGif text rsm; tnD,lxm;vdrhfrnf/ þae&mwGif paragraph a&m? heading
yg ESpfckvHk; xdkodkYvkyfudkifxm;aMumif; owdjyKyg/
Text flush-right tm; nnD nD mnmjzpaf p&ef ALIGN = right attribute u kd o;kH &on/f
Figure 7- 29
Centering Text
<P ALIGN = center>
Center Alignment
ALIGN value udk pmrsufESm\ tv,fwnfhwnfrS tuGmta0;wltjzpf paragraph twGuf
jzpfap? heading udkjzpfap csxm;ay;Edkifonf/ þae&mwGif tqdkygenf;jzifh pmwpfrsufESmvHk;
twGuf element wdkif;wGif&Sd opening tag rSeforQwGif ALIGN = center [k xm;&ygonf/
Figure 7- 30
pmy'kd Ef iS hf acgi;f pOwf oYkd n f tag wpcf ck si;fwGi f ALIGN = center attribute u kd o;kH,jlci;f jzi hf tv,rf S
tncD s,al om ypkH vH kd jzpof Gm;apon/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 127
<CENTER>
Center alignment
Center text twGuf tjcm;enf;vrf;wpfckrSm Figure 7-31 wGif azmfjyxm;onfhtwdkif; container
tag udk <CENTER> [lí toHk;jyK&efjzpfonf/ tqdkyg tag onf text tm;vHk;udk
tv,fA[dk csdefn§dpepfjzifh oGm;aprnfjzpfí pmrsufESmwpfckvHk; þenf;jzifh center csxm;
Edkifapygonf/ <CENTER> tag udk toHk;jyKrIrSm vrf;½dk;BuD;jzpfaeum w&m;0if HTML
specification yg0ifrIr&Sday/ pmrsufESmwpfckvHk; center pepfoHk;vdkvQif toihfavsmfqHk; enf;
vrf;rSm <DIV> (division) tag udk toHk;jyKoifhygonf/
Figure 7- 31
Element
tajrmuftjrm;udk
csufcsif; tv,frS
tnDcs,laom
yHkpHjzpfap&ef
<CENTER> tag ukd
oHk;xm;onf/
The <DIV> Tag
<DIV> container tag onf division wpfcktjzpf cGJjcm;&mwGif toHk;jyKonf/ Division
wpfckonf a,bk,susaom block element wpfckESifh wlygonf/ vkyf½dk;vkyfpOf structural
element wpfckr[kwfay/ odkY&mwGif toHk;jyKu (ESpfoufygu) pmrsufESmwpfckvHk;udk wpfyHkpH
wnf; &aprnfh style attribute (alignment ESihf wlonf) udk toHk;cs&ef ¤if;udk oHk;Edkifygonf/
<DIV>- - - - </DIV>tags jzifh &pfywfapjcif;jzifh pmrsufESmwpfckvHk;taejzifhjzpfap? tydkif;wpfckck
udkjzpfap ñTef;qdk oHk;pJGEdkif\/
Element
tajrmuftjrm;udk
tv,fcspepf
aqmif&Guf&mwGif
<DIV> tag EiS thf wl
division wpfck
azmfñTef;ay;jcif;onf
ESpfoufp&m taumif;qHk;
jzpfonf/
Figure 7- 32
128 WEB DESIGN vufawG Yoifcef;pmrsm;
ae&mwpfcktwGuf xdkodkY oHk;pJGxm;jcif;wGif <DIV> tag onf browser wGif;&Sd text
tjrifudk rxdcdkufapyg/ rnfodkYyifjzpfap Figure 7-32 wGif azmfjyxm;ouJhodkY division BuD;
wpfckvHk;\ alignment udk oufa&mufap&eftwGuf ALIGN attribute udk toHk;csEdkifygonf/
<DIV> onf Cascading Style Sheet rsm;wGif tvGefYtvGef toHk;0ifapygonf/ taMumif;
rSm ¤if;wGif yg&Sdcsuf contain rSeforQudk display instruction tjzpf toHk;csEdkifaomaMumifh
jzpf\/ Macromedia Dreamweaver onf <DIV> tag jzifh pmrsufESmrsm;udk format vkyf&ef
toHk;jyKouJhodkY web authoring program rsm;tm;vHk; jrifawGUMu&rnf jzpf\/ avhvmol
onf beginner jzpfonfhwdkif tvG,fwul &if;ESD;oGm;aprnfh tag wpfck jzpfygonf/
Indents
taMumif;rvSpGm jzpf&onfhtcsufrSm standard HTML wGif ]]indent}} rygjcif; jzpf\/ xdkY
aMumifh 'DZdkifemrsm;onf indent odkY text rsm; &ap&ef existing tags \ creative use
(odkYr[kwf misuse)udk rvJG{uef tm;xm;&ayrnf/ Figure 7-33 wGif emrnfBuD; HTML
cheats tcsKdU yg0ifaeonf/
Ä b,fbuf margin ESifh nmbuf margin ESpfckvHk;wGif indent wpfck xkwfay;ap&ef
<BLOCKQUOTE> tag udk toHk;csjcif;?
Ä Indented jzpfaeouJhodkY text udk display vkyfap&ef list items (<LI>) rygaom unordered
list (<UL>- - - </UL>) wpfckudk toHk;csjcif;?
Ä Indented jzpfaeouJhodkY text udk display vkyfap&ef terms rsm; rygapum definitions
(<DD>) oufoufjzifh dictionary list (<DL> - - - </DL>) wpfckudk toHk;csjcif;?
HTML text ukd
rSm,l&eftwGuf cheat
oHk;rsKd;
Figure 7- 33
WEB DESIGN vuaf wGoY icf e;f pmrsm; 129
þodkYaom tajctaersm;ESihf &Sdaeonfhwdkif margins ESpfzufvHk; odkYr[kwf b,fbuf
margin wGif vufr0ufcefY&Sd automatic indent wpfckom &&Sdxm;onf/ First line ouf
oufom indent rvkyfEdkifay/ okdYwnf;r[kwf indent \ yrmPudk specify rvkyfEdkifay/
¤if;onf bummer wpfck\ obm0jzpfonf/ Style sheet onf additional control tcsKdUudk
cGihfjyKonf/ odkYaomf taMumif;rvSpGmjzifh indenting function rsm;twGuf browser support
onf xdka&;om;jcif;trIudk a&SUaemuf rnDapouJhodkY jzpfaeonf/
rdrdtaejzihf ydkrdk acwfrDqef;opfaom indenting ESifh text alignment rsm; tvdk&SdcJhygu
table udk toHk;csjcif;u ydkí aumif;onf/ (tcef; 10 wGif Table rsm;taMumif; aqG;aEG;xm;
onf/) tcsdKU 'DZdkifemrsm;onf text rsm;udk t&G,ftpm; vJGrSm;rIjzpfapEdkifaom 1-pixel transparent
graphic rsm;udk oHk;onf/ (tqdkyg enf;y&d,m,ftaMumif;udk tcef; 17 wGif aqG;
aEG;xm;onf/)
Preventing Line Breaks
rdrdtaejzifh line of text wpfckudk vdkif;wpfvdkif;ay:rSyif xm;,lvdkonfqdkMuygpdkY/ (Window
udk resized vkyfxm;onfhwdkif)
xdkudpötwGuf oHk;&ef tag wpfck&Sdonf/ ]]no break}}tag (<NOBR>) yif jzpf\/ tqkdyg
tag jzihf &Sdaernfh text ESifh graphic rsm;onf browser \ tvdktavsmuf wrapping
vkyfay;aom function jzihf cJGjcrf;ray;Edkifyg/ (Figure 7-34) element rsm;\ string onf
tvGef&Snfvsm;aevQif browser page \ tjyifbuftxd toHk;jyKolrS scroll vkyfMunfh&onf/
Navigational toolbar wpfckuJhodkY graphics wpfckcsif;\ wpfwef;wnf; xdef;xm;Edkifap&ef
twGuf tqdkyg tag onf toHk;0ifvS\/ Window udk tvGefao;i,fpGm resized vkyfxm;
aomtcgwGifyif oHk;Edkifonf/
Line break u kd umu,G jfci;f
<NOBR> [ol nf no break tag twGi;f vikd ;fwpvf ikd ;f jzihf text rsm;u kd &adS eapvrd rfh n/f
Figure 7- 34
130 WEB DESIGN vufawG Yoifcef;pmrsm;
Preformatted Text
NyD;cJhaom oifcef;pmrsm;wGifjrifawGUcJh&NyD;jzpfonhftwdkif; preformatted tag (<PRE>) onf
text alignment tay: character wpfckcsif; control vkyfay;onf/ trSefyif rdrdonf Courier
wGif text displayed xm;&Sd&rnf/ <PRE> wGif text tm; blank character spaces udk
OD;pm;ay;cJhonf/ Page ay:wGif wdusjywfom;pGmjzifh tjcm; elements rsm;udk align vkyf&ef
xdk tag udk toHk;jyKEdkifonf/ (tables toHk;csjcif; rjyKaomfjim;vnf; vkyf,lEdkifrnf/) wdusaom
alignment twGuf preformatted text udk Figure 7-35 wGif oHk;xm;onf/
Figure 7- 35 acgif;pOfESifh
pmom;rsm;
tv,fcspepf
xm;&SdoGm;NyD;
jzpfonf/
Putting It Together-Aligning Text
HTML wGifrMumcPqdkovdk particular effect wpfckudk,fpm;jyKap&ef enf;vrf;wpfckxuf
ydkí xm;&Sdwwfonf/ Figure 7-36 wGif jyqdkxm;onfhtwdkif; title ESifh comment rsm;udk
tv,frS cs,laom code ESpfckudk Oyrmtjzpf jrifawGUEdkifonf/ usef code ESpfckrSm vkyfay;vdrhf
rnf r[kwfay/ tusKd;taMumif;udk avhvmEdkifonf/
Figure 7- 36
WEB DESIGN vuaf wGoY icf e;f pmrsm; 131
tajzrsm;
tvkyfvkyfonf/
Element wpcf pk oD nf ALIGN attribute EiS thf w l tv,uf s jzpaf eon/f
tvkyf rvkyfyg/
ALIGN onf attribute wpfckjzpfonf/ Tag wpfck r[kwfay/
tvkyfrvkyfyg/
<DIV> tag on f reS uf epf mG to;kH csxm;on f q&kd mwiG f ¤i;f \ value on f nmbuof Ykd jyqkd
xm;ay;on/f tv,of Ykd rñeT ;fqxkd m;ay/
tvkyfvkyfonf/
<CENTER> tag on f ¤i;fwiG f yg&cdS sutf m;v;kHu kd tv,cf say;xm;on/f
<P ALIGN=center><FONT SIZE=+2 FACE="verdana, sans-serif"
COLOR="#663399">Tapenade (Olive Spread) </FONT></P>
<P ALIGN=center> <I> This is a really simple dish to prepare and it's always a huge
hit at parties.</I> </P>
<ALIGN=center>
<P><FONT SIZE=+2 FACE="verdana, sans-serif" COLOR="#663399"> Tapenade
(Olive Spread)</FONT></P>
<P><I>This is a really simple dish to prepare and it's always a huge hit at parties.</I>
</P>
</ALIGN>
<DIV ALIGN=right>
<P><FONT> SIZE=+2 FACE="verdana, sans-serif" COLOR="#663399">Tapenade
(Olive Spread) </FONT> </P>
<P><I> This is a really simple dish to prepare and it's always a huge hit at parties.</I>
</P>
</DIV>
<CENTER>
<P><FONT> SIZE=+2 FACE="verdana, sans-serif" COLOR="#663399">Tapenade
(Olive Spread) </FONT> </P>
<P><I> This is a really simple dish to prepare and it's always a huge hit at parties.</I>
</P>
</CENTER>
Some Special Characters
© uJhodkYaom common character tcsKdYonf ASCII character \ standard set wGif
ryg0ifay/ (Letters, numbers ESifh basic symbols om yg0ifonf) web page wpfckay:wGif
tqdkyg character rsm; &&Sdap&ef HTML document wGif ¤if;wdkY\ character entity name
132 WEB DESIGN vufawG Yoifcef;pmrsm;
jzihfom ac:qdk&onf/ Character entity wpfckonf specific character wpfckudk cJGjcm;
todtrSwfjyKonf/ String of text wpfck jzpfonf/ Character rsm;onf trnfjzifhjzpfap?
¤if;wdkY\ numeric value rsm;jzihfjzpfap cJGjcrf;owfrSwfí todtrSwfjyKapEdkifonf/
HTML flle ay:wGif character
spaces trsK;d rsK;d &adS e&ef browser rS
road y/ o&Ykd mwGi f rrd dtaejzihf non
breaking space u kdto;kH csjci;f jzihf
cufcJaom ae&mrsm;twGif;
xnfhoGif;ay;Edkifonf/
Figure 7- 38
py,f&S,f character
trsm;pok nf name jzihf
jzpaf p number jzihf
jzpaf p ac:qxkd m;ay;Eikd f
onf/ Character twGJ
vukd wf Gi f ae&mwusjzihf
browser u cif;usif;
ay;onf/
Figure 7- 37
Oyrmwpfckonf &Sif;vif;oGm;aponf/ rdrd\ page ay:wGif copyright symbol wpfckudk
jznfhoGif;,lvdkonf/ rdrd\ word processing program twGif; tvkyfvkyfcJhaom orm;½dk;us
Mac keyboard command Option-g onf HTML page wpfckay:wGif vkyfray;ay/ rdrd
taejzifh xdk symbol ay: xGufvmapvdkaom ae&mwGif character entity name & copy
(odkYr[kwf numerical value & # 169) udk oHk;onf/
Extra character space rsm;udk browser rS HTML document wpfckwGif rnfodkY ignored
vkyfonfudk rSwfrdMuygvdrfhrnf/ Page wpfckodkY hard characters space (odkYr[kwf ¤if;wdkY\
string) wpfckudk xnfhoGif;&efvdkvm;ygu ]]non breaking space}} & nbsp wpfcktwGuf
character entity udk toHk;csjcif;jzifh xnfhoGif;Edkifonf/
Table 7-1 list wGif character entity rsm;udk tcsKdU a,bk,susvSaom udpörsm;wGif
oHk;xm;aMumif; awGU&rnf/ xdkpm&if;wGif r&Sdao;aom character rsm;onfvnf; &Sdaeyg
ao;onf/ tjynfhtpHk od&Sdygu Webmonkey rS toHk;0ifvSaom Special Characters
Quick Reference wGif Munfh½IEdkifonf/ (hotwired.lycos.com/webmonkey/reference/
special-characters/)
WEB DESIGN vuaf wGoY icf e;f pmrsm; 133
Tool Tip
Character Entities
xif&Sm;vlodrsm;vSaom authoring program oHk;ckwGif character entity rsm; rnfodkY
xnfhoGif;,lonfudk avhvmEdkifonf/
rrd xd nohf Gi;fvakd om character wpcf uk kd insertion point
csay;yg/ Insert → Symbol o Ykd oGm;í rrd td v&kd adS om character
u kd click vyk uf m xnohf iG ;f,El ikd of n/f
DREAMWEAVER 3
Drop dawn menu \ Object palette rS
Character u kd yxrq;kH
a&G;cs,fyg/
rdrd\ Page ay:rS
ae&mwpcf qk oD Ykd drag
vkyf,lEdkifaom
common character rsm;\
palette wpfckjzpfonf/
GOLIVE 4
Special menu atmu&f d S Web Database rwS pqf ihf
character tv;kH pukH kd access vyk xf m;ay;on/f Character
wpcf uk kd o;kH &e f ½;kd &iS ;f pGmyi f vtkd yof nthf &mu kd a&G;cs,Nfy;D
document twiG ;f vtkd yof n hf ae&moY kd drag vyk uf m
qJGcsxm;,l&onf/
a&G;cs,faepOftwGif;
inspector twGi;f ü ¤i;f EiS hf
ywfouforQ
tcsuftvufrsm;
ydk&&SdEdkifonf/
FRONTPAGE 2000
134 WEB DESIGN vufawG Yoifcef;pmrsm;
Character Description Name Number
Character space &nbsp; &#160;
(nonbreaking space)
© Copyright &copy; &#169;
® Registered trademark &reg; &#174;
™ Trademark (none) &#153;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
}} Left curly quotes (none) &#147;
}} Right curly quotes (none) &#148;
< Greater-than symbol; (none) &#155;
Left bracket (useful for
displaying tags on a web page)
> Less-than symbol; (none) &#139;
right bracket (useful for
displaying tags on a web page)
Table 7-1
Common Special Characters and Their Character Entities.
HTML Review-Text Formatting Tags
þoifcef;pmwGif azmfjycJhaom tag rsm;tm;vHk;twGuf summary:
Tag and Attributes Function
<B> Bold text
<Blockquote> Lengthy quotation
<BR> Line break
<CENTER> Centers elements on the page
<DD> Definition item (in a definition list)
<DIV> Division (used for applying styles)
ALIGN = left/right/center Horizontal alignment
<DL> Definition list
<DT> Term item (in a definition list)
<EM> Emphasized (italic) text
WEB DESIGN vuaf wGoY icf e;f pmrsm; 135
Tag and Attributes Function
<FONT> Used attributes to specify size, font face, and color
SIZE = 1 to 7 Text size
(or relative value)
FACE = ]]name}} Typeface for the enclosed text
COLOR = ]]number}} or ]]name}} Color of the enclosed text
<H#> Heading Level (from 1 to 6)
ALIGN = left/ right/ center Horizontal alignment
<I> Italic text
<LI> List item (in an ordered or unordered list)
<NOBR> ]]No break}}; prevents line breaks in the en-closed
text
<OL> Ordered (numbered) list
<P> Paragraph
ALIGN = left/ right/ center Horizontal alignment
<PRE> Preformatted text
<STRIKE> Strikethrough text
<STRONG> Strong (bold) text
<SUB> Subscript
<SUP> Superscript
<TT> Teletype (or typewriter text)
<U> Underlined text
<UL> Unordered (bulleted ) list
136 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 137
Graph Element rsm; xnohf iG ;f jci;f
tcef; 8
Web page wpfckwGif ½kyfyHkrsm;ryg pmcsnf;oufouf jzpfaeygu pdwf0ifpm;zG,f&m jzpfvmEdkif
p&mtaMumif; r&Sday/ Web rsm;odkY 0ifa&muf&SmazG Munfh½IavhvmrI acwfpm;vmjcif;rSmvnf;
page ay:wGif "mwfyHkrsm;? ½kyfyHkrsm;wdkYjzifh wefqmqifxm;jcif;aMumifh[k qdkEdkifonf/ odom
xif&Sm;ap&eftwGufjzpfap? tao;pdwfazmfjyvdkonfhtcgwGifjzpfap yHk&dyfrsm;udk toHk;csMu&
onf/ "mwfyHkrsm;? icon rsm;? button rsm;twGuf graphic jzifh odomxif&Sm;ap&eftvdkYiSm
toHk;csjcif;oufoufr[kwfbJ spacing device rsm;tjzpfvnf; toHk;csMuouJhodkY box
rsm;\ axmifhrsm;wGifvnf; visual effect rsm; zefwD;&eftwGufvnf; toHk;0ifapygvdrfhrnf/
(aemufydkif; Web Design Technique wGif tao;pdwf wifjyay;ygrnf/)
,ckwifjyrnfh tcef;u@wGif page wpfckü graphic rsm; xnfhoGif;&ef tag rsm; toHk;csyHk
tao;pdwfrsm; yg0ifrnfjzpf\/ Background image rsm;taejzifhvnf;aumif;? text \flow
rsm;wGifvnf;aumif; ESpfrsdK;vHk; yg0ifygonf/
Adding Inline Images
Web ay:&Sd graphic trsm;pkonf inline image yHkpH HTML content \ flow \ wpfpdwf
wpfa'otjzpf &Sdaprnfh graphic yHkpHwdkYjzifh wefqmqifxm;Muonf/ ¤if;wdkUonf illustration
rsm;? banner headline rsm;? navigational toolbar rsm;? advertisement rsm; ponfjzifh
tm;vHk;tusHK;0ifaeygonf/ wpfenf;tm;jzifh background tiling image wpfck r[kwfygu
inline image wpfckom jzpfonf/ Inline image tm;vHk;onf <IMG> tag udk toHk;csí
HTML document wGif csxm;jcif;jzpf\/
Browser twGif; display vkyfay;&eftvdkYiSm graphic rsm;onf GIF odkYr[kwf JPEG
file format jzpfaeap&rnf/ xdkYtjyif browser jzifh recognized jzpfaeap&eftvdkYiSm oufqdkif&m
aemufqufrsm;jzpfonfh gif ESifh .jpg (odkUr[kwf .jpeg) wdkYudk rSefuefpGm trnfay;xm;aom
file rsm; jzpfaeapygrnf/
138 WEB DESIGN vufawG Yoifcef;pmrsm;
Graphic \ placement ESifh appearance rsm;tay: xdef;csKyf,lonfh <IMG > tag
rsm; taetxm;udk avhvmMunfhMupdkY/
The Image Tag
<Img SRC = "filename" or "URL">
Adds an image to the page
Browser tm; graphic wpfck ae&mrSefwGif csxm;ay;ap&eftwGuf tajccH tag wpfck jzpfonfh
image rsm;udk usifvnfpGm pDrHxm;&SdEdkif&ef toHk;csapEdkifrnfh toHk;0ifvSaom attribute
awmfawmfrsm;rsm; &Sdonf/ ¤if;wdkUtxJrS SRC (source \ twdkaumuf) udk azmfusL;ay;rnfh
attribute wpfckom vkdtyfygonf/ taMumif;rSm rnfonfh graphic tm; toHk;jyKrnfudk
browser tm; ajymjy&efom vdkaomaMumifhjzpfonf/ SRC attribute \ value rSm graphic
\URL omjzpfonf/ Graphic file onf HTML file taejzifh directory wpfckwnf;wGif
&SdaecJhygu ¤if;\ filename udkom toHk;jyKEdkifonf/ Graphic rsm;tm; ñTefjyay;onfh side
bar onf graphic rsm;udk ñTef;qdk&mü ydkí tao;pdwfusvSonf/
Graphic rsm;onf text wGif&Sd baseline ESifhtwl atmufydkif;wGif default jzifh lined up
vkyfí jyoay;xm;onf/ (Figure 8-1) ALIGN attribute ESifhtwl tao;pdwf azmfjyxm;
jcif; r&Sdonfhtcg graphic wpfck\ab;wGif text onf tvdktavsmuf wrap vkyfvdrfhrnf
r[kwfay/
Figure 8-1
default jzih f <IMG> tag on f pmaMumi;f \ tajcrsO;fvikd ;f twikd ;f ? *&yzf p\f atmuaf jcukd
csed nf x§d m;ay;on/f xaYkd emu f *&yzf p f 0e;fusiaf e&mu kd &iS ;fxm;ay;on/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 139
Tool Tips
Adding images
emrnfausmfMum; vlBudKufrsm;vSaom authoring program rsm;teufrS program oHk;rsdK;
jzifh web page wpfckwGif image rsm; rnfodkUjznfhoGif;,lonfudk atmufygtwdkif; jrif
awGUEdkifonf/
Image wpcf uk kd xnohf Gi;f &ef Insert
Image [al om icon u kd click
vkyfvkduf&onf/ Window
wpcf yk Givhf mNy;D rrd td wGu f a&G;cs,&f ef
local file system rS browser vkyfum
a&G;cs,faumuf,lEdkifonf/
DREAMWEAVER 3
1. Common wiG f yg&adS om pm&i;f rS image
u kd aumu,f l drag vyk íf document ay: oYkd
ae&mcsxm;ay;onf/
2. Dialog box wpcf ok n f rnof n hf *&yzf puf kd to;kH jyKrn[f ak r;&e f yGivhf mon/f
GOLIVE 4
Image wpcf uk kd xn&hf e f tar;vuP© mjyxm;onhf
image icon uk d Palette r S drag vyk ,f Nly;D
document wiG f ae&mcsxm;vukd of n/f
xukd oJh yYkd i f BuKduEf pS of u&f m
file wpcf k rrd d desktop ay:r Swukd ½f ukd ,f Nly;D
page ay:o Ykd csxm;,El ikd fon/f
FRONTPAGE 2000
140 WEB DESIGN vufawG Yoifcef;pmrsm;
Alternative Text
ALT = "text"
Alternative text
ALT attribute onf browser wpfckwGif graphic udk display rvkyfEdkifaponfhtcgwGif
wpfcPtwGif; rdrd image \twdkcsKyf description udk yHhydk;ay;&eftwGuf jyKvkyfay;Edkifygonf/
vlawmfawmfrsm;rsm; aqmif&Gufavh&SdMuaom ydkíjrefqefpGm download jyKvkyfjcif;twGuf
browser wGif graphic rsm;udk toHk;jyKolrS ydwfxm;vdkonfhtcgwGifjzpfap? image rsm;
aysmufqHk;aeonfhtcgwGif generic graphic icon wGif &SdaevdkonfhtcgwGifjzpfap alternative
text udk qufvuf xGufay:vmapygvdrfhrnf/ Non graphical browser rsm;twGuf
(Oyrm-Lynx ) alternative text onf graphic \ae&mwGif bracket rsm;jzifh ay:aeapvdrfhrnf/
rMumcPqdkovdk site \section rsm;odkY graphical button jzifh csdwfquf,lxm;aom
home page rsm;wGif alternative text ryg0ifaMumif; awGUjrifaeMu&ygonf/ Graphic rsm;
r&EkdifvQif tqdkyg home page rsm; tqHk;owfoGm;rnfom jzpf\/ (Figure 8-2) alternative
text udk xnfhoGif;&ef tcsdefydk,ljcif;jzifh taumif;qHk; tajctaewpf&yf jzpfvmEdkifygonf/
Figure 8-2
tu,íf xokd aYkd om
ouqf ikd &f m pmv;kH rsm;
razmfjyEdkifonfhoabmonf
tqykd g page wiG f
*&yfzpfrazmfjyawmh[k
rSwf,l&onf/
*&yfzpfray:vmaomtcg
oufqdkif&m pmvHk;rsm;ay:vmayonf/
ouqf ikd af om *&yzf p f [wk rf [wk uf kd tqykd g
pmv;kH rsm;jzi hf jriaf wG YMu&on/f
WEB DESIGN vuaf wGoY icf e;f pmrsm; 141
Image Size
WIDTH - number
Image width in pixels
WIDTH ESifh HEIGHT [laom attribute rsm;onf graphic \ t&G,ftpm;yrmPudk
pixel twGuf nTef;qdkazmfjyay;onf/ odkY&mwGif tqdkyg attribute rsm;onf web design jyK
vkyfolrsm;\ r&Sdrjzpf rdwfaqG jzpfygonf/ taMumif;rSm aemufqHk;ay:xGufvmaom page
\yHkpHudk ydkrdk jrefqefrI jyKay;EdkifaomaMumifh jzpf\/
Browser rS graphic rsm;\ t&G,ftpm;udk odvmaomtcg graphic rsm;udk ¤if;udk,fwdkif
qGJcsum page ay:wGif cif;usif;,l&if; tvkyf½IyfvmEdkifonf/ Width ESifh height value r&Sd
aom page onf yxrOD;pGm page udkawmh cif;ay;yg\/ Graphic wpfckcsif;twGuf tcsdef,l
um jyifqifay;ae&onf/ Graphic wpfckpDtwGuf rnfrQ ae&mvdktyfrnfudk browser tm;
ajymay;jcif;onf final page wpfckudk puúefYydkif;rQom tcsdef,lojzifh ydkíjrefqefapEdkif\/
rdrdonf web authoring tool wpfckudk toHk;csaecJhvQif Width ESifh Height wdkY\
value rsm;onf graphic wpfckudk ae&mcsxm;&mwGif tvdktavsmuf ae&mcsxm;ay;apyg
vdrfhrnf/ HTML editor ½dk;½dk;av;wpfckudk toHk;cscJhygu vufjzifh a&;jznfhay;&aom yHkpHudk
jyefvnfod&Sd&ef vdktyfygonf/
owdjyK&ef ta&;BuD;qHk;tcsufrSm rdrd image \ t&G,ftpm;trSefESifh rwlaom pixel
value jzpfcJhvQif browser onf rdrd\ specified value ESifh udkufnDap&ef rdrd\ image udk
resize vkyfay;ygvdrfhrnf/ (Figure-8-3) xdkYaMumifh yHktaetxm; &GJUoGm;rnfvm;? 0g;wm;wm;
jzpfaernfvm;[laom tajctaeudk wGufqxm;&ygrnf/
odkYtwGuf xdkodkYaom 0g;wm;wm; &GJUwJhwJh rjzpfvmap&eftvdkYiSm image \ t&G,ftpm;
dimension ? width ESifh height value rsm;udk wdwdusus udkufnDrI&Sdr&Sd yxrOD;pGm ppfaq;
Munfh½Ioifhonf/
Figure 8-3
Width value EiS hf height values woYkd nf
page ay:wGi f xad &mupf Gm ci;fusi;f jyoEikd f
a&;twuG f browser u kd unl aD y;on/f
tu,fí twdkif;twmrsm;onf
wud srrI &odS nthf cg browser onf
width value EiS hf height value wEYkd iS hf
uukd nf &D e f jyecf sed af y;rnuf kd
owdxm;&ygvdrhfrnf/
158 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 245
Web Graphic rsm;zefwD;,ljcif;
*&yzf p'f ZD idk ef mwpOf ;D jzpvf mcsed wf iG f web design qokd nrf mS *&yzf pvf yk if e;f rsm;\
wpwd wf a'otaejziohf m jzpaf eygvrd rhf n/f oaYkd om f pwiaf vvh mpOuf mvtwiG ;f
web o YkdvaJT jymi;f ay;a&;twuG ftoiahf vsmqf ;kH ? tqiaf jyq;kH vyk if e;f pOEf iS hf pwidk uf kd
yxrO;D pmG avvh mc,H &l rnjfzpof n/f tyikd ;f 3 wiG f web designer wpaf ,mu\f
vyk cf surf sm;tm;v;kH xnxhf m;aom twd wf pvf ;kH r S format rsm;EiS hf en;f y&,d m, ftm;v;kHukd
wifjyaqG;aEG;xm;ygonf/
Adobe Photoshop 5.5, Macromedia Firework 3 EiS hf JASC Paint Shop Pro
pon hf graphic program rsm;twiG ;f web graphic rsm; zewf ;D yukH kdwpqf ichf si;f
o½yk jfyEiS thf w louqf idk &f m tce;fu@rsm;wiG f azmjfyay;xm;on/f *&yzf prf sm; zewf ;D &ef
rrd wd iG &f adS eon hf image-editing program u kd rnof tYkd o;kH jyK&rnuf kdtajcctH m;jzihf
oabmayguEf idk af prn hf erel mypkH rH sm;u kd azmjfyay;xm;on/f rrd td aejzi hf *&yzf pwf pcf uk kd
zewf ;D rtI opwf pcf &k vdS mwidk ;f tcsed ,f ul m to;kH jyKrn hf *&yzf paf qmzh 0f rJ sm;taMumi;f
a&;om;xm;on hfto;kH cs vr;fneT pf mtyk wf pcf ck uk kdtaotcsm avvh moiyhf gon/f
þpmtyk of nvf n;f tqykd gtcsurf sm; tygt0i f *&yzf prf sm;u kd rnof rYkd nyf kH
jyKvyk Ef idk af Mumi;fuokd m reS ;fqay;xm;ygon/f
tyidk ;f o;Hk
246 WEB DESIGN vufawG Yoifcef;pmrsm;
WEB DESIGN vuaf wGoY icf e;f pmrsm; 247
All About Web Graphics
tcef; 13
0ufbf*&yfzpfwkdif;onf resolution edrfhedrfhjzifh toHk;jyKavh &Sdonf/ taMumif;rSm GIF odkYr[kwf
JPEG format jyKvkyf&mwGif *&yfzpftwGuf wufvmrnfh bit yrmPudk acRwmrI jyKvkdaom
aMumifhjzpf\/
File Formats
0ufbfwpfckwGif *&yfzpfqkdif&m file format rsm;twGuf udk,fykdiftoHk;csp&m tu©&m oauFw
rsm; &Sdaeonf/ tifwmeufay:wGif wifqufay;onfh *&yfzpfqkdif&m format rsm;onf uGef&uf
wpfckay:wGif platform wpfckrSwpfckokdY tvG,fwul xnhfoGif;í &Muonf/
0ufbfay:wGif rdrdwkdY jrifawGUMu&oavmuf tukefeD;yg;rSm format wpfck? ESpfckcefY &Sd
aewwfonf/ Oyrm GIF (*spfzf) ESifh JPEG (a*syuf) wkdYudk trsm;qHk; awGUae&onf/
The Ubiquitous GIF
GIF (Graphic Interchange Format) file onf tifwmeuftwGuf tESpfoufqHk;yHkpH jzpfae
ouhJokdY orm;½kd;us oHk;avhoHk;x&SdaomyHkpH[k qkd&rnf/ GIF file rsm;onf compressed
file rsm;jzpfMuonf/ trsm;qHk; 8 bit color information txd yg&Sdwwfonf/ þae&mwGif
compressed [laom toHk;tEIef;rSm GIF file wpfcktjzpf rdrd\*&yfzpfrsm;udk ajymif;vJjyKjyif
xm;onf[k qkdvdkjcif; jzpf\/ Color information rsm;udk twwfEkdifqHk; i,fonfxuf
i,fap&ef zdodyfn§pf,lxm;ay;onfh vkyfief;pOfwpf&yfjzifh aqmif&Gufay;onf/ 8 bit color
[lonfh t"dyÜm,frSm pixel color 256 rsKd; trsm;qHk; yg0ifxm;onfh taetxm;udk qkdvkdonf/
okdY&mwGif wu,fwrf; toHk;jyK&mü 256 rsKd; toHk;jyKjcif; r[kwfay/
Figure 13-1 wGif azmfjyxm;ouhJokdY vdk*dkrsm;? yHkazmfumwGef;rsm;? tkdifuGefrsm;ESifh
wpfaMumif;qGJ yHkrsm; pDpOfxm;onfhtwkdif; wpfa&mifjc,fyHk&dyfrsm;udk GIF format wGif trsm;qHk;
jrifawGU&ayvdrfhrnf/
248 WEB DESIGN vufawG Yoifcef;pmrsm;
GIFs rsm;onf tjcm;tm;omcsufrsm; &Sdaeygao;onf/ ESpfxyfyHk&dyfrsm;udk ta&mifcGJjcm;í
vnf; zefwD;,lEkdifonf/ xkdYtwl ½kd;&Sif;aom animation rsm;udkvnf; zefwD;Ekdif\/ rsm;aom
tm;jzifh aMumfjimtjzpftoHk;jyKaom vIyf&Sm;½kyfyHkrsm;onf animated GIFs rsm; jzpfonf/
The Photogenic JPEG
,aeY0ufbfqkdufrsm;wGif 'kwd,ay:jyLvmtjzpfqHk; *&yfzpfqkdif&m format wpfckrSm JPEG
format yif jzpfonf/ JPEGs rsm;onf ta&mifaygif; oef;csD&SdaeEkdifaom 24 bit color
image rsm;jzpfygonf/ wjznf;jznf; rodrom ta&mifyrmPajymif;vJrIudk vkdvm;jcif;ESifh
jym;0yfaeaom ta&mifrsKd;jzifh rvkyfudkifvkdjcif;ponfh pDrHcsufrsKd;udk zdodyfay;rIwpfckudk toHk;jyK
xm;onf/ tqkdyg pDrHcsufudk compression scheme [k ac:qkdMu\/ JPEG \ tqkdyg
pDrHcsufESifh ta&mifjznhfpGrf;&nfwkdYudk toHk;csvkdufjcif;jzifh Figure 13.2 wGif jyqkdxm;onfh
twkdif; "mwfyHkuhJokdYaom image rsm; jzpfvma&;twGuf a&G;cs,ftoHk;csp&m format jzpfvm
&onf/
þae&mwGif compression scheme onf taumif;qHk; zdodyfrIudk aqmif&Guf&if;jzifh
image \ tcsKdUaom tao;pdwfazmfjyrIrsm; aysmufysufoGm;p&mtaMumif;&Sdí Lossy [k
owfrSwfMuao;onf/ rnfokdYyifjzpfap JPEGs onf file yrmPtao;i,fqHk; taetxm;jzifh
taumif;qHk; image rsm;udk zefwD;ay;aeqJjzpfonf/
JPEGs rsm; zefwD;yHk tao;pdwfudk tcef; 15 wGif qufvufwifjyay;ygrnf/
GIF file format onf
wpfa&mifwnf;jc,fyHkrsm;
to;kH jyKí jywof m;aom
vkdif;rsm;jzifh
yHkazmfxm;jcifaMumifh
taumif;qHk;
yHk&dyfrsm;jzpfonf/
Figure 13-1
WEB DESIGN vuaf wGoY icf e;f pmrsm; 249
ta&mifyrmP rodrom ajymif;vJrIrsm;udk "mwfyHkrsm;?
odkYr[kwf yef;csDum;rsm;wGif yg0ifouhJokdY taumif;qHk;
taetxm;jzi hf JPEG file format rsm;u
vkyfaqmifay;onf/
,aeYacwf web graphic tool rsm;onf rwlnDaom file format rsm;udk wpfckcsif;
jyefvnfMunhf½I ppfaq;Ekdifygvdrhfrnf/ Figure 13-3 wGif azmfjyxm;onfhtwkdif; rdrd\ ½kyfyHkrsm;
udk taumif;qHk;jzpfap&eftwGuf format a&G;cs,frIudk tydkif;vkdufyif jyefí Munhf½IEkdifonf/
Photoshop 5.5 EiS hf Fireworks 3
onf rwlnDaom file format
rsm;twuG f &&NdSy;D aom file
t&,G tf pm;rsm;EiS hf y½kH yd f
t&ntf ao;G rsm;u kd jyevf npf paf q;
Munhf½IEdkifygonf/
Adobe Photoshop 5.5
aemuqf ;kH tqi hf file rsm;u kd &mS azG
rMun½fh rI D rrd \d y½kH yk rf sm;u kd tao;pwd f
jc,rf eI ;f jci;f EiS hf csed wf G,jfci;f twGuf
Select file u kd omG ;um
save vkyfxm;&onf/
Macromedia Fireworks 3
Document Window twiG ;f &dS
nmbuftay:rS "4-up" udk
Mun½fh I &e f tcGithf vr;f rsm;
Firework 3 wGi f &&EdS idk of n/f
Figure 13-2
Figure 13-3
250 WEB DESIGN vufawG Yoifcef;pmrsm;
yHk&dyftaetxm; to;kH jyK format tusKd;taMumif;
ta&mifjym;yHkpHjzifh *&yfzpfrsm; GIF
"mwfyHkrsm; odkYr[kwf ta&mif JPEG
jc,frIef;rI trsKd;rsKd;yg0ifonfh
a&aq; yef;csDum;rsm;
ta&mifjym;yHkpHESifh GIF
"mwfyHkobm0rsm;a&mpyfxm;onfh
aMumfjim qkdif;bkwfrsm;
wHqdyfacgif;t&G,ftpm; odkYr[kwf GIF
tdkifuGeft&G,ftpm; "mwfyHkrsm; odkYr[kwf
JPEG
xkd;azmufjrifEdkifaomyHkrsm; GIF
vIyf&Sm; animation rsm; GIF
wpfa&mifwnf;jc,f ta&mifjym;yHkpHjzifh vSvSyy jzpf
aeapí ydkrdk oyf&yfpGm zdodyfrIjyKvkyfay;&if; tqifh
jrifh image rsm;udk file t&G,ftpm; ao;ao;jzifh
&&SdEkdifygvdrhfrnf/
a&maESmaeaom ta&mifrsm;yg0ifonfh image rsm;
udk JPEG jzifh taumif;qHk;jzpfap&ef zdodyfay;Ekdif
onf/ yHkwlum;csyfrsm;udk ta&mifaygif;ajrmufjrm;
pGmjzifh zefqif;ay;Ekdifonf/ taumif;qHk; ta&mif
taoG;pHk image rsm; jzpfvifhupm; file t&G,ftpm;
ao;i,fpGm zefwD;,lEkdifrnf/
Image wpfckvHk;BuD;udk JPEG pression rsKd;jzifh
zdodyfNyD; "mwfyHkobm0qefqef razmfusL;vkdbJ
obm0ESpfrsKd;ygapNyD; file t&G,ftpm;udk OD;pm;ay;
onfh udpö trsm;pkwGif toHk;jyKEkdifrnf/
tvGefao;i,faom graphic image rsm;ESifh txl;
oifhavsmfonf/ GIF okdYr[kwf JPEG ESpfrsKd;vHk; prf;
MunhfMunhfí file t&G,ftpm;yrmPESifh t&nf
taoG;rsm; csifhcsdefum taumif;qHk;udk a&G;cs,f toHk;
jyKEkdifonf/
xkd;azmufjrifEkdifaom ESpfxyfyHk&dyfrsm;twGuf GIF
file format wpfckom aqmif&GufEkdifonf/
Animation yHk&dyfrsm;udkvnf; GIF wpfckomvQif
pGrf;aqmifEkdifygvdrfhrnf/
Choosing the Best File format
tifwmeufrS download vkyf,l&mwGif jrefqefpGm &,lEkdifap&ef 0ufbf*&yfzpfrsm;udk jyifqif&mwGif
reS uf eaf om file format u kd a&G;cs,,f &l rnjfzp\f /
Image Resolution
GIFs rsm;ESifh JPEGs rsm; ESpfckvHk;onf pixel-based rsm;jzpfonf okdYr[kwf bitmapped
image [kvnf; owfrSwfEkdifonf/ yHk&dyfudk zoom jzihf csJU,lMunhfvkdufaomtcg tifrwefao;
i,faom av;axmifhuGufav;rsm;jzpfí Pixel tajrmuftjrm;jzifh mosaic ozG,f jyKvkyfxm;
onhf ½kyfyHktm; jrifawGUEdkifygonf/ Figure 13-4 wGif azmfjyxm;ouhJokdY ocsFmyHkaoenf;rsm;
tay: tajccHxm;onhf yHkpHtae txm;jzifh vkdif;acsmrsm;? uGufvyfjznhfrIrsm; jyKvkyfaqmif&Guf
xm;aom Aufwm*&yfzpfrsm; cGJcGJjcm;jcm; jrifawGU&rnf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 251
TIFFs rsm;uhJokdY yHkESdyf'DZkdif;wGif Pixel-based image rsm;udk toHk;csxm;chJvQif wpfvufr
cGifwpfcktwGif; pixel ta&twGuf rnfrQyg&Sdonfudk azmfjyonfh resolution [lonfh
a0g[m&udk tuRrf;0ifod&SdNyD; jzpfaeygvdrfhrnf/ okdYtwGuf yHkESdyfxkwf&mü a,bk,stm;jzifh
300 dpi (dots per inch) [lonfh resolution udk toHk;csMuonf/
Goodbye inches, Hello Pixels
0ufbfay:wGif image rsm;udk twwfEkdifqHk; resolution edrfhedrhfudk zefwD;,l&ygvdrfhrnf/ 72
dpi onf de facto standard jzpfvmonf/ okdYaomf wu,fwrf;rSmrl vufrtaetxm;jzifh
wkdif;wm,lqMujcif;jzpf\/ odkYtwGuf web avmuwGif vufrrsm;? wpfvufrwGif&Sdaom
tpufrsm; ta&twGufwkdYjzifh toHk;jyKavh&Sdaomfvnf; ¤if;tpm; pixel [laom toHk;tEIef;
jzifhom ajymqkdvmMu&jyefonf/
Web page wpfckay:wGif *&yfzpfrsm;udk wifjyaomtcg armfeDwm\ resolution cif;
usif;rIESifhtwl image map wpfckrSwpfckodkY &Sdvmaprnfh pixel rsm;jzifh toHk;jyKolrsm;u
ajymif;vJ,lMu&onf/
Bitmap Image rsm;onf mosaic wpfckozG,f
ta&mitf rsK;d rsK;d yg&adS om tuGuwf pcf pk jDzihf
ûyvkyfxm;onf
Vector Image rsm;onf ocsFm
nrD Qjci;f rsm;u dk to;Hk ûy azmjfyxm;jci;f
jzpfonf
Measuring Resolution
Screen ay:wGif 0ufbf*&yfzpfrsm; tjynfhtpHk vHk;vHk;vsm;vsm; wnf&SdaeEkdif&ef
twGuf ¤if;wkdY\ resolution twkdif;twm pixels per inches (ppi)
rSefuefrIvkdtyfonf/
dpi (dots per inch) [lonfh twkdif;twmonf yHkESdyfvkyfief;twGufom oHk;onf/
vufawGUtm;jzifh dpi ESifh ppi a0g[m&rsm;udk tajymif;tvJ jyKí
toHk;jyKxm;Muonf/ a,bk,stm;jzifh resolution udk dpi jzifhvnf; nTef;qkd
vufcHEkdifonf/
Figure 13-4
252 WEB DESIGN vufawG Yoifcef;pmrsm;
72 pixels square &Sdaom *&yfzpfwpfckudk Figure 13-5 twkdif; zefwD;,lvdkufonf/
rdrd\ image editing y½kd*&rf wpfcktwGif; 72 dpi jzpfap&ef resolution ukd csdefwG,f,lchJpOfu
rdrdtaejzifh armfeDwmwGif 1 vufr ywfvnf&Sdaom *&yfzpftjzpf arQmfrSef;xm;&Sd&onf/
Image wpfck\ t&G,ftpm;onf
armfeDwm resolution ay:
rlwnfaeonf/
okdYaomf rdrdarmfeDwmxuf resolution ydkjrifhaom armfeDwmwpfckay:okdY ajymif;a&TU wifjyvm
onfhtcg rnfokdY&Sdrnfudk prf;ppfMunhf&ayvdrfhrnf/
½kwfw&ufqkdovkd rdrd\ wpfvufrywfvnf *&yfzpfonf oHk;rwfywfvnf t&G,ftpm;
xufyif avsmhenf;oGm;awmh\/ taMumif;rSm 72 pixels t&nftaoG;wlonfyif wpfvufrwGif
100 pixels cefYpD&Sdaom resolution wpfckokdY mapping one-to-one ac: wpfckrSwpfcktay:okdY
cif;vmonhfyHkpHrsKd; cif;vkdufaomaMumifh jzpf\/ xkdYtaMumif;jycsufaMumifh 0ufbfay:wGif
inches [lonfhtoHk;tEIef;udk ajymqkd toHk;jyKjcif;twGuf t&mrxif jzpfoGm;apawmhonf/
okdYtwGuf dpi [laom todtjrifrsm;udk tajccHoabmt& window tjyifbufokdY a&mufoGm;
&ayonf/
xkdYaemuf 0ufbftwGuf 300 dpi uhJodkYaom higher resolution wpfck zefwD;csuf
odkYr[kwf scan jyKvkyfcsufrsm;wGifvnf; xifxif&Sm;&Sm; Oyrmxm; jrifawGUEkdifapygvdrfhrnf/
Pixel across jzifhom toHk;csvmMuonf/ orm;½kd;us image rsm;twGuf axmifaygif;rsm;pGm
&Sdaeonf/ 600 pixels wide uhJodkYaom ao;i,fonhf browser window rsm;wGif ydkíyif
rvkdtyfawmhay/ Figure 13-6 wGif jrifawGU&ouhJokdY browser window wGif cGifusus jyo
ay;ygvdrhfrnf/
Working in Low Resolution
Resolution onf rqDrqkdifaomoabmrsm; oufa&mufoGm;p&m jzpfwwfaomfjim;vnf;
vlwkdif;avmufeD;eD;onf 0ufbf*&yfzpfrsm;udk 72 dpi jzifh csdefwG,f zefwD;,lMuonf/ taMumif;
Figure 13-5
WEB DESIGN vuaf wGoY icf e;f pmrsm; 253
rSm ydkifeufowfrSwfxm;onfhae&mxJü pixel rsm; ta&twGuf uGufwd&&SdEkdifaomaMumifh
jzpf\/ xkdokdY low resolution a&G;cs,frIESifh ywfoufí tm;enf;csufwpfckrSm image \
t&nfaoG; tenf;i,favsmhusoGm;apjcif; jzpfonf/ ay;xm;aom ae&mwpfckwGif image
information tajrmuftjrm; rjznhfoGif;EkdifaomaMumifh[k qkd&rnf/ Image wGif tzktxpf
tpuftajymufav;rsm; odom xif&Sm;ap&ef jzpfoGm;ap\/ okdYaomf 0ufbf\ obm0onfyif
xdkrQavmuf&SdaeMuao;onf/
oaYdk om f 300 dpi u kd ,vl udk yf g?
wpyf idk ;f avmu f jriaf w&GU Ny;D browser
window tjyi\f jriaf wEGU idk af om
ae&mrsm;o Ydk usa&muof Gm;vrd rhf n/f
72 dpi \ browser window wGif 3 vufrywfvnf
image av;u dk ciG uf sus vvS yS y jriaf w&UG on/f
Figure 13-6
254 WEB DESIGN vufawG Yoifcef;pmrsm;
File Size Matters
Web page wpfckudk uGef&ufwpfckay:wGif jzefYa0 xkwfjyef,ljcif; jzpfaomaMumifh vufcH&,l
rnfholxHokdY ao;i,faom packet av;toGifjzifh a&muf&SdoGm;ap&ef tvkdYiSm zip vkyfxm;&ef
vkdtyfaeygvdrfhrnf/ tu,fíom yrmPBuD;BuD;&,lvkdvQif tcsdefMumMum,lNyD;rSom vufcHEkdif
rnfudk tvkdvkdoabmaygufNyD; jzpfaeMuonf/ *&yfzpfyrmPBuD;av download vkyf,l&
onhftcsdef Mumav jzpfonf/
þodkYjzihfyif 0ufbfay:wGif *&yfzpfwkdYonf wpfbufrScspfp&mtaetxm; &SdaeouhJokdY
wpfbufrSvnf; pdwfysufp&m jzpf&onf/ pmoufoufjzifh zefwD;xm;aom page wpfckxuf
*&yfzpfygaom web page wpfcku ydkípdwf0ifpm;p&m aumif;aponf/ tifwmeuf\ t"du
tpdwftykdif;jzpfaom 0ufbfay:wGif trsm; pdwf0ifpm;p&mjzpfum ay:jyLvmjzpfvma&; MudK;yrf;
csufwGif *&yfzpfrsm;jzifh zefqif;EkdifrI t&nftcsif;rSm taMumif;wpf&yftjzpf oD;jcm; wnf&Sd
aeonf/ rdrdwkdYjrifawGU&orQudk pdwf&SnfpGm apmifhpm;vufcH,lEkdifap&ef qE´rsm;udkvnf;
wpfbufrS EdI;qGay;Ekdifonf/
toHk;jyKoltaejzifh a&G;cs,fp&m oHk;ck&Sdaeonf/ pdwf&Snf&SnfapmifhMunhfjcif;? *&yfzpf
download function udkydwfí pmrsm;udkom zwf,ljcif;? okdYr[kwf qufvuf apmifhpm;jcif;
rjyKawmhaom 'back' cvkwfudkESdyfum jyefxGufoGm;jcif;wkdYyif jzpf\/
DSL ESifh cable modems rsm;uhJodkYaom high-bandwidth connection rsm;twGuf
taMumif;r[kwfaomfvnf; 28.8 odkYr[kwf 56 kbps dial-up modem connection rsm;
jzpfygu download time onf xnhfoGif;pOf;pm;p&m jzpfaewwfonf/ rnfodkYyifjzpfap
Web design vkyfief;\ taumif;qHk; pnf;rsOf;wpfckrSm download time udk enf;EkdiforQ
enf;ygap [líyifjzpfonf/
How Long Does It Take?
0ufbfay:rS *&yfzpfwpfckudk download vkyf,l&ef rnfrQMumrnfudk twdtus
ajymqkd&ef cufcJaeygvdrfhrnf/ taMumif;tcsufrsm;tay: rlwnfaewwfonf/
toHk;jyKol\ tifwmeuf qufoG,frIpepf tjrefEIef;? rdrduGefysLwm\ tjrefEIef;?
rdrdtoHk;jyKaom web server wGif wnf&SdvIyf&Sm;aeaom yrmPESifh
tifwmeufvrf;aMumif;ay:&Sd tajctaet&yf&yf ponfjzifh taMumif;tcsufrsm;udk
qkdvkdonf/
Standard modem connection wpfckay:wGif *&yfzpfwpfcktwGuf
wpfpuúefYvQif Kilobyte rnfrQ ,lrnfudk taxGaxGpnf;rsOf; wpf&yfjzifh
xm;&Sdwwfonf/ 30 K &Sdaom *&yfzpfwpfcktwGuf download vkyf,l&mwGif puúefY
30 Mumjrifhwwfonf/ odkYtwGuf 'DZkdifemrsm;tpkjzifh 1 sec/K EIef;xm;udk tpOfowdjyK
wnfaqmuf,lwwfMu&rnf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 255
odkYygí client jzpfonfh aumfydka&;&Sif; awmfawmfrsm;rsm;onf Kilobyte limit (K-limit)
wpfckudk csdefwG,fxm;&Sdwwfonf/ Page wpfckwGif trsm;qHk;&Sdae&rnfh pkpkaygif; files rsm;\
yrmPyifjzpf\/ wpfckaom corporate site wpfckqkdygu HTML file ESihf *&yfzpftm;vHk;
aygif;pyfxm;NyD; tygt0if 15 K/page [k uefYowfay;xm;chJonf/ xkdYtwl site awmfawmf
rsm;rsm;\ aMumfjimu@twGuf 6 K odkYr[kwf 7 K xuf rrsm;ap&ef uefYowfxm;aMumif;
awGU&onf/ rdrdtwGuf ta&;rBuD;vSaomfvnf; client twGuf ta&;BuD;aeojzifh þodkY
pDpOfxm;&Sdjcif; jzpfonf/
Limit the Dimensions
File t&G,ftpm;udk avQmhcs&eftwGuf tvG,fqHk;enf;vrf;rSm *&yfzpf\ t&G,ftpm;udk
uefYowf,ljcif;yif jzpfonf/ vkdtyfonfxuf rydk&ef ta&;BuD;onf/
Figure 13-7 wGif jrifawGU&onfhtwkdif; rvkdvm;tyfonfh tydkom;ae&mrsm;udk z,fxkwf
,ljcif;jzifhyif 3 K u avsmhenf;oGm;apEkdifonf/
ab;wGi f tyxkd m;&adS om
tjzLom;ae&mrsm;udk z,fxkwf
jzwf,lvkdufjcif;jzifh
rdrd\ file t&G,ftpm;
ao;i,foGm;Ekdifonf/
Design for Compression
t"duusaomenf;vrf;wpfckrSm zdodyfrIpDrHcsufjzifh tcGifhtvrf;,ljcif; jzpfonf/ wpfa&mif
wnf;jc,f ta&mifjym;pepf (flat color) jzifh tqifajyvHkavmufaevQif wjznf;jznf;rodrom
ta&mifcGJxkwf toHk;csaom yHkpH'DZkdif;rsKd;udk roHk;oifhbJ GIF compression udkom toHk;cs
aqmif&Guf&rnf/
Reuse and Recycle
Download time udk uefYowfxm;&Sdonfh tjcm;enf;vrf;wpfckrSm rdrd browser \ cache rS
&&SdEkdifonfh tcGifhtvrf;udkoHk;um rdrd*&yfzpfrsm;udk jyefvnf toHk;csjcif; jzpf\/
Figure 13-7
256 WEB DESIGN vufawG Yoifcef;pmrsm;
0ufbfwGif browsing jyKvkyfaomtcg document rsm;tMum; a&GUoGm;jcif;? aemufjyef
Munhfjcif; pouhJokdY vkyf½kd;vkyfpOftwkdif; Munhf½Iavh&SdMuonf/ Document wpfckckudk xyfcg
xyfcg wyfxm;aprnfhtpm; rMumao;rDu 0ifa&mufMunfh½INyD;chJonfh document udk browser
rS xdef;odrf;ay;xm;onf/ xkdodkY aqmif&Gufjcif;udk caching (uuf&Sfcsif;) [k ac:onf/ tqkdyg
file rsm;udk ,m,D odkrSD;xm;ay;rIudkvnf; cache (uuf&Sf) vkyfonf[k owfrSwfonf/
okdYtwGuf rdrd site ay:wGif tjrJwrf;vkdvkd *&yfzpfrsm;udk jyefoHk;Ekdif&eftwGuf browser's
cache rS tcGifhtvrf;udk t&,lEkdifonf/ þenf;onf Figure 13-8 wGif jyxm;ouhJodkY
aemufqufwGJygvmrnfh page rsm;udk tvsiftjref wpfBudrfwnf;jzifh *&yfzpfwpfckcsif;udkom
download vkyfay;&ef vkdtyfawmhonf/
xkdaqmif&Gufcsufonf <IMG> tag wpfcktwGif;wGif URL twlwl jzpfrSom &Ekdifygvdrhf
rnf/ xkdYtjyif *&yfzpfwpfckwnf;ygaom directory wpfcktaejzifh &Sdxm;NyD; jzpf&rnf/
Browser rS pathname topfawGUaomtcg fresh download wpfckjzifh aqmif&Gufvkyfukdifay;
ygvdrfhrnf/
Find It Online
tprf;avhusifhrIjyKEkdif&ef tcrhJ&&SdEkdifaom owif;tcsuftvufESifh enf;vrf;rsm;udk
atmufyg web site rsm;wGif download vkyf,l&&SdEkdifonf/
Adobe System, Inc. (www.adobe.com)
Macromedia, Inc (www.macromedia.com)
JASC Software (www.jasc.com)
*&yzf prf sm;tm; jyeof ;kH jci;f jzi hf page
display vyk &f mü yíkd jreqf ef
omG ;apon/f Browser r S *&yzf prf sm;ukd
wpBfurd wf n;f jzi hf qGJcs,vl udk íf
quwf udk f to;kH jyKEikd &f etf wuG f cache
wGif tm;xm;,lonf/
Graphic file onf local
computer cache wGif awmif;cHrI?
qGJcs,rl ?I Mun½fh rI EI iS hf ordk ;DS rrI sm;
jyKvkyfaeonf/
Figure 13- 8
WEB DESIGN vuaf wGoY icf e;f pmrsm; 257
Tools of the Trade
Web graphics tool rsm;onf vGefchJaom q,fhig;ESpfausmfumvrsm;upí wjznf;jznf;
c&D;&SnfBuD;udk csDwufvmchJ&onf/ a&S;wpfcsdefu yHkxkwf*&yfzpf vkyfief;rsm;twGuf tool
rsm;udk toHk;csMuonf/ 0ufbf[lonfh qef;opfrI ay:aygufvmNyD;aemuf 0ufbftwGuf
oD;jcm;vkdtyfvmonfh transparency uhJokdYaom tpDtpOfrsKd; vkyfudkifEkdifaprnfh toGiftjyif
rsm; aygif;pyfyg0ifvmchJ&jyefonf/
0ufbf'DZkdifemrsm;twGuf aqmhzf0JwDxGifolrsm; awmifhwcsufrSeforQudk tpOfrjywf jznfh
qnf;ay;vmchJonf/ Web designer rsm;udk toufarG;0rf;ausmif;tjzpf vkyfudkifvsuf
&SdaeMuaom uRrf;usifolrsm;tv,fwGif xifay:tausmfMum;qHk; jzpfae&onfh graphic tool
rsm;udk tusOf;csKyf azmfjyay;vkdonf/ þae&mwGif GIF ESifh JPEG file rsm; vkyfudkifrItwGuf
xkdufxkdufwefweftoHk;csEkdifrnfh *&yfzpf y½kd*&rf tcsKdUudkom rdwfqufwifjyay;jcif;jzpfonf/
tjcm;tjcm;aomtoHk;0ifaprnfh tools aygif; ajrmufjrm;pGm &Sdaeygao;onf/
Adobe Photoshop/Image Ready- Adobe Photoshop onf 0ufbfESifh oufqkdifonfh
*&yfzpfrsm;vkyfudkif&mwGif industry standard tjzpf toHk;csEkdifonfrSm txl;wifjyp&m
rvkdtyfay/ 'DZkdifemwkdif;avmufeD;eD;u Adobe photoshop udk vufpGJtjzpf toHk;jyKMu
onf/ Version 5.5 rSpum 'Adobe rS Save to web' [lonfh option rsKd; xnhfoGif;&if;
0ufbfvkyfief;twGuf oD;oefYoHk;&ef rdwfqufay;chJ\/ vkyfudkifaqmif&GufchJNyD;aom
*&yfzpfrsm;udk rwlnDaom format rsm;? uGJjym;jcm;em;aom compression rate rsm;jzifh
jyoay;Ekdifonf/ GIF file rsm;twGuf toHk;usaprnfh advanced palette rsm;ESifh
dithering control rsm;vnf; yg0ifvmonf/
,cktcsdefwGif Photoshop aqmhzf0JESifhtwl Adobe \ Image Ready aqmzhf0Jyg
xnhfoGif;yg&Sdvmonfudk awGUjrifEkdifonf/ Java Script code jzifh a&;om;xm;onfh
rollover effect rsKd;ESifh animation vkyfief;rsKd;twGuf toHk;usaomtxl;pyg,f&S,f
webtrick rsm; jzpfonf/ odkYtwGuf rdrdtaejzihf professional tjzpf0ufbf'DZkdif;ESifh
0ufbf*&yfzpfrsm;udk vkyfudkifawmhrnfqkdu Photoshop udkvufudkifxm;oifhonf/
Stealing isn't Nice
tu,fírsm; Copyright rvGwfuif;aom image rsm;udk ,loHk;jcif;onf
raumif;rGefay/ rdrd web site wpfckwGif ,loHk;xm;onfudk awGU&SdoGm;ygu
jyóem &SdEkdifonf/ tu,fí clip-art CD collection rS oHk;onfhwkdif vdkifpifjzifh
0,f,lrSom ydkrkd tqifajyEdkifrnf jzpf\/
taumif;qHk;rSm 'unrestricted' odkYr[kwf 'royalty free' ponfh pmwef;rsm;
azmfjyxm;onfh free image rsm;udk toHk;jyKjcif;onf jyóemtuif;qHk;jzpfonf/
258 WEB DESIGN vufawG Yoifcef;pmrsm;
JASC Paint Shop Pro - uGefysLwmudk udkifwG,ftoHk;jyKae&aomfvnf; ¤if;twGuf
bwf*sufudk wdkif;xGmoHk;ae&oljzpfygu Paint Shop Pro jzifh aqmif&Gufvkyfudkifoifhonf/
¤if;wGif PhotoShop uhJokdYaom toGiftjyifrsm;pGm yg0ifxm;aomfvnf; aps;aygpGmjzifh
0,f,ltoHk;csEkdifrnfjzpf\/ ¤if;wGifvnf; animated GIFs rsm; jyKvkyf&ef Animation
Shop 2 udk yl;wGJ xnfhay;xm;onf/
Macromedia Fireworks - Web graphic vkyfief;wGif txl;vkdtyfcsufrsm;udk jznfhqnf;
ay;Ekdifonfhy½kd*&rfrsm;teuf Macromedia Fireworks onf yxrqHk; *&yfzpf y½kd*&rf
wpfckjzpf\/ vector (Line-based) image rsm;jzpfap? raster (pixel based) image
rsm;jzpfap zefwD;wnfaqmufay;Edkifonf/ txl;ESpfoufp&m taumif;qHk; tool rsm;rSm
editable text oHk;Edkifjcif;? rnfonhftcsdefwGifrqkd edit vkyf,lEkdifonfh 'Live' effect
yg0ifjcif;? side-by-side export previews xnhfxm;jcif;? animation vkyfudkifEkdifjcif;?
rollover buttons rsm; yg&Sdjcif;? yHkrsm;udk txyfvkduf vTmoHk;Edkifrnfh advanced image-
slicing tool wdkYyif jzpfonf/
xkdYtjyif drawing program wpfck bitmap editing program wpfckESifh txl;jyK web
utilities rsm;tMum; tajymif;tvJvkyf&mwGif rsm;pGm toHk;0ifaponf/
Adobe Illustrator, Macromedia Freehand - vkdif;jyyHkqGJ y½kd*&rfrsm;teuf ay:jyLvm
tjzpfqHk; y½kd*&rfESpfckjzpfonf/ 0ufbf'DZkdifemawmfawmfrsm;rsm;onf rdrdwkdY\ y½kd*&rfwpfck
twGuf pwifEkdif&ef yHkMurf;a&;qGJrIu pwifMu&onf/ okdYtwGuf Adobe Illustrator
jzifhjzpfap? Macromedia Freehand jzifhjzpfap vkdtyfovkd pwiftoHk;csMuonf/ GIF
format jzifh wkduf½kdufodrf;qnf;,lEkdifaom t&nftcsif;&Sdaomfvnf; 'DZkdifemwkdif;onf
omreftm;jzifh aemufqHk;vkyfief;pOfusrSom web graphics tool jzifh odrf;,lavh&Sdonf/
Image Source
rdrdwkdY *&yfzpfrsm;onf GIF odkYr[kwf JPEG jzpfaeapvkdaMumif;udk od&SdjyD;aemuf xkd*&yfzpfrsm;
udk rnfonfhae&mrS &Ekdifrnf/ rnfokdY pwifyHkazmfEkdifrnfwkdYudkvnf; odxm;oihfayonf/
Scanning
0ufbf*&yfzpfrsm;twGuf tajccHypönf; pkaqmif;&mü scanning vkyfief;onf enf;vrf;aumif;
wpf&yfjzpfonf/ Flat art trsKd;tpm;rS 3 D trsKd;tpm;txd tm;vHk;avmufeD;eD;udk scan
vkyf,l&&SdEkdifonf/ rnfodkYyifjzpfap owdjyK&rnfrSm rdrd scan jyKvkyfrnfh image onf copyright
wm;jrpfxm;&SdrI &Sd r&Sd odxm;&efyifjzpfonf/ Modify vkyfí toHk;csygrnfqkdonfh
wkdif rlydkifxm;&Sdol\ cGifhjyKcsuf&rSom tqifajyEdkifygvdrfhrnf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 259
Digital Cameras
'pf*spfw,fuifr&mrsm;ESifh rdrdBudKufESpfouf&mudk ½kduful;,lum image editing y½kd*&rfwpfckjzifh
vkdtyfovdk zefwD;&,lEkdifonf/ wpfcsdefu 0ufbfwGif low resolution om &&Sdcsdefu omref
uifr&mjzifhyif tqifajyrnfjzpfaomfvnf; ,cktcgwGifrl high-resolution uifr&mjzifh
toHk;csrSom rdrd\ page onf 0ufbfqkdufrsm;tv,fwGif wifhw,fEkdifygvdrfhrnf/ txl;
owdjyK&rnfrSm 'pf*spfw,f uifr&mrsm;onf omreftm;jzifh JPEG compression udk toHk;
csum image rsm;udk zdodyfxm;ay;avh&Sdygonf/ odkYtwGuf rlvyxr &,laom image rsm;udk
tenf;i,f ESdrfh,lxm;oifhonf/
Electronic Illustration
rsm;aomtm;jzifh Illustrator okdYr[kwf Fireworks odkYr[kwf Photoshop uhJodkYaom *&yfzpf
y½kd*&rfwpfckckwGif tMurf;yHkpHjyKvkyfNyD;rSom rdrdtwGuf yHkacsm image rsm;udk zefwD;,lEdkifMu
onf/ 'DZkdifemawmfawmfrsm;rsm;onf yHkMurf;azmf&mwGif drawing tablet ESifh stylus udk toHk;cs
um udk,fykdif image rsm;udk zefwD;,l&ef vdkvm;wwfMuonf/ yxrOD;pGm bitmap y½kd*&rfudk
toHk;csí 72 dpi cefY&Sd file opfwpfckudk us,fus,fjyefYjyefY ae&m,lwnfaqmufonf/ wpfcg
wpf&H Illustrator okdYr[kwf freehand uhJodkYaom vector program wpfckukd toHk;csonf/
Photoshop \ aemufqHk;vkyfief;pOfwGif vkdtyfaeí xkdtqifhwGif csufcsif;vkyf,lír&aom
udpörsm;udk tqdkyg tool rsm;jzifhom zefwD;,lxm;&onf/
Scanning Tips
0ufbfay:wGiftoHk;jyKrnfh image rsm;udk scan vkyf,lchJvQif atmufygtnTef;rsm;onf t&nf
taoG; ykdaumif;pGm&&SdvmEkdifonfh image rsm;twGuf taxmuftulrsm;pGm &&SdEkdifygvdrfhrnf/
- rdrd\aemufqHk; image rsm;onf 72 dpi resolution wpfck&Sd&rnf/ image trsm;pkudk 72
dpi jzifh wkduf½kduf scan vkyfEkdifonf/ 100 dpi uhJokdYaom resolution tenf;i,f jrifhrm;
aewwfaom scanning onf t&G,ftpm; jyKjyifjcif;twGuf ydkíudkifwG,f&vG,fulonf/
taMumif;rSm pixel ydkí&&ef jzpfygvdrfhrnf/ rnfokdYyifjzpfap 72 dpi onf standard
resolution jzpfí wpfvufrtwGif; &Sd&rnf/ Pixel jzifh a&wGuf,lonf/
- taumif;qHk;rSm grayscale (8-bit) mode jzifh scan vkyfjcif;jzpfonf/ Black and white (2
bit okdYr[kwf bitmap) jzifh scan vkyfjcif;jzifh raumif;rGefEkdifay/ Midtone area rsm;wGif
csdefn§dEkdif&ef grayscale onf taumif;qHk;jzpfaponf/ tu,fírsm; black and white
pixel udkom &,lvkdygu image \ aemufqHk;tqifhwGifom jyefvnfajymif;,loifhonf/
- tu,fírsm; print vkyfxm;onfh image wpfckudk scan vkyf,lchJvQif tpuftajymufrsm;
roefYrpif &SdaeEkdifonf/ xkdodkYvkyf,lvQif taumif;qHk;enf;vrf;rSm photoshop wGif yg
0ifonfh Gaussian blur filter udk toHk;cs&efyif jzpf\/ Image udk tenf;i,f 0g;,lvkdufum
t&G,ftpm;udk tenf;i,favQmhcsNyD;rS sharpening filter udk jyeftoHk;csjcif;jzifh tpuf
tajymufrsm;udk z,f&Sm;ypfEkdifonf/
260 WEB DESIGN vufawG Yoifcef;pmrsm;
Photo Archives and Clip-Art
yHkMurf;a&;qGJí image rsm; zefwD;,l&ef rvkdvm;vQif toifhxkwfvkyf a&mif;csvsuf&Sdaom
ready-made photo rsm;? Illustration rsm;ESifh button rsm;udkvnf; oHk;Ekdifygonf/ ,aeYacwf
wGif 0ufbfvkyfief;ü toifhoHk;Ekdif&ef clip-art collection rsm;vnf; tvG,fwul 0,f,l&&Sd
Ekdifygao;onf/
xkdYtwl tcrhJ&,lEdkifaom online resource rsm;vnf; &Sdaeygonf/ okdYaomf tqkdyg
tcrhJ&Ekdifaom collection rsm;onf t&nftaoG;tm;jzifh pdwfwkdif;us jzpfcsifrSjzpfygvdrhfrnf/
atmufazmfjyyg site rsm;wGif *&yfzpfawmfawmfrsm;rsm; tcrhJ &Ekdifygonf/
A+ Art (www.aplusart.com) Icon rsm;? background yHkrsm;? button rsm;? animation
rsm;? Web Clip-Art Links Page (Webclipart. miningco.com/internet/webclipart)
Clip-art-related link aygif; &mcsDí &Sdonf/ tu,fí rdrdonf professional vkyfief;
vkyfaqmifaejyD; xkdufoifhaom toHk;p&dwf &Sdygu atmufyg site rsm;rS aps;EIef;csKdompGm
0,f,l&&SdEkdifonf/
Picture Quest (www.Picturequest.com) Photo Disc, Corbis ESifh tjcm;tjcm;aom
image trsKd;tpm;rsm;tygt0if tqifhjrifh image aygif; wpfodef;ausmf &&SdEkdifonf/
Art Today (www.arttoday.com) toif;0ifyHkpHjzifhjzpfap? tcrhJpepfjzifhjzpfap image
rsm;ESifh Illustration rsm;udk &,lEkdifonf/
Graphics Production Tips
þoifcef;pmwGif 0ufbf*&yfzpfrsm; xkwfvkyf&eftwGuf tajccHwifjycsuf tcsKdUukd wifjyay;chJ
aomfvnf; ESpfaygif;rsm;pGm format aygif; ajrmufjrm;pGmudk toHk;csvsuf &SdaeMuonfh tjcm;
aom format-specific enf;emrsm;udk tcef; 14? 15? 16 wkdYwGif qufvufazmfjyay;ygrnf/
Work in RGB Mode
rdrdwkdYtaejzifh RGB mode twGif; image-editing vkyfief;pOfrsm;ukdvnf; rvGJraoG vkyfudkif
Mu&ayvdrfhrnf/ GIF yHkpHjyKvkyf&eftwGufjzpfap? JPEG yHkpHjyKvkyf&eftwGuf jzpfap? RGB
mode yg0ifaernfjzpf\/ RGB mode qkd&mü grayscale onf non-color image rsm;twGuf
tvGefoifhawmfonf/
JPEG image rsm;onf RGB color image tjzpf wkduf½kduf zdodyf½HkrQom jzpfonf/
GIFs rsm;twGufrl RGB color image rS Indexed Color okdY saving rvkyfrD ajymif;,l&onf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 261
tu,fí rdrdonf yHkxkwfvkyfonhfvkyfief;wGif *&yfzpfzefwD;rIudk tuRrf;0ifxm;oljzpfyg
u CMYK mode wGif vkyfief;tavhtusifh&SdNyD; jzpfaeygvdrhfrnf/ (CMYK mode qkdonfrSm
Cyan, Magenta, Yellow ESifh Black ink wkdYjzifh yHkESdyfjcif; jzpfonf/) okdY&mwGif zufpf 'DZkdif;
vkyfief;wGif tqkdyg ink ESifh CMYK mode wkdYonf rtyfpyfay/
Use Anti-Aliased Text
omreftm;jzifh 0ufbftwGuf tpGrf;jy*&yfzpfrsm; zefwD;Ekdif&eftwGuf rdrdwkdYonf antialiased
text ESifh object rsm;udk toHk;cs&ayvdrfhrnf/
Anti-aliased qkdonfrSm tenf;i,f 0g;wm;wm;yHkpHjzifh EIwfcrf;om; tauG;rsm; wGif&Sd
ta&mifrsm;tMum; tacsmoyf jyKvkyfjcif;jzpf\/ Figure 13-9 wGif jrifawGU&ouhJokdY aliasing
tajcjy effect ESifh anti-aliasing tajcjyyHkpHrsm; &Sdaeygvdrfhrnf/ Anti-aliasing vkyfief;twGuf
on/off tajymif;tvJ vkyf,lEkdifonf/
Anti-aliasing udk toHk;jyK&mwGif tm;enf;csufwpfckrSm rdrd\ image wGif jznhfoGif;aom
ta&mifta&twGufudk xnhfxm;wwfjcif;jzpf\/ File t&G,ftpm;udkvnf; xnhfxm;wwfao;
onf/ Byte tenf;i,f ykdvmwwfaomfvnf; tvJtvS,f vkyf&mwGif tvGefaumif;onf/
Save Your Work
rnfonhf'DZkdif;rsKd; jyKvkyfonhftcgwGifjzpfygap? vkyfaqmifcsufwpfckpD NyD;pD;onfhtcgwdkif;
save vkyf,l&onf/ tu,fí Photoshop wGif vkyfudkifum layer file rsm;tjzpf zefwD;,l&
aom *&yfzpfrsKd;jzpfygu 'Flattened' GIF okdYr[kwf JPEG file rS oD;jcm;pD layered version
jzifh save vkyf&ef ta&;BuD;onf/
Name Files Properly
rdrd\ *&yfzpf file rsm;twGuf vkyfoifhvkyfxkdufaom file extension rsm;jzifh owfowfrSwfrSwf
xm;&Sd&onf/ GIF files \ aemufqufwGJwGif .gif [kvnf;aumif;? JPEG file rsm;twGuf
aemufquftjzpf .jpeg odkYr[kwf .jpg [lí vnf;aumif; xnfhoGif;yg&Sd&rnf/ xkdokdY aemuf
Figure 13-9
262 WEB DESIGN vufawG Yoifcef;pmrsm;
qufwGJoauFw ryg&SdvQif rdrdonf format rSefrSefuefuefjzifh save vkyfxm;aomfvnf;
browser rS &Smray;Ekdifaom taetxm; jzpfoGm;wwfonf/
Consider Other End Use
Low resolution jzifh file rsm; zefwD;rIwGif tm;enf;csufwpfckrSm print xkwf,lygu nhHzsif;ae
jcif;jzpfonf/ omreftm;jzifh acsmarGUvSyaom printing wpfck &,lEkdifa&;twGuf resolution
rSm 300 dpi okdYr[kwf ¤if;xufjrifh&ef vkdtyfygonf/ wpfvufrwGif 72 dots &Sdaom
0ufbf*&yfzpf jzpfyguvnf; yHkESdyfxkwf&mwGif tpuftajymuf tuGufrsm; ygvmwwfonf/
Logo rsm;? okdYr[kwf ta&;ygaom illustration rsm;uhJokdYaom image rsm; xnhfoGif;&ef
vkdtyfygu yxrOD;pGm high resolution image udkom zefwD;,loihfonf/ xkdYaemuf 0ufbfjzifh
oifhavsmfaom t&G,ftpm;udk yHkyGm;,l&onf/
rnfodkYaom tajctaewGifjzpfap vector file tay:wGif logo rsm;udk zefwD;u ydkrdkoifh
avsmfaponf/ þenf;jzifh jyKvkyfxm;jcif;aMumifh t&G,ftpm; ajymif;vJonfhtcg resolution
tajymif;tvJ r&SdapEkdifouhJokdY t&nftaoG; usqif;rIvnf; r&SdEkdifawmhay/
Web Graphics Highlights
Web graphic rsm; zefwD;jcif;ESifh ywfoufí þoifcef;pmwGif t"du rSwfom;p&mrsm;tm;
jyKpk,lrnfqkdygu-
- ta&mifjym;pepfESifh hard edge rsm;yg&Sdaom image rsm;udk GIF format jzifh save
vkyf&ef/
- "mwfyHkt&nftaoG;&Sd image rsm;udk JPEG format jzifh save vkyf&ef/
- Flat graphic ESifh photographic ypönf;rsm; aygif;pyf zefwD;xm;aom image rsm;twGuf
taumif;qHk; jzpfaponfh GIF format jzifh save vkyf&rnf/
- Web graphic rsm;onf low-resolution bitmapped image rsm;jzpf&rnf/
- Web graphic rsm;udk RGB color mode wGifom zefwD;apEkdifvdrfhrnf/ CMYK mode
wGif rzefwD;Ekdifyg/
- Web graphic rsm;twGuf pixel jzifh oHk;EIef; azmfjyrSom jynhfpHkaprnf/
- yHkMurf;rsm; scan vkyfcsufrsm;? 'pf*spfw,fuifr&mjzifh "mwfyHk½kdufcsufrsm;? odkYr[kwf
clip-art library wpfckckrS image rsm;udk zefwD;,lEkdifaponf/
- Web graphic rsm; zefwD;,ljcif;twGuf tausmfMum;qHk; tool rsm;rSm Adobe Photoshop
(Image Ready tygt0if) ESifh Macromedia Fireworks wkdY jzpfonf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 263
Creating GIFs
tcef; 14
Web Page rsm; jyKvkyfawmhrnfqkdygu GIFs jyKvkyfa&;tay: tajcjyKMu&onf/ Basic
GIFs rsm; wnfaqmufrIwkdif;onf ½kd;½kd;&Sif;&Sif;yHkpHrsm; jzpfaomfvnf; professional tqifh
GIFs rsm;jzpfvm&eftwGufrl transparency twGufvnf;aumif;? optimization twGufvnf;
aumif; xnhfoGif; pOf;pm;vm&onfhtjyif Web palette rsm;udkvnf; *½kjyKvkyfaqmif,lMu&
onf/ okdYaomf tqkdygudpö&yfrsm;twGuf web-ready graphic tool ½kd;½kd;rsm;jzifhyif ajz&Sif;,l
Ekdifygonf/ GIFs rsm; jyKvkyfjcif; vkyfief; rpwifrD GIFs ESifh ywfoufí odxm;oifhorQudk
yxrOD;pGm wifjy&rnf jzpf\/
GIFs ESifh ywfoufonfh taMumif;t&mrsm;
,aeY web site rsm;wGif jrifawGUae&onfh *&yfzpftrsm;pkonf GIF (Graphic Interchange
Format) file rsm;omjzpfonf/ ¤if; web twGuf oD;jcm;py,f&S,f zefwD; 'DZkdif;jyKxm;onfh
format wpfck r[kwfaomfjim;vnf; ¤if;onf platform rsKd;pHktwGuf 0ifqhHapEkdifNyD; file
t&G,ftpm;udk ao;i,foGm;apum vkdovdk jc,frIef;Ekdif&eftwGuf csOf;uyf&vG,fulaom
vkyfenf;vkyf[efyHkpH jzpfonf/ ,aeYtxd rnfonfhtoHk;cs version ESifhjzpfap? rnfonfh
*&yfzpfqkdif&m browser rsm;ESifhjzpfap wGJzuftoHk;jyKEkdifaprnfh wpfckwnf;aom format [k
vnf; qkdEkdifonf/ wpfenf;tm;jzifh rdrdjyKpkwifjyaom *&yfzpfrsm;udk tifwmeufwGif vlwkdif;
jrifawGUapvkdaomqE´&Sdygu GIF udkom oHk;&rnfjzpf\/
Icon rsm;? text rsm; a&maESmyg0ifrnfh *&yfzpfrsm;? wpfaMumif;qGJyef;csDrsm;? trSwfwHqdyf
Logo uhJokdYaom flat area yg ta&mifjc,fyHk&dyfrsm;twGuf toHk;jyK&ef taumif;qHk; file
format jzpfonf/ rdrd\ image rsm;tm; GIF wpfcktaejzifh odrf;qnf;xm;Ekdifaomfjim;vnf;
"mwfyHkt&nftaoG;rsKd; texture ajrmufjrm;pGm yg0ifaeaom image rsm;ukdrl pdwfwkdif;us
&Ekdifavmufrnf r[kwfay/ (tqkdygudpöESifh ywfoufí tqkdyg image trsKd;tpm;rsKd; odrf;
qnf;rItwGuf taumif;qHk; file format rSm JPEGs yifjzpfonf/)
264 WEB DESIGN vufawG Yoifcef;pmrsm;
Figure 14-1 wGif erlem image rsm;udk GIF format jzifh oifhavsmfaom yHkpHrsm;tjzpf
jrifawGU&Ekdifonf/
hard edge rsm;EiS h f flat color rsm;
t"ud yg0iaf eon hf *&yzf pyf &kH yd rf sm;twGuf
GIF format onf tvGefaumif;onf/
8-Bit, Indexed Color
GIFs wkdif;onf color image rsm;udk nTef;zGJU&mü tjrifhqHk; 8-bit color information wpfckjzifh
om xnhfoGif;&ef jzpfonf/
nTef;zGJUonf[laom t"dyÜm,frSm palette ac: ta&mifZ,m;wpfckwGif okdrDS;xm;aom
ta&mifrsm;rS rdrdtoHk;jyKvdkaom ta&mifudk image twGuf a&G;cs,f,ljcif;ukd qdkvdkonf/
tqkdygZ,m;wGif ta&mifeHygwftnTef;rStp Figure 14-2 gallery wGif jrifawGU&ovkd image
twGif;rS ta&mifrsm;udk azmfjyay;onf/ *&yfzpfwpfckudk GIF wpfcktjzpf rodrf;qnf;rD
Indexed color image wpcf tk wGi;f & dSta&mirf sm;ukd
ta&miZf ,m;wpcf jkzi hf neT ;fqjdkci;f ? ord ;fqn;f jci;f
jyKvyk xf m;on/f tqydk g ta&miZf ,m;u kd palette [k
ac:on/f tjriqhf ;kH 256 color (8-bit) omygon/f
U.F.O aMumfjim *&yfzpftwGuf ta&mifZ,m;
to;kH jyKyukH kd ½jIriEf idk of n/f
Figure 14-1
Figure 14-2
WEB DESIGN vuaf wGoY icf e;f pmrsm; 265
rdrdonf RGB image rS indexed color mode okdY ajymif;,l&ef vkdonf/ (tcsKdUaom tool
rsm;onf xkdudpötwGuf tvkdtavsmuf aqmif&Gufay;onf/)
8-bit color \ t"dyÜm,frSm tjrifhqHk;tqifhtjzpf 256 colors om yg0ifEkdifrnf jzpfonf/
8-bit twGuf tcsuftvufqkdif&m tjrifhqHk;tqifhudk (28 = 256) [lívnf; jyqkdEkdifonf/
GIFs rsm;onf ydkíedrfhaom bit depth rsm;vnf; yg&Sdwwfonf/ þae&mwGif ta&mif
enf;enf;oHk;av file t&G,ftpm;ao;av jzpfonf/
GIF udk zefwD;onfhtcgwdkif; ta&mifZ,m;jzifh wkduf½kdufoHk;Ekdif&ef wGJygvmrnfomjzpf\/
GIF Compression
GIF compression obm0udk avhvmonfhtcg csufcsif; oabmaygufEkdifygvdrfhrnf/ yxr
OD;pGm avhvm&mwGif ¤if;\ lossless [laom a0g[m&\ t"dyÜm,fonf image tm; zdESdyfokdrSD;
&eftvkdYiSm rnfonfh image information rS vGwfoGm;apjcif;r&Sd[k azmfjyaMumif; em;vnfxm;
Ekdifonf/ 'kwd,tqifhavhvm&mwGif image zdodyfrItm; twef;vkduf azmfjyxm;onf/ LZW
ac: compress scheme wpfcktm; toHk;csxm;yHkudk awGU&SdEkdifonf/ ta&mifwpfckwnf;twGif;
rSmyif pixel rsm; azmfjyxm;onf/ twef;vkdufyHkudk xdvdkufonfhtcg ¤if;rS data azmfjycsuf
wpfcktjzpf yHkoGif;í zdodyfvkdufEkdifonf/ Figure 14-3 wGif jrifawGUonfhtwkdif; texture yg
aom yHk&dyfrsm;xuf flat color yHk&dyfrsm;u ydkí odyfonf;rIjyKEkdifaMumif; avhvm,lEkdifygvdrfhrnf/
GIF compression schemes on f twe;f ypkH rH sm;twGi;f pixel rsm;ukd
oyd xf m;jci;f jzpof n/f ta&miwf pcf wk n;f rmS &odS n hf pixels rsm;\ string udk
xvd udk af omtcg owof wcf wcf w fta&miwf pcf uk kd&,El idk of n/f
ta&miftqifhqifhjzifh &Sdaeaom yHk&dyfwpfck&Sd? twef;wpfckwGif pixel
wkdif;twGuf odrf;qnf;rnfh owif;tajctaersm; xm;&Sdonf/ tqkdyg
owif;tajctaewGif azmfjycsuf description &Snfvsm;av file t&G,ftpm;
BuD;av jzpfonf/
A simple demonstration of GIF compression
description= "14 teal"
description= "1 teal", "1 light teal", " 2 medium teal", etc ...
tcsKdUaom GIFs rsm;twGuf xkdokdYaom pdwf0ifpm;p&m vkyfcsufrsm;udkvnf; jrifMu&rnf/
yHk&dyf\tajctaeudk a'gifvkduftajctaetwGuf rlvtwkdif;xm;NyD; tvsm;vkduf tajctae\
Figure 14-3
266 WEB DESIGN vufawG Yoifcef;pmrsm;
stripe udk csKHUvkdufonfESifh image \ t&G,ftpm; tenf;i,f ydki,foGm;ayrnf/ xkdYtwl
tvsm;vudk tf m; ral oomG ;í a'givf ukd uf kd upm;Munvhf Qivf n;f þoYdkawUG &rn/f tqydk gupd ö
twGufvmrnfh optimizing GIFs u@wGif tao;pdwfazmfjyay;ygrnf/
Transparency
GIFs ESifh ywfoufí pwkdiftusqHk;vkyfcsufwpfckrS rdrdtaejzifh background image wpfckudk
jrifom&ef yHkazmf,lEkdifjcif;jzpfonf/ GIFs tygt0if rnfonfh bitmap trsKd;tpm; *&yfzpfrqdk
av;axmifhusus obm0jzifh &Sdaeonf/ Figure 14 - 4 wGif azmfjyxm;ouhJokdY ydkípdwf0ifpm;
p&m aumif;vmaprnfh toGiftjyifrsKd;jzifh zefwD;jyoEkdifonf/ tao;pdwfudk Adding
Transparancy u@wGif azmfjyay;ygrnf/
Transparency jzi hf y&kH yd wf pcf ak y:wGif
background *&yzf pwf pcf uk kd wxJG nfh
,El idk of n/f txuEf iS ahf tmu f uGJjym;pGm
ay:xGufvmrnf/
Interlacing
Image download vkyf,l&mwGif twGJvkdufvufurf;ay;rI jyKvkyfay;onfh txl; jyKvkyfcsuf
rsKd;udk interlacing [k ac:onf/ vufurf;rIrsm;wGif vufurf;rIrjyKrDyHkrsm;xuf vufurf;rIjyK
ay;onfhyHkrsm;u ykdrkdxifay:apaom tajctaersKd;jzifh GIF image wpfcktjzpf browser
window yDyDjyifjyif wifjyonfhtcsdeftxd &Sdaernf/ erlemtjzpf Figure 14-5 wGif jrifawGUEkdif
Interlace vkyfxm;aom
GIFs rsm;on f twvJG ukd f
jzwfwifrIudkqifhum
qiuhf m aqmi&f uG f
ay;on/f csay;onthf cg
jrifawGU &aom
tajctaeonf rcsay;rD
jrif&aom image xuf
Munfvif jywfom;onf/
Figure 14-4
Figure 14-5
WEB DESIGN vuaf wGoY icf e;f pmrsm; 267
onf/ xkdokdY interlacing txl;jyKcsuf ryg0ifygu tcsKdUaom browser rsm;onf image
wpfckudk download vkyf&mwGif vHk;vHk;vsm;vsm; azmfjyEkdifrSom wpfcgwnf; cif;usif;jyay;
ojzifh rnfonhft&mrQ rjrif&onfh taetxm;jzifh apmihfae&ayvdrfhrnf/ tcsKdUrSmrl image
udk twef;vdkuf wpfqifhcsif; cif;jyay;onfh yHkpHrsKd;vnf; &Sdaeonf/
tvGefjrefqefaom tifwmeufcsdwfqufrI toHk;jyKxm;olrsm;taejzifh tqkdyg interlacing
ESifhywfoufonfh obm0udk odjrifEkdifrnf r[kwfay/ okdYaomfjim;vnf; aES;auG;aom
modem toHk;cs csdwfqufrIrsm;wGifrl interlacing tajctae tm;vHk;udk odjrifEkdifonf/
tu,fí image map wpfcktjzpf toHk;jyKxm;onfh yHk&dyfjzpfvQif toHk;jyKoltaejzifh image
wpfpdwfwpfa'otay: click vkyfay;&if; jrefjrefyHkay:vmap&ef aqmif&Guf,lEkdifonf/
Interlacing vkyfjcif; rvkyfjcif;onf rdrdtay: rlwnfonf/ tMurf;zsif; rSwf,loifhonf
rSm image ao;i,fygu interlace vkyf&ef rvdkay/ Imagemap rsm;uhJokdY BuD;rm;aom image
rsm;twGufrl interlace vkyf&ef vdktyfygonf/
Animation
GIF file format twGif; tjcm;wnfaqmufrI toGiftjyifrSm Figure 14 - 6 wGif azmfjyxm;ouhJ
okdY ½kd;&Sif;aom animation cif;usif;jyKvkyfEkdifjcif; jzpfonf/ rdrd animation \ frame
tm;vHk;udk oD;jcm;pD zefwD;vkdufonfESifh single animated GIF wpfcktaejzifh tvG,fwul
odrf;qnf;&ef tools rsm; &Sdaeonf/ tao;pdwfvIyf&Sm;rI GIFs udpörsm;udk tcef; 16 wGif
tao;pdwf qufvufwifjyay;ygrnf/
txuyf g ½;dk &iS ;f aom vyI &f mS ;rtI qiqhf i hf frame rsm; tm;v;kHonf
GIF file wpcf tk wGi;f yg0ixf m;&odS n/f
Creating a Simple GIF, Step by Step
GIFs jzifh rnfonfht&mrsm; aqmif&GufEkdifrnfudk od&SdNyD;aemuf tvGeftajccHusaom Oyrmjzifh
vkyfaqmifjyoay;rnf jzpf\/ okdYaomf tvStywefqmqifxm;aom transparency ESifh
optimization vkyfief;pOfrsm;udkrl aemufydkif;rS jrifawGUEkdifygvdrfhrnf/
Web onf ay:jyLvmjzpfvmonfESifhtrQ GIF *&yfzpfqkdif&m aqmhzf0Jrsm; awmif;qkdrIonf
vnf; wufvmchJonf/ *&yfzpfy½kd*&rfwkdif;wGif tajccHusvSaom GIF-saving vkyfaqmifcsuf
Figure 14-6
268 WEB DESIGN vufawG Yoifcef;pmrsm;
rsm; yg&Sdonf/ þoifcef;pmwGif tukefvHk; wifjy&efawmh rjzpfEkdifacs/ okdYtwGuf Adobe
Photoshop okdYr[kwf Macromedia Fireworks odkYr[kwf JASC Paint Shop Pro wkdYjzifh
jyKvkyfyHkudk erlemtjzpf wifjyay;Ekdifygonf/
rdrdtoHk;jyKaom tool rsm;ESifh roufqkdifaomfvnf; GIF wpfcktaejzifh image wpfckudk
odrf;qnf;Ekdif&ef tajccHvkyfief;pOfrsm;rSm atmufygtwkdif; jzpfonf/
1/ RGB color mode wGif Low-resolution (72 dpi) image jzifh pwifyg/
2/ RGB mode twGif;&SdaeqJrSmyif resizing okdYr[kwf cropping okdYr[kwf color correction
wkdYuhJokdYaom wnf;jzwfrIvkyfief;rsm;udk tNyD;vkyfxm;yg/
1. File uzkd iG íhf rvl image tm; vtdk yof v dkwn;f jzw,f yl g/
2. rrd \d imageu kdGIF jzi hford ;fqn;f &e ftqiof i hf jzpaf omtcg 'save
for web' [al om neT Mfum;csuuf kd file menu r S a&;G cs,,f vl udk yf g/
3. Web dialog box twuG ford ;fqn;f r Ivyk &f mü yxrO;D pmG menuukd
qGJcsNy;D GIFuakd &;G yg? xaYdk emu f palettewpcf uk kd a&;G cs,Nfy;D ta&mif
eyH gwjfy number of colors uokd mG ;yg/ ditheringtwuG f jznphf uG Nfy;D
interlace vyk vf odk n?f rvodk nuf kd jyyg/
Dialog boxon f transparency setting twuG vf n;f o;kH Eidk af o;
onf/
4. tm;v;kHvyk Nfy;Donthf cg OK u kd click
vkyfum file trnfukd ay;vdkufyg
¤i;fwiG f aemuqf uwf JGpmv;kHtjzp f .gif
ygvmygvrd rhf n/f
Saving a GIF with the 'Save For Web' feature in Photoshop
Figure 14-7
WEB DESIGN vuaf wGoY icf e;f pmrsm; 269
3/ Image onf rdrdvkdtyfaomtaetxm;twkdif; taotcsm&SdaejyDjzpfaomtcg index
color okdYajymif;vdkufyg/ tu,fí rdrdonf web graphic tool wpfckudk toHk;jyKaeygvQif
tqdkyg image udk format option rS GIF udk a&G;cs,fvkdufonfESifh tvkdtavsmuf qkd
ovdk index color ajymif;NyD; jzpfoGm;ygvdrfhrnf/ta&miftavQmhtwif;udpö aqmif&Guf
onfhtcg palette udk ac:í vkyfaqmif&rnf/ Color Palette \ sidebar wGif palette
option trsKd;rsKd;udk azmfjyxm;aMumif; awGUEkdifonf/
4/ vkdtyfonfhcsdefn§drIrsm; jyKvkyfjyD;onfESifh save vkyfum GIF jzifh export vkyf,l&onf/
wpfckowdjyK&rnfrSm taMumif;aMumif;aMumifh aemufydkif;wGif tajymif;tvJ vkyfvkdvQif
rlv RGB image udk aocsmpGm odrf;xm;&efyifjzpfonf/ RGB color mode wGifom wnf;jzwf
rIvkyfief;t00 vkyfoifhonf/
In Adobe Photoshop
Photoshop twGif; GIF wpfck zefwD;&ef trSefwu,ftm;jzifh enf;vrf;tcsKdU &Sdaeygonf/
tu,fí version 5.5 ESifhtxufqkdygu Figure 14-7 wGif azmfjyxm;ouhJodkY 'save for
web' [lonfh feature udk toHk;jyKjcif;jzifh tm;omcsuftcGifhtvrf;rsm;pGm &&SdEkdifonf/ tcsdKY
Version rsm;wGif 'Save As' jzifh ½kd;&Sif;pGm jyKvkyfEkdifonfudk Figure 14-8a ESifh 14-8b wdkUwGif
awGUjrifEkdifonf/
file uzkd Giíhf RGB mode
twGi;f &adS epO f vtkd yof nhf
wn;f jzwrf I reS of rQu kd jyKvyk yf g/
Mode u kd a&G;cs,&f i;f rrd d image tm;
indexed color tjzp f ajymi;fvudk yf g/
Indexed color dialog box twGif;
t"ud q;kH jzwaf &G;cs,rf tI 00u kd jyKvyk &f e f vodk n/f
(u) number of colors (bit depth) (c)
dither jyKvyk &f e fvodk n f rvodk n f (*) rrd 'd ZD idk ;f
Gif Web-save color rsm; to;kH csxm;ygu
preserv exact colors u kd a&G;cs,,f yl g/
þtqiafh &muaf om f rrd td aejzi hf save as orYdk [wk f Export wpcf ck uk kd to;kH csEidk of n/f
Figure 14-8a



270 WEB DESIGN vufawG Yoifcef;pmrsm;
Save as
File menu rS 'Save As' a&G;cs,yf g/ Dialog box twiG ;f r S menu u kdqcJG svudk Nfy;D 'compuserve GIF' ukd
a&;G cs,yf g/ File trn\f aemuwf iG f .gif yg& dS r& dS *½pk ukd yf g/ Interlace vyk vf rdk I &rdS & dS ajzyg/
Export
File menu r S Export uakd &;G Ny;D GIF 89a ooYdk mG ;yg/ Dialog box r S rrd d image twuG fta&mijfyKp&k e ftciG hf
tvr;f ay;ygvrd rhf n/f Ny;DvQi f interface vyk &f euf pd Eö iS hf trnaf y;jci;f ? ord ;fqn;f jci;f rsm; aqmi&f Gu&f rn/f
In Macromedia Fireworks 3
Macromedia Fireworks onf web graphic twGuf yHkpHjyKxm;jcif;oufouf jzpfaom
aMumifh optimized jyKvkyf&eftwGuf tool rsm;udk awGUjrif&ygvdrfhrnf/ wpfenf;tm;jzifh highquality
GIFs rsm; &&SdEkdifonf/ Figure 14-9 wGif jrifawGU&ouhJokdY Compression rate ydkrdk
aumif;vm&ef vkyfcsufrsm;pGm ay;Ekdifonf/
In JASC Paint Shop Pro 6
Photoshop twkdif; Paint Shop Pro twGif; vG,fulpGm GIFs wpfckudk zefwD;,lEkdifonf/
Figure 14-10 wGif azmfjyxm;ouhJokdY GIF optimization tool topfwpfrsKd;udk version 6
wGif rdwfqufay;xm;onf/
Adding Transparency
GIF format \ tjcm;toGiftjyifrSm image \ tpdwftydkif;rsm;udk xdk;azmuf jrif&aomyHkpHrsKd;
jzifh pDpOfEkdifjcif;yif jzpfonf/ rnfodkYyifjzpfjzpf xdk;azmufjrif&aomyHkpHjzifh jyxm;onfh {&d,m\
aemufwGif &SdaeorQudkvnf; jyay;ygvdrfhrnf/
Figure 14-8b
WEB DESIGN vuaf wGoY icf e;f pmrsm; 271
File uzdk Giíhf vtdk yof n hf wn;f jzwrf I
t00u kdvyk yf g/
rdrd\ setting udpörsm;
NyD;pD;oGm;aom tcg file menu rS
export u kd a&G;cs,Nfy;D GIF file
name wpcf uk kd aemuqf uwf JG .gif
pmv;kH xnofh Gi;f &i;f ay;,&l rn/f
Figure 14-9


GIF format u kd a&G;cs,&f e f rrd \d work-space
wiG f optimize palette uokd ;kH Eidk of n/f
(u) Palette wpcf uk kd a&G; (c) number of
colors uckd sed f (*) dittering upd aö qmi&f Guf
(C) EpS zf u ftay: axmi hf arrow r Smenu
uqkd cJG sum image interlace u kd aqmi&f uG yf g/
(i) Preview window twGif; rdrd
vyk uf ikd fcsed nf cd§ surf sm;\ &v'uf kd
Munhf½Ippfaq;Ekdifonf/
272 WEB DESIGN vufawG Yoifcef;pmrsm;
File uzkd Giíhf RGB mode twiG ;f
vkdtyfonfh wnf;jzwfrIudpöt00udk
aqmi&f Guyf g/ GIF file wpcf tk aejzihf
ord ;fqn;f Eidk of n hf tqiohf Ydk a&mu&f ydS gu
File uokd mG ;í? Save As jzi hford ;f yg/
Save As dialog box wiG f file trnuf kd
½udk of Gi;f &rn/f File trn\f
aemuqf uwf JGtjri hf aemuqf ;kH r S .gif
xnfhoGif;ay;&rnf/
Options cvwk uf kd click vyk yf g/ Save Options dialog box wiG f
GIF version a&G;cs,,f El ikd of n/f (89a on f transparency EiS hf
animation twGu f yyHh ;kd rjIyKay;on/f ) Interlace v dk rvkd
a&G;cs,,f yl g/ jy;DvQi f OK uk d click vyk íf GIF tjzp f ord ;f Eidk of nf
odkYr[kwf qufvuf aqmif&Gufvkdao;vQif option rsm;
xyrf &H &adS &;twuG f Run Optimizer u kd click vyk yf g/
GIF optimizer \ color panel u kd to;kH csí bit-depth orYdk [wk f
dither yrmP orYdk [wk f palette wjYdkzi hf image wvYdk kdquvf uf
aqmi&f GuEf idk of n/f Method of color selection qodk nrf mS
palette u kd &nnf eT ;f jci;f jzpof n/f Indexed color image wpcf jkzihf
pcyJh gu Existing u kdo;kH yg/ Image twuG fweb palette ukd
to;kH csEidk &f e f Standard/Web-safe u dko;kH yg/ Optimized Medium
Cut adaptine palette wpcf Ek iS h f tvm;oPm² ewf pl Gm ta&mi f tcsKuUd kd
csay;onf/ rdrd\ rlv image onf ta&mifenf;ygu optimized
Octree uokd ;kH yg/
rrd \d GIF wiG f wppf wd wf paf 'orQ Transparent vyk vf ydk gu
Transparent {&,d mav;jzi hf pwivf ydk g u 'Existing image
or layer transparency' uakd &G;yg/ ta&miwf pcf ck uk kd
tom;ay;&i;f transparent vyk vf ydk gu 'Areas that match
this color' u kd to;kH csyg/
Figure 14-10




WEB DESIGN vuaf wGoY icf e;f pmrsm; 273
vkyfudkif&efenf;vrf;rSm ta&mifZ,m;twGif;&Sd taygufusOf;uav;wpfckrS "transparent"
taejzifh 'DZdkif;vkyfxm;onfudk toHk;jyK&efyifjzpfonf/ xdk;azmuf jrif&onfhoP²mef
vkyfrnfhyHk&dyfudk ay;vkdaomta&miftm; ½dk;&Sif;pGm a&G;cs,fNyD; tool udk udkifwG,f,l&onf/
rnfodkYyifjzpfap owdjyK&eftcsufrSm ta&mifwpfckudk a&G;cs,fvdkufaomtcg a&G;cs,fvkdufaom
ta&mifwkdif;jzifh csufcsif;xif[yfvmvdrfhrnf/tqdkygudpöESifhywfoufí aemufvmrnfhtcef;
15 wGif ]]rvkdvm;tyfonfhxdk;azmufjrif&rIrsm; umuG,fjcif;}} acgif;pOfjzifh tao;pdwf azmfjy
ay;ygOD;rnf/
"Transparency" udk xnfhoGif;&mwGif Photoshop odkYr[kwf Fireworks jzifh Layer
ac: tvTmvkdufwifxm;onfh image t&if;tjrpfay:wGifjzpfap? pre-existing GIF file uJhodkY
aom flat format ay:wGifjzpfap t&nftaoG;wnf&SdrIudk jrifawGYEkdifrnfjzpfí tqkdygtaMumif;
&if;ESpfcsufESifh qufpyfyHktaMumif;udk avhvm,l&rnf jzpf\/
Preserving Transparency in Layered Images
tu,fí layered image wpfckudkpwifaqmif&Gufawmhrnfqkdygu rdrdwGif tqdkyg
xkd;azmufjrif&onfhoP²mef jyKvkyfrnfhae&m twdtusxm;&SdNyD; jzpfae&ygrnf/ (Photoshop
wGifjzpfap? Fireworks wGifjzpfap no-brainer jzpfjcif;aMumifh cJa&mifESifh tjzLa&mifuGufwkdYjzifh
jyoxm;aom ae&mwpfckwGif jyKvkyf&ef rdrdu pDpOf&onf/)
xkd tool ESpfckvHk;wGif "Save for Web" (Photoshop) odkYr[kwf "Optimize" (Fireworks)
palette rS Transparency udk a&G;cs,f,laomtcg Figure 14-11 wGif jrifawGY&onfh
twkdif; aemufqHk;&Sdaeonf GIF xJü xdk;azmufjrif&onfh yHkpHjyKvkyfrnfhae&mtwGif;rS *&yfzpf
tvTmtwkdif; wnf&Sdaeygrnf/ Tool ESpfckvHk;onf "Matte" color wpfckudk tao;pdwf
azmfjycGifh jyKxm;\/ xkd color jzifh transparent {&d,m&Sd rdrdtvkd&Sdaom yHk&dyfudk jyKvkyfay;yg
vdrhfrnf/ (tu,fí GIF transparency rS a&G;cs,fxm;NyD; rjzpfygu xdkodkYjyKvkyf&ef qdkjcif;
jzpfonf/)
tvmT vukd xf ywf i,f rl n hf document wiG f
transparency jyKvkyfyHk
Photoshop 5.5 wGif
"Save for Web" u kd file
menu rS qGJcsía&G;cs,fyg/
box u kd ppaf q; í
rdrdjyKvkyfaom transparency
u kd owrf wS af e&m
wGif csxm;í save vkyfyg/
Fireworks 3 wGif Transparency
u kd dropdown menu rS
Optimize palette u kd to;kH csí
"Index Transparency" ukd
a&G;cs,fvkyfudkifyg/
Figure 14-11
274 WEB DESIGN vufawG Yoifcef;pmrsm;
Index Versus Alpha Transparency
Image wpfckwGif transparency xnfhoGif;jcif;ESifhywfoufí t½dk;ajzmifhqHk; enf;
vrf;rSm "index transparency" udk toHk;csvkyfudkifjcif;yif jzpfonf/ ¤if;enf;vrf;\
yHkpHwGif color table ay:rS pixel wpfckudk ae&mcsxm;í transparent jzpfay:aponf/
Eyedropper tool wpfckjzifh ta&mifwpfckudk a&G;cs,fNyD;vkyf&onf/
Photoshop rS "Alpha transparency" trnf&Sd acwfrDaomenf;pepfjzifh yHhydk;í
vkyfaqmifcGifhay;xm;onf/ Document \ oD;jcm; channel (alpha channel) wGif
GIF wpfck\ transparent {&d,mtwGuf yHkcsZ,m;tjzpf odrf;qnf;apaom enf;vrf;
jzpfonf/ Alpha channel twGif;&Sd pixel teufa&mifrsm;jzifh jyoay;aom {&d,mrsm;wGif
¤if;wkdY\ pixel color rsm;ESifhjyoay;\/ teufa&mifay:wGif tjzLa&mif pixel rsm;jzihf
xm;odkjyKvkyf,lEkdifonf/
Photoshop \ channel palette twGif;&Sd alpha channel udk wnf;jzwf,ljcif;jzifh
vkyfudkifaqmif&Gufaeaom image twGif; transparency ta&mifwifjc,frIudk vkyfEkdif
onf/ atmufwGif jyoxm;aomyHkpHtwdkif; image twGif;rS rlydkifta&mifrsm;ESifh rywf
oufapay/
Alpha channel wpfckESifh uRrf;usifpGm wdkuf½dkufaqmif&Guf jyKjyifxm;aom transparency
onf acwfrDvSí tcsKdUuRrf;usifaom 'DZkdifemrsm;yif toHk;rjyKMuao;ay/
odkYtwGuf index transparency ESifh ywfoufí tajccHtqifhavmufom ,cktcef;wGif
wifjyjcif;jzpf\/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 275
Adding Transparency to a flattened Image
Photoshop ESifh Fireworks twGif; transparent vkyfief;rsm;udk vuf&Sd file wpfckwGif jyKvkyf
olwkdYtwGuf tm;&p&mtcsufwpfcsufrSm flattened image pwif vkyfudkifxm;&SdEkdifjcif; owif;
yifjzpfonf/ tm;r&p&mowif;rSm rlv image \ t&nftaoG; nHhzsif;aeygu tqdkygvkyfief;
pOftwGuf jyóemjzpfEdkifjcif;yif jzpf\/ tu,fí image onf aemufcHta&mifudk flattened
vkyfxm;cJhvQif transparent vkyfxm;NyD; yHk&dyftm; ppfaq;Munfh½IpOf yHk&dyf\ab;ywfvnf
wGif trsKd;rsKd;aom color pixel rsm;\ uvem;rsm;jzifh &Sdaewwfonf/ tqkdyg tajctaeudk
"halo" wpfck[k ac:qdkonf/ aemufvmrnfhtcef;wGif xdkudpöudk tao;pdwf azmfjy&Sif;vif;
jyoay;ygrnf/
wpfcsdefwnf;rSmyif Web page \ aemufcHyHkpHjzifh vkdufzufnDaprnfh GIF \ ta&mifjynfh
aemufcHwGif taumif;qHk;jzpfapEdkifaom flattened image wpfckodkY transparency xnfhMunfh
MuygpdkY/
rdrd page \ aemufcHtpdrf;a&mifjzifh vdkufavsmnDaxG jzpfaprnfh tpdrf;a&mif jznfhwif;
xm;onfh GIF file wpfck &&Sdxm;jyD[k rSwf,lvdkufonf/ odkYaomf ,ckwpfzef tEkpdwfusus
tkwf<uyfyHkpHwpfckodkY tpdrf;a&mifjynfh aemufcHBuD;tm; ajymif;vdkufum <u<u&G&Gav;zefwD;&ef
qHk;jzwfjyefygonf/ xkdtcg Figure 14-12 yHktwkdif; rlvzefwD;xm;aom pattern ay:wGif
av;axmifhyHkoP²mef tpdrf;a&mifuGufBuD; ½kwfw&uf <uwufvmygvdrhfrnf/
flat GIF u kd tay:q;kHwGiwf ixf m;í aemucf EH iS vhf udk fzurf npD Gm
aw&UG onthf cg ¤i;fu kd flat green area rsm;jzifh
ywkH Gijfyoonthf wikd ;f x;kd azmujfriEf idk af paom ypkH jHzihf
jyKjyif,lEkdifonf/
Figure 14-12
276 WEB DESIGN vufawG Yoifcef;pmrsm;
In Adobe Photoshop 4 (or higher)
Solid pixel color rsm;udk Photoshop wGif transparent odkYajymif;&ef wpfckwnf;aom enf;
vrf;rSm Export GIF 89a Export vkyfaqmifcsufjzifh Figure 14-13 yHkpHtwkdif; toHk;cs,lEkdifonf/
Transparent pixel ygaom (Figure 14-11) rlv image udk "Save for web" jzifh vkyf
aqmif&ef vdktyfonf/ "Save for web" option udk tusKd;&SdpGm toHk;csvdkvQif rdrdtaejzifh
flattened image udk document topfwpfcktjzpf rdwåLzefwD;NyD; Magic Wand udk toHk;cs
jcif;jzifh pixel rsm;udk select vkyfum delete vkyf,lvkduf&onf/ xkdtcg rdrd image onf
transparent pixel rsm;ESifhtwl toihf&SdoGm;vdrhfrnf/
Image uzkd iG íhf indexed color
tqirhf &vdS Qi f indexed color
jzpaf tmi f ajymi;f,yl g/ xaYkd emuf
Export GIF 89a Export ukd
file menu wiG f csa&;Gvudk yf g/
Color transparent u kdPhotoshop to;kH csí vyk uf ikd yf kH
rrd vd tdk yaf om ta&mi f a&G;cs,rf I twGu f eyedropper ukd
to;kH cs a&G;,yl g/ a&G;cs,rf jIyKpO f Shift cvwk uf kd EydS xf m;Ny;D
transparency twGuf multiple color rsm;tm; a&G;cs,fyg/
Transparency Index Color EiS hf rrd ,d xl m;aom
ta&mirf sm;&odS n hf pixels rsm;on f click vyk vf udk of nEf iS hf tqijhfynohf mG ;on/f
rnof n hf image {&,d mtm; transparent vyk vf odk nuf kd neT jfyay;yg/ ¤i;fuvkd n;f
a&G;cs,xf m;on hf ypkH tH widk ;f jznahf y;ygvrd rhf n/f
Figure 14-13


WEB DESIGN vuaf wGoY icf e;f pmrsm; 277
In Macromedia Fireworks 3
Fireworks ü Optimize palette udk toHk;csí Figure 14-14 wGif jrifawGY&onfhtwkdif;
flattened graphic transparent wpfckudk vkyf,lEkdifonf/
yxrq;kH vyk uf idk rf n hf graphic ypkH uH dzk Giyhf g/ Transparency drop
down menu r S Index Transparency u kd a&G;í Optimize palette ukd
to;kH jyKyg/
"Set Transparency" eyedropper tool ukd
o;kH í rrd d xk;d azmujfrivf dak om ta&miaf &G;
cs,rf uI kd &,yl g/
tyakd qmi;f color
transparent jyKvkyf&ef "Add to
Transparency" eyedropper
uokd ;kH yg/ tqykd g transparent
color u dk x;dk azmurf jriaf p&ef
xyfrH ajymif;,l&mwGif "Subtract
from Transparency "
eyedropper udkoHk;yg/
tm;v;kH Ny;D p;DoGm;aomtcg tqydk g graphic tm;
(File→ Export) tjyiof Ykd qxJG wk ,f yl g/
4
Fireworks wiG f flat graphic wpcf uk kd transparency xnohf Gi;f ykH
Figure 14-14




278 WEB DESIGN vufawG Yoifcef;pmrsm;
Avoid Halos
Transparent graphic wpfckudkMunfhvkdufwkdif; uvem;EIwfcrf;rsm;wGif rnDrnm ta&mifzGmrI
rsm; jrifawGY&wwfonf/ ¤if;udk halo [kac:qkd\/ odkYaomf ¤if;wdkYudk azsmufzsufypf&efrSm
vG,fulygonf/ Web graphic tool udk toHk;csjcif;jzifhyif vkyfudkifEkdifonf/
Halo rsm;onf aliased edges ac: EIwfcrf;tm; udk,fpm;jyKrI txufESifh atmufcHrsm;
vkaejcif;aMumifhjzpfonf/ Figure 14-15 wGif jrifawGY&onfhtwkdif; anti-aliased edge wpfck\
transparent onf tEkpdwfjrifuGif;wGif ay:vGifaeaponf/ odkYtwGuf transparency \
tusKd;oufa&mufrIudk tjynfht0 r&&SdEkdifjzpf&onf/
Transparent image \ EIwfcrf;om;rsm;wGif
zGmvefí ta&mif rsm;jym;aerIonf halo rsm;yif
jzpof n/f Anti-aliased edge rsm;aMumi hf ¤i;fwYdk
ay:ayguvf m&jci;f jzp\f / atmucf tH a&miEf iS hf
tay:a&mif a&maxG;aeonf/
Hard edge rsm;wGi&f odS n hf ta&mitf aoG;rsm; tMum;wGirf l
text EiS hf image rsm;twuG f halo rsm; r&EdS idk af y/
Halo rsm; aysmufysufap&ef enf;vrf;wpfckrSm anti-aliased edge udk toHk;jyK&onf/
aliased image wdkif;onf hard edge wpfck&SdaomaMumifh jzpf\/ wpfcgwpf&H tpGef;tyJhav;
rsm;ESifh txpftxpfav;rsm;awmh awGU&wwfonf/
rnfodkYyifjzpfap layer vkyfxm;onfh Photoshop file twGufaomfvnf;aumif;?
Fireworks file twGufaomfvnf;aumif; halo rsm;udk umuG,frIjyK&rnf jzpf\/ rdrd image
rsm;wGif surround pixel vif;aom transparent layer rsm; jzpfaeaprnf/
rdrdonf Photoshop 5.5 odkYr[kwf Fireworks 3 ESifh vkyfudkifaeygu halo rsm;ukd um
uG,f&ef taumif;qHk;enf;vrf;rSm Matte color rS ta&mifwlzdkY csdefnd§,ljcif;yif jzpfonf/
yHkpHudk Figure 14-16 wGif jrifawGYEdkifonf/ GIF file tm; transparency ESifhtwl export
vkyf,lvkdaomtcg anti-aliased edge rsm;onf rdrd image wGif aemufcHta&mifESifh a&maESmoGm;
apjyD; halo rsm; aysmufoGm;ygvdrhfrnf/
Figure 14-15
WEB DESIGN vuaf wGoY icf e;f pmrsm; 279
a&G;xm;NyD;
matte color
ESifhtwl
jrifawGU&aom
layer graphic
rdrd page ay:wGif
ay:vmaomtcg jriaf w&YG rnhf
Transparent GIF
Photoshop 5.5 wiG fFile menu r S "Save for Web" u kd a&G;cs,íf ta&miaf umu,f &l e f Matte ukd
cs,yl g/ rrd d web page r S aemucf tH a&miuf kdneT ;fqEkd idk of n/f
Result
ñeT ;fqakd om Matte color EiS hf
anti-aliased edge rsm; a&maxG;aeonf/
Page ay:o Ykdwivf udk af omtcg tqydk g
qufpyfaeaom taMumif;t&mrsm;
aysmufoGm;apygvdrhfrnf/
Halo rsm; tumtu,G jfyK&e fMatte feature tm; to;kH jyKykH
Fireworks 3 wGif
Matte Option u kd Optimize palette r S &Eidk of n/f
Palette ay:wGi f click vyk íf rrd ad &G;cs,vf adk om
ta&miuf kd aumu,f yl g/
tu,fí rdrdonf Photoshop odkY JASC Paint Shop Pro ta[mif; version rsm;udk
toHk;jyKaecJhygu layer opfwpfckjzifh jyKjyifvkyfaqmif,l&rnf/ rdrd page \ aemufcHta&mifESifh
jznfh,lum "stack" [lonfh layer wpfckudkatmufrS cHay;vkdufjcif; jzpf\/ Image onf
flattened jzpfaeaomtcg anti-aliased edge rsm;onf Figure 14-17 wGif azmfjyxm;ouJhodkY
oufqkdifonfh aemufcHta&mifESifh a&mvsuf jzpfoGm;ygvdrhfrnf/ xkdYaemuf expent vkyfpOf
twGif; aemufcHta&mifudk transparent jzpfap&ef a&G;cs,fvkduf½Hkomjzpfonf/ þenf;jzifh
halo jyóem&Sif;oGm;apygonf/
Figure 14-16
280 WEB DESIGN vufawG Yoifcef;pmrsm;
Preventing Unwanted Transparency
tcsKdUaom tajctaersm;wGif rdrd image \ ywfvnftpGef; uvem;rsm; &Sdaeonfudk awGYae&
wwfonf/ xdktcg rdrdtaejzifh eyedropper tool wpfckudk toHk;cscJhvQif tqkdyg tajctaersm;
aysmufoGm;ygvdrhfrnf/
rrd wd iG &f adS om tool ü Matte function r&cdS yhJ gu
½;dk &iS ;f pmG jzi hf layer opwf pcf uk kd zewf ;Dvukd yf g/
Image aemuuf ,G wf iG f zewf ;D,&l rn/f tqydk g layer
\ ta&mifonf rdrd web page \ aemufcHta&mif
jzpaf p&rn/f GIF wpcf uk kd zeqf i;f &e f image ukd
uikd wf ,G &f mwiG f antialiased edge rsm;onf
aemucf tH a&miEf iS hf a&momG ;yg vrd rfh n/f
tjzLa&mi fw;kdvQK;d ayguyf pkH jHzi hf jyKvyk &f ef
eyedropper wpcf uk kd to;kH cscvJh Qif
rdrd image twGif;rS
tjzLa&mitf m;v;kHonvf n;f
transparent
jzpfoGm;vdrfhrnf/
tu,fí rdrdonf Photoshop 5.5 odkYr[kwf Fireworks 3 udk toHk;jyKcJhvQif tvm;wl
jyóemrsKd;rawGY&ay/ taMumif;rSm Matte feature onf rdrdqdkvdkaom tjzLa&mifESifh tjcm;
tjzLa&mifrsm;udk oD;jcm;aqmif&Gufay;EdkifaomaMumifh jzpf\/ xkdodkYaom tcGifhtvrf;rsKd;ukd
,cktcg vltrsm;pk toHk;jyKaeMuNyD jzpfonf/
rnfodkYyifjzpfap orm;½dk;us tool rsm;udk ydkrdk OD;pm;ay; toHk;jyKaecJhygvQif abmifuvem;
ta&mifudk ajymif;,lonfh ½dk;½dk;enf;jzifhyif opaque color udk rGrf;rH&if; ajz&Sif;,lEkdifygonf/
image onf flattened jzifh xm;NyD;aemuf color swap zefwD;,lonfhoabm jzpfonf/
Figure 14-19 wGif jyxm;onfhtwkdif; ta&mifopfwpfck jznhfwif;,laomtcg ¤if;\ antialiased
edge wpfckckudk ra&G;cs,frd&ef owdjyK&rnf/
Figure 14-17
Figure 14-18
WEB DESIGN vuaf wGoY icf e;f pmrsm; 281
Photoshop wiG f rvvkd m;tyof n hf transparency u kd umu,G jfci;f
Layered image wpcf jkzi hf pcvJh Qi f ¤i;fu kd save vyk íf layer rsm;u kd flattened
vyk ,f vl udk yf g/ atmuqf ;kH layer on f halo u kd umu,G af &;twuG f
web page & dS aemucf H ta&mijfzi hf jznwfh i;f Ny;D jzpaf eap&ygvrd rhf n/f
rrd d transparent jzpaf pvadk om
image \ tjyifbufay:wGif ta&mif
a&G;cs,&f e f Magic Wand uokd ;kH yg/
rdrd image wGif &Sdraeaomta&mifudk aocsmpGm
a&G;cs,fNyD; rlva&G;cs,fNyD;aomae&mwGif
jzn,hf yl g/ (ywkH Gi f t0ga&miaf wmuaf wmujfzihf
a&G;cs,f,lxm;onf/)
Image tm; Indexed Color oYkd
ajymi;f,yl g/ Ny;DvQi f GIF 89 a jzifh
export vkyfyg/ Export dialog box
wGi fx;kd azmu f jrivf adk omta&miuf kd
a&G;,lyg/
,cak wm h soft edge rsm;on f anti-aliased taejzihf
tjzLoaYkd jymi;foGm;on hf rvl yykH g image tjzLa&mirf S tvvdk kd <uwuvf mawmoh n/f
rSwfpk
Magic Wand &dS
tolerance ukd
"1" jzi hf csed nf x§d m;&ef
ta&;BuD;onf/
xdkYaemuf
anti-aliased uvkd n;f
ydwfxm;&rnf/ rdrd
image xJrtS a&miuf dk
ra&G;cs,frd&ef owdjyKyg/
Figure 14-19



282 WEB DESIGN vufawG Yoifcef;pmrsm;
Optimizing GIFs
Web design wGif tjrJwrf; em;vnfoabmayguf&onfh ]rdrd\ file rsm;udk i,fEkdiforQ
i,fatmif jyKvkyfxm;yg/} [laom Oya'oudk rSwfrdrnfxifygonf/ txl;ojzifh *&yfzpfzdkif
rsm;udk txl;*½kpkdufum xkdOya'oESifhtnD aqmif&Guf&rnf jzpf\/ okdYtwGuf tusKd;qufrsm;
ydkí &Ekdifap&ef GIFs rsm;udk optimize vkyf,l&ayvdrfhrnf/ Optimize vkyf,lonfqkdonfrSm
twwfEkdifqHk;tqifhtxd ao;i,fatmif vkyf,lEkdifrIudk nTef;qkdygonf/
GIF file rsm;udk Optimizing jyKvkyf,laomtcg wax&mwnf;jzpfaom pixel color
rsm;\ twef;rsm;udk cyfpdyfpdyfvkyf,ljcif;jzifh zdodyfrIudk jyKvkyfonf[k rSwf,lxm;&onf/
tqydk gvyk ef n;f vyk [f etf rsm;p\k aemuqf ;kH &v'fon f y&kH yd wf iG f Solid Color {&,d myíkd zewf ;D
ay;jcif;yif jzpfonf/
tu,fí rdrdonf Photoshop 5.5 okdYr[kwf ¤if;txuf? okdYr[kwf FireWorks udk toHk;
csaeygu rdrdcsdefn§dxm;rI\ xda&mufyHkudk csufcsif;ppfaq;Munhf½IEkdifjcif;? wpfzufESifhwpfzuf?
wpfae&mESifh wpfae&myif EdIif;,SOfMunhfEkdifjcif;uhJokdYaom erlem zefwD;rItykdif; vkyfaqmifay;Ekdif
onfh tool tajrmuftjrm;udk awGU&rnfjzpf\/
Photoshop EiS hf Fireworks uohJ aYdk om Web tool toprf sm;on f rrd zd ewf ;D,al om
y&Hk yd tf ajctaet&y&f yuf dk MuKdwiof &d &dS e f ypHk tH aetxm;trsK;d rsK;d jzi hf zGi,fh Mlun½hf cI Giahf y;on/f
Photoshop
Fireworks
Figure 14-20
WEB DESIGN vuaf wGoY icf e;f pmrsm; 283
Reduce the Number of Colors
GIFs wGif 256 colors txdom yg0ifxm;onfqkdaomf
jim;vnf; ,ckvkyfief;wGif rnfolrQ ta&mifrnfrQ&Sd
rnf[k owfrSwfxm;jcif;r&Sday/ okdYtwGuf rdrdwkdY
taejzifh yHk&dyftwGif;rS ta&mifta&twGufudk avQmh
oHk;Ekdifygonf/ (Oyrmtm;jzifh ¤if;\ bit-depth udk
avQmhcs&rnf/) Figure 14-21 wGif jrifawGU&ouhJokdY
file t&G,ftpm;udk avQmhcsoGm;í&onf/ Bit depth
edrfhoGm;aom file rsm;wGif yg0ifonfh data udk avsmh
enf;oGm;apaomoabm jzpfonf/ tjcm; enf;wpfck
rSm ta&mifudkavQmhí flat color {&d,mudk ydk,ljcif;
jzpfonf/ Pixel color rsm;wGif common boundry
ac: yHkrsOf; owfrSwf,lvkdufonfhoabm[k qkd&rnf/
Flat color ydk&avav file ao;i,fatmif zdodyfrI
vkyfief;twGuf tusKd;&Sdavav[k rSwf,lEkdifonf/
GIF format jzpfatmif save vkyfjcif;? okdYr[kwf
export vkyfjcif;wkdYtwGuf *&yfzpfy½kd*&rf tm;vHk;
avmufeD;eD; aqmif&Gufay;Ekdifjcif;aMumifh ta&mif
(okdYr[kwf bit-depth) ta&twGuf tao;pdwf azmfjy
ay;ygvdrhfrnf/
vkyfief;wpfckwGif rdrdtaejzifh ta&mifavQmhcsrI
udk tvGeftrif;&SdchJvQif yHk&dyfonf jym;oGm;wwfonf/
Figure 14-21 wGif jyxm;onhftwkdif; 256 colors rS
Bit Depth
Bit depth qkdonfrSm *&yfzpf
wpfckwGif yg0ifaom ta&mif ta&
twGuf tjrifhqHk;udk nTef;qkdygonf/
atmufygZ,m;wGif ta&mifta&
twGuf ukd,fpm;jyK bit-depth rsm;
udk jrifawGUEkdifonf/
1-bit 2 colors
2-bit 4 colors
3-bit 8 colors
4-bit 16 colors
5-bit 32 colors
6-bit 64 colors
7-bit 128 colors
8-bit 256 colors
16-bit 65,536 colors
24-bit 16,777,216 colors
(omreftm;jzifh oef;udef;*Pef;jzifh
jyavh&Sdonf/)
Web tool topfrsm;onf
ta&mifta&twGuf a&G;cs,fEkdif&ef
pDpOfxm;ay;wwfonf/ Photoshop
version ta[mif;rsm;uhJokdY
*&yfzpfqkdif&m tool tcsKdUonf popup
menu rSwpfqifh oG,f0kdufaom
enf;jzifh ta&mifta&twGufudk a&G;
cs,f,lEkdifygonf/
y&Hk yd wf pcf rk Sta&miaf vQmch sraI Mumi hf zidk tf &G,tf pm; ao;i,vf myHk
Figure 14-21
284 WEB DESIGN vufawG Yoifcef;pmrsm;
8 colors okdY avQmhcsvkdufonfhtcg oufwefYa&mifrsm; aysmufoGm;awmh\/ avQmhcsvdkufonfh
tqifhtvdkuf wpfyHkESifhwpfyHk uGmjcm;csuf &Sdvmonf/
5 bit okdYr[kwf 32 pixel colors wGif toifhavsmfqHk;jzpfaMumif; prf;oyfvkyfukdifMunhfonfh
tcg awGUvmygvdrfhrnf/ (omreftm;jzifh xkdokdY ta&mifavQmhcs&mwGif taumif;qHk;? toifhavsmf
qHk; tajctaexuf tenf;i,fjr§ifhay;xm;&onf/) avQmhcsxm;rIxuf ravQmhrDyHk&dyfrSm ykdí
om;em;aernfjzpfonf/ t"du&nf&G,fcsufrSm ta&mifudk enf;EkdiforQenf;apNyD; file t&G,f
tpm;udk ao;EkdiforQao;&ef zefwD;jcif;ukdom OD;wnfvkyfudkif&ef&Sdonf/
wu,fwrf; save vkyfrnfhtqifhwGif flat color rsm;ae&efom ta&;BuD;onf/ tMurf;
zsif;tm;jzifh 8 pixel colors txd avQmhcsvQif tqifajyaMumif; rSwfom;xm;Ekdifonf/
Reduce Dithering
Dithering qkdonfrSm Palette color rsm;udk r&Ekdifaomta&mifrsm;udk rjzpfrae pkpnf;aygif;
pyfrIjyKvkyf zefwD;,lvkdufaomtcg rdrdyHk&dyfwGif tpuftajymuf yHkoP²mefrsm; ay:vmjcif;udk
ac:onf/ yHk&dyfwpfcktwGif;&Sd ta&mifrsm;udk Specific palette wpfcktjzpf avQmhcsvkdufaom
tcg ¤if;ta&mifrsm;onf Palette twGif;ü dithering jzifh teD;pyfqHk;taetxm; jzpfvm
onf/
Dithering yrmPu kd avQmch sjci;f
orYdk [wk f turning off on f file
t&G,ftpm;ukd avsmhoGm;apygonf/
erel my&kH yd Ef pS cf uk kd ,OS Mfunjfhci;f tm;jzihf
dithering &odS nyhf EkH iS hf r&odS nyhf ukH kd
awGUjrifEkdifonf/
"mwfyHk yHk&dyfrsm;twGif;wGif dithering onf odyfta&;BuD;aomjyóem r[kwfay/ tusKd;
&v'fyif &SdEkdifapygonf/ rnfokdYyifjzpfap flat {&d,mrsm;twGif;&Sd dithering onf omreftm;
jzifh ta&mifysHUvGifhjcif;? rvdkvm;tyfonfh jrifuGif;rsKd; jzpfvmapjcif;wkdYudk awGU&wwfonf/
tjriftm½Hk tvStyobm0rsKd;udk ysufjy,fapjcif;aMumifh dithering udk odyfvkdvkdvm;vm;
Figure 14-22
WEB DESIGN vuaf wGoY icf e;f pmrsm; 285
&SdMurnfr[kwfay/ taMumif;rSm acsmarGUajyjypfaeaom ta&mif{&d,mrsm;wGif tpuftajymuf
rsm;u pdwftaESmifht,Sufjzpfaponfh oabm oufa&mufaejcif;aMumifh jzpfonf/ qkdvkdonfrSm
tpuftajymufrsm; rsm;aejcif;onf GIF zdESdyfxm;pOf tajctaewGif rodrom&Sdvmaomfvnf;
yHkBuD;BuD; zGifhvkdufonfhtcg ododomom ay:xGufvmygvdrfhrnf/
ydkvQHaeaom byte rsm;udk GIF wpfckwGif jcpfxkwf,lEkdirf n hf en;f vr;f wpcf rk mS dithering
yrmPudk uefYowfay;&efyif jzpfonf/ wpfzef GIF-creation tool rsm; tm;vHk;avmufeD;eD;
onf dithering zGifhxm;rI? ydwfxm;rIwkdY ajymif;vJEkdifcGifh &Sdonf/ Sliding scale wpfckay:wGif
dithering yrmP ppfaq;csdefwG,frIudk Photoshop wGifjzpfap? Fireworks wGifjzpfap xnhf
ay;xm;\/ odkYtwGuf yHk&dyftwGif; dither setting \ tajctaeudk BudKwifjrifawGUEkdifygonf/
tqkdyg jrifawGU&csuftay: rdrdqHk;jzwfvkdonfh tajctaejzifh qHk;jzwf,lEkdifaMumif; Figure
14-22 wGif jrifawGUEkdifonf/
Lossy GIFs
apmapmykdif;u aqG;aEG;xm;&SdNyD;jzpfonfhtwkdif; GIFs jzifh zdodyfrIvkyfief;onf "lossless"
[k qkdnTef;xm;chJonf/ qkdvkdonfrSm yHk&dyfrsm;twGif;&Sd pixel wkdif;onf zdESdyfpOfumvtwGif;
raysmufrysuf rqHk;½HI;EkdifaMumif;yifjzpfonf/ okdY&mwGif rdrdonf Photoshop 5.5 (okdYr[kwf
txuf) ESifh Fireworks wGif&Sdaom "Lossy" okdYr[kwf "Loss" setting udk toHk;csNyD; rvdk
vm;aom pixel tcsKdUudk xkwfypfívnf; &Ekdifygao;onf/ wpfzef xkdokdYxkwfy,fxm;onfh
stray pixel rsm;onf tjywftawmuf r&Sdaom pixel color wef;rsm;\ ta&twGufudk
tjrifhqHk;tqifh trSwftom;rsm; tm;vHk;jzpfaeapjyefonf/ GIF zdodyfrIwGif cGifhjyKxm;aom
vkyfcsufwpfckjzpf\/ yHk&dyftay: rlwnfí yHk&dyft&nftaoG; ododomom rusqif;Ekdifaprnfh
Lossy okdYr[kwf Loss value wpfckudk 5 &mckdifEIef;rS 30 &mckdifEIef;txd toHk;csEkdifonf/
Continuous tone art tEkynmta&miftaoG; qufvuf&&SdEkdifa&;vkyfief;pOftwGuf taumif;
qHk; enf;vrf;jzpfonf/ (JPEG jzifh continuous tone tm;vHk;udk odrf;qnf;xm;apygvdrfhrnf)
rdrdtaejzifh "mwfyHk content ESifh flat wdkY aygif;pyfxm;onfh yHk&dyfwpfckudkom BudK;pm;vkyfaqmif
&efomjzpf\/
Lossy (Photoshop) odkYr[kwf
Loss (Fireworks) value wpcf uk kd
to;kH csroI n f Pixel tcsKuUd kd
z,xf wk yf puf m file t&,G tf pm;ukd
ao;oGm;aponf/ 64 colors
yg0iaf omy kH EiS hf Diffusion dither
to;kH csxm;aom yEkH pS cf vk k;Hu kd ywkH Gif
jyoay;xm;onf/
Figure 14-23
286 WEB DESIGN vufawG Yoifcef;pmrsm;
Design For Compression
rdrdwkdYonf rdrd\ GIFs rsm;\ t&G,ftpm; avsmhusapa&;twGuf &Sdaeaom tool rsm;jzifh
csed nf jd§yKjyirf uI ekd n;fvr;f trsK;d rsK;d jzi hf aq;G aE;G cMJhuon/f oYdk&mwiG fxodk Ydkaom tajctae tqihf
ra&mufrDrSmyif zdESdyfrI'DZkdif;jzifhvnf; vkyfukdifEkdifygao;onf/
Keep It Flat
Web designer wpfOD;taejzifh tawmftwifh tqifh&Sdaom taetxm;rsKd;ESifh udkufnDaprnfh
illustration style udk ajymif;xm;Ekdifonf/ vufiif;tajctaet& gradient blend wpfckudk
toHk;jyK,lonf/ Flat color wpfckudk a&G;cs,f,lvkdufonf/ udpöawmfawmfrsm;rsm;wGif þenf;jzifh
tqifajyoGm;wwfonf/ Figure 14-24 jyuGuf wGif jrifawGU&onfhtwkdif; gradient blend
jzifh wpfrsKd;wpfa&mifudk avQmhcsí wpfzHk? flat color rsm;jzifhwpfoG,f &&Sdayvdrfhrnf/
GIFCompression Scheme \ tusK;dquuf dk &,al omen;fu dkto;Hk csum 'ZD idk ;fvyk jfci;f jzihf
zidk tf &,G tf pm;trsK;d rsK;du dkxm;Eidk of n/f
Gradient blends EiS fh 256
colors &adS eaom GIF yHk
(zidk tf &G,tf pm; 19 K
jzpfonf)
Color Value u dk 8 txd
avQmhcsjyD;pOf jrifawG Y&aom
GIF y Hk (zidk tf &G,tf pm; 7.6 K
jzpfonf)
wnl aD om y&Hk yd wf pcf uk ydk if
blends enf; tpm; flat color
,xl m;í &&xdS m;aom GIF yHk
(zidk tf &G,tf pm; 3.2 K
jzpfonf)
Play with Horizontal Stripes
Web graphic rsm;twGuf 'DZkdif;vkyf,laomtcg horizontal band ta&mifrsm; tay:wGif
compression vkyf&efudkom pdwful;xm;&rnf/ cGmcRwfrIwpfckck vkyfawmhrnfqkdygu a'gifvkduf
xuf tvsm;vkduf cGmcRwfrIu ydkrkdtqifajyonf/
GIFs 'ZD idk ;fvyk if e;fwGi f vertical band
rsm;u dk compress vyk ,f jlci;fxuf
horizontal band rsm;u dk compress
vkyf,ljcif;u ykdrdkxda&mufrI&Sdonf/
Figure 14-24
Figure 14-25
WEB DESIGN vuaf wGoY icf e;f pmrsm; 287
Photographic Image wpfcktay:
1 pixel twuG f vidk ;f rsm;
jzwfxm;onfh ykHpH
xnfhoGif;xm;jcif;onf
zkdift&G,ftpm;ukd
ao;,ljcif;twGuf
'DZkdif;enf;vrf;wpfrsKd; jzpfonf/
Web design vkyfief;wGif trsm;qHk;enf;vrf;wpfckrSm "mwfyHk image wpfckay:okdY
1-pixel yrmPtus,f&Sd horizontal line rsm;udk cs,ljcif;yifjzpfonf/ yHk&dyfudk tvsm;vkduf
vdkif;rsm; jzwfxm;onfhtaetxm;rsKd;jzifh jyoay;onf/ odkY&mwGif GIF compression onf
image area \ xl;jcm;aom tpdwftydkif;rsm;ay:wGif vSnhfjzm;vkyfudkif ,lEkdifonf jzpfaMumif;
Figure 14-26 wGif jrifawGUEdkifonf/
Designing with the Web palette
Web twGuf GIFs 'DZkdif;vkyfjcif;ESifhywfoufí tjcm;u@wpfckrS rnfonfhae&mwGif rnfokdY
Web palette udk toHk;cs,lrnfqkdonhfu@yif jzpfonf/ Web palette onf yDpDrsm; okdYr[kwf
ruf uGefysLwmrsm;ay:wGif dither rjzpfapaom 216 color wpfpHk[k t"dyÜm,f zGifhqkdEdkifonf/
¤if;onf t"du browser rsm;tm;vHk;wGif wnfaqmufxm;&Sd\/ 8-bit armfeDwm (256 colors
om display vkyfEkdifonfhacwfu armfeDwm) wpfckudk toHk;jyKaeonhf uGefysLwmwpfvHk;
ay:wGif browser wpfckudk vnfywfaeapaomtcg page ay:wGif ta&mifrsm; jyKjyifzefwD;&ef
Web Palette qokd nrf mS rnof nyfh pkH eH n;f
Web palette twGif;&Sd colors rsm;onf toifha&G;cs,fxm;jyD;om; r[kwfay/
teDa&mif? tpdrf;a&mifESifh tjymazsmhawmhawmhwkdYudk rQrQww aygif;pyf jyoay;xm;um
20 &mckdifEIef;pD tqifhvkduf jr§ifhwifay;xm;NyD; &&Sdxm;onfh tajctaersm; jzpfaom
aMumifh Munhf½I&ef jyoay;xm;jcif;om jzpfonf/
Web color rsm;onf light-based jzpfojzifh xkdodkY yuwd jrifawGU&onfh tae
txm;twkdif; yHkxkwf,lonfhtcg xGufrvmEkdifay/ xkdtaMumif;ESifh ywfoufí þ
oifcef;pmrsm;wGif tao;pdwf aqG;aEG;vdrfhrnf r[kwfay/
Web palette twGif;rS erlemtm;vHk;udk Munhf½I&ef Photoshop Swatches
palette twGif; ¤if;wkdYudk wif,l&onf (tajctaeudk Figure 14-27 wGif jrifawGUEkdif
onf/) okdYr[kwf www.learningwebdesign.com wGif web palette chart udk
Munhf½Ií&Edkifygonf/
Figure 14-26
288 WEB DESIGN vufawG Yoifcef;pmrsm;
internal web palette rsKd;udk nTef;qdkvdkonf/ yHk&dyfrsm;twGif;rS color rsm;onf web palette
twGif;rS color rsm;udk jyefvnf ae&mcsxm;rIyifjzpfonf/
Color rsm;udk palette ao;ao;av;ay:okdY shifting ESifh dithering vkyfonfh tcg
rnfokdY jzpfvmonfudk erlemawmfawmfrsm;rsm; jrifchJMuNyD;jzpfonf/ odkY&mwGif browser rS
trSefwu,f toHk;jyKrnfh ta&miftwdtus od&Sd&ef tcGifhtvrf;awmh tenf;qHk; &Sdoihfonf/
yxrae&mwGif tqkdyg 'web-safe' color rsm;udk rdrdwkdY toHk;jyKchJvQif 8-bit armfeDwmrsm;ay:wGif
&Sdaernfh BudKwifwGufqí r&Ekdifaom tjcif;t&mrsm;udk tumtuG,fjyKEkdifonf/ rnfokdYyifjzpf
ap rdrdwkdY\ *&yfzpfrsm;onf platform wpfckrSwpfckokdY tajymif;tul;wGifjzpfap? toHk;jyKol
wpfOD;rS wpfOD;odkY vufurf;,lonfhtcgwGifjzpfap vdkufavsmnDaxG jzpfaeapygvdrfhrnf/
tcef; 12 u Web ay:rSta&mifrsm;taMumif;wGif HTML document twGif; rnfokdY
toHk;cs,lrnf? web palette udk rnfokdYpDrHvkyfaqmifonf ponfwkdYudk vufawGUusus &Sif;jy
chJNyD;jzpfonf/ odkY&mwGif GIF graphic rsm; zefwD;,ljcif;? 'DZdkif;jyKvkyfjcif;wkdYwGifvnf; Web
palette u@onf qufvuf yg0ifaernfjzpf\/ Flat color oHk; image rsm;wGif dithering
r&Sdap&ef toHk;0ifaeqJ[k qkd&rnf/
Starting with Web-safe Colors
Image rsm;udk yHkMurf;rSzefwD;,lonfhtcg rdrd'DZdkif;wGif web-safe color rsm; toHk;csjcif;jzifh
jynhf0aom tcGifhtvrf;udk &&Sdaponf/ tusKd;qufrSm rdrd\*&yfzpfrsm;udk toHk;jyKoltm;vHk;
wGif wlnDpGm jrifawGYEkdifvdrfhrnfjzpf\/ t"du tm;enf;csufrSm tqkdyg color a&G;cs,frIwGif
þ GIFs rsm;onf non-web-safe
colors rsm;EiS hf 'ZD ikd ;fvyk xf m;on/f
otYkd wuG f 8-bit armef wD mrsm;ay:
wiG f dithering rsm; &adS e\/
24-bit armfeDwmwpfck ay:wGif
solid color rsm;onf
wwd ud sus &adS eí
acsmrGwfajyjypfaeonf/
8-bit armfeDwmwpfckay:wGif color
rsm;onf web palette rS colors rsm;
dithering vyk jfci;f jzi hfte;D pyqf ;kH
color om jzpfae&onf/
tu,fí flat areas rsm;onf web-safe
color rsm;EiS hf jzn,fh lxm;cvJh Qi f "mwyf tkH ae
txm;on ftputf ajymurf sm;EiS hf
&adS evrd rhf n/f oaYdk om f flat color rsm;rmS rl
flat taetxm;jziohf m &adS eon/f
Figure 14-27
WEB DESIGN vuaf wGoY icf e;f pmrsm; 289
uefYowfrI&Sdaejcif;yifjzpfonf/ 216 rsKd;rS a&G;cs,f,l&½HkrQru ta&mifzrf;,lrIEIef;xm;wGif
vnf; pdwfMudKufr&Edkifay/ (Web palette wkdY rnfonf *Pef;ocFsmoabmt& aqmif&Gufay;
aewwfonf/ tEkynmoabm rygay/)
Web Palette u kd xnofh iG ;f rpO;f pm;vodk nthf cg
Web palette twGufxnhfoGif;rpOf;pm;vkdonfhudpötwGuf om"utcsKdU &Sdaeygonf/
8-bit armef wD mrsm;wiG f rnof &Ydk rdS nuf kdxnohf iG ;f rpO;f pm;vQif
Web palette onf 8-bit armfeDwmrsm;twGufom jyKvkyfxm;aMumif; azmfjychJonfudk
rSwfrdaeygvdrfhOD;rnf/ 16-bit ESifh 24-bit armfeDwmrsm;taejzifh rnfonhf image ESifhrqkd
wdusjywfom;pGm cif;usif;jyoay;Ekdifonfqkdonfhtcsufudkvnf; arhxm;í r&ay/ odkYyg
í rdrd site \wifjycsufrsm;rSm Low-end system ESifh rywfouf[k,lqxm;ygu ¤if;udk
xnhfoGif;pOf;pm;&ef rvkdawmhay/
okdYyifjzpfjim;vnf; 'DZkdif;oabmt& pdwf0ifpm;rI&Sdygu "Lowest common denominator"
tay: ½Ijrifynwfvkdygu oHk;oyf&efom xnhfay;xm;jcif;jzpfonf/ rdrd client
rsm;onf rdrdwkdY oufqkdif&m site rsm;ay:wGif t&nftaoG; udkufnDrIudk y"mejyKí
ajymqkdEkdifaprnfhoabmyif jzpf\/
rrd d image on f "mwyf tkH ajcctH qi fh jzpaf evQif
yxrOD;pGm rdrdtaejzifh "mwfyHkoabmobm0 image wpfcktjzpf pxm;chJrdu rdrdtaejzifh
¤if;udk JPEG format wGif save vkyfvdrfhrnf[k ajymqkday;ygvdrfhrnf/
okdYaomfrdrdu GIF taejzifhom save vkyf,lrnf[k ajymvkduf&rnfhtaMumif;rSm
ta&mifrsm; avQmhcsvkdaom qE´&Sdí ditherthing tqifhajymif;,lvdkjcif;aMumifh jzpfonf/
"mwfyHk image rsm;wGif dithering jzihf jyKjyif,lvkdonfh oabmyif/ xkdYaMumifh web
palette udk toHk;rcsvkd[krSwfcsufay;vkduf&ma&mufoGm;\/ ajymif;vJzefwD;rI vkyfief;pOf
wGif adaptive palette wpfckudk a&G;cs,fvkdufjcif;onf taumif;qHk; a&G;cs,frI jzpf\/
rrd \d image on f JPEG format jzpaf ecvJh Qif
Web palette onf JPEG image rsm;twGuf toHk;jyK&efroifhavsmfay/ JPEG wkdYrnfonf
palette rsm;udk toHk;csí color ppfaq;rIudk rjyKaomaMumifhjzpf\/ ydkí ta&;BuD;onfrSm
rlv image wiG f web-safe color rsm;twuG f flat area rsm; r&Svd Qi f JPEG compression
vyk if e;f pOüf taEmS ithf ,uS jfzpaf pon/f GIF upd tö wuG of m Web-palette jzifh 'DZdkif;vyk ,f l
Muonf/
290 WEB DESIGN vufawG Yoifcef;pmrsm;
Swatche palette wpfckwGif web palette \ &Edkifaom color rsm;onf tawmf tajym&
cufvSonf/ uHtm;avsmfpGm web graphic rsm;twGuf awmif;qdkrIESifhtwl web palette
wGif *&yfzpfvkyfief; toHk;csy½kd*&rftrsm;pkwGif yg0ifxm;&Sday;xm;chJ\/
Adobe Photoshop (5.0 ESifh txuf)
Macromedia Fireworks (1.0 ESifh txuf)
JASC Paint Shop Pro (5 ESifh txuf)
Adobe Illustrator (7.0 ESifh txuf)
Corel (,cifu Meta Creation ) Painter (6 ESifhtxuf)
Macromedia Freehand (7.0 ESifh txuf)
Macromedia Director (5.0 ESifh txuf)
Macintosh System Color Picker OS8 ponfwkdYwGif uefYowfxm;csufr&Sday/
Web palette udk trnfa0g[m&trsKd;rsKd;jzifh awGUjrifEdkifygvdrfhrnf/ Netscape palette,
Web 216, Browser-safe palette, Non-dithering palette, 6 x 6 x 6 Cube ponfwkdY
jzpfonf/
Photoshop ESifh tjcm; *&yfzpf tool rsm;wGif CLUTs [kac:aom file rsm;wGif palette
udk save vkyfxm;wwfonf/ CLUTs qkdonfrSm Color Look-Up Tables \ twkdaumuf
a0g[m&jzpfonf/ Fireworks uhJodkYaom tool tcsKdUwGif CLUT file jzpfvmap&ef vkyf,lonfh
vkyfief; tqifhrsKd; oihfavsmfovkd xm;ay;ygonf/ Photoshop wGif rnfokdY vkyfudkifonfudk
Figure 14-28 wGif awGUjrifEkdifonf/
Applying the Web Palette
Web-safe colors toHk;csxm;onfh rdrd image jzpfaMumif; tjcm;enf;vrf;wpfckrSm RGB rS
indexed color okdYajymif;,l&onfhvkyfief;pOfwGif Web palette ukd toHk;cs,l&efyifjzpfonf/
Photoshop rS Browser Dither
Preview udk toHk;csí 8-bit qkdif&m
tajctaewGif yHk&dyfudk jrifawGUEkdif
yHkudk ½IjrifEkdif&ef yHkaqmifay;xm;
onf/ Optimization ESifh ywfoufí
pOf;pm;qHk;jzwf&mwGif taxmuftul
jzpfaponf/
Tip
WEB DESIGN vuaf wGoY icf e;f pmrsm; 291
rnfonfh tool wGifrqkd GIF wpfcktwGif; rdrd image udk jyKvkyf&ef a&G;cs,f,lvkdufonfESifh?
okdYr[kwf indexed color udk ajymif;,lvkdufonfESifh image twGuf palette wpfckudk a&G;cs,f&ef
ar;vmygvdrfhrnf/
t½kd;t&Sif;qHk;ESifh qef;jym;aomenf;vrf;wpfckrSm palette twGuf ar;vmonfhtcg
"web" [lonfh palette option udk a&G;cs,f,l&efjzpfonf/ GIF azmfxkwfrItwGuf color
table onf Figure 14-29 wGif jrifawGU&onfhtwkdif; web palette rS oD;jcm; color rsm;
ygaeygvdrfhrnf/
topfxGufvmaom web graphic tool rsm;onf ajymif;vJrIvkyfief;pOfwGif Web-safe
color rsm; toHk;cs&efESifh odrf;qnf;&eftwGuf qef;opfaomenf;rsm; ydkrdkygvmwwfonf/
tqkdygenf;rsm;onf txl;ojzifh a&mifjynhf"mwfyHk yHk&dyfrsm; flat ESifh web-safe color rsm;
aygif;pyfyg0ifaeaom image rsKd;rsm;twGuf txl;toHk;0ifapygonf/
Photoshop wiG f Web palette u kd wi,f jlci;f
Color Palette wpcf uk kd ae&mowrf wS &f ef
ay;ygvrd rhf n/f Photoshop wiG f →Goodies →
Color Swatches (orYdk [wk f Color Palettes)
uokd Gm;ívn;f aumi;f ? orYdk [wk f Web Hues ukd
a&G;ívnf;aumif;? Photoshop wGif Web
spectrum uvkd n;f aumi;f Web Safe Colors ukd
vnf;aumif; a&G;&ygrnf/
Swatches palette ukd
zGiMhfunyfh g/ ¤i;f rS
nmbufaxmifhtay:em;wGif
pop-up menu udkzGifhum
'Load Swatches' ukd
a&G;ívnf;aumif;? "Replace
Swatches" uakd &;G í
vnf;aumif; zGifh,lEkdifonf/
Load Swatches onf
rrd vd u&f dS swatche tm;
jznpfh Gu&f ejfzpNfy;D Replace
,cktcg Web Safe
Color u kd a&G;Eidk yf gNy/D
þae&mwGif eye
dropper tool u kd o;kH í
rdrd image tay:
toHk;cs&rnfjzpf\/
Swatches onf rdrd swatche tm;
Web-Palette EiS hfvJv,S ,f &l e f jzp\f /
Figure 14-28



292 WEB DESIGN vufawG Yoifcef;pmrsm;
Fireworks 3 wGif "Web Adaptive" palette ESifhtwl odrf;qnf;jcif;twGuf option
rsm;ay;xm;onf/ xkdYaMumifh palette onf image twGuf customized jzpfaeapvdrfhrnf/
okdYaomf web palette color rsm;okdY value ESifhwuG jyay;xm;onfh yHkpHrsKd;&Sdaom rnfonhf
color rqkd web palette color rsm;ESifh teD;pyfqHk; qkyfudkifxm;ygvdrfhrnf/
Indexed color u kd ajymi;f a& UT jci;f twGuf
vkyfaqmifaepOf umvtwGif; web palette
a&G;cs,&f e f tool awmaf wmrf sm;rsm;u cGijhfyKay;
onf/ Image twGuf Color Table
(Photoshop ypkH H) u dk ½MIunvfh Qi f web
palette colors rsm; jri&f vrd rhf n/f
Fireworks 3 rS Web Adaptive palette
cGifhjyKxm;yHk
Color Table Palette wGif image
twuG f color table u kd ½MIunEfh idk of n/f
Figure 14-29
Figure 14-30
WEB DESIGN vuaf wGoY icf e;f pmrsm; 293
Photoshop wGif adaptive palette (Adaptive, Perceptual, or Selective) wpfckudk
a&G;cs,f,ljcif;jzifhteD;pyfqHk; web-safe equivalent rsm;okdY color ajrmufjrm;pGm ul;ajymif;rI
jyKrnfudk xdef;csKyf,lEkdifonf/ Figure 14-31 wGif jrifawGU&onfhtwkdif; "Web Snap"
slider tool udk oHk;Ekdifonf/ Slider tjrifhodkY wkd;jr§ifh,lavav Color rsm;rsm; ajymif;oGm;avav
jzpfonf/ ¤if;rS image web-safe \ area rsm; csxm;pOf Custom color table wpfckudk
wnfaqmuf&ef photoshop wGif jyKxm;NyD;jzpfonf/
Web-safe equivalent o Ykd color snap rnrf Q twtd us xed ;f csKy,f rl nuf kd
Photoshop \ Web Snap Slider uokd ;kH yg/ Color Table wiG f dot rsm;EiS hf
swatche woYdk n f web-safe jzpof n/f
Preview Window av;wGif rdrd setting
taetxm;u kd csucf si;fqodk v kd awEUG ikd of n/f
Web Palette Strategies for Graphics
Web 'DZkdif;pwif vkyfaqmifMuolrsm;onf tawGUtMuHK r&Sdao;rD rdrdvkyforQ *&yfzpfwkdif;wGif
web palette ukd rSm;,Gif;pGm toHk;csaeMuavh&Sdonf/ wu,fwrf;rSmrl Web palette onf
images yHkpHtrsKd;tpm;wkdif;twGuf r[kwfay/ Web palette onf *&yfzpfrsm;\ t&nftaoG;
udk avsmhusoGm;apEkdifonfrSm trSefyifjzpfaMumif;udkom odxm;&efjzpf\/ okdYtwGuf ,cktcg
web palette udk wkduf½kduftoHk;rcs&aomaMumifh ,cktcg web graphics tool rsm;jzifh vkdtyf
ovdk toHk;jyKEkdif&eftvkdYiSm xl;jcm;qef;opfaom Option rsm;jzifh yhHydk;ay;xm;avh&Sdonf/
rnfonfhtcgrQ wdwdusus ckdifckdifrmrm Oya'otjzpf jy|mef;rIrjyKMuawmhbJ image
wkdif;tay: vkdtyfcsufESifhtnD aqmif&Gufvdku aqmif&GufapEkdif&ef rzGifhrydwf vkyfay;xm;vkduf
Muonf/ tqkdygudpötwGuf tajccHvrf;nTeftjzpf atmufygtwkdif; qufvuf avhvm,lEkdif
ygonf/
Figure 14-31
294 WEB DESIGN vufawG Yoifcef;pmrsm;
Flat graphical images
GOAL- anti-aliased vkyfief;pOfrsm;wGif tacsmudkifaepOf dithering rS flat color area
tjzpf xm;,lvkduf&onf/
STRATEGY- image 'DZkdif;vkyfaeaomtcg ½kd;½kd; Web palette option udk toHk;rcsay/
taMumif;rSm anti-aliasing wGif color \ tqifhtwef;tvdkuf aysmufoGm;rSm pdk;&drfaom
aMumifh jzpfonf/ tu,fí &Ekdifrnfqkdygu "Web Snap" wpfck yg&Sdonfh Adaptive
palette wpfckudk a&G;cs,fvkdufjcif;onf taumif;qHk; jzpfonf/ Photoshop wGif "Web-
Snap" \ yrmPudk Slider Scale ESifh csdefwG,fonf/ Fireworks wGifrl "Web Adaptive"
palette udk toHk;csonf/ ¤if;onf rdrd\ flat area rsm;tay: web color udk
xdef;odrf;ay;ygvdrfhrnf/ odkY&mwGif anti-aliasing twGif;&Sd color tcsKdUudk qufvuf
wnf&SdaecGifh jyKay;xm;onf/
Photographic images
GOAL- toHk;jyKoltrsm;qHk;taetxm;twGuf &Sif;vif;jywfom;rI? color ckdifjrJrIudk xdef;
odrf;xm;&rnf/
STRATEGY- yxrOD;pGm "mwfyHk image vHk;vHk;jzpfaevQif JPEG format jzifh save vkyf&ef
pOf;pm;&rnf/ okdYr[kwfvQif GIF format odkY image udk ajymif;,lpOf Adaptive palette
(Photoshop 5.5 txuftwGuf Selective udk a&G;&ef) wpfckudk a&G;cs,f&onf/
"mwfyHk image wpfcktwGif;rS color rsm; avQmhcsonhf tcgwkdif; dithering tenf;i,fawmh
&oGm;ygvdrfhrnf/ odkYtwGuf image rS color ESifh udkufnDonfh palette wpfckudkom a&G;
cs,f,l&onf/ xkdenf;wGif image onf 24-bit armfeDwm toHk;jyKolrsm;twGuf tqifajy
qHk;[k qkd&rnf/ 8-bit armfeDwm toHk;jyKolrsm;twGuf Web palette ay:okdY wpfzefjyefí
image udk tpDtpOfvkyfay;vdrfhrnf/ okdYaomf "mwfyHk image rsm;wGif omreftm;jzifh
dithering jzifh xdckdufrIr&Sdapay/ Continuous-tone image wpfckudk Web palette
toHk;cs&ef tusKd;qufom jzpfapygonf/
Combination images (both flat and photographic areas)
GOAL- adaptive palette wpfckESifhtwl continuous-tone area udk dither cGifhjyKxm;pOf
dithering rS flat area udk xdef;odrf;xm;&rnf/
STRATEGY- image udk 'DZkdif;jyKvkyfaeaomtcg flat areas wGif web-safe color udk oHk;&
rnf/ GIF format jzifhodrf;qnf;rI? tjcm;okdY xkwfay;rIjyKvkyfcsdefwGif &EkdifvQif 'Web
Snap' option wpfckESifh Adaptive palette wpfckudk a&G;cs,fxm;&onf/ Adaptive
palette onf "mwfyHk{&d,mtwGif; color t&nftaoG; avsmhqif;rI r&Sdap&ef xdef;ay;
xm;onf/ xkdtcsdefwGif "Web Snap" option onf flat area rS web-safe color rsm;
udk xdef;odrf;xm;ay;onf/
WEB DESIGN vuaf wGoY icf e;f pmrsm; 295
Some Things to Remember About GIFs
oifcef;pm 14 wpfckvHk;\ tcsKyfwGif t"dutcsufrsm;udk atmufygtwkdif; twdkcsKH; rSwfom;
xm;Edkifonf/
- GIF onf Logo odkYr[kwf Line art odkYr[kwf text graphic ponfwkdYuhJodkYaom flat
color area rsm; &Sdaeonfh image rsm;twGuf taumif;qHk; file format jzpfonf/
- GIFs rsm;onf NidwG,faponf? xkd;azmufjrifpGrf;apEkdifonf? okdYr[kwf vIyf&Sm; aqmif&Guf
ay;Ekdifaponf/
- GIF wpfckonf 256 colors txd yg0ifEkdifaom color palette wpfckudk toHk;jyKonf/
GIF wpfcktaejzifh image wpfckudk save vkyfaomtcg indexed color odkY ajymif;&ef
vkdtyfonf/ xkdYtjyif oifhavsmfaom color palette udk a&G;cs,f,l&onf/
- Layered document wpfcktwGif;&Sd transparent area rsm; xdef;odrf;xm;jcif;jzifh jzpfap?
rSefuefaom transparency tool ESifh flattened image wpfcktwGif;&Sd color wpfck a&G;
cs,f,ljcif;jzpfap GIF transparent wpfck\ tpdwftydkif;rsm;udk vkyf,lEkdifonf/
- Page \ aemufcHta&mifxuf anti-aliased udk ta&mifwpfckckay;jcif;udk OD;pm;ay;xm;
aomtcg Halo rsm; ay:vmwwfonf/ Image ywfvnftpyfrsm;wGif pixel rsm; ay:ae
onfh oabmjzpfonf/ Halo rsm;udk jyKjyif&efxuf tumtuG,fjyK&efu ydkrdkvG,fulonf/
- GIF file t&G,ftpm; ao;i,fap&eftwGuf enf;y&d,m,f tcsKdUrSm color rsm;\ flat area
rsm;jzifh 'DZkdif;vkyfjcif;? indexed color okdY ajymif;,lonfhtcg color ta&twGuf avQmh
csjcif;? dithering uefYowf,ljcif;? &EkdifvQif lossy GIF compression \ tcGifhtvrf;udk
&,ljcif;wkdY jzpfonf/
- Web palette onf 8-bit armfeDwmrsm;ay:wGif&Sd browser twGif;&Sd dither r&Sdap&ef
216 colors pHkjzifh csdefn§day;onf/ Flat area rsm;&Sdta&mifwGif dithering r&Sdap&ef
tumtuG,fjyK GIF image udk 'DZkdif;jyKvkyfaomtcg Web palette rS color rsm; a&G;cs,f
,l&onf/
296 WEB DESIGN vufawG Yoifcef;pmrsm;
vufawGUoifcef;pmrsm;
- ueG yf sLwm*sme,pf mwn;f tzuYJG Adobe Photoshop CS2 Classroom
in a book u kdwudk ½f udk jfyeqf kd a&;om;jyKpxk m;on/f
- ueG yf sLwmjzi hf 'ZD ikd ;f a&;qvJG okd rl sm;? 'ZD ikd ;fvyk if e;f aqmi&f uG vf okd rl sm;twuG f r&rSd jzpf
avvh m&rn hfoicf e;f pm pmtyk f jzpof n/f
- oicf e;f pmrsm;u kdtyikd ;fvukd f cjJGcm;a&;om; jyeqf xkd m;jci;f jzpíf oicf e;f pmwpcf ck si;fukd
tajccrH pS í avuh siEhf ikd of v kd rrd d EpS of u&f m tyikd ;fu kd a&;G cs,íf vn;f avvh mEikd yf gon/f
- *&yzf p'f ZD ikd ;foiwf e;fwuaf omorl sm;twuG ftaxmutf ujlyKapjy;D oiwf e;f rwubf J
u,kd wf ikd af vvh mvokd rl sm;twuG vf n;f te;Duy f ycYkd say;aern hf pmtyk jfzpof n/f
vuaf wvUG yk if e;f e,yf ,rf S *&yzf p'f ZD ikd ef mrsm;? 0ubf 'f ZD ikd ef mrsm;twuG vf n;f vuaf wUG
taxmuftul jzpfapygonf/
xGufaeygjyD
pmrlcGifhjyKtrSwf4008030606
Adobe Photoshop CS2
- &euf ek jfrKdwU iG f pmtyk qf ikd wf idk f;EiS hf City Mart,
Ocean North Point Centre, Super One,
Blazon, Orange Super Mart wwYdk iG f
0,,f &l &EdS ikd yf gon/f ueG yf sLwm*sme,wf ukd of Ydk
wukd ½f udk rf mS Mum;0,,f El ikd yf gon/f
- rEaÅ v;jrKdwU iG f e*g;pmayEiS hfxeG ;f O;D pmaywwYkd iG f
0,,f &l &EdS ikd yf gon/f
pmrcl iG jhfyKtrwS f 4012290610
Adobe Illustrator CS2
vufafawGUGUoUoifcfcef;f;pmrsm;
- ya&mzf u&f iS ef , f *&yzf p'f ZD ikd ef m yoD &e f r&rdS jzpf
wwuf Rr;f &evf tkd yof n hf Illustrator CS2 twuG f
ueG yf sLwm*sme,pf mwn;ftzuYJG Adobe
Illustrator CS2 Classroom in a book u kdwudk ½f udk jfyeqf kd a&;om; jyKpxk m;on/f
- Bitmap image editing twuG f Photoshop on ftjyKdirf & dS ausmMfum;ouohJ Ykd line
art rsm;? logo rsm; a&;qGJ&ef Vector graphics twGuf Illustrator u
txl;aumif;rGefonf/
- Classroom in a book onf Adobe Illustrator \ tajccHrsm; avhvm oif,l&ef
NcKHirkH ad pNy;D ra&wuG Ef idk af om rwS of m;z,G ftcsurf sm;? en;f peprf sm; yg0iof n/f
- oicf e;f pmrsm;u kdtyikd ;fvukd f cjJGcm;a&;om; jyeqf xkd m;jci;f jzpíf oicf e;f pmwpcf ck si;fukd
tajccrH pS jy;D avuh siEhf ikd of v kd rrd d EpS of u&f m tyikd ;fu kd a&;G cs,íf vn;f avvh mEikd yf gon/f
- &euf ek jfrKdwU iG f pmtyk qf ikd wf idk ;f EiS hf City Mart, Ocean, North Point Centre, Super
One, Blazon, Orange Super Mart wwYdk iG f 0,,f &l &EdS ikd yf gon/f
ueG yf sLwm*sme,wf ukd of vYdk n;f wukd ½f udk rf mS Mum; 0,,f El ikd yf gon/f
- rEaÅ v;jrKdwU iG f e*g;pmayEiS hfxeG ;f O;D pmaywüYkd 0,,f &l &EdS ikd yf gon/f
- þpmtkyfwGif uGefysLwmtajccHa0g[m&rsm;?
x;l jcm;qe;f jym;aom acwof p fueG yf sLwmo;kH
a0g[m&rsm;? pum;v;kH rsm;u kdtaMumi;ft&m?
bmom&ytf vukd fv&dk i;fw&kd iS ;f azmjfyxm;on/f
- ueG yf sLwmbmom&yqf ikd &f m
owi;ftcsutf vurf sm;EiS hf en;f ynmqikd &f m
pum;v;kH rsm;u kdus,jfyepYf mG xnohf iG ;f azmjfyxm;on/f twakd umu f pum;v;kH rsm;?
t,tl qujJGym;wwof n hf pum;v;kH rsm;vn;f yg0iof n/f
- ueG yf sLwm en;f ynmqikd &f ma0g[m&aygi;f 600 ausm f yg0iíf to;kH jyK&e fvr;fneT cf suf
enf;vrf;rsm;vnf; yg0ifonf/
- cucf aJ om ueG yf sLwm ynm&yaf 0g[m&rsm;EiS hf Ae;f pum;rsm;u kdv,G uf al p&ef
[moajrmuaf om o½yk af zmyf rkH sm;jzi hf a&;qaJG zmjfyxm;on/f
- ausmi;foicf e;f pmtaxmutf ujlyK tb"d me f pmtyk tf jzp fto;kH jyKEikd of uohJ Ykd
rod m;pvk upf tJG jzpvf n;f v&kd mo;kH Eikd of n hf pmtyk wf ptf yk jfzpof n/f
- &euf ek jfrKdwU iG f pmtyk qf ikd wf idk ;f EiS hf City Mart, Ocean North Point Centre,
Super One, Blazon, Orange Super Mart wwYdk iG f 0,,f &l &EdS ikd yf gon/f
ueG yf sLwm*sme,wf ukd of Ydkwukd ½f udk rf mS Mum;0,,f El ikd yf gon/f
- rEaÅ v;jrKdwU iG f e*g;pmayEiS hfxeG ;f O;D pmaywwYkd iG f 0,,f &l &EdS ikd yf gon/f
pmrcl iG jhfyKtrwS f - 4003990307
xGufaeygjyD

0 comments:

Post a Comment