Tablsiz Layouts Yeni Dizayn Sərhədləri Açın
Layout üçün masaları istifadə etmək üçün bir çox səbəblər var. Insanların istifadə etməyi davam etdirdiyi ən çox səbəblərdən biri, CSS ilə layout etmək çətindir, çünki. CSS skripti bir öyrənmə curve səbəb olsa da, CSS layout necə başa düşürük, nə qədər asan ola bilər ki, təəccüb bilər. Bir dəfə öyrəndiyiniz kimi, CSS-lərdən istifadə etməmələri üçün verdikləri ikinci ən geniş yayılmış səbəbə istinad edirsiniz: "Cədvəllərin yazılması daha sürətli". Daha tez, çünki masalar bilirsiniz, ancaq bir dəfə CSS-ni öyrənəndə, ilə.
CSS yerləşdirmənin brauzer dəstəyi
CSS yerləşdirilməsi bütün müasir brauzerlərdə yaxşı dəstəklənir. Netscape 4 və ya Internet Explorer 4 üçün sayt qurmaq olmadığı halda, oxucunuzun CSS-lərinizlə əlaqəli veb-səhifələrinizi görüntüləyən hər hansı bir problemi olmamalıdır.
Bir səhifə qurmağınızı yenidən düşünün
Bir siteyi masalarla qurduğunuzda, cədvəl formatında düşünmək lazımdır. Başqa sözlə, hüceyrələr, satırlar və sütunlar baxımından düşünürsünüz. Veb səhifələriniz bu yanaşmanı əks etdirəcəkdir. Bir CSS yerləşdirmə dizaynına keçdiyiniz zaman, məzmunun məzmunu baxımından səhifələrinizi düşünməyə başlayacaqsınız, çünki məzmun yerləşdirmə istədiyiniz yerdə yerləşdirilə bilər, hətta digər məzmunun üstündə də layiqdir.
Müxtəlif veb saytlarda müxtəlif quruluşlar var. Effektiv bir səhifə qurmaq üçün ona məzmun verməzdən əvvəl hər hansı bir səhifənin strukturunu qiymətləndirin. Məsələn səhifə beş fərqli bölməni əhatə edə bilər:
- Başlıq . Banner reklamı, site adı, naviqasiya keçidləri, bir məqalə başlığı və bir neçə başqa bir şey də ev.
- Sağ sütun . Axtarış qutusu, reklam, video qutuları və ticarət sahələri ilə səhifənin sağ tərəfidir.
- Məzmun . Bir məqalənin mətni, bloq yazısı və ya alış-veriş sepeti - səhifənin ət-kartofu.
- Inline reklamlar . Reklamlar içerik daxilində satır.
- Footer . Alt naviqasiya, müəllif məlumatları, müəllif hüquqları məlumatları, aşağı banner reklamları və əlaqəli linklər.
Bu beş elementi bir masaya qoymaq əvəzinə məzmunun müxtəlif hissələrini müəyyən etmək üçün HTML5 bölmə elementlərindən istifadə edin və sonra məzmun elementlərini səhifədə yerləşdirmək üçün CSS yerləşdirməsindən istifadə edin.
Məzmun bölmələrinizi müəyyənləşdirin
Sitenizin farklı içerik alanlarını tanımladıktan sonra, bunları HTML halına yazmanız lazımdır. Ümumiyyətlə, bölmələrinizi hər hansı qaydada yerləşdirə bilərsiniz, ilk növbədə səhifənin ən vacib hissələrini yerləşdirmək yaxşı bir fikirdir. Bu yanaşma axtarış mühərriki optimallaşdırılmasına kömək edəcəkdir.
Konumlandırmayı göstermek üçün, üç sütunlu bir sayfayı, ancak üstbilgi veya altbilgi göz önünde bulundurun. Siz istədiyiniz hər hansı bir layout növü yaratmaq üçün yerləşdirmədən istifadə edə bilərsiniz.
Üç sütun düzeni üçün, üç hissəni seçin: sol sütun, sağ sütun və məzmun.
Bu bölmələr məzmun üçün ARTICLE elementi və iki sütun üçün iki BÖLÜM elementindən istifadə edərək hazırlanacaq. Hər şey də onu müəyyən edən bir xüsusiyyətə sahib olacaq. Id xüsusiyyətindən istifadə etdikdə, hər bir id üçün unikal bir ad təyin etməlisiniz.
Məzmunun yerləşdirilməsi
CSS istifadə edərək, ID'd elementləri üçün mövqeyini müəyyənləşdirin. Sizin mövqeyinizi aşağıdakı kimi bir stil çağırışında saxlayın:
#content {
}
Bu elementlər içindəki məzmun, mümkün olduğu qədər yerə, yəni mövcud yerin və ya səhifənin genişliyinin yüzdə 100ini təşkil edəcək. Bir hissənin yerini sabit bir eninə zorlamadan təsirini dəyişdirmək üçün padding və ya margin xüsusiyyətlərini dəyişdirin.
Bu düzəliş üçün, iki sütunu sabit genişliklərə yerləşdirin və sonra mövqeyini mütləq qoyun, çünki onlar HTML-də olduğu yerdən təsirlənməyəcəklər.
# sol sütun {
mövqe: mütləq;
sol: 0;
eni: 150px;
margin-left: 10px;
margin-top: 20px;
rəng: # 000000;
padding: 3px;
}
# sağ sütun {
mövqe: mütləq;
sol: 80%;
üst: 20px;
eni: 140px;
padding-left: 10px;
z-indeksi: 3;
rəng: # 000000;
padding: 3px;
}
Sonra məzmun sahəsi üçün məzmunun iki kənar sütunla üst-üstə düşməyəcəyi üçün kənarlarını sağa və sola qoyun.
#content {
üst: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
rəng: # 000000;
}
HTML-cədvəl yerinə CSS-lərdən istifadə edərək səhifənizi müəyyənləşdirmək bir az daha texniki bacarıq tələb edir, lakin ödəmə daha çevik və məsuliyyətli dizaynlardan və daha sonra səhifənizdə struktur dəyişiklikləri hazırlamaqda daha asan olacaq.