Web design lecture 3

4,106 views
3,992 views

Published on

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

Published in: Education
1 Comment
8 Likes
Statistics
Notes
  • hjgfds
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,106
On SlideShare
0
From Embeds
0
Number of Embeds
1,032
Actions
Shares
0
Downloads
0
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Web design lecture 3

  1. 1. Вэб дизайн“Сод Хийморь” Дээд Сургууль Зурагтай ажиллахХичээл № 3
  2. 2. Агуулга Файлын замтай ажиллах 16-тын өнгөний код Зургийн файлын формат, хэмжээ Хуудсанд зураг оруулж ирэх Зурагтай ажиллах CSS property Дэвсгэр зураг оруулах Танилцуулга сайт хийх хэсэг 2
  3. 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. Файлын замтай ажиллах4
  5. 5. Файлынзамтайажиллах image1.jpg зургийг about1.html хуудсанд оруулж ирэх  images хавтасруу орно. Зургийн нэр, өргөтгөлийг бичиж өгнө.  images/image1.jpg assign1.html хуудсанд image2.jpg зургийг оруулж ирэх  Өөрийн байрлаж буй files хавтаснаас гарч images хавтасруу орно. Зургийн нэр өргөтгөлийг бичиж өгнө.  ../images/image2.jpg 5
  6. 6. 16-тын өнгөний код CSS-д өнгөний утгыг 3 янзаар олгож болох тухай үзсэн.  Нэрээр – CSS-д стандарт 17, нэмэлт 130 өнгийг л нэрээр нь өгөх боломжтой.  Бусад өнгөний утгыг RGB, HEX буюу 16-тын өнгөний кодоор олгодог.  rgb(255.0.0) – Улаан өнгө  #FF0000  16-тын өнгөний код нь вэб хуудсуудад хамгийн өргөн хэрэглэгддэг. 6
  7. 7. 16-тын өнгөний код 16-тын өнгөний коднь чагт(#) тэмдэгтээр эхэлдэг. Өнгөний код нь 6 оронтой байна.  Тэмдэгтүүд хоѐр хоѐроороо өнгөний утгыг илэрхийлнэ.  #XXxxxx: Улаан өнгө  #xxXXxx: Ногоон өнгө  #xxxxXX: Цэнхэр өнгө7
  8. 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. 9. Pixel Pixel – (Picture Elements) Зураг нь олон тооны pixel-үүдийг агуулдаг ба pixel бүр нь байршил болон өнгөний утгуудыг агуулж байдаг. Зургийн өнгөний мэдээллүүдийгагуулсан маш жижиг цэг юм. Зургийн файлын нэг инчд хэдэн Pixel ноогдож байгаагаас зургийн хэмжээ шууд хамааралтай байдаг. Үүнийг resolution буюу зургийн нягтрал гэдэг. 9
  10. 10. Зургийн файлын формат PSD PSB BMP GIF EPS JPEG / JPG PCX RAW PNG гэх мэт. 10
  11. 11. Зургийн формат - Төрөл Вэб хуудсанд байршуулах зургийн төрлийг зөв сонгох нь чухал бөгөөд одоогоор JPEG, PNG, GIF гэсэн зургийн форматууд өргөн хэрэглэгдэж байна. 11
  12. 12. JPEG формат JPEG – Joint Photographic Experts Group Өнгөний ялгарал ихээр шаарддаг зургийг дүрслэхэд голчлон ашиглагддаг.  Фото зураг JPEG формат сая сая өнгийг дэмждэг. Хэт их шахагдсан зургийн чанар алдагддаг буюу жижиг хэсгүүдийг нь томруулж харахад бүрсийж харагддаг. JPEG форматтай зургийн өргөтгөлүүд  .jpg, .jpeg, .jpe, .jif, .jfif, .jfi 12
  13. 13. GIF GIF – Graphics Interchange Formats Зургийг шахахдаа ямар нэг хасалт хийдэггүй. Хамгийн ихдээ 256 өнгийг дүрслэх боломжтой.  Иймээс фото зурганд ашиглахад тохиромжгүй. Зургийг өнгийг өөрийн дүрсэлж чадах 256 форматаас хамгийн ойролцоо өнгийг сонгож хадгалдаг. GIF форматыг цулгуй өнгө бүхий лого, шугаман зураг зэрэгт ашиглахад хамгийн тохиромжтой. Тунгалагшилтыг дэмждэг. Олон фрэйм бүхий хөдөлгөөнт зургийг ч хийх боломжтой 13
  14. 14. PNG PNG – Portable Network Graphics GIF форматыг орлуулах зорилгоор анх гаргасан ба GIF форматын хийж чаддаг олон зүйлүүдийг чадна.  Animation дэмждэггүй. Анх зургийг интернэтийн орчинд дамжуулах зорилгоор бүтээгдсэн. Тунгалагшилттай зураг, цулгуй өнгөтэй зурагт тохиромжтой формат.  Түгээмэл ашиглагдахад саад болж буй шалтгаан нь Internet Explorer 7 болон түүнээс өмнөх хувилбарууд уг форматыг бүрэн дэмждэггүй. 14
  15. 15. Зургийн файлын хэмжээ File Size – Компьютерт файлын хэмжээг кilobytes(KB) megabytes(MB) gigabytes(GB) ... гэсэн нэгжүүдээр хэмждэг. Аливаа зургийн файлын хэмжээ нь дүрсийнхээ pixel-ийн тооноос шууд хамааралтай. Зураг их pixel агуулах тусам чанар сайтай зураг болдог. Гэвч хэмжээний хувьд томрох бөгөөд ажиллахад удаан болдог. 15
  16. 16. Зөвлөмж Хэрвээ зургийн татагдах хугацаа урт байвал зургийн нягтаршил, чанарыг нь багасгахын оронд өргөн, өндрийг нь багасгах хэрэгтэй.  Жижиг боловч нягтрал сайтай зураг, том боловч нягтрал багатай, сарнисан зургаас илүү харагддаг. Хэрэв том хэмжээтэй зураг оруулах зайлшгүй шаардлагатай бол уг зургаа хэд хэдэн жижиг хэсгүүдэд хувааж оруулж болох юм.  Энэ үед хэрэглэгчийн дэлгэцэнд дээр зураг бүтнээрээ ачаалагдахгүй хэсэг хэсгээрээ гарч ирэх боломжтой болох юм. 16
  17. 17. XHTML хуудсанд зураг оруулах <img>таагийг ашиглана.  Энэ тааг нь агуулгагүй, хоосон учир <img …/>гэж хаагдана. Inline элемент XHTML img элементэд заавал бичигдэх атрбитууд  src – Оруулах зургийн байрлал, нэр  alt – Броузер зургийг харуулах боломжгүй үед зургийн оронд харагдах текст ба тухайн зурагтай холбоотой текст байна.  <img src=“logo.png” alt=“…‟s logo”/> 17
  18. 18. CSS property Зурагны гадна талаар CSS хүрээ оруулах img{ border: 1px solid #000000; } Хуудасны бүх зурганд 1pxөргөнтэй, хар өнгөтэй, тасралтгүй шулуун бүхий хүрээ оруулж байна. #wrapper img{ border: 1px solid #000000; } Зөвхөн wrapper id-тэй элемент дотор байрласан зурганд өмнөхтэй адил хүрээг оруулж байна.18
  19. 19. CSS property - float float – Элементийг баруун эсвэл зүүн талруу нь шахаж байрлуулах ба бусад элемент уг элементийн тойрон байрлах боломж олгодог.  Зураг болон хуудасны харагдах байдлыг гаргахад голчлон хэрэглэгддэг.  float: left – Элементийг зүүн тийш шахах  float: right - Элементийг баруун тийш шахах  float: none 19
  20. 20. Floatwrapperelement block20
  21. 21. Float block elementwrapper inline element21
  22. 22. Float block element inlinewrapper element inline element22
  23. 23. Float block element inlinewrapper element inline element float:right23
  24. 24. Float block element inline elementwrapper inline element block element float:right24
  25. 25. Float block element inline element inline elementwrapper block element inline element inline element float:right25
  26. 26. Float block element inline element inline element block elementwrapper inline element inline element float:right block element – clear:both26
  27. 27. Зургийг тойруулан текст бичих Зураг тойруулан текст бичсэн жишээ хийж үзэцгээе. 27
  28. 28. Зурагтай ажиллах CSS property Зургийн тойруулан текст бичих  Зургийн тойруулан текст бичихэд float, margin property-г ашиглана. Зураг баруун, эсвэл зүүн талруугаа шахаж байрлана. margin зай авна. .photo { border: 5px double #ffffff; float: left; margin-left: 20px; margin-bottom: 20px; } 28
  29. 29. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Хэт их, эрээн, чамин дэвсгэр зураг ашиглах  Вэб хуудасны дэвсгэр зураг нь агуулгаасаа илүү хэрэглэгчийн анхаарлыг татахуйц байх 29
  30. 30. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Хуудасны дэвсгэр, агуулгын өнгө хоорондоо ялгагдахгүй байх 30
  31. 31. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Тохиромжгүй зургийн формат ашиглах  GIF форматтай фото зураг ашиглах, BMP, TIFF өргөтгөлтэй зураг ашиглах jpg gif 31
  32. 32. Вэб хуудсанд ашиглах зургийг сонгоход гаргадагалдаа Зургийн хэмжээг HTML кодноос өөрчлөх 32
  33. 33. CSS property - position position – Элементийн байрлалыг тодорхойлоход ашиглагдана.  top, bottom, left, right property-той хамт хэрэглэгдэнэ. Мөн энэ property-г ашиглан элементүүдийн наана, цаана байрлах, агуулга нь хэт том үед хэрхэх зэргийг шийдэх боломжтой. 33
  34. 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. Текстийг зургаар орлуулах Гоѐмсог, өвөрмөц бичиглэлтэй текст оруулах шаардлагатай тохиолдолд зурган хэлбэрээр оруулж болно. 35
  36. 36. Вэбхуудасныдэвсгэрийндизайныгтодорхойлох Liquid design буюу дэлгэцийн өргөнөөс хамаарч өргөн нь тодорхойлогддон сунаж дүрслэгдэх боломжтой хуудсан дээрх текстийг хэрэглэгч уншихад хүндрэлтэй байдаг. Үүний эсрэг тохиолдолд fixed буюу тогтсон өргөн ашиглаж буй үед өргөн дэлгэцтэй бол тогтмол хэмжээнээс илүү гарсан хэсэг нь хоосон харагдаж үлддэг. Энэ үед хуудсанд дэвсгэр өнгө, зураг оруулж өгдөг бөгөөд зорилго нь хэрэглэгчийн нүд/анхаарлыг хуудасны агуулга хэсэгт төвлөрүүлж, агуулга хэсгийн гадуур сонирхолтой үзэмж оруулах байдаг. Хуудсанд дэвсгэр зураг, өнгө оруулахад анхаарах дүрмүүд - Хэрэглэгчийн анхаарлыг агуулгаасаа илүү татахгүй байх - Дэвсгэр зураг ашиглаж байгаа бол аль болох энгийн загвартайг сонгож, дэвсгэр өнгө ашиглаж байгаа бол текстийн өнгөнөөс ялгарал ихтэй байх хэрэгтэй. 36
  37. 37. CSS property – background-image background-image – Элементэд дэвсгэр зураг оруулна. Бичигдэх хэлбэр  background-image: url(„Зургийн нэр‟); body{ background-image: url(„logo.png‟); } 37
  38. 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. 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. 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. 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. 42. ВэбхуудасныдэвсгэрийндизайныгтодорхойлохCSS-ийнбогинохэлбэр Дээрх үзсэн элементийн дэвсгэр зурагтай ажиллах property-г нэгтгэн богино хэлбэрт оруулан бичих боломжтой.  Энэ үед сүүлд бичигдсэн зарлагаа нь өмнөх ижил утгатай зарлагааг дардаг гэдгийг санах хэрэгтэй.  Жишээ нь нэг элементийн background-image-г тодорхойлоод дараа нь дэвсгэр өнгө тавих богино хэлбэрийн property бичсэн бол дэвсгэр зураг гарахгүй. Богино ашиглаж байгаа тохиолдолд property-нуудыг дурын дараалалд бичиж болно. body{ background:#ffffff url(background_image.gif) no-repeat fixed 50px 10px; } Богино хэлбэрийг ашигласнаар property-г бичиж, өөрчлөхөд хялбар байдаг. 42
  43. 43. Дэвсгэр зураг ашиглах жишээ 143
  44. 44. Дэвсгэр зураг ашиглах жишээ 244
  45. 45. Дэвсгэр зураг ашиглах жишээ 345
  46. 46. Дэвсгэр зураг ашиглах жишээ 446
  47. 47. Танилцуулга сайт хийх хэсэг Дээд Сургуулийн Танилцуулга Сайт
  48. 48. Вэбийн дизайныг төлөвлөх48
  49. 49. Вэбийн дизайныг төлөвлөх49
  50. 50. Даалгавар, бие даалтаа хийж, сорилынасуултуудаар өөрийгөө шалгаарай. Танд амжилт хүсье 50

×