Tableless Layouts Шинэ дизайн м рийг нээг
Байршлын хувьд хүснэгт хэрэглэхгүй байх олон шалтгаан бий. Тэдгээрийг үргэлжлүүлэн ашиглахын тулд хүмүүст өгдөг хамгийн түгээмэл шалтгаануудын нэг нь CSS-ийн байршлыг тогтооход хэцүү байдаг. Хэдийгээр CSS скрипт нь суралцах муруйг агуулдаг боловч CSS-ийн зохион байгуулалтыг хэрхэн ойлгох талаар ойлгоход амархан хэдий ч танд гайхах болно. Хэрвээ та суралцаж байхдаа CSS-г ашиглахгүй бол хүмүүст өгөх хоёр дахь хамгийн нийтлэг шалтгааныг харуулсан болно. "Хүснэгтийг бичихэд хурдан байдаг." Хүснэгтийг мэддэг учраас хурдан байдаг, гэхдээ та CSS-г сурч чадвал та хурдан тэр нь.
CSS байршлын дэмжлэгтэй
CSS байршил нь бүх орчин үеийн хөтчүүдэд сайнаар дэмжигддэг. Хэрэв та Netscape 4 эсвэл Internet Explorer 4 сайтыг бүтээж байгаа бол таны уншигчид CSS-байрласан вэб хуудсыг үзэх ямар ч асуудалгүй байх ёстой.
Та хэрхэн хуудас бүтээх талаар эргэцүүлэн бодох
Хүснэгтүүдийг ашиглан сайт үүсгэх үед та хүснэгтэн хэлбэрээр бодож үзэх хэрэгтэй. Өөрөөр хэлбэл, та эс, мөр, баганын талаар бодож байна. Таны вэбсайтууд энэ аргыг тусгах болно. CSS байршлын дизайн руу шилжихдээ, та агуулгаараа хуудсуудынхаа талаар бодож эхлэх болно. Учир нь агуулгаа байршлынхаа хаана ч байрлуулж болно, тэр ч байтугай бусад агуулгын дээд талд байрлуулагдсан.
Өөр өөр вэбсайт өөр өөр бүтэцтэй. Үр дүнтэй хуудсыг бүтээхийн тулд өгөгдсөн агуулгаас бүтсэн өгөгдлийг бүтээхээс өмнө үнэлгээ хийх. Жишээ хуудсанд таван ялгаатай хэсгүүдийг оруулж болно:
- Толгой . Баннерын зар сурталчилгаа, сайтын нэр, холбоосын холбоос, нийтлэлийн гарчиг болон цөөхөн хэдэн зүйлсийг оруулна уу.
- Баруун багана . Энэ бол хайлтын хайрцаг, зар сурталчилгаа, видео хайрцаг, дэлгүүрийн талбайн баруун тал юм.
- Агуулга . Өгүүлбэр, блог шуудангаар эсвэл дэлгүүрийн тэрэг - хуудасны мах, төмс.
- Интернэт зар . Контентын дотор байгаа зар сурталчилгаа.
- Footer . Хамгийн доод навигацийн, зохиогчын мэдээлэл, зохиогчийн эрхийн мэдээлэл, доод баннерын сурталчилгаа, холбогдох холбоосууд.
Эдгээр таван элементийг хүснэгтэд оруулахын оронд HTML5 селекцийн элементийг агуулгын өөр өөр хэсгүүдийг тодорхойлохын тулд ашиглаж, дараа нь хуудсан дээрх агуулгын элементүүдийг байрлуулахын тулд CSS байрлалыг ашигла.
Агуулгын хэсгүүдийг таних
Та өөрийн сайтын өөр өөр агуулга бүхий хэсгүүдийг тодорхойлж дууссаны дараа тэдгээрийг өөрийн HTML-д оруулах хэрэгтэй. Хэдийгээр та ерөнхийдөө өөрийн хэсгүүдийг ямар ч дарааллаар байрлуулж чадах боловч эхлээд хуудасныхаа хамгийн чухал хэсгийг байрлуулах нь зүйтэй юм. Энэ арга нь хайлтын системийг оновчтой болгоход тусална.
Байршлыг харуулахын тулд гурван баганатай хуудсыг үзээрэй. Гэхдээ толгой эсвэл хөлгүй байна. Та байршуулалтыг дуртай байдлаараа байрлуулж болно.
Гурван баганы байршлын хувьд гурван хэсэгт: зүүн багана, баруун багана, агууламжийг тодорхойлно.
Эдгээр хэсгүүд нь ARTICLE элементийг ашиглан агуулгыг, хоёр баганын хувьд 2 БҮЛЭГ элементийг ашиглана. Бүгдийг нь тодорхойлох шинж чанарууд бас бий болно. ID атрибутыг хэрэглэх үед ID бүрт өвөрмөц нэр өгөх хэрэгтэй.
Агуулга байрлуулах
CSS ашиглах бол ID'd элементийн байрлалыг тодорхойл. Өөрийн байршлын мэдээллийг хадгалахыг хүсвэл:
# content {
}
Эдгээр элементүүдийн агуулга нь одоогийн байршил, хуудасны өргөний 100 хувь байж болно. Тогтоосон өргөнийг хэсэгчлэн байршуулахгүйгээр байрлал, хөндлөнгийн шинж чанарыг өөрчлөх.
Энэ байршлын хувьд хоёр баганыг тогтмол өргөн рүү тохируулж, байрлалаа үнэмлэхүй болгож, тэдгээр нь HTML-т олдоход нөлөөлөхгүй.
# зүүн багана {
албан тушаал: үнэмлэхүй;
зүүн: 0;
өргөн: 150px;
margin-left: 10px;
margin-top: 20px;
өнгө: # 000000;
padding: 3px;
}
# баруун багана {
албан тушаал: үнэмлэхүй;
үлдсэн: 80%;
дээд: 20px;
өргөн: 140px;
Доошоо үлдээх: 10px;
z-индекс: 3;
өнгө: # 000000;
padding: 3px;
}
Дараа нь агуулгын талбарт баруун болон зүүн талд байрлах утгыг тохируулахын тулд агуулгыг гаднах багануудтай давхцуулж болохгүй.
# content {
дээд: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
өнгө: # 000000;
}
HTML хүснэгтийг ашиглан CSS хуудсыг тодорхойлох нь арай илүү техникийн ур чадвар шаарддаг боловч үр дүн нь илүү уян хатан, хариу үйлдэл хийдэг дизайнуудаас эхэлдэг бөгөөд дараа нь таны хуудсанд бүтцийн зохицуулалт хийхэд илүү хялбар болдог.