ККооммппььююттееррииййнн ггррааффиикк ддииззааййнн өөөөррөөөө

ссуурраахх ббииччиигг

WWeebb DDeessiiggnn Book

1

ªìíºõ ¿ã

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

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

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

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

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

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

2

Ãàð÷èã

Õè÷ýýë- 01

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

Õè÷ýýë- 02 Õè÷ýýë- 03

Õè÷ýýë- 04 Õè÷ýýë- 05 Õè÷ýýë- 06

Õè÷ýýë- 08 Õè÷ýýë- 09

Õè÷ýýë- 10 Õè÷ýýë- 11 Õè÷ýýë- 12

Õè÷ýýë- 13 Õè÷ýýë- 14

Õè÷ýýë- 07

Õè÷ýýë- 15

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

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

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

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

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

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

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

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

3

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

4

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

íýã óäàà äàðàõ......Clickõî¸ð óäàà äàðàõ......Double Click

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

áàðóóí Click

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

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

5

Õè÷ýýë- 01

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

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

- á¿õ äýëõèéí ñ¿ëæýýí¿¿äèéí ñ¿ëæýý- õàìòûí õàðèëöàà õîëáîî- ìýäýýëýë äàìæóóëàõ çàì áà àñàð èõ áàÿëàã,

íººö áîëîìæóóä- êîìïüþòåðóóäûí õîëáîëò þì.

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

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

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

6

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

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

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

Õè÷ýýë- 02

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

kimi-Lessons /web design / WD-Lesson02-Internetindex.html-ã íýýãýýä ¿ç.

Ýõëýýä File>Open...

Áóöàõ

ªìíºõ

Çîãñîîõ

Ýðãýæà÷ààëàõ

Ãýð

Õàéõ -ã ãàð÷ èðýõ õýñãèéã äàð !

7

Õè÷ýýë- 03

HTML-1

1. HTML ãýæ þó âý?

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

3. HTML -èéí ¿íäñýí ïðîãðàìèéí õýë

2. Notepad ïðîãðàììûã àæèëëóóëàõ

[Start] -[Programs] -[Accessories]-Notepad-ã ñîíãîíî.

Ýõëýýä Note pad ïðîãðàìì äýýð äîîðõ áè÷ýýðýé.

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

<HTML> <HEAD> </HEAD>

<BODY> </BODY></HTML>

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

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

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

8

<HTML> <HEAD>

<TITLE>HTML Web Page</TITLE>

</HEAD>

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

</BODY></HTML>

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

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

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

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

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

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

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

Âýá õóóäàñûí ãàð÷èã ýíä ãàðíà.

9

Õè÷ýýë- 04

HTML-2

<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=" ">....</FONT> Òåêñòèéí õýìæýý ººð÷èëºõ.

<FONT color=" ">....</FONT> Òåêñòèéí ºí㺠ººð÷èëºõ.

<FONT face=" ">....</FONT> Òåêñòèéí øðèôò ººð÷èëºõ.

<STRONG>....</STRONG> ¯ñãèéí õýëáý𠺺ð÷èëíº---Bold

<EM>....</EM> ̄ ñãèéí õýëáý𠺺ð÷èëºõ---Italic

<U>....</U> ¯ñãèéí õýëáý𠺺ð÷èëºõ---Underline

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

<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">....</P> ãîëîîð çýðýãö¿¿ëñýí ºã¿¿ëáýð

<P align="right">....</P> áàðóóí òàëààð çýðýãö¿¿ëñýíºã¿¿ëáýð

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

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

10

<HTML> <HEAD>

<TITLE>HTML Web Page</TITLE><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>

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

<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=" "> Í¿äíèé ôîíû ºíãº

11

Õè÷ýýë- 05

HTML-3

<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.jpg"><HR size="4">

</BODY></HTML>

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

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

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

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

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

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

<HTML> <HEAD>

<TITLE>Modern Art in Mongolia</TITLE> </HEAD>

