dnes je 29.3.2024

Input:

WWW stránky prakticky - 5. část

13.4.2007, , Zdroj: Verlag Dashöfer

Rozpracovali jsme internetovou prezentaci, kde jsme již vytvořili oblast pro umístění navigace. Navigace zatím obsahuje pouze textové odkazy. Nyní tyto odkazy změníme na tlačítka.

Tlačítko vytvoříme opět pomocí stylů - v programu TopStyle - tedy otevřeme soubor styly.css. Tlačítko má funkci odkazu, v HTML kódu tedy bude definováno pomocí značky <a>.
V editačním prostředí umístíme kurzor na nový řádek. Použijeme ikonu New Selector a zobrazené dialogové okno vyplníme takto:

Jde tedy opět o definici třídy pro značku <a>. Po potvrzení dialogového okna se vracíme do editačního pole programu. Pomocí seznamu Style Inspector nyní budeme zadávat vlastnosti. Některé již známe z minulých lekcí, nové si doplníme.

Zde bychom si ještě mohli říci, že seznam Style Inspector umožňuje dvojí zobrazení, které přepínáme označenou ikonou:

Na obrázku jsou dostupné vlastnosti seřazeny podle skupin (Color and Background - tj. Barvy a pozadí apod.), skupiny se rozbalují pomocí značky se znaménkem +. Po přepnutí ikony jsou vlastnosti seřazeny abecedně podle názvu, přitom vlastnosti, které jsou již nadefinované, jsou na začátku.

Vrátíme se tedy k definici vlastností pro novou třídu „tlacitko", kterou jsme si již založili. Pro vzhled tlačítka potřebujeme nadefinovat následující vlastnosti:

width: 130px;

šířka tlačítka, hodnotu můžeme zapsat buď přímo do vedlejšího pole, nebo v tomto poli rozbalíme seznam a pomocí příkazu Lenght hodnotu zadáme přes dialogové okno

height: 20px;

výška tlačítka, platí totéž, do pro šířku

display: block;

tlačítko se zobrazí jako blokový prvek, tj. s odřádkováním na konci. Ovlivní to také, aby všechna tlačítka byla stejně široká, bez ohledu na to, jak dlouhý text na nich je.

background: #DCDCDC;

barva pozadí tlačítka. Ve vedlejším poli této vlastnosti se

Nahrávám...
Nahrávám...