Web design lecture 2

Вэб дизайн

Лекц №2

Агуулга
 Block болон Inline элементүүдийн тухай
 CSS, танилцуулга
 Текст хэвжүүлэх CSS property ашиглах
 Div тааг
 CSS property
 CSS box model
 Фонттой ажиллах
 Marquee тааг
 Танилцуулга сайт хийх хэсэг

2

Хичээл эхлэхийн өмнө...
 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

block, inline элементүүдийн ялгаа
 HTML элементүүдийг дэлгэцэнд дүрслэгдэх шинж
чанараар нь
 block
 inline
гэж ангилж болно.

 Block элемент
 Үргэлж шинэ мөрнөөс эхэлж байрлана.
 Өндөр, мөрний өндөр, дээр доороос авах зайг өөрчилж
болно.
 Өргөнийг нь тодорхойлж өгөөгүй тохиолдолд өргөн нь
агуулагчийнхаа өргөнөөр тодорхойлогддог.
 Дотроо block, inline элементүүдийг алийг нь ч агуулж болно.
 p, blockquote, h1 … h6, div, ul, ol, li, table, tr, td, th

4

block, inline элементүүдийн ялгаа

 Inline элемент
 Шинэ мөрнөөс эхэлж байрлахгүй.
 Өндөр, мөрний өндөр, дээр доороос авах зай нь
өөрчлөгддөггүй.
 Өргөн нь дотроо агуулж буй текст, зургийн хэмжээгээр
тодорхойлогддог.
 Дотроо inline элементийг агуулна.
 Block элементийн дотор агуулагдаж хэрэглэгдэнэ.
 a (anchor tag), em, strong, img

5

Түгээмэл хэрэглэгддэг атрибутууд
 id
 CSS, JavaScript ашиглахад хэрэглэгдэх ба элементүүдийн id
атрибутын утга давхардах ѐсгүй.

 class
 Өөр өөр элементүүдэд ашиглагдаж болох ба CSS-тэй хамт
хэрэглэгдэнэ.

 style
 Элементийн CSS дүрмийг бичиж болно

 title
 tool tip буюу тухайн элемент дээр хулгана очиход харагдах
текст

6

HTML ба CSS
 HTML нь зөвхөн вэб хуудасны агуулгыг бүтэцлэж харуулахад
зориулагдсан.
 HTML өргөн ашиглагдах болсны дараагаар вэб дизайнер болон вэб
хэрэглэгчдийн вэбийн харагдах байдлыг сайжруулахыг хүсэж эхэлсэн ба энэ
хүсэлтэд зориулсан шинэ html таагууд гарч ирсэн.
 Энэ нь HTML таагуудыг замбараагүй болгож эхэлсэн бөгөөд
таагууд логик бүтцийг гаргахаас гадна харагдах байдлыг
тодорхойлох үүрэгтэй болсон.
 Элементийн фонтыг тохируулах үүрэгтэй <font> тааг ашиглагдах болсон нь
фонтыг тохируулах хэрэгтэй газар болгонд уг таагийг бичих шаардлагатай
болсон.
 Ингэснээр кодын хэмжээ ихэсч, нэг ижил кодуудыг дахин дахин бичих,
өөрчлөлтийг олон газар хийх зэрэг хүч хөдөлмөр, цаг хугацаа үрсэн
асуудлуудыг үүсгэж байсан.

 Энэ асуудлыг шийдэхээр CSS буюу Cascading Style Sheet гарч
ирсэн.

7

CSS
 Тэгэхээр CSS-ийн гол зорилго нь HTML хуудасны агуулгаас нь
харагдах байдлыг тодорхойлсон хэсгийг нь салгаж тусад нь
кодчилох, шийдэх юм.

 Вэб хуудасны харагдах байдал, хэв маягийг гаргахад
зориулагдсан стандарт.

 Броузер HTML элементүүдийг хэрхэн харагдуулах, дүрслэх
тухай зааврыг CSS кодоос авна.

 Вэб хуудасныхаа дизайныг гаргахдаа CSS зайлшгүй ашиглах
хэрэгтэй.

8

CSS
 CSS-ийг хэрэглэх санаа нь анхнаасаа л ойлгомжтой, тодорхой байсан
