Jedním z nejdůležitějších aspektů při vývoji softwaru a webových stránek je tvorba nabídek. Microsoft a jeho nejslavnější brainchild, operační systém Windows, je třeba brát jako ukázkový příklad. Navzdory skutečnosti, že tento produkt používá drtivá většina uživatelů PC na světě, kritika nejenže neklesá, ale neustále roste. V zásadě se jedná o nepohodlí s umístěním položek nabídky. Následuje popis toho, jak vytvořit nabídky v CSS a Expression Web.
Instrukce
Krok 1
Chcete-li začít vytvářet vodorovnou nabídku, přejděte na Spravovat styl a poté klikněte na tlačítko Nový styl. Pojmenujte nový styl Selector ul li. Důležité! Ujistěte se, že vygenerovaný soubor má příponu drop-down.css. Chcete-li vytvořit vodorovnou nabídku, označte vytvořený prvek, že bude přesně vodorovný. Dále určete šířku každé položky nabídky a odstraňte všechny zbytečné body umístěné před všemi položkami v seznamu.
Krok 2
Chcete-li provést vodorovné zarovnání, přejděte na možnost Rozvržení, nastavte atribut Zobrazit na Inline. Dále nastavte levou hodnotu na atribut Float a klikněte na tlačítko Použít. Nastavte všechny položky seznamu na jeden řádek. Aby byly umístěny úhledně a neplazily se po sobě, v atributu Šířka nastavte hodnotu Pozice na 150 px. Zkontrolujte, zda jsou všechny prvky seznamu stejné velikosti. Dále odeberte tečky před všemi prvky - přejděte k atributu Seznam a v položce Typ stylu seznamu nastavte parametr Žádný. Kliknutím na tlačítko OK budou všechny změny přijaty a použity.
Krok 3
Upravte velikost a styl písma pro ul li. Chcete-li to provést, přejděte na Spravovat styly a klikněte pravým tlačítkem na ul li, poté vyberte Upravit styl. Zobrazí se známé dialogové okno. Přejděte na Font, vyberte atribut Font-family a nastavte jej na Sans-serif, Arial, Helvetica. Dále upravte velikost písma nastavením na 0, 9. Poté nastavte atribut Text-transformace na Velká písmena. Upravte výšku položek nabídky v atributu Výška - poloha a nastavte hodnotu na 30 px.
Krok 4
Po dokončení všech nápravných akcí uložte soubor jako menu.html. Dále otestujte vytvořenou nabídku v různých prohlížečích, abyste se ujistili, že funguje správně. Jak vidíte, design horizontálního menu je poměrně jednoduchý.