<BODY background="stone.gif"><P align="center"><IMG src="art2.jpg"><HR size="4"><P align="center"><IMG src="art3.jpg"><HR size="4"><P align="center"><A href="top.html">Back</A>

</BODY></HTML>

2. Link (õîëáîëò) õèéõ.

Äàðààãèéí õóóäàñ õèéíý.

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

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

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

12

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

<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.jpg"><HR size="4"><P align="center"><A href="page-2.html">Enter</A>

</BODY></HTML>

File>Open... top.html

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

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

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

13

Õè÷ýýë- 06

1.Dreamweaver ãýæ þó âý ?

Dreamweaver ãýæ þó âý ?

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

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

Object Panel Tool Bar

Document Window

Tag selecter

Property Inspector

Launcher Bar

2.Dreamweaver ïðîãðàììûã àæèëëóóëàõ

[Start] -[Programs] -[Macromedia Dreamweaver4]- Dreamweaver4 ñîíãî.

14

4.Õàðàãäàöûí ººð÷ëºëò

HTML-view õàðàãäàö

File>Open...Visit Mongolia - Ulaanbaatar Tour.htm

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

Design õàðàãäàö

5.Object Panel Click

Character Common

Forms Frames Head Invisible Special

5.Property Inspector

Click

15

Õè÷ýýë- 07

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

1.Ôàéëûí á¿òöèéã øèéäýõ

news

index(top)

info mail link news

index(top)

info mail link

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

2) Õýðýâ âýá õóóäñóóäûí ôàéëóóä îëîí áàéâàëòóñ á¿ðä íü õàâòàñ íýýæ äîòîð íü õàäãàëíà.

2. Âýá õóóäàñíû ýñêèç ãàðãàõ

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

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

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

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

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

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

16

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

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

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

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

6.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é6.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é6.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é6.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é6.•@ƒy•[ƒW‚ðƒŒƒCƒAƒEƒg‚·‚é

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

6. Õóóäñûí áàéðëàë, äèçàéí

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

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

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

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

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

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

(Internet Explore, Netscape Navigator...)- Windows áà Macintosh 2 äýýð øàëãàõ.

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

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

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

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

17

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

Õè÷ýýë- 08

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

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

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

Windows Explore-èéã àæèëëóóëíà.

File>New>Folder

Øèíý õàâòàñûã õèéíý.

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

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

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

Kimi-Lesson/ My Works/ ñàÿ õèéñýí ººðèéíõàâòàñä îðîîä Paste õèéíý.

18

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

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

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

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

Windows Explore-èéã õààõ.

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

ººðèéí õàâòàñíû íýð

OK-ã äàð.

OK-ã äàð.

19

7.Çóðãûã îðóóëæ èðíý.

8. -ã äàðààä çóðààñ çóðíà. H=6 (ºíäºð)

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

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

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

6.Word øèã òåêñò áè÷èíý.Modern Art in Mongolia

Font size : 6 ãîëëóóëíà

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

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

-ã Click õèéãýýä

art1.jpg ñîíãî.

20

13.Modify>Page Properties...

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

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

9.Enter ãýæ òåêñò áè÷.

10.File>Save

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

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

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

art2.jpg, art3.jpg

21

19.File>Save

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

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

16.Link õèéõ.Back òåêñòèéã èäýâõèæ¿¿ëýýä

Link -èéã äàðààä top-page.html ñîíãî.

17.File>Save

18.top-page.html äýýð Enter-ûã èäýâõèæ¿¿ëýýä

Link -ûã äàðààä next-page.html ñîíãî.

22

Õè÷ýýë- 09

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

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

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

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

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

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

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

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

Windows Explore-èéã àæèëëóóëàõ.

File>New>Folder

Øèíý õàâòàñûã õèéíý.

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

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

23

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

Modify>Page Properties...Title áè÷ýýäBackground ºí㺠ñîíãî.

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

Òýãýýä ÎÊ-ã äàðíà.

5.Õóóäñûí äýýð òåêñò áè÷íý.

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

Size-ãààñ 6 ñîíãîíî.

äàðààä ãîëëóóëíà.

áàñ -èéã ñîíãîíî.

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

Õýðâýý ç¿ãýýð Enter äàðñàí áîë ìºðèéíõîîðîíä çàéòàé áîëíî.

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

24

Òåêñòèéí ºí㺠ñîíãîõ.

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

-èéã õî¸ð óäàà äàðààä

Ïàðàãðàôèéã óðäààñ çàé àâàõ.

Äàðààãèéí ìºðä îðîîä èíãýæ áè÷èõ.

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

-èéã äàðæ äóãààðëàõ.

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

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

çóðààñ çóðàõ.

25

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

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

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

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

26

Õè÷ýýë- 10

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

JPEG,GIFÈíòåðíåòýä îðîîä âýá õóóäñûã ¿çýõýä çóðàã óäààí èðäýã.ßàãààä ãýâýë óòàñíû õîëáîîíû õóðä óäààí.

Òèéì ó÷ðààñ âýá õóóäàñíû çóðãèéí ôàéëûí õýìæýý æèæèã íü äýýð.

Âýá õóóäàñ äýýð õýðýãëýäýã çóðãèéí ôàéëûí ôîðìàòóóä õî¸ð ç¿éë áàéíà.

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

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

1.Ôîòî âýá õóóäàñ äýýð õýðýãëýõçóðãèéí ôàéëààð õàäãàëàõ.

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

[400*300 pixel 267KB]

2) File>Save for web...

