--=REKLAMA=--

Kolejność źródłowa

Z Joomla!WikiPL

Kolejność źródłowa i jej znaczenie

W projektowaniu układu strony ważne znaczenie ma kolejność źródłowa [Source ordering], czyli kolejność pojawiania się elementów strony w pliku HTML. W szablonach dla Joomla!/Mambo zależy ona od kolejności wpisywania elementów strony w pliku lub plikach generujących dokument HTML (zwykle w pliku index.php - głównym pliku szablonu; w rozbudowanych rozwiązaniach, w których część kodu jest przenoszona do plików dołączanych, o kolejności źródłowej decyduje kolejność wywoływania plików dołączonych).

Zarówno przeglądarki, jak i inne urządzenia odczytujące dokumenty HTML, a więc czytniki ekranu czy wyszukiwarki internetowe, odczytują treść stron internetowych w takiej kolejności, w jakiej została ona umieszczona w dokumencie HTML.

Nie zawsze, a nawet dość często, kolejność źródłowa nie jest zgodna z wymogami dostępności strony czy optymalności pod kątem wyszukiwarek internetowych. Dostępność wymaga, aby użytkownicy dotarli do najważniejszych treści strony jak najszybciej, a więc najlepiej byłoby, aby treść główna znajdowała się jak najbliżej początku dokumentu. Podobnie jest z optymalizacją pod kątem wyszukiwarek internetowych. Większość wyszukiwarek ogranicza podczas przeszukiwania ilość czytanego kodu. Jeśli więc na początku dokumentu znajduje się dużo kodu z treściami pobocznymi, może się zdarzyć, że wyszukiwarki w ogóle nie dotrą do treści głównej.

Kolejność źródłowa a prezentacja wizualna

Jeśli wyświetlić stronę bez żadnego formatowania, to elementy blokowe umieszczane są od góry w dół, a elementy liniowe kolejno od lewej do prawej krawędzi, a następnie w dół - w językach lewostronnych, albo od prawej do lewej krawędzi w językach z odwrotnym kierunkiem pisma.

Domyślny układ treści można modyfikować za pomocą udostępnianych przez CSS właściwości pozycjonujących wyszczególnionych w dalszej części. Projektant może rozmieszczać elementy strony w dość swobodny sposób, niekoniecznie w takiej kolejności, w jakiej są umieszczone w dokumencie HTML. O wizualnym rozmieszczeniu elementów na stronie, o ich wzajemnym układzie decyduje określone w arkuszu CSS właściwości formatujące. Inaczej mówiąc, projektant może zmieniać kolejność pojawiania się elementów w kodzie HTML tak, by dostosować ją do wymagań witryny, w tym zapewniających większą dostępność oraz optymalizację pod kątem wyszukiwarek internetowych.

Pozycjonujące właściwości CSS

CSS udostępnia bogaty zestaw właściwości pozycjonujących:

  • position:
    • absolute - bezwzględna albo absolutna,
    • relative - względna albo relatywna
    • fixed - stała albo ustalona,
    • static - statyczna
  • left, right, top, bottom,
  • visibility
    • visible: widoczny
    • hidden: ukryty
    • collapse: złożony
    • inherit: odziedziczone (wartość domyślna)
  • display
    • block: przekształca w element blokowy, dodaje znaczniki początku i końca wiersza
    • inline: przekształca element w liniowy (wstawkę)
    • list-item: ustala element jako element listy
    • none: wyłącza wyświetlanie elementu
  • float:
    • left: przemieszcza do lewej krawędzi elementu obejmującego
    • right: przemieszcza do prawej krawędzi elementu obejmującego
    • none: powstrzymuje pływanie elementów (wartość domyślna)
  • clear:
    • left: tamuje opływanie elementu z lewej strony
    • right: tamuje opływanie elementu z prawej strony
    • both: tamuje opływanie elementu z obu stron
    • none: pozwala na opływanie elementu z obu stron; wartość domyślna

Kilka zasad ogólnych

  • Elementy pozycjonowane bezwzględnie (position: absolute;) można umieszczać w dokumencie (x)HTML w dowolnej kolejności. Elementy pozycjonowane bezwzględnie zachowują się tak, jakby zostały wyjęte z toku dokumentu, zajmowana przez nie przestrzeń jest usuwana, tak jakby element nie istniał w ogóle. Rozmiar i położenie ustalane są w stosunku do bloku obejmującego za pomocą własności width i height oraz left, right, top, bottom.Elementy pozycjonowane bezwzględnie nie wpływają na inne ani swoim rozmiarem, ani swoim położeniem.
  • Elementy pozycjonowane względnie (position: relative;) są przemieszczane o wartości left, right, top i bottom w stosunku do swojego "naturalnego" położenia, wyznaczanego przez kolejność źródłową. Elementy pozycjonowane względnie tworzą nowy kontekst dla elementów umieszczonych wewnątrz (stają się elementami obejmującymi albo zawierającymi)
  • Kod HTML elementu pływającego (opływanego, z właściwością float: left | right | none) musi się znajdować przed kodem elementu opływającego; swobodę w ustalaniu kolejności źródłowej zapewnia możliwość zamiany w elementy pływające wszystkich elementów, które chcemy pozycjonować za pomocą właściwości float, np. kolumny z treścią główną i bocznych pasków.

Dziękujemy za wkład

» Stefan Wajda [zwiastun],