Tworzenie strony internetowej z użyciem warstwy zakotwiczonej

Obiekt 'Warstwa' (Layer) w WYSIWYG Web Builder to bardzo zaawansowane narzędzie do budowy złożonych układów na stronach internetowych i może być użyty w wielu różnych typach układów.
W tym tutorialu postaramy się objaśnić nową koncepcję zastosowania warstw (wprowadzoną od wersji 9 programu) o nazwie "warstwa zakotwiczona". Ten typ może być przydatny do tworzenia układów 'responsywnych'. Określenie 'responsywny' oznacza w tym przypadku, że układ dostosuje się automatycznie do wielkości ekranu. Na przykład na urządzeniach mobilnych z różnymi rozmiarami wyświetlaczy.
Krok 1

Dodaj
warstwę (layers) która będzie nagłówkiem strony, umieść warstwę na górze strony
Ustaw szerokość dokładnie na 970 pikseli (wysokość nie ma znaczenia).
Użyjemy 970 pikseli, ponieważ jest to minimalna rozdzielczość jaką chcemy obsłużyć (na przykład do obsługi iPAD-a).
Ustaw warstwę jako "Anchored Layers" (warstwa zakotwiczona) i ustaw w sekcji 'Lokalizacja i rozmiar':
• kotwica z lewej
• kotwica u góry
• kotwica  z prawej

Ustaw również wyrównanie (Aligment) na 'Center' to będzie pozycjonowało całą zawartość na środku warstwy, gdy strona zostanie opublikowana.
Krok 2

Dodaj nastepną warstwę (layers) która będzie pasekiem z lewej strony więc ją tam umieść.
Ustaw warstwę jako "Anchored Layers" (warstwa zakotwiczona) i ustaw w sekcji 'Lokalizacja i rozmiar':
• kotwica z lewj
• kotwica u góry
• kotwica  u dołu
Krok 3

Dodaj
kolejną warstwę (layers), to będzie prawy pasek boczny więc umieścić go w prawej części strony.
Ustaw warstwę jako "Anchored Layers" i ustaw :
• kotwica u góry
• kotwica  u dołu
• kotwica z prawej
Krok 4

Dodaj
kolejną czwartą warstwę. Będzie to stopka strony więc umieść ją na dolnej strony.
Ustaw warstwę jako "Anchored Layers"  i ustaw w sekcji 'Lokalizacja i rozmiar':
• kotwica z lewej
• kotwica u dołu
• kotwica  z prawej

Ustaw wyrównanie (Aligment) na 'Center' to będzie ustawiało całą zawartość na środku warstwy, gdy strona zostanie opublikowana.
Krok 5

Na koniec dodaj warstwę dla treści. Umieścić tę warstwę dokładnie między wszystkimi innymi warstwami w środku ekranu jako "Anchored Layers"  i ustaw w sekcji 'Lokalizacja i rozmiar':
• kotwica z lewej
• kotwica u góry
• kotwica u dołu
• kotwica  z prawej

Uzyj podglądu lub opublikuj stronę.Jak możesz zaobserwować cały układ dostosowuje się do wielkości okna przeglądarki.

Ale ... oczywiście chcemy też dodać trochę treści. W tym tutorialu użyjemy pływających warstw tak więc wszystko wewnątrz warstwy "Treść" podczac zmiany rozmiaru (w trakcie zmiany rozmiaru okna przeglądarki)  będzie się zmieniać dynamicznie.
Zapoznaj się także z powiązanym tematycznie tutorialem : Tworzenie strony z elastyczych warstw pływających.

Wynik końcowy będzie wyglądał następująco:

Podobnie jak w powyżej wymienionym tutorialu użyjemy kilku warstw z obrazem i tekstem.
a) Dodaj
nową warstwę
b) Ustaw jej szerokość 140 pikseli i wysokość 160 pikseli.
c) Ustaw tryb warstwy jako "warstwa pływająca" i ustaw wszystkie marginesy do 10.
d) przenieść warstwę do wewnątrz warstwy "Treść"
Powtórz tę czynność, aby dodać więcej warstw pływających (możesz zaznaczyć tę warstwę i skopiować do schowka STRL+C  i wkleić kilka razy przez CTRL+V).
Tu można zobaczyć demo
./kicia_demo/anchoredlayer/
./tekst_demo/anchoredlayer/

Pobierz projekt demo:
http://www.wysiwygwebbuilder.com/support/anchoredlayer/anchoredlayer.zip


Tutoriale powiązane tematycznie:
Tworzenie strony internetowej z elastycznej warstwy pływające
Korzystanie z warstw w WYSIWYG Web Builder

na podstawie : http://www.wysiwygwebbuilder.com/anchored_layers.html
Z zakotwiczonego warstwy można zakotwiczyć jednej lub więcej niż jednej stronie warstwy na stronach arkusza. Na przykład jeśli włączysz "Zakotwiczenie w lewo" i "prawo" Anchor następnie następnie warstwę potrwają jeśli rozmiar okna przeglądarki (offset do strony lewej i prawej granicy pozostanie taka sama). Ale można też zakotwiczyć tylko jedną granicę (lub wszystkie).
Oto przykład, jak ta funkcja może być użyta:








Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017