You are on page 1of 80

ªìíºõ ¿ã

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

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

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

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

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

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

1

Ãàð÷èã

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

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

Õè÷ýýë- 04 Õè÷ýýë- 05 Õè÷ýýë- 06
HTML-2 HTML-3 Dreamweaver ãýæ þó âý ?

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

Õè÷ýýë- 10 Õè÷ýýë- 11 Õè÷ýýë- 12
Âýá õóóäàñ äýýð õýðýãëýäýã çóðãèéí Çóðàã òàé âýá õóóäàñ Link (õîëáîëò) áàéãóóëàõ
òóõàé

Õè÷ýýë- 13 Õè÷ýýë- 14 Õè÷ýýë- 15
Õ¿ñíýãòòàé âýá õóóäàñ Hotspot, Anchor Rollover Image

2

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

3

.Press ç¿¿í òîâ÷ëóóðèéã äàðààä 纺õ. áàðóóí Click ç¿¿í òîâ÷ëóóð óäààí äàðàõ.Mouse (õóëãàíà) -íèé àæèëëàãààã íýðëýõ íýã óäàà äàðàõ..Click õî¸ð óäàà äàðàõ.Drag Ýíý íîìîíä Mouse (õóëãàíà) -íèé àæèëëàãààã èíãýæ íýðëýæ áîëíî..Double Click áàðóóí òîâ÷ëóóð äàðàõ ................. 4 ....

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

Âýá õóóäàñûã ¿ç¿¿ëýõ ïðîãðàìì õàíãàìæ 1..02 Internet Explore ¿íäñýí êîìàíäóóäûí òîâ÷ëóóðóóä Internet Explore ... Internet Explore ¿íäñýí êîìàíäóóäûí òîâ÷ëóóðóóä Ýõëýýä File>Open. Áóöàõ Çîãñîîõ Ãýð Ýðãýæ Õàéõ -ã ãàð÷ èðýõ õýñãèéã äàð ! ªìíºõ à÷ààëàõ 6 .Õè÷ýýë.. Internet Explore ïðîãðàììûã àæèëëóóëàõ 2.html-ã íýýãýýä ¿ç. kimi-Lessons /web design / WD-Lesson02-Internet index.

></. Èéìýýñ Note pad ïðîããðàìì äýýð âýá õèéæ áîëíî... 2.. <HTML> . <HEAD> ..> èéã Tag ãýäýã. HTML -èéí ¿íäñýí ïðîãðàìèéí õýë Ýõëýýä Note pad ïðîãðàìì äýýð äîîðõ áè÷ýýðýé.. Notepad ïðîãðàììûã àæèëëóóëñàí. “ ãýæ çààæ áàéíà.Õè÷ýýë. 3.. </HTML> “Ýíý Ôàéë HTML-ãààð áè÷èæ áàéíà. HTML ãýæ þó âý? HTML ãýäýã íü Âýá õóóäñûã êîìïüþòåðèéí ïðîãðàììèéí õýë äýýð áè÷äýã òåêñòýí ôàéë. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <.. Notepad ïðîãðàììûã àæèëëóóëàõ [Start] -[Programs] -[Accessories]-Notepad-ã ñîíãîíî. </HEAD> Ýíý çàâñàðò íü õóóäàñ äýýð õàðàãäàõã¿é õýðýãòýé ìýäýýëýëèéã áè÷íý..03 HTML-1 1... 7 .

</TITLE> ýíý çàâñàðò âýá õóóäàñíû ãàð÷èã áè÷íý.. HTML -èéí ôàéëûã Internet Explore äýýð ¿ç. Internet Explore äýýð File>Open. Òýãýýä File>Save As... 4.. 8 .. Âýá õóóäàñûí ãàð÷èã ýíä ãàðíà.. Äàðààõè òåêñòèéã íýìíý.. OOO... <P> ..html ãýæ íýð áè÷ýýä õàäãàëààðàé. </P> ýíý çàâñàðò ºã¿¿ëáýð áè÷. <HTML> <HEAD> <TITLE>HTML Web Page</TITLE> </HEAD> <BODY> <P>Welcome to HTML Web Page!</P> </BODY> </HTML> <TITLE> .

</FONT> Òåêñòèéí ºí㺠ººð÷èëºõ.. <STRONG>..</STRONG> ¯ñãèéí õýëáý𠺺ð÷èëíº---Bold <EM>..¯ñãèéí õýëáý𠺺ð÷èëºõ.</P> ãîëîîð çýðýãö¿¿ëñýí ºã¿¿ëáýð <P align="right">. <HTML> <HEAD> <TITLE>HTML Web Page</TITLE> </HEAD> <BODY> <P>Welcome to HTML Web Page!</P> <P align="center">Welcome to HTML Web Page!</P> <P align="right">Welcome to HTML Web Page!</P> </BODY> </HTML> <P align="center">....... <HTML> <HEAD> <TITLE>HTML Web Page</TITLE> </HEAD> <BODY> <P><FONT size="6">Text size change </FONT> <P><FONT size="-2">Text size change 2</FONT> <P><FONT color="blue">Text color change </FONT> <P><FONT color="#0000FF">Text color change 2</FONT> <P><FONT size="6" face="Times New Roman">Text font and size change </FONT> <P><FONT size="6" face="Times New Roman"><STRONG>Text strong</STRONG> </FONT> <P><FONT size="7" face="Arial"><EM>Text EM</EM> </FONT> </BODY> </HTML> <FONT size=" ">.html ãýæ íýð ºã. <FONT face=" ">.</FONT> Òåêñòèéí õýìæýý ººð÷èëºõ.</P> áàðóóí òàëààð çýðýãö¿¿ëñýí ºã¿¿ëáýð Äýýðõ Notepad äýýð áè÷ýýä õàäãàëààä (OOO..... 2... Òåêñòèéã çýðýãö¿¿ëýõ...) Internet Explore äýýð íýýãýýä ¿ç .04 HTML-2 1...</U> ¯ñãèéí õýëáý𠺺ð÷èëºõ---Underline 9 .</EM> ¯ñãèéí õýëáý𠺺ð÷èëºõ---Italic <U>..Õè÷ýýë. <FONT color=" ">...</FONT> Òåêñòèéí øðèôò ººð÷èëºõ...

<TABLE> <TR> Ýãíýý <TD></TD> Áàãàíà </TR> </TABLE> <TABLE border=""> Õ¿ðýýíèé ºðãºí <TABLE width=" "> Õ¿ñíýãòèéí ºðãºíèé õýìæýý <TABLE height=" "> Õ¿ñíýãòèéí ºíäðèéí õýìæýý <TABLE bgcolor=" "> Õ¿ñíýãòèéí ºí㺠<TD bgcolor=" "> Í¿äíèé ôîíû ºí㺠10 . Õ¿ñíýãò õèéõ. charset=windows-1251"> -------Èíãýæ áè÷ñýí áîë Ìîíãîëîîð áè÷èæ áîëíî. charset=windows-1251"> </HEAD> <BODY> <TABLE border="1"> <TR> <TD> Ýíä òåêñò áè÷íý. <HTML> <HEAD> <TITLE>HTML Web Page</TITLE> <meta http-equiv="Content-Type" content="text/html. </TD> <TD> 2-ð ýãíýýíèé 2-ð òåêñò </TD> </TR> </TABLE> </BODY> </HTML> <meta http-equiv="Content-Type" content="text/html.3. </TD> <TD> Èíãýýä äàðààãèé òåêñò </TD> </TR> <TR> <TD> 2-ð ýãíýý áàéíà.

