Joomla!WikiPL

W szablonie Beez projektant przewidział pięć głównych elementów strony. Każdy został objęty znacznikiem opakowującym div z atrybutem identyfikującym:

1. #header: nagłówek obejmujący: logo i narzędzia użytkownika (menu nawigacyjne, ścieżka powrotu, przełącznik rozmiaru czcionki, wyszukiwarka)
2. #left: lewy pasek nawigacyjny
3. #main (#main2): centralny obszar treści głównej
4. #right: prawy pasek dodatkowych informacji
5. #footer: stopka.

W kodzie źródłowym elementy te występują w takiej kolejności, jak wyszczególniona została powyżej. W takiej również kolejności ich zawartość zostanie umieszczona w dokumencie źródłowym. Jest to tzw. kolejność źródłowa - kolejność wpisywania elementów w pliku HTML, a w naszym przypadku w pliku index.php, na podstawie którego generowany jest źródłowy dokument HTML (ang. source ordered). Kod HTML odpowiada - zgodnie z zasadą rozdzielenia treści i prezentacji - jedynie za wyodrębnienie elementów treści oraz zidentyfikowanie i uporządkowanie ich logicznej struktury. Rozmieszczenia elementów na stronie dokonujemy za pomocą CSS.

Elementy blokowe (ang. block box) w HTML standardowo układają się w kolejności występowania, jeden pod drugim. Bez odpowiedniego sformatowania główne elementy składowe strony zostałyby więc rozmieszczone tak, jak widzimy na pierwszym z poniższych rysunków. Aby je rozmieścić zgodnie z zamierzeniem, potrzebne okazały się dodatkowe znaczniki "opakowujące". Projektant zastosował w tej roli uniwersalny znacznik div z identyfikatorami:

• #contentarea (#contentarea2): obejmujące lewy i prawy pasek oraz obszar centralny z treścią główną
• #wrapper: obejmujący obszar z treścią główną i prawy pasek.

Odwołania w HTML

Miejsce przechowywania - w pliku: index.php

15. $showRightColumn = $this->countModules('user1 or user2 or right or top');

16. $showRightColumn &= JRequest::getCmd('layout') != 'form';

17. $showRightColumn &= JRequest::getCmd('task') != 'edit'

Powyższy kod zawiera definicję zmiennej $showRightColumn ($pokazPrawyPasek). W pierwszym wierszu zastosowana jest funkcja $this->countModules (), zliczajaca moduły w pozycjach modułów umieszczonych w prawym pasku. Znaczenie tego wiersza można by "przetłumaczyć" następująco: $showRightColumn = 1 jeżeli w pozycji user1 albo w pozycji user2 albo w pozycji right albo w pozycji top został opublikowany jakiś moduł. W przeciwnym przypadku $showRightColumn= 0. Kolejne dwa wiersze służą zbadaniu, czy nie wystąpił jeden z dwóch przypadków: czy nie jest wyświetlany układ formularza (służącego do edycji artykułów) albo czy nie zostało wywołane zadanie edit. Wynik badania zostanie dołączony (dodany) do wyniku operacji z pierwszego wiersza. Całość interpretowana jest następująco: Jeżeli w pozycjach modułów umieszczonych w prawym pasku został opublikowany jakiś moduł i jeżeli nie został wywołany układ formularza, ani też nie zostało wywołane zadanie edit, to $showRightColumn = 1, czyli prawy pasek ma być widoczny. W przeciwnym przypadku $showRightColumn = 0, czyli prawy pasek ma być niewidoczny. Wyliczona wartość wykorzystywana jest w kodzie trzykrotnie: w wierszach #82 i #90 oraz instrukcji warunkowej rozpoczynającej się w wierszu #103.

W wierszach #82 i #90 zastosowana jest instrukcja echo i tzw. składnia dwukropka. Instrukcję w wierszu #82 odczytujemy następująco: jeżeli $showRightColumn = 1 wpisz 'contentarea2', a jeśli $showRightColumn = 0, wpisz identyfikator 'contentarea'. Podobnie z instrukcją w wierszu #90, gdzie mamy inne identyfikatory.

Miejsce przechowywania - w pliku: index.php

<!--wiersze #42 - #80-->
      <div id="header">
         <!-- kod nagłówka wiersze #43 - #78 -->
         <div class="wrap">&nbsp;</div>
      </div><!-- end header -->

Miejsce przechowywania - w pliku: index.php

82.       <div id="<?php echo $showRightColumn ? 'contentarea2' : 'contentarea'; ?>">

83.          <a name="mainmenu"></a>

84.          <div id="left">

85.             <jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />

86.          </div><!-- left -->

88.          <a name="content"></a>

89.          <div id="wrapper">

90.             <div id="<?php echo $showRightColumn ? 'main2' : 'main'; ?>">

91.                <?php if ($this->getBuffer('message')) : ?>

92.                <div class="error">

93.                   <h2>

94.                      <?php echo JText::_('Message'); ?>

95.                   </h2>

96.                   <jdoc:include type="message" />

97.                </div>

98.                <?php endif; ?>

100.                <jdoc:include type="component" />

101.             </div><!-- end main or main2 -->

103.             <?php if ($showRightColumn) : ?>

104.             <div id="right">

106.                <a name="additional"></a>

107.                <h2 class="unseen">

108.                   <?php echo JText::_('Additional Information'); ?>

109.                </h2>

111.                <jdoc:include type="modules" name="top" style="beezDivision" headerLevel="3" />

112.                <jdoc:include type="modules" name="user1" style="beezDivision" headerLevel="3" />

113.                <jdoc:include type="modules" name="user2" style="beezDivision" headerLevel="3" />

114.                <jdoc:include type="modules" name="right" style="beezDivision" headerLevel="3" />

116.             </div><!-- right -->

117.             <?php endif; ?>

119.          <div class="wrap"></div>

120.          </div><!-- wrapper -->

121.       </div><!-- contentarea -->

Miejsce przechowywania - w pliku: index.php

123.       <div id="footer">

124.          <p class="syndicate">

125.             <jdoc:include type="modules" name="syndicate" />

126.          </p>

128.          <p>

129.             <?php echo JText::_('Powered by');?> <a href="http://www.joomla.org/">Joomla!</a>

130.          </p>

132.          <div class="wrap"></div>

133.       </div><!-- footer -->

134.    </div><!-- all -->

Odwołania w CSS

#header

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

30. #header

31. {

32.    background: #fff;

33.    color: #000000;

34.    margin: 0;

35.    position: relative;

36.    text-align: right;

37.    border-bottom: solid 4px #ccc;

38. }

Style dodatkowe

Miejsce przechowywania: position.css

15. *

16. {

17.     margin: 0;

18.     padding: 0;

19. }

Dodatkowe informacje: position.css/*

Style dziedziczone

Miejsce przechowywania - plik: position.css

32. #all

33. {

34.    background: #FFFFFF;

35.    border: solid 1px #DBB0CD;

36.    color: #000000;

37.    font-size: 0.8em;

38.    margin: 0 auto;

39.    max-width: 1000px;

40.    padding: 0 3px 3px 3px;

41.    text-align: left;

42. }

Dziedziczona jest własność font-size.

Miejsce przechowywania - plik: position.css

21. body

22. {

23.    background: #F2E3ED;

24.    color: #000000;

25.    font-family: arial, helvetica, sans-serif;

26.    font-size: 100.1%;

27.    padding: 0px;

28.    text-align: center;

29. }

Dziedziczona jest własność: font-family.

Objaśnienie

Nagłówek jest osadzony wewnątrz elementu div#all opakowującego wszystkie elementy strony. Własność position: relative; umożliwia zastosowanie pozycjonowania absolutnego do elementów umieszczonych wewnątrz nagłówka - tutaj elementu div#fontsize.

#contentarea - #contentarea2

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

40. #contentarea, #contentarea2

41. {

42.    border: solid 0px #000;

43.    margin: 0;

44.    padding: 0px 0px 0px 0px;

45.    position: relative;

46.    overflow: hidden;

47. }

Style dodatkowe

Miejsce przechowywania: position.css

15. *

16. {

17.     margin: 0;

18.     padding: 0;

19. }

Dodatkowe informacje: position.css/*

Style dziedziczone

Miejsce przechowywania - plik: position.css

32. #all

33. {

34.    background: #FFFFFF;

35.    border: solid 1px #DBB0CD;

36.    color: #000000;

37.    font-size: 0.8em;

38.    margin: 0 auto;

39.    max-width: 1000px;

40.    padding: 0 3px 3px 3px;

41.    text-align: left;

42. }

Dziedziczone są własności: color, font-size i text-align.

Miejsce przechowywania - plik: position.css

21. body

22. {

23.    background: #F2E3ED;

24.    color: #000000;

25.    font-family: arial, helvetica, sans-serif;

26.    font-size: 100.1%;

27.    padding: 0px;

28.    text-align: center;

29. }

Dziedziczona jest własność: font-family.

Obejścia dla IE

Miejsce przechowywania - w pliku: ieonly.css

16. #contentarea,#contentarea2 { width: expression(document . body . clientWidth > 980 ? "980px" : "auto"); }

Miejsce przechowywania - w pliku: ieonly.css

18. .leading, #contentarea2, #main { zoom: 1; }

#wrapper

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

48. #wrapper { margin: 0 0 0 21%}

Objaśnienie

Pojemnik div#wrapper obejmuje obszar głównej treści (div#main lub div#main2). W arkuszu stylów zdefiniowana jest tylko jedna właściwość - lewy margines wielkości 21%. W ten sposób tworzone jest miejsce na lewy pasek (taką szerokość ustalono w stylu #left). Przeglądarka wylicza owe 21% z szerokości obszaru obejmującego, a więc #contentarea lub #contentarea2.

Style dodatkowe

Miejsce przechowywania: position.css

15. *

16. {

17.     margin: 0;

18.     padding: 0;

19. }

Dodatkowe informacje: position.css/*

Style dziedziczone

Miejsce przechowywania - plik: position.css

32. #all

33. {

34.    background: #FFFFFF;

35.    border: solid 1px #DBB0CD;

36.    color: #000000;

37.    font-size: 0.8em;

38.    margin: 0 auto;

39.    max-width: 1000px;

40.    padding: 0 3px 3px 3px;

41.    text-align: left;

42. }

Dziedziczone są własności: color, font-size i text-align.

Miejsce przechowywania - plik: position.css

21. body

22. {

23.    background: #F2E3ED;

24.    color: #000000;

25.    font-family: arial, helvetica, sans-serif;

26.    font-size: 100.1%;

27.    padding: 0px;

28.    text-align: center;

29. }

Dziedziczone jest własność: font-family.

Obejścia dla IE

Miejsce przechowywania - w pliku: ieonly.css

20. #wrapper

21. {border:solid 0px; width:100%}

#left

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

49. #left

50. {

51.    background: #FFFFFF;

52.    border-right: solid 0px #EEEEEE;

53.    float: left;

54.    margin: 20px 0 0 0;

55.    width: 21%;

56. }

Objaśnienie

Deklarowanie własności background: #FFFFFF; jest zbyteczne, ponieważ pasek boczny położony jest na białym obszarze obejmującego go pojemnika div#contentarea lub div#contentarea2. Zbyteczna jest również deklaracja ramki po prawej stronie, skoro jej grubość została ustalona na 0px. Istotne są natomiast trzy kolejne właściwości. Właściwość float: left; przenosi element #left na lewą stronę i umożliwia opływanie go z prawej strony przez elementy następujące po nim. Właściwość width:21% ustala zmienną szerokość lewego paska, zależną od szerokości obszaru div#contentarea lub div#contentarea2. 20-pikselowy margines określony w deklaracji margin: 20px 0 0 0; odsuwa nieco lewy pasek od nagłówka.

Style dodatkowe

Miejsce przechowywania: position.css

15. *

16. {

17.     margin: 0;

18.     padding: 0;

19. }

Dodatkowe informacje: position.css/*

Style dziedziczone

Miejsce przechowywania - plik: position.css

32. #all

33. {

34.    background: #FFFFFF;

35.    border: solid 1px #DBB0CD;

36.    color: #000000;

37.    font-size: 0.8em;

38.    margin: 0 auto;

39.    max-width: 1000px;

40.    padding: 0 3px 3px 3px;

41.    text-align: left;

42. }

Dziedziczone są własności: color, font-size i text-align.

Miejsce przechowywania - plik: position.css

21. body

22. {

23.    background: #F2E3ED;

24.    color: #000000;

25.    font-family: arial, helvetica, sans-serif;

26.    font-size: 100.1%;

27.    padding: 0px;

28.    text-align: center;

29. }

Dziedziczone jest własność: font-family.

#right

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

49. #right

50. {

51.    color: #000;

52.    float:left;

53.    width: 28%;

54.    padding-top:10px

56. }

Style dodatkowe

Miejsce przechowywania: position.css

15. *

16. {

17.     margin: 0;

18.     padding: 0;

19. }

Dodatkowe informacje: position.css/*

Style dziedziczone

Miejsce przechowywania - plik: position.css

32. #all

33. {

34.    background: #FFFFFF;

35.    border: solid 1px #DBB0CD;

36.    color: #000000;

37.    font-size: 0.8em;

38.    margin: 0 auto;

39.    max-width: 1000px;

40.    padding: 0 3px 3px 3px;

41.    text-align: left;

42. }

Dziedziczone są własności: font-size i text-align.

Miejsce przechowywania - plik: position.css

21. body

22. {

23.    background: #F2E3ED;

24.    color: #000000;

25.    font-family: arial, helvetica, sans-serif;

26.    font-size: 100.1%;

27.    padding: 0px;

28.    text-align: center;

29. }

Dziedziczone jest własność: font-family.

Objaśnienie

Prawy pasek osadzony jest wewnątrz elementu opakowującego div#wrapper razem z obszarem przeznaczonym na treść główną - div#main lub div#main2. W stylach #right oraz #main2 ustawiono właściwość float:left; i ustalono szerokości obu elementów (64% dla #main2 i 28% dla #right, co razem daje 92% szerokości obszaru div#wrapper - pozostałe 8% zapewnia miejsce na odstępy między kolumnami.

Ustawienie szerokości jest w przypadku elementów pływających konieczne. Obszar div#main2 wypełniając 64% szerokości elementu #wrapper, pozostawia miejsce, które jest zajmowane przez następujący po nim w kodzie źródłowym prawy pasek. Dzięki określeniu szerokości elementu pływającego przeglądarka potrafi zrobić miejsce na element opływający. Szerokość może być stała, określona w px czy emach, a także zmienna, wyrażona procentowo, jak w tym przypadku.

W układach opartych na elementach pływających ważna jest również kolejność źródłowa - kod elementu pływającego musi być umieszczony przed kodem elementu opływającego.

#main #main2

Podstawowy styl

Miejsce przechowywania - w pliku: position.css

67. #main2

68. {

69.    background: #fff;

70.    width:64%;

71.    padding: 25px 20px 20px 20px;

72.    position: relative;

73.    min-height:520px;

74.    float:left;

77. }

79. #main

80. {

81.    background: #fff;

82.    margin: 0 0px 0 0;

83.    padding: 25px 20px 20px 20px;

84.    position: relative;

85. }

Style dodatkowe

Miejsce przechowywania: position.css

15. *

16. {

17.     margin: 0;

18.     padding: 0;

19. }

Dodatkowe informacje: position.css/*

Style dziedziczone

Miejsce przechowywania - plik: position.css

32. #all

33. {

34.    background: #FFFFFF;

35.    border: solid 1px #DBB0CD;

36.    color: #000000;

37.    font-size: 0.8em;

38.    margin: 0 auto;

39.    max-width: 1000px;

40.    padding: 0 3px 3px 3px;

41.    text-align: left;

42. }

Dziedziczone są własności: color, font-size i text-align. Miejsce przechowywania - plik: position.css

21. body

22. {

23.    background: #F2E3ED;

24.    color: #000000;

25.    font-family: arial, helvetica, sans-serif;

26.    font-size: 100.1%;

27.    padding: 0px;

28.    text-align: center;

29. }

Dziedziczone jest własność: font-family.

Objaśnienie

Obszar centralny, przeznaczony na treść główną osadzony jest wewnątrz elementu opakowującego div#wrapper razem z obszarem przeznaczonym na prawy pasek - div#right. Arkusz stylów zawiera alternatywne definicje stylów dla #main i #main2. Identyfikator #main2 nadawany jest centralnemu obszarowi wówczas, gdy wyświetlany jest prawy pasek z modułami towarzyszącymi treści głównej.

Ustawienie float:left w stylu #main2 jest przekształca obszar z treścią główną w element pływający o szerokości mniejszej niż szerokość elementu obejmującego, dzięki czemu możliwe jest "wpłynięcie" na pozostawione miejsce prawego paska. Ustawienie szerokości obszaru #main2 jest potrzebne, aby pozostawić niewielki odstęp między kolumną centralną a prawym paskiem.

Własność position: relative; powoduje, że wszystkie elementy pozycjonowane wewnątrz tego elementu będą pozycjonowane względem jego położenia.

Dziękujemy za wkład

» Stefan Wajda [zwiastun],