Энгийн хэвтээ цэс
Сайтын загварт цэс том үүрэгтэй. Энэ хичээлээр энгийн хэвтээ цэсийг хэрхэн хийхийг авч үзэх юм. Цэсийг хийхдээ энгийн аргуудыг ашиглах бөгөөд үр дүнд нь бүх хөтөч дээр зөв ажилладаг цэсийг гарган авах болно. Ингээд хичээлээ эхлэе.
Цэсний нэрүүдийн жагсаалтыг гаргая. Манай цэс "Нүүр", "Мэдээ", "Бүтээгдхүүн", "Үйлчилгээ", "Загварууд", "Холбоо" гэсэн хэсгүүдийг агуулж байна гэж үзье. Эхлээд Dreamweawer эсхүл текст засварлагч Notepad зэрэг програмыг ашиглан menu.html нэртэй файлыг үүсгэнэ. Би ихэнхдээ Notepad++ програмыг ашигладаг.
Програм нь олон боломжтойн дээр энгийн, ашиглахад хялбар, файлд ямар нэгэн илүү зүйл оруулдаггүй, програмын ихэнх хэлний бичлэгийн дүрмийг дэмждэг давуу талуудтай. Файл body тегд цэсээ байршуулна. Энэ нь ердийн тэмдэглэгээ бүхий ul элементийн жагсаалт байна. 
Мэдээжээр цэсний пункт бүрийг холбоос байдлаар хийх ба энд дамжих URL -д # тэмдэгтийг тавина. Та энд өөрийн сайтын бодит холбоосын хаягийг оруулан өгөөрэй. Photoshop програмыг ашиглан 3х30 px хэмжээтэй градиент дүүргэлттэй зургийг үүсгэн өгнө. Зургаа bg.gif нэртэй файлд хадгална. Зураг нь манай цэсний дэвсгэр дүрсний үүргийг гүйцэтгэх юм.
Сайт хийж сурахын тулд та Photoshop програмыг боломжийн хэмжээнд ашиглаж чаддаг байх хэрэгтэйн дээр Html, Css хэлийг сайн эзэмшсэн байх хэрэгтэй. Эдгээрийг судалсан байхад статик хуудас үүсгэх боломжтой. Хэрвээ та динамик өөрөөр хэлбэл хуудсыг програм ашиглан үүсгэхийг хүсвэл дээр нь Php, Javascript хэлүүд түүнчлэн өгөгдлийн санг удирдах SQL хэлийг сурах хэрэгтэй болно. Сайт бүтээх өөр олон төрлийн хэл, технологууд байдаг ба эхний ээлжинд сайтад тавигдсан хичээлүүдийг үзэн суурь мэдлэгтэй болбол цааш судлахад дөхөмтэй байна. За ингээд menu.html файл доорх агуулгатай байх юм.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Энгийн хэвтээ цэс</title>
<meta name="copyright" content="//e-surgalt.com" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!-- цэсний эхлэл -->
<ul>
<li><a href="#">Нүүр</a></li>
<li><a href="#">Мэдээ</a></li>
<li><a href="#">Бүтээгдхүүн</a></li>
<li><a href="#">Үйлчилгээ</a></li>
<li><a href="#">Загварууд</a></li>
<li><a href="#">Холбоо</a></li>
</ul>
<!-- цэсний төгсгөл -->
</body>
</html>Сайтын Html -ийн хичээлүүдийг үзсэн бол энд тайлбар хийгээд байх зүйл байхгүй. Одоо хуудсыг хэлбэржүүлэх хэвийн файлыг main.css нэрээр тусд нь үүсгэн өгнө. Файлын агуулгыг үзүүлбэл.
ul {
margin:0; /*алслалтыг тэглэх*/
padding:0; /*дотоод алслалтыг тэглэх*/
float:left; /*жагсаалтыг зүүн талд тэнцүүлэх*/
width:auto;/*жагсаалтын агуулга, төрлийг үндэслэн өргөнг авто гэж өгөх*/
background-image: url(bg.gif); /*дэвсгэр зургийг өгөх*/
background-repeat:repeat-x; /*зургийг хэвтээ чиглэлд давтах*/
list-style:none; /*жагсаалтыг тэмдэглэгээгүй болгох*/
background-color:#4778c3; /*зураг доорх дэвсгэрийн өнгийг өгөх*/
font-size:13px; /*фонтын хэмжээг өгөх*/
font-family:Arial, Helvetica, sans-serif; /*фонтын нэрийг өгөх*/
}
ul li {
float:left; /*жагсаалтын элеметүүдийг зүүн талд тэнцүүлэх*/
}
ul a {
display:block; /*цэсний холбоосуудыг блокийн элементүүд болгох*/
width:100px; /*блокийн өргөний хэмжээг өгөх*/
height:30px; /*блокийн өндөрийг өгөх*/
text-align:center; /*бичгийг төвд байршуулах*/
line-height: 2.1em; /*иөр хоорондын засвар*/
text-decoration:none; /*холбоосоос доогуур зураасыг арилгах*/
color:#fff; /*холбоосын текстийн өнгө - цагаан*/
border-right:#fff solid 1px; /*блокийн баруун талын хил (1px цагаан зураас)*/
}
ul a:hover {
color:#ccc; /*хулганы заагч дээр нь ирэхэд холбоосын өнгө солигдох*/
}Хэвийн файлын агуулгын тайлбарт шинжүүдийг дэлгэрэнгүй тайлбарласан болохоор энд асуудал үүсэхгүй гэж бодож байна. Цэсний ажиллагааг энэ файлд бичигдсэн шинжүүдээр зохицуулж байгаа учраас main.css файлын гүйцэтгэж байгаа үүргийг сайн ойлгон авах хэрэгтэй. Эцэст нь хэвийн файлаа menu.html файлтай холбон өгөхөө мартаж болохгүй.
<link rel="stylesheet" href="main.css" type="text/css">Ингээд боллоо. Үр дүнд нь бид орчин үеийн бүх хөтөч дээр ижилхэн харагдах бүрэн хэмжээний хөтөч хоорондын зөрчилгүй хэвтээ цэсийг гарган авлаа. Цэсний ажиллагаа IE 5.5 , IE 6.0 хөтөчүүд дээр буруу ажиллаж магадгүй. Гэхдээ одоо эдгээр хөтөчийг хэрэглэдэг хэрэглэгч бараг байхгүй болсон байх. Цэсний бүх элементүүдийг 100 px өргөнтэй 30px өндөртэй блок байдлаар үзүүлнэ. Цэсүүдийг блокоор үзүүлж байгаа болохоор бие биенээс нь тусгаарлахдаа блокийн баруун хүрээг 1px өргөнтэй цагаан өнгөөр тавин өгч байгаа. Энэ бол хэвтээ цэсүүдийг үзүүлэх хамгийн энгийн болоод сайн арга. Та хүсвэл үүнийг css шинжүүд, нэмэлт график элементүүдийг ашиглан илүү гоё, функционал сайтай болгох боломжтой. За ингээд бидний хийсэн хэвтээ цэс
гэж харагдах болно. Хичээлийг сайн уншин ойлгоод өөрөө хийж үзээрэй. Кодыг өөрөө бичвэл илүү үр дүнтэй байдагийг би байнга сануулж байгаа. Гэхдээ танд цаг зав бага эсхүл өөрөө бичмээргүй байвал файлыг татаад аваарай.