Ãàð÷ èðñýí öîíõíûSettings-ààñ[JPEG High] ñîíãî.

Ýõíèéáàéäàë

Ýõíèéôàéëûíõýìæýý

JPEG-èéíáàéäàë

JPEG-èéíôàéëûíõýìæýý:33.61KB

JPEG-èéí÷àíàð;JPEG-Higháîë 60 áîëãîõ.

[JPEG High (ºíäºð)]

[JPEG Medium (äóíä çýðãèéí)]

ôàéëûíõýìæýý:16.81KB

÷àíàð; 30 áîëãî.

27

Òýãýýä ÷àíàð áàñ ôàéëûíõýìæýýã ñàéí áîäñîí áîëOK-ã äàðààä íýð ºãººäõàäãàëààðàé.

[JPEG Low (íàìõàí)]

ôàéëûíõýìæýý:10.68KB

÷àíàð; 10 áîëãîõ.

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

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

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

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

-ãààð õýðýãòýé õýñãýý ñîíãîîä

2) File>Export...File of type-íààñ EPS ñîíãîîä[Selected only](çºâõºí ñîíãîñîí õýñãýý) ñîíãî.

28

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

3) Photoshop äýýð ñàÿ õàäãàëñàí ôàéëûã íýýõ.File>Open...

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

Çàðèì ¿åä èíãýæ ºí㺠íü ìóó õàðàãäàæ ìàãàäã¿é.Òýãâýë Photoshop äýýð ºíãèéã çàñàõ õýðýãòýé.

Image>Adjust>Hue/Saturationñîíãîîä ºí㺠çàñàõ.

ªíãèéã çàññàí áîë OK-ã äàðíà.

2) File>Save for web...

Ãàð÷ èðñýí öîíõíûSettings-ààñ[GIF 32 Ditherd] ñîíãî.

Ýõíèéáàéäàë

Ýõíèéôàéëûíõýìæýý

GIF-èéíáàéäàë

GIF-èéíôàéëûíõýìæýý:33.61KB

GIF-èéíºíãºíèé òîî

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

29

GIF ºíãºíèé òîî áàãà áîëôàéëûí õýìæýý àðàé æèæèã áîëíî.

Íýã ÷óõàë þì áàéãàà.

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

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

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

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

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

30

Õè÷ýýë- 11

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

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

31

1. Ýõëýýä äîîðõ Internet Explore-èéíçóðãèéã õèéæ ¿çýõ.

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

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

