Weitere ähnliche Inhalte
Ähnlich wie Web design lecture 2 (8)
Web design lecture 2
- 2. Агуулга
Block болон Inline элементүүдийн тухай
CSS, танилцуулга
Текст хэвжүүлэх CSS property ашиглах
Div тааг
CSS property
CSS box model
Фонттой ажиллах
Marquee тааг
Танилцуулга сайт хийх хэсэг
2
- 3. Хичээл эхлэхийн өмнө...
XHTML 1.0 вэб хуудас бүрт доорх код заавал байх хэрэгтэй учир
доорх кодыг start-page.html файл болгон хадгалж, вэб хуудас
үүсгэх бүртээ уг кодыг хуулж тавина.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
3
- 4. block, inline элементүүдийн ялгаа
HTML элементүүдийг дэлгэцэнд дүрслэгдэх шинж
чанараар нь
block
inline
гэж ангилж болно.
Block элемент
Үргэлж шинэ мөрнөөс эхэлж байрлана.
Өндөр, мөрний өндөр, дээр доороос авах зайг өөрчилж
болно.
Өргөнийг нь тодорхойлж өгөөгүй тохиолдолд өргөн нь
агуулагчийнхаа өргөнөөр тодорхойлогддог.
Дотроо block, inline элементүүдийг алийг нь ч агуулж болно.
p, blockquote, h1 … h6, div, ul, ol, li, table, tr, td, th
4
- 5. block, inline элементүүдийн ялгаа
Inline элемент
Шинэ мөрнөөс эхэлж байрлахгүй.
Өндөр, мөрний өндөр, дээр доороос авах зай нь
өөрчлөгддөггүй.
Өргөн нь дотроо агуулж буй текст, зургийн хэмжээгээр
тодорхойлогддог.
Дотроо inline элементийг агуулна.
Block элементийн дотор агуулагдаж хэрэглэгдэнэ.
a (anchor tag), em, strong, img
5
- 6. Түгээмэл хэрэглэгддэг атрибутууд
id
CSS, JavaScript ашиглахад хэрэглэгдэх ба элементүүдийн id
атрибутын утга давхардах ѐсгүй.
class
Өөр өөр элементүүдэд ашиглагдаж болох ба CSS-тэй хамт
хэрэглэгдэнэ.
style
Элементийн CSS дүрмийг бичиж болно
title
tool tip буюу тухайн элемент дээр хулгана очиход харагдах
текст
6
- 7. HTML ба CSS
HTML нь зөвхөн вэб хуудасны агуулгыг бүтэцлэж харуулахад
зориулагдсан.
HTML өргөн ашиглагдах болсны дараагаар вэб дизайнер болон вэб
хэрэглэгчдийн вэбийн харагдах байдлыг сайжруулахыг хүсэж эхэлсэн ба энэ
хүсэлтэд зориулсан шинэ html таагууд гарч ирсэн.
Энэ нь HTML таагуудыг замбараагүй болгож эхэлсэн бөгөөд
таагууд логик бүтцийг гаргахаас гадна харагдах байдлыг
тодорхойлох үүрэгтэй болсон.
Элементийн фонтыг тохируулах үүрэгтэй <font> тааг ашиглагдах болсон нь
фонтыг тохируулах хэрэгтэй газар болгонд уг таагийг бичих шаардлагатай
болсон.
Ингэснээр кодын хэмжээ ихэсч, нэг ижил кодуудыг дахин дахин бичих,
өөрчлөлтийг олон газар хийх зэрэг хүч хөдөлмөр, цаг хугацаа үрсэн
асуудлуудыг үүсгэж байсан.
Энэ асуудлыг шийдэхээр CSS буюу Cascading Style Sheet гарч
ирсэн.
7
- 8. CSS
Тэгэхээр CSS-ийн гол зорилго нь HTML хуудасны агуулгаас нь
харагдах байдлыг тодорхойлсон хэсгийг нь салгаж тусад нь
кодчилох, шийдэх юм.
Вэб хуудасны харагдах байдал, хэв маягийг гаргахад
зориулагдсан стандарт.
Броузер HTML элементүүдийг хэрхэн харагдуулах, дүрслэх
тухай зааврыг CSS кодоос авна.
Вэб хуудасныхаа дизайныг гаргахдаа CSS зайлшгүй ашиглах
хэрэгтэй.
8
- 9. CSS
CSS-ийг хэрэглэх санаа нь анхнаасаа л ойлгомжтой, тодорхой байсан
боловч хэрэгжилт нь удаан байлаа.
Ихэнх броузерууд маш цөөн тооны CSS дүрмүүдийг дэмждэг байлаа.
Одоо сүүлийн үеийн бүх броузерууд CSS дүрмүүдийг дэмждэг болсон.
Дараагийн асуудал нь хуучин байдлаараа бичиж сурсан
дизайнеруудыг CSS ашигладаг болгож сургах байлаа.
CSS ашиглах нь дизайнеруудын ажлыг хөнгөвчлөхөөс гадна вэбийг үзэж
буй хэрэглэгчид ч ашиг тусаа өгдөг.
Хуудасны ачаалагдах хугацааг илүү хурдан болгоно.
9
- 11. CSS
CSS нь элементүүдийг дүрслэхэд зориулагдсан
дүрмүүдээс тогтдог.
Мөрдөхөд хялбархан
Дүрэм/Rule/ бүр нь сонгогч/selector/ болон зарлагаа/declaration/
хэсгүүдээс бүрдэнэ.
Хуудасны яг ямар элементийн харагдах байдлыг өөрчлөх вэ гэдгийг
selector ашиглаж сонгоно.
Selector- бичих хэд хэдэн аргууд бий.
Тухайн сонгож авсан элементээ хэрхэн харагдуулах вэ гэдгийг
declaration ашиглаж зааж өгнө.
Declaration нь property:value буюу шинж чанар:утга гэсэн хэсгээс
тогтоно.
Бичигдэх хэлбэр
selector {
property: value ;
}
11
- 12. CSS
CSS declaration/зарлагаа бичихдээ
- Declaration-г угалзан хаалтан - {} дотор бичнэ.
selector { … }
Нэг selector-т хэдэн ч declaration байж болно.
Олон declaration-уудыг цэг-таслалаар( ; ) тусгаарлан бичнэ.
selector {
property1: value1;
property2: value2;
…
propertyN: valueN;
}
12
- 13. CSS дүрмийг хаана бичих вэ?
CSS дүрмүүдийг 3 өөр хэсэгт бичиж болно.
1. HTML элемент дотор
2. Тухайн хуудасны style тааг дотор
3. Тухайн хуудаснаас тусад нь үүсгэсэн css өргөтгөлтэй файл дотор
13
- 14. CSS дүрмийг хаана бичих вэ?
1. HTML элемент дотор
Элементийн нээх тааг дотор style атрибутын утга болгон
бичих
Зөвхөн тухайн элементийн хувьд ашиглагдана.
<p style=“property1:value1; property2: value2; … “ >
Энэ бол CSS ашигласан тааг
</p>
14
- 15. CSS дүрмийг хаана бичих вэ?
2.Тухайн хуудасны style тааг дотор
<style> таагийг ашиглах ба энэ тааг нь head таагт дотор
байрладаг.
Зөвхөн тухайн хуудасныхаа элементүүдийн харагдах байдлыг
тодорхойлно.
style таагийн type атрибутад text/css гэсэн утга өгнө.
<style type=“text/css”>
<html>
<head>
<style type="text/css">
selector{
property:value;
}
</style>
<title> Using Internal CSS </title>
</head>
<body>
<p> This is a paragraph 1 </p>
</body>
</html>
15
- 16. CSS дүрмийг хаана бичих вэ?
3.Тухайн хуудаснаас тусад нь үүсгэсэн css өргөтгөлтэй
файл дотор
Шинээр файл үүсгэн түүндээ хуудасны харагдах байдлыг тодорхойлно. Үүсгэсэн
файлаа css өргөтгөлтэйгээр хадгалах ѐстой.
Үүсгэсэн гадаад хэлбэрийн css файлаа вэб хуудасайтгаа холбохдоо <link> тагийг
ашиглана.
<link rel=“stylesheet” href = “style.css”/>
href – ашиглах CSS файл/зам + нэр + . + өргөтгөл/
page1.html
style.css <html>
<head>
selector{ <link rel=“stylesheet” type=“text/css” href=“style.css”>
property1: value2; …
property2: value2;
} page2.html
…
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
16 …
- 17. CSS - Зөвлөгөө
CSS property нь том жижиг үсгийг
ялгаатайд тооцдоггүй боловч үргэлж жижиг
үсэг ашиглаж байгаарай.
17
- 18. CSS selector-ийн төрлүүд
CSS selector
HTML
Class Id Descendant Group Universal
элемент
selector selector selector selector selector
selector
18
- 19. CSS selector-ын төрлүүд
HTML элемент selector :
HTML таагийн нэрээр нь сонгоно.
p{
property: value;
}
h1{
property: value;
}
body{
property: value;
}
19
- 20. Color property
color - Текстийн өнгийг тодорхойлох property
Өнгөний утгыг
өнгөний нэрээр
16-тын утгаар
RGB горимын утгаар
өгөх боломжтой.
Доорх жишээнүүд paragraph(<р> таагны) текстийн өнгийг цэнхэр
болгоно.
p{
color: blue;
}
p{
color:#0000FF;
}
p{
color: rgb(0,0,255);
}
20
- 21. CSS selector
Class selector
Зарим тохиолдолд бүлэг элементүүдийн харагдах байдлыг
тодорхойлохыг хэрэг гарч болно.
Өмнөх жишээнд үзүүлсэн шиг бүх <p>-ийг цэнхэр өнгөтэй биш
заримыг нь ногоон өнгөтэй харагдуулахыг хүсэж болох юм.
Үүнийг сlass selector ашиглан хялбархан шийдэж болно.
Бичигдэх хэлбэр
.className { property: value; … }
Класс зарлахдаа цэгээр эхлүүлнэ.
Классыг өөрийн хүссэнээр нэрлэж болно
.warning{
color:green
}
21
- 22. CSS selector
Class selector
Бичсэн классаа HTML элементтэйгээ холбохдаа тухайн
таагийн class атрибутыг ашиглана.
<p class=“warning”>Энэ текст ногоон өнгөтэй харагдана.</p>
<h1 class=“warning”> Энэ текст ч мөн ногоон өнгөтэй харагдана. </h1>
Олон үгнээс бүтсэн нэр ашиглаж байгаа тохиолдолд camel –
case хэлбэр ашиглах буюу хоѐрдох үгнээс эхлүүлэн үгнүүдийн
эхний үсгийг томоор бичиж заншаарай
.warningText,
.loginInputName
22
- 23. CSS selector
Class selector
Мөн нэг элемент хэд хэдэн классыг зэрэг ашиглаж болно.
Классуудын нэрний хооронд зай аван бичнэ.
.hugeText{
font-size:48px;
}
.warningText{
color:green;
}
HTML-д ашиглах
<p class=“warningText hugeText”>Энэ текст ногоон бас том
харагдана.</p>
23
- 24. CSS selector
Universal selector
Бүх элементийг сонгоход хэрэглэгдэнэ.
Бичигдэх хэлбэр:
*{
property: value;
}
* - Бүх элемент гэсэн утгатай.
24
- 25. CSS selector
ID selector
Тухайн хуудсанд классыг хэдэн ч удаа элементүүд дуудаж
ашиглах боломжтой байсан.
Харин id-г зөвхөн ганц элемент л ашиглах боломжтой байдаг.
Хуудасны header, footer, үндсэн цэс зэрэг нь ганц байхад л
хангалттай байдаг учир эдгээрийн харагдах байдлыг
тодорхойлохдоо id ашиглах нь тохиромжтой.
Бичигдэх хэлбэр:
# нэр { property: value }
id – зарлахдаа #-таар эхлүүлнэ.
#header{
color:yellow;
}
HTML-д ашиглах
<p id=“header”>Энэ бол header хэсэг</p>
25
- 26. CSS selector
Descendant selector
Нэгээс олон selector ашиглан элемент, элементээ агуулагдсан
байдлаас нь шалтгаалж сонгох
Тухайн элементийн дотор агуулагдсан элементийг сонгохдоо
хоосон зайгаар тусгаарлана.
Бичигдэх хэлбэр
selectorN selectorN … selectorN{
property: value;
}
Өмнөх жишээнд үзүүлсэн классыг зөвхөн p тааг дотор бичигдсэн тааг л
ашиглах боломжтой гэж зааж өгөхийг хүсвэл descendant selector-ийг
ашиглана.
p .warningText{
}
26
- 27. CSS selector
Group selector
Хэд хэдэн selector-уудын дотор адил declaration бичигддэг
бол тэдгээрийг group selector ашиглан тодорхойлох
боломжтой.
Selector-уудыг таслалаар тусгаарлан бичнэ.
Бичигдэх хэлбэр
selector1, selector2 ... selectorN{
property: value;
}
p, h1, h2, .hugeText, #header, p h4 {
color: blue;
}
27
- 28. CSS selector ашиглах
Аль selector-ийг хэрэглэх вэ?
HTML элементийн нэрээр нь сонгодог selector-ийг хуудсан дахь бүх
тухайн элементийг сонгох тохиолдолд хэрэглэнэ.
ID selector-ийг зөвхөн ганц элементийн CSS-г тодорхойлох
шаардлагатай тохиолдолд ашиглана.
Class selector-ийг хуудасны олон(гэхдээ бүгд биш) элементүүдэд ижил
CSS тодорхойлох үед ашиглана.
Group буюу нэгтгэсэн selector-ийг хэд хэдэн selector-ууд ижил CSS
тодорхойлох шаардлагатай үед ашиглана.
Descendant selector тухайн элемент дотор байрлаж буй тодорхой
элементийг сонгож, CSS-ийг тодорхойлох шаардлагатай үед хэрэглээрэй.
Universal selector мэдээж тухай хуудасны/descendent selector-той хамт/
бүх элементэд ашиглагдах CSS тодорхойлох үед ашиглана.
28
- 29. CSS ашиглагдах дараалал
Нэг элементийн CSS-г хэдэн ч удаа тодорхойлох боломжтой.
style – атрибут ашиглан болон
<style> тааг дотор
Гадаад хэлбэрийн CSS дотор
Нэг элементэд давхардсан declaration-уудын алийг нь броузер
ашиглах вэ?
Тухайн элементтэй хамгийн “ойр” тодорхойлсныг нь ашиглана.
Элемент Элемент доторх зарлагаа
Хуудас доторх зарлагаа
Гадаад хуудас доторх зарлагаа
Хамгийн сүүлд бичигдсэн нь өмнөх давхардсан declaration-уудаа
дарна.
29
- 30. CSS property – text-align
text-align: Элемент доторх текст аль талруугаа шахаж
байрлах буюу зэрэгцүүлэлт ямар байхыг заах property
Авах утгууд /value/:
left: Зүүн тийш зэрэгцүүлэлт хийнэ.
center: Дунд зэрэгцүүлэлт хийнэ.
right: Баруун тийш зэрэгцүүлэлт хийнэ.
justify: Баруун, зүүн талруу зэрэгцүүлэлт хийнэ.
inherit: Агуулагдаж буй элементийн text-align property –гийн утгыг
авна.
text-align: left text-align: right text-align: center text-align: justify
30
- 31. CSS property – background-color
background-color - Элементийн дэвсгэр өнгийг
тодорхойлно.
Утгыг өнгөний нэр, 16-тын код, RGB кодоор өгөх
боломжтой.
body{
background-color: #FFFFFF;
}
Хуудасны дэвсгэр өнгийг цагаан болгож байна.
p{
background-color: #000000;
}
p таагийн дэвсгэр өнгийг хар болгож байна.
31
- 32. <div> тааг
CSS ашиглан хуудасны дизайн гаргахад хамгийн чухал үүрэгтэй
тааг бол div юм.
div таагийн үндсэн үүрэг нь вэб хуудсыг block буюу хэсгүүдэд
хуваах
block төрлийн элемент
<div style="background-color:gray; color:white; width:300px; height:80px; text-
align:center">
Div #1
</div>
32
- 33. CSS box model
CSS ашигладаг дизайнер бүхэн Box Model-ийн тухай зайлшгүй
мэдэх хэрэгтэй
CSS-д бүх элемент тэгш өнцөгт дотор агуулагддаг ба тухайн
элементийн дотор бичигдсэн агуулгын хэмжээнээс хамаарч өргөн,
өндрийн хэмжээ нь тодорхойлогддог.
width, height property-г ашиглаж өргөн өндрийн хэмжээг тодорхойлж болно.
Энэ текстийн урт элементийн өргөнийг тодорхойлно.
width: 500px
33
- 34. CSS box model
• Content – Элемент дотор бичигдсэн агуулга
• Padding – Агуулга, хүрээ хоорондын зай
• Border – Элементийн хүрээ
• Margin – Элементийн хүрээ гадна талаасаа авах зай
34
- 35. CSS box model
Элементийн хэмжээ нь өөрийн хэмжээ, padding, border, margin хэмжээний
нийлбэрээр тодорхойлогддог.
500px өргөнтэй элементийн padding-г 20px хэмжээтэй, 5px border-той гэсэн хэмжээ
тавьбал элементийн өргөн 5+20+500+20+5 = 550px болж нэмэгдэх юм.
35
- 36. CSS тайлбар бичих
HTML кодонд тайлбар бичдэгтэй адил CSS кодонд тайлбар
бичиж болно.
CSS кодонд тайлбар бичихдээ
/* Тайлбар */
Хэдэн ч мөр тайлбар байж болно.
/*
Style sheet for [web site]
Created by [author name]
Notes
*/
36
- 37. margin, padding хэмжээг тодорхойлох
padding, margin хэмжээнүүдийг CSS ашиглан хялбархан тодорхойлж
болдог.
body{
margin: 0;
padding: 0;
}
Бүх элементийн margin, padding хэмжээг тодорхойлох
Броузерууд элементүүдийг дүрслэхдээ margin, padding хэмжээг анхнаасаа
тохируулж өгч дүрсэлдэг. Энэ хэмжээ нь броузер бүрээс шалтгаалан өөр өөр
байна.
Иймээс хуудасны CSS-г тодорхойлох бүртээ
*{
margin: 0;
padding: 0;
}
гэж эхлүүлж заншаарай.
37
- 38. CSS зарлагааны богино хэлбэр/ Shorthand
• padding, border, margin хэмжээнүүдийг элементийн дөрвөн тал тус
бүрээр гаргах боломжтой.
• margin-top
• padding-left
• border-bottom гэх мэт
• Өмнөх хуудсанд үзүүлсэн CSS ашигласан жишээ нь CSS зарлагааны богино
хэлбэр юм. Хэрэв бүх элементийн margin хэмжээг богино хэлбэр
ашиглахгүйгээр тодорхойлж өгвөл доорх байдалтай бичигдэнэ.
*{
margin-top: 0; *{
margin-right: 0; = margin: 0;
margin-bottom: 0; }
margin-left:0;
}
38
- 39. CSS зарлагааны богино хэлбэр/ Shorthand
CSS-ийн богино хэлбэрийг ашиглах нь цаг хэмнэх, кодын бичиглэлийг
багасгах зэрэг давуу талыг олгодог.
Box төрлийн элементүүдэд CSS богино хэлбэрийг хэрхэн ашиглах
талаар тайлбарлая.
Дан утга: 4 талд хэрэглэгдэнэ.
margin: 10px;
Хос утга: Эхний утга нь дээд, доод талуудад, удаах утга нь баруун, зүүн
талуудад ашиглагдана.
margin: 10px 20px;
3 утга: 1дэх утга нь дээд талд, 2 дахь утга нь баруун, зүүн талуудад, 3
дахь утга нь доод талын хэмжээг тодорхойлоход ашиглагдана.
margin: 10px 20px 30px;
4 утга: Цагийн зүүний чиглэлийн дагуу 4 талуудад ашиглагдана.
1 дээд, 2 баруун, 3 доод, 4 зүүн
margin: 10px 20px 30px 40px;
padding, border хэмжээ өгөхөд мөн адил хэрэглэгдэнэ.
39
- 40. CSS property - border
border: Элементийн хүрээг тодорхойлно.
border-top – Дээд талын хүрээ
border-bottom – Дooд талын хүрээ
border-left – Зүүн талын хүрээ
border-right – Баруун талын хүрээ
Талуудын хүрээ тус бүрийн хувьд доорх property-г ашиглах
боломжтой.
border-color: - Хүрээний өнгө
border-style: - Хүрээ шугамны төрөл
value: solid, dotted, dashed, double…
border-width: - Хүрээний өргөн
Элементийн 4 талын хүрээ ижил бол зөвхөн border property-г
тодорхойлоход хангалттай.
40
- 41. CSS property – font-family
font-family property-г ашиглан элементэд ашиглах фонтыг
тохируулж өгнө.
Уг property-ны утгад фонтын нэрүүдийг жагсаалт хэлбэрээр өгөх ба ашиглахыг хүссэн
фонтоо жагсаалтын хамгийн эхэнд бичнэ.
font-family: font1, font2 .. fontN
Хэрэв хэрэглэгчийн компьютер дээр эхний фонт суугаагүй бол жагсаалтын дараагийн
фонтыг хэрэглэгчийн компьютерт байгаа эсэхийг шалгана. Суусан бол уг фонтоор
харуулна. Суугаагүй бол дараагийн фонтыг хайх гэсэн алхамууд давтагдана.
Иймээс жагсаалтын төгсгөлд generic фонтыг тавина.
Хамгийн өргөн ашиглагддаг ерөнхий фонт бол serif, sans-serif, monospace зэрэг
фонтууд юм.
Бичигдэх хэлбэр:
selector {
font-family: сонгосон фонт 1, сонгосон фонт 2, сонгосон фонт 3, Ерөнхий
фонт;
}
41
- 42. CSS property – font-family
Хэд хэдэн үггээс бүрддэг фонтын нэрийг хашилтан хийж оруулж
өгнө.
“Times New Roman”
“Monotype Corsiva”
h1 {
font-family:Arial,Helvetica, sans-serif;
}
p{
font-family: Georgia, "Times New Roman", Times, serif;
}
pre{
font-family: Courier, "Courier New", Monaco, monospace;
}
42
- 43. Fixed болон Liquid Design
Fixed design
Fixed буюу тогтсон хэмжээтэй загвар ашиглаж буй тохиолдолд дэлгэцийн
хэмжээнээс үл хамааран байнга ижил хэмжээтэй харагдана.
Тогтсон хэмжээтэй загвар ашиглахын давуу тал нь элементүүдийг яг хүссэн
газартаа байрлуулах боломжийг олгодог.
Сул тал нь дэлгэцийн хэмжээг дагаж өөрчлөгдөхгүй учир хэт өндөр
нягтаршилтай дэлгэц бүхий хэрэглэгчийн дэлгэцэнд хэт их хоосон зай
харагдуулах, нягтаршил багатай дэлгэцэнд хэт том харагдаж босоо, ялангуяа
хөндлөн scroll-той болж харагддаг.
43
- 44. Fixed болон Liquid Design
Liquid design
Тогтсон хэмжээ бүхий загвар ашиглаж буй үед гардаг дээрх сул
талуудыг liquid буюу хэмжээ нь дэлгэцийн хэмжээнээс хамааран
хувьсдаг загварыг ашигласнаар арилгаж болно.
Дэлгэцийн хэмжээнээс хамаарч хэмжээ нь өөрчлөгдөх учир энэ
загварыг ашиглаж буй үед элементүүдийг pixel хэмжээгээр яг хүссэн
газраа байрлуулах боломжгүй болдог.
44
- 45. Fixed болон Liquid Design
Аль дизайныг нь ашиглах вэ?
Тэгэхээр хийх гэж буй сайтны тань агуулгыг ерөнхийдөө текст
эзэлдэг бол liquid загварыг ашиглах нь тохиромжтой.
Харин сайтад зураг ихээр ашиглагддаг бол fixed загварыг нь
ашиглах нь тохиромжтой.
45
- 46. Вэб хуудасны дизайн гаргах
• Fixed, liquid аль ч загварыг сонгосон байсан ч ялгаагүй div
таагийг ашиглана.
• Div бүр харгалзах id(зарим тохиолдолд класс)-тай байна.
• Хуудасны үндсэн бүтцийг гаргахын тулд хэд хэдэн div тааг
хэрэгтэй болно.
• Хуудасны бүх агуулгыг дотроо байрлуулах нэг агуулагч div
хэрэгтэй.
• Ийм div-т вэб дизайнерууд ихэвчлэн wrapper гэсэн id өгч
ашигладаг.
46
- 47. Вэб хуудасны дизайн гаргах
XHTML 1.0 файлд байх үндсэн DTD зарлагаа, үндсэн
таагуудыг бичнэ.
body таагийг нээсний дараагаар div таагийг id=“wrapper”
гэсэн атрибуттайгаар нэмнэ.
<div id="wrapper">
...
</div>
CSS файл үүсгэнэ. Үүсгэсэн файлаа вэб хуудастайгаа
холбоно.
CSS файлдаа мөн хэд хэдэн эхлэл мөрүүдийг нэмнэ.
• body таагийг тодорхойлох, бүх элементэд зориулсан зарлагаа гэх мэт
#wrapper элементэд зориулж хэд хэдэн дүрмүүд бичнэ.
47
- 48. Вэб хуудасны дизайн гаргах
• wrapper элементийн CSS зарлагаа
• Элементийн агуулга хүрээтэйгээ наалдсан мэт харагдуулахгүйн
тулд padding хэмжээ өгнө.
• Элементийн өргөнийг тодорхойлно.
• Margin property-г ашиглаж элементийг броузерын хаана
байрлуулахаа сонгоно.
• margin: 0 auto; гэж зарласнаар элементийн дээд, доод
талаас margin зайнууд 0 болж, баруун зүүн талаас авах
margin хэмжээ дэлгэцийн хэмжээнээс хамаарч автоматаар
голлож байрлана.
#wrapper {
padding: 18px;
background: #ffffff;
width:500px;
margin:0 auto;
}
48
- 49. Жишээ
Өнөөдрийн хичээлээр үзсэн зүйлүүдээ ашиглан доорх загварыг гаргаж
үзье.
49
- 50. Жишээ
Өмнөх хуудасны дизайныг өөрчлөн доорх байдалтай
харагддаг болгож үзье
50
- 51. <marquee> таг
marquee таг дотор бичигдсэн агуулга нь аль нэг чиглэлийн дагуу,
тодорхой хурдтайгаар урсан хөдөлдөг.
Урсах чиглэл, хурд зэргийг тохируулж өгдөг.
marquee таагийн атрибутууд:
scrollamount – Урсах мэдээллийн хурдыг тохируулж өгнө.
loop – Хэдэн удаа урсан өнгөрөхийг тохируулна. Хэрэв -1 гэдэг
утга өгвөл хязгааргүй удаа давтан урсан өнгөрнө.
direction – Аль чиглэлрүү урсахыг зааж өгнө.
Авах утгууд нь: up down left right
width – Өргөнийг нь тохируулж өгнө
heigth - Өндрийг нь тохируулж өгнө
<marquee scrollamount = “15” loop = “- 1” direction = “up”>Some text
here! </marquee>
51
- 54. Танилцуулга сайт хийх
Танилцуулга сайтыг fixed буюу тогтсон хэмжээ бүхий
загвартай байхаар сонгож авлаа.
Зураг их ашиглана.
Хуудасны агуулга нь броузерын голд байрлаж харагдана.
Тэгэхээр бүх элементийн агуулагч болж ашиглагдах, тогтсон
хэмжээ бүхий броузерын голд байрлах div элемент үүсгэхээс
ажлаа эхлэе.
wrapper
54