Fundament budowania stron www - magiczne strefy

2011-09-05 10:41:22, komentarzy: 0

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łady budowy stref:

 

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%

Kategorie wpisu: Budowa strony, Edytor
« powrót

Dodaj nowy komentarz