Saytlarni loyihalashda siz ko'pincha asosiy savolni hal qilishingiz kerak bo'ladi: turli xil ekran o'lchamlari bilan ochilganda sahifaning harakati qanday bo'ladi? Bu erda ikkita variant mavjud - "kauchuk" (cho'zilgan) sayt sahifalari yoki statik. Birinchi variant muhokama qilinadi. Tartibni afzal ko'rganingizdan qat'iy nazar, strech dizaynining asosiy qoidasi nisbiy miqyoslashdir.
Bu zarur
- - HTML tilini bilish;
- - HTML-kodni tahrirlash dasturi.
Ko'rsatmalar
1-qadam
O'zingizning shabloningiz uchun asosiy faylni tanlang, u asosiy belgini aks ettiradi. Bu index.html yoki index.php fayli bo'lishi mumkin. Vizual sayt shablonini tahrirlashning eng yaxshi dasturlaridan biri bu Macromedia Dreamweawer. Ushbu dastur asosida kerakli tahrir qilish amalga oshiriladi.
Shablon faylini oching yoki "Fayl" - "Yangi" buyrug'i bilan yangisini yarating, toifasi - "Asosiy sahifa" - "HTML" yoki "Dinamik sahifa" - "PHP" toifasi. Bu erda sayt tuzilishi aynan ikkita fayldan bittasida qayd etilgan umumiy holatni ko'rib chiqamiz.
2-qadam
Jadvallarda, div-bloklarda va estrodiol (bir vaqtning o'zida jadvallar va bloklar) turli xil tartiblarning mavjudligi uzoq vaqtdan beri sir emas edi. HTML yorlig'i jadvalning joylashishi uchun javobgardir
Har bir mulk uchun foizni (100%) ko'rsating. Bu har qanday geometriyali ekranga avtomatik ravishda cho'zilgan stol hujayralarining ta'siriga erishadi. Bu 19 dyuymli monitor yoki smartfon bo'lishi mumkin - ularning har biri tarkibni to'g'ri takrorlaydi.
3-qadam
Agar jadval katakchalari o'rtasidagi yozishmalarni aniq belgilash zarur bo'lsa, quyidagi misoldan foydalaning:
| … … 1-hujayraning tarkibi. … | … … 2-katakning tarkibi. … |
Bu erda kataklardan biri jadvalning o'zi uchun belgilangan barcha narsalarning 30% kengligi bilan ko'rsatilganligini ko'rasiz. Oddiy hisoblash shuni ko'rsatadiki, ikkinchi katak uchun 100% -30% = 70% qoladi. Shuni esda tutingki, bu holda jadval yacheykalaridan birida width atributi o'rnatilmagan bo'lishi kerak. Brauzer barcha hisob-kitoblarni o'zi amalga oshiradi va jadvalni katakchalar bilan to'g'ri uzatadi. Jadval ichidagi tarkib turli ekranlar bo'ylab to'g'ri ravishda qisqaradi va qisqaradi.
4-qadam
Div tartibida bo'lgan vaziyatda yorliq bloklari sukut bo'yicha ekranning to'liq kengligigacha cho'ziladi va birin ketin chapdan o'ngga, yuqoridan pastgacha kuzatib boriladi. Ularning geometriyasini yaxshilash uchun CCS sinfini yoki identifikatorini (ID) yarating, unda siz, masalan, atributlarni va / yoki katakchaning kattaligi va joylashuvi toifasini (Box) belgilang. Belgilangan uslubni saytni belgilash fayliga bog'lashni va sinfni (ID) kerakli yorliq bilan bog'lashni unutmang. Odatda u kelajakdagi sayt geometriyasini belgilaydigan skriptning boshida joylashgan:
… … sayt tarkibi. …
Yoki shunga o'xshash:
… … sayt tarkibi. …
CSS qoidasi kodi quyidagicha bo'ladi:
… myclass {
kengligi: 30%;
balandligi: 50%;
}
#myID {
kengligi: 30%;
balandligi: 50%;
}
