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

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. Float
wrapperelement
block
20

21. Float
block element
wrapper
inline
element
21

22. Float
block element
inline
wrapper
element inline element
22

23. Float
block element
inline
wrapper
element inline element
float:right
23

24. Float
block element
inline
element
wrapper inline element
block element
float:right
24

25. Float
block element
inline
element inline element
wrapper
block element
inline element inline element
float:right
25

26. Float
block element
inline
element inline element
block element
wrapper
inline element inline element
float:right
block element – clear:both
26

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. Вэбхуудасныдэвсгэрийндизайныгтодорхойлох
Жишээ 1
body{
background-image:url(background_image.gif);
background-repeat:no-repeat;
background-position:left center;
background-attachment:fixed;
}
Жишээ 2
body{
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. Дэвсгэр зураг ашиглах жишээ 1
43

44. Дэвсгэр зураг ашиглах жишээ 2
44

45. Дэвсгэр зураг ашиглах жишээ 3
45

46. Дэвсгэр зураг ашиглах жишээ 4
46

47. Танилцуулга сайт хийх хэсэг
Дээд Сургуулийн Танилцуулга Сайт

48. Вэбийн дизайныг төлөвлөх
48

49. Вэбийн дизайныг төлөвлөх
49

50. Даалгавар, бие даалтаа хийж, сорилын
асуултуудаар өөрийгөө
шалгаарай.
Танд амжилт хүсье

50