Jak zbudować stronę w tabeli układu strony?

Porady praktyczne > Krok 4 - Strony >

Jak zbudować stronę w tabeli układu strony?

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

WebSite X5 wykorzystuje unikatową tabelę układu, dzięki której twórca witryny podczas pracy dokładnie wie, jak strony będą wyglądały.

Strona jest przedstawiona w postaci tabeli o zmiennej liczbie wierszy i kolumn, które tworzą komórki zawierające treść.

Do poszczególnych komórek przeciąga się i upuszcza różne obiekty.

Kliknij aby zwinąć/rozwinąćZagadnienie: Jak ustawić tabelę układu strony?

Domyślnie tabela zawiera 2 wiersze i 2 kolumny, ale można wstawić więcej wierszy i kolumn, tak by uzyskać wystarczającą liczbę komórek, a następnie umieścić w nich odpowiednie obiekty.

Przyciski służą do wstawiania wierszy i kolumn. Tabela układu strony może zawierać do 64 wierszy i 12 kolumn.

Domyślnie wszystkie wiersze i komórki w tabeli układu strony mają tę samą szerokość i wysokość.

Szerokość kolumn w tabeli układu strony jest początkowo obliczana przez podzielenie całej szerokości strony (zdeterminowanej przez wzorzec) na liczbę kolumn na stronie. Jednak istnieje możliwość zmiany szerokości kolumny ręcznie. Wystarczy przeciągnąć znaczniki znajdujące się między kolumnami na dole tabeli:

Kliknij i przeciągnij znacznik, żeby przesunąć krawędź kolumny. Przesunięcie następuje o dziesiątą część dostępnej odległości. Większą dokładność można uzyskać przytrzymując wciśnięty klawisz CTRL - wtedy przesunięcie następuje o piksel.

Kliknij aby zwinąć/rozwinąć

Kliknij prawym przyciskiem myszy i z menu kontekstowego wybierz polecenie Ustaw szerokość kolumny, a następnie wpisz dokładną szerokość w pikselach.

Kliknij aby zwinąć/rozwinąć

Kliknij prawym przyciskiem myszy i z menu kontekstowego wybierz polecenie Ustaw równą szerokość kolumn - to polecenie zadziała na wszystkie kolumny.

Wysokość wiersza zależy od obiektów wstawionych w danym wierszu i tej wartości nie da się zmienić ręcznie.

Grafikę wiersza można zmienić za pomocą ustawień w oknie Formaty wierszy które otwiera się kliknięciem przycisku . Korzystając z opcji dostępnych w tym oknie, można także sprawić, by wiersze miały tę samą szerokość lub wysokość co okno przeglądarki gościa witryny.

Kliknij aby zwinąć/rozwinąćZagadnienie: Jak wstawić zawartość do tabeli układu strony?

Kiedy już zdefiniuje się wielkości komórek w tabeli układu strony, można rozpocząć wstawianie na stronie obiektów do poszczególnych komórek. Aby wstawić obiekt, należy wybrać ikonę reprezentującą go, przeciągnąć ją i upuścić w odpowiedniej komórce.

Jedna komórka może zawierać tylko jeden obiekt, ale jeden obiekt może zajmować kilka komórek. Jeśli obiekt zostanie upuszczony na krawędź między komórkami, będzie zajmował dwie komórki po obu stronach krawędzi. Uchwyty obiektu w komórce pozwalają przeciągnąć go tak, by zajmował także sąsiednie komórki.

Obiekty można przenosić między komórkami w tabeli układu strony, nawet wtedy, gdy zajmują kilka komórek, pod warunkiem, że w miejscu docelowym jest na nie dostatecznie dużo miejsca. Do przenoszenia obiektów między komórkami można także wykorzystać klawisze strzałek:

Klawisze strzałek: Przenoszą zaznaczony obiekt z jednej komórki tabeli do drugiej.
CTRL + klawisze strzałek: Ta kombinacja klawiszy przenosi zaznaczony obiekt do innego miejsca w tabeli układu strony z zachowaniem jego rozmiaru.
SHIFT + klawisze strzałek: Ta kombinacja klawiszy przesuwa zaznaczony obiekt w inne miejsce tabeli układu strony, ale zmienia jego rozmiar na większy (w porównaniu z innymi obiektami) albo na mniejszy (zajmujący mniej komórek).

Kliknięcie ikony obiektu prawym przyciskiem myszy powoduje rozwinięcie menu z poleceniami dotyczącymi zachowania obiektu w komórce: Wytnij, Kopiuj, Wklej, Usuń, Styl obiektu, Efekt.

Za pomocą tych poleceń można na przykład skopiować obiekt i wkleić go do innej komórki, albo usunąć obiekt. Usunąć obiekt można także przeciągając go poza tabelę układu strony lub zaznaczając i naciskając klawisz DEL. Należy pamiętać, że wstawienie obiektu do komórki zajmowanej już przez inny obiekt powoduje usunięcie tego ostatniego i zajęcie komórki przez nowy obiekt. Jednakże, jeśli przeciągnie się jeden obiekt z jakiejś komórki do innej zajmowanej przez drugi obiekt, to obiekty po prostu zamienią się miejscami.

Polecenia podmenu Styl obiektu | Kopiuj oraz Styl obiektu | Wklej rozwijanego z elementu menu Styl obiektu służą do kopiowania ustawień zdefiniowanych w oknie Styl obiektu dotyczących jednego obiektu i stosowania ich do obiektu w innej komórce.

Podobnie, polecenia podmenu Efekt | Kopiuj oraz Efekt | Wklej pozwalają skopiować efekt towarzyszący wyświetlaniu jednego obiektu i zastosować go do obiektu znajdującego się w innej komórce.

Wreszcie polecenia Styl obiektu | Edytuj... oraz Efekt | Edytuj... otwierają odpowiednio okna Styl obiektu oraz Efekt wyłaniania.

Kiedy obiekt jest już wstawiony do komórki, należy otworzyć okno, w którym zdefiniuje się właściwą jego zawartość. W tym celu można dwukrotnie kliknąć obiekt w komórce albo zaznaczyć obiekt i kliknąć przycisk Zawartość.

Nie wszystkie komórki tabeli układu strony muszą być wypełnione. Warto jednak pamiętać, że:

Puste komórki oznaczają puste miejsce na opublikowanej stronie,
Nie można zdefiniować grafiki dla pustego wiersza,
Puste komórki i wiersze ograniczają możliwość ustawienia określonej kolejności wyswietlania obiektów w witrynie responsywnej.

Tabele układu strony można modyfikować w dowolnej chwili.

Wprowadzając zmiany zawartości strony w witrynie responsywnej (gdy zaznaczone jest pole wyboru Witryna responsywna w oknie Rozdzielczości i projekt responsywny), należy mieć na uwadze zmianę wyglądu witryny w różnych widokach wyznaczonych przez poszczególne punkty kontrolne.

Aby optymalnie zaprojektować układ strony, warto pamiętać o pewnych prawach rządzących programem:

Szerokość strony jest zdeterminowana we wzorcu.
Szerokość kolumny w tabeli układu strony jest obliczana przez podzielenie szerokości strony na zadaną liczbę kolumn. Domyślnie wszystkie kolumny mają tę samą szerokość, ale można to zmienić.
Wszystkie komórki w jednym wierszu siatki układu strony mają tę samą wysokość. Domyślnie jest to wysokość najwyższego obiektu spośród wstawionych w tym wierszu.
Obiekty wstawione do komórek mają rozmiary automatycznie dopasowywane do rozmiarów komórek tabeli.

 


Więcej informacji:

-

Model komórki w programie WebSite X5