Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00192 008697 10442872 na godz. na dobę w sumie
CSS według Erica Meyera. Kolejna odsłona - książka
CSS według Erica Meyera. Kolejna odsłona - książka
Autor: Liczba stron: 272
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-901-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).
>> Możesz kupić komplet w niższej cenie!

Technologia kaskadowych arkuszy stylów (CSS) stopniowo wypiera inne metody definiowania układu i wyglądu witryn WWW. Uniwersalność i elastyczność stylów CSS sprawiają, że zmiana kolorystyki, liternictwa i konstrukcji strony sprowadza się do zmodyfikowania arkusza definiującego wygląd określonych elementów. W książce 'CSS według Erica Meyera. Sztuka projektowania stron WWW' autor -- prawdziwy guru projektantów witryn WWW -- przedstawił czytelnikom zasady poprawnego stosowania stylów w projektach. Nadszedł czas na wykorzystanie wiedzy w praktyce.

'CSS według Erica Meyera. Kolejna odsłona' to doskonała pozycja dla wszystkich, którzy chcą poznać technologię CSS na praktycznych przykładach. Czytając ją i wykonując opisane w niej projekty, przekonasz się, jakim ułatwieniem dla projektanta stron WWW są kaskadowe arkusze stylów. W kolejnych rozdziałach przeczytasz o konwertowaniu 'starych' stron WWW na dokumenty oparte o CSS, wykorzystywaniu stylów do formatowania witryn WWW i projektowaniu z wykorzystaniem najnowocześniejszych technologii definiowania wyglądu i układu strony. Poznasz sposoby przygotowywania atrakcyjnych i uniwersalnych witryn WWW, które zostaną prawidłowo wyświetlone we wszystkich przeglądarkach i na różnych urządzeniach.

