docTvorba webových stránek
download 
Stížnost Transkript
Tvorba webových stránek
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1
Šablona:
Inovace a zkvalitnění výuky prostřednictvím ICT
Název:
Design a vzhledové vlastnosti webových stránek
Téma:
Využití pozicování při definování vzhledu stránky
Autor:
Ing. Zelinka Pavel
Číslo:
VY_32_INOVACE_36–16
Anotace:
Pracovní list pro podporu výuky Design a vzhledové vlastnosti webových stránek. Využití pozicování při
definování vzhledu stránky.
Určeno pro 3. ročník oborů Strojírenství, Ekonomika a podnikání, Výtvarné zpracování kovů.
Určeno pro 2. ročník oboru Technické lyceum.
Vytvořeno: listopad 2013
Podpora digitalizace a využití ICT na SPŠ CZ.1.07/1.5.00/34.0632
Obsah prezentace
• Příklad praktického využití pozicování a selektorů
při vytváření vzhledových vlastností webové
stránky. Příklad znázorňuje postup při vytváření
čtyř-sloupcového layoutu .
Příklad praktického využití
pozicování a selektorů
Obr. 1
Zobrazení čtyř-sloupcového layoutu v prohlížeči
body {margin:0px;
padding:0px;
font-size:16px;
color:#000000;
background-color:#ffffff;
}
div {text-align:justify;
padding:7px;
}
#levy-sloupec {position:absolute;
width:200px;
height:610px;
margin-top:20px;
left:20px;
background-color:lime;
border-style:dashed;
border-color:red;
border-width:7px;
}
Obr. 2
Zápis CSS čtyř-sloupcového layoutu – část 1
#pravy-sloupec
{position:absolute;
width:200px;
height:610px;
margin-top:20px;
right:20px;
background-color:lime;
border-style:dashed;
border-color:red;
border-width:7px;
}
Obr. 3
Zápis CSS čtyř-sloupcového layoutu – část 2
#stredni-sloupec {position:relative;
width:auto;
height:610px;
top:20px;
overflow:auto;
margin-left:260px;
margin-right:260px;
background-color:yellow;
border-style:double;
border-color:blue;
border-width:7px;
}
Obr. 4
Zápis CSS čtyř-sloupcového layoutu – část 3
#horni {position:relative;
width:auto;
margin-left:20px;
margin-right:20px;
margin-top:20px;
background-color:yellow;
border-style:ridge;
border-color:orange;
border-width:7px;
}
Obr. 5
Zápis CSS čtyř-sloupcového layoutu – část 4
#horni {position:relative;
width:auto;
margin-left:20px;
margin-right:20px;
margin-top:20px;
background-color:yellow;
border-style:ridge;
border-color:orange;
border-width:7px;
}
Obr. 6
Zápis CSS čtyř-sloupcového layoutu – část 5
#horni {position:relative;
width:auto;
margin-left:20px;
margin-right:20px;
margin-top:20px;
background-color:yellow;
border-style:ridge;
border-color:orange;
border-width:7px;
}
Obr. 6
Zápis CSS čtyř-sloupcového layoutu – část 5
<body>
<div id="horni">
Lorem Ipsum je demonstrativní výplňový text používaný
v tiskařském a knihařském průmyslu........
</div>
<div id="levy-sloupec">
Lorem Ipsum je demonstrativní výplňový text používaný
v tiskařském a knihařském průmyslu........
</div>
Obr. 7
Zápis zdrojového kódu webové stránky – část 1
<div id="pravy-sloupec">
Lorem Ipsum je demonstrativní výplňový text používaný
v tiskařském a knihařském průmyslu........
</div>
<div id="stredni-sloupec">
Lorem Ipsum je demonstrativní výplňový text používaný
v tiskařském a knihařském průmyslu........
</div>
</body>
Obr. 8
Zápis zdrojového kódu webové stránky – část 2
Podobné dokumenty
Ekologie - použité materiály
Použité materiály v tématu
Ekologie
Populace a společenstva
Úloha 1b.
Obr. A:
http://thumbs.dreamstime.com/thumb_400/12428258738WN2qZ.jpg
Obr. B:
http://media2.vlasta.cz/photos/2012/04/06/1951-egyp...
Rozsah bezplatného servisu
nárok na výměnu vadného výrobku za výrobek nový.
2. Bezplatný servis se nevztahuje na vzhledové vady vzniklé běžným opotřebením výrobku,
na díly a součástky podléhající běžnému opotřebení a dále na...
VY_52_INOVACE_120
Omezené ovládání
Pomalé připojení
Nabídka ATV pneu – pneu pro sportovní čtyřkolky
Nabídka ATV pneu – pneu pro sportovní čtyřkolky