боловч хэрэгжилт нь удаан байлаа.
 Ихэнх броузерууд маш цөөн тооны CSS дүрмүүдийг дэмждэг байлаа.
 Одоо сүүлийн үеийн бүх броузерууд CSS дүрмүүдийг дэмждэг болсон.
 Дараагийн асуудал нь хуучин байдлаараа бичиж сурсан
дизайнеруудыг CSS ашигладаг болгож сургах байлаа.

 CSS ашиглах нь дизайнеруудын ажлыг хөнгөвчлөхөөс гадна вэбийг үзэж
буй хэрэглэгчид ч ашиг тусаа өгдөг.
 Хуудасны ачаалагдах хугацааг илүү хурдан болгоно.

9

CSS ажиллах зарчим

+ CSS

10

CSS
 CSS нь элементүүдийг дүрслэхэд зориулагдсан
дүрмүүдээс тогтдог.
 Мөрдөхөд хялбархан
 Дүрэм/Rule/ бүр нь сонгогч/selector/ болон зарлагаа/declaration/
хэсгүүдээс бүрдэнэ.
 Хуудасны яг ямар элементийн харагдах байдлыг өөрчлөх вэ гэдгийг
selector ашиглаж сонгоно.
 Selector- бичих хэд хэдэн аргууд бий.
 Тухайн сонгож авсан элементээ хэрхэн харагдуулах вэ гэдгийг
declaration ашиглаж зааж өгнө.
 Declaration нь property:value буюу шинж чанар:утга гэсэн хэсгээс
тогтоно.

 Бичигдэх хэлбэр
 selector {
property: value ;
}

11

CSS
CSS declaration/зарлагаа бичихдээ
- Declaration-г угалзан хаалтан - {} дотор бичнэ.
selector { … }
 Нэг selector-т хэдэн ч declaration байж болно.
 Олон declaration-уудыг цэг-таслалаар( ; ) тусгаарлан бичнэ.
selector {
property1: value1;
property2: value2;
…
propertyN: valueN;
}

12

CSS дүрмийг хаана бичих вэ?

 CSS дүрмүүдийг 3 өөр хэсэгт бичиж болно.
1. HTML элемент дотор
2. Тухайн хуудасны style тааг дотор
3. Тухайн хуудаснаас тусад нь үүсгэсэн css өргөтгөлтэй файл дотор

13

1. HTML элемент дотор
 Элементийн нээх тааг дотор style атрибутын утга болгон
бичих
 Зөвхөн тухайн элементийн хувьд ашиглагдана.

<p style=“property1:value1; property2: value2; … “ >
Энэ бол CSS ашигласан тааг
</p>

14

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

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 …

CSS - Зөвлөгөө

CSS property нь том жижиг үсгийг
ялгаатайд тооцдоггүй боловч үргэлж жижиг
үсэг ашиглаж байгаарай.

17

CSS selector-ийн төрлүүд

CSS selector

HTML
Class Id Descendant Group Universal
элемент
selector selector selector selector selector
selector

18

CSS selector-ын төрлүүд
 HTML элемент selector :
 HTML таагийн нэрээр нь сонгоно.
p{
property: value;
}

h1{
property: value;
}

body{
property: value;
}

19

Color property
 color - Текстийн өнгийг тодорхойлох property
Өнгөний утгыг
 өнгөний нэрээр
 16-тын утгаар
 RGB горимын утгаар
өгөх боломжтой.
 Доорх жишээнүүд paragraph(<р> таагны) текстийн өнгийг цэнхэр
болгоно.
p{
color: blue;
}
p{
color:#0000FF;
}
p{
color: rgb(0,0,255);
}

20

CSS selector
 Class selector
 Зарим тохиолдолд бүлэг элементүүдийн харагдах байдлыг
тодорхойлохыг хэрэг гарч болно.
 Өмнөх жишээнд үзүүлсэн шиг бүх <p>-ийг цэнхэр өнгөтэй биш
заримыг нь ногоон өнгөтэй харагдуулахыг хүсэж болох юм.
 Үүнийг сlass selector ашиглан хялбархан шийдэж болно.
.className { property: value; … }

 Класс зарлахдаа цэгээр эхлүүлнэ.
 Классыг өөрийн хүссэнээр нэрлэж болно

.warning{
color:green
}

21

