Podstawy edycji stron internetowych - część 1 

Z poprzedniego artykułu dowiedziałeś się jak utworzyć swoją pierwszą stronę w edytorze MRUX. Pusta strona, na której nic nie ma, raczej nikogo nie zainteresuje. Musisz więc dodać na nią elementy i treść. Przeczytaj artykuł, aby nauczyć się podstaw edycji stron internetowych w edytorze MRUX.

Jeśli nie czytałeś poprzedniego artykułu i chcesz się dowiedzieć jak utworzyć pierwszą stronę, koniecznie sprawdź artykuł pod poniższym linkiem.

Podstawowe funkcje edytora

Aby rozpocząć, przejdź na listę stron i kliknij przycisk edycji przy stronie, którą chcesz edytować (przycisk ołówka - numer 3 w poprzednim artykule).

Gdy już to uczynisz, zostaniesz przeniesiony do okna edycji strony, które wygląda tak jak na poniższym obrazku.

Zwróć szczególną uwagę na przyciski w lewym dolnym rogu. Służą one do obsługi edytora. Za ich pomocą możesz dodawać nowe elementy, konfigurować wymiary i wygląd poszczególnych komponentów, określać ustawienia działania elementów i wiele innych. Poniżej znajdziesz omówienie poszczególnych przycisków.

Omówienie przycisków funkcjonalnych edytora

Przycisk numer 1, z symbolem “plusika” pozwala dodawać komponenty na stronę. Po jego kliknięciu pojawi się lista dostępnych komponentów do dodania. W zależności od zaznaczonego elementu, lista ta może się różnić. Więcej o dodawaniu komponentów przeczytasz poniżej.

Przycisk numer 2, z symbolem koła zębatego, służy do konfiguracji poszczególnych elementów. Nie wszystkie komponenty posiadają opcje konfiguracji. Poszczególne możliwości zostaną omówione w osobnych artykułach.

Przycisk numer 3, otwiera panel stylowania elementu. Innymi słowy, za jego pomocą można nadać unikatowy wygląd danemu komponentowi. Więcej o tej opcji przeczytasz w dalszej części artykułu.

Przycisk numer 4, jest bardzo podobny do poprzedniego przycisku, z tą różnicą, że pozwala zdefiniować style nadrzędne - czyli takie, które mogą być współdzielone przez wiele komponentów. Wszelkie zmiany dokonywane na stylach nadrzędnych, mają wówczas wpływ na wszystkie elementy, którym zostały przypisane.

Przycisk numer 5, to opcje pomocnicze, takie jak kopiowanie, wklejanie, czy przenoszenie elementów.

Przycisk numer 6 przeniesie Cię z powrotem na listę Twoich stron.

Dodawanie pierwszego komponentu

Nadszedł czas, aby dodać pierwszy komponent na Twoją stronę. Jednym z najprostszych komponentów, które można dodać do pustej strony, jest kontener. Kontener jest elementem, który umożliwia grupowanie kolejnych elementów. Kliknij na przycisk z plusikiem i wybierz z listy kontener. Po kliknięciu, element zostanie od razu dodany na Twoją stronę, a także zostanie zaznaczony. Zwróć uwagę na przyciski w lewym dolnym rogu - nie dość, że zmieniły kolor, to część z przycisków się zmieniła. Ekran edytora powinien teraz wyglądać mniej więcej tak:

Zaznaczony element (w tym przypadku kontener) jest otoczony zieloną obwódką (na górze strony, przy numerze 1). W taki sposób edytor informuje który element jest w tej chwili edytowany. Interakcje z przyciskami będą wpływały właśnie na ten zaznaczony komponent.

Kolor przycisków w lewym dolnym rogu definiuje prosta zasada - jeśli jakikolwiek element jest zaznaczony, to przybierają one kolor zielony. Gdy żaden element nie jest zaznaczony - przybierają kolor jasnoniebieski.

Zwróć teraz uwagę na nowy przycisk, oznaczony numerem 2. Są to ustawienia responsywności, czyli dostosowywania elementu do różnych rozmiarów urządzeń. Omówienie tych ustawień wykracza poza zakres tego artykułu, więc na razie zignoruj ten przycisk.

Przycisk numer 3, służy do usunięcia komponentu ze strony. 

Przycisk numer 4, pozwala odznaczyć element. 

Zaznaczanie i odznaczanie elementów

Wszystkie elementy na Twojej stronie mogą być dowolnie zmieniane. W celu wprowadzania tych zmian, musisz najpierw zaznaczyć wybrany element. Aby to zrobić, wystarczy najechać kursorem na wybrany element i go kliknąć. Przycisk numer 4 służy do odznaczenia zaznaczonego elementu. Spróbuj kliknąć ten przycisk i zauważ, że zielone obramowanie wokół kontenera zniknie, a przyciski przybiorą kolor jasnoniebieski.

