C6: A tartalom pozícionálása strukturális kijelölés alapján
Alkalmazás
Minden CSS-t támogató technológia.
Ez a technika az alábbiakra vonatkozik:
Leírás
A technika azt kívánja bemutatni, hogyan lehet a stíluslapokkal fokozni a vizuális megjelenítés hatásait, illetve azt, hogyan lehet a stíluslapok nélkül is megtartani a kifejező megjelenítést. A CSS2 pozícionáló eszközeinek használatával a tartalom a felhasználó látóterének bármelyik pontjában megjeleníthető. A strukturáló elemek használata biztosítja azt, hogy a tartalom a stílus hiányában is meghatározott maradjon.
Példák
1. példa
Az alábbi példában szereplő tartalomban strukturális megjelölés (definíciós lista) került felhasználásra. A CSS a tartalom oszlopos formátumú stílusának kialakítására került alkalmazásra. Minden egyes osztály tökéletesen oszlopba rendezi a tartalmat, míg a margók értéke "0" lesz. Ez utóbbi művelet a felhasználói programok azon alapértelmezett beállításait bírálja felül, amely a behúzott DD elemekkel kombinált HTML definíciós listák megjelenítését szabályozzák.
Az alábbiakban a megjelenítendő tartalom kerül szemléltetésre:
Példa kód:
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</dd>
</dt>
</dl>
</div>
Az alábbiakban a fenti elemeket pozícionáló és formázó CSS kód látható:
Példa kód:
.item1 {
left: 0;
margin: 0;
position: absolute;
top: 7em;
}
.item2 {
left: 0;
margin: 0;
position: absolute;
top: 8em;
}
.item3 {
left: 0;
margin: 0;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0;
margin: 0;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}
Stíluslapok alkalmazása esetén az adatok a "Termékek" és "Helyszínek" oszlopokban kerülnek megjelenítésre. Stíluslapok hiányában, a szöveg a struktúrát és olvasási rendet meghatározó definíciós listában jelenik meg.
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
Ellenőrzések
Folyamat
CSS kód segítségével pozícionált tartalmak esetében
-
Távolítsa el a dokumentumból a stílusra vonatkozó információkat, vagy kapcsolja ki a felhasználói program stíluslapokat kezelő funkcióit.
-
Ellenőrizze, hogy a strukturális kapcsolatok és a tartalom jelentése változatlanok maradtak-e.
Elvárható eredmények
-
A 2. pont igaz.