CSS selector
 Class selector
 Бичсэн классаа HTML элементтэйгээ холбохдаа тухайн
таагийн class атрибутыг ашиглана.
<p class=“warning”>Энэ текст ногоон өнгөтэй харагдана.</p>
<h1 class=“warning”> Энэ текст ч мөн ногоон өнгөтэй харагдана. </h1>

 Олон үгнээс бүтсэн нэр ашиглаж байгаа тохиолдолд camel –
case хэлбэр ашиглах буюу хоѐрдох үгнээс эхлүүлэн үгнүүдийн
эхний үсгийг томоор бичиж заншаарай
 .warningText,
 .loginInputName

22

CSS selector
 Class selector
 Мөн нэг элемент хэд хэдэн классыг зэрэг ашиглаж болно.
Классуудын нэрний хооронд зай аван бичнэ.
.hugeText{
font-size:48px;
}
.warningText{
color:green;
}

 HTML-д ашиглах
<p class=“warningText hugeText”>Энэ текст ногоон бас том
харагдана.</p>

23

CSS selector
 Universal selector

 Бүх элементийг сонгоход хэрэглэгдэнэ.

 Бичигдэх хэлбэр:
*{
property: value;
}

* - Бүх элемент гэсэн утгатай.

24

CSS selector
 ID selector
 Тухайн хуудсанд классыг хэдэн ч удаа элементүүд дуудаж
ашиглах боломжтой байсан.
 Харин id-г зөвхөн ганц элемент л ашиглах боломжтой байдаг.
 Хуудасны header, footer, үндсэн цэс зэрэг нь ганц байхад л
хангалттай байдаг учир эдгээрийн харагдах байдлыг
тодорхойлохдоо id ашиглах нь тохиромжтой.
 Бичигдэх хэлбэр:
# нэр { property: value }

 id – зарлахдаа #-таар эхлүүлнэ.
#header{
color:yellow;
}
HTML-д ашиглах
<p id=“header”>Энэ бол header хэсэг</p>

25

CSS selector
 Descendant selector
 Нэгээс олон selector ашиглан элемент, элементээ агуулагдсан
байдлаас нь шалтгаалж сонгох
 Тухайн элементийн дотор агуулагдсан элементийг сонгохдоо
хоосон зайгаар тусгаарлана.
 selectorN selectorN … selectorN{
property: value;
}
 Өмнөх жишээнд үзүүлсэн классыг зөвхөн p тааг дотор бичигдсэн тааг л
ашиглах боломжтой гэж зааж өгөхийг хүсвэл descendant selector-ийг
ашиглана.
p .warningText{

}

26

CSS selector
 Group selector
 Хэд хэдэн selector-уудын дотор адил declaration бичигддэг
бол тэдгээрийг group selector ашиглан тодорхойлох
боломжтой.
 Selector-уудыг таслалаар тусгаарлан бичнэ.
selector1, selector2 ... selectorN{
property: value;
}

p, h1, h2, .hugeText, #header, p h4 {
color: blue;
}

27

CSS selector ашиглах
 Аль selector-ийг хэрэглэх вэ?
 HTML элементийн нэрээр нь сонгодог selector-ийг хуудсан дахь бүх
тухайн элементийг сонгох тохиолдолд хэрэглэнэ.

 ID selector-ийг зөвхөн ганц элементийн CSS-г тодорхойлох
шаардлагатай тохиолдолд ашиглана.

 Class selector-ийг хуудасны олон(гэхдээ бүгд биш) элементүүдэд ижил
CSS тодорхойлох үед ашиглана.

 Group буюу нэгтгэсэн selector-ийг хэд хэдэн selector-ууд ижил CSS
тодорхойлох шаардлагатай үед ашиглана.

 Descendant selector тухайн элемент дотор байрлаж буй тодорхой
элементийг сонгож, CSS-ийг тодорхойлох шаардлагатай үед хэрэглээрэй.

 Universal selector мэдээж тухай хуудасны/descendent selector-той хамт/
бүх элементэд ашиглагдах CSS тодорхойлох үед ашиглана.
28

CSS ашиглагдах дараалал
 Нэг элементийн CSS-г хэдэн ч удаа тодорхойлох боломжтой.
 style – атрибут ашиглан болон
 <style> тааг дотор
 Гадаад хэлбэрийн CSS дотор

 Нэг элементэд давхардсан declaration-уудын алийг нь броузер
ашиглах вэ?
 Тухайн элементтэй хамгийн “ойр” тодорхойлсныг нь ашиглана.

Элемент Элемент доторх зарлагаа

Хуудас доторх зарлагаа

Гадаад хуудас доторх зарлагаа
 Хамгийн сүүлд бичигдсэн нь өмнөх давхардсан declaration-уудаа
дарна.

29

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

CSS property – background-color
 background-color - Элементийн дэвсгэр өнгийг
тодорхойлно.
 Утгыг өнгөний нэр, 16-тын код, RGB кодоор өгөх
боломжтой.
body{
background-color: #FFFFFF;
}
 Хуудасны дэвсгэр өнгийг цагаан болгож байна.
p{
background-color: #000000;
}
 p таагийн дэвсгэр өнгийг хар болгож байна.

31

<div> тааг
 CSS ашиглан хуудасны дизайн гаргахад хамгийн чухал үүрэгтэй
тааг бол div юм.
 div таагийн үндсэн үүрэг нь вэб хуудсыг block буюу хэсгүүдэд
хуваах
 block төрлийн элемент

<div style="background-color:gray; color:white; width:300px; height:80px; text-
align:center">
Div #1
</div>

32

CSS box model
 CSS ашигладаг дизайнер бүхэн Box Model-ийн тухай зайлшгүй
мэдэх хэрэгтэй
 CSS-д бүх элемент тэгш өнцөгт дотор агуулагддаг ба тухайн
элементийн дотор бичигдсэн агуулгын хэмжээнээс хамаарч өргөн,
өндрийн хэмжээ нь тодорхойлогддог.
 width, height property-г ашиглаж өргөн өндрийн хэмжээг тодорхойлж болно.

Энэ текстийн урт элементийн өргөнийг тодорхойлно.

width: 500px

33

CSS box model

• Content – Элемент дотор бичигдсэн агуулга
• Padding – Агуулга, хүрээ хоорондын зай
• Border – Элементийн хүрээ
• Margin – Элементийн хүрээ гадна талаасаа авах зай

34

CSS box model

 Элементийн хэмжээ нь өөрийн хэмжээ, padding, border, margin хэмжээний
нийлбэрээр тодорхойлогддог.
 500px өргөнтэй элементийн padding-г 20px хэмжээтэй, 5px border-той гэсэн хэмжээ
тавьбал элементийн өргөн 5+20+500+20+5 = 550px болж нэмэгдэх юм.

35

CSS тайлбар бичих
 HTML кодонд тайлбар бичдэгтэй адил CSS кодонд тайлбар
бичиж болно.
 CSS кодонд тайлбар бичихдээ
/* Тайлбар */

 Хэдэн ч мөр тайлбар байж болно.
/*
Style sheet for [web site]
Created by [author name]
Notes
*/

36

margin, padding хэмжээг тодорхойлох
 padding, margin хэмжээнүүдийг CSS ашиглан хялбархан тодорхойлж
болдог.
body{
margin: 0;
padding: 0;
}

 Бүх элементийн margin, padding хэмжээг тодорхойлох
 Броузерууд элементүүдийг дүрслэхдээ margin, padding хэмжээг анхнаасаа
тохируулж өгч дүрсэлдэг. Энэ хэмжээ нь броузер бүрээс шалтгаалан өөр өөр
байна.
 Иймээс хуудасны CSS-г тодорхойлох бүртээ
*{
margin: 0;
padding: 0;
}
гэж эхлүүлж заншаарай.

37

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

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

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

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

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

Fixed болон Liquid Design
 Fixed design
 Fixed буюу тогтсон хэмжээтэй загвар ашиглаж буй тохиолдолд дэлгэцийн
хэмжээнээс үл хамааран байнга ижил хэмжээтэй харагдана.

 Тогтсон хэмжээтэй загвар ашиглахын давуу тал нь элементүүдийг яг хүссэн
газартаа байрлуулах боломжийг олгодог.

 Сул тал нь дэлгэцийн хэмжээг дагаж өөрчлөгдөхгүй учир хэт өндөр
