menu html - Kurs HTML i CSS
HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy. Po uruchomieniu edytora HTML należy wybrać opcję z menu: Plik/Nowy (lub File/New). Teraz można już zacząć pisanie strony. Jednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany. Oto jak przykładowo powinny...
- 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ą...
Oprawa graficzna / Zamiennik obrazkowy...za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana ułożenia menu nawigacyjnego z orientacji pionowej do poziomej ani przeniesienie całej kolumny nawigacyjnej z lewej na prawą stronę. Jest jednak jeden ważny element, na zawartość którego nie można wpływać za pomocą CSS - obrazki. Można co prawda zmieniać rozmiary grafiki, dodawać obramowanie, ustalać pozycję i marginesy, ale nie da się wyświetlić innego...
- 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 w CSS / Poziome 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. Tym razem, na przekór domyślnej prezentacji pozycji listy, ułożymy odnośniki nawigacyjne poziomo - w formie zakładek. Takie ustawienie możemy uzyskać na dwa sposoby: Ustawiając sposób wyświetlania pozycji listy na wartość inline, czyli w linii. Oprócz tego, tak jak poprzednio...
- 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...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...najlepiej wszystkie obrazki były zapisane w jednym z trzech formatów: GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. W żadnym wypadku nie...
- Ochrona strony
...działań na stronie. Oczywiście można je ze sobą łączyć. Blokada prawego klawisza myszki Zabezpiecza przed wybraniem "Pokaż źródło" z menu kontekstowego. <body oncontextmenu="return false"> ... </body> Uwaga! Źródło dokumentu nadal będzie można podejrzeć, wybierając odpowiednią opcję z górnego menu przeglądarki. Poza tym nie wszystkie przeglądarki interpretują to polecenie. Częściowo można zlikwidować ten problem, otwierając stronę w nowym oknie bez paska menu. Można również...
- HTML5 / Główna treść <main>
...Strony internetowe nie są zwyczajnymi dokumentami elektronicznymi. Z racji na naturę hipertekstu w każdym serwisie WWW możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka...