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...
- 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...
HTML dla zielonych / Edytory HTML...np. Microsoft Word, Open Office czy Libre Office - posiada możliwość przekształcenia dokumentu na kod HTML. W tym celu zwykle wystarczy skorzystać z menu: "Plik / Zapisz jako...", a następnie w oknie dialogowym w polu "Zapisz jako typ" wybrać wartość: "Strona sieci Web, przefiltrowana (*.htm;*.html)" lub odpowiednio: "Dokument HTML (Writer) (*.html)". Na koniec wystarczy kliknąć przycisk "Zapisz". Trzeba jednak pamiętać, że w ten sposób utworzone dokumenty HTML mogą długo się ładować i...
- 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...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...wyjaśnia je i udziela wskazówek, jak je poprawić. 5 min - Zadanie domowe: rozbudować stronę o kolejny odsyłacz do innej podstrony i linki menu Uczniowie mają za zadanie dodać koleją wewnętrzną podstronę oraz menu nawigacyjne w serwisie. Lekcja 2 - Wstawianie obrazków i podstawowe formatowanie tekstu Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi wstawiać obrazki do strony HTML. Uczeń formatuje tekst, używając podstawowych znaczników (pogrubienie, kursywa...
- Podcast HTML / #7 Widżety HTML
...strony. Widżety można również projektować samodzielnie, zarówno do udostępniania innym, jak i na własny użytek. W standardowym serwisie statycznym menu nawigacyjne musi być powtórzone na każdej podstronie. Jeśli chcemy dodać nowe podstrony, wymaga to mozolnej zmiany menu w każdym istniejącym dokumencie. Aby wyeliminować tę niedogodność, można stworzyć jeden wspólny widżet zawierający odnośniki menu i osadzić go na każdej podstronie. Dotyczy to także innych stałych elementów, takich jak...
- 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...
- 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...
- 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ć...