Tworzenie makrokodu - instrukcja krok po kroku. Znacznik DIV z atrybutami.

Aby utworzyć makrokod przejdź do zakładki Makrokody w "Panelu zasobów z lewej". Jeśli panel nie jest widoczny,możesz go włączyć w menu Wyświetl. Innym sposobem jest skorzystanie ze skrótu klawiszowego (standardowo F9), lub użycie ikony "Wyświetlenie lub ukrycie panelu zasobów z lewej" na głównym pasku narzędziowym.

Można też otworzyć i przejść bezpośrednio do zakładki Makrokody za pomocą skrótu klawiszowego Ctrl+4

W zakładce Makrokody należy wybrać (lub utworzyć) kategorię, w jakiej będzie umieszczony nowy makrokod. Pogrupowanie makrokodów w kategorie pozwala na zachowanie porządku w makrokodach.

Następnie kliknij ikonę "Dodanie nowego makrokodu".

Przygotowania

Przed przystąpieniem do pracy warto przemyśleć, co dany makrokod będzie robił. Pozwoli to optymalnie go przygotować. W tym wypadku założenia będą następujące:

• jeśli zostanie użyty gdy w edytorze jest zaznaczony tekst, tekst ten ma zostać objęty z lewej i z prawej strony znacznikami <div> i </div>- wykorzystane zostaną lewa i prawa strona makrokodu
• makrokod ma umożliwiać podanie atrybutów: id i class - wykorzystane zostaną zmienne
• atrybuty nie muszą koniecznie być użyte (np. nie zawsze potrzebne będzie wstawienie class) - umieszczone zostaną w blokach

Po otworzeniu Edytora makrokodów należy wybrać dla niego nazwę. W tym wypadku najlepsza będzie "DIV + id + class"

Typ makrokodu może pozostać domyślny - "Po prostu makrokod".

Tworzenie szkieletu znacznika

Najwygodniej jest utworzyć szkielet znacznika w edytorze za pomocą odpowiednich dla każdego znacznika narzędzi Pająka. Jednak dla tak prostego przykładu, jak obecnie tworzony makrokod, możesz treść wpisać ręcznie.

Z założeń wynika, że jeśli w chwili wstawienia makrokodu w edytorze był zaznaczony tekst, to powinien on zostać objęty znacznikami <div> (z lewej strony) i </div> (z prawej). Aby to osiągnąć, w zakładce "Lewa strona makrokodu" wpisz <div>, a </div> w zakładce "Prawa strona makrokodu". Środek pozostanie pusty.

Kolejną czynnością będzie wstawienie atrybutów. Aby atrybuty można było wstawiać opcjonalnie, należy użyć bloków. Aby jednak mieć na początku pracy wgląd w ostateczny, pełny widok makrokodu, najwygodniej jest wpisać treść w znaczniku w zakładce "Lewa strona makrokodu". Do boków tekst zostanie przeniesiony później.

Po uzupełnieniu znacznika o atrybuty będzie, tekst w zakładce "Lewa strona makrokodu" będzie wyglądał następująco:
<div class="" id="">

Wykorzystanie zmiennych

Teraz należy uzupełnić wartości atrybutów, które obecnie są puste. Możesz wpisać je tam bezpośrednio, jednak najlepszym wyjściem jest wykorzystanie w tym celu zmiennych - podczas korzystania z makrokodu będzie można dopasować wartości atrybutów do aktualnych potrzeb.

Jako pierwsza zostanie utworzona zmienna dla wartości atrybutu class. Aby utworzyć zmienną, kliknij w ikonę "Dodanie nowej zmiennej" w menu nad oknem edycji treści makrokodu.

• W polu "Nazwa zmiennej" podaj nazwę (np. "Nazwa klasy").
• Opcja "Zmienna ukryta" pozostanie odznaczona (użytkownik korzystający z makrokodu musi ją widzieć w inspektorze by móc zmienić jej wartość).
• Typ zmiennej - jako że jest to argument class, należy wybrać typ "Nazwa i lista klas CSS". Wybranie tego typu spowoduje automatyczne wypełnienie się listy, jeśli w dokumencie, do którego użytkownik będzie chciał wstawić makrokod, będzie wstawiony lub dołączony zewnętrzny arkusz stylów CSS.
• Na koniec można wypełnić pole "Domyślna nazwa klasy". Spowoduje o umieszczenie tej wartości na liście klas, nawet w przypadku, gdy w arkuszu stylów CSS nie będzie takiej klasy.

Podobnie należy postąpić dla wartości atrybutu id. Jedyną różnica będzie wybór typu zmiennej - tym razem "Wartość typu tekst".

Po utworzeniu zmiennej pojawi się ona na liście zmiennych. Aby ją wstawić do treści makrokodu, należy postawić kursor między cudzysłowami danej wartości i kliknąć ikonę "Wstawienie wybranej zmiennej".

Przeniesienie atrybutów znacznika do bloków

Gdy atrybuty wraz ze zmiennymi są gotowe, można je przenieść do bloków.

Aby przenieść treść do bloku, należy ją najpierw wyciąć i umieścić w schowku. Można to zrobić za pomocą menu kontekstowego (kliknij prawym przyciskiem myszy na zaznaczonym tekście), lub za pomocą standardowego skrótu Ctrl+X. Najlepiej wyciąć tekst wraz ze spacją umieszczoną przed nim - wtedy wstawiając blok zawsze będzie on oddzielony spacją od poprzedzającej go nazwy znacznika, bądź treści innego bloku.

Następnie należy utworzyć nowy blok - za pomocą ikony "Dodanie nowego bloku". W oknie "Edycja bloku makrokodu" podaj nazwę bloku (np. "Atrybut CLASS", lub "Atrybut ID") i wkleić skopiowany tekst (za pomocą menu kontekstowego lub skrótu Ctrl+V).

Po utworzeniu bloku należy wstawić jego wywołanie w miejsce wyciętego atrybutu. Aby wstawić blok w znaczniku umieść kursor w odpowiednim miejscu znacznika (tam skąd został wycięty tekst dla bloku) i kliknij ikonę "Wstawienie wybranego bloku".

Po wstawieniu wywołań bloków do treści lewej części makrokodu, powinna ona mieć postać:
<DIV%pblock%Atrybut CLASS%pblock%%pblock%Atrybut ID%pblock%>

Teraz możesz zamknąć okno za pomocą przycisku OK - makrokod jest gotowy!

Makrokodu będzie można używać używając opcji:

• "Wstaw makrokod w pozycji kursora"
• "Wstaw makrokod bez środka"