Çóðûã îðóóëæ èðýõ.05 HTML-3 1.html">Back</A> </BODY> </HTML> <BODY background=" "> Äýâñãýð ôîíä çóðàã òàâüæ áîëíî.jpg"> <HR size="4"> </BODY> </HTML> <BODY bgcolor=" "> Äýâñãýð ôîíû ºí㺠<IMG src=" "> Çóðãûã îðóóëæ èðýõ. Link (õîëáîëò) õèéõ.Õè÷ýýë. Òýãýýä File>Save As. File>Save As. <HTML> <HEAD> <TITLE>Modern Art in Mongolia</TITLE> </HEAD> <BODY background="stone. 11 ..... top. <HTML> <HEAD> <TITLE>Modern Art in Mongolia</TITLE> </HEAD> <BODY bgcolor="red"> <P align="center"><FONT size="6">Modern Art in Mongolia </FONT></P> <P align="center"><IMG src="art1. Äàðààãèéí õóóäàñ õèéíý.html ãýæ íýð áè÷ýýä õàäãàëààðàé.. <HR size=" "> Çóðààñ çóðàõ.jpg"> <HR size="4"> <P align="center"><A href="top.html ãýæ íýð áè÷ýýä kimi-Lessons/ Web Design/ WD-Lesson05-HTML3 õàâòàñ äîòîð õàäãàë..gif"> <P align="center"><IMG src="art2.jpg"> <HR size="4"> <P align="center"><IMG src="art3. <A href=" "> Click õèéñýí áîë òîãòîîñîí ôàéëä øè ëæ¿¿ëíý. page-2. top.html 2.. Internet Explore äýýð File>Open.

12 .html">Enter</A> -ã íýìíý....html">Enter</A> </BODY> </HTML> <P align="center"><A href="page-2. Back -ã äàðàõ áîë top. top. Internet Explore äýýð File>Open.html Enter -ã äàðàõ áîë page-2. top.jpg"> <HR size="4"> <P align="center"><A href="page-2.html ðóó îðíî.. File>Open.html <HTML> <HEAD> <TITLE>Modern Art in Mongolia</TITLE> </HEAD> <BODY bgcolor="red"> <P align="center"><FONT size="6">Modern Art in Mongolia </FONT></P> <P align="center"><IMG src="art1.html -ä áóöàõ.

06 Dreamweaver ãýæ þó âý ? 1. 2.Dreamweaver ãýæ þó âý ? Dreamweaver ïðîãðàììûã õýðýãëýñíýýð âýá õóóäñûã àìàðõàí õèéæ ÷àäíà. HTML-èéã áè÷èõ õýðýãã¿é.Dreamweaver ïðîãðàììûã àæèëëóóëàõ [Start] -[Programs] -[Macromedia Dreamweaver4].Dreamweaver4 ñîíãî. ªºðèéí õ¿ññýí äèçàéí õèéæ áîëíî. 3.Õè÷ýýë.Åðºíõèé õýðýãë¿¿ð áîëîõ èíòåðôåéñ-èéí àøèãëàëò Object Panel Tool Bar Document Window Tag selecter Launcher Bar Property Inspector 13 .

.4.Object Panel Click File>Open..Ulaanbaatar Tour.htm HTML-view õàðàãäàö Forms Frames Head Invisible Special HTML-view áàñ Design õàðàãäàö 5.Õàðàãäàöûí ººð÷ëºëò 5. Character Common Visit Mongolia .Property Inspector Design õàðàãäàö Click 14 .

3.Äýä ãàð÷èã .Òîâ÷ . õàâñàðãàñàí çóðàã. ìýäýý ìýäýýëëèéã öóãëóóëíà. Çóðãèéí ôàéëûã Photoshop äýýð âýá õóóäàñò çîõèñòîé çóðãèéí òºð뺺ð õàäãàëíà. õàâñàðãàñàí çóðàã.07 Âýá ñàéò õèéõ åðºíõèé àðãà.Ôàéëûí á¿òöèéã øèéäýõ Øèíýýð âýá õóóäàñ õèéõäýý øèíý õàâòàñ íýýãýýä óã ñàéòûí á¿õ ôàéëûã äîòîð íü õàäãàëíà.Òåêñòèéí ìýäýýëýë . òóñ á¿ðä íü õàâòàñ íýýæ äîòîð íü õàäãàëíà. ÿâö 1. Òà ãàðààð áè÷èõ áà çóðàõ ýñâýë êîìïüþòåð äýýð àëü áîëîìæòîéãîîð íîîðîã õèéãýýðýé. Õýðýãëýõ ìàòåðèàëûã öóãëóóëàõ Õèéæ áàéãàà âýá õóóäñàíä îðîõ ôîòî çóðàã. Âýá õóóäàñíû ýñêèç ãàðãàõ 1) Âýá õóóäàñ äîîðõ ìàòåðèàëóóäààñ á¿ðäýæ áàéíà: . Âýá ñàéòûí åðºíõèé á¿òöèéã äîîðõ çóðàãò õàðóóëëàà.ôîòî çóðàã áàñ õàâñàðãàñàí çóðàã (êèíî) ãýõ ìýò Ýäãýýð ìàòåðèàëóóäûã ÿìàð äèçàéíààð õèéõýý òºëºâëºí ýñêèçýý ãàðãàõ õýðýãòýé. index(top) index(top) news info mail link news info mail link 1) ªºðèéí õàâòàñ äîòîð (Web site) Image õàâòàñ 2) Õýðýâ âýá õóóäñóóäûí ôàéëóóä îëîí áàéâàë ¿¿ñãýñýí áàéíà. 15 . 2. ¯¿í äîòîð ôîòî çóðàã. Âýá õóóäàñíû á¿õ áýëòãýë äóóññàí áîë Dreamweaver ïðîãðàìì äýýðõ àæèë ýõýëíý. òåêñò.Õè÷ýýë. çóðãèéí ôàéëóóäûã õàäãàëíà.Ãàð÷èã .