Gdy żaden element nie jest zaznaczony, to przyciski odwołują się do głównego elementu Twojej strony. Ten element jest zawsze obecny na Twojej stronie i nie można go usunąć ani dodać. Generalnie nie musisz o tym zbytnio pamiętać, ponieważ nie jest to wielce istotne. Ważne jest natomiast to, że ten główny element też może być konfigurowany oraz można nadawać mu wygląd. Służą do tego te same przyciski.

Odznaczanie elementu można wykonać w jeszcze jeden sposób - klikając na element główny, czyli w obecnym przypadku - poza obszarem kontenera.

Pamiętaj! Jeśli przyciski są jasnoniebieskie, to żaden element nie jest zaznaczony i odwołują się one do głównego elementu Twojej strony. Jeśli przyciski są zielone - oznacza to, że jakiś element jest zaznaczony. Aby odnaleźć zaznaczony element - szukaj zielonej obwódki wokół niego.

Warstwy elementów

Większość dostępnych komponentów umożliwia dodawanie kolejnych elementów wewnątrz nich. Kontener jest jednym z tych elementów. Zaznacz swój nowo dodany kontener, a następnie kliknij w przycisk dodawania elementów (przycisk numer 1 z symbolem “plusika”) i zobacz jakie komponenty możesz dodać. Zwróć uwagę, że na liście znów widnieje kontener, a więc możesz umieścić jeszcze jeden kontener wewnątrz tego uprzednio dodanego. Gdy to zrobisz, nowo dodany kontener zostanie zaznaczony i będziesz mógł dodać do niego kolejny element (np. kolejny kontener). W ten sposób powstają warstwy elementów.

Możesz w ten sposób zagnieżdżać elementy. 

Jeśli wykonałeś poprzednie ćwiczenie i dodałeś kontener do kontenera, to pewnie zauważyłeś że w takiej sytuacji trudno zauważyć jakąś zmianę na stronie. Dzieje się tak, ponieważ oba kontenery są identyczne - ich tło jest przeźroczyste, żaden nie posiada marginesów, a w dodatku jeden jest umieszczony bezpośrednio na drugim (to znaczy, że “górny” kontener całkowicie przykrywa ten “dolny” kontener). Jak w takim razie zaznaczyć kontener na spodzie? Jeśli spróbujesz to zrobić w standardowy sposób (opisywany przed chwilą, czyli najechać kursorem i kliknąć), to zawsze zaznaczony zostanie kontener na wierzchniej warstwie, ponieważ to na niego wskaże Twój kursor.

Są dwa sposoby, aby zaznaczyć element na innej warstwie. 

1. Kliknięcie na "kropkę"

Na poniższym obrazku dodano cztery zagnieżdżone kontenery.

Po najechaniu kursorem na kontenery, w ich górnej i dolnej części, pojawiają się różnokolorowe kropki. Kolor i pozycja kropki odpowiada poszczególnym warstwom. Patrząc na górny rząd kropek, ta najbardziej po lewej, ciemno niebieska, odpowiada kontenerowi umieszczonemu najbardziej na spodzie. Klikając w tą kropkę zaznaczysz spodni element. Druga kropka odpowiada kontenerowi umieszczonemu wewnątrz pierwszego kontenera, i tak dalej. Możesz więc zaznaczać kontenery na poszczególnych warstwach klikając w odpowiadające im kropki. Czasem, jeśli elementy mają małą szerokość, kropki mogą się nie pojawić. Wówczas, skorzystaj ze sposobu opisanego poniżej.

2. Zaznaczenie elementu nadrzędnego z menu podręcznego

Sposób polega na zaznaczeniu górnego kontenera za pomocą kliknięcia, a następnie wybranie z menu opcji “nawigacja” > “element nadrzędny”.

Wybranie tej opcji zawsze zmienia zaznaczenie na element nadrzędny, czyli ten który jest jedną warstwę niżej. Aby zaznaczyć kontener w najniższej warstwie, należałoby wykonać tę czynność 3 razy. W taki sposób możesz swobodnie nawigować pomiędzy warstwami elementów.

Podsumowanie

Dodawanie elementów na stronę jest bardzo proste, a zaznaczanie i odznaczanie ich to podstawowe narzędzie umożliwiające tworzenie i kształtowanie strony. Dzięki warstwom, możesz dowolnie zarządzać zawartością swojej witryny. W artykule opisywaliśmy jedynie kontener, ale liczba dostępnych komponentów jest znacznie większa. Możesz samodzielnie wypróbować ich działanie lub przeczytać kolejne artykuły z pomocą.

Bezpłatna pomoc

Jeśli po przeczytaniu artykułu nadal masz pytania lub potrzebujesz pomocy, skorzystaj z poniższych opcji, aby się z nami skontaktować.