нягтаршилтай дэлгэц бүхий хэрэглэгчийн дэлгэцэнд хэт их хоосон зай
харагдуулах, нягтаршил багатай дэлгэцэнд хэт том харагдаж босоо, ялангуяа
хөндлөн scroll-той болж харагддаг.

43

Liquid design
 Тогтсон хэмжээ бүхий загвар ашиглаж буй үед гардаг дээрх сул
талуудыг liquid буюу хэмжээ нь дэлгэцийн хэмжээнээс хамааран
хувьсдаг загварыг ашигласнаар арилгаж болно.

 Дэлгэцийн хэмжээнээс хамаарч хэмжээ нь өөрчлөгдөх учир энэ
загварыг ашиглаж буй үед элементүүдийг pixel хэмжээгээр яг хүссэн
газраа байрлуулах боломжгүй болдог.

44

Аль дизайныг нь ашиглах вэ?

 Тэгэхээр хийх гэж буй сайтны тань агуулгыг ерөнхийдөө текст
эзэлдэг бол liquid загварыг ашиглах нь тохиромжтой.

 Харин сайтад зураг ихээр ашиглагддаг бол fixed загварыг нь
ашиглах нь тохиромжтой.

45

Вэб хуудасны дизайн гаргах
• Fixed, liquid аль ч загварыг сонгосон байсан ч ялгаагүй div
таагийг ашиглана.
• Div бүр харгалзах id(зарим тохиолдолд класс)-тай байна.

• Хуудасны үндсэн бүтцийг гаргахын тулд хэд хэдэн div тааг
хэрэгтэй болно.

• Хуудасны бүх агуулгыг дотроо байрлуулах нэг агуулагч div
хэрэгтэй.
• Ийм div-т вэб дизайнерууд ихэвчлэн wrapper гэсэн id өгч
ашигладаг.

46

 XHTML 1.0 файлд байх үндсэн DTD зарлагаа, үндсэн
таагуудыг бичнэ.
 body таагийг нээсний дараагаар div таагийг id=“wrapper”
гэсэн атрибуттайгаар нэмнэ.
<div id="wrapper">
...
</div>
 CSS файл үүсгэнэ. Үүсгэсэн файлаа вэб хуудастайгаа
холбоно.
 CSS файлдаа мөн хэд хэдэн эхлэл мөрүүдийг нэмнэ.
• body таагийг тодорхойлох, бүх элементэд зориулсан зарлагаа гэх мэт
 #wrapper элементэд зориулж хэд хэдэн дүрмүүд бичнэ.

47

• wrapper элементийн CSS зарлагаа
• Элементийн агуулга хүрээтэйгээ наалдсан мэт харагдуулахгүйн
тулд padding хэмжээ өгнө.
• Элементийн өргөнийг тодорхойлно.
• Margin property-г ашиглаж элементийг броузерын хаана
байрлуулахаа сонгоно.
• margin: 0 auto; гэж зарласнаар элементийн дээд, доод
талаас margin зайнууд 0 болж, баруун зүүн талаас авах
margin хэмжээ дэлгэцийн хэмжээнээс хамаарч автоматаар
голлож байрлана.

 #wrapper {
 padding: 18px;
 background: #ffffff;
 width:500px;
 margin:0 auto;
 }

48

Жишээ
 Өнөөдрийн хичээлээр үзсэн зүйлүүдээ ашиглан доорх загварыг гаргаж
үзье.

49

Жишээ
 Өмнөх хуудасны дизайныг өөрчлөн доорх байдалтай
харагддаг болгож үзье

50

<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

Танилцуулга сайт хийх


53

 Танилцуулга сайтыг fixed буюу тогтсон хэмжээ бүхий
загвартай байхаар сонгож авлаа.
 Зураг их ашиглана.

 Хуудасны агуулга нь броузерын голд байрлаж харагдана.

 Тэгэхээр бүх элементийн агуулагч болж ашиглагдах, тогтсон
хэмжээ бүхий броузерын голд байрлах div элемент үүсгэхээс
ажлаа эхлэе.
 wrapper

54

Даалгавар, бие даалтаа хийж, сорилын
асуултуудаар өөрийгөө
шалгаарай.

Танд амжилт хүсье


55

Web design lecture 2

More Related Content

What's hot

Viewers also liked

Similar to Web design lecture 2

Web design lecture 2