Submit Search
Upload
Web design lecture 3
•
11 likes
•
3,941 views
Chantsaldulam Ganbadrakh
Follow
e-bagsh.mn - "Вэб Дизайн" цахим сургалт
Read less
Read more
Education
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 50
Recommended
web basic 1
web basic 1
Usukhuu Galaa
Ms excel ийн insert цэсний тухай
Ms excel ийн insert цэсний тухай
Gantsetseg Lkhagvasuren
Css
Css
TileubekTiky
хичээл № 5 powerpoint
хичээл № 5 powerpoint
E-Gazarchin Online University
Lecture 3. css
Lecture 3. css
Khangal Jargal
Publisher
Publisher
Onon Tuul
It101 10
It101 10
Nergui Batjargal
Web design lecture 2
Web design lecture 2
Chantsaldulam Ganbadrakh
Recommended
web basic 1
web basic 1
Usukhuu Galaa
Ms excel ийн insert цэсний тухай
Ms excel ийн insert цэсний тухай
Gantsetseg Lkhagvasuren
Css
Css
TileubekTiky
хичээл № 5 powerpoint
хичээл № 5 powerpoint
E-Gazarchin Online University
Lecture 3. css
Lecture 3. css
Khangal Jargal
Publisher
Publisher
Onon Tuul
It101 10
It101 10
Nergui Batjargal
Web design lecture 2
Web design lecture 2
Chantsaldulam Ganbadrakh
Cs101 lec6
Cs101 lec6
Nergui Batjargal
Toolliin sistem
Toolliin sistem
shulam
мультмедиа технологи
мультмедиа технологи
Khishighuu Myanganbuu
Word
Word
tsbmb
Ci prog tolgoi file хичээл 2
Ci prog tolgoi file хичээл 2
Urantuya Purevtseren
Database 1
Database 1
Usukhuu Galaa
зурагтай ажиллах 7-р анги
зурагтай ажиллах 7-р анги
O Onongoo
Нээлттэй чөлөөт эхийн програм хангамж
Нээлттэй чөлөөт эхийн програм хангамж
Uyanga Tserengombo
нийгмийн нийтлэг
нийгмийн нийтлэг
tulgaa14
оршил
оршил
Monhzul
мэдээллийн системийн үндэс
мэдээллийн системийн үндэс
Tsetsenkhuu Otgonbayar
хэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмууд
Tsetsenkhuu Otgonbayar
Шугаман алгоритмын бодлогууд
Шугаман алгоритмын бодлогууд
Баярсайхан Л
Insert цэсний тухай
Insert цэсний тухай
bbe_0416
Microsoft excel програм гарын авлага
Microsoft excel програм гарын авлага
EnkhjargalDashdorjEn
вэб дизайн - хичээл 1
вэб дизайн - хичээл 1
Chantsaldulam Ganbadrakh
Day 1 database
Day 1 database
ETC
Html гэж юу вэ
Html гэж юу вэ
Enhmandah Hemeelee
Постер бэлтгэх арга зүй
Постер бэлтгэх арга зүй
Erdenebolor Baast
Access1
Access1
Onon Tuul
Excel dasgal
Excel dasgal
oyuna
Computer ethics and system security
Computer ethics and system security
Jargalsaikhan Alyeksandr
More Related Content
What's hot
Cs101 lec6
Cs101 lec6
Nergui Batjargal
Toolliin sistem
Toolliin sistem
shulam
мультмедиа технологи
мультмедиа технологи
Khishighuu Myanganbuu
Word
Word
tsbmb
Ci prog tolgoi file хичээл 2
Ci prog tolgoi file хичээл 2
Urantuya Purevtseren
Database 1
Database 1
Usukhuu Galaa
зурагтай ажиллах 7-р анги
зурагтай ажиллах 7-р анги
O Onongoo
Нээлттэй чөлөөт эхийн програм хангамж
Нээлттэй чөлөөт эхийн програм хангамж
Uyanga Tserengombo
нийгмийн нийтлэг
нийгмийн нийтлэг
tulgaa14
оршил
оршил
Monhzul
мэдээллийн системийн үндэс
мэдээллийн системийн үндэс
Tsetsenkhuu Otgonbayar
хэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмууд
Tsetsenkhuu Otgonbayar
Шугаман алгоритмын бодлогууд
Шугаман алгоритмын бодлогууд
Баярсайхан Л
Insert цэсний тухай
Insert цэсний тухай
bbe_0416
Microsoft excel програм гарын авлага
Microsoft excel програм гарын авлага
EnkhjargalDashdorjEn
вэб дизайн - хичээл 1
вэб дизайн - хичээл 1
Chantsaldulam Ganbadrakh
Day 1 database
Day 1 database
ETC
Html гэж юу вэ
Html гэж юу вэ
Enhmandah Hemeelee
Постер бэлтгэх арга зүй
Постер бэлтгэх арга зүй
Erdenebolor Baast
Access1
Access1
Onon Tuul
What's hot
(20)
Cs101 lec6
Cs101 lec6
Toolliin sistem
Toolliin sistem
мультмедиа технологи
мультмедиа технологи
Word
Word
Ci prog tolgoi file хичээл 2
Ci prog tolgoi file хичээл 2
Database 1
Database 1
зурагтай ажиллах 7-р анги
зурагтай ажиллах 7-р анги
Нээлттэй чөлөөт эхийн програм хангамж
Нээлттэй чөлөөт эхийн програм хангамж
нийгмийн нийтлэг
нийгмийн нийтлэг
оршил
оршил
мэдээллийн системийн үндэс
мэдээллийн системийн үндэс
хэрэглээний програмууд ба системийн програмууд
хэрэглээний програмууд ба системийн програмууд
Шугаман алгоритмын бодлогууд
Шугаман алгоритмын бодлогууд
Insert цэсний тухай
Insert цэсний тухай
Microsoft excel програм гарын авлага
Microsoft excel програм гарын авлага
вэб дизайн - хичээл 1
вэб дизайн - хичээл 1
Day 1 database
Day 1 database
Html гэж юу вэ
Html гэж юу вэ
Постер бэлтгэх арга зүй
Постер бэлтгэх арга зүй
Access1
Access1
Viewers also liked
Excel dasgal
Excel dasgal
oyuna
Computer ethics and system security
Computer ethics and system security
Jargalsaikhan Alyeksandr
Microsoft access 2007
Microsoft access 2007
Akhyt
цахим хичээлийн тайлан(2)
цахим хичээлийн тайлан(2)
bulgaa_babur
Dynamic web 2
Dynamic web 2
Usukhuu Galaa
өгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэс
Бямбаа Авирмэд
Хүснэгт
Хүснэгт
Turuu Tsogt
11 access-husnegtiin design
11 access-husnegtiin design
Khishighuu Myanganbuu
Gurb 160421085938
Gurb 160421085938
Батбаяр Баагий
Copy of өнгө 2
Copy of өнгө 2
saruulkaa
бичвэр мэдээлэл боловсруулах програмын тест
бичвэр мэдээлэл боловсруулах програмын тест
Maral Bobih
компьютер тоглоом
компьютер тоглоом
mandahnaran aruinchuluun
URL хаяг гэж юу вэ?
URL хаяг гэж юу вэ?
Herlen Byambatsogt
It101 lec1
It101 lec1
Д. Сүх-Очир
Adobe Flash hicheel Mongol Флаш хичээл монгол
Adobe Flash hicheel Mongol Флаш хичээл монгол
Gantulga Dashdondov
Flash 10 garguulah
Flash 10 garguulah
Khishighuu Myanganbuu
Технологи ба цагдан хяналт
Технологи ба цагдан хяналт
Khulan Jugder
Төслийн орчин
Төслийн орчин
batsuuri choij
Html хичээл
Html хичээл
Баярсайхан Л
Flash
Flash
Lkhagva LBL
Viewers also liked
(20)
Excel dasgal
Excel dasgal
Computer ethics and system security
Computer ethics and system security
Microsoft access 2007
Microsoft access 2007
цахим хичээлийн тайлан(2)
цахим хичээлийн тайлан(2)
Dynamic web 2
Dynamic web 2
өгөгдлийн сангийн системийн үндэс
өгөгдлийн сангийн системийн үндэс
Хүснэгт
Хүснэгт
11 access-husnegtiin design
11 access-husnegtiin design
Gurb 160421085938
Gurb 160421085938
Copy of өнгө 2
Copy of өнгө 2
бичвэр мэдээлэл боловсруулах програмын тест
бичвэр мэдээлэл боловсруулах програмын тест
компьютер тоглоом
компьютер тоглоом
URL хаяг гэж юу вэ?
URL хаяг гэж юу вэ?
It101 lec1
It101 lec1
Adobe Flash hicheel Mongol Флаш хичээл монгол
Adobe Flash hicheel Mongol Флаш хичээл монгол
Flash 10 garguulah
Flash 10 garguulah
Технологи ба цагдан хяналт
Технологи ба цагдан хяналт
Төслийн орчин
Төслийн орчин
Html хичээл
Html хичээл
Flash
Flash
Web design lecture 3
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