Saytlar dizayn edərkən tez-tez əsas bir sualı həll etməlisiniz: fərqli ekran qətnamələri ilə açıldığında səhifənin davranışı necə olacaq? Burada iki seçim var - "kauçuk" (uzanan) sayt səhifələri və ya statik. İlk seçim müzakirə olunacaq. Mizanpaj üçün seçiminiz nə olursa olsun, uzanma dizaynının əsas prinsipi nisbi miqyaslanmaqdır.
Vacibdir
- - HTML bilikləri;
- - html kodunu redaktə etmək üçün proqram.
Təlimat
Addım 1
Sayt şablonunuz üçün əsas işarəni əks etdirəcək əsas faylı seçin. İndex.html və ya index.php faylı ola bilər. Ən yaxşı vizual sayt şablonu tənzimləmə proqramından biri Macromedia Dreamweawer'dir. Lazımi redaktə bu proqram əsasında həyata keçiriləcəkdir.
Şablon sənədini açın və ya "Fayl" - "Yeni", kateqoriya - "Əsas səhifə" - "HTML" və ya "Dinamik səhifə" - "PHP" əmri ilə yenisini yaradın. Burada sayt quruluşunun tam olaraq iki sənəddən birində qeyd edildiyi ümumi vəziyyəti nəzərdən keçiririk.
Addım 2
Uzun müddət heç bir sirr deyil ki, müxtəlif növ cədvəllər var - masalarda, div bloklarında və birləşdirilmiş (eyni zamanda cədvəllər və bloklar). HTML etiketi masanın tərtibindən məsuldur
Hər əmlak üçün bir faiz (100%) göstərin. Bu, hər hansı bir həndəsə ilə avtomatik olaraq uzanan masa hüceyrələrinin ekranlara təsirini əldə edəcəkdir. 19 düymlük bir monitor və ya bir smartfon ola bilər - hər biri məzmunu düzgün şəkildə çıxaracaqdır.
Addım 3
Cədvəl hüceyrələri arasındakı yazışmaları dəqiq bir şəkildə göstərməlisinizsə, aşağıdakı nümunəni istifadə edin:
| … … 1 hüceyrənin məzmunu. … | … … 2-ci hücrənin məzmunu. … |
Burada cədvəlin özü üçün təyin olunan hər şeyin 30% genişliyi ilə hüceyrələrdən birinin göstərildiyini görəcəksiniz. Sadə hesablama göstərir ki, ikinci hücrə üçün% 100 -30% = 70% qalır. Unutmayın ki, bu halda cədvəl xanalarından birində genişlik atributu qoyulmamalıdır. Brauzer bütün hesablamaları təkbaşına aparacaq və masanı hüceyrələrlə düzgün şəkildə uzadacaqdır. Cədvəllərdəki məzmun da fərqli ekranlarda düzgün şəkildə uzanacaq və daralacaqdır.
Addım 4
Bir div düzeni ilə bir vəziyyətdə, etiket blokları standart olaraq ekranın bütün genişliyinə qədər uzanır və bir-birinin ardınca soldan sağa, yuxarıdan aşağıya qədər izləyirlər. Həndəsələrini dəqiqləşdirmək üçün, məsələn, atributları və / və ya qutunun ölçüsü və mövqeyi kateqoriyasını (Box) göstərdiyiniz bir CCS sinfi və ya identifikatoru (ID) yaradın. Göstərilən stili saytın formatlaşdırma sənədinə bağlamağı və sinfi (ID) istədiyiniz etikete bağlamağı unutmayın. Ümumiyyətlə, gələcək bütün sayt həndəsələrini təyin edən ssenarinin əvvəlində yerləşdirilir:
… … saytın məzmunu. …
Və ya belə:
… … saytın məzmunu. …
CSS qaydasının kodu aşağıdakı kimidir:
… Mənim sinfim {
genişlik: 30%;
hündürlük: 50%;
}
#myID {
genişlik: 30%;
hündürlük: 50%;
}
