Při navrhování webů musíte často vyřešit základní otázku: jaké bude chování stránky, když je otevřena s odlišným rozlišením obrazovky? Zde jsou dvě možnosti - „gumové“(protahovací) stránky webu nebo statické. Bude diskutována první možnost. Ať už dáváte přednost rozvržení, hlavní zásadou návrhu roztažení je relativní škálovatelnost.
Je to nutné
- - znalost HTML;
- - program pro editaci html kódu.
Instrukce
Krok 1
Vyberte hlavní soubor pro svou šablonu webu, který bude odrážet hlavní označení. Může to být soubor index.html nebo index.php. Jedním z nejlepších vizuálních software pro úpravy šablon stránek je Macromedia Dreamweawer. Na základě tohoto programu budou provedeny nezbytné úpravy.
Otevřete soubor šablony nebo vytvořte nový příkazem „Soubor“- „Nový“, kategorie - „Základní stránka“- „HTML“nebo kategorie „Dynamická stránka“- „PHP“. Zde uvažujeme obecný případ, kdy je struktura webu zaznamenána přesně v jednom ze dvou souborů.
Krok 2
Již dlouho není žádným tajemstvím, že existují různé typy rozvržení - na tabulkách, na div-blocích a kombinovaných (tabulky a bloky současně). Značka HTML je zodpovědná za rozložení tabulky
Pro každou vlastnost zadejte procento (100%). Tím se dosáhne účinku automatického roztažení buněk tabulky na obrazovkách s libovolnou geometrií. Může to být 19palcový monitor nebo smartphone - každý z nich bude správně reprodukovat obsah.
Krok 3
Pokud potřebujete přesně určit korespondenci mezi buňkami tabulky, použijte následující příklad:
| … … obsah buňky 1. … | … … obsah buňky 2. … |
Zde uvidíte, že jedna z buněk je určena s šířkou 30% všeho, co je definováno pro samotnou tabulku. Jednoduchý výpočet ukazuje, že pro druhou buňku zbývá 100% -30% = 70%. Nezapomeňte, že v tomto případě nesmí mít jedna z buněk tabulky nastaven atribut width. Prohlížeč provede všechny výpočty samostatně a správně roztáhne tabulku s buňkami. Obsah uvnitř tabulek se také správně roztáhne a zmenší na různých obrazovkách.
Krok 4
V situaci s rozložením div jsou bloky značek standardně roztaženy na celou šířku obrazovky a sledují jeden po druhém zleva doprava, shora dolů. Chcete-li upřesnit jejich geometrii, vytvořte třídu nebo identifikátor CCS (ID), ve kterém určíte například atributy a / nebo kategorii velikosti a polohy pole (Box). Nezapomeňte propojit určený styl se souborem značení webu a svázat třídu (ID) s požadovanou značkou. Obvykle je umístěn na samém začátku skriptu a definuje veškerou budoucí geometrii webu:
… … obsah stránek. …
Nebo takto:
… … obsah stránek. …
Kód pravidla CSS bude následující:
… moje třída {
šířka: 30%;
výška: 50%;
}
#můj průkaz {
šířka: 30%;
výška: 50%;
}
