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  
(nonbreaking space)
© Copyright © ©
® Registered trademark ® ®
™ Trademark (none) ™
£ Pound £ £
¥ Yen ¥ ¥
}} Left curly quotes (none) “
}} Right curly quotes (none) ”
< Greater-than symbol; (none) ›
Left bracket (useful for
displaying tags on a web page)
> Less-than symbol; (none) ‹
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
