Web design book

Компьютерийн
график дизайн өөрөө
сурах бичиг

Web Design
Book

ªìíºõ ¿ã

ªíºº ¿åä êîìïüþòåð àøèãëàí õýâëýëèéí ýõ áýëòãýõ íü ìàø ýíãèéí ¿çýãäýë
áîëæýý. Ó÷èð íü êîìïüþòåðèéã àøèãëàñíààð àæëûí öàã áàãàñàæ, ýäèéí çàñãèéí
õýìíýëò ãàðààä çîãñîõã¿é ÷ºëººòýé, ºíäºð ò¿âøèíû äèçàéíòàé á¿òýýë õèéæ
÷àääàãò áàéãàà þì. Èéìýýñ èðýýä¿éä äèçàéíåð áîëîõ õ¿íèé õóâüä êîìïüþòåð íýí
÷óõàë àæëûí áàãàæ áîëîîä áàéíà.

Ýíýõ¿¿ “Êîìïüþòåðèéí ãðàôèê äèçàéí ªºðºº ñóðàõ áè÷èã” íîìûã
ñóäàëñíààð êîìïüþòåð àøèãëàí äèçàéí õèéõýä õýðýã áîëîõ ¿íäñýí 3 ïðîãðàìì
õàíãàìæ (Photoshop, Corel Draw, Pagemaker) áîëîí ñ¿¿ëèéí ¿åä ìàø èõýýð
õýðýãëýãäýæ áàéãàà Web Design-íû òóõàé çýðýã îëîí ç¿éëèéã ñóð÷ áîëîõ þì. Óã
íîìîíä àøèãëàãäàõ ä¿ðñ, çóðàã,òåêñò çýðãèéã CD-ROM-ä ñóóëãàí áýëäñýí áîëíî.
Ýíý ìàòåðèàëóóäûã àøèãëàí, á¿ëýã á¿ðèéí àæëûã ýõíýýñ àâàõóóëààä øàò øàòààð
ã¿éöýòãýñíýýð ïðîãðàìì õàíãàìæèéí ¿íäýñ áîëîí ïðàêòèê àæëûí äàðààëàë, ¿éë
ÿâöàä ñóðàëöàõ áîëíî.

Ýíýõ¿¿ íîìûã óíøèæ ñóäëàõàä õàìãèéí ÷óõàë íü ìàóçàà áàðèí,
êîìïüþòåðèéíõàà ãàðûí òîâ÷ëóóðûã äàðæ ¿çýí, àëäàà ãàðãàñàí ÷ á¿õèé ë ç¿éëèéã
ººðèéí ãàðààð òóðøèæ ¿çýí ã¿éöýòãýõ ÿâäàë þì. Óã íîìûã ñóäëàõäàà ç¿ãýýð ë
õ¿íèé õèéñýí ç¿éëèéã õàðñàí òºäèéõíººð áîë òàíä îíöãîé àõèö ãàðàõã¿é. Á¿ãäèéã
ººðèéí ãàðààð õèéæ ¿çýõ íü ÷óõàë þì.

Ýíýõ¿¿ íîìûí àãóóëãûã á¿ãäèéã ñàéòàð îéëãîí, ïðîãðàìì õàíãàìæèéí
¿íäñèéã ñóðñíààð, ººñäèéíõºº äèçàéí çîõèîõ ÷àäâàðàà ñàéæðóóëæ ÷àäàõ áîëíî.
Äèçàéíä ýíý çºâ þìàà ãýñýí õàðèóëò áàéõã¿é. Áè äèçàéí ãýäýã þìàíä ººðèéí
áèåýýð ñóðàëöàõ ¸ñòîé ãýæ áîäîæ áàéíà. Íîì , ñýòã¿¿ë, ìºí ãóäàìæ òàëáàéí
ðåêëàì ñàìáàðò ýíý ìàø ñàéí áîëæýý ãýæ áîäñîí äèçàéí òààðàëäâàë, ÷óõàì ¿¿íèé
þó íü ñàéí áîëñîí áàéíà âý ãýäãèéã ñàéí áîäîæ ¿çýýðýé. Òýãýýä ýõëýýä óã äèçàéíûã
äóóðèàãààä ººðºº õèéæ ¿çýýðýé. Ñàéí áîëñîí äèçàéíûã äóóðèàõ íü ìàø ÷óõàë
áàéäàã. Ò¿¿íèé äàðàà óã äèçàéíä ººðèéíõºº ñàíààã áàãà çýðýã íýìæ ºãñíººð óëàì
ñàéí äèçàéíûã õèéæ ÷àäàõ áîëíî.

Ýíýõ¿¿ “Êîìïüþòåðèéí ãðàôèê äèçàéí ªºðºº ñóðàõ áè÷èã” íîìûã
àøèãëàí, êîìïüþòåðèéí ãðàôèê äèçàéíû ¿íäñèéã ñóðñàí òà á¿õýí èðýýä¿éä
ìîíãîëûí äèçàéíû øèíý ýðèíã òýðã¿¿ëæ ÿâàõ ãàðàìãàé ñàéí äèçàéíûã á¿òýýí,
àìæèëò ¿ç¿¿ëýõèéã õ¿ñýí åðººå.

Çîõèîã÷
Õàÿøè Êèìèõèêî

1

Ãàð÷èã

Mouse (õóëãàíà) -íèé àæèëëàãààã íýðëýõ

Õè÷ýýë- 01 Õè÷ýýë- 02 Õè÷ýýë- 03
Èíòåðíýò ãýæ þó âý? Internet Explore ¿íäñýí êîìàíäóóäûí HTML-1
òîâ÷ëóóðóóä

HTML-2 HTML-3 Dreamweaver ãýæ þó âý ?

Âýá ñàéò õèéõ åðºíõèé àðãà, ÿâö Dreamweaver äýýð âýá õóóäàñûã õèéæ Òåêñòèéí àæèëëóóëàõ
¿ç¿¿ëýõ.

Âýá õóóäàñ äýýð õýðýãëýäýã çóðãèéí Çóðàã òàé âýá õóóäàñ Link (õîëáîëò) áàéãóóëàõ
òóõàé

Õ¿ñíýãòòàé âýá õóóäàñ Hotspot, Anchor Rollover Image

2

Frame-òýé âýá õóóäàñ Animation GIF (Õºäºëãººíòýé çóðàã) Upload (Èíòåðíåòä ôàéëûã ñóóõ)

3

Mouse (õóëãàíà) -íèé àæèëëàãààã íýðëýõ

íýã óäàà äàðàõ......Click

õî¸ð óäàà äàðàõ......Double Click
áàðóóí òîâ÷ëóóð äàðàõ ......
áàðóóí Click

ç¿¿í òîâ÷ëóóð óäààí äàðàõ.....Press ç¿¿í òîâ÷ëóóðèéã äàðààä çººõ....Drag

Ýíý íîìîíä Mouse (õóëãàíà) -íèé àæèëëàãààã èíãýæ íýðëýæ áîëíî.

4

Õè÷ýýë- 01

Èíòåðíýò ãýæ þó âý?

1. Èíòåðíýò ãýæ þó âý?

Èíòåðíýòèéã òîäîðõîéëíî ãýäýã ìàø òºâºãòýé. Èíòåðíýò íü àñàð èõ ìýäýýëýë àãóóëàõààñ ãàäíà òàíä
òóëãàðñàí àñóóäëûã õàìãèéí áàãà çàðäëààð õóðäàí øóóðõàé øèéäâýðëýæ ºãäºãò ãîë àãóóëãà íü îðøèæ
áàéãàà þì. ¯íýíäýý èíòåðíýò ãýäýã íü äýëõèéí èõýíõ óëñ îðíûã õîëáîñîí îëîí ñàÿ êîìïüþòåðèéí ñ¿ëæýý
áà ýíä áàéãàà àñàð èõ ìýäýýëëèéí ñàíã òîäîðõîéëñîí íýð þì. Òýãýõäýý äýëõèé äàõèíûã õàìàðñàí îëîí
êîìïüþòåðèéí ñ¿ëæýý ãýäýã íü ÷óõàë áèø. Õàðèí áèäýíä àøèãëàæ áîëîõ øèíý îð÷èí ãýäýã íü ÷óõàë
þì. Õýäèé òèéì áîëîâ÷ èíòåðíýò íü îëîí íèéòèéí õýðýãëýãäýõ¿¿í ó÷ðààñ ø¿¿ìæëýëòýé õàíäàõ òàë
áàéæ áîëíî. Èíòåðíýò íü:

