Autoplagiat jest stylowy.
Często inspiracją do nowego projektu są rzeczy, które widzimy wokół siebie. Reklama, artykuł w gazecie albo okładka książki mogą stanowić zaczątek bardzo ciekawych pomysłów. Podczas pisania i projektowania tej książki wpadł mi do głowy pewien pomysł. A może by utworzyć taki projekt, który w jak najwierniejszy sposób odtwarzałby wygląd samej książki? Wykonanie takiego zadania wymagałoby znajomości różnych technik, a także całego wachlarza innych umiejętności i stanowiłoby idealny sposób na to, aby w jednym miejscu zebrać wszystko, co zostało dotychczas omówione w tej książce. Byłoby to niespotykane wyzwanie — w najlepszy możliwy sposób odtworzyć projekt, którego nie utworzyłem ja, lecz ktoś inny.
Gdy otrzymałem ostateczny projekt książki, wiedziałem, że muszę podjąć to wyzwanie. Dlatego też ten projekt będzie polegał na odtworzeniu układu graficznego książki, którą masz przed sobą i przełożeniu go na HTML oraz CSS. Zadanie to na pewno nie zostanie zrealizowane w stu procentach, a to, czego nie zrobimy (oraz powody, dla których tego nie zrobimy) będzie tak samo pouczające, jak wszystko to, co uda nam się osiągnąć.
Chcemy odtworzyć wygląd i układ graficzny książki, którą w tej chwili czytasz, a więc naszym głównym celem jest to, abyś, pracując nad tym projektem, miał wrażenie déjà vu. Na bardziej praktycznym poziomie cel jest dwojaki:
Cele te są określone bardzo generalnie, ale w tym projekcie prawie każdy jego fragment będzie samodzielnym miniprojektem, dlatego trudno sprecyzować jakieś szczególne cele. Trzeba po prostu skoczyć do wody i zobaczyć, dokąd poniesie nas prąd rzeki — a więc, do roboty!
Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki.
Z serwera FTP pobierz pliki wykorzystywane w projekcie 13. Jeśli masz zamiar poeksperymentować w domu, wczytaj plik ch13proj.html
do dowolnego edytora. Plik ten będziesz edytował, zapisywał i wczytywał ponownie w miarę postępu prac nad projektem.
Przeglądając tę książkę na pewno zwrócisz uwagę na jeden fakt — każda strona to dwie kolumny, z których jedna zawiera zasadniczy tekst książki, natomiast druga znajduje się na jej boku i ma postać paska. Na wydruku pasek boczny zawsze znajduje się na zewnętrznej krawędzi strony, po stronie przeciwległej do grzbietu książki. Moglibyśmy sprawić, aby pasek boczny przeskakiwał z jednej krawędzi strony na drugą, ale byłoby to bardzo uciążliwe dla czytelnika. Dlatego umieścimy go na naszym projekcie z prawej strony.
Decydując się na takie rozwiązanie, musimy jednak znaleźć sposób na to, aby notatki i zrzuty rysunków umieścić w odpowiednich miejscach. Najprostszym wyborem może się wydawać po prostu określenie ich pozycji, ale jest w tym ukryte pewne niebezpieczeństwo — jeżeli na pasku bocznym umieścimy dwa elementy zbyt blisko siebie, prawdopodobnie będą one na siebie nachodzić, a my nie będziemy mieli żadnej możliwości, aby temu zapobiec. Jeżeli umieścimy je na pasku swobodnie, możemy skorzystać z właściwości clear, aby nie nachodziły na siebie. Jest to dla nas dużo lepsze rozwiązanie, choć niesie ze sobą kolejne problemy, o czym przekonamy się już wkrótce.
Ponadto musimy upewnić się, że treść, którą chcemy umieścić na stronie, ma odpowiednią strukturę, tak aby można było w niej zastosować odpowiednie style. Akapity powinny być zawarte w elemencie p
, nagłówki podrozdziałów w elementach h3
i
h4
, notatki umieszczone na pasku bocznym powinny być odpowiednio sklasyfikowane jako elementy
div
o poszczególnych atrybutach class
i tak dalej. Nie będziemy się jednak nad tym teraz zastanawiać, ponieważ na każdy element przyjdzie kolej podczas naszej pracy nad projektem.
Ponieważ naszym celem jest odtworzenie układu graficznego książki, możemy przyjąć ją za punkt odniesienia podczas pracy nad projektem. Do problemu możemy podejść na wiele sposobów; my zaczniemy od zdefiniowania fundamentalnej zasady określającej wygląd książki, czyli od podziału na dwie kolumny, w którym notatki i zrzuty obrazów znajdują się na pasku bocznym.
Wstawiając na stronie pasek boczny, musimy tylko upewnić się, czy istnieje ramka, która oddziela go od treści zasadniczej dokumentu oraz czy w rzeczywistości tworzą go notatki i zrzuty. Okazuje się, że ten problem wcale nie jest taki prosty, jak się wydaje.
Możemy umieścić całą treść zasadniczą w elemencie div
, a następnie do elementów znajdujących się na pasku bocznym dodać ujemny prawy margines, który sprawi, że wszystkie elementy swobodne zostaną przeniesione do paska. W ten sposób będziemy mogli określić prawą ramkę dla treści zawartej w elemencie div
, zapewniając jednocześnie, że wysokość ramki będzie równa wysokości samej treści. Elementy swobodne wraz z ujemnym marginesem mogą być umieszczone bezpośrednio obok ramki. Niestety, na przeszkodzie temu rozwiązaniu stoi sporo robaków, zagnieżdżonych w programie Internet Explorer 6 dla Windows. Są one tak szkodliwe, że prowadzą do prawie całkowitego rozpadu układu graficznego IE dla Windows, co więcej, podobnych skutków możemy się spodziewać w większości innych przeglądarek.
Możemy rozbić treść na wiele elementów div
, których atrybut class
ma wartości, takie jak main
oraz sidebar
. W ten sposób unikniemy robaków zagnieżdżonych w IE dla Windows, a jednocześnie ułatwimy sobie dalszą pracę. Przyjęcie takiego rozwiązania oznaczałoby jednak mozolne opracowywanie odpowiednich struktur, dlatego na nie również się nie zdecydujemy.
A może by tak nadać różnym elementom „z górnego poziomu” dokumentu szeroki prawy margines, który będzie otwierał pusty obszar? W ten sposób unikniemy dodawania elementu div
tylko po to, aby utworzyć kolumny, a także ominiemy błędy w programie IE dla Windows. Musimy mieć pewność, że uwzględnimy wszystkie elementy, które są dziećmi elementu body
; na szczęście w przypadku tej treści nie powinniśmy mieć trudności. Utworzenie pierwszych reguł w naszym arkuszu stylów przyniesie efekt pokazany na rysunku 13.1.
<head> <title>Rozdział 13.</title> <style type="text/css"> body {margin: 0; padding: 0; color: black; background: white;} h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%; margin-left: 8%; padding: 0;} ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;} div.listing pre {margin: 0;} </style> </head>
Zastosowanie marginesów w elementach znajdujących się wewnątrz elementu body daje efekt kolumn
Nagłówek jest wcięty dalej niż reszta tekstu, ponieważ jest on zawarty w elemencie div
. W ten sposób elementy znajdujące się wewnątrz nagłówka elementu div
zostały wyrównane zarówno przez lewy margines elementu div
, jak i przez swoje własne lewe marginesy. Naprawimy to w następnym punkcie.
W ten sposób sprawiliśmy, że szerokość kolumny zawierającej tekst zasadniczy dokumentu odpowiada 70% szerokości elementu body
. W rzeczywistości nie jest to oczywiście kolumna, jedynie tworzy takie wrażenie. Powód, dla którego użyliśmy wartości 22%
dla prawego marginesu, już za chwilę stanie się jasny. Marginesy zdefiniowane dla listy są trochę szersze niż inne elementy, ponieważ chcemy, aby elementy listy zostały nieco wcięte względem reszty tekstu. Wstawiliśmy regułę dla div.listing pre
, aby uniknąć problemów z IE dla Windows w toku dalszej pracy. (Regułę tę napisalibyśmy wcześniej czy później, ale wstawiając ją w tym miejscu, unikniemy niejasności podczas dalszej pracy nad projektem).
Teraz jeszcze musimy znaleźć odpowiedź na pytanie, jak narysować linię między główną kolumną a paskiem bocznym. Możemy narysować ramkę z prawej strony każdego elementu, do którego właśnie dodaliśmy 22% margines, ale wówczas musielibyśmy wprowadzić pionowe oddzielenie w ramach dopełnienia, a to wprowadziłoby bałagan do naszego projektu. Ponadto nie wszystkie elementy dotykają linii oddzielenia. Gdyby taka linia została utworzona z ramek elementów zawierających tekst zasadniczy naszego dokumentu, wszystkie ramki dotykałyby jej.
Zamiast tego pożyczymy pewien trik od starszych stron WWW i zmodyfikujemy go trochę. Pamiętasz triki z 1-pikselowymi obrazami GIF? Skorzystamy z jednego z nich — weźmiemy 1-pikselowy obraz GIF, który ma odpowiedni odcień niebieskiego, i zastosujemy go w tle elementu body
. Jeżeli umieścimy go w odpowiednim miejscu i powielimy wyłącznie w pionie, otrzymamy linię dzielącą, taką jak na rysunku 13.2.
<style type="text/css">
body {margin: 0; padding: 0; color: black;
background: white url(blue.gif) 80% 0 repeat-y;}
h1, h2, h3, h4, h5, p, pre, table, div
{margin-right: 22%;
margin-left: 8%; padding: 0;}
Prosty obraz tła elementu body tworzy oddzielenie między kolumnami
Pamiętasz, jak ustawialiśmy wszystkie prawe marginesy na 22%
? Z uwagi na to, że prawe marginesy mają wartość 22%
, a linia znajduje się w odległości 20% od prawej krawędzi elementu body
, pozostało nam 2%
miejsca między krawędzią elementów a linią. W ten sposób utworzyliśmy niewielki dystans między tekstem zasadniczym a linią oddzielającą.
Trzy obrazy podglądu, które znajdują się na pierwszej stronie projektu, nie są częścią nagłówka; nie znajdują się one nawet w bieżącym pliku z projektem. Zajmiemy się nimi w następnym podrozdziale.
Zdefiniowaliśmy już ustawienia kolumny zawierającej tekst zasadniczy, a więc możemy zająć się nagłówkiem — jasnoniebieskim pojemnikiem, który rozpoczyna każdy projekt, określając jego numer, tytuł oraz epigram dla niego. Kod dla nagłówka wygląda następująco:
<div id="masthead"> <h1>13</h1> <h2><cite>Eric Meyer o CSS</cite> w CSS</h2> <blockquote>Autoplagiat jest stylowy.</blockquote> <div id="attrib">—Alfred Hitchcock</div> </div>
Dzięki elementowi div
, który zawiera całą treść nagłówka, utworzenie niebieskiego pojemnika jest w miarę proste. Chcemy, aby nagłówek wypełnił całą przestrzeń między lewą krawędzią elementu body
a linią oddzielającą — efekt ten możemy osiągnąć przy użyciu marginesów. Ramka również jest prosta, więc ustaw 1-pikselową ramkę wokół prawej i dolnej krawędzi nagłówka. Wreszcie, aby treść nie znalazła się zbyt blisko górnej lub dolnej krawędzi nagłówka, zmienimy wartość dopełnienia dla elementu div
.
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;} div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;} </style>
IE dla Windows wyświetli tekst napisany kapitalikami za pomocą wielkich liter. Technicznie jest to dozwolone w CSS1, ale efekt może być inny niż ten, którego się spodziewasz. W naszym projekcie będziemy nadal korzystać z kapitalików, ale pamiętaj, aby mieć tę kwestię na uwadze podczas tworzenia własnych projektów.
Aby odpowiednio sformatować epigram, potrzebujemy tylko kilku stylów. Cytat, zawarty w elemencie blockquote
, powinien być napisany czcionką nieco mniejszą od normalnej kursywy. Dla autora cytatu czcionka powinna być taka sama z tym, że musimy przenieść nazwisko do prawej krawędzi i napisać je kapitalikami, tak jak to przedstawiono na rysunku 13.3.
div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;} div#masthead blockquote {font-size: 90%; font-style: italic;} div#attrib {font-size: 90%; font-style: italic; text-align: right; font-variant: small-caps;} </style>
Ogólne zdefiniowanie nagłówka za pomocą ramek i tła
Nasz projekt zaczyna coraz lepiej wyglądać. Pozostała jeszcze lewa krawędź dokumentu, która na razie robi wrażenie nieco postrzępionej. Strona wyglądałaby dużo ładniej, gdyby wszystkie jej elementy zostały wyrównane do jednej linii, ale to wymagałoby zdefiniowania dla nich takiego samego lewego marginesu. Zacznijmy od elementu blockquote
i jego lewego marginesu, a także pozostałych krawędzi.
div#masthead blockquote {font-size: 90%; font-style: italic; margin: 2em 22% 0.5em 10%;}
Marginesy górny oraz dolny posłużą oczywiście do tego, aby oddzielić nagłówek od treści innych nagłówków. Prawy margines jest wystarczająco duży, abyśmy mieli pewność, że nawet długi cytat nie sięgnie zbyt blisko linii oddzielającej, natomiast zadaniem lewego marginesu jest wyrównanie treści cytatu z tekstem zasadniczym dokumentu. Teraz dokonamy podobnych zmian w elementach h1
oraz h2
i zdefiniujmy rozmiar ich czcionek.
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;} h1 {font-size: 300%; margin: 0.5em 0 0.5em 10%;} h2 {font-size: 200%; margin: 0 0 0.66em 10%;} div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;}
Na pierwszy rzut oka wszystko wygląda dobrze, ale w naszych stylach ukrył się pewien mały błąd. Aby go ujawnić, nadamy dolną krawędź elementowi h1
.
h1 {font-size: 300%; border-bottom: 2px solid white; margin: 0.5em 0 0.5em 10%;}
Problem polega na tym, że ramka rozciąga się od linii oddzielającej do lewej strony numeru 13 — nie jest natomiast kontynuowana dalej, do lewej krawędzi okna przeglądarki. Aby to naprawić, musimy pozbyć się lewego marginesu i zastąpić go lewym dopełnieniem.
h1 {font-size: 300%; border-bottom: 2px solid white; margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
Wreszcie musimy zmienić czcionkę tytułu, tak aby wyglądał on mniej więcej tak samo jak na wydruku. Wykorzystanie takiej samej czcionki nie leży w granicach naszych możliwości, ale możemy przynajmniej spróbować przybliżyć wygląd naszej czcionki do wersji drukowanej, korzystając z kapitalików
. Ponieważ wszystkie tytuły i nagłówki (z wyjątkiem elementów h5
) wyglądają w książce tak samo, ustawimy je tak, aby były napisane kapitalikami. Efekt jest przedstawiony na rysunku 13.4.
ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;} h1, h2, h3, h4 {font-variant: small-caps;} h1 {font-size: 300%; border-bottom: 2px solid white; margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu
Być może myślisz, że łatwo zmienić czcionkę elementu za pomocą CSS, ale prawda jest taka, że masz do wyboru tylko najbardziej popularne czcionki. Wynika to z tego, że przeglądarka WWW jest całkowicie uzależniona od czcionek zainstalowanych na komputerze użytkownika. Możesz zastosować definicję, zgodnie z którą dany element będzie wyświetlony za pomocą czcionki New Century Schoolbook, taką, jak ta:
p {font-family: "New Century Schoolbook", serif;}
Definicja ta przyniesie pożądany efekt na każdym komputerze, na którym jest zainstalowana ta czcionka. Jeżeli jednak czcionka nie jest dostępna, w jej miejsce zostanie użyta domyślna czcionka użytkownika. Dlatego właśnie nie staramy się dokładnie odtworzyć czcionki tytułowej użytej w książce.
Nasz dylemat mógłby zostać rozwiązany, gdyby istniała możliwość określenia czcionki, która ma być załadowana i użyta na stronie WWW. W wojnie przeglądarek firmy Microsoft oraz Netscape wynalazły metody ładowania czcionek, każda swoją własną, przy czym żadna z nich nie obsługiwała drugiej. CSS2 wprowadziło opisy czcionek i metody ich ładowania, które nie współpracowały z mechanizmami Windows i Netscape. Dlatego na razie czcionki ładowane przez różne przeglądarki pozostają dla nas w sferze pobożnych życzeń.
U góry naszego dokumentu znajduje się jeszcze jedna rzecz, którą musimy się zająć — mam na myśli trzy okna podglądu widoczne na pierwszej stronie każdego projektu. Okna te stanowią reprodukcje rysunków, które pojawią się w dalszej części projektu. W tym miejscu wskażemy tylko obrazy, które nas interesują i rozmieścimy je na stronie.
Ważną rzeczą jest jednak to, aby umieścić obrazy w odpowiednim miejscu. Ponieważ chcemy, aby zaczynały się bezpośrednio pod nagłówkiem i były rozmieszczone swobodnie wzdłuż strony, musimy je wstawić, zanim zdefiniujemy sam nagłówek.
<body> <div id="previews"> <img src="13CSS03.jpg" alt="preview 1"> <img src="13CSS10.jpg" alt="preview 2"> <img src="13CSS15.jpg" alt="preview 3"> </div> <div id="masthead"> <h1>13</h1>
Teraz pozostaje nam już tylko nadać elementowi div
swobodny charakter oraz określić rozmiar obrazów.
div#attrib {font-size: 90%; font-style: italic; text-align: right; font-variant: small-caps;} div#previews {float: right; width: 33%; margin: 0; text-align: center;} div#previews img {width: 80%; margin-top: 1em;} </style>
Być może zauważyłeś, że element div
jest szerszy niż 20%
margines zdefiniowany dla tekstu zasadniczego. Powód jest taki, że chcemy, aby obrazy wystawały z paska bocznego, tak samo jak w wersji drukowanej książki. Nadaliśmy obrazom szerokość o wartości 80%
zawierającego ich elementu div
, z kolei wartość text-align
umieści je na środku elementu div
. W ten sposób odepchniemy je od krawędzi elementu body
(patrz rysunek 13.5).
Odtworzenie obrazów podglądu oraz kilka małych zmian, które ułatwią nam życie
Oczywiście nie jest to dokładnie to samo co drukowana wersja książki. Ciągle nie mamy zaokrąglonych na rogach pojemników, które otaczają obrazy, a także ciemnoniebieskiego tła dla paska bocznego. Moglibyśmy spróbować odtworzyć te efekty, ale nie zrobimy tego. Dlaczego? Uzyskanie odpowiedniego wyglądu pojemników zabrałoby nam mnóstwo czasu i wysiłku, a tak niewielki w sumie element całego projektu nie jest po prostu wart zachodu. Z kolei ciemnoniebieskie tło zostało pominięte dlatego, że dziwnie wyglądałaby nasza strona, gdyby kończyło się ono tuż pod obrazami i pozostawiało pod sobą pusty pasek boczny. Dlatego nie będziemy odtwarzać tych efektów i przejdziemy od razu do tekstu zasadniczego dokumentu.
Gdy tylko spojrzymy na cel projektu, zdefiniowany w podrozdziale o tym samym tytule, zobaczymy, że odstęp różni się od tego, który widzimy w drukowanej wersji książki. Musimy go przesunąć w dół, bliżej tekstu, który się pod nim znajduje, a dalej od poprzedzającego go akapitu. To samo dotyczy elementów h3
, h4
oraz h5
, dlatego teraz nadamy im wszystkim odpowiedni styl.
h1, h2, h3, h4 {font-variant: small-caps;} h3, h4, h5 {margin-top: 1.25em; margin-bottom: 0;} h1 {font-size: 300%; border-bottom: 2px solid white; margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;}
Mimo że w akapitach zmniejszyliśmy górne marginesy, dwa następujące po sobie akapity wciąż będą oddalone od siebie o około 1 em, ponieważ nadal obowiązuje domyślny margines dolny dla akapitów. Marginesy, które bezpośrednio przylegają do siebie w pionie, łączą się, a odległość między ramkami elementów jest zawsze większa niż szerokość dwóch marginesów, dlatego dolny margines o szerokości 1em zapewni tradycyjny odstęp między akapitami.
To samo oczywiście nie wystarcza. Jeśli chcemy, aby tytuły znajdowały się bliżej tekstu, który po nich następuje, musimy również zmniejszyć górny margines akapitów. A jak już przy tym jesteśmy, to ustawimy jeszcze trochę większy odstęp między wierszami (line-height
).
h2 {font-size: 200%; margin: 0 0 0.66em 10%;} p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;} div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;}
Powinniśmy również zwiększyć rozmiar elementu h3
, który w wersji drukowanej jest większy od normalnego tekstu (zobacz rysunek 13.6).
h2 {font-size: 200%; margin: 0 0 0.66em 10%;} h3 {font-size: 150%;} p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
Czas na akapity i ustawienie odstępów w tytułach, aby wyglądały one tak, jak w książce
Skoro już zaczęliśmy określać rozmiar elementów nagłówka, zróbmy to samo z pozostałymi nagłówkami. Dzięki temu nie będziemy musieli martwić się o nie już później.
h3 {font-size: 150%;} h4 {font-size: 110%;} h5 {font-size: 100%;} p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
Cel został osiągnięty, a więc zastanówmy się teraz, jak ożywić nasze listy.
Przejdźmy teraz do podrozdziału „Cel projektu” — znajdziemy w nim nieuporządkowaną listę. W naszej książce poszczególne punkty listy nie są wyróżnione za pomocą standardowych kropek, lecz ikonek mających postać małych niebieskich diamentów. Jeśli tylko mamy odpowiedni plik graficzny zawierający symbol niebieskiego diamentu na białym tle, skorzystajmy z niego.
div#previews img {width: 80%; margin-top: 1em;} ul li {list-style: outside square url(diamond.gif);} </style>
Trzeba również wziąć pod uwagę to, że elementy listy są nieco od siebie oddzielone. Moglibyśmy zmienić ustawienia odstępu między wierszami (line-height
) dla elementów listy, ale jest lepszy sposób — zwiększenie marginesu albo dopełnienia dla poszczególnych elementów listy. Jedyna różnica między tymi dwoma metodami jest taka, że jeśli kiedykolwiek chcielibyśmy zdefiniować kolor tła dla listy, to w przypadku zwiększonego marginesu tła nie będą się dotykać i będą tworzyć oddzielone od siebie bloki danego koloru. Nas to jednak nie dotyczy, ponieważ tło listy w książce jest białe, zatem zwiększamy dolny margines elementów li
elements. Efekt możesz obejrzeć na rysunku 13.7.
ul li {list-style: outside square url(diamond.gif); margin-bottom: 0.5em;}
Wykorzystaliśmy obrazy do tego, aby zastąpić nudne kropki błyszczącymi diamentami
Przechodząc do podrozdziału „Przygotowania”, napotykamy pierwszą notatkę umieszczoną na pasku bocznym. Jest to jedna z notatek dotyczących sieci Web (nadamy jej kolor zielony), różniąca się od notatek mających charakter uwagi lub ostrzeżenia jednym drobiazgiem — uwagi dotyczące sieci Web nie mają tytułu. Oto kod notatki mówiącej o sieci Web:
<div class="note web"> <img src="web-icon.gif" alt="Web"> <p> Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki. </p> </div>
A oto kod jednej z pozostałych notatek:
<div class="note tip"> <img src="tip-icon.gif" alt="Tip"> <h5>Obrazy odłożone na później</h5> <p> Trzy obrazy podglądu, które znajdują się na pierwszej stronie projektu, nie są częścią nagłówka; nie znajdują się one nawet w bieżącym pliku z projektem. Zajmiemy się nimi w następnym punkcie. </p> </div>
Pod względem strukturalnym jedynym elementem, który różni te dwa rodzaje notatek, jest element h5
. Dużo ważniejszą kwestią jest wartość atrybutu class
w tych dwóch notatkach. Widzimy, że obie notatki zawierają słowo note
, a gdy przejrzymy pozostałe fragmenty książki, przekonamy się, że wartość ta występuje we wszystkich notatkach umieszczonych na pasku bocznym, a po niej pojawia się słowo określające rodzaj notatki; są to wyrazy web
(sieć Web), tip
(wskazówka) oraz warn
(ostrzeżenie).
W związku z tym te style, które są wspólne dla wszystkich notatek, mogą być zapisane w jednej regule, natomiast te, które są charakterystyczne tylko dla danego typu notatek, zostaną zapisane w swoich własnych regułach. Chcemy, aby notatki były umieszczone na pasku bocznym swobodnie, ale również chcemy mieć pewność, że żadna notatka nie pojawi się pod inną notatką lub z jej lewej strony. Jeżeli wstawimy do kodu styl width
oraz kilka marginesów, osiągniemy efekt widoczny na rysunku 13.8.
ul li {list-style: outside square url(diamond.gif); margin-bottom: 0.5em;} div.note {float: right; clear: right; border-width: 0; width: 19%; margin: 0 1% 0 0; padding: 0;} </style>
Pierwszy krok w kierunku określenia stylów notatek umieszczonych na pasku bocznym, aby odpowiadały one wersji drukowanej
Okazuje się, że Explorer dla Windows ma pewne problemy ze stylami, które właśnie dodaliśmy; z jakiegoś powodu wydaje mu się, że 19%
plus 1%
równa się więcej niż 20%
. Użyjemy więc triku voice-family
, aby dać IE dla Windows wartość, której potrzebuje, jednocześnie dostarczymy odpowiednią liczbę innym przeglądarkom, które tego problemu nie mają.
Jeśli interesuje Cię trik voice-family, a także inne sposoby wykorzystywania robaków zagnieżdżonych w przeglądarkach, zobacz „Tricking Browsers and Hidding Styles” na stronie WWW.
div.note {float: right; clear: right; border-width: 0; width: 18%; margin: 0 1% 0 0; padding: 0; voice-family: "\"}\""; voice-family:inherit; width: 19%;}
Teraz chcemy przesunąć ikonę nieco w prawo. Ponieważ wcięcie obrazów odbywa się tak samo jak w przypadku tekstu, możemy wyrównać je do prawej krawędzi za pomocą stylu text-align
. Pamiętamy jednak, że tytuł oraz tekst umieszczony w akapicie mają być wyrównane do lewej strony.
div.note {float: right; clear: right; border-width: 0; width: 18%; margin: 0 1% 0 0; padding: 0; text-align: right; voice-family: "\"}\""; voice-family:inherit; width: 19%;} div.note h5, div.note p {text-align: left;} </style>
Wciąż pozostaje jeszcze zmniejszenie tekstu i użycie w nim pogrubionej czcionki sans-serif
, takiej jak ta, którą użyto w książce. Najłatwiej dokonać tego w samym elemencie div
.
div.note {float: right; clear: right; border-width: 0; width: 18%; margin: 0 1% 0 0; padding: 0; text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif; voice-family: "\"}\""; voice-family:inherit; width: 19%;}
Teraz przyjrzyjmy się treści samych notatek. Element obrazu nie jest wyposażony w atrybuty height
oraz width
, dlatego musimy dostarczyć te wartości za pomocą CSS. Ponadto chcemy sprawić, aby tekst notatek odstawał nieco od krawędzi paska bocznego w kierunku prawej krawędzi elementu div
notatki. Dlatego tworzymy następujący kod:
div.note h5, div.note p {text-align: left; margin-left: 1em; margin-right: 0;} div.note img {height: 30px; width: 30px; margin: 0;} </style>
Teraz musimy połączyć ikonę z linią oddzielającą za pomocą ciemnoniebieskiej poziomej linii. Dlaczego znowu nie skorzystać z triku, który posłużył nam do utworzenia linii oddzielającej? Wiemy, że ikona ma wysokość 30px
i znajduje się w prawym, górnym rogu notatki. Zatem możemy narysować w tle elementu div
linię, która będzie znajdowała się w odległości 15px
od górnej krawędzi elementu div
— w tym celu wstawimy ponownie 1-pikselowy plik, tym razem w kierunku poziomym, tak jak pokazano na rysunku 13.9.
div.note {float: right; clear: right; border-width: 0; width: 18%; margin: 0 1% 0 0; padding: 0; text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif; background: transparent url(blue.gif) 50% 15px repeat-x; voice-family: "\"}\""; voice-family:inherit; width: 19%;}
Za pomocą zaledwie kilku stylów zbliżyliśmy się do odtworzenia oryginalnego wyglądu książki
Teraz pozostało jeszcze określenie koloru tekstu i przesunięcie tekstu do góry, tak aby znalazł się bliżej linii, którą właśnie narysowaliśmy. Nie powinniśmy jednak przypisywać takiej samej wartości color
do wszystkich notatek, ponieważ nadamy im, zależnie od typu notatki, trzy różne kolory: niebieski, zielony oraz czerwony. Dlatego właśnie przyda nam się drugie słowo w każdej klasie notatki.
div.note img {height: 30px; width: 30px; margin: 0;} div.web {color: #399;} div.tip {color: #006;} div.warn, div.warn code {color: maroon;} </style>
Innym sposobem na to, aby tekst code
ostrzeżenia wyglądał tak samo jak jego rodzic, jest użycie wartości inherit
w nowej regule: div.warn code {color: inherit;}
. Wartość ta jest dość dobrze obsługiwana przez różne przeglądarki, a my nie skorzystaliśmy z niej tylko dlatego, że nie jest ona bardziej skuteczna niż metoda, której my użyliśmy.
Wstawiliśmy selektor, który zmieni czcionkę tekstu ostrzeżenia umieszczonego w elemencie code
na taką samą, jaką ma otaczający go tekst. W ten sposób utworzyliśmy regułę, która uchyla wcześniejszą regułę, określającą kolor czcionki wszystkich elementów code
jako ciemnoniebieski.
Przy przesunięciu tekstu do góry musimy zachować pewną ostrożność. Możemy wprawdzie zdefiniować ujemny margines górny, ale nie chcemy przecież, aby tekst nachodził na ikony. Dlatego też musimy sprawić, aby każdy element, który pojawi się jako pierwszy w dowolnym typie notatki, miał prawy margines, zostawiający wystarczającą ilość miejsca na ikonę. W notatkach dotyczących sieci Web pierwszym elementem jest zawsze akapit.
div.note img {height: 30px; width: 30px; margin: 0;} div.web p {margin: -10px 30px 0 1em;} div.web {color: #399;}
Wstawienie prawego marginesu o szerokości 30px
, czyli dokładnie takiej, jaką ma ikona, powinno zapobiec nachodzeniu tekstu na obraz. Teraz musimy zastosować podobne style w pierwszym elemencie notatek i ostrzeżeń, czyli w elemencie h5
. Tytuły tych notatek nie są napisane kapitalikami, więc możemy pozbyć się tego stylu i przywrócić ich pierwotny wygląd.
div.note img {height: 30px; width: 30px; margin: 0;} div.note h5 {margin: -5px 30px 0 1em; padding: 0; font-variant: normal;} div.web p {margin: -10px 30px 0 1em;}
Dopełnienie o wartości 0
, zdefiniowane dla tytułów notatek, ma charakter zabezpieczenia, ponieważ nigdy nie wiadomo, kiedy przeglądarka zdecyduje się użyć dopełnienia zamiast marginesów, aby utworzyć miejsce wokół elementów nagłówka.
Musimy jeszcze upewnić się, że tekst w każdej notatce będzie czytelny. W wielu przeglądarkach tekst elementu code
jest mniejszy niż normalny tekst. W przypadku naszych notatek chcemy, aby tekst miał mniej więcej taki sam rozmiar jak tekst akapitu, tak jak przedstawiono na rysunku 13.10.
div.web p {margin: -10px 30px 0 1em;} div.note code {font-size: 100%;} div.web {color: #399;}
Niebieska notatka ma wygląd bardzo zbliżony do wersji drukowanej
Oczywiście poszczególne wiersze tekstu nie będą łamane dokładnie w tym samym miejscu co w wersji drukowanej książki, przez co notatki mogą być nieco dłuższe lub krótsze niż te, które widzisz na wydrukowanej stronie. Mimo to podobieństwo jest wystarczające, abyśmy mogli przejść do następnego zagadnienia, czyli wyróżniania w tekście kodu, który został napisany inną czcionką.
W podrozdziale zatytułowanym „Na początek” widzimy, że część tekstu została ujęta w elementach code
. Przykładowo, spójrz na trzeci akapit:
<p> Ponadto musimy upewnić się, że treść, którą chcemy umieścić na stronie, ma odpowiednią strukturę, tak aby można było w niej zastosować odpowiednie style. Akapity powinny być zawarte w elemencie <code>p</code>, nagłówki podrozdziałów w elementach <code>h3</code> i <code>h4</code>, notatki umieszczone na pasku bocznym powinny być odpowiednio sklasyfikowane jako elementy <code>div</code> o poszczególnych atrybutach <code>class</code> i tak dalej. Nie będziemy się jednak nad tym teraz zastanawiać, ponieważ na każdy element przyjdzie kolej podczas naszej pracy nad projektem. </p>
Zależnie od tego, która czcionka monospace zostanie użyta przez przeglądarkę, elementy code
mogą robić wrażenie nieco rozciągniętych. Jednym ze sposobów naprawienia takiego stanu rzeczy może być nadanie ujemnej wartości stylowi letter-spacing
.
W książce takie fragmenty kodu są napisane ciemnoniebieską czcionką monospace. Jest to niewiarygodnie proste do odtworzenia, ale poczekajmy jeszcze chwilę. Bloki kodów mają taką samą czcionkę jak elementy code
, ale nie są niebieskie. Gdy zajrzymy do kodu źródłowego, przekonamy się, że te bloki to elementy pre
. Dlatego nasz kod będzie wyglądał następująco:
p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;} code, pre {font-family: "Courier New", Courier, monospace;} code {color: #006;} div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;}
Bloki kodów zamieszczone w książce często zawierają fragmenty wyróżnione kolorem ciemnoczerwonym, który symbolizuje zmiany dokonane w projekcie. Przyjrzyjmy się bliżej jednemu z takich bloków kodu dokumentu HTML.
<pre> ul li {list-style: outside square url(diamond.gif); <b>margin-bottom: 0.5em;</b>} </pre>
Zmiany wyróżniono za pomocą elementu b
, który jest wciąż niedocenianym elementem określającym czcionkę pogrubiającą. W książce zmiany mają kolor ciemnoczerwony i są wyróżnione za pomocą pogrubionej czcionki. Zamiast próbować skomplikowanych metod, takich jak zastąpienie elementów b
elementami span
, spróbujmy popracować trochę nad tym, co już mamy. Ponadto upewnimy się, że tekst bloku kodu zostanie nieco wcięty w porównaniu z normalnym tekstem i będzie od niego trochę mniejszy (patrz rysunek 13.11).
code {color: #006;} pre {margin-left: 10%; font-size: 80%;} pre b {color: maroon; font-weight: normal;} div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;}
Fragmenty kodu oraz bloki kodu wyróżniają się w tekście dzięki zastosowaniu nowych stylów
Wreszcie doszliśmy do tej części naszego projektu, która dla nas będzie stanowić największe wyzwanie — rysunki oraz podpisy do nich. Odpowiednie zdefiniowanie tych struktur będzie wymagało nie tylko znajomości CSS, ale również trochę HTML-u.
Spójrzmy najpierw na kod rysunku użytego wcześniej w tym projekcie.
<div class="figure"> <img src="13CSS04.jpg" height="300" width="400" alt="figure"> </div> <div class="caption"> <h5>Rysunek 13.4.</h5> <p> Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu </p> </div>
Istnieje wiele sposobów na to, aby nadać rysunkom oraz podpisom do nich odpowiednią strukturę — jeden z nich jest naprawdę bardzo przydatny. Ponieważ rysunek jest zawarty w jednym elemencie div
, a podpis do niego w drugim, łatwo możemy umieścić je obok siebie, wstawiając obraz z lewej, a podpis z prawej strony. Najpierw zróbmy rysunek.
div.warn, div.warn code {color: maroon;} div.figure {float: left; width: 75%; margin: 0; padding: 0;} </style>
Być może myślisz, że moglibyśmy po prostu pozwolić napisom „unosić się w przestrzeni” z prawej strony rysunku, jednak ta metoda ma pewne wady, o czym przekonasz się już wkrótce.
W ten sposób pozostawiamy wystarczającą ilość miejsca na to, aby podpis znalazł się w pasku bocznym, plus dodatkowe 5% (to pozwoli nam uniknąć niektórych problemów z IE dla Windows). Przenieśmy teraz podpis na prawo, korzystając z tych samych podstawowych deklaracji, których użyliśmy dla zdefiniowania notatek. Nasze postępy w pracy możesz zobaczyć na rysunku 13.12.
div.figure {float: left; width: 75%; margin: 0; padding: 0;} div.caption {float: right; width: 18%; padding: 0 1% 0 0; margin: 0; voice-family: "\"}\""; voice-family:inherit; width: 19%;} </style>
Rysunek oraz podpis do niego zostały umieszczone swobodnie na stronie, ale wciąż pozostało nam sporo pracy
Rysunek wykracza poza wyrównanie, ale tym zaczniemy się martwić dopiero wtedy, gdy nadamy podpisowi odpowiedni styl. Najprostszą czynnością jest wpisanie odpowiedniego tekstu do podpisu, a umieścimy go w elemencie p
. Odtworzenie jego wyglądu zajmie tylko moment.
div.caption {float: right; width: 18%; padding: 0 1% 0 0; margin: 0; voice-family: "\"}\""; voice-family:inherit; width: 19%;} div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif; color: #555;} </style>
Odtworzenie górnej krawędzi ramki podpisu może wydawać się proste, ponieważ musimy ustawić ją w samym elemencie div
. Zwróć jednak uwagę na to, w jaki sposób linia ta wchodzi w główną kolumnę. Najpierw określimy wymiary ramki, a potem zobaczymy, co trzeba zmienić, aby osiągnąć wygląd, który nas interesuje.
div.caption {float: right; width: 18%; margin: 0 1% 0 0; padding: 0; border-top: 1px solid #006; voice-family: "\"}\""; voice-family:inherit; width: 19%;}
Teraz nasza górna ramka zatrzymuje się na linii oddzielającej. Gdybyśmy nie nadali podpisowi swobodnego charakteru, linia zostałaby pociągnięta w poprzek całej strony, aż do lewej krawędzi ekranu. Dzięki temu, że elementy swobodne współdziałają z tłem oraz krawędziami, uniknęliśmy tego problemu.
Aby wydłużyć linię z lewej strony, musimy wstawić tam dopełnienie, a przy okazji dostosować pierwszą wartość width
, aby IE dla Windows nie narobił zbyt dużego bałaganu. Niestety, program ten myśli, że wielkość każdego dopełnienia dodanego do swobodnego elementu została obliczona z uwzględnieniem rozmiaru tego elementu, więc jeśli nadamy dopełnieniu wartość 25%
, to miejsce na podpis pod rysunkiem zostałoby odpowiednio zwężone. Poza tym byłoby to zbyt duże dopełnienie dla przeglądarek, które poprawnie obliczają wielkość odstępu. Długi proces prób i błędów doprowadza nas do następującej kombinacji wartości, zilustrowanej na rysunku 13.13.
div.caption {float: right; width: 30%; margin: 0 1% 0 0; padding: 0 0 0 40%; border-top: 1px solid #006; voice-family: "\"}\""; voice-family:inherit; width: 19%; padding-left: 10%;}
Wydłużenie górnej krawędzi podpisu w głąb głównej kolumny przy użyciu dopełnienia
Nagle podpis przesunął się pod rysunek. Dodanie dopełnienia spowodowało rozszerzenie podpisu tak, że jego pojemnik nachodzi na pojemnik utworzony przez element div
rysunku. Elementy swobodne nie powinny na siebie nachodzić, dlatego drugi z nich (podpis) został umieszczony pod pierwszym. Możemy tego uniknąć, zmniejszając po prostu atrybut width
elementu div
rysunku. Ponieważ szerokość całego podpisu wynosi 30%
, moglibyśmy zastosować wartość 70%
, ale żeby mieć pewność, że rysunek z podpisem na pewno nie będą nachodzić na siebie, zmniejszymy ją jeszcze trochę.
div.figure {float: left; width: 67%; margin: 0; padding: 0;}
Teraz nasz podpis wrócił do miejsca, w którym powinien się znajdować, ale niektóre fragmenty kolejnego akapitu podążyły za nim! Przyczyna tkwi w tym, że przed ostatnimi zmianami, których dokonaliśmy, element div
rysunku był taki szeroki, że nie pozostawało już miejsca na to, aby tekst, który go dotyczył, zmieścił się obok niego. Tak już nie jest dzięki zmianom, których dokonaliśmy w stylach podpisu.
Problem, z którym się przed chwilą zetknęliśmy, zwraca naszą uwagę na jeszcze inne, podobne zagadnienie. Załóżmy, że mamy notatkę, która powinna znajdować się bezpośrednio przed rysunkiem, ale kończy się poniżej górnej krawędzi rysunku. Podpis do rysunku zostałby wówczas przeniesiony na koniec notatki, a to wyglądałoby dość dziwnie. W CSS nie ma żadnego sposobu na to, aby wyrównać dwa swobodnie umieszczone elementy tak, aby znajdowały się w jednej linii. Możemy jednak posłużyć się kodem HTML, dzięki któremu osiągniemy pożądany cel.
<hr> <div class="figure"> <img src="13CSS04.jpg" height="300" width="400"> </div> <div class="caption"> <h5>Rysunek 13.4.</h5> <p> Pracę nad nagłówkiem zakończyło nadanie treści ładnego stylu </p> </div> <hr>
Różnica między stylami visibility: hidden
oraz display: none
jest taka, że pierwszy z nich sprawia po prostu, że elementy są niewidoczne, umożliwia im jednak wpływanie na wygląd dokumentu. Drugi z wymienionych stylów całkowicie usuwa element z układu graficznego dokumentu, przez co nie ma on żadnego wpływu na wygląd dokumentu.
Wystarczyło wstawić element hr
przed każdym rysunkiem i po każdym napisie — mamy dokładnie to, czego chcieliśmy. Teraz jeszcze tylko nadamy tym elementom atrybut clear: both
i ustawimy tak, aby się nie pojawiały (patrz rysunek 13.14).
div.warn, div.warn code {color: maroon;} hr {clear: both; visibility: hidden;} div.figure {float: left; width: 67%; margin: 0; padding: 0;}
Niewidoczne elementy hr utrzymują rysunki i podpisy do nich w jednej linii, choć są oddzielone od siebie
Aby uzyskać szczegółowe informacje na temat tego, jak wykorzystać obrazy tła do zaokrąglania rogów, zobacz rozdział 10., „Ucieczka z pudełka”.
Teraz pozostało jeszcze nadanie odpowiedniego stylu etykiecie podpisu (na przykład „Rysunek 13.4.”). Szybkie spojrzenie w książkę i już wiemy, że etykieta musi być umieszczona w niebieskim pojemniku i wyrównana z linią oddzielającą paska bocznego, ale nie powinna rozciągać się aż do końca górnej krawędzi podpisu. Utworzenie pojemnika wymaga wstawienia w prawym, dolnym rogu elementu h5
niewielkiej grafiki w tle oraz określenia jej koloru. Rozciągnijmy też trochę litery.
div.caption {float: right; width: 30%; margin: 0 1% 0 0; padding: 0 0 0 40%; border-top: 1px solid #006; voice-family: "\"}\""; voice-family:inherit; width: 19%; padding-left: 10%;} div.caption h5 {letter-spacing: 1px; color: black; background: #9BD url(captioncurve.gif) bottom right no-repeat;} div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif; color: #555;}
Jeszcze tylko niewielkie dopełnienie oraz marginesy i jesteśmy na miejscu. Aby wyrównać tekst etykiety z akapitem, musimy sprawdzić, jaka jest szerokość marginesów akapitu. Reguła, która definiuje marginesy dla akapitu podpisu, jest następująca:
h1, h2, h3, h4, h5, p, pre, table, div
{margin-right: 22%;
margin-left: 8%;}
Nie będziemy próbowali odtworzyć efektu małych okręgów, które są umieszczone na każdej etykiecie podpisu. Osiągnięcie takiego wyglądu jest z pewnością możliwe, ale, podobnie jak w przypadku pojemników otaczających obrazy podglądu, ten niewielki w sumie aspekt całego projektu kosztowałby nas zbyt wiele wysiłku.
Ta reguła działa bez zarzutu w odniesieniu do akapitów, ale niestety nie jest odpowiednia do zdefiniowania etykiety podpisu. Musimy określić nowe marginesy dla elementu h5
i, dbając o spójność kodu, dodamy podobne marginesy do akapitów. Przy okazji zmienimy czcionkę etykiet na kapitaliki, ponieważ takiej właśnie czcionki użyto w książce.
div.caption h5 {margin: 0 1em 0 0; padding: 0.33em 10px 0 1em; color: black; letter-spacing: 1px; font-variant: small-caps; background: #9BD url(captioncurve.gif) bottom right no-repeat;} div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif; color: #555; margin: 0; padding: 0.25em 1em;}
Podobnie jak w przypadku notatek umieszczonych na pasku bocznym, musimy upewnić się, że każdy tekst elementu code
umieszczony w podpisach do rysunków będzie miał taki sam rozmiar jak otaczający go tekst. Efekt ten osiągniemy, dodając selektor do reguły, którą już zastosowaliśmy w odniesieniu do tekstu notatek.
div.note code, div.caption code {font-size: 100%;}
Ostatnią rzeczą, którą musimy zrobić, jest przesunięcie rysunku bardziej w kierunku środka tekstu. Niestety, z uwagi na wszystkie zmiany, których wcześniej dokonaliśmy, nie możemy po prostu wycentrować obrazu, aby osiągnąć pożądany efekt. Nie możemy zapominać o tym, że element div
zawierający rysunek ma teraz tylko 67%
szerokości elementu body
. Zamiast centrowania obrazu wyrównamy więc rysunek do prawej, przenosząc go tak, aby jego prawa krawędź zrównała się z prawą krawędzią elementu div
(patrz rysunek 13.15).
div.figure {float: left; width: 67%; margin: 0; padding: 0; text-align: right;}
Na zakończenie nadajemy rysunkom i podpisom do nich odpowiednie style
Nie jest to idealne rozwiązanie, ale będzie ono działało w miarę poprawnie w większości przeglądarek. Zapewnia ono mały, ale zauważalny odstęp między rysunkiem a górną ramką podpisu, taki sam, jaki widać w książce.
Aby już wszystko zapiąć na ostatni guzik, spójrzmy na dwie różne struktury, które, jak się okazuje, mają bardzo podobne style — to listingi kodów oraz tabele. Listing 13.1 zawiera przykład tego, co chcemy odtworzyć.
div.web {color: #399;} div.tip {color: #006;} div.warn, div.warn code {color: maroon;}
Wystarczy jeden rzut oka na drukowaną wersję listingu i już wiemy, jaki kod będzie potrzebny do jego odtworzenia, być może z wyjątkiem nagłówka. Wstawimy go najpierw do elementu h5
i otoczymy numer listingu elementem span
. W ten sposób otrzymamy następujący kod:
<h5><span>Listing 13.1.</span>Przykładowy listing</h5>
Teraz nadamy odpowiedni kolor numerom listingu, a element span
wyposażymy w prawy margines, dzięki czemu tytuł listingu zostanie nieco odsunięty od jego numeru.
h5 {font-size: 100%;} h5 span {color: #006; margin-right: 0.5em;} p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;}
Jest jeszcze jedna drobnostka, która psuje nam cały efekt — element h5
ma margines o szerokości 22%
i jest on zawarty w elemencie div
, który również ma 22%
lewy margines. Musimy zmienić tę sytuację, jeśli nie chcemy dopuścić do tego, aby element h5
został zbyt mocno wcięty. Dlatego zmienimy lewy margines elementu h5
.
div.listing pre {border: 1px solid #006; border-width: 1px 0; padding: 0.5em 1em; margin: 0.125em 0 1.5em;} div.listing h5 {margin-left: 0.5em;} ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
Jeśli zaś chodzi o kod listy, najbardziej sensowne wydaje się dodanie do niego elementu pre
. Tak naprawdę zdefiniowaliśmy już regułę div.listing pre
, którą wstawiliśmy na początku projektu, chcąc uniknąć problemów z IE dla Windows. Teraz przepiszemy ją, aby dodać górną i dolną ramkę, a także zmienimy nieco marginesy oraz dopełnienie (patrz rysunek 13.16).
div.listing pre {border: 1px solid #006; border-width: 1px 0; padding: 0.5em 1em; margin: 0.125em 0 1.5em;}
Nadanie listingom odpowiednich stylów to kwestia zaledwie kilku prostych reguł
Tabele przypominają nieco listingi tym, że posiadają górną i dolną ramkę, przy czym ich tytuł znajduje się bezpośrednio nad górną ramką. Istnieje jednak kilka różnic przedstawionych w tabeli 13.1.
Kolumna 1 | Kolumna 2 | Kolumna 3 |
---|---|---|
To | jest | typowy |
przykład | tabeli | K? |
Tytuł jest taki sam jak w listingu, a ponieważ pracujemy nad tabelą, kod będzie zawierał element table
.
<h5><span>Tabela 13.1</span> Przykładowa tabela</h5> <table cellspacing="0"> <tr> <th>Kolumna 1</th><th>Kolumna 2</th><th>Kolumna 3</th> </tr> <tr> <td>To</td><td>jest</td><td>typowy</td> </tr> <tr> <td>przykład</td><td>tabeli</td><td>K?</td> </tr> </table>
W wielu przeglądarkach szerokość tabeli jest domyślnie ustawiana tak, aby pomieściła całą treść. Dlatego my dokładnie określamy szerokość tabeli (table width)
, tak aby nasza definicja zastąpiła domyślne zachowanie przeglądarki.
Być może kusi Cię, aby dodać do elementu table
atrybut class
, ale uwierz, że nie ma takiej potrzeby. Jedyne elementy table
, które pojawią się w naszym projekcie, będą zawierały właśnie takie tabele jak ta z przykładu 13.1. Dlatego dodamy do nich górne i dolne ramki, zmienimy nieco rozmiar czcionki, dołączymy dolny margines, który oddzieli tabele od tekstu i zadeklarujemy ich szerokość za pomocą atrybutu width
.
div.listing h5 {margin-left: 0.5em;} table {border: 1px solid #006; border-width: 2px 0; font-size: 90%; margin-bottom: 1.5em; width: 70%;} ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
Ostatnią rzeczą, którą musimy się zająć, są nagłówki kolumn. Dodamy regułę, która zdefiniuje ich kolor, wyrówna tekst do lewej strony, a także wstawi dolną ramkę.
table {border: 1px solid #006; border-width: 2px 0; font-size: 90%; margin-bottom: 1.5em; width: 70%;} th {color: #006; border-bottom: 1px solid #006; text-align: left;} ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
Na koniec dodamy trochę dopełnienia w komórkach tabeli, tak aby nie robiły wrażenia zbyt przepełnionych. Efekt możesz zobaczyć na rysunku 13.17.
th {color: #006; border-bottom: 1px solid #006; text-align: left;} th, td {padding: 0.125em 0.66em;} ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;}
Odtworzenie wyglądu tabeli sprowadza się tylko do napisania trzech reguł
Mimo że za pomocą CSS udało się osiągnąć wygląd bardzo podobny do układu graficznego książki, nie można nie zauważyć, że pominęliśmy kilka rzeczy. Brak możliwości załadowania czcionek jest jednym z największych ograniczeń w sieci Web, choć jest to też swoiste szczęście w nieszczęściu. Projektanci stron nie mogą liczyć na to, że każda przeglądarka wyświetli wybraną przez nich czcionkę, a to wymusza na nich pewną elastyczność w pracy nad projektem.
Inną, równie istotną przeszkodą podczas pracy nad tego typu projektem są jak zawsze ograniczenia dotyczące przeglądarek. W tym konkretnym projekcie dużym problemem był dla nas program Internet Explorer dla Windows, ale równie dobrze mogła to być dowolna inna przeglądarka — wszystko zależy od charakteru Twojego projektu. Na szczęście przeglądarki są na tyle zaawansowanymi programami, że z reguły istnieje możliwość obejścia problemu bez robienia zbyt dużego bałaganu.
Pominęliśmy również cztery różne aspekty projektu.
title
.Wziąwszy jednak wszystko pod uwagę, musimy przyznać, że zdecydowaną większość elementów udało się odtworzyć, a pominęliśmy naprawdę niewiele zagadnień. Ostateczną wersję utworzonego przez nas arkusza stylów przedstawia listing 13.2.
<style type="text/css"> body {margin: 0; padding: 0; color: black; background: white url(blue.gif) 80% 0 repeat-y;} h1, h2, h3, h4, h5, p, pre, table, div {margin-right: 22%; margin-left: 8%;} div.listing pre {border: 1px solid #006; border-width: 1px 0; padding: 0.5em 1em; margin: 0.125em 0 1.5em;} div.listing h5 {margin-left: 0.5em;} table {border: 1px solid #006; border-width: 2px 0; font-size: 90%; margin-bottom: 1.5em; width: 70%;} th {color: #006; border-bottom: 1px solid #006; text-align: left;} th, td {padding: 0.125em 0.66em;} ul, ol {margin-right: 25%; margin-left: 13%; padding: 0;} h1, h2, h3, h4 {font-variant: small-caps;} h3, h4, h5 {margin-top: 1.25em; margin-bottom: 0;} h1 {font-size: 300%; border-bottom: 2px solid white; margin: 0.5em 0 0.5em 0; padding: 0 0 0.125em 10%;} h2 {font-size: 200%; margin: 0 0 0.66em 10%;} h3 {font-size: 150%;} h4 {font-size: 110%;} h5 {font-size: 100%;} h5 span {color: #006; margin-right: 0.5em;} p {margin-top: 0.5em; margin-bottom: 1em; line-height: 1.2em;} code, pre {font-family: "Courier New", Courier, monospace;} code {color: #006;} pre {margin-left: 10%; font-size: 80%;} pre b {color: maroon; font-weight: normal;} div#masthead {margin: 0 20% 2.5em 0; padding: 2em 0 1.5em 0; border: 1px solid #006; border-width: 0 1px 1px 0; background: #BDF;} div#masthead blockquote {font-size: 90%; font-style: italic; margin: 2em 22% 0.5em 10%;} div#attrib {font-size: 90%; font-style: italic; text-align: right; font-variant: small-caps;} div#previews {float: right; width: 33%; margin: 0; text-align: center;} div#previews img {width: 80%; margin-top: 1em;} ul li {list-style: outside square url(diamond.gif); margin-bottom: 0.5em;} div.note {float: right; clear: right; border-width: 0; width: 18%; margin: 0 1% 0 0; padding: 0; text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif; background: transparent url(blue.gif) 50% 15px repeat-x; voice-family: "\"}\""; voice-family:inherit; width: 19%;} div.note h5, div.note p {text-align: left; margin-left: 1em; margin-right: 0;} div.note img {height: 30px; width: 30px; margin: 0;} div.note h5 {margin: -5px 30px 0 1em; padding: 0; font-variant: normal;} div.web p {margin: -10px 30px 0 1em;} div.note code, div.caption code {font-size: 100%;} div.web {color: #399;} div.tip {color: #006;} div.warn, div.warn code {color: maroon;} hr {clear: both; visibility: hidden;} div.figure {float: left; width: 67%; margin: 0; padding: 0; text-align: right;} div.caption {float: right; width: 30%; margin: 0 1% 0 0; padding: 0 0 0 40%; border-top: 1px solid #006; voice-family: "\"}\""; voice-family:inherit; width: 19%; padding-left: 10%;} div.caption h5 {margin: 0 0.5em 0 0; padding: 0.33em 7px 0 0.5em; color: black; letter-spacing: 1px; background: #9BD url(captioncurve.gif) bottom right no-repeat;} div.caption p {font: italic 80% Arial, Verdana, Helvetica, sans-serif; color: #555; margin: 0; padding: 0.25em 0.5em;} </style>
Nie mamy zbyt wielu możliwości modyfikacji strony, gdy próbujemy odtworzyć układ graficzny książki, ale oto kilka propozycji, które możesz wypróbować.
div
, których atrybut class
ma wartość aside
. Aby osiągnąć pełny efekt, konieczne będzie utworzenie dwóch obrazów, które wykorzystasz w nagłówku prostokąta. Nie masz wprawdzie możliwości umieszczenia obu obrazów w tle nagłówka, ale możesz pomyśleć nad tym, w jaki sposób zmienić kod HTML tak, aby dwa obrazy znalazły się w odpowiednim miejscu bez użycia elementu img
w HTML, a przy wykorzystaniu CSS.