6. . 7. Âýá ñàéòûã øèíý÷ëýõ Öàã õóãàöàà ºíãºðººõºä ìýäýý õóó÷èí áîëæ ìýäýýëëèéã øèíý÷ëýõ øààðäëàãà ãàðäàã. çóðãèéã ýñêèçèéí äàãóó õóóäñàí äýýð áàéðëóóëàí äèçàéíûã õèéíý.Windows áà Macintosh 2 äýýð øàëãàõ. 5. Netscape Navigator.. Local Site (îðîí íóòãèéí ñàéò)-ûã òîäîðõîéëîõ Dreamweaver äýýð âýá õóóäàñ õèéõäýý ýõëýýä Site öîíõ äýýð âýá õóóäàñíû ôàéëûã ººðèéí êîìïüþòåðîîñ îëîîä ñîíãîæ òîäîðõîéëíî.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é Ãàð÷èã. 16 . õóó÷èí á¿õ õóâèëáàð äýýð øàëãàõ. 8. Í¿¿ð õóóäñûã index ãýæ õàäãàëàõ ¸ñòîé..) . äèçàéí 6.Òóñ ïðîãðàììóóäûí øèíý. 10. òîâ÷. (Internet Explore. Òýãýýä øèíý÷ëýñýí âýáèéã äàõèí èíòåðíýòýä ñóóëãàíà.) . Ýõëýýä õàäãàëàõã¿é áîë çóðãèéã îðóóëæ èðýõ áàñ link (õîëáîëò) õèéõýä ñàéí àæèëëàõã¿é.4. Link (õîëáîëò) áàéãóóëàõ ªºð õóóäàñ ðóó øèëæèõèéí òóëä ¿ã áà òîâ÷èíä Link (õîëáîëò) õèéäýã. JavaScript-ûí ôàéëóóäûã îðóóëæ íàéðóóëíà.. Netscape Navigator. JavaScript-ûí ôàéëûã íàéðóóëàõ Õýðýãòýé áîë Flash. (Internet Explore. òåêñò. Äóóññàí âýá ôàéëûã Upload (èíòåðíýòýä ñóóëãàõ) õèéõ Ýõëýýä êîìïüþòåðîî èíòåðíýòýä õîëáîîä äàðàà íü ººðèéí âýá õóóäàñíû ôàéëûã èíòåðíýòýä ñóóëãàíà. 11. 9.Îëîí òºðëèéí ïðîãðàììóóäûã øàëãàõ. Flash. äóó. Ñóóñíû äàðàà èíòåðíýòýýñ âýáýý äàõèí øàëãààðàé. Øèíý õóóäñûã õàäãàëàõ Âýá õóóäñàí äýýð ôàéëóóäûã îðóóëæ èðýõýýñ ºìíº òýð õóóäñûã ººðèéí õàâòàñ äîòîð õàäãàëàõ øààðäëàãàòàé. Õóóäñûí áàéðëàë. äóó. Âýáýý øàëãàõ Õóóäàñ á¿ð äóóññàí áîë ÷àäâàë äîîðõ ïðîãðàììóóäààð á¿ãäýýð íü øàëãàæ ¿çýýðýé..

17 .08 Dreamweaver äýýð âýá õóóäàñûã õèéæ ¿ç¿¿ëíý. File>New>Folder Øèíý õàâòàñûã õèéíý. ªìíº õèéñýí Modern Art in Mongolia âýá ªºðèéí íýð ºãíº.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýíý.Õè÷ýýë. Windows Explore-èéã àæèëëóóëíà. õóóäàñûã Dreamweaver äýýð õèéæ ¿çíý. Kimi-Lesson/ Web Design/ WD-Lesson08-Modern Art/ îðíî. Ýíä áàéãàà 5 ôàéëûã á¿õ ñîíãîîä Copy-ã äàðíà. Kimi-Lesson/ My Works/ îðíî. Kimi-Lesson/ My Works/ ñàÿ õèéñýí ººðèéí õàâòàñä îðîîä Paste õèéíý. 1.

. Èíãýýä ººðèéí êîìïüþòåðûí äýýð Local Site-ä ººðèéí õàâòàñíû íýð òîäîðõîéëñîí õàâòàñíû äîòîðõè íü ãàð÷ èðíý. ¯¿íýýñ õîéø õèéõ HTML ôàéë áà çóðãèéí ôàéëûã á¿ãä ýíý õàâòàñíû äîòîð õàäãàë. Site öîíõûã õààíà. Windows Explore-èéã õààõ.. Site name áè÷ýýä Local Root Folder -ãààñ OK-ã äàð. Local Site (îðîí íóòãèéí ñàéò)-èéã òîäîðõîéëîõ Site>New Site. 2. ñàÿ õèéñýí ººðèéí õàâòàñûã ñîíãî. 3. OK-ã äàð. 18 . Dreamweaver-èéã àæèëëóóëíà.

19 .. Modern Art in Mongolia 8. òýãýýä Enter-ã äàðíà. top-page. 6. -ã Click õèéãýýä art1.Çóðãûã îðóóëæ èðíý. Title áè÷ýýä Background ºí㺠ñîíãîíî.4.Page Property-èéã òîõèðóóëàõ Modify>Page Properties.jpg ñîíãî. -ã äàðààä çóðààñ çóðíà. File>Save As.. 5... Âýá õóóäàñûã õàäãàëàõ 7.Word øèã òåêñò áè÷èíý.html Ñàÿ õèéñýí ººðèéí õàâòàñ äîòîð õàäãàë. H=6 (ºíäºð) Font size : 6 ãîëëóóëíà òýãýýä Enter-ã äàðíà.

Title áè÷ýýä Background Image ñîíãî..File>Save 11. art3.gif 10. 14. next-page.html 20 ..Modify>Page Properties.... File>New. 13.9.Øèíý õóóäàñ õèéõ.. -ã äàðààä Çóðãèéã îðóóëíà. art2.jpg 15. 12.jpg.File>Save As.Enter ãýæ òåêñò áè÷.Back ãýæ òåêñò áè÷èõ. stone.

top-page. F12 òîâ÷ëóóð äàðààä Internet Explore äýýð ñàÿ õèéñýí õóóäàñûã øàëãàæ ¿ç. 21 .File>Save 18.Link õèéõ.File>Save Back òåêñòèéã èäýâõèæ¿¿ëýýä Link -èéã äàðààä top-page.html ñîíãî.16. 20. 17.Internet Explore äýýð øàëãàæ ¿ç.html ñîíãî.html äýýð Enter-ûã èäýâõèæ¿¿ëýýä Link -ûã äàðààä next-page. 19.

File>New>Folder Øèíý õàâòàñûã õèéíý. 2.. Site>New Site. Ãàð÷ èðñýí Site Window-èéã õààíà.html ñàÿ õèéñýí ººðèéí Folder äîòîð õàäãàëàõ. 22 .Âýá õóóäàñûã õàäãàëíà. top-text.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýõ.Õè÷ýýë.Dreamweaver äýýð øèíý SITE (ñàéò) -ã òîäîðõîéëîõ Windows Explore-èéã àæèëëóóëàõ. Dreamweaver-èéã àæèëëóóëíà. Windows Explore-èéã õààíà. ªºðèéí íýð ºãíº. File>Save As.09 Òåêñòèéí àæèëëóóëàõ 1. 3.... Site name áè÷ýýä Kimi-Lesson/ My Works/ îðîõ. Local Root Folder -îîñ ñàÿ õèéñýí ººðèéí Folder ñîíãî.

Title áè÷ýýä Background ºí㺠ñîíãî.. äàðààä ãîëëóóëíà. Òýãýýä ÎÊ-ã äàðíà. áàñ -èéã ñîíãîíî.Õóóäñûí äýýð òåêñò áè÷íý.4. Õýðâýý ç¿ãýýð Enter äàðñàí áîë ìºðèéí 5. Áè÷ñýí òåêñòèéã èäýâõæ¿¿ëýýä 23 .. Modify>Page Properties. Òýãýýä Shift +Enter äàðààä äàðààãèéí ìºðä îðîîä òåêñò áè÷íý.Page Property-èéã òîõèðóóëàõ Size-ãààñ 6 ñîíãîíî. Ìîíãîëîîð áè÷èõ áîë: Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî. Áè÷ñýí òåêñòèéã èäýâõæ¿¿ëýõ 6. õîîðîíä çàéòàé áîëíî.Òåêñòèéí ºí㺠ººð÷ëºõ.

Äàðààãèéí òåêñò áàñ áè÷ýýä èíãýýä òåêñòèéã èäýâõæ¿¿ëýõ èíãýýä òåêñòèéã èäýâõæ¿¿ëýõ -èéã õî¸ð óäàà äàðààä Ïàðàãðàôèéã óðäààñ çàé àâàõ. Äàðààãèéí ìºðä îðîîä -èéã äàðààä çóðààñ çóðàõ. -èéã çóðãààí óäàà äàðñàí áîë èíãýæ áîëíî.Òåêñòèéí ºí㺠ñîíãîõ. -èéã äàðæ äóãààðëàõ. 24 . Äàðààãèéí ìºðä îðîîä èíãýæ áè÷èõ.

Òýãýýä ñ¿¿ëèéí òåêñòèéã áè÷èõ. File>Save 8. Õóóäàñûã õàäãàëàõ.Internet Explore äýýð øàëãàæ ¿çýõ . F12 òîâ÷ëóóð äàðààä Internet Explore äýýð ñàÿ õèéñýí õóóäàñûã øàëãàæ ¿ç. 7. 25 .

33. Òèéì ó÷ðààñ âýá õóóäàñíû çóðãèéí ôàéëûí õýìæýý æèæèã íü äýýð.10 Âýá õóóäàñ äýýð õýðýãëýõ çóðãèéí òóõàé Èíòåðíåòýä JPEG.61KB [JPEG Medium (äóíä çýðãèéí)] [400*300 pixel 267KB] 2) File>Save for web. 26 .gif) 256 ºíãºòýé ----Ýìáëýì. íýã ºíãèéã òóíãàëàãøóóëæ áîëíî.. ßàãààä ãýâýë óòàñíû õîëáîîíû õóðä óäààí... Ãàð÷ èðñýí öîíõíû Settings-ààñ [JPEG High] ñîíãî. Ãàð÷èãûí çóðàãò õýðýãëýíý.81KB 30 áîëãî. ôàéëûí ÷àíàð. JPEG (. GIF (. Kimi-Lesson/Web Design/ Lesson10-Jpeg-Gif/ balloons.Õè÷ýýë. [JPEG High (ºíäºð)] 1.jpg) îëîí ºíãºòýé ----ôîòîä õýðýãëýíý.. ôàéëûí ôàéëûí JPEG-High õýìæýý õýìæýý: áîë 60 áîëãîõ. Âýá õóóäàñ äýýð õýðýãëýäýã çóðãèéí ôàéëûí ôîðìàòóóä õî¸ð ç¿éë áàéíà.Ôîòî âýá õóóäàñ äýýð õýðýãëýõ çóðãèéí ôàéëààð õàäãàëàõ. 1) Photoshop äýýð File>Open.tif Ýõíèé JPEG-èéí áàéäàë áàéäàë JPEG-èéí Ýõíèé JPEG-èéí ÷àíàð. õýìæýý:16.GIF îðîîä âýá õóóäñûã ¿çýõýä çóðàã óäààí èðäýã.