3) Edit>Paste (Ctr+V)

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

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

Delete õèéíý.

32

6) Layer>Flatten Image

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

9) -ãààð äîîðõ òýìäýãëýýä

-èéã ñîíãîîä Ctr+Alt+Shift äàðààä

äîîøîî Drag õèéíý.

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

33

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

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

3.Corel Draw-èéã àæèëëóóëíà.Øèíý õóóäàñ õèéãýýä A3 öààñ ñîíãî.

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

Òýãýýä ýíý Internet Explore öîíõ äîòîðäèçàéí õèéíý.

4.File>Import...

Kimi-Lesson / Web Design / Lesson11-Magic/Mongol-clipart.cdr

5.Äîîðõ òåêñò çóðààñ çóðíà.

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

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

34

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

File>Export...

5.File>Import...kharakorm.JPG

File of type-íààñ EPS ñîíãî[Selected only](çºõºí ñîíãîñîí õýñýã) ñîíãîíî.

OK-ã äàðíà.7.Èíãýýä Ãàð÷èã áàñ ôîòî-ûã òóñ òóñ

ñîíãîîäFile>Export...EPS-ãààð õàäãàëàõ.

8. Photoshop-èéã àæèëëóóëàõ.File>Open...

ñàÿ õàäãàëñàí ãóðâàí ôàéëûã íýýíý.

35

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

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

Image>Adjust>Hue/Saturation...

10.File>Save for Web...

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

ªºðèéí õàâòàñ äîòîð õàäãàëíà.

GIF 32 Ditherd -ã ñîíãîîä

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

36

11.Äîîðõ ôîòîã õàäãàëíà.

JPEG Medium -ã ñîíãîîä OK-ã äàðíà.

File>Save for Web...

OK-ã äàðíà.

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

Site>New Site...Site name áè÷ýýäLocal Root Folder -îîñ ººðèéí Folder ñîíãîíî.

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

13.Âýá õóóäàñûã õàäãàëíà.File>Save As... index.htmlººðèéí Folder äîòîð õàäãàëíà.

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

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

37

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

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

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

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

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

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

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

18.File>Save

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

38

Õè÷ýýë- 12

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

Kimi-Lesson/Web Design/ WD-Lesson12-Link/îðîîä ýíä áàéãàà 4 õàâòàñûã ñîíãîîä CopyÕè÷ýýë 10 äýýð õèéñýí ººðèéí õàâòàñ îðîîäPaste õèéíý.

1.Õýðýãòýé ôàéëûã Copy õèéõ.Ýõýëýýä Windows Explore-èéã àæèëëóóëíà.

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

File>Open

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

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

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

Ãàð÷ èðñýí öîíõ äýýð about Mongol - õàâòàñààñmongol-tuhai.html ôàéëûã ñîíãîíî.

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

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

39

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

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

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

3.Í¿¿ð õóóäàñ òàé Link áàéãóóëàõ.

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

Äîîðõ Link áàéãóóëàõ òåêñòèéã èäýâõæ¿¿ëýýä

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

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

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

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

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

40

Õè÷ýýë- 13

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

41

Kimi-Lesson/ My Works/ îðîîäøèíý ººðèéí õàâòàñûã õèéíý.

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

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

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

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

3.Âýá õóóäàñûã õàäãàëíà.File>Save As... about-Page.html

ººðèéí Folder äîòîð õàäãàëíà.

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

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

5.Ãàð÷èã áè÷èõ.

-ã äàðíà.

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

42

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

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

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

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

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

-ã Click õèéíý.

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

Äàðààãèéí í¿äýíä îðîîä -ã äàðààä çóðãèéã

îðóóëæ èðýõ.

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

43

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

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

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

-ã Click õèéíý.

Õî¸ð í¿ä ñîíãîîä -ã äàðààä íýãòãýíý.

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

44

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

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

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

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

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

45

Õè÷ýýë- 14

Hotspot, Anchor

46

1.Õýðýãòýé ôàéëûã Copy õèéíý.Ýõëýýä Windows Explore-èéã àæèëëóóëíà.

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

2.Corel Draw-èéã àæèëëóóëíà.Øèíý õóóäàñ õèéãýýä A3 öààñ ñîíãîíî.

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

3.Corel Draw äýýð õóóäàñíû äèçàéí øèéäíý.

-ãààð äºðâºëæèí çóðààä äýâñãýðèéí ºíãº

ñîíãîíî.

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

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

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

47

Ãàð÷èãèéí òåêñòèéã ñîíãîîäFile>Export.... map-title ãýäýã íýð ºãººäEPS-ãààð õàäãàëíà.

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

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

4. Photoshop-èéã àæèëëóóëíà.File>Open...

ñàÿ õàäãàëñàí õî¸ð ôàéëûã íýýíý.

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

Ãàð÷èãèéí çóðãèéã ñîíãîîäFile>Save for Web...

GIF 32 Ditherd -ã ñîíãîíî.

48

Matte-ààñ Other... ñîíãîîä

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

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

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

5. Dreamweaver-èéã àæèëëóóëíà.Site>Open Site...

ªìíº õèéñýí ººðèéí Site áàéñàí áîë òýðèéãñîíãîíî. Õýðâýý áàéõã¿é áîëSite>New Site... -ã òîäîðõîéëîîðîé.

6.Âýá õóóäàñûã õàäãàëíà.File>Save As... mon-map.htmlººðèéí Folder äîòîð õàäãàëíà.

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

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

Ìîíãîëîîð áè÷èõ áîë:Document Encoding-ààñ

Cylilic(windows-1251) ñîíãîíî.

49

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

äàðààä ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí

çóðãèéã ñîíãîíî.

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

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

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

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

-ã äàðààä çóðààñ çóðíà.

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

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

50

Õ¿ñíýãòèéí õýìæýýã ººð÷èëíº.

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

Òýãýýä òåêñò áè÷ýýä

-ã äàðààä çóðààñ çóðààä -ã äàðààä

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

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

-ã äýýð òàâèàä

Object Panel-ààñ Invisibles ñîíãîíî.

(Anchor)-ã äàðààä

fubus ãýæ íýð ºãíº.

8. (Anchor)-ã òàâèíà.

51

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

9. Hotspot õèéíý.

Ãàçðûí çóðãèéã ñîíãîíî.

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

òýìäýãëýíý.

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

-ã äîîð òàâèàä (Anchor)-ã äàðààä

top ãýæ íýð ºãíº.

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

Òýãýýä (Anchor), õ¿ñíýãò, TOP òåêñòèéã ñîíãîîä

Copy (Ctrl-C) õèéíý.

52

Õ¿ñíýãòèéí òåêñò, ºíãº, çóðãèéã ººð÷è뺺ä

(Anchor)-ã ñîíãîîä otgon ãýæ íýð ºãíf.

Òýãýýä ãàçðûí çóðãèéí äýýð

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

òýìäýãëýíý.Link äîòîð #otgon ãýæ áè÷íý.

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

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

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

53

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

Õè÷ýýë- 15

Rollover Image

1.ªºðèéí õàâòàñ íýýíý.Ýõýëýýä Windows Explore-èéã àæèëëóóëíà.

Kimi-Lesson/My works/ îðîîä øèíý ººðèéíõàâòàñûã íýýíý.

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

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

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

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

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

3.Òîâ÷èéã õèéæ ¿çíý.

Corel Draw-èéã àæèëëóóëíà.File>Open...Kimi-Lesson/Web Design/

WD-Lesson15- Rollover/ step-1.cdr

File>New>Folder

54

Òåêñò áè÷íý.

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

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

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

Photoshop-èéã àæèëëóóëíà.File>Open...

ñàÿ õàäãàëñàí ôàéëûã íýýíý.

kimi005

55

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

ªí㺠çàñíà.Image>Hue/Saturation...

Layer-èéí Ýôôåêòèéã ºãíº.Layer>Effects>Bevel and Emboss

File>Save for Web... GIF 32 Ditherd -ã ñîíãîíî.

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

56

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

Òîâ÷íû ºí㺠ººð÷èëíº.Image>Adjust>Varietions...

File>Save for Web... GIF 32 Ditherd -ã ñîíãîíî.

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

Rollover Image-òýé âýá õóóäàñ õèéíý.

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

Site>New Site... -ã äàðààä ñàÿ íýýñýí

ººðèéí õàâòàñ ñîíãîíî.

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

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

57

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

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

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

-ã äàðààä ãîëîîð çýðýãö¿¿ëíý.

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

-ã äàðààä õ¿ñíýãòèéí í¿äýí äîòîð

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

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

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

58

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

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

-ã äàðààä çàé àâíà.

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

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

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

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

ñîíãîíî.

59

Original Image-ààñ -ã äàðààä

about.gif ñîíãîíî.

Èíãýæ ººð òîâ÷ áàñ -ã äàðààä ãàð÷ èðñýí

öîíõíîîñ çóðãèéã ñîíãîíî.

Rollover Image-ààñ -ã äàðààä

about2.gif ñîíãîíî.

When Click...-ààñ -ã äàðààä

mongol-thuhai.htm ñîíãîíî.

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

áè÷íý.

60

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

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

61

Õè÷ýýë- 16

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

62

1.ªºðèéí õàâòàñ íýýíý.Ýõëýýä Windows Explore-èéã àæèëëóóëíà.

Kimi-Lesson/My works/ îðîîä øèíý ººðèéíõàâòàñûã íýýíý.

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

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

Site>New Site... -ã äàðààä ñàÿ íýýñýí

ººðèéí õàâòàñ ñîíãîíî.

4.Frame-ä õóâààíà.Objects öîíõîîñ Frames ñîíãîíî.

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

-ã äàðíà.

File>New>Folder

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

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

63

Frameset ãýäýã

top-frame

main-frameside-frame

5.Frameset -ã õàäãàëíà.File>Save Frameset as...

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

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

Top-Frame õóóäñûã õàäãàëíà.File>Save Frame as...

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

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

Modify>Page Properties...Title áè÷ýýäÄîîðõèéã ñîíãîíî.

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

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

64

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

Frame-Image õàâòàñíààñ ñîíãîíî.

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

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

Side-Frame õóóäàûã õàäãàëíà.File>Save Frame as...

ªºðèéí õàâòàñ äîòîð side-frame ãýæíýð ºãººä õàäãàëíà.

Modify>Page Properties...Title áè÷ýýä äîîðõèéã ñîíãîíî.

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

Õ¿ñíýãòèéí í¿äèéã á¿ãäèéã íü èäýâõæ¿¿ëíý.

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

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

65

File>Open in frame...mongol-tuhai.html ñîíãîíî.

Òýãýýä File>Save frameset

Modify>Page Properties...

Äýýä áà ç¿¿í òàëûí çàéä 0 ºãíº.

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

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

8. Main-Frame äîòîð õóóäñûã îðóóëæ èðíý.Main-Frame -ã ñîíãîíî.

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

66

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

9. Link (õîëáîëò) õèéíý.

Link (õîëáîëò) õèéõ òåêñòèéã èäýâõæ¿¿ëíý.

Link -ààñ -ã äàðààä õîëáîëò õèéõ

õóóäñûã ñîíãîíî.

Òýãýýä Target -ààñ mainFrame ñîíãîíî.

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

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

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

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

67

Õè÷ýýë- 17

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

68

Õºäºë㺺íòýé çóðãèéã õèéõ.

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

File>Open...Kimi-Lesson/Web Design/ WD-Lesson17-Animation-GIF/ morin.eps

OK äàðíà.

2. ªíãèéã çàñíà.

Image>Adjust>Hue/Saturation

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

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

