Soumettre la recherche
Mettre en ligne
Веб сайт өөрөө хийж сурах бичиг
•
5 j'aime
•
3,523 vues
Gantulga Dashdondov
Suivre
Веб сайт хэрхэн хийх вэ? Анхан шатны мэдлэг олгох сурах бичиг
Lire moins
Lire la suite
Formation
Signaler
Partager
Signaler
Partager
1 sur 80
Recommandé
Web design book
Web design book
Ylalt
Lecture 3
Lecture 3
Muuluu
1.page maker e book
1.page maker e book
Dash Oogii
Voices for Custodial Justice Newsletter - January 2012 issue
Voices for Custodial Justice Newsletter - January 2012 issue
hrfmedia
Voices for Custodial Justice Newsletter - March 2015 Issue
Voices for Custodial Justice Newsletter - March 2015 Issue
hrfmedia
Excel dad10 14
Excel dad10 14
daalt209
NBB Lecture 15
NBB Lecture 15
Bbujee
Ger buliin erkh zui
Ger buliin erkh zui
Librarian
Recommandé
Web design book
Web design book
Ylalt
Lecture 3
Lecture 3
Muuluu
1.page maker e book
1.page maker e book
Dash Oogii
Voices for Custodial Justice Newsletter - January 2012 issue
Voices for Custodial Justice Newsletter - January 2012 issue
hrfmedia
Voices for Custodial Justice Newsletter - March 2015 Issue
Voices for Custodial Justice Newsletter - March 2015 Issue
hrfmedia
Excel dad10 14
Excel dad10 14
daalt209
NBB Lecture 15
NBB Lecture 15
Bbujee
Ger buliin erkh zui
Ger buliin erkh zui
Librarian
Lecture 9, 10
Lecture 9, 10
Muuluu
10.02.11
10.02.11
பெரியார் திராவிடர் கழகம்
NBB Lecture 14
NBB Lecture 14
Bbujee
Òðàíñôîðìàòîðûí îðóóëãûí á¿ä¿¿â÷
Òðàíñôîðìàòîðûí îðóóëãûí á¿ä¿¿â÷
zaluu_medleg
Voices for Custodial Justice Newsletter - July 2015 Issue
Voices for Custodial Justice Newsletter - July 2015 Issue
hrfmedia
Лекц 6
Лекц 6
Muuluu
NBB Lecture 13
NBB Lecture 13
Bbujee
15.12.11
15.12.11
பெரியார் திராவிடர் கழகம்
Voices for Custodial Justice Newsletter - December 2014 Issue
Voices for Custodial Justice Newsletter - December 2014 Issue
hrfmedia
Lecture 11, 12
Lecture 11, 12
Muuluu
Lecture4
Lecture4
Batjargal Batbold
Voices for custodial justice newsletter March 2015
Voices for custodial justice newsletter March 2015
HRF net
Лекц 7
Лекц 7
Muuluu
Children’s Voices for Human Rights Newsletter – Issue no.67
Children’s Voices for Human Rights Newsletter – Issue no.67
hrfmedia
V лекц
V лекц
Muuluu
Voices of Panchayat Presidents - Newsletter - Issue No.23
Voices of Panchayat Presidents - Newsletter - Issue No.23
hrfmedia
H.el205 l5
H.el205 l5
zaluu_medleg
Лекц 11
Лекц 11
Muuluu
вэб дизайн - хичээл 1
вэб дизайн - хичээл 1
Chantsaldulam Ganbadrakh
өөрийн веб сайтыг хийх
өөрийн веб сайтыг хийх
nyamka0928
Миний вэб сайт хийдэг аргачлал
Миний вэб сайт хийдэг аргачлал
Javkhlan Rentsendorj
Html хичээл
Html хичээл
Баярсайхан Л
Contenu connexe
Tendances
Lecture 9, 10
Lecture 9, 10
Muuluu
10.02.11
10.02.11
பெரியார் திராவிடர் கழகம்
NBB Lecture 14
NBB Lecture 14
Bbujee
Òðàíñôîðìàòîðûí îðóóëãûí á¿ä¿¿â÷
Òðàíñôîðìàòîðûí îðóóëãûí á¿ä¿¿â÷
zaluu_medleg
Voices for Custodial Justice Newsletter - July 2015 Issue
Voices for Custodial Justice Newsletter - July 2015 Issue
hrfmedia
Лекц 6
Лекц 6
Muuluu
NBB Lecture 13
NBB Lecture 13
Bbujee
15.12.11
15.12.11
பெரியார் திராவிடர் கழகம்
Voices for Custodial Justice Newsletter - December 2014 Issue
Voices for Custodial Justice Newsletter - December 2014 Issue
hrfmedia
Lecture 11, 12
Lecture 11, 12
Muuluu
Lecture4
Lecture4
Batjargal Batbold
Voices for custodial justice newsletter March 2015
Voices for custodial justice newsletter March 2015
HRF net
Лекц 7
Лекц 7
Muuluu
Children’s Voices for Human Rights Newsletter – Issue no.67
Children’s Voices for Human Rights Newsletter – Issue no.67
hrfmedia
V лекц
V лекц
Muuluu
Voices of Panchayat Presidents - Newsletter - Issue No.23
Voices of Panchayat Presidents - Newsletter - Issue No.23
hrfmedia
H.el205 l5
H.el205 l5
zaluu_medleg
Лекц 11
Лекц 11
Muuluu
Tendances
(18)
Lecture 9, 10
Lecture 9, 10
10.02.11
10.02.11
NBB Lecture 14
NBB Lecture 14
Òðàíñôîðìàòîðûí îðóóëãûí á¿ä¿¿â÷
Òðàíñôîðìàòîðûí îðóóëãûí á¿ä¿¿â÷
Voices for Custodial Justice Newsletter - July 2015 Issue
Voices for Custodial Justice Newsletter - July 2015 Issue
Лекц 6
Лекц 6
NBB Lecture 13
NBB Lecture 13
15.12.11
15.12.11
Voices for Custodial Justice Newsletter - December 2014 Issue
Voices for Custodial Justice Newsletter - December 2014 Issue
Lecture 11, 12
Lecture 11, 12
Lecture4
Lecture4
Voices for custodial justice newsletter March 2015
Voices for custodial justice newsletter March 2015
Лекц 7
Лекц 7
Children’s Voices for Human Rights Newsletter – Issue no.67
Children’s Voices for Human Rights Newsletter – Issue no.67
V лекц
V лекц
Voices of Panchayat Presidents - Newsletter - Issue No.23
Voices of Panchayat Presidents - Newsletter - Issue No.23
H.el205 l5
H.el205 l5
Лекц 11
Лекц 11
En vedette
вэб дизайн - хичээл 1
вэб дизайн - хичээл 1
Chantsaldulam Ganbadrakh
өөрийн веб сайтыг хийх
өөрийн веб сайтыг хийх
nyamka0928
Миний вэб сайт хийдэг аргачлал
Миний вэб сайт хийдэг аргачлал
Javkhlan Rentsendorj
Html хичээл
Html хичээл
Баярсайхан Л
Html хэлний хичээл
Html хэлний хичээл
Otgonzaya Maagshin
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэ
FLux YT
блог хийх зааварчилгаа
блог хийх зааварчилгаа
Lha Bolorerdene
Html hel
Html hel
Munkhuu Buyanaa
10 анги халиука
10 анги халиука
Khishighuu Myanganbuu
Html гэж юу вэ
Html гэж юу вэ
Enhmandah Hemeelee
Вэб технологи, түүний хэрэглээ 10-р анги
Вэб технологи, түүний хэрэглээ 10-р анги
tsbmb
WordPress ашиглах
WordPress ашиглах
Ulziibat Nansaltsog
Ой тогтоолт
Ой тогтоолт
Gantulga Dashdondov
En vedette
(13)
вэб дизайн - хичээл 1
вэб дизайн - хичээл 1
өөрийн веб сайтыг хийх
өөрийн веб сайтыг хийх
Миний вэб сайт хийдэг аргачлал
Миний вэб сайт хийдэг аргачлал
Html хичээл
Html хичээл
Html хэлний хичээл
Html хэлний хичээл
Html кодчлол гэж юу вэ
Html кодчлол гэж юу вэ
блог хийх зааварчилгаа
блог хийх зааварчилгаа
Html hel
Html hel
10 анги халиука
10 анги халиука
Html гэж юу вэ
Html гэж юу вэ
Вэб технологи, түүний хэрэглээ 10-р анги
Вэб технологи, түүний хэрэглээ 10-р анги
WordPress ашиглах
WordPress ашиглах
Ой тогтоолт
Ой тогтоолт
Plus de Gantulga Dashdondov
Даллаганы уутны утга учир
Даллаганы уутны утга учир
Gantulga Dashdondov
Бэлэг эрхтэн томруулах дасгалууд
Бэлэг эрхтэн томруулах дасгалууд
Gantulga Dashdondov
Англи хэлийг маш хурдан сурах нууц арга
Англи хэлийг маш хурдан сурах нууц арга
Gantulga Dashdondov
Англи хэлийг хурдан сурах НУУЦ арга
Англи хэлийг хурдан сурах НУУЦ арга
Gantulga Dashdondov
1 цагт 50 үг цээжлэх аргууд
1 цагт 50 үг цээжлэх аргууд
Gantulga Dashdondov
Барилгын норм дүрэм
Барилгын норм дүрэм
Gantulga Dashdondov
Гүйцэтгэсэн ажлын тайлан бичих Tailan bichih
Гүйцэтгэсэн ажлын тайлан бичих Tailan bichih
Gantulga Dashdondov
Монгол хэлний товч тайлбар толь Цэвэл
Монгол хэлний товч тайлбар толь Цэвэл
Gantulga Dashdondov
Зөгийн балны тухай
Зөгийн балны тухай
Gantulga Dashdondov
Adobe Flash hicheel Mongol Флаш хичээл монгол
Adobe Flash hicheel Mongol Флаш хичээл монгол
Gantulga Dashdondov
Жава хэлний сурах бичиг Java helnii surah bichig Mongol
Жава хэлний сурах бичиг Java helnii surah bichig Mongol
Gantulga Dashdondov
Хоногт хоол, хүнсээр авах илчлэгийн хэмжээг хянах
Хоногт хоол, хүнсээр авах илчлэгийн хэмжээг хянах
Gantulga Dashdondov
Уйгур Монгол бичгийн цагаан толгой
Уйгур Монгол бичгийн цагаан толгой
Gantulga Dashdondov
Эссэг хэрхэн бичих вэ
Эссэг хэрхэн бичих вэ
Gantulga Dashdondov
Shine Sanaa
Shine Sanaa
Gantulga Dashdondov
хайр дурлал төрсөн цагаас шалтгаалах нь
хайр дурлал төрсөн цагаас шалтгаалах нь
Gantulga Dashdondov
өвлийн аюулгүй байдлын санамжууд
өвлийн аюулгүй байдлын санамжууд
Gantulga Dashdondov
та өөрийнхөө гараар бүтээж болох ид шидийн дэлгэц
та өөрийнхөө гараар бүтээж болох ид шидийн дэлгэц
Gantulga Dashdondov
Мөнгө үрэхгvйгээр ажилчидыг шагнах 10 арга
Мөнгө үрэхгvйгээр ажилчидыг шагнах 10 арга
Gantulga Dashdondov
гэр бүлийн аз жаргалын 7 түлхүүр
гэр бүлийн аз жаргалын 7 түлхүүр
Gantulga Dashdondov
Plus de Gantulga Dashdondov
(20)
Даллаганы уутны утга учир
Даллаганы уутны утга учир
Бэлэг эрхтэн томруулах дасгалууд
Бэлэг эрхтэн томруулах дасгалууд
Англи хэлийг маш хурдан сурах нууц арга
Англи хэлийг маш хурдан сурах нууц арга
Англи хэлийг хурдан сурах НУУЦ арга
Англи хэлийг хурдан сурах НУУЦ арга
1 цагт 50 үг цээжлэх аргууд
1 цагт 50 үг цээжлэх аргууд
Барилгын норм дүрэм
Барилгын норм дүрэм
Гүйцэтгэсэн ажлын тайлан бичих Tailan bichih
Гүйцэтгэсэн ажлын тайлан бичих Tailan bichih
Монгол хэлний товч тайлбар толь Цэвэл
Монгол хэлний товч тайлбар толь Цэвэл
Зөгийн балны тухай
Зөгийн балны тухай
Adobe Flash hicheel Mongol Флаш хичээл монгол
Adobe Flash hicheel Mongol Флаш хичээл монгол
Жава хэлний сурах бичиг Java helnii surah bichig Mongol
Жава хэлний сурах бичиг Java helnii surah bichig Mongol
Хоногт хоол, хүнсээр авах илчлэгийн хэмжээг хянах
Хоногт хоол, хүнсээр авах илчлэгийн хэмжээг хянах
Уйгур Монгол бичгийн цагаан толгой
Уйгур Монгол бичгийн цагаан толгой
Эссэг хэрхэн бичих вэ
Эссэг хэрхэн бичих вэ
Shine Sanaa
Shine Sanaa
хайр дурлал төрсөн цагаас шалтгаалах нь
хайр дурлал төрсөн цагаас шалтгаалах нь
өвлийн аюулгүй байдлын санамжууд
өвлийн аюулгүй байдлын санамжууд
та өөрийнхөө гараар бүтээж болох ид шидийн дэлгэц
та өөрийнхөө гараар бүтээж болох ид шидийн дэлгэц
Мөнгө үрэхгvйгээр ажилчидыг шагнах 10 арга
Мөнгө үрэхгvйгээр ажилчидыг шагнах 10 арга
гэр бүлийн аз жаргалын 7 түлхүүр
гэр бүлийн аз жаргалын 7 түлхүүр
Веб сайт өөрөө хийж сурах бичиг
1.
2.
1 ªìíºõ ¿ã ªíºº ¿åä
êîìïüþòåð àøèãëàí õýâëýëèéí ýõ áýëòãýõ íü ìàø ýíãèéí ¿çýãäýë áîëæýý. Ó÷èð íü êîìïüþòåðèéã àøèãëàñíààð àæëûí öàã áàãàñàæ, ýäèéí çàñãèéí õýìíýëò ãàðààä çîãñîõã¿é ÷ºëººòýé, ºíäºð ò¿âøèíû äèçàéíòàé á¿òýýë õèéæ ÷àääàãò áàéãàà þì. Èéìýýñ èðýýä¿éä äèçàéíåð áîëîõ õ¿íèé õóâüä êîìïüþòåð íýí ÷óõàë àæëûí áàãàæ áîëîîä áàéíà. Ýíýõ¿¿ “Êîìïüþòåðèéí ãðàôèê äèçàéí ªºðºº ñóðàõ áè÷èã” íîìûã ñóäàëñíààð êîìïüþòåð àøèãëàí äèçàéí õèéõýä õýðýã áîëîõ ¿íäñýí 3 ïðîãðàìì õàíãàìæ (Photoshop, Corel Draw, Pagemaker) áîëîí ñ¿¿ëèéí ¿åä ìàø èõýýð õýðýãëýãäýæ áàéãàà Web Design-íû òóõàé çýðýã îëîí ç¿éëèéã ñóð÷ áîëîõ þì. Óã íîìîíä àøèãëàãäàõ ä¿ðñ, çóðàã,òåêñò çýðãèéã CD-ROM-ä ñóóëãàí áýëäñýí áîëíî. Ýíý ìàòåðèàëóóäûã àøèãëàí, á¿ëýã á¿ðèéí àæëûã ýõíýýñ àâàõóóëààä øàò øàòààð ã¿éöýòãýñíýýð ïðîãðàìì õàíãàìæèéí ¿íäýñ áîëîí ïðàêòèê àæëûí äàðààëàë, ¿éë ÿâöàä ñóðàëöàõ áîëíî. Ýíýõ¿¿ íîìûã óíøèæ ñóäëàõàä õàìãèéí ÷óõàë íü ìàóçàà áàðèí, êîìïüþòåðèéíõàà ãàðûí òîâ÷ëóóðûã äàðæ ¿çýí, àëäàà ãàðãàñàí ÷ á¿õèé ë ç¿éëèéã ººðèéí ãàðààð òóðøèæ ¿çýí ã¿éöýòãýõ ÿâäàë þì. Óã íîìûã ñóäëàõäàà ç¿ãýýð ë õ¿íèé õèéñýí ç¿éëèéã õàðñàí òºäèéõíººð áîë òàíä îíöãîé àõèö ãàðàõã¿é. Á¿ãäèéã ººðèéí ãàðààð õèéæ ¿çýõ íü ÷óõàë þì. Ýíýõ¿¿ íîìûí àãóóëãûã á¿ãäèéã ñàéòàð îéëãîí, ïðîãðàìì õàíãàìæèéí ¿íäñèéã ñóðñíààð, ººñäèéíõºº äèçàéí çîõèîõ ÷àäâàðàà ñàéæðóóëæ ÷àäàõ áîëíî. Äèçàéíä ýíý çºâ þìàà ãýñýí õàðèóëò áàéõã¿é. Áè äèçàéí ãýäýã þìàíä ººðèéí áèåýýð ñóðàëöàõ ¸ñòîé ãýæ áîäîæ áàéíà. Íîì , ñýòã¿¿ë, ìºí ãóäàìæ òàëáàéí ðåêëàì ñàìáàðò ýíý ìàø ñàéí áîëæýý ãýæ áîäñîí äèçàéí òààðàëäâàë, ÷óõàì ¿¿íèé þó íü ñàéí áîëñîí áàéíà âý ãýäãèéã ñàéí áîäîæ ¿çýýðýé. Òýãýýä ýõëýýä óã äèçàéíûã äóóðèàãààä ººðºº õèéæ ¿çýýðýé. Ñàéí áîëñîí äèçàéíûã äóóðèàõ íü ìàø ÷óõàë áàéäàã. Ò¿¿íèé äàðàà óã äèçàéíä ººðèéíõºº ñàíààã áàãà çýðýã íýìæ ºãñíººð óëàì ñàéí äèçàéíûã õèéæ ÷àäàõ áîëíî. Ýíýõ¿¿ “Êîìïüþòåðèéí ãðàôèê äèçàéí ªºðºº ñóðàõ áè÷èã” íîìûã àøèãëàí, êîìïüþòåðèéí ãðàôèê äèçàéíû ¿íäñèéã ñóðñàí òà á¿õýí èðýýä¿éä ìîíãîëûí äèçàéíû øèíý ýðèíã òýðã¿¿ëæ ÿâàõ ãàðàìãàé ñàéí äèçàéíûã á¿òýýí, àìæèëò ¿ç¿¿ëýõèéã õ¿ñýí åðººå. Çîõèîã÷ Õàÿøè Êèìèõèêî
3.
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
4.
3 Õè÷ýýë- 18Õè÷ýýë- 16
Õè÷ýýë- 17 Frame-òýé âýá õóóäàñ Animation GIF (Õºäºë㺺íòýé çóðàã) Upload (Èíòåðíåòä ôàéëûã ñóóõ)
5.
4 Mouse (õóëãàíà) -íèé
àæèëëàãààã íýðëýõ íýã óäàà äàðàõ......Click õî¸ð óäàà äàðàõ......Double Click áàðóóí òîâ÷ëóóð äàðàõ ...... áàðóóí Click ç¿¿í òîâ÷ëóóð óäààí äàðàõ.....Press ç¿¿í òîâ÷ëóóðèéã äàðààä 纺õ....Drag Ýíý íîìîíä Mouse (õóëãàíà) -íèé àæèëëàãààã èíãýæ íýðëýæ áîëíî.
6.
5 Õè÷ýýë- 01 1. Èíòåðíýò
ãýæ þó âý? Èíòåðíýòèéã òîäîðõîéëíî ãýäýã ìàø òºâºãòýé. Èíòåðíýò íü àñàð èõ ìýäýýëýë àãóóëàõààñ ãàäíà òàíä òóëãàðñàí àñóóäëûã õàìãèéí áàãà çàðäëààð õóðäàí øóóðõàé øèéäâýðëýæ ºãäºãò ãîë àãóóëãà íü îðøèæ áàéãàà þì. ¯íýíäýý èíòåðíýò ãýäýã íü äýëõèéí èõýíõ óëñ îðíûã õîëáîñîí îëîí ñàÿ êîìïüþòåðèéí ñ¿ëæýý áà ýíä áàéãàà àñàð èõ ìýäýýëëèéí ñàíã òîäîðõîéëñîí íýð þì. Òýãýõäýý äýëõèé äàõèíûã õàìàðñàí îëîí êîìïüþòåðèéí ñ¿ëæýý ãýäýã íü ÷óõàë áèø. Õàðèí áèäýíä àøèãëàæ áîëîõ øèíý îð÷èí ãýäýã íü ÷óõàë þì. Õýäèé òèéì áîëîâ÷ èíòåðíýò íü îëîí íèéòèéí õýðýãëýãäýõ¿¿í ó÷ðààñ ø¿¿ìæëýëòýé õàíäàõ òàë áàéæ áîëíî. Èíòåðíýò íü: - á¿õ äýëõèéí ñ¿ëæýýí¿¿äèéí ñ¿ëæýý - õàìòûí õàðèëöàà õîëáîî - ìýäýýëýë äàìæóóëàõ çàì áà àñàð èõ áàÿëàã, íººö áîëîìæóóä - êîìïüþòåðóóäûí õîëáîëò þì. 2. Âýá õóóäàñ ãýæ þó âý? Èíòåðíýòýä îðîîä äýëõèé äàõèíû âýá õóóäàñààñ ìàø èõ ìýäýýëýëèéã àâàõ áîëîìæòîé. ̺í òà ººðºº âýá õóóäàñ õèéãýýä ººðèéí êîìïüþòåðîîñ äýëõèé äàõèíä ìýäýýëýëèéã ÿâóóëàæ ÷àäíà. Èíòåðíýò ãýæ þó âý?
7.
6 2. Internet Explore
¿íäñýí êîìàíäóóäûí òîâ÷ëóóðóóä Internet Explore ...Âýá õóóäàñûã ¿ç¿¿ëýõ ïðîãðàìì õàíãàìæ Internet Explore ¿íäñýí êîìàíäóóäûí òîâ÷ëóóðóóä Õè÷ýýë- 02 1. Internet Explore ïðîãðàììûã àæèëëóóëàõ kimi-Lessons /web design / WD-Lesson02-Internet index.html-ã íýýãýýä ¿ç. Ýõëýýä File>Open... Áóöàõ ªìíºõ Çîãñîîõ Ýðãýæ à÷ààëàõ Ãýð Õàéõ -ã ãàð÷ èðýõ õýñãèéã äàð !
8.
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> Ýíý çàâñàðò íü õóóäàñ äýýð õàðàãäàõã¿é õýðýãòýé ìýäýýëýëèéã áè÷íý.
9.
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 äýýð ¿ç. Âýá õóóäàñûí ãàð÷èã ýíä ãàðíà.
10.
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 äýýð íýýãýýä ¿ç .
11.
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. Õ¿ñíýãò õèéõ. <metahttp-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=" "> Í¿äíèé ôîíû ºíãº
12.
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 õèéñýí áîë òîãòîîñîí ôàéëä øè ëæ¿¿ëíý.
13.
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 -ä áóöàõ.
14.
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 ñîíãî.
15.
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
16.
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 ïðîãðàìì äýýðõ àæèë ýõýëíý. Øèíýýð âýá õóóäàñ õèéõäýý øèíý õàâòàñ íýýãýýä óã ñàéòûí á¿õ ôàéëûã äîòîð íü õàäãàëíà. Âýá ñàéòûí åðºíõèé á¿òöèéã äîîðõ çóðàãò õàðóóëëàà.
17.
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. Âýá ñàéòûã øèíý÷ëýõ Öàã õóãàöàà ºíãºðººõºä ìýäýý õóó÷èí áîëæ ìýäýýëëèéã øèíý÷ëýõ øààðäëàãà ãàðäàã. Òýãýýä øèíý÷ëýñýí âýáèéã äàõèí èíòåðíýòýä ñóóëãàíà.
18.
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 õèéíý.
19.
18 3. Local Site
(îðîí íóòãèéí ñàéò)-èéã òîäîðõîéëîõ Site>New Site... Site name áè÷ýýä Local Root Folder -ãààñ ñàÿ õèéñýí ººðèéí õàâòàñûã ñîíãî. Èíãýýä ººðèéí êîìïüþòåðûí äýýð Local Site-ä òîäîðõîéëñîí õàâòàñíû äîòîðõè íü ãàð÷ èðíý. ¯¿íýýñ õîéø õèéõ HTML ôàéë áà çóðãèéí ôàéëûã á¿ãä ýíý õàâòàñíû äîòîð õàäãàë. Site öîíõûã õààíà. Windows Explore-èéã õààõ. 2. Dreamweaver-èéã àæèëëóóëíà. ººðèéí õàâòàñíû íýð OK-ã äàð. OK-ã äàð.
20.
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 ñîíãî.
21.
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
22.
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 ñîíãî.
23.
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-èéã àæèëëóóëíà.
24.
23 4.Page Property-èéã òîõèðóóëàõ Modify>Page
Properties... Title áè÷ýýä Background ºí㺠ñîíãî. Ìîíãîëîîð áè÷èõ áîë: Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî. Òýãýýä ÎÊ-ã äàðíà. 5.Õóóäñûí äýýð òåêñò áè÷íý. Áè÷ñýí òåêñòèéã èäýâõæ¿¿ëýõ Size-ãààñ 6 ñîíãîíî. äàðààä ãîëëóóëíà. áàñ -èéã ñîíãîíî. Òýãýýä Shift +Enter äàðààä äàðààãèéí ìºðä îðîîä òåêñò áè÷íý. Õýðâýý ç¿ãýýð Enteräàðñàí áîë ìºðèéí õîîðîíä çàéòàé áîëíî. 6.Òåêñòèéí ºí㺠ººð÷ëºõ. Áè÷ñýí òåêñòèéã èäýâõæ¿¿ëýýä
25.
24 Òåêñòèéí ºí㺠ñîíãîõ. Äàðààãèéí
òåêñò áàñ áè÷ýýä èíãýýä òåêñòèéã èäýâõæ¿¿ëýõ -èéã õî¸ð óäàà äàðààä Ïàðàãðàôèéã óðäààñ çàé àâàõ. Äàðààãèéí ìºðä îðîîä èíãýæ áè÷èõ. èíãýýä òåêñòèéã èäýâõæ¿¿ëýõ -èéã äàðæ äóãààðëàõ. -èéã çóðãààí óäàà äàðñàí áîë èíãýæ áîëíî. Äàðààãèéí ìºðä îðîîä -èéã äàðààä çóðààñ çóðàõ.
26.
25 Òýãýýä ñ¿¿ëèéí òåêñòèéã
áè÷èõ. 7. Õóóäàñûã õàäãàëàõ. File>Save 8.Internet Explore äýýð øàëãàæ ¿çýõ . F12 òîâ÷ëóóð äàðààä Internet Explore äýýð ñàÿ õèéñýí õóóäàñûã øàëãàæ ¿ç.
27.
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 áîëãî.
28.
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](çºâõºí ñîíãîñîí õýñãýý) ñîíãî.
29.
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]-ã ñîíãîñîí áîë äýâñãýð òóíãàëàã áîëãîíî.
30.
29 GIF ºíãºíèé òîî
áàãà áîë ôàéëûí õýìæýý àðàé æèæèã áîëíî. Íýã ÷óõàë þì áàéãàà. Õýðâýý òà âýá õóóäàñ äýýð èéì óëààí äýâñãýðèéí ºí㺠(ºíãºíèé äóãààð : #FF0000) ºãºõ áîë, GIF-ýýð õàäãàëàõ ¿åä Matt: -ààñ Other... ñîíãî. Ãàð÷ èðñýí Color Picker öîíõîíû äýýð [Only Web Colors] ñîíãî âýá õóóäàñíû äýâñãýðèéí ºíãºòýé àäèëõàí ºíãèéã( àäèëõàí ºíãºíèé äóãààð ) ñîíãî. Òýãýýä OK-ã äàðíà. Òýãñýí áîë âýá õóóäàñ äýýð èíãýæ õàðàãäàõ. Matt: -ààñ àäèëõàí ºí㺠ñîíãîîã¿é áîë èéì àðçãàðòàé áîëãîõ.
31.
30 Õè÷ýýë- 11 Çóðàã òàé
âýá õóóäàñ Èéì çóðàãòàé âýá õóóäàñûã õèéæ ¿çíý ¿¿ ?
32.
31 1. Ýõëýýä äîîðõ
Internet Explore-èéí çóðãèéã õèéæ ¿çýõ. 1) Internet Explore-èéã àæèëëóóëàõ. Öîíõûã òîõèðîìæòîé æýìæýýä íýýãýýä ãàðààñ PrtSc òîâ÷èéã äàðàõ. 2) Photoshop-èéã àæèëëóóëíà. File>New... 3) Edit>Paste (Ctr+V) 4) -ãààð õýðýãòýé õýñãèéã òàéðíà. 5) -ãààð õýðýãã¿é õýñãèéã òýìäýãëýýä Delete õèéíý.
33.
32 6) Layer>Flatten Image 7)
Image>Canvas Size...îðîîä äîîðõî õóóäàñíû õýìæýýã óðò õèéíý. 9) -ãààð äîîðõ òýìäýãëýýä -èéã ñîíãîîä Ctr+Alt+Shift äàðààä äîîøîî Drag õèéíý. 10) File>Save As... IE-image ãýæ íýð ºãººä JPEG-ãààð õàäãàëíà.
34.
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 Øèíý õàâòàñûã íýýíý. ªºðèéí íýð ºãíº.
35.
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... ñàÿ õàäãàëñàí ãóðâàí ôàéëûã íýýíý.
36.
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 -ã ñîíãîîä õàäãàëíà.
37.
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) ñîíãî.
38.
37 15.Õóóäñàí äýýð òåêñò
áè÷ýõ. Size 4, Bold, äàðààä ãîëëóóëíà. 16.Çóðãèéã îðîîëæ èðíý. Enter äàðààä äàðààãèéí ìºðä îðîîä äàðíà. Ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñîíãî. Äàðààãèéí ìºðä îðîîä äàðíà. Äàðààãèéí ìºðä îðîîä äàðíà. 17.Òåêñò áàñ çóðààñ çóðàõ. 18.File>Save 19.F12 òîâ÷ëóóð äàðààä Internet Explore äýýð õóóäàñûã øàëãàæ ¿ç.
39.
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 áàéãóóëñàí. Äàðààãûí òåêñò áàñ àäèëõàí.
40.
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 òîâ÷ëóóð äàðíà.
41.
40 Õè÷ýýë- 13 Õ¿ñíýãòòàé âýá
õóóäàñ
42.
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 áè÷ýýä LocalRootFolder-îîñººðèéí õàâòàññîíãîíî. 3.Âýá õóóäàñûã õàäãàëíà. File>Save As... about-Page.html ººðèéí Folder äîòîð õàäãàëíà. 4.Page Property-èéã òîõèðóóëàõ Modify>Page Properties... Title áè÷ýýä Ìîíãîëîîð áè÷èõààð Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî. 5.Ãàð÷èã áè÷èõ. -ã äàðíà. Òýãýýä ñàÿ õèéñýí ººðèéí õàâòàñ îðîîä Paste õèéíý.
43.
42 6.Äàðààãèéí õ¿ñíýãò õèéõ. -ã
Click õèéãýýä õ¿ñíýãò õèéíý. Í¿äíèé ºí㺠ñîíãîõ. , -ã ñîíãîîä òåêñòèéí õýìæýý: 6 ñîíãîíî. Òåêñòèéí ºí㺠: öàãààí Enter äàðààä äàðààãèéí ìºðä îðîîä -ã Click õèéíý. Äîîðõè òåêñòèéã áè÷íý. Äàðààãèéí í¿äýíä îðîîä -ã äàðààä çóðãèéã îðóóëæ èðýõ. Òåêñòèéí í¿äèéã æààõàí òîìðóóëàõ.
44.
43 7.Äàðààãèéí õ¿ñíýãò õèéõ. Õ¿ñíýãòèéã
ñîíãîîä Cell Space: 0 Border : 1 Õ¿ðýýíèé ºíãèéã õàðààð ñîíãîíî. Enter äàðààä äàðààãèéí ìºðºíä îðîîä -ã Click õèéíý. Õî¸ð í¿ä ñîíãîîä -ã äàðààä íýãòãýíý. Äîîðõè òåêñòèéã áè÷ýýä í¿äíèé ºíãèéã ñîíãîíî.
45.
44 Òàâàí í¿ä ñîíãîîä
-ã äàðààä íýãòãýíý. Á¿ãä òåêñò áè÷íý. Ñ¿¿ëä -ã äàðààä çóðãèéã îðîîëæ èðíý. 8.Internet Explore äýýð õóóäàñûã øàëãàæ ¿çýõ. F12 òîâ÷ëóóð äàðíà.
46.
45 Õè÷ýýë- 14 Hotspot, Anchor
47.
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 õéèíý.
48.
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 -ã ñîíãîíî.
49.
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) ñîíãîíî.
50.
49 7.Çóðãèéã îðóóëæ èðíý. äàðààä
ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñîíãîíî. Enter äàðààä äàðààãèéí ìºðä îðîîä äàðíà. Ãàð÷ èðñýí öîíõîîñ ñàÿ õàäãàëñàí çóðãèéã ñ îíãîíî. Enter äàðààä äàðààãèéí ìºðä îðîîä Òåêñòèéã áè÷íý. Äàðààãèéí ìºðä îðîîä -ã äàðààä çóðààñ çóðíà. Äàðààãèéí ìºðä îðîîä -ã äàðààä õ¿ñíýãò õèéíý.
51.
50 Õ¿ñíýãòèéí õýìæýýã ººð÷èëíº. Í¿äíèé
ºí㺠ñîíãîíî. Òýãýýä òåêñò áè÷ýýä -ã äàðààä çóðààñ çóðààä -ã äàðààä çóðãèéã îðóóëæ èðíý. TOP ãýæ òåêñò áè÷íý. -ã äýýð òàâèàä Object Panel-ààñ Invisibles ñîíãîíî. (Anchor)-ã äàðààä fubus ãýæ íýð ºãíº. 8. (Anchor)-ã òàâèíà.
52.
51 TOP òåêñòèéã èäýâæë¿¿ëýýä 9.
Hotspot õèéíý. Ãàçðûí çóðãèéã ñîíãîíî. -ã ñîíãîîä Link áàéãóóëìààð õýñýã(Hotspot)-ã òýìäýãëýíý. Òýãýýä Link äîòîð #fubus ãýæ áè÷íý. -ã äîîð òàâèàä (Anchor)-ã äàðààä top ãýæ íýð ºãíº. Link äîòîð #top ãýæ áè÷íý. Òýãýýä (Anchor), õ¿ñíýãò, TOP òåêñòèéã ñîíãîîä Copy (Ctrl-C) õèéíý.
53.
52 Õ¿ñíýãòèéí òåêñò, ºíãº,
çóðãèéã ººð÷è뺺ä (Anchor)-ã ñîíãîîä otgon ãýæ íýð ºãíf. Òýãýýä ãàçðûí çóðãèéí äýýð -ã ñîíãîîä Link áàéãóóëìààð õýñýã (Hotspot)-ã òýìäýãëýíý. Link äîòîð #otgon ãýæ áè÷íý. Èíãýæ ¿ãäèéã anchor áàñ Hotspot òàâèíà. 10.Internet Explore äýýð õóóäñûã øàëãàæ ¿çíý. F12 òîâ÷ëóóð äàðíà.
54.
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
55.
54 Òåêñò áè÷íý. Òåêñò áàñ
òîâ÷èéã ñîíãîîä File>Export... Íýð ºãººä EPS-ãààð õàäãàëíà. Äîîðõè øèã ñîíãîîä OK-ã äàðíà. Photoshop-èéã àæèëëóóëíà. File>Open... ñàÿ õàäãàëñàí ôàéëûã íýýíý. kimi005
56.
55 Äîîðõè øèã ñîíãîîä
OK-ã äàðíà. ªí㺠çàñíà. Image>Hue/Saturation... Layer-èéí Ýôôåêòèéã ºãíº. Layer>Effects>Bevel and Emboss File>Save for Web... GIF 32 Ditherd -ã ñîíãîíî. Matte-íààñ Other... ñîíãîîä äýâñãýðèéí ºí㺠ñîíãîíî.
57.
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 öîíõûã õààíà.
58.
57 6.Page Property-èéã òîõèðóóëàõ Modify>Page
Properties... Title áè÷ýýä Ñàÿ öýýæèëñýí äýâñãýðèéí ºí㺠ñîíãîíî. Ìîíãîëîîð áè÷èõ áîë: Document Encoding-ààñ Cylilic(windows-1251) ñîíãîíî. -ã äàðààä ãîëîîð çýðýãö¿¿ëíý. -ã äàðààä õ¿ñíýãò õèéíý. -ã äàðààä õ¿ñíýãòèéí í¿äýí äîòîð çóðãèéã îðóóëæ èðíý. 7.Õ¿ñíýãò õèéíý. 8.Çóðãèéã îðóóëæ èðíý.
59.
58 9.Òåêñò áè÷íý. Äàðààãèéí í¿äýíä
îðîîä Vert-ààñ TOP ñîíãîîä äýýð íü òåêñò áè÷íý. -ã äàðààä çàé àâíà. Äàðààãèéí ìºðºíä îðîîä -ã äàðààä õ¿ñíýãò õèéíý. 10.Òîâ÷èéã îðóóëæ èðíý. -ã äàðààä ãàð÷ èðñýí öîíõíîîñ çóðãèéã ñîíãîíî.
60.
59 Original Image-ààñ -ã
äàðààä about.gif ñîíãîíî. Èíãýæ ººð òîâ÷ áàñ -ã äàðààä ãàð÷ èðñýí öîíõíîîñ çóðãèéã ñîíãîíî. Rollover Image-ààñ -ã äàðààä about2.gif ñîíãîíî. When Click...-ààñ -ã äàðààä mongol-thuhai.htm ñîíãîíî. çóðààñ çóðààä çîõèîã÷èéí ýðõèéí òóõàé áè÷íý.
61.
60 10.Internet Explore äýýð
õóóäñûã øàëãàæ ¿çíý. F12 òîâ÷ëóóð äàðíà.
62.
61 Õè÷ýýë- 16 Frame-òýé âýá
õóóäàñ
63.
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 õèéíý.
64.
63 Frameset ãýäýã top-frame main-frame side -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 ñîíãîíî. -ã äàðààä õ¿ñíýãò õèéíý.
65.
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 ºãíº. Í¿äíèé ºí㺠ñîíãîíî.
66.
65 File>Open in frame... mongol-tuhai.html
ñîíãîíî. Òýãýýä File>Save frameset Modify>Page Properties... Äýýä áà ç¿¿í òàëûí çàéä 0 ºãíº. Í¿äíèé äîòîð òåêñò áè÷íý. Òýãýýä File>Save Frame ñîíãîíî. 8. Main-Frame äîòîð õóóäñûã îðóóëæ èðíý. Main-Frame -ã ñîíãîíî. Ãàäíà òàëûí õ¿ðýý äàðààä Frameset-ã ñîíãîíî.
67.
66 Ñ¿¿ëä á¿õ Frame-ã
õàäãàëíà. File>Save All Frame 9. Link (õîëáîëò) õèéíý. Link (õîëáîëò) õèéõ òåêñòèéã èäýâõæ¿¿ëíý. Link -ààñ -ã äàðààä õîëáîëò õèéõ õóóäñûã ñîíãîíî. Òýãýýä Target -ààñ mainFrame ñîíãîíî. Èíãýæ á¿ãäèéã Link õèéíý. Link òàâüñàí òåêñòèéí ºí㺠õàðàõ õýö¿¿ áîë Modify>Page Properties... îðîîä Links-ààñ ºí㺠ñîíãîíî. 10.Internet Explore äýýð õóóäñûã øàëãàæ ¿çíý. F12 òîâ÷ëóóð äàðíà.
68.
67 Õè÷ýýë- 17 Animation GIF
(Õºäºë㺺íòýé çóðàã)
69.
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 äàðààä æààõàí ýðã¿¿ëíý.
70.
69 -ãààð ãàð áàñ
òýìäýãëýýä Ctrl-T äàðààä æààõàí ýðã¿¿ëíý. Animation Öîíõäýýð 1-ð õ¿ðýýã ñîíãîîä Layer öîíõ äýýð Layer 1 copy -ã íóóíà. Animation Öîíõ äýýð -ã äàðààä øèíý õ¿ðýý õèéíý. Òýãýýä Layer öîíõ äýýð Layer 1 copy -ã ¿ç¿¿ëýýä Layer 1 -ã íóóíà. -ã äàðààä Play õèéíý.
71.
70 Õóðäàí õºäºëæ áàéâàë
õ¿ëýýõ ñåêóíä ñîíãîíî. Äàâòàëòààñ Forever -ã ñîíãîíî. Optimize öîíõ-ààñ GIF 32 Ditherdñîíãîîä Matte-ààñ None ñîíãîíî. File>Save Optimized as... GIF -ãàà𠺺ðèéí õàâòàñ äîòîð õàäãàëíà. 4. Õºäëºõ ãàð÷èãèéí çóðãèéã õèéíý. File>New...
72.
71 -ãààðäóðòàéºíãºáàñ çîõèîìæòîéõýìæýýã ñîíãîîä íýã
¿ñýã çóðíà. Layer öîíõíîîñ -ã äàðààä øèíý Layer-ã íýìíý. Layer 2 äýýð íýã ¿ñýã çóðíà. Äàõèàä -ã äàðààä øèíý Layer-ã íýìíý. Layer 3 äýýð íýã ¿ñýã çóðíà. Èíãýýä òóñ òóñ øèíý Layer äýýð íýã ¿ñýã çóðíà.
73.
72 Äàõèàä -ã äàðààä
øèíý Layer-ã íýìýýä MONGOL ãýæ çóðíà. Layer>Duplicate Layer Layer 8 copy õèéíý. Image>Adjust>Hue/saturation îðîîä ªí㺠ººð÷èëíº . Animation Öîíõ äýýð 1-ð õ¿ðýýã ñîíãîîä Layer öîíõ äýýð çºâõºí Layer 1 -ã õàðóóëíà.
74.
73 Animation Öîíõ äýýð
-ã äàðààä øèíý õàëüñ õèéíý. Òýãýýä Layer öîíõ äýýð Layer 2-ã áàñ õàðóóëíà. Animation Öîíõ äýýð -ã äàðààä øèíý õàëüñ õèéíý. Òýãýýä Layer öîíõ äýýð Layer 3 -ã áàñ õàðóóëíà. Èíãýæ Animation Öîíõ äýýð7-ð õàëüñ õ¿ðòýë õèéíý.
75.
74 8-ð õàëüñàí äýýð
çºâõºí Layer 8 -ã õàðóóëíà. 9-ð õàëüñàí äýýð çºâõºí Layer 8 copy -ã õàðóóëíà. 10-ð õàëüñàí äýýð çºâõºí Layer 8 -ã õàðóóëíà. 11-ð õàëüñàí äýýð çºâõºí Layer 8 copy -ã õàðóóëíà. -ã äàðààä Play õèéíý.
76.
75 7-ð õàëüñàí äýýð
æààõàí õ¿ëýýõ íü äýýð. 0.5 õ¿ëýýõ ñåêóíä ñîíãîíî. Optimize öîíõ-îîñ GIF 32 Ditherdñîíãîîä Matte-ààñ None ñîíãîíî. File>Save Optimized as... GIF -ãàà𠺺ðèéí õàâòàñ äîòîð õàäãàëíà. 5. Dreamweaver-èéã àæèëëóóëíà. Site>New Site... -ã äàðààä ººðèéí õàâòàñ ñîíãîíî. File>Save as... ªºðèéí õàâòàñ äîòîð õàäãàëíà.
77.
76 Page Property-èéã òîõèðóóëàõ Modify>Page
Properties... Title áè÷ýýä äîîðõè øèã ñîíãîíî. -ã äàðààä çóðãèéã îðóóëæ èðíý. 6.Internet Explore äýýð õóóäñûã øàëãàæ ¿çíý. F12 òîâ÷ëóóð äàðíà.
78.
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:kimi Password:******** Æèøýý 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-ã äàðíà.
79.
78 4. Í¿¿ð õóóäàñûí
íý𠺺ð÷èëíº. Âýá ñàéòûí í¿¿ð õóóäàñíû íýð index.htm ýñâýë index.html ãýæ áàéõ ¸ñòîé. 5. -ã äàðààä ãýðýý õèéñýí âýá ñàéòòàé õîëáîëò õèéíý. Îäîî ãýðýý õèéñýí âýá ñàéòûã õàéæ áàéíà. 6. Ñóóëãàõ ôàéëûã á¿ãäèéã íü ñîíãîîä -ã äàðíà. 7. Á¿õ ôàéëûã ñóóëãàñàí áîë -ã äàðààä õîëáîëò óíòðààíà. 8.Internet Explore äýýð âýá ñàéòûã øàëãàæ ¿çíý. URL-ã áè÷íý.
80.
79 Êîìïüþòåðèéí ãðàôèê äèçàéí ªºðºº
ñóðàõ áè÷èã 4 - Web Design Çîõèîã÷ : Õàÿøè Êèìèõèêî Òóñëàñàí õ¿ì¿¿ñ : Á.Ãàíòóëãà, Á.Áàòçîðèã, Ý.Ñàíñàðòóÿà, Ã.Àççàÿà, Ý.Áîëîðòóÿà, À.Îþóíãýðýë, Ã.×èíçîðèã, Á.Ýíõíàéðàìäàë Ñ.×óëóóí-Ýðäýíý, Á.Öýíäñ¿ðýí,×.Îþóíöýöýã Ñî¸ëûí Êîëëåæ Óëààíáààòàð 2002 Óã íîìûã á¿õýëä íü áîëîí õýñýã÷ëýí çºâøººðºëã¿éãýýð õóâèëàí îëøðóóëæ, õóäàëäààëàõûã õîðèãëîíî.