Jednoduchý návod na vlastní prezentaci v PHP s použitím CSS a MySql databáze.
Dnes si vytvoříme „hlavičku“ stránek a css soubor se stylem.head.inc
<br><center><img border='0' src='theme/vzhled1/img/logo.gif' alt='logo'></center> Do souboru head.inc umístíme libovolný obsah který chceme aby se nám zobrazoval v hlavičce stránky.
V našem případě na střed stránky vkládáme obrázek theme/vzhled1/img/logo.gif
style.css
body
{
background-color : #FDDEB2;
float: left;
margin: 0;
margin-top: 0;
}
.input_menu {
background-color: white;
color: black;
font-family: Verdana;
font-size: 11px;
border-top-color: white;
border-left-color: white;
border-bottom-color: white;
border-right-color: white;
width: 100px;
}
.input_menu_150 {
background-color: white;
color: black;
font-family: Verdana;
font-size: 11px;
border-top-color: white;
border-left-color: white;
border-bottom-color: white;
border-right-color: white;
width: 130px;
}
.input_admin {
background-color: white;
color: black;
font-family: Verdana;
font-size: 11px;
border-top-color: white;
border-left-color: white;
border-bottom-color: white;
border-right-color: white;
width: 80px;
}
.input_admin_menu_text {
width: 100px;
}
.hltab {
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
border-width: 0px;
}
.hltab-head {
height: 100%;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
}
.hltab-menu {
width: 1px;
height: 100%;
vertical-align: top;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
}
.hltab-obsah {
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
}
.head-table {
width: 100%;
height: 90px;
border-collapse: collapse;
border-spacing: 0px;
border-width: 0px;
}
.head-box {
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
.menu-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
border-width: 0px;
}
.menu-box {
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
}
.obsah-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
border-width: 0px;
}
.obsah-box {
height: 300px;
width: 100%;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
}Tento soubor nám určuje veškerý vzhled.
CSS umožňuje definovat vlastnosti určitých elementů např. barvy textu, pozadí, zarovnání, velikost písma a mnoho dalších vlastností, které nelze nahradit ničím v HTML.
Ve srovnání s formátováním pomocí atributů v HTML formátovací schopnosti rozšiřuje. Styly umožňují přesně určit, jak bude který element vypadat. Narozdíl od atributů stylem můžeme definovat jednotný vzhled elementu pro celý dokument (např. že všechny nadpisy úrovně 1 budou červené) a to jediným zápisem pro příslušný element (nikoli v každém tagu příslušného elementu). Stejně tak můžeme pomocí stylu určit odlišné formátování pro třeba jen jediný výskyt určitého elementu. Tím se jednak zbavíme velkého množství kódu, jednak se tento kód stane mnohem přehlednější. Navíc pokud se jednou rozhodneme změnit například barvu písma všech odstavců, bude to pro nás otázka několika málo vteřin, měnit každý atribut u každého elementu v HTML by byla katastrofa. Jeden styl můžeme snadno použít pro libovolné množství stránek.
Pokud ve stylu definujeme pro stejný element stejnou vlastnost dvakrát, vyšší váhu má ta deklarace, která byla definovaná později (myšleno na pozdějším řádku) a ta se také provede.
Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek.
Nebudu zde popisovat každý parametr to by jsme tu seděli moc dlouho. Vypíši zde jen ty nejpoužívanější:
height – výška
width – šířka
padding – vnitřní okraj
border - rámeček
background-color – barva pozadí
background-image – obrázek pozadí
color – barva textu
font-family – font písma
font-size – velikost písma
float – obtékání
margin – okraj objeku
bottom – umístění od spoda
line-height – prokládání řádků
text-align – zarovnávání odstavce
Pokud někomu není něco jasné doporučuji nastudovat seriály o CSS.
Tím by jsme měli hotovou základní strukturu a nějaký ten vzhled a můžeme se pustit do psaní modulů pro obsah stránek.
Soubory k tomuto dílu. DOWNLOAD
K nahlédnutí na http://ukazky.owebu.cz/diviweb
Login: admin
Heslo: root
Autor: Václav Dressler
2024 ©