Ozdobniki
Obrazki jako tło
To o czym teraz napiszę trzeba stosować z umiarem. Dawniej graficy tworzyli strony będące swego rodzaju dziełami sztuki. Na szkoleniach, wspieranych przez firmę ADOBE, projekt strony robi się w programie do grafiki PHOTOSHOP. Strona ma być dopracowana graficznie. Dopiero później zaprzęgamy do tego inny flagowy program ADOBE — DREAMWEAVER. Jeśli korzysta się z darmowych notatników, trudniej zrobić dopracowany graficznie projekt strony. W tym miejscu pokażę dwa sposoby tworzenia elementów ozdobnych - jeden z wykorzystaniem grafiki, drugi bez.
Tym pierwszym elementem będzie umieszczony w nagłówku ozdobny napis Tradycje okresu Bożego Narodzenia. Do tego potrzebne są 3 elementy graficzne utworzone z jednego, gdzie środkowy fragment można dowolnie rozciągać. Oto one:
Wstawiając te elementy jako tło komórek tabelki, możemy otrzymać ozdobny napis.
| Tradycje okresu Bożego Narodzenia |
Tabelka nie może mieć żadnych odstępów. Co więcej, obramowanie komórek (chociaż niewidoczne) musi być pojedyncze. Tabelkę dodajemy w divie naglowek. Ma ona jeden wiersz (tr) i trzy komórki (td). Komórki lewa i prawa muszą być ściśle wymierzone i mieć ustalone tło (obrazki powyżej). Komórka środkowa dopasowuje się do długości wpisu. W komórce środkowej tekst został dodatkowo sformatowany z zastosowaniem cienia.
10. <div id="naglowek">
11. <img src="graf/nag_szop.gif" style="float: left;">
12. <table border="0" style="margin: 0 auto; padding: 0; border-collapse: collapse;">
13. <tr><td class="komlew"></td>
14. <td class="komsrd">Tradycje okresu Bożego Narodzenia</td>
15. <td class="komprw"></td>
16. </tr></table>
17. </div>
O stylu wspomniałem powyżej. Teraz dokładny kod, osobno dla każdej komórki.
70. width: 60px; /* szerokość komórki */
71. height: 54px; /* wysokość komórki */
72. background-image: url(graf/tabnagl.gif); /* Tło komórki */
73. }
76. padding: 13px 5px 10px 5px; /* odstęp wewnętrzny */
77. font-size: 22px; /* rozmiar fonta */
78. font-family: ''times new roman''; /* czcionka */
79. font-weight: bold; /* pogrubienie */
80. color: #3197E0; /* kolor czcionki */
81. background-image: url(graf/tabnags.png); /* Tło komórki */
82. text-shadow: 1px 1px #F49016; /* cień tekstu */
83. }
86. width: 40px; /* szerokość komórki */
87. height: 54px; /* wysokość komórki */
88. background-image: url(graf/tabnagp.gif); /* Tło komórki */
89. }
Ostylowanie tekstu
Drugim elementem będzie ozdobny napis MENU w lewej kolumnie. Tym razem za pomocą arkusza stylów określimy wygląd tła. Na pewno tłem nie jest obrazek, to tylko gra kolorów.
Do znanych właściwości z innych selektorów dochodzi tutaj box-shadow – cień pudełka. Zastosowane zostały cienie wewnętrzne i zewnętrzne z przeźroczystością. Nie będę go tutaj omawiał. Potrzebny kod znajdziesz w paczce pod nazwą ozdobny_napis.txt. Należy go wkleić na końcu dokumentu styl.css (aby ciągłość numeracji z przedstawioną w tym poradniku).
Na stronie możesz zastosować ten sposób utworzenia napisu menu, lub skorzystać z gotowego obrazka.
Oto obie propozycje:
19. <div id="lewak">
20. <p class="blk"><img src="graf/obrmenu.gif"></p>
21.
22. <p class="blk"><img src="graf/grafmen.gif"></p>
23. </div>
19. <div id="lewak">
20. <p class="ozdnag">MENU></p>
21.
22. <p class="blk"><img src="graf/grafmen.gif"></p>
23. </div>
Belki
I jeszcze jedno. Na długich stronach dawniej stosowane były linie (belki) rozdzielające. Tworzenie ozdobnych linii, to też była sztuka graficzna. Obecnie linii prawie się nie stosuje. Zresztą, podstrony nie zawierają zbyt dużo treści. My taką linię zastosujemy sobie do oddzielenia menu od obrazka poniżej. I ozdobną linią będziemy kończyć zawartość diva tresc.
19. <div id="lewak">
20. <p class="ozdnag">MENU></p>
21.
22. <p class="blk"><img src="graf/barlew.png"></p>
23. <p class="blk"><img src="graf/grafmen.png"></p>
24. </div>
26. <div id="tresc">
27. <h1>Tradycje okresu Bożego Narodzenia</h1>
28. <p>Tu jest tekst akapitu.</p>
29. <p class="blk"><img src="graf/belka.gif"></p>
30. </div>
Ozdobny tytuł
Do nadania oryginalnego wyglądu napisu w nagłówku posłużyłem się obrazkami. Tutaj podam przykład, jak ozdobić nagłówek posługując się odpowiednim stylem. Tak może wyglądać nagłówek bez stosowania własnego stylu.
Tradycje okresu Bożego Narodzenia
A tak po zastosowaniu stylu, w którym dodaliśmy cienie liter, tło gradientowe i cień.
Tradycje okresu Bożego Narodzenia
Jeśli nie chcemy, aby ten ozdobny pojemnik na tytuł ciągnął się na całej szerokości strony, tylko był dostosowany do długości wpisu (różnego na różnych podstronach), zastosujemy znacznik <span></span>. Znacznik span jest elementem liniowym, a h1 elementem blokowym. Gdybyśmy chcieli znaleźć analogie z innych programów np. WORD opiszemy to tak: Akapit jest zawsze blokiem – nie można wyrównać części akapitu do np. prawej strony. Wyrównanie dotyczy całego akapitu. Chcesz tekst wyrównać w inny sposób, musisz utworzyć nowy akapit (lub istniejący podzielić na 2). Możesz pogrubić dowolny fragment tekstu, w szczególności tylko jedną literę. nie ma to żadnego wpływu na pozostałe litery. Taki element nazywamy liniowym – działa tylko na wybranych znakach.
W dodanym kodzie masz ustawienie nagłówka na środku strony. Jeśli chcemy dodać ozdobny pojemnik, musimy po znaczniku h1 wpisać znacznik span, którego styl też został określony w dodatkowym kodzie. Zmiana nastąpiła w wierszu 27.
26. <div id="tresc">
27. <h1><span class="ha1">Tradycje okresu Bożego Narodzenia</span</h1>
28. <p>Tu jest tekst akapitu.</p>
29. <p class="blk"><img src="graf/belka.gif"></p>
30. </div>
Teraz ten tytuł wygląda tak: