Podstawy edycji stron internetowych - część 2

Jak już wiesz, dodawanie elementów na stronę internetową oraz zarządzanie nimi jest banalnie proste. Pewnie zauważyłeś też, że wszystkie dodawane komponenty początkowo nie mają ustawionego żadnego wyglądu - są zwyczajnie przeźroczyste. Takie komponenty są mało atrakcyjne, ale dziś się to zmieni, nauczymy się bowiem jak nadać im wygląd.

Jeśli potrzebujesz, przypomnij sobie jak dodawać elementy, czytając artykuł pod poniższym odnośnikiem.

Stylowanie elementów

Jeśli pamiętasz z poprzednich artykułów, każda strona posiada element główny. Element ten można modyfikować wówczas, gdy żaden inny element nie jest zaznaczony, a przyciski w lewym dolnym rogu mają kolor niebieski. Element główny zazwyczaj nie jest mocno stylizowany, ale czasem warto nadać mu chociażby tło lub ustawić kolor i parametry czcionki. Te drugie, w szczególności, będą się propagować na zagnieżdżone elementy. Na dobry początek zacznijmy jednak od ustawienia koloru tła. Będąc już w oknie edycji, kliknij na przycisk wałka malarskiego, aby otworzyć panel z ustawieniami wyglądu, który prezentuje się następująco:

Przycisk numer 1 otwiera panel styli u spodu strony. U góry panelu widnieją zakładki, które oznaczone są numerem 2. Każda z zakładek oferuje różne opcje wyglądu czy pozycjonowania elementu na stronie. W celu ustawienia tła wybierz zakładkę “Tło”. Jeśli nie widzisz tej zakładki, użyj strzałek umieszczonych po bokach, aby przesuwać zakładki.

Numerem 1 oznaczono zakładkę “Tło”, którą powinieneś kliknąć. Ukaże się wówczas zawartość taka jak na powyższym obrazie. Kliknij na panel “Tło” oznaczony numerem 2, aby rozwinąć opcje konfiguracyjne.

Następnie kliknij przełącznik (oznaczony numerem 1 na poniższym obrazie), aby włączyć możliwość ustawienia tła. Plusik po prawej stronie, oznaczony numerem 2, powinien się odblokować. Kliknij go i wybierz z listy “Kolor” (numer 3).

Wewnątrz panelu pojawi się nowa wartość określająca kolor tła elementu. Początkowo wartość ma ustawiony kolor biały. Powinieneś też zauważyć, że kolor Twojej strony także się zmienił - nie jest już przeźroczysty. Jako tło można również ustawiać gradient jak i obraz. Opcje te są jednak nieco bardziej zaawansowane, więc poświęcimy im osobny artykuł, ale nic nie stoi na przeszkodzie abyś sam je wypróbował już teraz. Tymczasem wróćmy do ustawiania jakiegoś innego koloru niż biały. W tym celu kliknij na nowo dodaną wartość i wybierz swój ulubiony kolor.

Gratulacje! Właśnie ustawiłeś wymarzony kolor tła swojej strony. W ramach ćwiczenia dodaj teraz kontener na stronę i ustaw mu inny kolor, dokładnie w taki sam sposób jak poprzednio. Pamiętaj jednak, że w celu ustawienia koloru elementowi, ów element musi być zaznaczony. Bezpośrednio po dodaniu nowego elementu, zostaje on automatycznie zaznaczony. Jeśli jednak przypadkowo, bądź celowo odznaczyłeś element, zaznacz go klikając na jego obszar. Pamiętaj także, że nowo dodany element będzie przeźroczysty. Może Ci się więc wydawać, że ma taki sam kolor jak dopiero co ustawione tło.

Po wykonaniu ćwiczenia, Twoja strona powinna wyglądać mniej więcej tak:

Ustawianie marginesów

W kolejnym ćwiczeniu ustawimy marginesy zewnętrzne nowo dodanemu kontenerowi. Zaznacz kontener - ten który dodałeś w poprzednim zadaniu i któremu ustawiłeś inny kolor tła. Kliknij wałek malarski i z zakładek wybierz “Marginesy” (1). Następnie kliknij “Marginesy zewnętrzne” (2), przełącz przełącznik tak samo jak w przypadku tła i kliknij plusik po prawej (3).

Za pomocą przycisków oznaczonych numerem 4, wybierz które marginesy chcesz ustawić: dolny, górny, lewy, czy prawy. Możesz także zaznaczyć je wszystkie. Ostatnim krokiem jest wybranie wartości marginesu za pomocą suwaka. Uważaj jednak, aby nie przesadzić z wartością. Na początek ustaw 48px i obserwuj zmiany na stronie. Operowanie suwakiem jest mało precyzyjne. Aby ustawić wartość wpisując ją z klawiatury, kliknij na wartość umieszczoną w prawej dolnej części suwaka:

Pojawi się okno dialogowe, w którym będziesz mógł precyzyjnie podać wartość. Jeśli zrobiłeś wszystko według wskazówek, to powinieneś uzyskać mniej więcej następujący efekt:

Spróbuj teraz dodać obramowanie do kontenera. Zrobisz to dokładnie tak samo jak ustawianie marginesu. Opcje obramowania znajdziesz w zakładce “Obramowanie i cień”. 

Podsumowanie

Stylowanie elementów pozwala nadać im wygląd i charakter, co jest niezbędne przy tworzeniu stron internetowych. Teraz, gdy Twoje elementy nabierają kształtu i kolorów, możesz skorzystać z opcji “podglądu” strony internetowej. Zobaczysz tam jak będzie wyglądała Twoja strona po opublikowaniu. 

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ć.