Ãýõäýý ôàéëûí õýìæýý òîì áîëîîä âýá õóóäàñ äýýð óäààí ãàð÷ èðíý. Ãýõäýý ôàéëûí õýìæýý æèæèã -ãààð õýðýãòýé õýñãýý ñîíãîîä áîëîîä âýá õóóäàñàí äýýð õóðäàí ãàð÷ èðíý... 27 . Òýãýýä ÷àíàð áàñ ôàéëûí õýìæýýã ñàéí áîäñîí áîë OK-ã äàðààä íýð ºãººä õàäãàëààðàé. File of type-íààñ EPS ñîíãîîä [Selected only](çºâõºí ñîíãîñîí õýñãýý) ñîíãî. Èéì ó÷ðààñ àëü íü äýýð âý ? ãýæ äàíäàà ñàéí áîäîîä õàäãàëàõ ¸ñòîé. 2) File>Export. Çóðãèéí ÷àíàð ºíäºð áîë çóðàã ñàéõàí õàðàãäàæ ÷àäíà.. ×àíàð íàìõàí áîë çóðàãáàãà çýðýã ìóó õàðàãäàæ áîëíî.Corel Draw äýýð õèéñýí ýìüáëåìûã âýá õóóäñàí äýýð õýðýãëýõ çóðãèéí ôàéëààð õàäãàëàõ..68KB 10 áîëãîõ. Kimi-Lesson/Web Design/Lesson10-Jpeg-Gif/ Miat-logo. 1) Corel Draw äýýð File>Open.cdr ôàéëûí ÷àíàð. õýìæýý:10.[JPEG Low (íàìõàí)] 2.

ªíãèéã çàññàí áîë OK-ã äàðíà. Çàðèì ¿åä èíãýæ ºí㺠íü ìóó õàðàãäàæ ìàãàäã¿é. òýãýýä Export-ûã äàðààä ãàð÷ èðñýí öîíõîîñ èíãýæ ñîíãîîä ( Resolution 72dpi) Ok-ã äàðíà.. Resolution : 72 Pixel/inch (dpi-òàé àäèëõàí) ñîíãîîä OK-ã äàðàõ. [Transparency]-ã ñîíãîñîí áîë äýâñãýð òóíãàëàã áîëãîíî. 2) File>Save for web. Ãàð÷ èðñýí öîíõíû Settings-ààñ [GIF 32 Ditherd] ñîíãî. áàéäàë áàéäàë GIF-èéí Ýõíèé GIF-èéí ºíãºíèé òîî Image>Adjust>Hue/Saturation ôàéëûí ôàéëûí ñîíãîîä ºí㺠çàñàõ. 3) Photoshop äýýð ñàÿ õàäãàëñàí ôàéëûã íýýõ..61KB 28 ... Ýõíèé GIF-èéí Òýãâýë Photoshop äýýð ºíãèéã çàñàõ õýðýãòýé. File>Open. õýìæýý õýìæýý: 33.

Òýãñýí áîë âýá õóóäàñ äýýð èíãýæ õàðàãäàõ.. Matt: -ààñ àäèëõàí ºí㺠ñîíãîîã¿é áîë èéì àðçãàðòàé áîëãîõ. GIF-ýýð õàäãàëàõ ¿åä Matt: -ààñ Other. Íýã ÷óõàë þì áàéãàà. ñîíãî. Òýãýýä OK-ã äàðíà.. GIF ºíãºíèé òîî áàãà áîë Ãàð÷ èðñýí Color Picker öîíõîíû äýýð ôàéëûí õýìæýý àðàé æèæèã áîëíî. Õýðâýý òà âýá õóóäàñ äýýð èéì óëààí äýâñãýðèéí ºí㺠(ºíãºíèé äóãààð : #FF0000) ºãºõ áîë. 29 . [Only Web Colors] ñîíãî âýá õóóäàñíû äýâñãýðèéí ºíãºòýé àäèëõàí ºíãèéã( àäèëõàí ºíãºíèé äóãààð ) ñîíãî.

11 Çóðàã òàé âýá õóóäàñ Èéì çóðàãòàé âýá õóóäàñûã õèéæ ¿çíý ¿¿ ? 30 .Õè÷ýýë.

File>New. 31 . Öîíõûã òîõèðîìæòîé æýìæýýä íýýãýýä ãàðààñ PrtSc òîâ÷èéã äàðàõ. 5) -ãààð õýðýãã¿é õýñãèéã òýìäýãëýýä Delete õèéíý.. 2) Photoshop-èéã àæèëëóóëíà.1.. Ýõëýýä äîîðõ Internet Explore-èéí 3) Edit>Paste (Ctr+V) çóðãèéã õèéæ ¿çýõ. 4) -ãààð õýðýãòýé õýñãèéã òàéðíà. 1) Internet Explore-èéã àæèëëóóëàõ.

6) Layer>Flatten Image 9) -ãààð äîîðõ òýìäýãëýýä -èéã ñîíãîîä Ctr+Alt+Shift äàðààä äîîøîî Drag õèéíý. 32 . 7) Image>Canvas Size.. 10) File>Save As. IE-image ãýæ íýð ºãººä JPEG-ãààð õàäãàëíà...îðîîä äîîðõî õóóäàñíû õýìæýýã óðò õèéíý..

File>Import.. File>Import. Kimi-Lesson / Web Design / Lesson11-Magic/ Mongol-clipart.jpg ôàéëûã äàðàà ¿ðãýëæ õýðýãëýõ.. File>New>Folder Øèíý õàâòàñûã íýýíý.ªºðèéí Folder (õàâòàñ)-èéã áýëòãýõ. Kimi-Lesson/ My Works/ îðíî.Corel Draw-èéã àæèëëóóëíà. 33 . 4... 2.ñàÿ õèéñýí IE-image îðóóëæ èðíý. Øèíý õóóäàñ õèéãýýä A3 öààñ ñîíãî. 5. Òýãýýä ýíý Internet Explore öîíõ äîòîð äèçàéí õèéíý. Ýíý IE-image.cdr 3. ªºðèéí íýð ºãíº.Äîîðõ òåêñò çóðààñ çóðíà. Ýõýëýýä Windows Explore-èéã àæèëëóóëàõ.

Èíãýýä Ãàð÷èã áàñ ôîòî-ûã òóñ òóñ ñîíãîîä File>Export. 7.. 6.Mongol-Clipart-ã ñîíãîîä File>Export..JPG OK-ã äàðíà.. kharakorm.. Photoshop-èéã àæèëëóóëàõ.. 8.. ñàÿ õàäãàëñàí ãóðâàí ôàéëûã íýýíý. File>Open. EPS-ãààð õàäãàëàõ.File>Import. 34 ... File of type-íààñ EPS ñîíãî [Selected only](çºõºí ñîíãîñîí õýñýã) ñîíãîíî.5.

Matte-íààñ white ñîíãîîä OK-ã äàðíà ªºðèéí õàâòàñ äîòîð õàäãàëíà..Ýíý çóðãèéí ºí㺠çàñ çàñíà.File>Save for Web... 35 . 10.. ñîíãîîä OK-ã äàðíà GIF 32 Ditherd -ã ñîíãîîä 9.Ãàð÷èãèéí çóðàã áàñ àäèëõàí File>Save for Web.. GIF 32 Ditherd -ã ñîíãîîä õàäãàëíà.. Image>Adjust>Hue/Saturation. Resolution : 72 Pixel/inch (dpi-òàé àäèëõàí) 10.

Dreamweaver-èéã àæèëëóóëàõ. File>Save As...Äîîðõ ôîòîã õàäãàëíà.Page Property-èéã òîõèðóóëàõ Modify>Page Properties. index.. JPEG Medium -ã ñîíãîîä OK-ã äàðíà. 12.Âýá õóóäàñûã õàäãàëíà. Øèíý SITE (ñàéò) -ã òîäîðõîéëîõ Site>New Site. 14... OK-ã äàðíà..html ººðèéí Folder äîòîð õàäãàëíà.11. Ãàð÷ èðñýí Site Window-èéã õààíà.. Site name áè÷ýýä Local Root Folder -îîñ ººðèéí Folder ñîíãîíî. 13. File>Save for Web.. 36 . Title áè÷ýýä Ìîíãîëîîð áè÷èõ áîë: Document Encoding-ààñ Cylilic(windows-1251) ñîíãî.

File>Save 19. 17. 16. äàðààä ãîëëóóëíà. Enter äàðààä äàðààãèéí ìºðä îðîîä äàðíà. Äàðààãèéí ìºðä îðîîä äàðíà.Õóóäñàí äýýð òåêñò áè÷ýõ.Çóðãèéã îðîîëæ èðíý. 37 . Ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñîíãî.Òåêñò áàñ çóðààñ çóðàõ. 18. Äàðààãèéí ìºðä îðîîä äàðíà.F12 òîâ÷ëóóð äàðààä Internet Explore äýýð õóóäàñûã øàëãàæ ¿ç. Size 4.15. Bold.

2. Kimi-Lesson/Web Design/ WD-Lesson12-Link/ îðîîä ýíä áàéãàà 4 õàâòàñûã ñîíãîîä Copy Õè÷ýýë 10 äýýð õèéñýí ººðèéí õàâòàñ îðîîä Paste õèéíý.Õýðýãòýé ôàéëûã Copy õèéõ. Òýãýýä Property öîíõîîñ -ã äàðààä Ýõýëýýä Windows Explore-èéã àæèëëóóëíà. 2.Õè÷ýýë. Äîîðõ Link áàéãóóëìààð òåêñòèéã èäýâõæ¿¿ëíý. Èíãýýä Link áàéãóóëñàí.õàâòàñààñ mongol-tuhai.12 Link (õîëáîëò) áàéãóóëàõ 1.Link (õîëáîëò) áàéãóóëàõ.html ôàéëûã íýýíý. File>Open Äàðààãûí òåêñò áàñ àäèëõàí.html ôàéëûã ñîíãîíî. 38 . Ãàð÷ èðñýí öîíõ äýýð about Mongol .Dreamweaver àæèëëóóëààä Õè÷ýýë 10 äýýð õèéñýí index.

Internet Explore äýýð õóóäàñûã øàëãàæ Äîîðõ Link áàéãóóëàõ òåêñòèéã èäýâõæ¿¿ëýýä ¿çýõ. mongol-tuhai. Map. Îäîî Í¿¿ð õóóäàñòàé Link áàéõã¿é ó÷ðààñ File>Open. 39 . Òýãýýä File>Save Ulaanbaatar..html. Äîîðîõ á¿ãä Link áàéãóóëñàí áîë File>Save Property öîíõîîñ -ã äàðààä F12 òîâ÷ëóóð äàðààä Internet Explore äýýð õóóäàñûã øàëãàæ ¿çýýðýé.html áàñ àäèëõàí.html 3.html ôàéëûã ñîíãîíî. 3. F12 òîâ÷ëóóð äàðíà.Äàõèàä Internet Explore äýýð õóóäàñûã øàëãàæ ¿çíý. Link..3. index.html.Í¿¿ð õóóäàñ òàé Link áàéãóóëàõ.

13 Õ¿ñíýãòòàé âýá õóóäàñ 40 .Õè÷ýýë.

Title áè÷ýýä Ìîíãîëîîð áè÷èõààð Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî. Dreamweaver-èéã àæèëëóóë. Kimi-Lesson/Web Design/ WD-Lesson13- Table-Page/ îðîîä ýíä áàéãàà about-mongol õàâòàñûã ñîíãîîä Copy õèéíý.Âýá õóóäàñûã õàäãàëíà.. about-Page. 5..Ãàð÷èã áè÷èõ.. -ã äàðíà. 2. Modify>Page Properties.html ººðèéí Folder äîòîð õàäãàëíà. File>Save As. Øèíý SITE (ñàéò) -ã òîäîðõîéëîõ Site>New Site...1.Page Property-èéã òîõèðóóëàõ Paste õèéíý. 3. Site name áè÷ýýä Local Root Folder -îîñ ººðèéí õàâòàñ ñîíãîíî..ªºðèéí Folder (õàâòàñ)-èéã áýëòãýõ. Ýõýëýýä Windows Explore-èéã àæèëëóóëàõ. 41 . Òýãýýä ñàÿ õèéñýí ººðèéí õàâòàñ îðîîä 4. Kimi-Lesson/ My Works/ îðîîä øèíý ººðèéí õàâòàñûã õèéíý.

Òåêñòèéí ºí㺠: öàãààí 6. 42 . -ã Click õèéãýýä õ¿ñíýãò õèéíý. . Äàðààãèéí í¿äýíä îðîîä -ã äàðààä çóðãèéã îðóóëæ èðýõ. Äîîðõè òåêñòèéã áè÷íý.Äàðààãèéí õ¿ñíýãò õèéõ. -ã ñîíãîîä òåêñòèéí õýìæýý: 6 ñîíãîíî. Í¿äíèé ºí㺠ñîíãîõ. -ã Click õèéíý. Enter äàðààä äàðààãèéí ìºðä îðîîä Òåêñòèéí í¿äèéã æààõàí òîìðóóëàõ.

Enter äàðààä äàðààãèéí ìºðºíä îðîîä -ã Click õèéíý. 43 . Õ¿ñíýãòèéã ñîíãîîä Cell Space: 0 Border : 1 Õ¿ðýýíèé ºíãèéã õàðààð ñîíãîíî. Äîîðõè òåêñòèéã áè÷ýýä í¿äíèé ºíãèéã ñîíãîíî.7. Õî¸ð í¿ä ñîíãîîä -ã äàðààä íýãòãýíý.Äàðààãèéí õ¿ñíýãò õèéõ.

Á¿ãä òåêñò áè÷íý. 8. Ñ¿¿ëä -ã äàðààä çóðãèéã îðîîëæ èðíý. F12 òîâ÷ëóóð äàðíà. 44 .Òàâàí í¿ä ñîíãîîä -ã äàðààä íýãòãýíý.Internet Explore äýýð õóóäàñûã øàëãàæ ¿çýõ.

14 Hotspot.Õè÷ýýë. Anchor 45 .

File>Import. File>Import.Corel Draw-èéã àæèëëóóëíà. Mongol-map..Kimi-Lesson/Web Design/ WD-Lesson14-Hotspot/ îðîîä IE-image îðóóëæ èðíý. Ãàð÷èãèéí òåêñò áè÷íý..Kimi-Lesson/Web Design/ 2..Corel Draw äýýð õóóäàñíû äèçàéí øèéäíý.Õýðýãòýé ôàéëûã Copy õèéíý.1.. Hotspot/ îðîîä ýíä áàéãàà map õàâòàñûã ñîíãîîä Copy õèéíý. òýãýýä ºìíº õèéñýí ººðèéí õàâòàñ îðîîä Paste õéèíý. Ýõëýýä Windows Explore-èéã àæèëëóóëíà. 3. WD-Lesson14-Hotspot/ îðîîä Øèíý õóóäàñ õèéãýýä A3 öààñ ñîíãîíî.cdr îðóóëæ èðíý. -ãààð äºðâºëæèí çóðààä äýâñãýðèéí ºí㺠Kimi-Lesson/Web Design/ WD-Lesson14- ñîíãîíî. 46 .

Ãàð÷èãèéí òåêñòèéã ñîíãîîä 4. File>Export.... EPS-ãààð õàäãàëíà... Ãàð÷èãèéí çóðãèéã ñîíãîîä Ãàçðûí çóðàã áàñ àäèëõàí. File>Export. 47 . ñàÿ õàäãàëñàí õî¸ð ôàéëûã íýýíý. Photoshop-èéã àæèëëóóëíà. RGB color ñîíãîîä OK-ã äàðíà..... EPS-ãààð õàäãàëíà. File>Save for Web. Äîîðõè øèã ñîíãîîä OK-ã äàðíà. 72 pixel/inch. mon-map ãýäýã íýð ºãººä GIF 32 Ditherd -ã ñîíãîíî. map-title ãýäýã íýð ºãººä File>Open..

.. Ìîíãîëîîð áè÷èõ áîë: Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî... Title áè÷ýýä Ñàÿ öýýæèëñýí äýâñãýðèéí ºí㺠ñîíãîíî. Òýãýýä ñîíãîñîí äýâñãýðèéí ºíãºíèé äóãààð öýýæèëíý. Ãàçðûí çóðàã áàñ àäèëõàí. ªìíº õèéñýí ººðèéí Site áàéñàí áîë òýðèéã ñîíãîíî.. ªºðèéí Folder äîòîð Copy õèéñýí map folder äîòîð õàäãàëíà. Site>Open Site. 48 .. -ã òîäîðõîéëîîðîé. OK äàðíà. Dreamweaver-èéã àæèëëóóëíà.. File>Save for Web.. 6. mon-map.Page Property-èéã òîõèðóóëàõ Modify>Page Properties. File>Save As. Õýðâýý áàéõã¿é áîë Site>New Site. GIF 32 Ditherd -ãààð õàäãàëíà..html ººðèéí Folder äîòîð õàäãàëíà. 14.Âýá õóóäàñûã õàäãàëíà.... Matte-ààñ Other. ñîíãîîä 5.

Enter äàðààä äàðààãèéí ìºðä îðîîä Òåêñòèéã áè÷íý. Enter äàðààä äàðààãèéí ìºðä îðîîä äàðíà. Ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñ îíãîíî. Äàðààãèéí ìºðä îðîîä -ã äàðààä çóðààñ çóðíà. Äàðààãèéí ìºðä îðîîä -ã äàðààä õ¿ñíýãò õèéíý. 7. 49 .Çóðãèéã îðóóëæ èðíý. äàðààä ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñîíãîíî.

-ã äàðààä çóðààñ çóðààä -ã äàðààä çóðãèéã îðóóëæ èðíý. (Anchor)-ã äàðààä Òýãýýä òåêñò áè÷ýýä fubus ãýæ íýð ºãíº. 8. TOP ãýæ òåêñò áè÷íý.Õ¿ñíýãòèéí õýìæýýã ººð÷èëíº. Object Panel-ààñ Invisibles ñîíãîíî. 50 . (Anchor)-ã òàâèíà. -ã äýýð òàâèàä Í¿äíèé ºí㺠ñîíãîíî.

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 äýýð õóóäñûã øàëãàæ
¿çíý.

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

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 õèéíý.