O autorze:
Eric A. Meyer zajmuje się projektowaniem witryn i zagadnieniami związanymi z siecią WWW od końca 1993 roku. Obecnie jest ekspertem współpracującym z grupą roboczą W3C CSS&FP. [więcej...\

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl CSS wed³ug Erica Meyera. Kolejna ods³ona Autor: Eric A. Meyer T³umaczenie: Wojciech Moch ISBN: 83-7361-901-1 Tytu³ orygina³u: More Eric Meyer on CSS Format: B5, stron: 270 Przyk³ady na ftp: 1082 kB Technologia kaskadowych arkuszy stylów (CSS) stopniowo wypiera inne metody definiowania uk³adu i wygl¹du witryn WWW. Uniwersalnoġæ i elastycznoġæ stylów CSS sprawiaj¹, ¿e zmiana kolorystyki, liternictwa i konstrukcji strony sprowadza siê do zmodyfikowania arkusza definiuj¹cego wygl¹d okreġlonych elementów. W ksi¹¿ce „CSS wed³ug Erica Meyera. Sztuka projektowania stron WWW” autor — prawdziwy guru projektantów witryn WWW — przedstawi³ czytelnikom zasady poprawnego stosowania stylów w projektach. Nadszed³ czas na wykorzystanie wiedzy w praktyce. „CSS wed³ug Erica Meyera. Kolejna ods³ona” to doskona³a pozycja dla wszystkich, którzy chc¹ poznaæ technologiê CSS na praktycznych przyk³adach. Czytaj¹c j¹ i wykonuj¹c opisane w niej projekty, przekonasz siê, jakim u³atwieniem dla projektanta stron WWW s¹ kaskadowe arkusze stylów. W kolejnych rozdzia³ach przeczytasz o konwertowaniu „starych” stron WWW na dokumenty oparte o CSS, wykorzystywaniu stylów do formatowania witryn WWW i projektowaniu z wykorzystaniem najnowoczeġniejszych technologii definiowania wygl¹du i uk³adu strony. Poznasz sposoby przygotowywania atrakcyjnych i uniwersalnych witryn WWW, które zostan¹ prawid³owo wyġwietlone we wszystkich przegl¹darkach i na ró¿nych urz¹dzeniach. O autorze: Eric A. Meyer zajmuje siê projektowaniem witryn i zagadnieniami zwi¹zanymi z sieci¹ WWW od koñca 1993 roku. Jest g³ównym konsultantem firmy Complex Spiral Consulting (www.complexspiral.com). Mieszka w Cleveland w stanie Ohio. Ukoñczy³ Uniwersytet Case Western Reserve, na którym przez pewien czas pe³ni³ funkcjê webmastera. Obecnie jest ekspertem wspó³pracuj¹cym z grup¹ robocz¹ W3C CSS FP. By³ jednym z autorów i koordynatorów zestawu testów W3C CSS1. Czêsto bierze udzia³ w konferencjach, omawiaj¹c CSS, projektowanie stron WWW, standardy sieci WWW oraz przegl¹darki WWW. Jest te¿ autorem ksi¹¿ek CSS wed³ug Erica Meyera, CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny, CSS 2.0 Programme’s Reference, a tak¿e s³ynnych tabel porównania zgodnoġci przegl¹darek ze specyfikacj¹ CSS. SPIS TREŚCI O Autorze .......................................................................................................... 9 O Recenzentach technicznych ............................................................................10 Przedmowa ..................................................................................................... 11 Wprowadzenie .................................................................................................15 PROJEKT 1. Przekształcanie istniejącej strony ......................................................................21 Cele projektu ...................................................t...................................................t.................................................... 22 Przygotowania ...................................................t...................................................t.................................................. 22 Kładziemy fundamenty ...................................................t...................................................t................................ 23 Konwertowanie dokumentu ...................................................t...................................................t....................... 24 Okrajanie dokumentu ...................................................t...................................................t............................ 25 Struktura szkieletowa ...................................................t...................................................t............................ 25 Przebudowa projektu ...................................................t...................................................t..................................... 28 Style podstawowe ...................................................t...................................................t................................... 28 Składanie nagłówka ...................................................t...................................................t................................ 28 Wypełnianie paska nawigacyjnego ...................................................t...................................................... 30 Style tytułu i podsumowania ...................................................t................................................................. 33 Informacje z boku strony ...................................................t...................................................t..................... 35 Stylizowana recenzja ...................................................t...................................................t............................. 38 Wyróżnianie cytatu i rozbudowa projektu ...................................................t....................................... 40 Powrót do nagłówka ..................................................t...................................................t................................ 42 Ocena korzyści ...................................................t...................................................t................................................. 46 Drobna uwaga ...................................................t...................................................t.......................................... 47 Warianty ...................................................t...................................................t............................................................. 48 PROJEKT 2. Stylizowanie kolekcji zdjęć ................................................................................ 49 Cele projektu ...................................................t...................................................t.................................................... 50 Przygotowania ...................................................t...................................................t.................................................. 50 Kładziemy fundamenty ...................................................t...................................................t................................ 51 Tworzenie widoku arkusza prezentacji ...................................................t..................................................... 52 Opływanie ...................................................t...................................................t.................................................. 52 Odstępy i centrowanie ..................................................t...................................................t............................ 53 Style i slajdy ...................................................t...................................................t.............................................. 55 Tworzenie widoku galerii ...................................................t...................................................t............................ 57 Usuwanie stylów slajdów ...................................................t...................................................t..................... 57 Tytuły, tytuły, tytuły ..................................................t...................................................t............................... 58 Czyszczenie ...................................................t...................................................t............................................... 60 Wysokość i tabele ...................................................t...................................................t.................................... 61 6 Tworzenie widoku katalogu ...................................................t...........................................................................62 Znów opływanie ...................................................t...................................................t......................................63 Ułożenie i wyrównanie ...................................................t...................................................t.........................65 Poprawianie listy ...................................................t...................................................t.....................................67 Informacje do ramek ...................................................t...................................................t..............................69 Warianty ...................................................t...................................................t.............................................................71 PROJEKT 3. Stylizowanie raportu finansowego .....................................................................73 Cele projektu ...................................................t...................................................t....................................................74 Przygotowania ...................................................t...................................................t..................................................74 Style dla ekranu ...................................................t...................................................t...............................................74 Kładziemy fundamenty ...................................................t...................................................t........................75 Style czcionek ...................................................t...................................................t...........................................76 Etykiety tabeli ...................................................t...................................................t...........................................78 Style zysków ...................................................t...................................................t.............................................80 Akcentowanie wartości ujemnych ...................................................t.......................................................81 Style podsumowania ...................................................t...................................................t..............................82 Ostatnie poprawki ...................................................t...................................................t...................................84 Style do wydruku ...................................................t...................................................t............................................86 Zaczynamy ...................................................t...................................................t.................................................86 Zaznaczanie wierszy ...................................................t...................................................t..............................87 Wiersz podsumowania ...................................................t...................................................t..........................89 Warianty ...................................................t...................................................t.............................................................91 PROJEKT 4. Pozycjonowanie w tle ......................................................................................93 Cel projektu ...................................................t...................................................t.......................................................94 Przygotowania ...................................................t...................................................t..................................................94 Style o poranku ...................................................t...................................................t................................................94 Zaczynamy ...................................................t...................................................t.................................................94 Style nagłówka ...................................................t...................................................t.........................................96 Czyszczenie ...................................................t...................................................t............................................ 100 Style na plaży ....................................t...................................................t................................................................ 102 Ocena struktury i stylów ...................................................t...................................................t................... 102 Style tytułu ...................................................t...................................................t............................................. 104 Style treści ...................................................t...................................................t.............................................. 105 Dodawanie tła ...................................................t...................................................t........................................ 107 Wszystkie za i przeciw ...................................................t...................................................t....................... 109 Warianty ...................................................t...................................................t.......................................................... 111 PROJEKT 5. Menu tworzone na podstawie list .....................................................................113 Cele projektu ...................................................t...................................................t................................................. 114 Przygotowania ...................................................t...................................................t............................................... 114 Kładziemy fundamenty ...................................................t...................................................t............................. 114 Sprawdzanie kodu ...................................................t...................................................t................................ 115 Troszkę przestrzeni ...................................................t...................................................t..................................... 116 Rozdzielenie ...................................................t...................................................t........................................... 117 Styl ze strzałką ...................................................t...................................................t...................................... 118 Stylizowanie łączy ...................................................t...................................................t............................... 120 7 Zamykanie łączy ...................................................t...................................................t........................................... 124 Zmiany ...................................................t...................................................t..................................................... 124 Łącza w ramkach ...................................................t...................................................t.................................. 125 Zawiesić na linie ...................................................t...................................................t................................... 126 Warianty ...................................................t...................................................t.......................................................... 130 PROJEKT 6. Menu rozwijalne tworzone za pomocą CSS ...................................................... 133 Cele projektu ...................................................t...................................................t................................................. 134 Przygotowania ...................................................t...................................................t............................................... 134 Kładziemy fundamenty ...................................................t...................................................t............................. 134 Układanie menu ...................................................t...................................................t........................................... 136 Planowanie ........................................t...................................................t......................................................... 136 Pozycjonowanie menu podrzędnych ...................................................t............................................... 138 Style ładniejszych menu ...................................................t...................................................t.................... 139 Grupowanie łączy ...................................................t...................................................t................................ 140 Pozycje wskazywane ...................................................t...................................................t........................... 143 Specjalne style podrzędnych menu ...................................................t.................................................. 144 Przygotowywanie menu rozwijalnego ...................................................t............................................ 145 Ostatnie poprawki ...................................................t...................................................t................................ 148 Zmiana układu menu ...................................................t...................................................t.................................. 149 Zmiana orientacji ...................................................t...................................................t................................. 150 Wprowadzanie poprawek ..................................................t...................................................t................... 152 Poprawki w menu niższych poziomów ...................................................t..........................................154 Pod rozwagę ...................................................t...................................................t................................................... 156 Warianty ...................................................t...................................................t.......................................................... 157 PROJEKT 7. Tworzenie atrakcyjnych zakładek .....................................................................159 Cele projektu ...................................................t...................................................t................................................. 160 Przygotowania ...................................................t...................................................t............................................... 160 Kładziemy fundamenty ...................................................t...................................................t............................. 161 Stylizowanie łączy ...................................................t...................................................t....................................... 164 Początkowe style ...................................................t...................................................t.................................. 164 Poprawianie wyglądu zakładek ...................................................t.......................................................... 166 Dodawanie tekstury ...................................................t...................................................t............................ 170 Wskazywanie i ostatnie poprawki ...................................................t..................................................... 171 Obcięty tekst i zmniejszony obszar aktywny ...................................................t................................ 172 Tworzenie rzeczywistych zakładek ...................................................t......................................................... 175 Wprowadzanie zmian ...................................................t...................................................t......................... 176 Zakładki ...................................................t...................................................t................................................... 177 Wyróżnianie aktualnej zakładki ..................................................t.......................................................... 179 Końcowe uwagi ...................................................t...................................................t.................................... 182 Warianty ...................................................t...................................................t.......................................................... 184 PROJEKT 8. Stylizacja bloga ...............................................................................................187 Cele projektu ...................................................t...................................................t................................................. 188 Przygotowania ...................................................t...................................................t............................................... 188 Kładziemy fundamenty ...................................................t...................................................t............................. 188 8 Stylizowanie bloga ...................................................t...................................................t....................................... 190 Zabawy z tytułem ...................................................t...................................................t................................. 190 Tytuł i data wpisu ...................................................t...................................................t................................ 194 Rozdzielanie i łączenie ...................................................t...................................................t....................... 195 Tekst i informacje ...................................................t...................................................t................................ 198 Ostatnie poprawki ...................................................t...................................................t................................ 202 Warianty ...................................................t...................................................t.......................................................... 205 PROJEKT 9. Tworzenie strony domowej ............................................................................207 Cele projektu ...................................................t...................................................t................................................. 208 Przygotowania ...................................................t...................................................t............................................... 208 Kładziemy fundamenty ...................................................t...................................................t............................. 208 Tworzenie projektu ...................................................t...................................................t..................................... 210 Dwa obrazki za nagłówkiem ...................................................t............................................................... 210 Przesunięcia i ramki ...................................................t...................................................t............................ 213 Zawartość i pasek boczny ...................................................t...................................................t................. 214 Proste style paska bocznego ...................................................t................................................................ 218 Kolejny listek ...................................................t...................................................t......................................... 219 Łącza paska bocznego ...................................................t...................................................t........................ 221 Zmiany ramek ......................................t...................................................t..................................................... 223 Naturalne wyróżnienie ...................................................t...................................................t....................... 224 Ostatnie modyfikacje ...................................................t...................................................t.......................... 225 Warianty ...................................................t...................................................t.......................................................... 229 PROJEKT 10. Projektowanie ogrodu .................................................................................... 231 Cele projektu ...................................................t...................................................t................................................. 232 Przygotowania ...................................................t...................................................t............................................... 233 Kładziemy fundamenty ...................................................t...................................................t............................. 233 Tworzenie projektu ...................................................t...................................................t..................................... 235 Ziarna i sadzonki ...................................................t...................................................t.................................. 236 Nagłówek strony ...................................................t...................................................t.................................. 237 Dodajemy kwiat ...................................................t...................................................t.................................... 238 Stylizowanie podsumowania ...................................................t.............................................................. 241 Stylizowanie właściwej zawartości dokumentu ...................................................t.......................... 244 A teraz stopka ...................................................t...................................................t........................................ 248 Style paska bocznego ...................................................t...................................................t.......................... 252 Dodajemy obrazki PNG ...................................................t...................................................t............................ 259 Przemyślenia ...................................................t...................................................t.................................................. 262 Warianty ...................................................t...................................................t.......................................................... 264 Skorowidz .....................................................................................................265 2 STYLIZOWANIE KOLEKCJI ZDJĘĆ Fotografie istnieją po to, żeby przypominać nam to, o czym zapominamy. Pod tym względem — a także pod wieloma innymi — są one przeciwnością obrazów. Obrazy są zapisem tego, co pamięta malarz. Każdy z nas zapomina o czymś innym, dlatego fotografia może mieć całkowicie różne znaczenie w zależności od tego, kto na nią patrzy. — J O H N B E R G E R CO PRAWDA, NIE KAŻDY UMIESZCZA swoje zdjęcia w sieci, jednak tego rodzaju kolekcje zdjęć stanowią wyjątkowo interesujące wyzwanie. Każde zdjęcie i związane z nim opisy tworzą niewielką, zwartą całość, która musi zostać ułożona z uwzględnieniem pozostałych zdjęć znajdujących się na stronie. Można powiedzieć, że takie kolekcje podobne są do portali, z tą różnicą, że w takim portalu każde pole prowadzi do dodatkowych informacji o zdjęciu, a nie do najnowszych wiadomości ze świata polityki lub sportu. Kolekcje zdjęć podobne są również do znacznie częściej spotykanego układu strony; stanowią jakby katalogi produktów sprzedawanych w witrynach sklepów internetowych. Rzeczywiście, czasami sprzedawanym produktem mogą być same zdjęcia, i takie założenie przyjmiemy na czas tworzenia tego projektu. 50 PROJ EK T 2 CELE PROJEKTU W tym projekcie będziemy sprawdzać różne metody prezentowania kolekcji zdjęć wystawionych na sprzedaż. Nasz klient przedstawił nam następujące wymagania: ♦ Musimy przygotować trzy metody prezentacji zdjęć: widok arkusza kontaktowego dla artysty, aby mógł sprawdzić, co jest dostępne i co pokazać innym, widok galerii, aby użytkownicy mogli zobaczyć, co jest oferowane i w końcu szczegółowy widok katalogowy pozwalający na dokonywanie zamówień. ♦ W galerii i w arkuszu kontaktowym na ekranie powinno pojawiać się jak najwięcej fotografii, ale w taki sposób, żeby niezależnie od wielkości okna nie było konieczne poziome przewijanie strony. W tym widoku można przedstawić tylko zdjęcie wraz z jego tytułem, jednak zdjęcia powinny układać się w postaci siatki. ♦ W widoku katalogu każda fotografia powinna być prezentowana w połączeniu z jej tytułem, numerem katalogowym i ceną. W tym widoku przewijanie strony nie jest żadnym problemem. ♦ Wszystkie trzy widoki powinny być sterowane tymi samymi znacznikami, ponieważ klient nie chce płacić za dynamiczne strony i w związku z tym chce, aby znaczniki tworzone były jednokrotnie. W tym projekcie pracować będziemy tylko z układem kolekcji fotografii, i nie musimy zajmować się niczym ponad to. Zakładamy, że układ naszej strony zostanie umieszczony w jednej z kolumn większej strony, ale nie ma to żadnego wpływu na nasz projekt. Ze względu na ograniczenia nałożone w projekcie, szczególnie w widokach galerii i arkusza kontaktowego, nie będziemy mogli wykorzystać tabel do ułożenia zdjęć na ekranie. Dlaczego? Wiąże się to z żądaniem, by jak najwięcej zdjęć umieścić w oknie przeglądarki. W związku z tym w tych dwóch „zwartych” widokach zamiast tabel musimy użyć funkcji opływania rysunków i związanych z nimi informacji. Opływanie umożliwi umieszczenie w jednym wierszu tylu obrazków, ile zmieści się w oknie przeglądarki. Oznacza to, że użytkownik otwierający przeglądarkę w rozdzielczości 800×600 pikseli zobaczy cztery obrazki w wierszu, a użytkownik działający w rozdzielczości 1280×1024 pikseli zobaczy ich sześć lub siedem. Na tego rodzaju „przepływ” dokumentu pozwala wyłącznie opływania generowanego za pomocą CSS. Przy użyciu tabel nie ma szans na uzyskanie tego efektu. Dodatkowo, elementy możemy ustawić tak, żeby każdy z nich miał taką samą szerokość. W ten sposób sprawimy, że będą się one układały w postaci regularnej siatki. PRZYGOTOWANIA Instrukcje dotyczące pobierania plików serwera FTP znajdują się we wprowadzeniu. Proszę pobrać pliki związane z drugim projektem. Kto chce sam pracować z dokumentem, niech otworzy w swoim edytorze tekstowym plik ch02proj.html. To w tym pliku wprowadzać będziemy wszystkie zmiany dokonywane wraz z rozwojem naszego projektu. STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 51 Zabawa ze znakami białymi Proszę dokładnie przyjrzeć się tym znacznikom. Można zauważyć, że element WN został dosunięty do poprzedzającego go łącza, a zaraz za nim znajduje się znacznik zamykający element FKX. Taki zapis jest konieczny, aby uniknąć pewnych błędów ze znakami białymi, jakie ujawniają się w starszych wersjach Internet Explorera. Niestety, dla niektórych starszych przeglądarek znaki białe nadal mają duże znaczenie i dodanie ich do dokumentu lub usunięcie ich z dokumentu może powodować rozwiązanie niektórych zagadkowych problemów. KŁADZIEMY FUNDAMENTY Na początku musimy przyjrzeć się znacznikom, z którymi przyjdzie nam pracować. Oto dwa pierwsze zestawy obrazów i informacji, które znajdziemy w dokumencie: FKXENCUURKENU CJTGHQTKIKOILRIENCUUVP KOI UTEVPVJWODLRI C WN NKENCUUVKVNG 6JG(GTTGVV U CHHQFKNNK NKENCUUECVPQ (NK NKENCUURTKEG NK WN FKX FKXENCUURKERV CJTGHQTKIKOILRIENCUUVP KOI UTEVPVJWODLRI C WN NKENCUUVKVNG #V.WPEJNK NKENCUUECVPQ (NK NKENCUURTKEG NK WN FKX Jak widać, w kodzie użyto wielu różnych klas, musimy więc sprawdzić, jakie mają one znaczenie. Na szczęście otrzymaliśmy też krótkie objaśnienie tych stylów. ♦ Klasa RKE oznacza elementy FKX zawierające w sobie obrazki oraz związane z nimi informacje. Pozwala to na oddzielenie tego rodzaju elementów od pozostałych używanych na stronie. ♦ Klasa NU oznacza, że obejmuje ona obrazek o orientacji poziomej, natomiast klasa RV oznacza pionową orientację obrazka. ♦ Klasa VP oznacza łącza otaczającego miniaturkę obrazka. ♦ Klasa VKVNG oznacza tytuł obrazka, klasa ECVPQ to numer katalogowy, a klasa RTKEG (czyli cena)… no cóż, to jest dość oczywiste. Jak się niedługo przekonamy, najważniejszymi klasami są NU i RV, choć wszystkie z nich przydadzą się nam w czasie prac. Skorzystamy z nich na przykład do ustalenia wysokości i szerokości obrazków, które nie są podane w samym kodzie HTML. Wiemy już, że miniaturki poziome mają szerokość 128 pikseli i wysokość 96 pikseli (miniaturki pionowe mają wielkość 96×128 pikseli), dlatego dane te będziemy musieli zapisać w regułach CSS. Na początku przygotujmy proste style dla ciała strony (ang. body) i stopki. Dla elementu DQF[ zdefiniujemy lekko beżowe tło i niewielkie marginesy. Często będziemy korzystać z opływania, a jednocześnie chcemy, żeby stopka pojawiała się za wszystkimi obrazkami, musimy więc wyczyścić te oznaczenia. Wynik tych działań przedstawiono na rysunku 2.1. UV[NGV[RGVGZVEUU DQF[]DCEMITQWPF OCTIKPGO_ FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGOHQPV8GTFCPCUCPUUGTKH_ UV[NG Tak przygotowane style nie zmienią się już w naszym projekcie, wobec czego nie będziemy już do nich wracać. Zabieramy się do właściwej pracy! 52 PROJ EK T 2 R Y S U N E K 2 . 1 . Pierwsze kroki TWORZENIE WIDOKU ARKUSZA PREZENTACJI Na tym etapie możemy zobaczyć tylko samą strukturę dokumentu, czyli obrazki z dołączoną listą danych, tworzącą podpisy pod obrazkami. Na tym etapie chcemy przygotować „stronę prezentacji”, w której wszystkie obrazki poukładane będą jak w tabeli. W ten sposób umożliwimy przeglądanie dużej ilości obrazków. Opływanie Wypadki z ramkami Nie wszystkie przeglądarki otaczają niebieską ramką obrazki będące łączami, choć część z nich tak postępuje. W związku z tym dobrym rozwiązaniem jest nakazanie usuwania tego obramowania wszystkim przeglądarkom. Nie wpłynie to jednocześnie na działanie przeglądarek, które i tak tego nie robiły. Nie korzystamy z tabeli, dlatego dość oczywistym rozwiązaniem będzie włączenie opływania obrazków. Wiemy, że obrazki nie są szersze ani wyższe niż 128 pikseli, zatem wszystkim elementom FKX nadamy wielkość 128×128 pikseli, białe tło i czarną ramkę. À propos ramek, pozbędziemy się też niebieskiej ramki otaczającej same obrazki. Teraz strona wygląda tak, jak na rysunku 2.2. FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGOHQPV8GTFCPCUCPUUGTKH_ FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ DCEMITQWPFYJKVG DQTFGTRZUQNKF_ FKXRKEKOI]DQTFGTPQPG_ UV[NG Efekt zaczyna powoli przypominać naszą stronę prezentacyjną, ale niestety od razu rzuca się w oczy dość poważny problem — listy pod obrazkami! Elementom FKX nadaliśmy odgórnie założoną wysokość, dlatego listy nie mogą się już w nich zmieścić, co dość skutecznie psuje wygląd naszej strony. Musimy się ich na razie pozbyć, wyłączymy więc możliwość ich wyświetlania. STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 53 R Y S U N E K 2 . 2 . Opływanie elementu div z rysunkami Uwaga na Explorera W Internet Explorerze listy spowodują powiększenie wysokości elementów FKX, co przyczyni się do powstania zupełnie innego, ale równie fatalnego układu strony. Jest to błąd tej serii przeglądarek znany już od wersji 5.0. Parametr JGKIJV traktują one tak, jakby był parametrem OKPJGKIJV, którego (o ironio) nie obsługuje żadna wersja IE. FKXRKEKOI]DQTFGTPQPG_ FKXRKEWN]FKURNC[PQPG_ UV[NG W ten sposób informacje z list nie będą w ogóle wyświetlane. W dalszej części prac z powrotem włączymy wyświetlanie tych informacji, ale na razie po prostu się ich pozbędziemy. Odstępy i centrowanie Dzięki opływaniu obrazki tworzą w końcu regularną siatkę, ale nie sprawia ona najlepszego wrażenia. Spróbujmy rozsunąć nieco obrazki przez dodanie do elementu FKX niewielkich marginesów. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ OCTIKPRZRZDCEMITQWPFYJKVG DQTFGTRZUQNKFDNCEM_ Marginesy elementu nie nakładają się na siebie, dlatego faktyczna odległość między dwoma obrazkami znajdującymi się w jednym wierszu wynosić będzie 6 pikseli (RZ + RZ), a odstęp między wierszami będzie miał 10 pikseli. Oczywiście ustawienia te można dowolnie zmieniać w celu uzyskania innego wyglądu strony. Na tym etapie strona wygląda tak, jak na rysunku 2.3. Całość wygląda coraz lepiej, ale same obrazki są dziwnie poukładane. Dosunięcie do górnej lub lewej krawędzi sprawia nie najlepsze wrażenie. Znacznie lepsze wrażenie sprawiałyby, gdyby były wycentrowane wewnątrz swojego pola. Aby uzyskać taki efekt, musimy najpierw zdefiniować wielkości obrazków. Zrealizować to można dwoma prostymi (i bardzo podobnymi do siebie) regułami. 54 PROJ EK T 2 R Y S U N E K 2 . 3 . Rozsunięcie miniaturek FKXRKEKOI]DQTFGTPQPG_ FKXNUKOI]JGKIJVRZYKFVJRZ_ FKXRVKOI]JGKIJVRZYKFVJRZ_ FKXRKEWN]FKURNC[PQPG_ W ten sposób zapisaliśmy tylko to, o czym sami wiedzieliśmy, ale przeglądarka nie miała pojęcia: obrazki poziome (NU) mają 96 pikseli wysokości i 128 pikseli szerokości, a obrazki pionowe (RV) mają odwrotne wymiary. Pamiętamy, że elementom FKX nadaliśmy wielkość 128×128 pikseli. Aby teraz wycentrować obrazki wewnątrz elementów FKX, musimy do samych obrazków dodać odpowiednie marginesy. Różnica między 128 a 96 wynosi 32, a połowa z tego to 16. Wynika z tego, że obrazkom poziomym musimy dodać górny i dolny margines o wielkości RZ, a obrazkom pionowym podobnej wielkości margines lewy i prawy. Wyniki tych modyfikacji przedstawiono na rysunku 2.4. FKXNUKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRVKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ R Y S U N E K 2 . 4 . Centrowanie miniaturek STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 55 Inna metoda Zamiast przedstawionej techniki można też użyć jednego koloru ramki i zastosować styl ramki KPUGV. Niestety, to rozwiązanie ma pewną wadę. Przeglądarki mogą dowolnie modyfikować kolory ramek typu KPUGV (a także QWVUGV, ITQQXG i TKFIG). Jak można przewidzieć, każda z nich robi to nieco inaczej, dlatego w przypadkach, w których ważne jest cieniowanie takiej ramki, lepiej wykorzystać ramkę typu UQNKF i ręcznie określić potrzebne kolory. Style i slajdy Teraz układ strony wygląda już całkiem ładnie, ale nadal można go nieco poprawić. Do elementu FKX dodajmy niewielkie dopełnienia, żeby wokół obrazków powstało białe obramowanie. Pozostańmy przy naszej manierze stosowania potęg liczby dwa i do elementu FKX dodamy 16 pikseli dopełnienia. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZDCEMITQWPFYJKVG DQTFGTRZUQNKFDNCEM_ W tym momencie nasza strona zaczyna przypominać kolekcję slajdów 35 mm. Spróbujmy teraz pobawić się tym pomysłem. Najpierw przywróćmy ramki otaczające same obrazki, tak by przypominały one oprawę slajdu. FKXRKEKOI]DQTFGTRZUQNKF DQTFGTEQNQT######_ Ta drobna zmiana spowoduje otoczenie obrazków ciemnoszarą ramką po lewej stronie i na górze, a jasnoszarą po prawej stronie i na dole. Daje to dość ładny efekt rzeczywistej ramki. Jednak zabieg ten spowodował drobne rozchwianie ułożenia obrazków na stronie. Obrazki uzupełnione o ramki nie mają już swojej standardowej wielkości 128×96 pikseli lub odwrotnie, ale powiększyły się do wymiarów 130×98 pikseli, ponieważ ramki zostały dodane do szerokości i wysokości samego obrazka. Aby skorygować tę usterkę, musimy zmienić deklaracje wysokości i szerokości elementów FKX, a także ich dopełnienia. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZDCEMITQWPFYJKVG DQTFGTRZUQNKFDNCEM_ Za pomocą tych drobnych zmian odtworzyliśmy ułożenie obrazków, jakie mieliśmy wcześniej. Aby wykończyć tworzony efekt, musimy dodać zewnętrzne obramowanie, do czego doskonale nadawać się będą ramki samego elementu FKX. Musimy zastosować te same kolory, których użyliśmy w ramce obrazka, zmieniając tylko ich kolejność. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZDCEMITQWPFYJKVG DQTFGTRZUQNKFDQTFGTEQNQT######_ Proszę zauważyć, że z deklaracji DQTFGT usunęliśmy wartość DNCEM. Nie jest już ona potrzebna, ponieważ dodaliśmy deklarację DQTFGTEQNQT, co pozwoliło na ograniczenie wielkości pliku. Wyniki wprowadzonych zmian zaprezentowano na rysunku 2.5. To wygląda już niemalże jak zbiór slajdów 35 mm, ale nadal można poprawić jego wygląd. Zamiast stosować kolory tła i ramek, możemy je całkowicie usunąć i wstawić w tło odpowiedni rysunek. Jak? Doskonale znamy już wymiary elementów FKX, w których umieszczamy obrazki, 162×162 piksele. Na przykład slajdy poziome w osi poziomej mają następującą wielkość: 128px szerokości elementu KOI + 2px ramki elementu KOI + 30px dopełnienia elementu FKX + 2px ramki elementu FKX = 162 piksele. 56 PROJ EK T 2 R Y S U N E K 2 . 5 . Arkusz ze slajdami, a w każdym razie coś do niego podobnego Gotowe obrazki ramek slajdów znajdują się w archiwum przygotowanym na potrzeby tego projektu. Pliki te noszą nazwy frame-ls.gif i frame-pt.gif. Mamy zamiar usunąć ramki z elementu FKX, dlatego można je odjąć z powyższego równania, co w rezultacie da nam wymiary 160×160 pikseli. Wiemy już, jak duże obrazki musimy przygotować, aby pasowały jako tło naszych elementów dFKX. Trzeba pamiętać, że ze względu na dwa rodzaje obrazków (pionowe i poziome) potrzebować będziemy też dwóch rodzajów tła. Odpowiednie pliki z obrazami tła nazwiemy frame-pt.gif i frame-ls.gif. Nie jest przy tym ważne, czy powstaną one w wyniku skanowania rzeczywistej ramki slajdu, czy zostaną narysowane w Photoshopie. Potrzebny nam jest po prostu obrazek slajdu. Po przygotowaniu potrzebnych nam obrazów slajdów, musimy dopisać je do stylów strony. Zaczniemy od usunięcia ze stylu elementu FKX definicji ramek i dodania do nich jednego z obrazków. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZ DCEMITQWPFWTN HTCOGNUIKH EGPVGTPQTGRGCV_ Efekt prezentuje się świetnie w przypadku obrazków poziomych, ale w przypadku pionowych tworzy nieco dziwaczne wrażenie. Musimy dla obrazków pionowych podmienić obraz tła, co wykonujemy tworząc krótką regułę. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZ DCEMITQWPFWTN HTCOGNUIKH EGPVGTPQTGRGCV_ FKXRV]DCEMITQWPFKOCIGWTN HTCOGRVIKH _ FKXRKEKOI]DQTFGTRZUQNKFDQTFGTEQNQT######_ Powyższy zapis spowoduje podmianę wartości obrazu wstawianego w tle, ale pozostałe parametry (EGPVGTPQTGRGCV) pozostawi bez zmian. W ten sposób deklaracja DCEMITQWPFKOCIG WTN HTCOGRVIKH jest równoważna deklaracji DCEMITQWPFWTN HTCOGRVIKH EGPVGTPQTGRGCV. Wynik poprawek zobaczyć można na rysunku 2.6. Naprawdę nieźle! Najlepsze w tym rozwiązaniu jest to, że tło „ramki” można później dowolnie zmieniać tylko przez aktualizację plików obrazków. Na listingu 2.1 przedstawiam przygotowany do tej pory arkusz stylów „kolekcji slajdów”. Teraz dobrym posunięciem byłoby zapisanie naszego projektu do osobnego pliku, bo w kolejnym kroku usuniemy z niego wiele stylów i zaczniemy dodawać nowe. STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 57 R Y S U N E K 2 . 6 . Teraz rzeczywiście wygląda to jak zbiór slajdów! LIST ING 2 . 1 . Ukończony arkusz stylów „slajdów” DQF[]DCEMITQWPF OCTIKPGO_ FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGO HQPV8GTFCPCUCPUUGTKH_ FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZ DCEMITQWPFWTN HTCOGNUIKH EGPVGTPQTGRGCV_ FKXRV]DCEMITQWPFKOCIGWTN HTCOGRVIKH _ FKXRKEKOI]DQTFGTRZUQNKFDQTFGTEQNQT######_ FKXNUKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRVKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRKEWN]FKURNC[PQPG_ TWORZENIE WIDOKU GALERII Poprzedni arkusz stylów tworzy bardzo ciekawy efekt wizualny, ale ma on pewną wadę — nie przedstawia nazw poszczególnych zdjęć. Z takiej formy najprawdopodobniej najbardziej zadowolony będzie sam artysta, który doskonale wie, jak nazywają się poszczególne zdjęcia, a chce tylko mieć możliwość przeglądania ich wszystkich. Niestety, układ ten nie będzie bardzo użyteczny dla osób odwiedzających taką stronę. Właśnie dlatego zamienimy teraz kolekcję slajdów w galerię zdjęć, z których każde podpisane będzie swoim tytułem. Usuwanie stylów slajdów Oczyszczanie pola do pracy zaczniemy od usuwania stylów, które wstawiają na stronie obrazki w tło elementu FKX (efekt widać na rysunku 2.7). Po ich usunięciu, nasz arkusz kurczy się do zestawu stylów, który prezentuję na listingu 2.2. 58 PROJ EK T 2 R Y S U N E K 2 . 7 . Usunięte ramki slajdów LIST ING 2 . 2 . Okrojony arkusz stylów DQF[]DCEMITQWPF OCTIKPGO_ FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGO HQPV8GTFCPCUCPUUGTKH_ FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZ_ FKXRKEKOI]DQTFGTRZUQNKFDQTFGTEQNQT######_ FKXNUKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRVKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRKEWN]FKURNC[PQPG_ Taki zestaw stylów sprawia, że większość prac mamy już właściwie za sobą. Pozostaje tylko wyświetlić tytuły zdjęć. Tytuły, tytuły, tytuły Aby przedstawić same tytuły zdjęć, musimy wyłączyć ukrywanie elementów WN, a włączyć ukrywanie tych części listy, które w tym miejscu nie są nam potrzebne. Wyłączenie ukrywania jest niezwykle proste — wystarczy z reguły FKXRKEWN usunąć deklarację FKURNC[PQPG. Oczywiście w ten sposób pozostanie nam tylko pusty blok deklaracji: FKXRKEWN]_ Jest to w pełni poprawny zapis, choć nie ma on żadnego sensu. W jego wyniku elementy będą wybierane tylko po to, żeby nie nadać im żadnego stylu, musimy więc wypełnić tę pustą przestrzeń. Elementom WN nadamy marginesy, dopełnienie, a także style czcionek. FKXRKEWN]OCTIKPGORCFFKPI HQPVDQNFUOCNN#TKCN8GTFCPCUCPUUGTKH_ STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 59 Teraz listy znowu się pojawią. Niestety, pojawią się w całości, a nam potrzebne są tylko tytuły. Wobec tego ukryjemy pozostałe elementy listy, co pozwoli nam na uzyskanie strony pokazanej na rysunku 2.8. FKXRKEWN]OCTIKPGORCFFKPI HQPVDQNFUOCNN#TKCN8GTFCPCUCPUUGTKH_ NKECVPQNKRTKEG]FKURNC[PQPG_ R Y S U N E K 2 . 8 . Wyświetlamy tytuł, ale ukrywamy pozostałe dane Nieźle, ale wyraźnie widać, że projekt wymaga dalszych poprawek. Na początku musimy pozbyć się znaków wypunktowania, bo nie dość, że wyglądają paskudnie, to jeszcze rozpraszają uwagę. Można by je usunąć przez wprowadzenie właściwości NKUVUV[NG, ale możemy też zmienić po prostu styl elementu NK tak, by nie był on traktowany jak element listy. Będzie to działało doskonale z tym tylko wyjątkiem, że Internet Explorer dla Windows mimo wszystko zachowa znak wypunktowania. Z tego względu trzeba będzie wprowadzić obie zmiany. Skoro jesteśmy już na tym etapie, to jednocześnie możemy wyśrodkować tekst. FKXRKEWN]OCTIKPGORCFFKPI HQPVDQNFUOCNN#TKCN8GTFCPCUCPUUGTKH_ NKVKVNG]FKURNC[DNQEMNKUVUV[NGPQPGVGZVCNKIPEGPVGT_ NKECVPQNKRTKEG]FKURNC[PQPG_ Teraz podniesiemy tytuły do góry, zbliżając je do obrazków. Jak pamiętamy, podczas tworzenia arkuszy stylów „slajdów” do obrazków dodawaliśmy marginesy. To właśnie te marginesy odsuwają tytuły od poziomych obrazków. Proszę zwrócić uwagę, że mówiłem tylko o obrazkach poziomych. Pionowe obrazki nie mają po prostu żadnego marginesu górnego ani dolnego, dlatego tylko w ich przypadku musimy poprawić wartości marginesów. Na rysunku 2.8 zauważyć można jeszcze jedną ciekawą rzecz. Pierwsze linie tytułów obrazków w każdym wierszu są wyrównane. Jest to efekt, który warto zachować, dlatego nie będziemy usuwać marginesu dolnego w obrazkach poziomych, tylko przeniesiemy go w całości na górę. FKXNUKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ 60 PROJ EK T 2 Na razie wygląda to nieźle, ale nie pomyśleliśmy o jeszcze jednej sprawie — wysokości elementu FKX. Nadal nadajemy im wysokość RZ uzupełnioną o niewielkie dopełnienie, co w sumie oznacza, że podpisy mają szansę wysunięcia się poza ramy elementu. Aby to zobrazować, a jednocześnie nie zakłócać zbytnio toku naszych prac, dodajmy do elementu FKX delikatną ramkę, taką jak przedstawiona na rysunku 2.9. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZDQTFGTRZFQVVGFUKNXGT_ R Y S U N E K 2 . 9 . Już prawie gotowe, jeszcze tylko kilka kroków Uwaga na Explorera Tak jak poprzednio, błąd Internet Explorera dla Windows związany z parametrem JGKIJV spowoduje, że generowana przez niego strona będzie wyglądała nieco inaczej niż pokazana na rysunku 2.9. Teraz dobrym posunięciem byłoby zapisanie naszego projektu do osobnego pliku, bo w kolejnym podrozdziale rozpoczniemy prace od nowa, usuwając z niego większość stylów. Czyszczenie Na tym etapie wystarczy, że powiększymy wysokość elementu FKX o tyle, żeby zmieścił się w nim tytuł obrazu. Po co w ogóle się tym zajmować? Pierwszym powodem jest to, że taki układ strony nie będzie wyglądał dobrze w Internet Explorerze dla Windows. Drugim — fakt, że w przypadku gdy długi tytuł znajdzie się nad pionowym obrazkiem, istnieje prawdopodobieństwo, że będą się na siebie nakładać. Trzeci powód jest natury estetycznej. Pozostawienie elementów, które „wystają” poza ramy ich elementów nadrzędnych, wydaje się być przejawem braku staranności (przynajmniej na razie, w dalszej części projektu postaramy się wykorzystać to właśnie zachowanie). Wobec tego usuniemy dolne i górne dopełnienie elementu FKX i odpowiednio poprawimy ich wysokość. Ach, nie można też zapomnieć o usunięciu srebrnej ramki. FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZ_ Przez wprowadzenie tej zmiany zakończyliśmy przygotowywanie arkusza stylów galerii, który można w całości zobaczyć na listingu 2.3, a efekt jego działania — na rysunku 2.10. STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 61 LIST ING 2 . 3 . Arkusz stylów „galerii” DQF[]DCEMITQWPF OCTIKPGO_ FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGO HQPV8GTFCPCUCPUUGTKH_ FKXRKE]HNQCVNGHVJGKIJVRZYKFVJRZ RCFFKPIRZOCTIKPRZRZ_ FKXRKEKOI]DQTFGTRZUQNKFDQTFGTEQNQT######_ FKXNUKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRVKOI]JGKIJVRZYKFVJRZOCTIKPRZ_ FKXRKEWN]OCTIKPGORCFFKPI HQPVDQNFUOCNN#TKCN8GTFCPCUCPUUGTKH_ NKVKVNG]FKURNC[DNQEMVGZVCNKIPEGPVGT_ NKECVPQNKRTKEG]FKURNC[PQPG_ R Y S U N E K 2 . 1 0 . Galeria piękności ogrodowych Wysokość i tabele Wysokość 190 pikseli została wybrana w ten sposób, aby mieściły się również tytuły tak długie, że wymagałyby podzielenia na trzy wiersze. Niestety, w tym rozwiązaniu można się dopatrzyć pewnej wady. Co się stanie, w momencie gdy użytkownik powiększy czcionkę albo tytuł rozciągnie się na pięć lub sześć wierszy? W takim przypadku układ strony zostanie zniszczony, a my nie mamy sposobu na jego poprawienie. Jest to nieuniknione ograniczenie elementów opływanych. Po prostu każdy taki element stanowi samotną wyspę; jego wymiary w ogóle nie są zależne od jakiegokolwiek innego elementu. Trzeba tutaj powiedzieć, że jedynymi elementami, które będę dostosowywały swoją wysokość do wysokości sąsiadujących z nimi elementów, są komórki tabeli. 62 PROJ EK T 2 Układ tabelaryczny bez tabel! Istnieje jednak rozwiązanie alternatywne w stosunku do tabel i opływania. Można zastosować podany tu kod i do poszczególnych elementów FKX dołączyć wartości FKURNC[ opisujące tabele. Można by na przykład zadeklarować reguły FKXTQY ]FKURNC[VCDNGTQY_ i FKXTQYFKX]FKURNC[ VCDNGEGNN_. W ten sposób utworzylibyśmy strukturę tabelaryczną składającą się z elementów nietabelarycznych, która działałaby w najnowszych przeglądarkach, oczywiście z wyjątkiem Internet Explorera. To oznacza, że czasami tabela jest najlepszą metodą tworzenia układu galerii zdjęć. Jeżeli znajdziemy się w sytuacji, w której nie jest możliwe określenie długości ich podpisów, albo chcemy, żeby każdy obrazek umieszczany był w polu o takiej samej wielkości, jak pole największego obrazka w wierszu, to jesteśmy skazani na użycie tabel. Oczywiście, taką tabelę można stylizować za pomocą CSS i wielu technik opisywanych w tej książce. Inna sytuacja, w której opłacalne jest stosowanie tabeli, to taka, gdy w jednym wierszu musimy umieścić określoną liczbę obrazków. Można oczywiście podzielić strukturę dokumentu za pomocą CSS. W ramach przykładu proszę przejrzeć poniższy kod. FKXENCUUYKGTU FKXENCUURKENU ŗFKX FKXENCUURKERV ŗFKX FKXENCUURKENU ŗFKX FKXENCUURKENU ŗFKX FKX Dzięki zgrupowaniu czterech obrazków zyskujemy pewność, że w wierszu zawsze będzie ich tylko cztery. Ale po co tak komplikować sprawę, skoro moglibyśmy po prostu użyć tabeli? Podany wyżej kod jest praktycznie odpowiednikiem kodu tabeli. Proszę spojrzeć: VT VFENCUURKENU ŗVF VFENCUURKERV ŗVF VFENCUURKENU ŗVF VFENCUURKENU ŗVF VT Ten kod jest znacznie prostszy, wymaga wpisania mniejszej liczby znaków i pozwala łatwo ograniczyć liczbę obrazków wyświetlanych w jednym wierszu. Do tego celu nadają się właśnie tabele. Proszę jednak pamiętać, że naszym nadrzędnym zamierzeniem było umożliwienie obrazkom „płynięcia” tak, żeby każdy wiersz składał się z jak największej liczby obrazków pozwalających wyświetlić się w oknie przeglądarki. Nie można tego osiągnąć za pomocą tabel, a tylko wykorzystując opływanie. Oznacza to, że jak zwykle należy odpowiednio wybierać narzędzia w zależności od stojącego przed nami zadania. TWORZENIE WIDOKU KATALOGU Dowiedzieliśmy się, jak należy tworzyć „pływające” tabele z obrazkami. Spróbujmy teraz nieco innego rozwiązania. Tym razem przygotujemy pionowy zestaw obrazków, obok których znajdować się będą informacje o tytule zdjęcia, numerze katalogowym i cenie. W tym celu będziemy musieli pozbyć się praktycznie wszystkich przygotowanych wcześniej stylów i zacząć prace od początku. Zatrzymamy tylko style ciała i stopki strony, co zaprezentowano na listingu 2.4. Praktycznie wróciliśmy do stanu, który mieliśmy na samym początku projektu (dla przypomnienia proszę spojrzeć na rysunek 2.1). STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 63 LIST ING 2 . 4 . Zaczynamy od początku DQF[]DCEMITQWPF OCTIKPGO_ FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGO HQPV8GTFCPCUCPUUGTKH_ Znów opływanie Aby ograniczyć długość strony tworzonej w takim układzie, umieścimy tytuł i inne informacje tekstowe obok obrazka, a nie pod nim. Umieszczenie tekstu obok obrazka jest bardzo proste; wystarczy włączyć jego opływanie. W tym jednak przypadku włączymy opływanie łącza zawierającego obrazek. FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGO HQPV8GTFCPCUCPUUGTKH_ FKXRKECVP]HNQCVNGHV_ UV[NG Opływanie łącza powoduje, że razem z nim opływany jest też obrazek, podobnie jak było to w opływanym elemencie FKX. W obu tych przypadkach opływane są wszystkie elementy zawarte w elemencie opływanym. Elementy FKX uzupełnimy też o odpowiednie style. Niewielki margines i ramka umożliwiająca nam śledzenie, jak postępują prace nad układem. Wynik tych zmian pokazano na rysunku 2.11. FKXHQQVGT]ENGCTDQVJRCFFKPIVQRGO HQPV8GTFCPCUCPUUGTKH_ FKXRKE]OCTIKPRZRCFFKPIDQTFGTRZFQVVGFITC[_ FKXRKECVP]HNQCVNGHV_ R Y S U N E K 2 . 1 1 . Jeżeli nie jest się ostrożnym, opływanie może być niebezpieczne O rety! Jeżeli chcielibyśmy uzyskać taki efekt, to nie ma sprawy, ale nam w ogóle nie o to chodziło! 64 PROJ EK T 2 Co się stało? Dokładnie to, o co prosiliśmy. Włączając opływanie elementów powodujemy usunięcie ich z normalnego przepływu dokumentu, co oznacza, że nie wpływają one na wysokość swoich elementów nadrzędnych. W efekcie wysokość każdego elementu FKX wyznaczana jest przez normalnie przepływający tekst, czyli listę informacyjną. Co więcej, elementy opływane umieszczane są w miejscu, w którym znalazłyby się, gdyby normalnie uczestniczyły w przepływie tekstu i dopiero wtedy poddawane są opływaniu. W tym przypadku opływane są z prawej strony, wobec czego druga, będąca łączem miniaturka umieszczana jest na szczycie swojego elementu FKX, po jej lewej stronie. Jednak przed osiągnięciem lewej krawędzi strony natyka się na inny element opływany, czyli pierwsze łącze. Zostaje więc zatrzymane i umieszczone po prawej stronie poprzedniego elementu opływanego. To samo dzieje się z trzecim, czwartym łączem i kolejnymi. Każde z nich zatrzymywane jest na prawej krawędzi poprzedniego obrazka. Sytuację tę można naprawić na kilka sposobów. Jeżeli chcielibyśmy, aby element FKX każdego obrazka „rozciągał się” wokół opływanego łącza, to można również włączyć opływanie samych elementów. W aktualnych przeglądarkach (oraz w specyfikacji CSS 2.1) elementy opływane rozciągną się tak, by objąć wszystkie zawarte w sobie opływane elementy podrzędne. Takie rozwiązanie nie jest nam tutaj potrzebne, ponieważ kropkowane ramki i tak zostaną później usunięte. Niezbędne są nam one tylko do celów diagnostycznych. W związku z tym spróbujemy wyczyścić element FKX. Skoro elementy opływane są po prawej stronie, to możemy włączyć czyszczenie od lewej strony. Ustalimy też szerokość elementu FKX, ponieważ i tak później będziemy chcieli ją ograniczyć. FKXRKE]OCTIKPRZRCFFKPIDQTFGTRZFQVVGFITC[ ENGCTNGHVYKFVJRZ_ Zapis ten spowoduje „zepchnięcie” elementu FKX w dół każdego elementu opływanego znajdującego się przed nim i z jego lewej strony. Wynik tej poprawki zobaczyć można na rysunku 2.12. Nie do końca rozumiem… To wyjaśnienie może być trochę niejasne. Jeżeli tak jest, to proszę przeczytać je powoli kilka razy. W tym czasie proszę pomyśleć, co się stanie, jeżeli włączymy opływanie w serii obrazków, przy których nie ma żadnego tekstu. Mniej więcej to samo dzieje się tutaj, z tą różnicą, że tekst nieco bardziej komplikuje sprawę. R Y S U N E K 2 . 1 2 . Usuwanie problemów z opływaniem STYLI ZOWANI E KOLE KCJI Z DJ ĘĆ 65 Ułożenie i wyrównanie Na rysunku 2.12 z pewnością zauważymy element wymagający poprawienia — pionowe obrazki nie są wyrównane do pozostałych. W tabeli taki obrazek najprawdopodobniej znalazłby się w osobnej komórce, w której moglibyśmy dosunąć go do prawej krawędzi. Niestety, tutaj nie możemy skorzystać z tego luksusu. Na szczęście możemy jeszcze pobawić się troszkę marginesami opływanych łączy i za pomocą tej metody uzyskać pożądany efekt. Trzeba tylko zrównać jego szerokość z szerokością znajdującego się wewnątrz obrazka i tak ustalić lewy margines, żeby zrównać szerokość tych łączy z szerokością łączy zawierających obrazki poziome. FKXRKECVP]HNQCVNGHV_ FKXRVCVP]YKFVJRZOCTIKPNGHVRZ_ UV[NG Skoro podaliśmy już szerokość łączy z obrazkami pionowymi, nic nie stoi na przeszkodzie, żeby podobnie określić szerokość łączy z obrazkami poziomymi. Z pewnością nie zaszkodzi, a w przyszłości może okazać się to przydatne. FKXRVCVP]YKFVJRZOCTIKPNGHVRZ_ FKXNUCVP]YKFVJRZ_ UV[NG Usuńmy teraz te paskudne niebieskie obramowania rysunków i zastąpmy je czymś troszkę mniej jaskrawym. FKXNUCVP]YKFVJRZ_ CVPKOI]DQTFGTRZUQNKFDQTFGTYKFVJRZRZRZRZ_ UV[NG Nieco grubsza dolna i prawa ramka wytworzy ledwie zauważalny „cień” rzucany przez każdy rysunek. Można go zauważyć na niektórych obrazkach przedstawionych na rysunku 2.13. R Y S U N E K 2 . 1 3 . Wyrównanie rysunków i uzupełnienie ich o cienie tworzone przez ramki 66 PROJ EK T 2 Po dokładnym przyjrzeniu się rysunkowi 2.13 zauważyć mdożna dwie rzeczy. Pierwszą jest to, że tekst i ramki obrazków lekko na siebie nachodzą. Wynika to stąd, że rysunki są teraz większe niż zawierające je łącza z powodu ramek, które dodaliśmy do rysunków. Teraz dobrze by było poprawić szerokości samych łączy. Spróbujmy nadać im szerokość trochę większą niż szerokość obrazków. FKXRVCVP]YKFVJRZOCTIKPNGHVRZ_ FKXNUCVP]YKFVJRZ_ Drugą rzeczą, jaką widać na rysunku 2.13, jest nakładanie się znaków wypunktowania na obrazki. Jest to wynik działania opływania elementów i umiejscawiania znaków wypunktowania. Co ciekawe, nie dzieje się tak we wszystkich przeglądarkach. Takie zachowanie mogłoby sprawiać nam problemy, gdybyśmy obok obrazków chcieli umieszczać listy ze znakami wypunktowania. Skoro chcemy i tak pozbyć się tych znaków, to właściwie nie ma to dla nas znaczenia. CVPKOI]DQTFGTRZUQNKFDQTFGTYKFVJRZRZRZRZ_ FKXRKENK]NKUVUV[NGPQPG_ UV[NG W ten sposób likwidujemy nakładanie się znaków wypunktowania na obrazki, ale nadal pozostawiamy teksty „przyklejone” do prawych krawędzi obrazków. Odsuniemy je od siebie przez zastosowanie kombinacji marginesów i dopełnienia. Dodamy też z lewej strony ramkę, dzięki której będziemy wiedzieć, gdzie znajduje się pocz
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS według Erica Meyera. Kolejna odsłona
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: