Zarovnávání obrázků a textu
Tabulky jsou nejen výborným nástrojem pro strukturalizaci, ale rovněž fungují jako dokonalé zarovnávací nástroje.
Umožňují návrhářům rozložit elegantně text, obrázky a další údaje.
Tato technika se využívá k:
|
Vylepšení celkového provedení stránky.
K vylepšení stránky využijete strukturální vlastnosti tabulek a vytvoříte mnohem atraktivnější stránku.
|
|
Vedení oka diváka stránkou.
Zarovnání obrázků a textu dovnitř strukturovaných tabulkových buněk a řádků můžete
vytvořit atraktivně uspořádaný způsob předávání informací.
|
|
Zkoušení různých variant provedení.
Tabulky nabízejí flexibilitu strukturovaného "obalu", což unožňuje
zkoušení různých provedení.
|
Zarovnávání obrázků a textu:
1. Vytvořte tabulku.
Navrhněte tabulku se sloupci pro text a obrázky. Nezapomeňte na vytvoření
řady "kanálků" k oddělení sloupců tak, aby se jejich obsahy nepřiblížily.
Do prázdbých buněk vložte
nedělitelnou mezeru .
2. Vložte text do tabulky.
Do tabulky vložte textové údaje a zarovnejte je pomocí atributů tabulky. Přidejte
pozadí buněk a obrázky.
Poznámky: |
|
Zde jsou některé poznámky, které jsem dal dohromady, aby posloužily jako příklad pro tuto
techniku webového návrhu.
Teď chci vložit obrázek do levého sloupce, ale chci, aby byl přesně zarovnán
k hornímu okraji s dalším odstavcem. Jak toho docílit?
|
|
|
|
|
|
|
|
 |
|
Je to snadné. Umístíme obrázek a text v tomto odstavci do této buňky
s vertikálním zarovnáním k hornímu okraji. |
|
|
|
|
|
|
|
|
|
© 2000 Lucie Fialová & Raymond Pirouz |
|
|
3. Odstraňte obrysy tabulky.
Poznámky: |
|
Zde jsou některé poznámky, které jsem dal dohromady, aby posloužily jako příklad pro tuto
techniku webového návrhu.
Teď chci vložit obrázek do levého sloupce, ale chci, aby byl přesně zarovnán
k hornímu okraji s dalším odstavcem. Jak toho docílit?
|
|
|
|
|
|
|
|
 |
|
Je to snadné. Umístíme obrázek a text v tomto odstavci do této buňky
s vertikálním zarovnáním k hornímu okraji. |
|
|
|
|
|
|
|
|
|
© 2000 Lucie Fialová & Raymond Pirouz |
|
|
Příklad:
< TABLE width=500 border=0 cellpadding=0 cellspacing=0>
< TR>< TD width=125 valign=top align=right bgcolor=navy>
< font color=white>Poznámky:< /font>< /TD>
< TD width=5> < /TD>< TD width=300>
Zde jsou některé poznámky, které jsem dal dohromady, aby
posloužily jako příklad pro tuto techniku webového návrhu.
< br>< br>Teď chci vložit obrázek do levého sloupce,
ale chci, aby byl přesně zarovnán k hornímu okraji
s dalším odstavcem. Jak toho docílit?< /TD>
< TD width=5> < /TD>< TD width=65> < /TD>
< /TR>< TR>< TD width=125 bgcolor=navy> < /TD>
< TD width=5> < /TD>< TD width=300> < /TD>
< TD width=5> < /TD>< TD width=65> < /TD>
< /TR>< TR>< TD width=125 bgcolor=navy valign=top align=right>
< IMG src="obraz1.gif" width=125 height=80>< /TD>
< TD width=5> < /TD>< TD width=300 valign=top>
Je to snadné. Umístíme obrázek a text v tomto odstavci
do této buňky s vertikálním zarovnáním k hornímu okraji.< /TD>
< TD width=5> < /TD>< TD width=65> < /TD>
< /TR>< TR>< TD width=125 bgcolor=navy> < /TD>
< TD width=5> < /TD>< TD width=300> < /TD>
< TD width=5> < /TD>< TD width=65> < /TD>
< /TR>< TR bgcolor=black>< TD width=125> < /TD>
< TD width=5> < /TD>< TD width=300>< font color=white>
© 2000 Lucie Fialová< /TD>< TD width=5> < /TD>
< TD width=65> < /TD>< /TR >< /TABLE >
Takhle to vypadá
Začátek
Další
Předchozí