Your SlideShare is downloading. ×
Webles10
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webles10

3,628
views

Published on


2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,628
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
267
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Вэб хуудас үүсгэх нь
  • 2. Хичээлийн төлөвлөгөө
    • Вэб гэж юу вэ?
    • Вэб хийх дараалал
    • Вэбээ интернетэд байрлуулах
  • 3. Вэб хуудас гэж юу вэ?
    • Интернетэд байрлаж байгаа өөр хоорондоо hyperlink холбоосоор холбогдсон зураг, медиа, аудио зэргийг агуулсан хоёр болон түүнээс дээш ихэвчлэн html форматтай баримт
    • HTML – HyperText Makeup Language – вэб хийдэг тусгай хэл. Үүнийг ашигласнаар хуудсаа ямар харагдах /ямар хэлбэр, хэмжээ, фондтой хийх вэ зэрэг/ -ийг тодорхойлж өгөх боломжтой.
    • Tag - <> -хашилтанд бичигдсэн HTML хэлний командууд
  • 4. Вэб хийх дараалал
    • Эхлээд ямар вэб хийх гэж буйгаа төлөвлөөд дараа нь түүндээ бэлтгэнэ. ( Энэ дагуу Локал сайт үүсгэх ба Ө өрийн сайтанд хэрэглэгдэх зүйлсийг нэмэх гэсэн хоёр хичээл үзнэ.).
    • Хуудсуудаа үүсгэх ( Ши нэ хуудас үүсгэх ба хадгалах ).
    • Хуудсуудынхаа тохиргоог хийх ( харагдах байдлыг тохируулах ба Х уудсын гарчгийг өгөх ).
    • Хуудасныхаа агуулгыг оруулах ( Х элбэржүүлсэн текст нэмэх ба Зураг нэмэх ).
    • Хуудсуудаа холбох ( Хуудсуудын хооронд текстэн холбоос үүсгэх ба Х өдөлгөөнт зурган холбоос үүсгэх ).
    • Сайтаа шалгах ( И нтернет браузер дээр харах ба И нтернетэд байрлуулах ).
  • 5. Macromedia Dreamweaver MX програмыг ажиллуулах
    • Start > Programs > Macromedia >Macromedia Dreamweaver MX сонго.
  • 6. Хэрэглэгдэх зүйлс
    • Текст –
    • Хүснэгт – Insert > Table
    • Зураг – Insert > Image
    • Холбоос – Insert > Hyperlink
  • 7. Хичээл1: Локал сайт үүсгэх
    • Ихэвчлэн, вэбсайт үүсгэхийн тулд түүнийг төлөвлөх хэрэгтэй болдог.
        • Хичнээн хуудас үүсгэх хэрэгтэй,
        • хуудас бүрт ямар мэдээлэл байх ёстой, мөн
        • хуудсууд нь бие биетэйгээ хэрхэн холбогдох ёстой гэх мэт. Энэ хичээлээр үүсгэх сайт маань маш хялбар учраас төлөвлөхөд их цаг зарцуулахгүй. Энэ нь зөвхөн хоорондоо холбоотой хоёр хуудсаас тогтох болно. Иймд төлөвлөх гэсэн хэсгийг алгасаад сайт тодорхойлох ажилдаа оръё.
  • 8. Сайт тодорхойлох
    • Site > New Site командыг сонго. (Энэ нь New Site командыг Site цэснээс сонго гэсэн үг.)
    • Site Definition харилцах цонх гарч ирэх болно.
    • Хэрэв харилцах цонхны Advanced хавтас идэвхитэй байвал Basic хавтсанд нь дар.
    • Site Definition Wizard –гарч ирэх ба энд өөрийн сайтандаа ямар нэр өгөх вэ гэдгийг асууна.
  • 9. 1-р алхам
    • Текст бичих хайрцган дотор Dreamweaver дээр хийж байгаа сайтынхаа нэрийг өгнө. Жишээлбэл. Global Car Rental гэж өгье.
    • Next товчинд дарж дараагийн алхамд орно.
  • 10. 2-р алхам
    • Э нд ямар сервер технологи ашиглахыг асууна. Бидний хийх сайт динамик биш статик учраас NO гэсэн хариуг сонгоно .
    • Next дарж дараагийн алхамд очно.
  • 11. 3-р алхам
    • Энэ алхамд өөрийн файлуудтайгаа хэрхэн ажиллах талаар асуух болно.
    • “ Edit local copies on my machine, then upload to server when ready (recommended).” Гэсэн тохиргоог сонго. Энэ тохиргоо нь өөрийн машин дээрээ локал хуулбарыг үүсгэж засварлаад бэлэн болсны дараа нь серверлүү хуулна гэсэн тохиргоо юм.
    • Доод хэсэгт нь
    • вэбээ байрлуулах
    • хавтасаа тодор-
    • хойлж өгнө
  • 12. Сүүлийн алхамууд
    • Энэ алхамд сервертэйгээ хэрхэн холбогдох талаар асуух болно.
    • Нээгдэх жагсаалтнаас None гэдгийг сонгоод Next дарж дараагийн алхамд оч.
    • Дараагийн алхамд нь сая оруулсан бүх тохиргоог харуулах болно.
    • Done дарж дуусгана.
    • OK дар снаар Dreamweaver сайт анд зориулсан орон зайг үүсгэх болно.
  • 13. Site панел
    • Site панел сайтын хавтсыг
    • харуулах ба түүн доторх
    • бүх файлыг мод байдлаар
    • харуулах боломжтой.
    • Одоогийн байдлаар бидний сайтад ямар ч файл хавтас байхгүй тул хоосон байх болно. Сайтанд файл байх үед түүнтэй windows explorer -тэй ажиллаж байгаа мэт ажиллаж болдог. Жишээлбэл, хуулах, устгах, зөөх, нээх гэх мэт.
  • 14. Хичээл2: Өөрийн сайтанд хэрэглэгдэх зүйлсийг нэмэх
    • Локал сайтаа үүсгэсний дараагаар хэрэв өмнө нь сайтанд орох бүх зураг агуулга зэргээ бэлдчихсэн байсан бол түүнийгээ сайтынхаа хавтасруу нэмж болдог. Хуудсанд ашиглагдах агуулгуудаа нэмж оруулж өгсний дараагаар түүнийгээ ашиглахад бэлэн болно.
    • Хичээлийн явцад үүсгэж байгаа Global Car Rental сайтандаа Site панелийг ашиглан зураг хуулж оруулъя.
    • Хэрэглэгдэх зүйлс маань Design нэртэй хавтсанд бий. Энэ хавтсыг хуулж өөрийн сайтны хавтсанд оруулна.
  • 15. Зургийн хавтсыг өөрийн локал сайтын хавтасруу хуулах:
    • My computer > local Disk C: > Program Files > Macromedia > Dreamweaver MX нээ.
    • Samples хавтасны өмнө х + тэмдгэнд дар.
    • GettingStarted хавтасны өмнөх + тэмдгэнд дар.
    • Design хавтс ыг хуулж аваад өөрийн үүсгэсэн вэбийн хавтасруугаа оруул.
  • 16. Хичээл3 : Шинэ хуудас үүсгэх ба хадгалах *Баримт Хаах
    • Сайтныхаа бүх тохиргоог хийсэн тул одоо вэб хуудсуудаа үүсгэх хэрэгтэй.
    • Dreamweaver програмыг нээх үед хоосон HTML хуудас автоматаар нээгддэг. Түүнийг File > Close командыг сонгож хаана.
  • 17. Шинэ хуудас үүсгэх:
    • File > New . Командыг сонго. New Document харилцах цонх гарч ирнэ..
    • Зүүн талын жагсаалтаас Page Designs –гэснийг сонго.
    • Дунд талын багананд Page Design -тай холбоотой өмнө нь загварыг нь тодорхойлчихсон хуудсын загварууд гарч ирнэ.
    • Page Designs жагсаалтыг доошлуулж Text: Article D with Navigation нэртэйг сонго. Сонгосон хуудасны дизайн нь баруун талд жижиг хэлбэрээр харагдана. Харилцах цонхны баруун доод буланд байх document сонгогдсон эсэхийг шалга.
    • Create дар.
  • 18.  
  • 19. Шинэ хуудсаа хадгалах
    • File > Save сонго.
    • Save As харилцах цонхонд Design хавтсыг нээ.
    • index.htm нэр өг.
    • Save товч дар.
    • Файлын нэр document цонхны гарчгийн хэсэгт “Untitled Document” гэсний ард харагдах болно.
  • 20. Хичээл4 : Х арагдах байдлыг тохируулах
    • 4.1. Хэрэгцээгүй элементүүдийг арилгах
    • Global Car Rental хуудсыг үүсгэхийн тулд дараах зүйлс хэрэгцээгүй болно .
        • Хуудсын дээд талын хоёр холбоос
        • Гол баганын гарчиг болон толгойн хэсэг
        • Хажуугийн баганын гарчгийн өмнөх жижиг хайрцаг
        • Хуудсын доод талын мөр
        • Элемент устгах гол арга бол сонгоод Backspace товч дарах юм. Ингээд устгасныхаа дараа баримтаа хадгалаарай.
  • 21. Т екстэн баганын гарчиг устгахдаа:
    • Title гэсэн нэрэн дээр нь дар. Tag сонгогч дээр очоод зүүн захын
    • <table> tag-ийг сонго.
    • Backspace товчийг дарж устга.
  • 22. Хажуу талын хайрцгийг устгахдаа:
    • Баруун баганаас News гэсэн үгий н урд талын анхаарлын тэмдгийг сонго.
    • tag сонгогчоос баруун захын <td> tag –ийг сонго.
    • Backspace дарж устга.
  • 23. Доод мөр устгах:
    • Хуудсаа доошлуулж доод мөрийн аль нэг хэсэгт дар.
    • tag сонгогчоос зүүн захын <table> tag-ийг сонгоод устга.
    • Харагдах байдал:
  • 24. Хичээл4.2. Зургийн зай бэлдэх
    • Зургаа сүүлд нь оруулах бол тухайн зургийн зайг урьдчилан оруулж болдог.
  • 25. Зургийн зай нэмэхдээ:
    • Гол баганын дээд хэсэгт очоод Enter дар. Дараа нь хоосон мөрөнд дар.
    • Insert > Image Placeholder командыг сонго..
    • Image Placeholder харилцах цонхонд зурагны байрын нэрийг болон өргөн өндрийн хэмжээг өг. Жишээлбэл, SplashImage, 523 өргөн, 220 өндөр
    • OK дар.
    • Тодорхойлж өгсөн хэмжээс бүхий саарал хайрцаг харагдах болно.
  • 26. Хичээл5 : Хуудсын гарчиг өгөх
    • Document хэрэгслийн мөр гарч ирээгүй байвал View > Toolbars > Document сонго.
    • “ Untitled Document,” гэсэн бичиг бүхий талбарт нэр өг. Жишээлбэл, Global Car Rental Home Page . Тэгээд Enter товчийг дар.
    • Өөрийн баримтаа хадгал.
  • 27. Хичээл 6: Хэлбэржүүлсэн текст нэмэх
    • Document цонхонд текст бичих эсвэл өөр баримтнаас хуулж болно.
    • Хуудсандаа текст нэмэхийн тулд:
    • Зүүн баганын дээд талын тод бичсэн текстэн дээр гурав дарж параграфийг сонго.
    • Safety Tips гэж бичиж өг.
    • Тусгаарлагч шугамны доод талын гурван параграфыг сонго.
    • Дараах текстийг бичиж өг. Эсвэл өөрийн хүссэн текстээ бичиж болно.
    • The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch!
  • 28. ``` Үргэлжлэл ```
    • Баруун баганы “News” үгэн дээр хоёр дарж Globe-Trotter Promotions гэж бичиж өг.
    • Site панелд өөрийн Asset хавтаснаас promotions.txt файлыг олж нээ.
    • promotions.txt цонхонд Control+A дарж бүгдийг нь сонгоод Edit > Copy сонгож бүх текстийг хуулахаар авна.
    • index.htm цонхны баруун талын доод нүдэнд бүх текстийг нь сонгож байгаад Edit > Paste дар.Текст хүснэгтэнд орох болно.
    • “ Rent” үгний урд курсороо авч ирээд Insert > Horizontal Rule дарж тусгаарлагч оруулж ирж болно.
    • Баримтаа хадгал
    • promotions.txt файлыг сонгоод File > Close дарж хаа.
  • 29. Хичээл7: Зураг нэмэх
    • З ургийн байрныхаа оронд зураг оруулахын тулд түүн дээр хоёр дар. Жишээ нь: К омпаны логог оруулахын тулд жижигхэн 100х50 гэсэн байранд хоёр дар. Select Image Source харилцах цонх гарч ирнэ.
    • Харилцах цонхны доор байрлах Relative To цэсэнд Document гэж сонгогдсон эсэхийг шалга.
    • Аsset хавтаснаасаа logo.jpg зургийг сонго.
    • OK дарж зураг оруулна.
    • Өөрсдийн оруулсан том зургийн жаазан дээрээ 2 дарж vintage.jpg зургийг сонго.
    • Зургийн байр бэлдээгүй бол Insert > Image командыг сонгон зураг оруулж болно.
    • Баримтаа хадгал.
  • 30. Хичээл8. Хоёр дахь хуудсаа үүсгэх
    • Энэ хичээлээр хоёр дахь хуудсаа үүсгэе. Ингэсний дараагаар Хуудсуудын хооронд холбоос хийх болно.
    • Хоёр дахь хуудсыг үүсгэх хэдэн арга бий. Эхний хуудсыг хуулах, ингэснээр эхний хуудастайгаа адилхан загвартай хуудас бий болох юм.
    • Дараагийн хуудас маань Global Car Rental компаны хэрэглэгчдийн хуудас байх болно.
    • Эхний хуудасны хуулбар үүсгэх:
    • Site панелиасаа анх үүсгэсэн хуудсан дээрээ баруун товчоо дарж гарч ирсэн цэснээс нь Duplicate командыг сонгоно.
    • Файлын хуулбар харагдах болно..
    • Шинэ хуулбарлагдсан файлын нэрэн дээр 2 дарж нэрийг нь соль. Жишээлбэл: customerService.htm гэх мэт.
  • 31. Хоёр дахь хуудасны х эрэгцээгүй зүйлсийг устгах:
    • customerService.htm хуудсаа хоёp дарж нээ.
    • customerService.htm хуудсанд том зургийг сонго.
    • tag сонгогч дотроос <td> tag-ийг сонго.
    • Backspace дар.
    • Хүснэгтийн нүдэнд байсан бүх зүйл устах болно.
    • Баримтаа хадгал.
  • 32. Шинэ хуудсанд бэлэн текст нэмэх:
    • Site панелиас custServInfo.htm файлыг сонгож нээ.
    • custServInfo.htm цонхондоо View > Code командыг сонгож HTML code-ийг харна.
    • custServInfo.htm цонх ны бүх кодыг сонгоод хуулж аваад customerService.htm баримтандаа орж
    • Edit > Paste HTML командыг сонгоно.
    • баримтаа хадгал.
  • 33. Хичээл9 : Хуудас хооронд текст холбоос үүсгэх
    • customer service хуудсаа нээ.
    • том текст баганын зүүн доод талд байгаа “ Home Page” бичгийг сонго.
    • Хэрэв Property цонх нээгдээгүй бол Window > Properties командыг сонгож нээ.
    • Link текст хайрцагны ард байрлах хавтасны зурганд дарж өмнө үүсгэсэн index.htm файлаа зааж өг.
  • 34. Хичээл10 : Хөдөлгөөнт зурган холбоос хийх
    • index.htm хуудсаа нээ.
    • Хөдөлгөөнт зураг оруулах газраа хулганаараа дар. Энэ хуудсанд бол Lorem гэсэн үгийг сонгож Backspace дарж текстийг устгаад хулганы заагчаа тэнд байрлуулна.
    • Insert > Interactive Images > Rollover Image командыг сонгоно.
    • Insert Rollover Image харилцах цонхны Image Name цонхонд нь зургийн нэрийг өгнө. Жишээлбэл: home-image Энэ нь хоёр зурганд нэг нэр өгөх боломжийг олгож байгаа юм.
  • 35. Үргэлжлэл
    • Original Image хэсэгт нь Browse; дарж btnHome.jpg зургийг зааж өгнө.Original Image хэсэгт зааж өгсөн зураг нь браузер дээр эхэлж харагдах зураг юм.
    • Rollover Image хэсэгт нь Browse; дараад btnHome_on.jpg зургийг зааж өгнө.Rollover Image зураг хулгана очих үед гарч ирэх зураг юм.
    • Preload Rollover Image тохиргоо сонгогдсон эсэхийг шалгаарай. Энэ тохиргоо нь хуудсыг браузер дээр нээх үед хэрэглэгч зурганд хулганаар хүрэх үед зураг хурдан солигдох боломжтой болгодог.
    • When Clicked, Go To URL хэсэгт Browse дарж index.htm файлыг зааж өгнө.
    • OK дарж харилцах цонхыг хаана.
    • Баримтаа хадгал.
  • 36. Үргэлжлэл
    • Global Car Rental сайтын хувьд хоёр хөдөлгөөнт зурган холбоос хийнэ .
    • Ашиглагдах зураг болон хуудас:
        • btnCustomerService.jpg
        • btnCustomerService_on.jpg
        • Линк нь: customerService.htm
        • btnLocations.jpg
        • btnLocations_on.jpg
        • locations.htm хуудастай холбож өг нө .
        • Бид locations.htm хуудсыг үүсгээгүй тул When Clicked, Go To URL хэсэгт нь зүгээр л нэрийг нь бичээд өгөөрэй.
  • 37. Хичээл11 : Браузер дээр харах
    • Design view нь таны хуудас браузер дээр ямархуу байх вэ гэдгийг төстэй байдлаар харуулж байдаг. Гэвч зарим нэг зүйлс зөвхөн браузер дээрээ л харагддаг. Браузер дээр харах нь хуудсаа интернетэд байрлуулсны дараагаар хэрхэн харагдахыг мэдэж болох боломжийг олгодог.
    • Дараалал:
    • Хэрэв index.htm файл нээлттэй биш байвал түүнийг нээ.
    • F12 товчийг дар.
    • Браузер ажиллаж нээгдээд индекс хуудсыг харуулах болно.
    • Хулганын заагчаа хөдөлгөөнт зурган дээгүүрээ гүйлгэж зураг солигдох эсэхийг мөн холболт ажиллаж байгаа эсэхийг дарж шалгаж болно.
  • 38. Хичээл12 : Интернетэд байрлуулах
    • Хамгийн анхны вэб сайтаа үүсгэчихсэн тул дараагийн алхам маань хийсэн файлуудаа серверлүү хуулж интернетэд байрлуулах алхам юм. Интернетэд байрлуулахын тулд танд вэб серверийн эрх байх ёстой. Тусгай эрх байхгүй тохиолдолд, мөн вэб хуудас тань бага хэмжээтэй тохиолдолд хэрхэн байрлуулах талаар энд авч үзье.
    • Интернетэд олон төрлийн вэб хуудас байрлуулдаг үнэтэй болон үнэгүй хаягууд байдаг. Эдгээрээс үнэгүй yahoo-гийн geocities хаягийг авч үзье.
    • Internet Explorer нээж хаягийн мөрөнд http://geocities.yahoo.com/ хаягийг бичиж өгнө.
    • Холбогдох хэсэгт өөрийн yahoo-гийн мэйл хаягийг ашиглан холбогдоно.
  • 39. Үргэлжлэл
    • Гарч ирсэн хуудаснаас үнэгүй хаяг авахыг хүсвэл 0$ эсвэл free гэснийх нь Sign Up -ийг нь сонгоно.
    • Дараагийн хуудсанд нь вэбийн сэдвээ сонгоод Continue дарснаар дараах мэдэгдэл гарч ирнэ.
  • 40. Үргэлжлэл
      • File Manager хэсэгт вэбэд хэрэглэгдэж байгаа бүх файл болон фолдер, зураг зэргийг харж хянаж болно.
      • Easy Upload хэсэгт өөрсдийн компьютер дээр үүсгэсэн вэбийн бүх файлуудаа хаягруугаа татаж оруулна.
      • Html Editor хэсэгт вэбдээ нэмэх кодчилол байвал бичиж өгч болно.
      • Site Statistics хэсэгт өөрийн чинь сайтыг хичнээн хүн үзсэнийг харж болно.
    • Easy Upload сонголтыг хийнэ.
    • Энд 5mb-аас ихгүй хэмжээтэй файлуудыг оруулж болно. Жишээлбэл, к1 гэсэн файлыг upload хийхэд бэлэн болсон байна. Ингээд Upload Files товчинд дарна.
    • Хэрэв бүгдийг оруулж дууссан бол Sign out дарж өөрийн мэйл хаягнаас гарна.
    • Харин хийсэн вэбээ харахдаа http://www.geocities.com/чинийID гэсэн хаягаар орж харж болно
  • 41. Анхаарал тавьсанд баярлалаа.

×