- á¿õ äýëõèéí ñ¿ëæýýí¿¿äèéí ñ¿ëæýý
- õàìòûí õàðèëöàà õîëáîî
- ìýäýýëýë äàìæóóëàõ çàì áà àñàð èõ áàÿëàã,
íººö áîëîìæóóä
- êîìïüþòåðóóäûí õîëáîëò þì.

2. Âýá õóóäàñ ãýæ þó âý?

Èíòåðíýòýä îðîîä äýëõèé äàõèíû âýá õóóäàñààñ ìàø èõ ìýäýýëýëèéã àâàõ áîëîìæòîé. Ìºí òà ººðºº
âýá õóóäàñ õèéãýýä ººðèéí êîìïüþòåðîîñ äýëõèé äàõèíä ìýäýýëýëèéã ÿâóóëàæ ÷àäíà.

5

Õè÷ýýë- 02

Internet Explore ¿íäñýí êîìàíäóóäûí òîâ÷ëóóðóóä

Internet Explore
...Âýá õóóäàñûã ¿ç¿¿ëýõ ïðîãðàìì õàíãàìæ

1. Internet Explore ïðîãðàììûã àæèëëóóëàõ

2. Internet Explore ¿íäñýí êîìàíäóóäûí òîâ÷ëóóðóóä
Ýõëýýä File>Open... kimi-Lessons /web design / WD-Lesson02-Internet
index.html-ã íýýãýýä ¿ç.

Áóöàõ Çîãñîîõ Ãýð
Ýðãýæ Õàéõ -ã ãàð÷ èðýõ õýñãèéã äàð !
ªìíºõ
à÷ààëàõ

6

Õè÷ýýë- 03

HTML-1

1. HTML ãýæ þó âý?

HTML ãýäýã íü Âýá õóóäñûã êîìïüþòåðèéí ïðîãðàììèéí õýë äýýð áè÷äýã òåêñòýí ôàéë.
Èéìýýñ Note pad ïðîããðàìì äýýð âýá õèéæ áîëíî.

2. Notepad ïðîãðàììûã àæèëëóóëàõ
[Start] -[Programs] -[Accessories]-Notepad-ã ñîíãîíî.

Notepad ïðîãðàììûã àæèëëóóëñàí.

3. HTML -èéí ¿íäñýí ïðîãðàìèéí õýë
Ýõëýýä Note pad ïðîãðàìì äýýð äîîðõ áè÷ýýðýé.

<HTML>
<HEAD>
</HEAD>

<BODY>
</BODY>
</HTML>

<...></...> èéã Tag ãýäýã.

<HTML> .... </HTML> “Ýíý Ôàéë HTML-ãààð áè÷èæ áàéíà. “ ãýæ çààæ áàéíà.

<HEAD> .... </HEAD> Ýíý çàâñàðò íü õóóäàñ äýýð õàðàãäàõã¿é õýðýãòýé ìýäýýëýëèéã áè÷íý.

7

Äàðààõè òåêñòèéã íýìíý.

<HTML>
<HEAD>
<TITLE>HTML Web Page</TITLE>

</HEAD>

<BODY>
Welcome to HTML Web Page!
</BODY>
</HTML>

<TITLE> .... </TITLE> ýíý çàâñàðò âýá õóóäàñíû ãàð÷èã áè÷íý.

 .... ýíý çàâñàðò ºã¿¿ëáýð áè÷.

Òýãýýä File>Save As...

OOO.html ãýæ íýð áè÷ýýä õàäãàëààðàé.

4. HTML -èéí ôàéëûã Internet Explore äýýð ¿ç.

Internet Explore äýýð File>Open...
Âýá õóóäàñûí ãàð÷èã ýíä ãàðíà.

8

Õè÷ýýë- 04

HTML-2

1. Òåêñòèéã çýðýãö¿¿ëýõ.

<HTML>
<HEAD>

</HEAD>

<BODY>
Welcome to HTML Web Page!
Welcome to HTML Web Page!
Welcome to HTML Web Page!
</BODY>
</HTML>

.... ãîëîîð çýðýãö¿¿ëñýí ºã¿¿ëáýð

.... áàðóóí òàëààð çýðýãö¿¿ëñýí
ºã¿¿ëáýð

Äýýðõ Notepad äýýð áè÷ýýä õàäãàëààä
(OOO.html ãýæ íýð ºã.)
Internet Explore äýýð íýýãýýä ¿ç .

2.¯ñãèéí õýëáýð ººð÷èëºõ.

<HTML>
<HEAD>
</HEAD>
<BODY>
Text size change 
Text size change 2
Text color change 
Text color change 2
Text font and size change 
Text strong 
Text EM 
</BODY>
</HTML>

.... Òåêñòèéí õýìæýý ººð÷èëºõ.
.... Òåêñòèéí ºíãº ººð÷èëºõ.
.... Òåêñòèéí øðèôò ººð÷èëºõ.
.... ¯ñãèéí õýëáýð ººð÷èëíº---Bold
.... ¯ñãèéí õýëáýð ººð÷èëºõ---Italic
.... ¯ñãèéí õýëáýð ººð÷èëºõ---Underline

9

3. Õ¿ñíýãò õèéõ.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD> Ýíä òåêñò áè÷íý. </TD>
<TD> Èíãýýä äàðààãèé òåêñò </TD> </TR>
<TR>
<TD> 2-ð ýãíýý áàéíà. </TD>
<TD> 2-ð ýãíýýíèé 2-ð òåêñò </TD> </TR>
</TABLE>
</BODY>
</HTML>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

-------Èíãýæ áè÷ñýí áîë Ìîíãîëîîð áè÷èæ áîëíî.

<TABLE>
<TR> Ýãíýý
<TD></TD> Áàãàíà
</TR>
</TABLE>

<TABLE border=""> Õ¿ðýýíèé ºðãºí

<TABLE width=" "> Õ¿ñíýãòèéí ºðãºíèé õýìæýý

<TABLE height=" "> Õ¿ñíýãòèéí ºíäðèéí õýìæýý

<TABLE bgcolor=" "> Õ¿ñíýãòèéí ºíãº

<TD bgcolor=" "> Í¿äíèé ôîíû ºíãº

10

Õè÷ýýë- 05

HTML-3

1. Çóðûã îðóóëæ èðýõ.

<HTML>
<HEAD>
<TITLE>Modern Art in Mongolia</TITLE>
</HEAD>
<BODY bgcolor="red">
Modern Art in Mongolia 
<IMG src="art1.jpg">
<HR size="4">
</BODY>
</HTML>

<BODY bgcolor=" "> Äýâñãýð ôîíû ºíãº

<IMG src=" "> Çóðãûã îðóóëæ èðýõ..

<HR size=" "> Çóðààñ çóðàõ.

Òýãýýä File>Save As...
top.html ãýæ íýð áè÷ýýä
kimi-Lessons/ Web Design/ WD-Lesson05-HTML3
õàâòàñ äîòîð õàäãàë.

Internet Explore äýýð File>Open... top.html

2. Link (õîëáîëò) õèéõ.
Äàðààãèéí õóóäàñ õèéíý.

<HTML>
<HEAD>
</HEAD>
<BODY background="stone.gif">
<HR size="4">
<HR size="4">
<A href="top.html">Back</A>
</BODY>
</HTML>

<BODY background=" "> Äýâñãýð ôîíä çóðàã òàâüæ áîëíî.

<A href=" "> Click õèéñýí áîë òîãòîîñîí ôàéëä øè ëæ¿¿ëíý.

File>Save As... page-2.html ãýæ íýð áè÷ýýä õàäãàëààðàé.

11

File>Open... top.html

<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="red">
Modern Art in Mongolia 
<HR size="4">
<A href="page-2.html">Enter</A>
</BODY>
</HTML>

<A href="page-2.html">Enter</A> -ã íýìíý.

Internet Explore äýýð File>Open... top.html

Enter -ã äàðàõ áîë
page-2.html ðóó îðíî.

Back -ã äàðàõ áîë
top.html -ä áóöàõ.

12

Õè÷ýýë- 06

Dreamweaver ãýæ þó âý ?

1.Dreamweaver ãýæ þó âý ?

