menu - Kurs HTML i CSS
Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu...praktyczne zastosowanie koncepcji rozdzielenia struktury i prezentacji. Wspólnie postaramy się dla raz ustalonego kodu HTML, zawierającego odnośniki menu nawigacyjnego, zaprojektować kilka osobnych arkuszy stylów, dzięki czemu ten sam kod HTML za każdym razem będzie się prezentował zupełnie inaczej. Być może zapytasz teraz: jaki jest tego cel? Wyobraź sobie, że Twój serwis internetowy zawiera 100 podstron z artykułami. Na każdej podstronie zostało wstawione menu nawigacyjne. Jeśli teraz...
- Oprawa graficzna / "Duszki" CSS
Spis treści Wstęp Formaty graficzne BMP GIF JPG PNG Żądania HTTP Pionowe menu Poziome menu Ikony Listy Wskazówki Podsumowanie Wstęp Nie od dzisiaj wiadomo, że szybkość wczytywania strony internetowej ma bardzo duży wpływ na jej odbiór przez użytkowników. W skrajnym przypadku potencjalny czytelnik może w ogóle opuścić serwis, jeśli w rozsądnym czasie nie doczeka się na załadowanie pełnej treści. "Najcięższymi" elementami stron internetowych są wszelkiego rodzaju multimedia...
Wykaz skryptów / Pozostałe skryptyAktywne przyciski Przyciski które zmieniają wygląd, po wskazaniu ich myszką (przydatne przy tworzeniu menu). Data aktualizacji strony Automatyczne wyświetlenie daty ostatniej aktualizacji strony. Aktualna data Wyświetlenie na stronie aktualnej daty. Nowość Sygnalizowanie nowości bezpośrednio w spisie treści lub na każdej ze stron, poprzez wyświetlenie specjalnego obrazka albo napisu. System newsów Automatyczny system wiadomości na stronie WWW, które są wyświetlane tylko przez określony...
Widżety HTML / Ramki HTML...Możemy je jednak tworzyć nawet tylko na własny użytek. Jak być może czytelnik zdążył już zauważyć, w standardowym, statycznym serwisie internetowym menu nawigacyjne powinno być powtórzone na każdej podstronie. W przeciwnym razie przemieszczając się po witrynie użytkownik straci możliwość szybkiego przejścia do innych podstron bądź powrotu na stronę główną. Jeżeli menu nawigacyjne umieścimy tylko na stronie głównej, użytkownik bardzo łatwo może się pogubić, a co za tym idzie szybko opuścić...
- Czcionki CSS / Atrybuty mieszane czcionki {font}
Spis treści {font} Atrybuty mieszane czcionki {font} Czcionki systemowe {font: caption icon menu message-box small-caption status-bar} Atrybuty mieszane czcionki {font} selektor { font: wartości atrybutów } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać wybrane wartości cech dotyczących czcionek, które będą oddzielone od siebie spacjami...
- Menu rozwijane, otwierane, wysuwane / Łączenie opcji
...przedstawionych powyżej opcji można ze sobą łączyć, uzyskując w ten sposób dodatkowy efekt, np. następujące wywołanie skryptu: <script> new Menu('menu0', 'position: absolute', true, true, 0, 100, 0, 250); </script> spowoduje osadzenie wypozycjonowanego absolutnie menu otwieranego w wersji wysuwanej ze zmodyfikowanymi czasami rozwijania/zwijania oraz opóźnieniem przy otwieraniu i zamykaniu. Aby pominąć określenie pozycji, należy po prostu wpisać '' (dwa apostrofy). Aby pominąć ustalenie...
- Widżety HTML / Szablon strony bez ramek
...że Twój serwis składa się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego stopnia, że po jakimś czasie można się wręcz zniechęcić do...
- Skórki
...się stylizuje, co jest kolejnym argumentem, aby zgłębić to zagadnienie. Ponadto warto dodać, że jeśli szkielet Twojej strony albo np. elementy menu będą zbudowane w oparciu o tabele, zmiana wyglądu będzie możliwa tylko w ograniczonym zakresie. Natomiast jeżeli strukturę oprzesz o elementy <div>...</div>, a przy budowaniu menu skorzystasz z wykazów (<ul>...</ul>) oraz list definicyjnych (<dl>...</dl>), to bez większego trudu będzie można totalnie odmienić wygląd serwisu tylko za pomocą...
- Układ elastyczny CSS / Kolejność {order}
...4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy. <div id="top"> <div id="TRESC">Treść strony...</div> <div id="MENU">Menu...
- Menu rozwijane, otwierane, wysuwane / Czas rozwijania/zwijania
Aby przyspieszyć lub zwolnić rozwijanie/zwijanie pozycji menu, należy powtórzyć wszystkie przedstawione kroki, poza ostatnim (wywołanie skryptu), który tym razem należy wykonać następująco: <script> new Menu('menu0', '', false, false, czasRozwin, czasZwin); </script> czasRozwin Czas w milisekundach (1 s = 1000 ms), w którym następuje rozwinięcie pojedynczego elementu menu (<dd>...</dd>). Aby wymusić natychmiastowe rozwinięcie wszystkich elementów, należy podać wartość 0 (zero). czasZwin...