Толгойн хэсэг.
Хичээлээ сайтын толгойн хэсгийг кодлохоос эхлэе. Толгойн хэсэг хамгийн энгийн амархан хэсэг гэдгийг index.html хэсгийн кодоос ч тэр PSD макетаас ч харсан тодорхой. Кодын хэсгийг харуулбал.
<div id="header">
<div id="logo">
<h1><a href="#home" title="Home Page">E-surgalt.com</a></h1>
<h2>ONLINE LEARNING</h2>
</div>
</div>Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 2394 Төлбөртэй
Сайтын удирдах цэсийг хийснээр агуулгын блокийн эхний хэсгийг кодолж дууссан. Одоо бид агуулгын контейнерын хоёрдахь хэсэг болох блог болон твиттерийн хэсэгт орно. Энэ хэсэг бол манай PSD макетын
хэсэг юм. Html кодод id="page-wrapper" блокийн араас байрлах ба хөтөч дээр блокууд ердийн урсгалаар байрласан байгаа.
Нээгдсэн тоо: 8432 Нийтийн
Магадгүй та CSS-ийн тухай сонссон хэдий ч чухам юу гэдэг талаар мэдэхгүй байж болно. Тэгвэл энэ хичээлээр CSS гэж юу болох, юуг хийж чадах талаар үзэх болно. CSS гэдэг нь Cascading Style Sheets үгний товчлол. Та HTML хэлний хичээлүүдээс энэ нь веб хуудсыг хэлбэржүүлэх хэл гэдгийг мэдсэн. Хэлийг зохиогчид сайт үүсгэх ажиллагааг сайжруулахын тулд HTML хэлэнд сайтын гадаад төрхийг хэлбэржүүлэх <font>, <b>, <i>, <bgcolor> гэх мэтийн олон төрлийн элементүүд болон параметрүүдийг нэмсээр ирсэн. Гэтэл энэ нь тодорхой хугацааны дараа сайтын кодыг уншигдах болон хэмжээний талаасаа хэтэрхий нүсэр болгосон нь энэ замаар хол явахгүй гэдгийг ойлгомжтой болгосон. Ингээд хуудасны бүтцийг (HTML) түүний харагдах хэлбэрийг тодорхойлогчоос (CSS) салгах шийдэлд хүрсэн байна. HTML ба CSS -ын хослол гайхамшгийг бүтээдэг гэдэгтэй бид удахгүй танилцах болно.
Нээгдсэн тоо: 2150 Төлбөртэй
Бид өмнөх хичээлээр сайтын дээд хэсэгт хэрэгтэй зургуудыг PSD макетаас үүсгэн авсан болохоор дээд хэсгийн CSS кодчлолыг эхлэх цаг нь болсон. Өмнөх хичээл танд фотошоп программыг ашиглах дадлагын сайн хичээл болсон гэдэгт найдаж байна. За ингээд хичээлдээ орцгооё.
Дээд хэсгийг кодчлол
Сануулахад сайтын дээд хэсгийн html код
<div id="status-bar">
<div id="status-bar-content">
<form action="#search" method="post" id="search-form">
<p>
<input type="text" name="query" value="Хайлт" />
<input type="submit" name="submit" value="Хайлт!" />
</p>
</form>
<div id="status-bar-commands">
<p id="welcome">Тавтай морил, Зочин</p>
<p id="action-bar">
<a href="#login" title="Login">Нэвтрэх</a>
<a href="#sitemap" title="Sitemap">Сайтын карт</a>
<a href="#license" title="License">Лиценз</a>
</p>
</div>
</div>
</div>Нээгдсэн тоо: 1414 Төлбөртэй
Хэрвээ та ямар нэгэн зургийн программ дээр ажиллаж чаддаг бол энэ ойлголтыг та мэдэх байх. Бусад хүмүүст тайлбарлая. Ямар нэгэн юм бичсэн эсвэл зурсан олон тооны цаасан хуудас байна гээд бодъё. Бид зөвхөн эхний хуудас дээрх агуулгыг л харах болно. Хэрвээ эхний хуудсыг авчихвал дараагийн хуудсны агуулгыг харна гэх мэтээр. Үүний адилаар CSS -д бид хэд хэдэн үе үүсгээд үе бүрдээ хэрэгтэй элементүүдээ байршуулаад тэдгээрийг z-index шинжийн тусламжтайгаар дугаарлан өгч болдог. Үеийн дугаар их байх тусам тухайн үе давхрагад дээгүүр байрлана. Жишээ нь бид 6 үе хийсэн байхад хэрэглэгч эхлээд z-index:6 үеийг харах юм. Үеийг дэлгэгдэх цэсийг хийхэд ихэнхдээ ашигладаг.