Dreamweaver ïðîãðàììûã õýðýãëýñíýýð âýá õóóäñûã àìàðõàí õèéæ ÷àäíà.
HTML-èéã áè÷èõ õýðýãã¿é. ªºðèéí õ¿ññýí äèçàéí õèéæ áîëíî.

2.Dreamweaver ïðîãðàììûã àæèëëóóëàõ
[Start] -[Programs] -[Macromedia Dreamweaver4]- Dreamweaver4 ñîíãî.

3.Åðºíõèé õýðýãë¿¿ð áîëîõ èíòåðôåéñ-èéí àøèãëàëò
Object Panel Tool Bar

Document Window

Tag selecter Launcher Bar

Property Inspector

13

4.Õàðàãäàöûí ººð÷ëºëò 5.Object Panel Click
File>Open... Character Common
Visit Mongolia - Ulaanbaatar Tour.htm

HTML-view õàðàãäàö

Forms Frames Head Invisible Special

HTML-view áàñ Design õàðàãäàö

5.Property Inspector

Design õàðàãäàö

Click

14

Õè÷ýýë- 07

Âýá ñàéò õèéõ åðºíõèé àðãà, ÿâö

1.Ôàéëûí á¿òöèéã øèéäýõ
Øèíýýð âýá õóóäàñ õèéõäýý øèíý õàâòàñ íýýãýýä óã ñàéòûí á¿õ ôàéëûã äîòîð íü
õàäãàëíà. Âýá ñàéòûí åðºíõèé á¿òöèéã äîîðõ çóðàãò õàðóóëëàà.

index(top) index(top)

news info mail link news info mail link

1) ªºðèéí õàâòàñ äîòîð (Web site) Image õàâòàñ 2) Õýðýâ âýá õóóäñóóäûí ôàéëóóä îëîí áàéâàë
¿¿ñãýñýí áàéíà. ¯¿í äîòîð ôîòî çóðàã, òóñ á¿ðä íü õàâòàñ íýýæ äîòîð íü õàäãàëíà.
õàâñàðãàñàí çóðàã, çóðãèéí ôàéëóóäûã
õàäãàëíà.

2. Âýá õóóäàñíû ýñêèç ãàðãàõ
1) Âýá õóóäàñ äîîðõ ìàòåðèàëóóäààñ á¿ðäýæ áàéíà:
- Ãàð÷èã
- Òîâ÷
- Äýä ãàð÷èã
- Òåêñòèéí ìýäýýëýë
- ôîòî çóðàã áàñ õàâñàðãàñàí çóðàã (êèíî) ãýõ ìýò

Ýäãýýð ìàòåðèàëóóäûã ÿìàð äèçàéíààð õèéõýý
òºëºâëºí ýñêèçýý ãàðãàõ õýðýãòýé. Òà ãàðààð áè÷èõ áà
çóðàõ ýñâýë êîìïüþòåð äýýð àëü áîëîìæòîéãîîð íîîðîã
õèéãýýðýé.

3. Õýðýãëýõ ìàòåðèàëûã öóãëóóëàõ

Õèéæ áàéãàà âýá õóóäñàíä îðîõ ôîòî çóðàã,
õàâñàðãàñàí çóðàã, òåêñò, ìýäýý ìýäýýëëèéã
öóãëóóëíà.
Çóðãèéí ôàéëûã Photoshop äýýð âýá õóóäàñò
çîõèñòîé çóðãèéí òºðëººð õàäãàëíà.

Âýá õóóäàñíû á¿õ áýëòãýë äóóññàí áîë Dreamweaver ïðîãðàìì äýýðõ àæèë ýõýëíý.

15

4. Local Site (îðîí íóòãèéí ñàéò)-ûã òîäîðõîéëîõ

Dreamweaver äýýð âýá õóóäàñ õèéõäýý ýõëýýä Site öîíõ äýýð âýá õóóäàñíû ôàéëûã ººðèéí êîìïüþòåðîîñ
îëîîä ñîíãîæ òîäîðõîéëíî.

5. Øèíý õóóäñûã õàäãàëàõ

Âýá õóóäñàí äýýð ôàéëóóäûã îðóóëæ èðýõýýñ ºìíº òýð õóóäñûã ººðèéí õàâòàñ äîòîð õàäãàëàõ
øààðäëàãàòàé. Í¿¿ð õóóäñûã index ãýæ õàäãàëàõ ¸ñòîé. Ýõëýýä õàäãàëàõã¿é áîë çóðãèéã îðóóëæ èðýõ
áàñ link (õîëáîëò) õèéõýä ñàéí àæèëëàõã¿é.

6. Õóóäñûí áàéðëàë, äèçàéí
6.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é

Ãàð÷èã, òåêñò, òîâ÷, çóðãèéã ýñêèçèéí äàãóó õóóäñàí äýýð áàéðëóóëàí äèçàéíûã õèéíý.

7. Link (õîëáîëò) áàéãóóëàõ

ªºð õóóäàñ ðóó øèëæèõèéí òóëä ¿ã áà òîâ÷èíä Link (õîëáîëò) õèéäýã.

8. Flash, äóó, JavaScript-ûí ôàéëûã íàéðóóëàõ

Õýðýãòýé áîë Flash, äóó, JavaScript-ûí ôàéëóóäûã îðóóëæ íàéðóóëíà.

9. Âýáýý øàëãàõ

Õóóäàñ á¿ð äóóññàí áîë ÷àäâàë äîîðõ ïðîãðàììóóäààð á¿ãäýýð íü øàëãàæ ¿çýýðýé.
- Îëîí òºðëèéí ïðîãðàììóóäûã øàëãàõ. (Internet Explore, Netscape Navigator...)
- Òóñ ïðîãðàììóóäûí øèíý, õóó÷èí á¿õ õóâèëáàð äýýð øàëãàõ.
(Internet Explore, Netscape Navigator...)
- Windows áà Macintosh 2 äýýð øàëãàõ.

10. Äóóññàí âýá ôàéëûã Upload (èíòåðíýòýä ñóóëãàõ) õèéõ

Ýõëýýä êîìïüþòåðîî èíòåðíýòýä õîëáîîä äàðàà íü ººðèéí âýá õóóäàñíû ôàéëûã èíòåðíýòýä ñóóëãàíà.
Ñóóñíû äàðàà èíòåðíýòýýñ âýáýý äàõèí øàëãààðàé.

11. Âýá ñàéòûã øèíý÷ëýõ

Öàã õóãàöàà ºíãºðººõºä ìýäýý õóó÷èí áîëæ ìýäýýëëèéã øèíý÷ëýõ øààðäëàãà ãàðäàã. Òýãýýä
øèíý÷ëýñýí âýáèéã äàõèí èíòåðíýòýä ñóóëãàíà.

16

Õè÷ýýë- 08

Dreamweaver äýýð âýá õóóäàñûã õèéæ ¿ç¿¿ëíý.

ªìíº õèéñýí Modern Art in Mongolia âýá ªºðèéí íýð ºãíº.
õóóäàñûã Dreamweaver äýýð õèéæ ¿çíý.

1.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýíý.
Windows Explore-èéã àæèëëóóëíà.

Kimi-Lesson/ Web Design/
WD-Lesson08-Modern Art/ îðíî.

Kimi-Lesson/ My Works/ îðíî.

Ýíä áàéãàà 5 ôàéëûã á¿õ ñîíãîîä
Copy-ã äàðíà.

File>New>Folder
Øèíý õàâòàñûã õèéíý.
Kimi-Lesson/ My Works/ ñàÿ õèéñýí ººðèéí
õàâòàñä îðîîä Paste õèéíý.

17

Windows Explore-èéã õààõ.

2. Dreamweaver-èéã àæèëëóóëíà.

OK-ã äàð.

3. Local Site (îðîí íóòãèéí ñàéò)-èéã
òîäîðõîéëîõ

Site>New Site... Site name áè÷ýýä
Local Root Folder -ãààñ
OK-ã äàð.
ñàÿ õèéñýí ººðèéí õàâòàñûã ñîíãî.

Èíãýýä ººðèéí êîìïüþòåðûí äýýð Local Site-ä
ººðèéí õàâòàñíû íýð òîäîðõîéëñîí õàâòàñíû äîòîðõè íü ãàð÷ èðíý.
¯¿íýýñ õîéø õèéõ HTML ôàéë áà çóðãèéí
ôàéëûã á¿ãä ýíý õàâòàñíû äîòîð õàäãàë.

Site öîíõûã õààíà.

18

4. Âýá õóóäàñûã õàäãàëàõ 7.Çóðãûã îðóóëæ èðíý.
File>Save As... top-page.html
Ñàÿ õèéñýí ººðèéí õàâòàñ äîòîð õàäãàë.
-ã Click õèéãýýä
art1.jpg ñîíãî.

5.Page Property-èéã òîõèðóóëàõ
Modify>Page Properties...

Title áè÷ýýä Background ºíãº ñîíãîíî.

òýãýýä Enter-ã äàðíà.

6.Word øèã òåêñò áè÷èíý.
Modern Art in Mongolia 8. -ã äàðààä çóðààñ çóðíà. H=6 (ºíäºð)
Font size : 6 ãîëëóóëíà

òýãýýä Enter-ã äàðíà.

19

9.Enter ãýæ òåêñò áè÷. 13.Modify>Page Properties...

Title áè÷ýýä
Background Image ñîíãî. stone.gif

10.File>Save

11.Øèíý õóóäàñ õèéõ.
File>New...

14. -ã äàðààä Çóðãèéã îðóóëíà.

art2.jpg, art3.jpg

15.Back ãýæ òåêñò áè÷èõ.

12.File>Save As...
next-page.html

20

16.Link õèéõ. 19.File>Save
Back òåêñòèéã èäýâõèæ¿¿ëýýä
Link -èéã äàðààä top-page.html ñîíãî. 20.Internet Explore äýýð øàëãàæ ¿ç.

F12 òîâ÷ëóóð äàðààä
Internet Explore äýýð ñàÿ õèéñýí
õóóäàñûã øàëãàæ ¿ç.

17.File>Save

18.top-page.html äýýð Enter-ûã èäýâõèæ¿¿ëýýä
Link -ûã äàðààä next-page.html ñîíãî.

21

Õè÷ýýë- 09

Òåêñòèéí àæèëëóóëàõ

1.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýõ. 2.Dreamweaver äýýð øèíý SITE (ñàéò) -ã
òîäîðõîéëîõ
Windows Explore-èéã àæèëëóóëàõ.
Site>New Site...
Site name áè÷ýýä
Kimi-Lesson/ My Works/ îðîõ. Local Root Folder -îîñ
ñàÿ õèéñýí ººðèéí Folder ñîíãî.

File>New>Folder
Øèíý õàâòàñûã õèéíý.

Ãàð÷ èðñýí Site Window-èéã õààíà.

ªºðèéí íýð ºãíº.

3.Âýá õóóäàñûã õàäãàëíà.
File>Save As... top-text.html
ñàÿ õèéñýí ººðèéí Folder äîòîð õàäãàëàõ.

Windows Explore-èéã õààíà.

Dreamweaver-èéã àæèëëóóëíà.

22

4.Page Property-èéã òîõèðóóëàõ Size-ãààñ 6 ñîíãîíî.

Title áè÷ýýä
Background ºíãº ñîíãî.

äàðààä ãîëëóóëíà.
áàñ -èéã ñîíãîíî.

Ìîíãîëîîð áè÷èõ áîë:
Document Encoding-ààñ
Cylilic(windows-1251) ñîíãîíî.

Òýãýýä Shift +Enter äàðààä äàðààãèéí ìºðä
îðîîä òåêñò áè÷íý.

Òýãýýä ÎÊ-ã äàðíà.
Õýðâýý ç¿ãýýð Enter äàðñàí áîë ìºðèéí
5.Õóóäñûí äýýð òåêñò áè÷íý. õîîðîíä çàéòàé áîëíî.

Áè÷ñýí òåêñòèéã èäýâõæ¿¿ëýõ 6.Òåêñòèéí ºíãº ººð÷ëºõ.
Áè÷ñýí òåêñòèéã èäýâõæ¿¿ëýýä

23

Òåêñòèéí ºíãº ñîíãîõ. Äàðààãèéí ìºðä îðîîä -èéã äàðààä
çóðààñ çóðàõ.

Äàðààãèéí òåêñò áàñ áè÷ýýä
èíãýýä òåêñòèéã èäýâõæ¿¿ëýõ

èíãýýä òåêñòèéã èäýâõæ¿¿ëýõ

-èéã õî¸ð óäàà äàðààä
Ïàðàãðàôèéã óðäààñ çàé àâàõ.
-èéã äàðæ äóãààðëàõ.

Äàðààãèéí ìºðä îðîîä èíãýæ áè÷èõ. -èéã çóðãààí óäàà äàðñàí áîë èíãýæ áîëíî.

24

Òýãýýä ñ¿¿ëèéí òåêñòèéã áè÷èõ.

7. Õóóäàñûã õàäãàëàõ.
File>Save

8.Internet Explore äýýð øàëãàæ ¿çýõ .

Internet Explore äýýð ñàÿ õèéñýí
õóóäàñûã øàëãàæ ¿ç.

25

Õè÷ýýë- 10

Âýá õóóäàñ äýýð õýðýãëýõ çóðãèéí òóõàé

Èíòåðíåòýä îðîîä âýá õóóäñûã ¿çýõýä çóðàã óäààí èðäýã.
JPEG,GIF
ßàãààä ãýâýë óòàñíû õîëáîîíû õóðä óäààí.
Òèéì ó÷ðààñ âýá õóóäàñíû çóðãèéí ôàéëûí õýìæýý æèæèã íü äýýð.
Âýá õóóäàñ äýýð õýðýãëýäýã çóðãèéí ôàéëûí ôîðìàòóóä õî¸ð ç¿éë áàéíà.

JPEG (.jpg) îëîí ºíãºòýé ----ôîòîä õýðýãëýíý.

GIF (.gif) 256 ºíãºòýé ----Ýìáëýì, Ãàð÷èãûí çóðàãò õýðýãëýíý.
íýã ºíãèéã òóíãàëàãøóóëæ áîëíî.

[JPEG High (ºíäºð)]
1.Ôîòî âýá õóóäàñ äýýð õýðýãëýõ
çóðãèéí ôàéëààð õàäãàëàõ.

1) Photoshop äýýð
File>Open...
Kimi-Lesson/Web Design/ Lesson10-Jpeg-Gif/
balloons.tif

Ýõíèé JPEG-èéí
áàéäàë áàéäàë
JPEG-èéí
Ýõíèé JPEG-èéí ÷àíàð;
ôàéëûí ôàéëûí JPEG-High
õýìæýý õýìæýý: áîë 60 áîëãîõ.
33.61KB
[JPEG Medium (äóíä çýðãèéí)]
[400*300 pixel 267KB]

2) File>Save for web...
Ãàð÷ èðñýí öîíõíû
Settings-ààñ
[JPEG High] ñîíãî.

ôàéëûí ÷àíàð;
õýìæýý:16.81KB 30 áîëãî.

26

[JPEG Low (íàìõàí)] 2.Corel Draw äýýð õèéñýí ýìüáëåìûã âýá
õóóäñàí äýýð õýðýãëýõ çóðãèéí ôàéëààð
õàäãàëàõ.

1) Corel Draw äýýð
File>Open...
Kimi-Lesson/Web Design/Lesson10-Jpeg-Gif/
Miat-logo.cdr

ôàéëûí ÷àíàð;
õýìæýý:10.68KB 10 áîëãîõ.

Çóðãèéí ÷àíàð ºíäºð áîë çóðàã ñàéõàí
õàðàãäàæ ÷àäíà. Ãýõäýý ôàéëûí õýìæýý òîì
áîëîîä âýá õóóäàñ äýýð óäààí ãàð÷ èðíý.
×àíàð íàìõàí áîë çóðàãáàãà çýðýã ìóó
õàðàãäàæ áîëíî. Ãýõäýý ôàéëûí õýìæýý æèæèã -ãààð õýðýãòýé õýñãýý ñîíãîîä
áîëîîä âýá õóóäàñàí äýýð õóðäàí ãàð÷ èðíý.

Èéì ó÷ðààñ àëü íü äýýð âý ? ãýæ äàíäàà ñàéí
áîäîîä õàäãàëàõ ¸ñòîé.

Òýãýýä ÷àíàð áàñ ôàéëûí
õýìæýýã ñàéí áîäñîí áîë
OK-ã äàðààä íýð ºãººä
õàäãàëààðàé.
2) File>Export...
File of type-íààñ EPS ñîíãîîä
[Selected only](çºâõºí ñîíãîñîí õýñãýý) ñîíãî.

27

òýãýýä Export-ûã äàðààä ãàð÷ èðñýí öîíõîîñ
èíãýæ ñîíãîîä ( Resolution 72dpi)
Ok-ã äàðíà.

3) Photoshop äýýð ñàÿ õàäãàëñàí ôàéëûã íýýõ.
File>Open... ªíãèéã çàññàí áîë OK-ã äàðíà.

2) File>Save for web...
Ãàð÷ èðñýí öîíõíû
Settings-ààñ
[GIF 32 Ditherd] ñîíãî.

[Transparency]-ã ñîíãîñîí áîë
äýâñãýð òóíãàëàã áîëãîíî.

Resolution : 72 Pixel/inch (dpi-òàé àäèëõàí)
ñîíãîîä OK-ã äàðàõ.

Çàðèì ¿åä èíãýæ ºíãº íü ìóó õàðàãäàæ ìàãàäã¿é. Ýõíèé GIF-èéí
Òýãâýë Photoshop äýýð ºíãèéã çàñàõ õýðýãòýé. áàéäàë áàéäàë
GIF-èéí
Ýõíèé GIF-èéí ºíãºíèé òîî
Image>Adjust>Hue/Saturation ôàéëûí ôàéëûí
ñîíãîîä ºíãº çàñàõ. õýìæýý õýìæýý:
33.61KB

28

GIF ºíãºíèé òîî áàãà áîë Ãàð÷ èðñýí Color Picker öîíõîíû äýýð
ôàéëûí õýìæýý àðàé æèæèã áîëíî. [Only Web Colors] ñîíãî
âýá õóóäàñíû äýâñãýðèéí ºíãºòýé àäèëõàí
ºíãèéã( àäèëõàí ºíãºíèé äóãààð ) ñîíãî.
Òýãýýä OK-ã äàðíà.

Íýã ÷óõàë þì áàéãàà.
Õýðâýý òà âýá õóóäàñ äýýð èéì óëààí
äýâñãýðèéí ºíãº (ºíãºíèé äóãààð : #FF0000)
ºãºõ áîë,

Òýãñýí áîë âýá õóóäàñ äýýð èíãýæ õàðàãäàõ.

GIF-ýýð õàäãàëàõ ¿åä Matt: -ààñ Other...
ñîíãî.

Matt: -ààñ àäèëõàí ºíãº ñîíãîîã¿é áîë èéì
àðçãàðòàé áîëãîõ.

29

Õè÷ýýë- 11

Çóðàã òàé âýá õóóäàñ

Èéì çóðàãòàé âýá õóóäàñûã õèéæ ¿çíý ¿¿ ?

30

1. Ýõëýýä äîîðõ Internet Explore-èéí 3) Edit>Paste (Ctr+V)
çóðãèéã õèéæ ¿çýõ.

4) -ãààð õýðýãòýé õýñãèéã òàéðíà.

1) Internet Explore-èéã àæèëëóóëàõ.
Öîíõûã òîõèðîìæòîé æýìæýýä íýýãýýä
ãàðààñ PrtSc òîâ÷èéã äàðàõ.

5) -ãààð õýðýãã¿é õýñãèéã òýìäýãëýýä
Delete õèéíý.

2) Photoshop-èéã àæèëëóóëíà.
File>New...

31

6) Layer>Flatten Image 9) -ãààð äîîðõ òýìäýãëýýä
-èéã ñîíãîîä Ctr+Alt+Shift äàðààä
äîîøîî Drag õèéíý.

7) Image>Canvas Size...îðîîä
äîîðõî õóóäàñíû õýìæýýã óðò õèéíý.

10) File>Save As...
IE-image ãýæ íýð ºãººä
JPEG-ãààð õàäãàëíà.

32

Ýíý IE-image.jpg ôàéëûã äàðàà ¿ðãýëæ
õýðýãëýõ.

2.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýõ.
Ýõýëýýä Windows Explore-èéã àæèëëóóëàõ. Òýãýýä ýíý Internet Explore öîíõ äîòîð
äèçàéí õèéíý.
Kimi-Lesson/ My Works/ îðíî.

File>New>Folder
Øèíý õàâòàñûã íýýíý.
ªºðèéí íýð ºãíº. 4.File>Import...
Kimi-Lesson / Web Design / Lesson11-Magic/
Mongol-clipart.cdr

3.Corel Draw-èéã àæèëëóóëíà. 5.Äîîðõ òåêñò çóðààñ çóðíà.
Øèíý õóóäàñ õèéãýýä A3 öààñ ñîíãî.

File>Import...ñàÿ õèéñýí IE-image îðóóëæ èðíý.

33

5.File>Import...
kharakorm.JPG

OK-ã äàðíà.
7.Èíãýýä Ãàð÷èã áàñ ôîòî-ûã òóñ òóñ
ñîíãîîä
File>Export...
EPS-ãààð õàäãàëàõ.

6.Mongol-Clipart-ã ñîíãîîä

File>Export...

File of type-íààñ EPS ñîíãî
[Selected only](çºõºí ñîíãîñîí õýñýã) ñîíãîíî. 8. Photoshop-èéã àæèëëóóëàõ.
File>Open...
ñàÿ õàäãàëñàí ãóðâàí ôàéëûã íýýíý.

34

Resolution : 72 Pixel/inch (dpi-òàé àäèëõàí) 10.File>Save for Web...
ñîíãîîä OK-ã äàðíà
GIF 32 Ditherd -ã ñîíãîîä

9.Ýíý çóðãèéí ºíãº çàñ
çàñíà.

Matte-íààñ white ñîíãîîä OK-ã äàðíà

ªºðèéí õàâòàñ äîòîð õàäãàëíà.
Image>Adjust>Hue/Saturation...

10.Ãàð÷èãèéí çóðàã áàñ àäèëõàí
File>Save for Web...
GIF 32 Ditherd -ã ñîíãîîä õàäãàëíà.

35

11.Äîîðõ ôîòîã õàäãàëíà. 12. Dreamweaver-èéã àæèëëóóëàõ.
Øèíý SITE (ñàéò) -ã òîäîðõîéëîõ

Site>New Site...
Local Root Folder -îîñ ººðèéí Folder ñîíãîíî.

JPEG Medium -ã ñîíãîîä OK-ã äàðíà.
Ãàð÷ èðñýí Site Window-èéã õààíà.

File>Save As... index.html
ººðèéí Folder äîòîð õàäãàëíà.

Title áè÷ýýä Ìîíãîëîîð áè÷èõ áîë:
Cylilic(windows-1251) ñîíãî.

OK-ã äàðíà.

36

15.Õóóäñàí äýýð òåêñò áè÷ýõ. Äàðààãèéí ìºðä îðîîä äàðíà.
Size 4, Bold, äàðààä ãîëëóóëíà.

16.Çóðãèéã îðîîëæ èðíý.
Enter äàðààä äàðààãèéí ìºðä îðîîä äàðíà.
Ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã
ñîíãî.

17.Òåêñò áàñ çóðààñ çóðàõ.

Äàðààãèéí ìºðä îðîîä äàðíà.

18.File>Save

19.F12 òîâ÷ëóóð äàðààä
Internet Explore äýýð õóóäàñûã øàëãàæ
¿ç.

37

Õè÷ýýë- 12

Link (õîëáîëò) áàéãóóëàõ

1.Õýðýãòýé ôàéëûã Copy õèéõ.
Òýãýýä Property öîíõîîñ -ã äàðààä
Ýõýëýýä Windows Explore-èéã àæèëëóóëíà.
Kimi-Lesson/Web Design/ WD-Lesson12-Link/
îðîîä ýíä áàéãàà 4 õàâòàñûã ñîíãîîä Copy
Õè÷ýýë 10 äýýð õèéñýí ººðèéí õàâòàñ îðîîä
Paste õèéíý.
Ãàð÷ èðñýí öîíõ äýýð about Mongol - õàâòàñààñ
mongol-tuhai.html ôàéëûã ñîíãîíî.

Èíãýýä Link áàéãóóëñàí.

2.Dreamweaver àæèëëóóëààä Õè÷ýýë 10 äýýð
õèéñýí index.html ôàéëûã íýýíý.
File>Open

Äàðààãûí òåêñò áàñ àäèëõàí.

2.Link (õîëáîëò) áàéãóóëàõ.
Äîîðõ Link áàéãóóëìààð òåêñòèéã
èäýâõæ¿¿ëíý.

38

