Jest to szablon wykorzystujący gotowy skrypt, który pozwala za pomocą zakładek przełączać zawartość strony WWW.
W miejscu, gdzie jest umieszczony niniejszy tekst, można wstawić samodzielnie własny kod HTML - testy, listy, obrazki, tabele itd.

Oto przykład tabeli:

a b c
d e f

Oto przykład listy punktowanej:

  • Jeden
  • Dwa
  • Trzy
  • Cztery

Oto przykład listy numerowanej:

  1. Jeden
  2. Dwa
  3. Trzy
  4. Cztery

Oto przykład obrazka:

Szablon zawiera jeden duży blok z kodem HTML, który można (niemal) dowolnie modyfikować, to znaczy:

  • Można dodać kolejną zakładkę. Zakładkę dodaje się przez wstawienie pomiędzy znaczniki
    <ul id="tablist">...</ul>
    kolejnej pozycji listy.
  • Kolejnej zakładce odpowiada następny kontener na treść. Treść dodaje się pomiędzy znaczniki
    <div id="scX" class="tabcontent">...</div>,
    gdzie X oznacza kolejny numer zakładki.

Aby zmienić wstawiony kod HTML, należy w edytorze WebMajster wskazać myszką blok kodu HTML i dwukrotnie szybko na nim kliknąć myszką lub wybrać przycik "Opcje".

  • Można modyfikować wygląd strony. W zasadzie wszystkie atrybuty, takie jak kolory tekstu, tła, obramowania, wielkość i typ użytych czcionek, można zmienić. Zmian dokonuje się przez otwarcie do edycji pola nagłówka i edycję arkusza stylów zapisanego pomiędzy znacznikami <style type="text/css">... </style>.
    Pole edycji nagłówka dostępne jest w edytorze WebMajster3 w menu Strona - Head...
  • Szczegółowy opis działania zastosowanych w szablonie skryptów znajduje się w serwisie Dynamic Drive.

Wykorzystanie tego szablonu wymaga od użytkownika pewnej wiedzy o JavaScript, o HTML oraz o arkuszach stylów CSS.

Użytkownicy niezaawansowani powinni zacząć od wprowadzania prostych zmian do kodu HTML i sprawdzania efektów na podglądzie, aby w ten sposób "odkryć" mechanizm działania zastosowanych skryptów. Zacząć należy od zmiany nazw zakładek, które w kodzie HTML zapisane są pomiędzy znacznikami
<ul id="tablist">...</ul>.

Następnie można usunąć spomiędzy znaczników:
<div id="scX" class="tabcontent">...</div> (gdzie X oznacza kolejny numer zakładki)
bieżącą treść i wstawić własną. Treść tam wstawiona powinna być oznaczona poprawnymi tagami HTML.

Aby uniknąć pomyłek, warto skopiować cały kod HTML zawarty w osadzonym bloku HTML i wkleić do edytora tekstowego, np. Notatnika. Zmieniony kod w całości należy wkleić do bloku HTML, wcześniej usuwając "starą wersję". Podobnie należy postępować w przypadku zmian dokonanych w nagłówku strony (poprzez menu Strona - Head...)

Prosimy uważnie się zapoznać w Samouczku WebMajstra z wszystkimi stronami poświęconymi wstawianiu własnych kodów HTML. Proszę zwrócić uwagę na uwagi i ostrzeżenia, jakie umieszczamy w tej części Samouczka.

Pod tą zakładką pokazujemy przykład, jak umieścić większą porcję danych w przewijanym polu. Zawartość poniższego bloku można przewijać dzięki objęciu treści blokiem <div>...</div> opatrzonym własnym stylem: <div class="win">...</div>. Klasa .win zdefiniowana jest w bloku arkusza stylów tej strony. Definicje stylów dla tej strony dostępne są w edytorze WebMajster3 poprzez menu Strona - Head...

Lorem ipsum ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Aby zobaczyć efekt działania tego szablonu, włącz podgląd
Kliknij po kolei przykładowe zakładki i uważnie zapoznaj się z poradami widocznymi w wybranych 
sekcjach.
UWAGA! Ten szablon przygotowany jest tylko dla WebMajstra3. Starsze wersje WebMajstra 
nie otworzą go poprawnie.
Menu z zakładkami