Layer>Duplicate Layer..

-ãààð òîëãîéã òýìäýãëýýä

Ctrl-T äàðààä æààõàí ýðã¿¿ëíý.

69

-ãààð ãàð áàñ òýìäýãëýýä

Ctrl-T äàðààä æààõàí ýðã¿¿ëíý.

Animation Öîíõ äýýð 1-ð õ¿ðýýã ñîíãîîä

Layer öîíõ äýýð Layer 1 copy -ã íóóíà.

Animation Öîíõ äýýð -ã äàðààä

øèíý õ¿ðýý õèéíý.Òýãýýä Layer öîíõ äýýð Layer 1 copy -ã¿ç¿¿ëýýä Layer 1 -ã íóóíà.

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

70

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

Äàâòàëòààñ Forever -ã ñîíãîíî.

Optimize öîíõ-ààñ GIF 32 Ditherd ñîíãîîä

Matte-ààñ None ñîíãîíî.

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

4. Õºäëºõ ãàð÷èãèéí çóðãèéã õèéíý.

File>New...

71

-ãààð äóðòàé ºí㺠áàñ çîõèîìæòîé õýìæýýã

ñîíãîîä íýã ¿ñýã çóðíà.

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

íýìíý.

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

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

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

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

72

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

MONGOL ãýæ çóðíà.

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

Image>Adjust>Hue/saturation îðîîäªí㺠ººð÷èëíº .

Animation Öîíõ äýýð 1-ð õ¿ðýýã ñîíãîîä

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

73

Animation Öîíõ äýýð -ã äàðààä

øèíý õàëüñ õèéíý.

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

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

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

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

74

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

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

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

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

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

75

7-ð õàëüñàí äýýð æààõàí õ¿ëýýõ íü äýýð.

0.5 õ¿ëýýõ ñåêóíä ñîíãîíî.

Optimize öîíõ-îîñ GIF 32 Ditherd ñîíãîîä

Matte-ààñ None ñîíãîíî.

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

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

Site>New Site... -ã äàðààä ººðèéí õàâòàñ

ñîíãîíî.

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

76

Page Property-èéã òîõèðóóëàõModify>Page Properties...Title áè÷ýýä äîîðõè øèã ñîíãîíî.

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

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

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

77

Õè÷ýýë- 18

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

ªºðèéí êîìïüþòåð äýýð õèéñýí âýá ñàéòûãÈíòåðíýòýä ñóóëãàõûí òóëä:

1.Èíòåðíýòýä õîëáîõ õýðýãòýé.

2.Internet Provider (Èíòåðíýò õîëáîëò êîìïàíè) ýñâýë ¿íýã¿é âýá ñàéòòàé ãýðýý

õèéãýýä-URL (âýá ñàéòûí õàÿã)-FTP server name-User ID-Password

àâàõ õýðýãòýé.

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

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

User ID:kimiPassword:********

Æèøýý

3. Dreamweaver-èéã àæèëëóóëíà.SITE (ñàéò) -ã òîäîðõîéëîõSite>Open Site...

ªºðèéí êîìïüþòåðèéí äýýð õèéñýíâýá ñàéòûã ñîíãîíî.

HTTP Adress: -ähttp://kimi.k-free.net -ã áè÷íý.

Remote Info ñîíãîîä

Access-ààñ FTP ñîíãîíî.FTP Host: -äftp.kimi.k-free.net -ã áè÷íý.

Login: -äkimi

Password: -ä******** Íóóö ¿ã áè÷íý.

Ok-ã äàðíà.

78

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

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

õîëáîëòõèéíý.

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

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

äàðíà.

7. Á¿õ ôàéëûã ñóóëãàñàí áîë -ã äàðààä

õîëáîëò óíòðààíà.

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

URL-ã áè÷íý.

79

Êîìïüþòåðèéí ãðàôèê äèçàéí

ªºðºº ñóðàõ áè÷èã 4 - Web Design

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

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

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

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

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

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