Budując stronę internetową składasz ją z elementów (tekst, zdjęcie itp.), które dodajesz w różne miejsca na swojej stronie. Te miejsca to właśnie strefy...
W poradniku znajdziesz:
* Jak działają strefy
* Zmiana rozmiaru stref
* Zmiana odstępów stref
* Zarządzanie wyglądem stref
* Przykłady budowy stref
Jak działają strefy
Każda strona składa się z 3 podstawowych stref. Budując swoją stronę przeciągasz elementy do jednej z nich.
Podstawowe strefy:
a) Strefa nagłówek
b) Strefa główna
c) Strefa stopka
W edytorze strefy podstawowe oddzielone są między sobą poziomą przerywaną linią na całej szerokości strony.
Strefa nagłówek i strefa stopka – działają identycznie, dodając element do tych stref zostanie on pokazany na KAŻDEJ podstronie.
Strefa główna – różni się od poprzednich, ponieważ dodając do niej element zostanie on pokazany tylko na danej podstronie.
Dzięki temu możesz dodać do strefy nagłówek np. menu, logo, nazwę strony – te elementy będą się pojawiać na każdej podstronie, nie musisz więc ich dodawać każdorazowo jak tworzysz nową podstronę.
Przykład:
Dodając zdjęcie do strefy głównej będzie ono znajdować się tylko na tej stronie, natomiast jak dodasz np. film do strefy nagłówek – pojawi się on na każdej podstronie – nawet na nowo dodanych.
Istnieją także inne strefy – czyli obszary na które jest podzielona strefa główna.
Np. mając dwie kolumny w strefie głównej, każda z nich jest osobną strefą, te dodatkowe strefy możesz także edytować – czyli zmieniać ich rozmiar, odstępy a także ich tło.
Przykład strony z zaznaczonymi strefami:
kolorem czerwonym – strefy główne
kolorem zielonym – pozostałe strefy
Zmiana rozmiaru stref
Aby zmienić rozmiar dowolnej strefy musisz wejść do opcji tej strefy.
Mając kursor myszki w danej strefie pojawia się dodatkowa ikona ustawień - zawsze w lewym górnym rogu strefy:
Po kliknięciu na ikonę rozwinie się menu z właściwościami dla danej strefy. Dodatkowo aby ułatwić Ci pracę strefa którą edytujesz zostanie zakreskowana:
Z menu wybierz „Rozmiar”, przejdziesz do ustawień rozmiaru strefy:
Teraz możesz zmieniać wysokość i szerokość danej strefy.
Możesz to zrobić na dwa sposoby:
1. Możesz edytować wartość obecnej wysokości i szerokości – w górnym menu
2. Możesz także złapać krawędź pionową lub poziomą i przesunąć ja do nowej szerokości/wysokości.
Aby zatwierdzić zmiany wystarczy kliknąć „Zapisz” w górnym menu.
Zmiana odstępów w strefach
W każdej strefie możesz ustawić dowolne odstępy, dzięki temu dodając elementy do tej strefy od razy będą odsunięte od jej krawędzi.
Aby zmienić odstęp dla strefy wejdź do jej menu i wybierz „Odstępy”, po kliknięciu na ikonę w górnym menu, zobaczysz już nadane odstępy na strefę oraz możliwość wyboru odstępu lub wpisaniu własnej wartości:
Zarządzanie wyglądem stref
Bardzo pomocną funkcjonalnością w budowie stron jest zarządzanie wyglądem danej strefy.
Aby wejść do edycji tła strefy wybierz z menu strefy opcję „Tło strefy”,
W górnym menu zarządzasz wyglądem strefy, masz do wyboru:
1. Kolor tła strefy
2. Obrazek tła
3. Obramowanie strefy
4. Zaokrąglone rogi
5. Teksturę
6. Rozbłysk
7. Przeźroczystość
Kolor tła:
Wybierz kolor tła aby wypełnić całą strefę jednolitym kolorem.
Obrazek tła:
Po wyborze obrazka (możesz załadować nowy z dysku lub wybrać z naszej galerii), możesz ustawić dodatkowej parametry jak:
„Powtarzanie” - obrazek będzie się powtarzał w całej strefie w pionie, poziomie albo w dwóch kierunkach jednocześnie...
„Przewijanie tła” - obrazek tła będzie ruchomy lub stały,
„Pozycja” - dzięki tej opcji ustawisz punkt przymocowania obrazka do tła.
Obramowanie strefy
Tak jak na elemencie tak i na strefie można ustawić obramowanie, czyli dodać krawędzie w wybranym kolorze oraz grubości.
Jeżeli ustawisz kolor lub obrazek jako tło strefy to uzyskasz dostęp do dodatkowych właściwości - efektów.
Zaokrąglone rogi
Dzięki tej opcji możesz w prosty sposób sprawić aby tło strefy w której są elementy przybrało nowy wygląd – rogi stają się zaokrąglone:
Tekstura
Tekstury to obrazki, które są nakładane na tło w strefie – dzięki temu możesz uzyskać zaskakujące efekty wizualne. Tekstury są przeźroczyste dlatego „wtapiają się” w wybrany wcześniej kolor lub obrazek tła. Tekstury są powtarzane na całej szerokości i wysokości strefy.
Rozbłysk
Działa podobnie jak tekstury i przeźroczystość - aby go użyć, wcześniej trzeba ustawić kolor lub obrazek tła.
Rozbłyski są to gotowe grafiki, drobne obrazki, które coś przedstawiają. Wtapiają się w tło ale nie powtarzają się na całej strefie. Dlatego można dodatkowo wybrać ich pozycję np. na dole strefy, w rogu itp.
Przeźroczystość
Aby ustawić przeźroczystość ustaw wartość od 0 do 100% na suwaku w górnym menu. Dzięki temu strefa będzie przeźroczysta i zacznie być widoczne tło jakie znajduje się pod strefą – np. obrazek tła całej strony.
Przykład #1
Wykorzystano grafiki:
grafika 1:
(kliknij po większy rozmiar)
Ustawienia strefy:
Kolor tła strefy: #58c5c0
Obrazek tła strefy: grafika 1
- Powtarzanie: nie powtarzaj
- Pozycja: lewy górny róg
Efekty: brak
Przykład #2
Wykorzystano grafiki:
grafika 1:
(kliknij po większy rozmiar)
Ustawienia strefy:
Kolor tła strefy: #e20c09
Obrazek tła strefy: grafika 1
- Powtarzanie: powtarzaj w poziomie
- Pozycja: lewy górny róg
Efekty: brak
Przykład #3
Wykorzystano grafiki:
grafika 1:
(kliknij po większy rozmiar)
Ustawienia strefy:
Kolor tła strefy: #EAAC03
Obrazek tła strefy: grafika 1
- Powtarzanie: powtarzaj w poziomie
- Pozycja: lewy górny róg
Efekty: brak
Przykład #4
Wykorzystano grafiki: brak
Ustawienia strefy:
Kolor tła strefy: #054b64
Obrazek tła strefy: brak
Efekty:
- zaokrąglone rogi: tak – wszystkie, rozmiar: średni
- przeźroczystość: 10%