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…
