menu html - Kurs HTML i CSS
CSS dla zielonych / Klasy selektorów CSS <div class>Niemal na każdej stronie WWW znajdują się pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów. Załóżmy, że mamy...
- Dobre praktyki / CSS Zorientowane Obiektowo
...przez chwilę na dowolną stronę WWW (tak, możesz spojrzeć również na stronę, którą właśnie czytasz 🙂). Zwykle zawiera ona m.in.: nagłówek menu artykuł stopkę Każdy z tych elementów z naszego punktu widzenia jest właśnie obiektem. Obiekt CSS to wizualnie samodzielny element strony. Artykuł potrafi wyświetlić się poprawnie bez nagłówka ani stopki serwisu. Taki sposób przedstawiania elementów strony jest dla człowieka bardziej intuicyjny niż pojmowanie jej jako zbiór wielu DIV-ów...
- 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...
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...
- Ikony (symbole) / Akcje interfejsu użytkownika
...kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Szukaj search search Strona główna home home Menu menu menu Zamknij close close Ustawienia settings settings Zaznacz kółko check_circle check_circle Ulubione favorite favorite Dodaj add add Usuń delete delete Strzałka wstecz arrow_back arrow_back Gwiazdka star star Prawy szewron chevron_right chevron_right Wyloguj logout logout Strzałka naprzód iOS arrow_forward_ios arrow_forward_ios...
- Menu w CSS / Pionowe menu
Przypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu HTML przedstawionego na wstępie w formie listy nieuporządkowanej - tylko poprzez dołączenie deklaracji CSS. Zaczniemy od prostszego przykładu - ułożenia linków w menu zgodnie z normalnym formatowaniem listy, czyli w pionie. Domyślny sposób prezentacji oczywiście nie jest zadowalający. Pierwsze co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować...
- 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ć...
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...