Pri navrhovaní webov musíte často vyriešiť zásadnú otázku: aké bude správanie stránky, keď je otvorená s iným rozlíšením obrazovky? Tu sú dve možnosti - „gumové“(rozťahovacie) stránky webu alebo statické. O prvej možnosti sa bude diskutovať. Nech už preferujete akékoľvek usporiadanie, hlavným princípom roztiahnuteľného dizajnu je relatívna škálovateľnosť.
Je to nevyhnutné
- - znalosť HTML;
- program na úpravu html kódu.
Inštrukcie
Krok 1
Vyberte hlavný súbor pre svoju šablónu webu, ktorý bude odrážať hlavné označenie. Môže to byť súbor index.html alebo index.php. Jedným z najlepších vizuálnych softvérov na úpravu šablón stránok je Macromedia Dreamweawer. Na základe tohto programu sa vykonajú potrebné úpravy.
Otvorte súbor šablóny alebo vytvorte nový príkazom „Súbor“- „Nové“, kategória - „Základná stránka“- „HTML“alebo kategória „Dynamická stránka“- „PHP“. Tu uvažujeme všeobecný prípad, keď je štruktúra stránok zaznamenaná presne v jednom z dvoch súborov.
Krok 2
Už dávno nie je tajomstvom, že existujú rôzne typy rozloženia - na stoloch, na div-blokoch a kombinovaných (tabuľky a bloky súčasne). Značka HTML je zodpovedná za rozloženie tabuľky
Zadajte percento (100%) pre každé vlastníctvo. Takto sa dosiahne efekt automatického rozťahovania buniek tabuľky na obrazovkách s ľubovoľnou geometriou. Môže to byť 19-palcový monitor alebo smartphone - každý z nich bude správne reprodukovať obsah.
Krok 3
Ak potrebujete presne určiť korešpondenciu medzi bunkami tabuľky, použite nasledujúci príklad:
| … … obsah bunky 1. … | … … obsah bunky 2. … |
Tu uvidíte, že jedna z buniek je určená so šírkou 30% všetkého, čo je definované pre samotnú tabuľku. Jednoduchý výpočet ukazuje, že pre druhú bunku zostáva 100% -30% = 70%. Pamätajte, že v tomto prípade nesmie mať jedna z buniek tabuľky nastavený atribút šírky. Prehliadač vykoná všetky výpočty sám a správne natiahne tabuľku s bunkami. Obsah v tabuľkách sa tiež správne roztiahne a zmenší na rôznych obrazovkách.
Krok 4
V situácii s rozložením div sa bloky značiek štandardne roztiahnu na celú šírku obrazovky a nasledujú jeden za druhým zľava doprava, zhora nadol. Ak chcete spresniť ich geometriu, vytvorte triedu alebo identifikátor (ID) CCS, v ktorom určíte napríklad atribúty a / alebo kategóriu veľkosti a polohy krabice (Box). Nezabudnite prepojiť zadaný štýl so značkovým súborom webu a naviazať triedu (ID) na požadovanú značku. Zvyčajne je umiestnený na samom začiatku skriptu a definuje všetku budúcu geometriu stránok:
… … obsah stránky. …
Alebo takto:
… … obsah stránky. …
Kód pravidla CSS bude nasledovný:
… moja trieda {
šírka: 30%;
výška: 50%;
}
#myID {
šírka: 30%;
výška: 50%;
}