3.Internet Explore äýýð õóóäàñûã øàëãàæ Äîîðõ Link áàéãóóëàõ òåêñòèéã èäýâõæ¿¿ëýýä
¿çýõ.

Äîîðîõ á¿ãä Link áàéãóóëñàí áîë File>Save

Property öîíõîîñ -ã äàðààä

Internet Explore äýýð õóóäàñûã øàëãàæ
¿çýýðýé.

index.html ôàéëûã ñîíãîíî.
Òýãýýä File>Save

Ulaanbaatar.html, Map.html, Link.html áàñ
àäèëõàí.

3.Í¿¿ð õóóäàñ òàé Link áàéãóóëàõ.
Îäîî Í¿¿ð õóóäàñòàé Link áàéõã¿é ó÷ðààñ
File>Open... mongol-tuhai.html

3.Äàõèàä Internet Explore äýýð õóóäàñûã
øàëãàæ ¿çíý.

F12 òîâ÷ëóóð äàðíà.

39

Õè÷ýýë- 13

Õ¿ñíýãòòàé âýá õóóäàñ

40

1.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýõ.
Ýõýëýýä Windows Explore-èéã àæèëëóóëàõ.
Kimi-Lesson/ My Works/ îðîîä
øèíý ººðèéí õàâòàñûã õèéíý.

Kimi-Lesson/Web Design/ WD-Lesson13-
Table-Page/ îðîîä ýíä áàéãàà about-mongol
õàâòàñûã ñîíãîîä Copy õèéíý.

File>Save As... about-Page.html

Òýãýýä ñàÿ õèéñýí ººðèéí õàâòàñ îðîîä 4.Page Property-èéã òîõèðóóëàõ
Paste õèéíý. Modify>Page Properties...
Title áè÷ýýä Ìîíãîëîîð áè÷èõààð

2. Dreamweaver-èéã àæèëëóóë.
Øèíý SITE (ñàéò) -ã òîäîðõîéëîõ

Site>New Site... 5.Ãàð÷èã áè÷èõ.
Local Root Folder -îîñ ººðèéí õàâòàñ ñîíãîíî. -ã äàðíà.

41

-ã Click õèéãýýä õ¿ñíýãò õèéíý.

Äîîðõè òåêñòèéã áè÷íý.

Í¿äíèé ºíãº ñîíãîõ.

Äàðààãèéí í¿äýíä îðîîä -ã äàðààä çóðãèéã
îðóóëæ èðýõ.

, -ã ñîíãîîä òåêñòèéí õýìæýý: 6 ñîíãîíî.
Òåêñòèéí ºíãº : öàãààí

6.Äàðààãèéí õ¿ñíýãò õèéõ.

Enter äàðààä äàðààãèéí ìºðä îðîîä
Òåêñòèéí í¿äèéã æààõàí òîìðóóëàõ.
-ã Click õèéíý.

42

7.Äàðààãèéí õ¿ñíýãò õèéõ. Õî¸ð í¿ä ñîíãîîä -ã äàðààä íýãòãýíý.

Enter äàðààä äàðààãèéí ìºðºíä îðîîä
-ã Click õèéíý.

Äîîðõè òåêñòèéã áè÷ýýä í¿äíèé ºíãèéã
ñîíãîíî.

Õ¿ñíýãòèéã ñîíãîîä
Cell Space: 0
Border : 1
Õ¿ðýýíèé ºíãèéã õàðààð ñîíãîíî.

43

Òàâàí í¿ä ñîíãîîä -ã äàðààä íýãòãýíý.

Á¿ãä òåêñò áè÷íý.

8.Internet Explore äýýð õóóäàñûã øàëãàæ
¿çýõ.


Ñ¿¿ëä -ã äàðààä çóðãèéã îðîîëæ èðíý.

44

Õè÷ýýë- 14

Hotspot, Anchor

45

1.Õýðýãòýé ôàéëûã Copy õèéíý. 3.Corel Draw äýýð õóóäàñíû äèçàéí øèéäíý.
Ýõëýýä Windows Explore-èéã àæèëëóóëíà.
-ãààð äºðâºëæèí çóðààä äýâñãýðèéí ºíãº
ñîíãîíî.
Hotspot/ îðîîä ýíä áàéãàà map
õàâòàñûã ñîíãîîä Copy õèéíý.
òýãýýä ºìíº õèéñýí ººðèéí õàâòàñ îðîîä
Paste õéèíý.

File>Import...Kimi-Lesson/Web Design/
2.Corel Draw-èéã àæèëëóóëíà. WD-Lesson14-Hotspot/ îðîîä
Øèíý õóóäàñ õèéãýýä A3 öààñ ñîíãîíî. Mongol-map.cdr îðóóëæ èðíý.

File>Import...Kimi-Lesson/Web Design/
WD-Lesson14-Hotspot/ îðîîä
IE-image îðóóëæ èðíý.

Ãàð÷èãèéí òåêñò áè÷íý.

46

Ãàð÷èãèéí òåêñòèéã ñîíãîîä 4. Photoshop-èéã àæèëëóóëíà.
File>Export.... map-title ãýäýã íýð ºãººä File>Open...
EPS-ãààð õàäãàëíà. ñàÿ õàäãàëñàí õî¸ð ôàéëûã íýýíý.

Äîîðõè øèã ñîíãîîä OK-ã äàðíà.
72 pixel/inch, RGB color ñîíãîîä OK-ã äàðíà.

Ãàð÷èãèéí çóðãèéã ñîíãîîä
Ãàçðûí çóðàã áàñ àäèëõàí.
File>Export.... mon-map ãýäýã íýð ºãººä
GIF 32 Ditherd -ã ñîíãîíî.
EPS-ãààð õàäãàëíà.

47

Matte-ààñ Other... ñîíãîîä 5. Dreamweaver-èéã àæèëëóóëíà.
Site>Open Site...
ªìíº õèéñýí ººðèéí Site áàéñàí áîë òýðèéã
ñîíãîíî. Õýðâýý áàéõã¿é áîë
Site>New Site... -ã òîäîðõîéëîîðîé.

Òýãýýä ñîíãîñîí äýâñãýðèéí
ºíãºíèé äóãààð öýýæèëíý. OK äàðíà.

File>Save As... mon-map.html

ªºðèéí Folder äîòîð Copy õèéñýí map folder
äîòîð õàäãàëíà.

Title áè÷ýýä
Ñàÿ öýýæèëñýí äýâñãýðèéí ºíãº ñîíãîíî.

Ãàçðûí çóðàã áàñ àäèëõàí.
GIF 32 Ditherd -ãààð õàäãàëíà.


48

Enter äàðààä äàðààãèéí ìºðä îðîîä
Òåêñòèéã áè÷íý.

Äàðààãèéí ìºðä îðîîä
-ã äàðààä çóðààñ çóðíà.

7.Çóðãèéã îðóóëæ èðíý.
äàðààä ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí
çóðãèéã ñîíãîíî.

Äàðààãèéí ìºðä îðîîä
-ã äàðààä õ¿ñíýãò õèéíý.

Enter äàðààä äàðààãèéí ìºðä îðîîä äàðíà.
Ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñ îíãîíî.

49

Õ¿ñíýãòèéí õýìæýýã ººð÷èëíº.
8. (Anchor)-ã òàâèíà.

-ã äýýð òàâèàä
Í¿äíèé ºíãº ñîíãîíî.
Object Panel-ààñ Invisibles ñîíãîíî.

(Anchor)-ã äàðààä
Òýãýýä òåêñò áè÷ýýä
fubus ãýæ íýð ºãíº.
-ã äàðààä çóðààñ çóðààä -ã äàðààä
çóðãèéã îðóóëæ èðíý.

TOP ãýæ òåêñò áè÷íý.

50

9. Hotspot õèéíý.
Ãàçðûí çóðãèéã ñîíãîíî.

TOP òåêñòèéã èäýâæë¿¿ëýýä

Link äîòîð #top ãýæ áè÷íý.

-ã ñîíãîîä Link áàéãóóëìààð õýñýã(Hotspot)-ã
òýìäýãëýíý.

Òýãýýä (Anchor), õ¿ñíýãò, TOP òåêñòèéã ñîíãîîä
Copy (Ctrl-C) õèéíý.

Òýãýýä Link äîòîð #fubus ãýæ áè÷íý.

-ã äîîð òàâèàä (Anchor)-ã äàðààä
top ãýæ íýð ºãíº.

51

Õ¿ñíýãòèéí òåêñò, ºíãº, çóðãèéã ººð÷èëººä
(Anchor)-ã ñîíãîîä otgon ãýæ íýð ºãíf.

Òýãýýä ãàçðûí çóðãèéí äýýð
-ã ñîíãîîä Link áàéãóóëìààð õýñýã (Hotspot)-ã
òýìäýãëýíý.
Link äîòîð #otgon ãýæ áè÷íý.

Èíãýæ ¿ãäèéã anchor áàñ Hotspot òàâèíà.

10.Internet Explore äýýð õóóäñûã øàëãàæ
¿çíý.


52

Õè÷ýýë- 15

Rollover Image

1.ªºðèéí õàâòàñ íýýíý. 3.Òîâ÷èéã õèéæ ¿çíý.
Ýõýëýýä Windows Explore-èéã àæèëëóóëíà.
Corel Draw-èéã àæèëëóóëíà.
Kimi-Lesson/My works/ îðîîä øèíý ººðèéí File>Open...Kimi-Lesson/Web Design/
õàâòàñûã íýýíý. WD-Lesson15- Rollover/ step-1.cdr
File>New>Folder

-ãààð äºðâºëæèí çóðíà.

2.Õýðýãòýé ôàéëûã Copy õèéíý.

Rollover/ îðîîä ýíä áàéãàà 5 õàâòàñûã ñîíãîîä
Copy õèéíý.

Áóëàíãèéí õýëáýðèéã ººð÷èëíº.

Òýãýýä ñàÿ íýýñýí ººðèéí õàâòàñ äîòîð îðîîä
Paste õèéíý.

Ôîíûã ñîíãîíî.

53

Íýð ºãººä EPS-ãààð õàäãàëíà.

Äîîðõè øèã ñîíãîîä OK-ã äàðíà.

Òåêñò áè÷íý.

Photoshop-èéã àæèëëóóëíà.
File>Open...
ñàÿ õàäãàëñàí ôàéëûã íýýíý.

Òåêñò áàñ òîâ÷èéã ñîíãîîä
File>Export... kimi005

54

Äîîðõè øèã ñîíãîîä OK-ã äàðíà. Layer-èéí Ýôôåêòèéã ºãíº.
Layer>Effects>Bevel and Emboss

ªíãº çàñíà.
Image>Hue/Saturation...


Matte-íààñ Other... ñîíãîîä
äýâñãýðèéí ºíãº ñîíãîíî.

55

OK-ã äàðààä ººðèéí õàâòàñ äîòîð õàäãàëíà. OK-ã äàðààä ººðèéí õàâòàñ äîòîð
ººð íýð ºãººä õàäãàëíà.

Òîâ÷íû ºíãº ººð÷èëíº. Rollover Image-òýé âýá õóóäàñ õèéíý.
Image>Adjust>Varietions...
Site>New Site... -ã äàðààä ñàÿ íýýñýí
ººðèéí õàâòàñ ñîíãîíî.


Site öîíõûã õààíà.

5.Âýá õóóäñûã õàäãàëíà.
File>Save As... rollover-page.html
ººðèéí õàâòàñ äîòîð õàäãàëíà.

56

6.Page Property-èéã òîõèðóóëàõ 7.Õ¿ñíýãò õèéíý.
Title áè÷ýýä -ã äàðààä õ¿ñíýãò õèéíý.
Ñàÿ öýýæèëñýí äýâñãýðèéí ºíãº ñîíãîíî.

8.Çóðãèéã îðóóëæ èðíý.

-ã äàðààä õ¿ñíýãòèéí í¿äýí äîòîð
-ã äàðààä ãîëîîð çýðýãö¿¿ëíý.
çóðãèéã îðóóëæ èðíý.

57

9.Òåêñò áè÷íý.

Äàðààãèéí í¿äýíä îðîîä Vert-ààñ TOP
ñîíãîîä äýýð íü òåêñò áè÷íý.

Äàðààãèéí ìºðºíä îðîîä

10.Òîâ÷èéã îðóóëæ èðíý.

-ã äàðààä ãàð÷ èðñýí öîíõíîîñ çóðãèéã
-ã äàðààä çàé àâíà. ñîíãîíî.

58

Original Image-ààñ -ã äàðààä Èíãýæ ººð òîâ÷ áàñ -ã äàðààä ãàð÷ èðñýí
about.gif ñîíãîíî. öîíõíîîñ çóðãèéã ñîíãîíî.

Rollover Image-ààñ -ã äàðààä
about2.gif ñîíãîíî.

When Click...-ààñ -ã äàðààä
mongol-thuhai.htm ñîíãîíî.

çóðààñ çóðààä çîõèîã÷èéí ýðõèéí òóõàé
áè÷íý.

59

¿çíý.


60

Õè÷ýýë- 16

Frame-òýé âýá õóóäàñ

61

1.ªºðèéí õàâòàñ íýýíý. 3. Dreamweaver-èéã àæèëëóóëíà.
Ýõëýýä Windows Explore-èéã àæèëëóóëíà. Site>New Site... -ã äàðààä ñàÿ íýýñýí
Kimi-Lesson/My works/ îðîîä øèíý ººðèéí ººðèéí õàâòàñ ñîíãîíî.
õàâòàñûã íýýíý.

File>New>Folder

2.Õýðýãòýé ôàéëûã Copy õèéíý.
Kimi-Lesson/Web Design/ WD-Lesson15-Frame/
îðîîä ýíä áàéãàà 5 õàâòàñûã ñîíãîîä Site öîíõûã õààíà.
Copy õèéíý.
4.Frame-ä õóâààíà.
Objects öîíõîîñ Frames ñîíãîíî.

Òýãýýä ñàÿ íýýñýí ººðèéí õàâòàñàíä îðîîä
Paste õèéíý. -ã äàðíà.

62

Frameset ãýäýã Top-Frame õóóäñûã õàäãàëíà.
File>Save Frame as...
ººðèéí õàâòàñ äîòîð top-frame ãýæ
íýð ºãººä õàäãàëíà.

top-frame

side
-frame main-frame

Page Property-èéã òîõèðóóëàõ

Title áè÷ýýä
5.Frameset -ã õàäãàëíà. Äîîðõèéã ñîíãîíî.
File>Save Frameset as...
ººðèéí õàâòàñ äîòîð õàäãàëíà.

Objects öîíõîîñ Common ñîíãîíî.

6.Top-Frame õóóäàñûã õèéíý.
Äîîðõè Top-Frame õóóäñûã ñîíãîíî.


63


-ã äàðààä çóðãèéã îðóóëæ èðíý.
Frame-Image õàâòàñíààñ ñîíãîíî.
Õ¿ñíýãòèéí í¿äèéã á¿ãäèéã íü èäýâõæ¿¿ëíý.

Òýãýýä File>Save Frame ñîíãîíî.

7. Side-Frame õóóäñûã õèéíý.
Äîîðõè Side-Frame õóóäñûã ñîíãîíî.

Í¿äíèé ºíäðèéã 20 pixel ºãíº.

Side-Frame õóóäàûã õàäãàëíà.
File>Save Frame as...
ªºðèéí õàâòàñ äîòîð side-frame ãýæ
íýð ºãººä õàäãàëíà. Í¿äíèé ºíãº ñîíãîíî.

Title áè÷ýýä äîîðõèéã ñîíãîíî.

64

Modify>Page Properties... 8. Main-Frame äîòîð õóóäñûã îðóóëæ èðíý.
Main-Frame -ã ñîíãîíî.
Äýýä áà ç¿¿í òàëûí çàéä 0 ºãíº. File>Open in frame...
mongol-tuhai.html ñîíãîíî.

Í¿äíèé äîòîð òåêñò áè÷íý.

Ãàäíà òàëûí õ¿ðýý äàðààä Frameset-ã
ñîíãîíî.

Òýãýýä File>Save Frame ñîíãîíî.

Òýãýýä File>Save frameset

65

9. Link (õîëáîëò) õèéíý. Link òàâüñàí òåêñòèéí ºíãº õàðàõ õýö¿¿ áîë
Link (õîëáîëò) õèéõ òåêñòèéã èäýâõæ¿¿ëíý. Modify>Page Properties... îðîîä
Links-ààñ ºíãº ñîíãîíî.

Link -ààñ -ã äàðààä õîëáîëò õèéõ
õóóäñûã ñîíãîíî.

Ñ¿¿ëä á¿õ Frame-ã õàäãàëíà.
File>Save All Frame

¿çíý.

Òýãýýä Target -ààñ mainFrame ñîíãîíî. F12 òîâ÷ëóóð äàðíà.

Èíãýæ á¿ãäèéã Link õèéíý.

66

Õè÷ýýë- 17

Animation GIF (Õºäºëãººíòýé çóðàã)

67

Õºäºëãººíòýé çóðãèéã õèéõ. 2. ªíãèéã çàñíà.
Image>Adjust>Hue/Saturation

1. Adobe ImageReady-èéã àæèëëóóëíà.

3. Õºäºëäºã õºãæèì÷íèé çóðãèéã õèéíý.

-ãààð òîìðóóëæ õàðààðàé.

Layer>Duplicate Layer..
File>Open...
Animation-GIF/ morin.eps

OK äàðíà.

-ãààð òîëãîéã òýìäýãëýýä
Ctrl-T äàðààä æààõàí ýðã¿¿ëíý.

68

-ãààð ãàð áàñ òýìäýãëýýä Animation Öîíõ äýýð -ã äàðààä
Ctrl-T äàðààä æààõàí ýðã¿¿ëíý. øèíý õ¿ðýý õèéíý.
Òýãýýä Layer öîíõ äýýð Layer 1 copy -ã
¿ç¿¿ëýýä Layer 1 -ã íóóíà.

Animation Öîíõ äýýð 1-ð õ¿ðýýã ñîíãîîä
Layer öîíõ äýýð Layer 1 copy -ã íóóíà.

-ã äàðààä Play õèéíý.

69

Õóðäàí õºäºëæ áàéâàë õ¿ëýýõ ñåêóíä ñîíãîíî. Matte-ààñ None ñîíãîíî.

Äàâòàëòààñ Forever -ã ñîíãîíî.
File>Save Optimized as...
GIF -ãààð ººðèéí õàâòàñ äîòîð õàäãàëíà.

Optimize öîíõ-ààñ GIF 32 Ditherd ñîíãîîä
4. Õºäëºõ ãàð÷èãèéí çóðãèéã õèéíý.
File>New...

70

Äàõèàä -ã äàðààä øèíý Layer-ã íýìíý.

-ãààð äóðòàé ºíãº áàñ çîõèîìæòîé õýìæýýã
Layer 3 äýýð íýã ¿ñýã çóðíà.
ñîíãîîä íýã ¿ñýã çóðíà.

Èíãýýä òóñ òóñ øèíý Layer äýýð íýã ¿ñýã
çóðíà.

Layer öîíõíîîñ -ã äàðààä øèíý Layer-ã
íýìíý.

Layer 2 äýýð íýã ¿ñýã çóðíà.

71

Äàõèàä -ã äàðààä øèíý Layer-ã íýìýýä Image>Adjust>Hue/saturation îðîîä
ªíãº ººð÷èëíº .
MONGOL ãýæ çóðíà.

Animation Öîíõ äýýð 1-ð õ¿ðýýã ñîíãîîä
Layer öîíõ äýýð çºâõºí Layer 1 -ã õàðóóëíà.

Layer>Duplicate Layer
Layer 8 copy õèéíý.

72

Animation Öîíõ äýýð -ã äàðààä Èíãýæ Animation Öîíõ äýýð7-ð õàëüñ
øèíý õàëüñ õèéíý. õ¿ðòýë õèéíý.

Òýãýýä Layer öîíõ äýýð Layer 2-ã áàñ õàðóóëíà.

Animation Öîíõ äýýð -ã äàðààä
øèíý õàëüñ õèéíý.

Òýãýýä Layer öîíõ äýýð Layer 3 -ã áàñ õàðóóëíà.

73

8-ð õàëüñàí äýýð çºâõºí Layer 8 -ã õàðóóëíà. 10-ð õàëüñàí äýýð çºâõºí Layer 8 -ã õàðóóëíà.

11-ð õàëüñàí äýýð çºâõºí Layer 8 copy -ã
õàðóóëíà.

9-ð õàëüñàí äýýð çºâõºí Layer 8 copy -ã
õàðóóëíà.

-ã äàðààä Play õèéíý.

74

7-ð õàëüñàí äýýð æààõàí õ¿ëýýõ íü äýýð. File>Save Optimized as...
0.5 õ¿ëýýõ ñåêóíä ñîíãîíî. GIF -ãààð ººðèéí õàâòàñ äîòîð õàäãàëíà.

Optimize öîíõ-îîñ GIF 32 Ditherd ñîíãîîä Site>New Site... -ã äàðààä ººðèéí õàâòàñ
ñîíãîíî.

Matte-ààñ None ñîíãîíî. File>Save as...
ªºðèéí õàâòàñ äîòîð õàäãàëíà.

75

Page Property-èéã òîõèðóóëàõ 6.Internet Explore äýýð õóóäñûã øàëãàæ
Modify>Page Properties... ¿çíý.
Title áè÷ýýä äîîðõè øèã ñîíãîíî.

-ã äàðààä çóðãèéã îðóóëæ èðíý.

76

Õè÷ýýë- 18

Upload (Èíòåðíýòýä ôàéëûã ñóóëãàõ)

ªºðèéí êîìïüþòåð äýýð õèéñýí âýá ñàéòûã
SITE (ñàéò) -ã òîäîðõîéëîõ
Èíòåðíýòýä ñóóëãàõûí òóëä:
Site>Open Site...
ªºðèéí êîìïüþòåðèéí äýýð õèéñýí
âýá ñàéòûã ñîíãîíî.
1.Èíòåðíýòýä õîëáîõ õýðýãòýé.
HTTP Adress: -ä
http://kimi.k-free.net -ã áè÷íý.

2.Internet Provider (Èíòåðíýò õîëáîëò
êîìïàíè) ýñâýë ¿íýã¿é âýá ñàéòòàé ãýðýý Remote Info ñîíãîîä
õèéãýýä Access-ààñ FTP ñîíãîíî.
-URL (âýá ñàéòûí õàÿã) FTP Host: -ä
-FTP server name ftp.kimi.k-free.net -ã áè÷íý.
-User ID Login: -ä
-Password kimi
àâàõ õýðýãòýé. Password: -ä
******** Íóóö ¿ã áè÷íý.

Æèøýý

URL:
http://kimi.k-free.net

FTP server name:
ftp.kimi.k-free.net

User ID:kimi
Password:********

Ok-ã äàðíà.

77

4. Í¿¿ð õóóäàñûí íýð ººð÷èëíº.
7. Á¿õ ôàéëûã ñóóëãàñàí áîë -ã äàðààä
Âýá ñàéòûí í¿¿ð õóóäàñíû íýð
index.htm ýñâýë index.html ãýæ áàéõ ¸ñòîé. õîëáîëò óíòðààíà.

8.Internet Explore äýýð âýá ñàéòûã øàëãàæ
¿çíý.

URL-ã áè÷íý.

5. -ã äàðààä ãýðýý õèéñýí âýá ñàéòòàé
õîëáîëò
õèéíý.

Îäîî ãýðýý õèéñýí âýá ñàéòûã õàéæ áàéíà.

6. Ñóóëãàõ ôàéëûã á¿ãäèéã íü ñîíãîîä -ã
äàðíà.

78

Êîìïüþòåðèéí ãðàôèê äèçàéí
ªºðºº ñóðàõ áè÷èã 4 - Web Design

Çîõèîã÷ :
Õàÿøè Êèìèõèêî

Òóñëàñàí õ¿ì¿¿ñ :
Á.Ãàíòóëãà, Á.Áàòçîðèã, Ý.Ñàíñàðòóÿà,
Ã.Àççàÿà, Ý.Áîëîðòóÿà, À.Îþóíãýðýë,
Ã.×èíçîðèã, Á.Ýíõíàéðàìäàë

Ñ.×óëóóí-Ýðäýíý, Á.Öýíäñ¿ðýí,×.Îþóíöýöýã

Ñî¸ëûí Êîëëåæ

Óëààíáààòàð 2002

Óã íîìûã á¿õýëä íü áîëîí õýñýã÷ëýí çºâøººðºëã¿éãýýð õóâèëàí
îëøðóóëæ, õóäàëäààëàõûã õîðèãëîíî.

79

Web design book

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

En vedette

En vedette (18)

Plus de enerel

Plus de enerel (8)

Web design book