whycomputer.com >> Wiedza o Internecie >  >> Internet

Jak utworzyć interaktywną oś czasu HTML

Linia czasu jest użytecznym sposobem wyświetlania listy zdarzeń na stronie internetowej, a interaktywna linia czasu zapewnia użytkownikom pewną kontrolę nad wyświetlaniem treści. Chociaż istnieje wiele sposobów tworzenia interaktywnej linii czasu, większość wymaga więcej niż tylko języka znaczników hipertekstowych (HTML). Istnieje jednak jedno bardzo proste rozwiązanie HTML. Możesz łatwo tworzyć interaktywne paski przewijania dla swojej linii czasu za pomocą atrybutu „stylu” HTML. W ten sposób użytkownicy linii czasu będą mogli przewijać zawartość zgodnie z ich potrzebami.

Krok 1
Utwórz plik HTML. Otwórz nowy dokument w programie do edycji tekstu i utwórz podstawową stronę HTML. Dodaj ten kod w sekcji „ciało” HTML: Element podziału („div”) jest kontenerem dla listy zdarzeń na linii czasu. Wartość „overflow” „auto” dodaje interaktywny pasek przewijania, gdy linia czasu staje się szersza lub wyższa niż ten kontener. Zapisz stronę jako „timeline.html”.

Krok 2
Utwórz własną zawartość linii czasu. W przestrzeni między otwierającymi i zamykającymi znacznikami „div” dodaj zdarzenia linii czasu w porządku rosnącym lub malejącym. Dodaj każde zdarzenie w ramach własnej sekcji dobrze sformatowanego HTML. Zachowaj stronę podczas pracy.
Przetestuj swój kod HTML. Otwórz przeglądarkę internetową komputera i załaduj „timeline.html”. Jeśli jego zawartość jest większa niż kontener „div”, pojawi się interaktywny pasek przewijania. Dostosuj wartości „szerokości” i „wysokości” kontenera do układu pionowego lub poziomego.

Wskazówki
Układy pionowe są najłatwiejsze do zakodowania. Wystarczy zawinąć każdą sekcję wydarzenia w swój własny element „div”. W przypadku układu poziomego można użyć tabeli z pojedynczym wierszem i komórki kolumny dla każdego zdarzenia. Jeśli to zrobisz, ustaw wysokość tabeli tak, jak wysokość kontenera „div”. Uważaj na pionowe wartości „marginesu” i „wypełnienia” stołu.
Ten artykuł tworzy interaktywny pasek przewijania za pomocą „wbudowanego” arkusza stylów kaskadowych (CSS). Arkusze stylów „Inline” wchodzą do atrybutu „style” znacznika otwierającego elementu HTML. Jednak zamiast tego możesz użyć „wewnętrznego” lub „zewnętrznego” arkusza stylów. „Wewnętrzne” arkusze stylów znajdują się w sekcji „głowa” HTML. Arkusze stylów „zewnętrzne” są oddzielnymi plikami „.css”. Użycie jednego z tych typów daje większą kontrolę nad formatowaniem dowolnej zawartości HTML.
Możesz rozszerzyć interaktywność przykładu za pomocą JavaScript. Możesz zacząć od dodania przycisków HTML, a następnie napisać JavaScript, aby przenieść zawartość linii czasu, gdy użytkownicy klikną przyciski.

Elementy, które będą potrzebne

  • Oprogramowanie do edycji tekstu


    URL:https://pl.whycomputer.com/Internet/100303388.html

  • Internet
    • Jak utworzyć płytę DVD z muzyką

      Tworzenie DVD jest jedną z najbardziej skutecznych metod przechowywania dużej ilości muzyki. Płyta Digital Versatile Disc lub DVD ma pojemność 4,5 gigabajta pamięci, zapewniając wystarczająco dużo miejsca na pliki, oprogramowanie, muzykę i filmy. Muzyczne płyty DVD są kompilowane w formacie MP3 i mo

    • Jak utworzyć Yahoo Blog

      Blog to skrót od „weblog”. Yahoo pozwala tworzyć darmowe blogi i nie musisz nic wiedzieć o projektowaniu stron internetowych. To strona internetowa, która jest regularnie aktualizowana i często jest używana jako rodzaj dziennika online. Wiele blogów koncentruje się na takich kwestiach, jak polityka,

    • Jak utworzyć stronę internetową w Corel Draw

      Śliczne, bogate w grafikę, profesjonalne projekty stron internetowych nie ograniczają się do produktów stworzonych dla sieci. Program CorelDraw od dawna uważany za jedyną prowincję grafików, oferuje solidną opcję tworzenia stron internetowych. Dla tych, którzy nie mają czasu na inwestowanie w kursy

    Wiedza o Internecie © https://pl.whycomputer.com