Your SlideShare is downloading. ×
Web design  lecture 3
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

Web design lecture 3

3,266

Published on

e-bagsh.mn - "Вэб Дизайн" цахим сургалт

e-bagsh.mn - "Вэб Дизайн" цахим сургалт

Published in: Education
1 Comment
7 Likes
Statistics
Notes
  • hjgfds
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,266
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
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. Вэб дизайн“Сод Хийморь” Дээд Сургууль Зурагтай ажиллахХичээл № 3
  • 2. Агуулга Файлын замтай ажиллах 16-тын өнгөний код Зургийн файлын формат, хэмжээ Хуудсанд зураг оруулж ирэх Зурагтай ажиллах CSS property Дэвсгэр зураг оруулах Танилцуулга сайт хийх хэсэг 2
  • 3. Файлын зам Файлын замыг absolute, relative гэж ангилна. Absolute path – Тухайн файлын байрлах замыг бүтнээр нь бичнэ.  C:/Documents and Settings/admin/Desktop/web design/hicheel2  http://www.google.mn/images/srpr/logo2w.png Relative path – Файлын замыг харьцангуйгаар зааж өгөх  Өмнөх хичээлүүдээр үзсэн favicon, cssфайлыг хуудсанд холбох зэрэгт бид relative path ашигласан.  .. – тухайн байгаа хавтаснаасаа гараад гэсэн утгатай.  / - хавтас гэдгийг илэрхийлнэ.  Жишээ  style1.css  ../css/style.css  ../../images/background.jpg  images/menu/hover.png 3
  • 4. Файлын замтай ажиллах4
  • 5. Файлынзамтайажиллах image1.jpg зургийг about1.html хуудсанд оруулж ирэх  images хавтасруу орно. Зургийн нэр, өргөтгөлийг бичиж өгнө.  images/image1.jpg assign1.html хуудсанд image2.jpg зургийг оруулж ирэх  Өөрийн байрлаж буй files хавтаснаас гарч images хавтасруу орно. Зургийн нэр өргөтгөлийг бичиж өгнө.  ../images/image2.jpg 5
  • 6. 16-тын өнгөний код CSS-д өнгөний утгыг 3 янзаар олгож болох тухай үзсэн.  Нэрээр – CSS-д стандарт 17, нэмэлт 130 өнгийг л нэрээр нь өгөх боломжтой.  Бусад өнгөний утгыг RGB, HEX буюу 16-тын өнгөний кодоор олгодог.  rgb(255.0.0) – Улаан өнгө  #FF0000  16-тын өнгөний код нь вэб хуудсуудад хамгийн өргөн хэрэглэгддэг. 6
  • 7. 16-тын өнгөний код 16-тын өнгөний коднь чагт(#) тэмдэгтээр эхэлдэг. Өнгөний код нь 6 оронтой байна.  Тэмдэгтүүд хоѐр хоѐроороо өнгөний утгыг илэрхийлнэ.  #XXxxxx: Улаан өнгө  #xxXXxx: Ногоон өнгө  #xxxxXX: Цэнхэр өнгө7
  • 8. 16-тын өнгөний код 0-9 хүртэлх 10 цифр, A-F үсэг хүртэлх 6 үсэг, нийт 16 тэмдэгтээр өнгөний кодыг дүрсэлтдэг учир 16-тын өнгөний код гэж нэрлэгддэг.  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 0 – Тухайн өнгөний хэмжээ хамгийн бага буюу байхгүй гэсэн утгыг илэрхийлнэ. F – Тухайн өнгөний хэмжээ хамгийн их байхыг илэрхийлнэ.  #000000 – Хар өнгө  #FFFFFF – Цагаан өнгө  #FF0000 – Улаан өнгө  #FF4000 – Улбар шар өнгө  #00FF00 – Ногоон өнгө Энэ мэтчилэн 16*16*16*16*16*16 буюу 16777216 сая ширхэг 16- тын өнгөний код бий. 8
  • 9. Pixel Pixel – (Picture Elements) Зураг нь олон тооны pixel-үүдийг агуулдаг ба pixel бүр нь байршил болон өнгөний утгуудыг агуулж байдаг. Зургийн өнгөний мэдээллүүдийгагуулсан маш жижиг цэг юм. Зургийн файлын нэг инчд хэдэн Pixel ноогдож байгаагаас зургийн хэмжээ шууд хамааралтай байдаг. Үүнийг resolution буюу зургийн нягтрал гэдэг. 9
  • 10. Зургийн файлын формат PSD PSB BMP GIF EPS JPEG / JPG PCX RAW PNG гэх мэт. 10
  • 11. Зургийн формат - Төрөл Вэб хуудсанд байршуулах зургийн төрлийг зөв сонгох нь чухал бөгөөд одоогоор JPEG, PNG, GIF гэсэн зургийн форматууд өргөн хэрэглэгдэж байна. 11
  • 12. JPEG формат JPEG – Joint Photographic Experts Group Өнгөний ялгарал ихээр шаарддаг зургийг дүрслэхэд голчлон ашиглагддаг.  Фото зураг JPEG формат сая сая өнгийг дэмждэг. Хэт их шахагдсан зургийн чанар алдагддаг буюу жижиг хэсгүүдийг нь томруулж харахад бүрсийж харагддаг. JPEG форматтай зургийн өргөтгөлүүд  .jpg, .jpeg, .jpe, .jif, .jfif, .jfi 12
  • 13. GIF GIF – Graphics Interchange Formats Зургийг шахахдаа ямар нэг хасалт хийдэггүй. Хамгийн ихдээ 256 өнгийг дүрслэх боломжтой.  Иймээс фото зурганд ашиглахад тохиромжгүй. Зургийг өнгийг өөрийн дүрсэлж чадах 256 форматаас хамгийн ойролцоо өнгийг сонгож хадгалдаг. GIF форматыг цулгуй өнгө бүхий лого, шугаман зураг зэрэгт ашиглахад хамгийн тохиромжтой. Тунгалагшилтыг дэмждэг. Олон фрэйм бүхий хөдөлгөөнт зургийг ч хийх боломжтой 13
  • 14. PNG PNG – Portable Network Graphics GIF форматыг орлуулах зорилгоор анх гаргасан ба GIF форматын хийж чаддаг олон зүйлүүдийг чадна.  Animation дэмждэггүй. Анх зургийг интернэтийн орчинд дамжуулах зорилгоор бүтээгдсэн. Тунгалагшилттай зураг, цулгуй өнгөтэй зурагт тохиромжтой формат.  Түгээмэл ашиглагдахад саад болж буй шалтгаан нь Internet Explorer 7 болон түүнээс өмнөх хувилбарууд уг форматыг бүрэн дэмждэггүй. 14
  • 15. Зургийн файлын хэмжээ File Size – Компьютерт файлын хэмжээг кilobytes(KB) megabytes(MB) gigabytes(GB) ... гэсэн нэгжүүдээр хэмждэг. Аливаа зургийн файлын хэмжээ нь дүрсийнхээ pixel-ийн тооноос шууд хамааралтай. Зураг их pixel агуулах тусам чанар сайтай зураг болдог. Гэвч хэмжээний хувьд томрох бөгөөд ажиллахад удаан болдог. 15
  • 16. Зөвлөмж Хэрвээ зургийн татагдах хугацаа урт байвал зургийн нягтаршил, чанарыг нь багасгахын оронд өргөн, өндрийг нь багасгах хэрэгтэй.  Жижиг боловч нягтрал сайтай зураг, том боловч нягтрал багатай, сарнисан зургаас илүү харагддаг. Хэрэв том хэмжээтэй зураг оруулах зайлшгүй шаардлагатай бол уг зургаа хэд хэдэн жижиг хэсгүүдэд хувааж оруулж болох юм.  Энэ үед хэрэглэгчийн дэлгэцэнд дээр зураг бүтнээрээ ачаалагдахгүй хэсэг хэсгээрээ гарч ирэх боломжтой болох юм. 16
  • 17. XHTML хуудсанд зураг оруулах <img>таагийг ашиглана.  Энэ тааг нь агуулгагүй, хоосон учир <img …/>гэж хаагдана. Inline элемент XHTML img элементэд заавал бичигдэх атрбитууд  src – Оруулах зургийн байрлал, нэр  alt – Броузер зургийг харуулах боломжгүй үед зургийн оронд харагдах текст ба тухайн зурагтай холбоотой текст байна.  <img src=“logo.png” alt=“…‟s logo”/> 17
  • 18. CSS property Зурагны гадна талаар CSS хүрээ оруулах img{ border: 1px solid #000000; } Хуудасны бүх зурганд 1pxөргөнтэй, хар өнгөтэй, тасралтгүй шулуун бүхий хүрээ оруулж байна. #wrapper img{ border: 1px solid #000000; } Зөвхөн wrapper id-тэй элемент дотор байрласан зурганд өмнөхтэй адил хүрээг оруулж байна.18
  • 19. CSS property - float float – Элементийг баруун эсвэл зүүн талруу нь шахаж байрлуулах ба бусад элемент уг элементийн тойрон байрлах боломж олгодог.  Зураг болон хуудасны харагдах байдлыг гаргахад голчлон хэрэглэгддэг.  float: left – Элементийг зүүн тийш шахах  float: right - Элементийг баруун тийш шахах  float: none 19
  • 20. Floatwrapperelement block20
  • 21. Float block elementwrapper inline element21
  • 22. Float block element inlinewrapper element inline element22
  • 23. Float block element inlinewrapper element inline element float:right23
  • 24. Float block element inline elementwrapper inline element block element float:right24
  • 25. Float block element inline element inline elementwrapper block element inline element inline element float:right25
  • 26. Float block element inline element inline element block elementwrapper inline element inline element float:right block element – clear:both26
  • 27. Зургийг тойруулан текст бичих Зураг тойруулан текст бичсэн жишээ хийж үзэцгээе. 27
  • 28. Зурагтай ажиллах CSS property Зургийн тойруулан текст бичих  Зургийн тойруулан текст бичихэд float, margin property-г ашиглана. Зураг баруун, эсвэл зүүн талруугаа шахаж байрлана. margin зай авна. .photo { border: 5px double #ffffff; float: left; margin-left: 20px; margin-bottom: 20px; } 28
  • 29. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Хэт их, эрээн, чамин дэвсгэр зураг ашиглах  Вэб хуудасны дэвсгэр зураг нь агуулгаасаа илүү хэрэглэгчийн анхаарлыг татахуйц байх 29
  • 30. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Хуудасны дэвсгэр, агуулгын өнгө хоорондоо ялгагдахгүй байх 30
  • 31. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Тохиромжгүй зургийн формат ашиглах  GIF форматтай фото зураг ашиглах, BMP, TIFF өргөтгөлтэй зураг ашиглах jpg gif 31
  • 32. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Зургийн хэмжээг HTML кодноос өөрчлөх 32
  • 33. CSS property - position position – Элементийн байрлалыг тодорхойлоход ашиглагдана.  top, bottom, left, right property-той хамт хэрэглэгдэнэ. Мөн энэ property-г ашиглан элементүүдийн наана, цаана байрлах, агуулга нь хэт том үед хэрхэх зэргийг шийдэх боломжтой. 33
  • 34. CSS property - position static– /default утга/ Хуудасны элементүүдийн хэвийн урсгалын дагуу байрлуулна.  top, bottom, left, right – ашиглагдахгүй. fixed – Броузер цонхтой харьцангуйгаар байрлана. Иймээс цонхны scroll-ийг хөдөлгөсөн ч зааж өгсөн тухайн байрлалдаа байх юм.  Бусад элементүүд fixed утгатай элементийг байхгүй мэтээр байрладаг. Бусад элементүүдийн наана байрлана. relative - Хэвийн урсгалтай харьцангуйгаар байрлах байрлалыг  top, bottom, left, right property ашиглаж тодорхойлохыг заана.  z-index буюу элементийн наана цаана байрлахыг тодорхойлдог property-той хамт хэрэглэгддэг. absolute -position property нь static-аас өөр утгатай, тухайн элементийн хамгийн анхны эцэг элементээсээ харьцангуйгаар байрлахыг заана. Хэрэв анхны эцэг элемент олдохгүй бол <html> - элемент эцэг элемент нь болно. 34
  • 35. Текстийг зургаар орлуулах Гоѐмсог, өвөрмөц бичиглэлтэй текст оруулах шаардлагатай тохиолдолд зурган хэлбэрээр оруулж болно. 35
  • 36. Вэбхуудасныдэвсгэрийндизайныгтодорхойлох Liquid design буюу дэлгэцийн өргөнөөс хамаарч өргөн нь тодорхойлогддон сунаж дүрслэгдэх боломжтой хуудсан дээрх текстийг хэрэглэгч уншихад хүндрэлтэй байдаг. Үүний эсрэг тохиолдолд fixed буюу тогтсон өргөн ашиглаж буй үед өргөн дэлгэцтэй бол тогтмол хэмжээнээс илүү гарсан хэсэг нь хоосон харагдаж үлддэг. Энэ үед хуудсанд дэвсгэр өнгө, зураг оруулж өгдөг бөгөөд зорилго нь хэрэглэгчийн нүд/анхаарлыг хуудасны агуулга хэсэгт төвлөрүүлж, агуулга хэсгийн гадуур сонирхолтой үзэмж оруулах байдаг. Хуудсанд дэвсгэр зураг, өнгө оруулахад анхаарах дүрмүүд - Хэрэглэгчийн анхаарлыг агуулгаасаа илүү татахгүй байх - Дэвсгэр зураг ашиглаж байгаа бол аль болох энгийн загвартайг сонгож, дэвсгэр өнгө ашиглаж байгаа бол текстийн өнгөнөөс ялгарал ихтэй байх хэрэгтэй. 36
  • 37. CSS property – background-image background-image – Элементэд дэвсгэр зураг оруулна. Бичигдэх хэлбэр  background-image: url(„Зургийн нэр‟); body{ background-image: url(„logo.png‟); } 37
  • 38. CSS property – background-repeat background-repeat – Элементийн хээхэмжээнээс дэвсгэр зурагны хэмжээ жижиг бол хэрхэн давтагдаж байрлахыг заана. 4 төрлийн утгаас сонгож өгнө. 1. no-repeat – Дэвсгэр зурагнэг л удаа дүрслэгдэх ба давтагдахгүй 2. repeat-x – Дэвсгэр зураг хэвтээ тэнхлэгийн дагуу давтагдана. 3. repeat-y – Дэвсгэр зураг босоо тэнхлэгийн дагуу давтагдана. 4. repeat – Дэвсгэр зураг хэвтээ, босоо тэнхлэгийн дагуу давтагдаж байрлана. Уг property-г тодорхойлж өгөөгүй байхад анхныутга нь repeat байдаг. body{ background-image: url(„logo.png‟); background-repeat:no-repeat; } 38
  • 39. CSS property - background-attachment background-attachment Авахутга: scroll, fixed  scroll утгыгсонгосонүедхуудсыгскроллхийхүеддэвсгэрхэсэгньмөнхамтскрол лхийгдэнэ.  fixed утгыгсонгосонүедхуудсыгскроллхийхэдзөвхөнагуулга л скроллхийгдэнэ. body{ background-image:url(„logo.png‟); background-repeat:no-repeat; background-attachment:fixed; } 39
  • 40. CSS property - background-position background-position - Уг property дэвсгэр зурагны байрлалыг заах ба хэвтээ босоо чиглэлийг төлөөлсөн хоѐр утга авна.  Default утгань 0,0 - хуудаснызүүндээдхэсэг background-position:right, bottom;  Эхний утга хэвтээ, хоѐрдах утга босоо тэнхлэгийн дагуу хаана байрлахыг заана.  center, left, right - хэвтээтэнхлэгийндагуухаанабайрлахыгзаана  center, top, bottom - босоотэнхлэгийндагуухаанабайрлахыгзаана  Дээрх текстэн утгуудаас гадна хувь болон pixel утгууд өгч болно.  Гэвчдээрхтекстэн, тоон, хувиар илэрхийлсэн утгуудыг хольж хэрэглэж болохгүй. background-position:center; background-position:10%, 10%; background-position: 5px, 10px; 40
  • 41. ВэбхуудасныдэвсгэрийндизайныгтодорхойлохЖишээ 1body{ background-image:url(background_image.gif); background-repeat:no-repeat; background-position:left center;background-attachment:fixed;}Жишээ 2body{ background-image:url(background_image.gif); background-repeat:no-repeat; background-position: 0 50%; background-attachment: scroll;} 41
  • 42. ВэбхуудасныдэвсгэрийндизайныгтодорхойлохCSS-ийнбогинохэлбэр Дээрх үзсэн элементийн дэвсгэр зурагтай ажиллах property-г нэгтгэн богино хэлбэрт оруулан бичих боломжтой.  Энэ үед сүүлд бичигдсэн зарлагаа нь өмнөх ижил утгатай зарлагааг дардаг гэдгийг санах хэрэгтэй.  Жишээ нь нэг элементийн background-image-г тодорхойлоод дараа нь дэвсгэр өнгө тавих богино хэлбэрийн property бичсэн бол дэвсгэр зураг гарахгүй. Богино ашиглаж байгаа тохиолдолд property-нуудыг дурын дараалалд бичиж болно. body{ background:#ffffff url(background_image.gif) no-repeat fixed 50px 10px; } Богино хэлбэрийг ашигласнаар property-г бичиж, өөрчлөхөд хялбар байдаг. 42
  • 43. Дэвсгэр зураг ашиглах жишээ 143
  • 44. Дэвсгэр зураг ашиглах жишээ 244
  • 45. Дэвсгэр зураг ашиглах жишээ 345
  • 46. Дэвсгэр зураг ашиглах жишээ 446
  • 47. Танилцуулга сайт хийх хэсэг Дээд Сургуулийн Танилцуулга Сайт
  • 48. Вэбийн дизайныг төлөвлөх48
  • 49. Вэбийн дизайныг төлөвлөх49
  • 50. Даалгавар, бие даалтаа хийж, сорилынасуултуудаар өөрийгөө шалгаарай. Танд амжилт хүсье 50

×