Kimi-Lesson/Web Design/ WD-Lesson15-
Rollover/ îðîîä ýíä áàéãàà 5 õàâòàñûã ñîíãîîä
Copy õèéíý.

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

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

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

53

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

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

Òåêñò áè÷íý.

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

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

54

File>Save for Web. GIF 32 Ditherd -ã ñîíãîíî. Matte-íààñ Other. 55 ... Layer>Effects>Bevel and Emboss ªí㺠çàñíà..Äîîðõè øèã ñîíãîîä OK-ã äàðíà. Layer-èéí Ýôôåêòèéã ºãíº. Image>Hue/Saturation.. ñîíãîîä äýâñãýðèéí ºí㺠ñîíãîíî...

-ã äàðààä ñàÿ íýýñýí ººðèéí õàâòàñ ñîíãîíî... 5. 4..html ººðèéí õàâòàñ äîòîð õàäãàëíà.Âýá õóóäñûã õàäãàëíà. rollover-page. Òîâ÷íû ºí㺠ººð÷èëíº. Site öîíõûã õààíà. 56 . GIF 32 Ditherd -ã ñîíãîíî. File>Save As. Dreamweaver-èéã àæèëëóóëíà. OK-ã äàðààä ººðèéí õàâòàñ äîòî𠺺ð íýð ºãººä õàäãàëíà.. File>Save for Web. Site>New Site... Image>Adjust>Varietions..OK-ã äàðààä ººðèéí õàâòàñ äîòîð õàäãàëíà. Rollover Image-òýé âýá õóóäàñ õèéíý..

8.Page Property-èéã òîõèðóóëàõ 7. Ìîíãîëîîð áè÷èõ áîë: Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî.. Ñàÿ öýýæèëñýí äýâñãýðèéí ºí㺠ñîíãîíî. 57 . Title áè÷ýýä -ã äàðààä õ¿ñíýãò õèéíý.6.Çóðãèéã îðóóëæ èðíý.. Modify>Page Properties.Õ¿ñíýãò õèéíý. -ã äàðààä õ¿ñíýãòèéí í¿äýí äîòîð -ã äàðààä ãîëîîð çýðýãö¿¿ëíý. çóðãèéã îðóóëæ èðíý.

9.Òîâ÷èéã îðóóëæ èðíý. Äàðààãèéí í¿äýíä îðîîä Vert-ààñ TOP ñîíãîîä äýýð íü òåêñò áè÷íý. -ã äàðààä ãàð÷ èðñýí öîíõíîîñ çóðãèéã -ã äàðààä çàé àâíà. ñîíãîíî. 58 .Òåêñò áè÷íý. 10. Äàðààãèéí ìºðºíä îðîîä -ã äàðààä õ¿ñíýãò õèéíý.

When Click.gif ñîíãîíî.. Rollover Image-ààñ -ã äàðààä about2.Original Image-ààñ -ã äàðààä Èíãýæ ººð òîâ÷ áàñ -ã äàðààä ãàð÷ èðñýí about. 59 .-ààñ -ã äàðààä mongol-thuhai.. öîíõíîîñ çóðãèéã ñîíãîíî.gif ñîíãîíî.htm ñîíãîíî. çóðààñ çóðààä çîõèîã÷èéí ýðõèéí òóõàé áè÷íý.

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

Õè÷ýýë.16 Frame-òýé âýá õóóäàñ 61 .

-ã äàðíà. File>New>Folder 2.ªºðèéí õàâòàñ íýýíý. õàâòàñûã íýýíý.Õýðýãòýé ôàéëûã Copy õèéíý... Òýãýýä ñàÿ íýýñýí ººðèéí õàâòàñàíä îðîîä Paste õèéíý. -ã äàðààä ñàÿ íýýñýí Kimi-Lesson/My works/ îðîîä øèíý ººðèéí ººðèéí õàâòàñ ñîíãîíî. Site>New Site. Dreamweaver-èéã àæèëëóóëíà. Kimi-Lesson/Web Design/ WD-Lesson15-Frame/ îðîîä ýíä áàéãàà 5 õàâòàñûã ñîíãîîä Site öîíõûã õààíà. 4.1. 3. Copy õèéíý.Frame-ä õóâààíà. Objects öîíõîîñ Frames ñîíãîíî. 62 . Ýõëýýä Windows Explore-èéã àæèëëóóëíà.

. ººðèéí õàâòàñ äîòîð õàäãàëíà.Top-Frame õóóäàñûã õèéíý. Title áè÷ýýä 5.. 6.. -ã äàðààä õ¿ñíýãò õèéíý. Frameset ãýäýã Top-Frame õóóäñûã õàäãàëíà. File>Save Frame as.. ººðèéí õàâòàñ äîòîð top-frame ãýæ íýð ºãººä õàäãàëíà. Äîîðõèéã ñîíãîíî.Frameset -ã õàäãàëíà. Äîîðõè Top-Frame õóóäñûã ñîíãîíî.. File>Save Frameset as. Objects öîíõîîñ Common ñîíãîíî. top-frame side -frame main-frame Page Property-èéã òîõèðóóëàõ Modify>Page Properties. 63 ..

. Side-Frame õóóäàûã õàäãàëíà. 7.. -ã äàðààä õ¿ñíýãò õèéíý. -ã äàðààä çóðãèéã îðóóëæ èðíý. File>Save Frame as. Í¿äíèé ºíäðèéã 20 pixel ºãíº. 64 . Side-Frame õóóäñûã õèéíý. Title áè÷ýýä äîîðõèéã ñîíãîíî. Äîîðõè Side-Frame õóóäñûã ñîíãîíî... Õ¿ñíýãòèéí í¿äèéã á¿ãäèéã íü èäýâõæ¿¿ëíý. ªºðèéí õàâòàñ äîòîð side-frame ãýæ íýð ºãººä õàäãàëíà. Modify>Page Properties. Frame-Image õàâòàñíààñ ñîíãîíî. Í¿äíèé ºí㺠ñîíãîíî. Òýãýýä File>Save Frame ñîíãîíî.

Òýãýýä File>Save Frame ñîíãîíî. Òýãýýä File>Save frameset 65 . Main-Frame äîòîð õóóäñûã îðóóëæ èðíý. Ãàäíà òàëûí õ¿ðýý äàðààä Frameset-ã ñîíãîíî. Äýýä áà ç¿¿í òàëûí çàéä 0 ºãíº... mongol-tuhai. File>Open in frame. Main-Frame -ã ñîíãîíî.html ñîíãîíî. Í¿äíèé äîòîð òåêñò áè÷íý..Modify>Page Properties. 8..

9. îðîîä Links-ààñ ºí㺠ñîíãîíî. Link -ààñ -ã äàðààä õîëáîëò õèéõ õóóäñûã ñîíãîíî. Ñ¿¿ëä á¿õ Frame-ã õàäãàëíà. Òýãýýä Target -ààñ mainFrame ñîíãîíî... Modify>Page Properties. Èíãýæ á¿ãäèéã Link õèéíý.Internet Explore äýýð õóóäñûã øàëãàæ ¿çíý. F12 òîâ÷ëóóð äàðíà. Link (õîëáîëò) õèéíý. 66 . Link òàâüñàí òåêñòèéí ºí㺠õàðàõ õýö¿¿ áîë Link (õîëáîëò) õèéõ òåêñòèéã èäýâõæ¿¿ëíý. File>Save All Frame 10.

17 Animation GIF (Õºäºë㺺íòýé çóðàã) 67 .Õè÷ýýë.

Kimi-Lesson/Web Design/ WD-Lesson17- Animation-GIF/ morin. 68 . 2. File>Open.. Image>Adjust>Hue/Saturation 1. 3. Adobe ImageReady-èéã àæèëëóóëíà. -ãààð òîëãîéã òýìäýãëýýä Ctrl-T äàðààä æààõàí ýðã¿¿ëíý. Layer>Duplicate Layer.. ªíãèéã çàñíà.eps OK äàðíà.Õºäºë㺺íòýé çóðãèéã õèéõ. Õºäºëäºã õºãæèì÷íèé çóðãèéã õèéíý. -ãààð òîìðóóëæ õàðààðàé..

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

. Matte-ààñ None ñîíãîíî. GIF -ãàà𠺺ðèéí õàâòàñ äîòîð õàäãàëíà.. File>New..Õóðäàí õºäºëæ áàéâàë õ¿ëýýõ ñåêóíä ñîíãîíî. Optimize öîíõ-ààñ GIF 32 Ditherd ñîíãîîä 4. Õºäëºõ ãàð÷èãèéí çóðãèéã õèéíý. File>Save Optimized as. 70 . Äàâòàëòààñ Forever -ã ñîíãîíî..

ñîíãîîä íýã ¿ñýã çóðíà. Layer öîíõíîîñ -ã äàðààä øèíý Layer-ã íýìíý. -ãààð äóðòàé ºí㺠áàñ çîõèîìæòîé õýìæýýã Layer 3 äýýð íýã ¿ñýã çóðíà. Èíãýýä òóñ òóñ øèíý Layer äýýð íýã ¿ñýã çóðíà. 71 . Layer 2 äýýð íýã ¿ñýã çóðíà. Äàõèàä -ã äàðààä øèíý Layer-ã íýìíý.

Animation Öîíõ äýýð 1-ð õ¿ðýýã ñîíãîîä Layer öîíõ äýýð çºâõºí Layer 1 -ã õàðóóëíà. 72 . MONGOL ãýæ çóðíà. Layer>Duplicate Layer Layer 8 copy õèéíý.Äàõèàä -ã äàðààä øèíý Layer-ã íýìýýä Image>Adjust>Hue/saturation îðîîä ªí㺠ººð÷èëíº .

õ¿ðòýë õèéíý. Òýãýýä Layer öîíõ äýýð Layer 2-ã áàñ õàðóóëíà. Animation Öîíõ äýýð -ã äàðààä øèíý õàëüñ õèéíý. 73 .Animation Öîíõ äýýð -ã äàðààä Èíãýæ Animation Öîíõ äýýð7-ð õàëüñ øèíý õàëüñ õèéíý. Òýãýýä Layer öîíõ äýýð Layer 3 -ã áàñ õàðóóëíà.

8-ð õàëüñàí äýýð çºâõºí Layer 8 -ã õàðóóëíà. 74 . 10-ð õàëüñàí äýýð çºâõºí Layer 8 -ã õàðóóëíà. 9-ð õàëüñàí äýýð çºâõºí Layer 8 copy -ã õàðóóëíà. 11-ð õàëüñàí äýýð çºâõºí Layer 8 copy -ã õàðóóëíà. -ã äàðààä Play õèéíý.

File>Save as. GIF -ãàà𠺺ðèéí õàâòàñ äîòîð õàäãàëíà. Optimize öîíõ-îîñ GIF 32 Ditherd ñîíãîîä Site>New Site....5 õ¿ëýýõ ñåêóíä ñîíãîíî..7-ð õàëüñàí äýýð æààõàí õ¿ëýýõ íü äýýð. -ã äàðààä ººðèéí õàâòàñ ñîíãîíî. Dreamweaver-èéã àæèëëóóëíà. File>Save Optimized as.. 75 . Matte-ààñ None ñîíãîíî.. 0. ªºðèéí õàâòàñ äîòîð õàäãàëíà. 5.

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

kimi.net -ã áè÷íý.Èíòåðíýòýä õîëáîõ õýðýãòýé.k-free.. ªºðèéí êîìïüþòåð äýýð õèéñýí âýá ñàéòûã SITE (ñàéò) -ã òîäîðõîéëîõ Èíòåðíýòýä ñóóëãàõûí òóëä: Site>Open Site. 2. HTTP Adress: -ä http://kimi.k-free.net User ID:kimi Password:******** Ok-ã äàðíà. 77 .k-free.18 Upload (Èíòåðíýòýä ôàéëûã ñóóëãàõ) 3. -User ID Login: -ä -Password kimi àâàõ õýðýãòýé.kimi. Dreamweaver-èéã àæèëëóóëíà.net -ã áè÷íý.. Password: -ä ******** Íóóö ¿ã áè÷íý. -URL (âýá ñàéòûí õàÿã) FTP Host: -ä -FTP server name ftp. ªºðèéí êîìïüþòåðèéí äýýð õèéñýí âýá ñàéòûã ñîíãîíî. Æèøýý URL: http://kimi.Internet Provider (Èíòåðíýò õîëáîëò êîìïàíè) ýñâýë ¿íýã¿é âýá ñàéòòàé ãýðýý Remote Info ñîíãîîä õèéãýýä Access-ààñ FTP ñîíãîíî.net FTP server name: ftp.k-free.Õè÷ýýë. 1.

htm ýñâýë index. 5. Ñóóëãàõ ôàéëûã á¿ãäèéã íü ñîíãîîä -ã äàðíà. Îäîî ãýðýý õèéñýí âýá ñàéòûã õàéæ áàéíà. õîëáîëò óíòðààíà. 78 . 6. -ã äàðààä ãýðýý õèéñýí âýá ñàéòòàé õîëáîëò õèéíý.html ãýæ áàéõ ¸ñòîé. Á¿õ ôàéëûã ñóóëãàñàí áîë -ã äàðààä Âýá ñàéòûí í¿¿ð õóóäàñíû íýð index.Internet Explore äýýð âýá ñàéòûã øàëãàæ ¿çíý. 7.4. 8. URL-ã áè÷íý. Í¿¿ð õóóäàñûí íý𠺺ð÷èëíº.

×.Êîìïüþòåðèéí ãðàôèê äèçàéí ªºðºº ñóðàõ áè÷èã 4 .×óëóóí-Ýðäýíý. Ý. Ã. Ã. Á.Ýíõíàéðàìäàë Ñ.Web Design Çîõèîã÷ : Õàÿøè Êèìèõèêî Òóñëàñàí õ¿ì¿¿ñ : Á.Öýíäñ¿ðýí.Áîëîðòóÿà. õóäàëäààëàõûã õîðèãëîíî. Á.Áàòçîðèã.Îþóíãýðýë.Ãàíòóëãà. Ý.Îþóíöýöýã Ñî¸ëûí Êîëëåæ Óëààíáààòàð 2002 Óã íîìûã á¿õýëä íü áîëîí õýñýã÷ëýí çºâøººðºëã¿éãýýð õóâèëàí îëøðóóëæ. Á.Ñàíñàðòóÿà. 79 .Àççàÿà. À.×èíçîðèã.