Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00293 008578 11062405 na godz. na dobę w sumie
CSS według Erica Meyera. Sztuka projektowania stron WWW - książka
CSS według Erica Meyera. Sztuka projektowania stron WWW - książka
Autor: Liczba stron: 312
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-709-4 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!

Ewolucja internetu pociągnęła za sobą również ewolucję technologii wykorzystywanych do tworzenia stron WWW. Witryny są wyświetlane nie tylko na monitorach komputerów, ale także na wyświetlaczach telefonów komórkowych i urządzeń przenośnych, drukowane na drukarkach i odczytywane przez urządzenia wykorzystywane przez osoby z wadami wzroku. Powstała więc konieczność ustalenia standardu formatowania stron, który pozwalałby na oddzielenie treści dokumentu od jego wyglądu. Takie właśnie założenie przyświecało twórcom mechanizmów CSS -- kaskadowych arkuszy stylów. Wykorzystując je, możemy zdefiniować wygląd i formatowanie tekstu, kolorystykę dokumentów, układ elementów na stronie, a nawet zachowanie się jej składników w reakcji na różne działania użytkownika. Dzięki technologii CSS możemy całkowicie zmienić wygląd strony, modyfikując jeden plik zawierający definicję stylów.

Książka 'CSS według Erica Meyera. Sztuka projektowania stron WWW' to szczegółowe omówienie kaskadowych arkuszy stylów, autorstwa jednego z najbardziej cenionych specjalistów w dziedzinie projektowania stron WWW. Autor przedstawia metodologię projektowania witryn WWW z wykorzystaniem stylów na bazie 13 praktycznych projektów. Wykonując je, poznasz wszystkie tajniki kaskadowych arkuszy stylów.

Poznaj najnowsze trendy w projektowaniu stron WWW.

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 CSS wed³ug Erica Meyera. Sztuka projektowania stron WWW 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 Autor: Eric A. Meyer T³umaczenie: Andrzej Badowski, Wojciech Grobel, Joanna Sugiero ISBN: 83-7361-709-4 Tytu³ orygina³u: Eric Meyer on CSS. Mastering the Language of Web Design Format: B5, stron: 322 Ewolucja internetu poci¹gnê³a za sob¹ równie¿ ewolucjê technologii wykorzystywanych do tworzenia stron WWW. Witryny s¹ wyġwietlane nie tylko na monitorach komputerów, ale tak¿e na wyġwietlaczach telefonów komórkowych i urz¹dzeñ przenoġnych, drukowane na drukarkach i odczytywane przez urz¹dzenia wykorzystywane przez osoby z wadami wzroku. Powsta³a wiêc koniecznoġæ ustalenia standardu formatowania stron, który pozwala³by na oddzielenie treġci dokumentu od jego wygl¹du. Takie w³aġnie za³o¿enie przyġwieca³o twórcom mechanizmów CSS — kaskadowych arkuszy stylów. Wykorzystuj¹c je, mo¿emy zdefiniowaæ wygl¹d i formatowanie tekstu, kolorystykê dokumentów, uk³ad elementów na stronie, a nawet zachowanie siê jej sk³adników w reakcji na ró¿ne dzia³ania u¿ytkownika. Dziêki technologii CSS mo¿emy ca³kowicie zmieniæ wygl¹d strony, modyfikuj¹c jeden plik zawieraj¹cy definicjê stylów. Ksi¹¿ka „CSS wed³ug Erica Meyera. Sztuka projektowania stron WWW” to szczegó³owe omówienie kaskadowych arkuszy stylów, autorstwa jednego z najbardziej cenionych specjalistów w dziedzinie projektowania stron WWW. Autor przedstawia metodologiê projektowania witryn WWW z wykorzystaniem stylów na bazie 13 praktycznych projektów. Wykonuj¹c je, poznasz wszystkie tajniki kaskadowych arkuszy stylów. • Konwertowanie istniej¹cych witryn WWW • Definiowanie stylów dla artyku³ów prasowych • Formatowanie hiper³¹czy i przycisków nawigacyjnych • Tworzenie stylów na potrzeby drukowania dokumentów • Modyfikowanie wygl¹du formularzy • Zmiana uk³adu strony • Pozycjonowanie elementów strony Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Eric A. Meyer projektuje witryny WWW od 1993 roku. Obecnie pracuje nad wdra¿aniem standardów sieciowych dla Netscape Communications; mieszka w Cleveland w stanie Ohio. Koordynowa³ tworzenie dokumentu CSS1 Test Suite przez konsorcjum W3C. Jest równie¿ autorem ksi¹¿ek CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny (wydawnictwo Helion), CSS2.0 Programmer’s Reference (wydawnictwo Osborne/McGraw-Hill), a tak¿e zestawieñ zgodnoġci przegl¹darek ze standardami CSS. SPIS TREŚCI O Autorze O konsultantach technicznych Przedmowa Wstęp PROJEKT 1. Konwersja istniejącej strony 7 8 9 11 17 Cel projektu ...................................................t...................................................t......................................................18 Przygotowania...................................................t...................................................t..................................................19 Na początek...................................................t...................................................t.......................................................19 Konwersja dokumentu...................................................t...................................................t..................................21 Korzyści z naszej pracy ...................................................t...................................................t................................43 Przykładowe modyfikacje...................................................t...................................................t............................45 PROJEKT 2. Style na potrzeby artykułów prasowych 47 Cel projektu ...................................................t...................................................t......................................................47 Przygotowania...................................................t...................................................t..................................................48 Na początek...................................................t...................................................t.......................................................48 Style w dokumencie...................................................t...................................................t.......................................50 Modyfikowanie stylów ...................................................t...................................................t.................................56 Przekształcanie arkusza stylów na zewnętrzny ...................................................t......................................60 Modyfikacje podstawowego projektu ...................................................t........................................................62 Przykładowe modyfikacje...................................................t...................................................t............................65 PROJEKT 3. Formatowanie kalendarza wydarzeń 67 Cel projektu ...................................................t...................................................t......................................................67 Przygotowania...................................................t...................................................t..................................................68 Na początek...................................................t...................................................t.......................................................68 Formatowanie dokumentu ...................................................t...................................................t..........................70 Praca z bardziej szczegółowym kalendarzem ...................................................t.........................................80 Przykładowe modyfikacje...................................................t...................................................t............................87 PROJEKT 4. Ożywianie hiperłączy 89 Cel projektu ...................................................t...................................................t......................................................89 Przygotowania...................................................t...................................................t..................................................90 Na początek...................................................t...................................................t.......................................................90 Formatowanie dokumentu ...................................................t...................................................t..........................91 Przykładowe modyfikacje...................................................t...................................................t......................... 101 4 PROJEKT 5. Jak upiększyć menu 103 Cel projektu ...................................................t...................................................t................................................... 104 Przygotowania...................................................t...................................................t............................................... 104 Na początek...................................................t...................................................t.................................................... 104 Formatowanie menu ...................................................t...................................................t................................... 106 Zmiana wyglądu menu ...................................................t...................................................t.............................. 116 Przykładowe modyfikacje...................................................t...................................................t......................... 121 PROJEKT 6. Formatowanie wydruków 123 Cel projektu ...................................................t...................................................t................................................... 124 Przygotowania...................................................t...................................................t............................................... 124 Na początek...................................................t...................................................t.................................................... 124 Formatowanie dokumentu do druku ...................................................t....................................................... 126 Style drukowania na potrzeby artykułu prasowego...................................................t........................... 134 Formatowanie wydruku kalendarza...................................................t......................................................... 138 Przykładowe modyfikacje...................................................t...................................................t......................... 145 PROJEKT 7. Dbamy o wygląd formularzy 147 Cel projektu ...................................................t...................................................t................................................... 147 Przygotowania...................................................t...................................................t............................................... 148 Na początek...................................................t...................................................t.................................................... 148 Formatowanie dokumentu ...................................................t...................................................t....................... 150 Style wykorzystywane do druku...................................................t............................................................... 155 Wykończenie ...................................................t...................................................t................................................. 163 Przykładowe modyfikacje...................................................t...................................................t......................... 165 PROJEKT 8. Tworzenie kartki internetowej z pozdrowieniami 167 Cel projektu ...................................................t...................................................t................................................... 167 Przygotowania...................................................t...................................................t............................................... 168 Na początek...................................................t...................................................t.................................................... 168 Stylizujemy dokument...................................................t...................................................t............................... 169 Nieco inne spojrzenie...................................................t...................................................t................................. 177 Jeszcze jeden wariant...................................................t...................................................t.................................. 181 Przykładowe modyfikacje...................................................t...................................................t......................... 183 PROJEKT 9. Układ wielokolumnowy 185 Cel projektu ...................................................t...................................................t................................................... 186 Przygotowania...................................................t...................................................t............................................... 186 Na początek...................................................t...................................................t.................................................... 186 Stylizujemy dokument...................................................t...................................................t............................... 187 Stylizujemy dokument przez pozycjonowanie...................................................t.................................... 193 Stylizujemy trzy kolumny ...................................................t...................................................t........................ 197 Wracamy do pływania...................................................t...................................................t................................ 205 Przykładowe modyfikacje...................................................t...................................................t......................... 207 5 PROJEKT 10. Ucieczka z pudełka 209 Cel projektu ...................................................t...................................................t................................................. 210 Przygotowania ...................................................t...................................................t............................................ 210 Na początek ...................................................t...................................................t................................................. 210 Stylizujemy dokument ...................................................t...................................................t............................ 211 Uwaga, zakręty ...................................................t...................................................t........................................... 219 Przykładowe modyfikacje ...................................................t...................................................t...................... 229 PROJEKT 11. Pozycjonowanie sposobem ulepszenia projektu 231 Cel projektu ...................................................t...................................................t................................................. 232 Przygotowania ...................................................t...................................................t............................................ 232 Na początek ...................................................t...................................................t................................................. 232 Stylizujemy dokument ...................................................t...................................................t............................ 234 Przykładowe modyfikacje ...................................................t...................................................t...................... 253 PROJEKT 12. Unieruchamiamy tło 255 Cel projektu ...................................................t...................................................t................................................. 256 Przygotowania ...................................................t...................................................t............................................ 256 Na początek ...................................................t...................................................t................................................. 256 Stylizujemy dokument ...................................................t...................................................t............................ 257 Inne pomysły ...................................................t...................................................t.............................................. 271 PROJEKT 13. Eric Meyer o CSS w CSS 273 Cel projektu ...................................................t...................................................t................................................. 274 Przygotowania ...................................................t...................................................t............................................ 274 Na początek ...................................................t...................................................t................................................. 274 Określenie stylów w dokumencie ...................................................t.......................................................... 275 Analiza po ukończeniu projektu ...................................................t............................................................. 295 Przykładowe modyfikacje ...................................................t...................................................t...................... 297 SKOROWIDZ 299 8 TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI Kiedy dostajesz kartki na Boże Narodzenie, a sam takowych nie wysyłasz, musisz pogodzić się ze świadomością życia w niełasce przez cztery lata, ale potem już wiesz, że ludzie, którzy przysyłają Ci kartki na święta, robią to, by zrobić Tobie przyjemność i nie spodziewają się odpowiedzi. — Q U E N T I N C R I S P ( C Y T O W A N Y P R Z E Z J O N A W I N O K U R A ) JEŚLI CZYTASZ TĘ KSIĄŻKĘ, to jest bardzo prawdopodobne, że spędzasz dużo czasu w internecie. Jest też bardzo prawdopodobne, że znasz sporo ludzi — przyjaciół, kolegów, klientów itd. — którzy również spędzają mnóstwo czasu w sieci. Postępując więc zgodnie z duchem cyfrowego świata, możesz wysłać im własnoręcznie utworzoną kartkę z pozdrowieniami świątecznymi. Może to być bardzo elektryzujące Boże Narodzenie (albo inne dowolne zimowe święto) dla każdego! CEL PROJEKTU Naszym głównym celem jest utworzenie ładnie wyglądającej kartki, którą można potem wysłać do przyjaciół i kolegów. Dokonamy tego za pomocą podstawowych sposobów pozycjonowania w celu ustawienia tekstu ponad obrazkiem, dowiemy się też, jak zapobiec zlewaniu się tekstu z częściami obrazka podobnymi kolorystycznie. Następnie utworzymy inaczej wyglądające kartki, dokonamy tego 168 P R O J E K T 8 przez odmienne rozmieszczenie elementów tekstowych względem głównego obrazka. Na końcu otrzymamy trzy różne układy kartki. PRZYGOTOWANIA Z serwera FTP należy pobrać pliki do projektu 8. Jeżeli planujesz wprowadzać modyfikacje równolegle z czytaniem książki, otwórz w dowolnym edytorze tekstów plik ch08proj.html. Właśnie ten plik będziemy w miarę postępu prac edytować, zapisywać, a następnie odświeżać jego wygląd w przeglądarce. Instrukcje dotyczące pobierania plików z serwera znajdują się we wstępie do tej książki. NA POCZĄTEK Potrzebujemy odpowiedniego do pory roku obrazka i życzeń. Na rysunku 8.1 przedstawiono to, od czego musimy zacząć. R Y S U N E K 8 . 1 . Bazowa kartka z pozdrowieniami, jeszcze niezmieniona przy użyciu stylów CSS Aby umożliwić efektywne wykorzystanie stylów, musimy określić strukturę strony. Chcemy zachować maksimum elastyczności, więc każdą linię zawrzemy w osobnym elemencie FKX, a całość z kolei — w nadrzędnym elemencie FKX. W następnym etapie wyrzucimy wszystkie elementy DT , ponieważ już nie będziemy ich potrzebować. Natura blokowa elementów FKX pomoże nam w rozmieszczeniu kolejnych linii tekstu. Na listingu 8.1 pokazano te zmiany. L I S T I N G 8 . 1 . Dokument z nowymi elementami div  1 6;2 *6/.27$.+ 9  6 *6/.6TCPUKVKQPCN 0 JVVRYYYYQTI644 JVONNQQUGFVF JVON JGCF VKVNG JCRVGT2TQLGEVVKVNG JGCF DQF[ T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 169 FKXKFECTF KOIUTEECTFKOCIGLRICNV#YKPVGTOGCFQYUEGPGKFKOCIG FKXKFUGPVKOGPV /C[[QWCPF[QWTNQXGFQPGUHKPFRGCEGCPFLQ[KPVJKUCPFGXGT[UGCUQP FKX FKXKFUKIPCVWTG ,QGCPF,CPG G[PQT FKX FKXKFETGFKV +OCIGEKVG 9KPVGT/GCFQYEKVG D[ TKE/G[GT FKX FKX DQF[ JVON Element FKXKFECTF może wydawać się niepotrzebny, siedzi po prostu między znacznikiem DQF[ a jego zawartością. Kiedy później zastosujemy nasze style, bez tego elementu o wiele trudniej byłoby powiązać wszystko razem. STYLIZUJEMY DOKUMENT Jedną z najważniejszych rzeczy, które musimy wiedzieć w czasie projektowania tej kartki, jest wielkość bazowego obrazka. W tym przypadku ma on 575 pikseli szerokości i 384 piksele wysokości. Przy projektowaniu stron internetowych szerokość jest zazwyczaj ważniejsza niż wysokość, ponieważ elementy przeważnie są odpowiednio wysokie w stosunku do swojej zawartości. Oznacza to, że autorzy rzadko muszą się martwić o wysokość elementu, a poświęcają o wiele więcej czasu na decydowanie, jak szeroki lub jak wąski ma być element. Wkrótce przekonamy się, że przy rozmieszczeniu wysokość również odgrywa istotną rolę. Wyśrodkowanie kartki Aby nasza elektroniczna kartka była bardziej podobna do zwykłej kartki, powinniśmy jej zawartość wyśrodkować w poziomie. Najlepszym sposobem, aby to zrobić, jest ustawienie bezpośredniej wartości dla właściwości YKFVJnadrzędnego elementu FKX, a następnie ustalenie wartości prawego i lewego marginesu na CWVQ. Kiedy elementowi blokowemu, takiemu jak FKX, nadaje się bezpośrednią wartość właściwości YKFVJ, a lewy i prawy margines zostają ustawione na CWVQ, zostaje im automatycznie nadana identyczna szerokość, co wyśrodkowuje ten element. UV[NGV[RGVGZVEUUOGFKCUETGGP FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ_ UV[NG Wybór medium Arkusz stylów tego projektu zoptymalizujemy pod kątem wyświetlania go na ekranie, ponieważ konstrukcje, które utworzymy, nie nadają się zbytnio do drukowania. Projekty oparte na pozycjonowaniu często stwarzają problemy podczas drukowania, a że mamy zamiar umieszczać tekst ponad obrazkami, to drukowanie stanie się jeszcze bardziej problematyczne. W związku z tym, że nasze style będą ograniczone tylko do ekranu, wszelkie wydruki będą „pozbawione stylu”, a tekst pojawi się na nich pod głównym obrazkiem. Zapobiegnie to problemom związanym z elementami nakładającymi się na siebie. Renderowanie strict i loose Podczas pozycjonowania i wykonywania innych zaawansowanych czynności związanych z CSS warto wiedzieć, w jakim trybie renderowania pracuje przeglądarka. W nowoczesnych przeglądarkach wybór trybu renderowania dokonywany jest za pomocą deklaracji 1 6;2 , znajdującej się na początku dokumentu. Problem jest w tym, że przeglądarka Internet Explorer obsługuje tę całkiem prostą operację dopiero od wersji IE6, a nawet w tym przypadku udaje się to tylko wtedy, kiedy pracuje w trybie renderowania „strict”. Na szczęście istnieje sposób, aby zmusić IE5.x/Win do poprawnego wyświetlenia układu, który próbujemy utworzyć. Więcej informacji na ten temat można znaleźć w rozdziale „Picking a Rendering Mode” w witrynie WWW tej książki. 170 P R O J E K T 8 W starszych wersjach przeglądarka Internet Explorer przyjmowała, że jeśli właściwości VGZVCNKIP nadana była wartość EGPVGT, to i elementy blokowe, takie jak FKX, powinny być wyśrodkowane. Nie jest to sposób, w jaki mają działać style CSS, ale tak działa Internet Explorer. Jeśli więc nadamy styl elementowi DQF[, to wyśrodkujemy zewnętrzny element FKX w przeglądarce IE5.x dla Windows i wcześniejszych (nie wspominając o IE6 w trybie luźnego renderowania). UV[NGV[RGVGZVEUUOGFKCUETGGP DQF[]VGZVCNKIPEGPVGT_/* IE5.X workaround */ FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ_ Wykorzystując ten dodatkowy parametr, uniknęliśmy błędów przeglądarki i wyśrodkowaliśmy kartkę. Przy okazji wyśrodkowaliśmy też tekst znajdujący się na kartce, co nie było naszym zamiarem, ale na razie nie będziemy się tym zajmować. Zmienimy to później bez większego problemu. Aby mieć lepszą kontrolę nad pracą, dodamy teraz do elementów FKX obramowanie. Pozwoli to zobaczyć, gdzie przeglądarka umieszcza te elementy (patrz rysunek 8.2). UV[NGV[RGVGZVEUUOGFKCUETGGP FKX]DQTFGTRZFQVVGFITC[_/* temporary borders */ DQF[]VGZVCNKIPEGPVGT_/* IE5.X workaround */ R Y S U N E K 8 . 2 . Wyśrodkowana kartka z wyśrodkowanym tekstem i obramowaniem elementów dodanym dla przejrzystości Znaczenie absolutu Istnieje tendencja do przyjmowania, że element pozycjonowany w sposób absolutny zachowuje się jak ramka i nie da się go przewinąć w obrębie dokumentu. Tak naprawdę jest to dobra definicja elementu ustalonego (fixed-position element). Element pozycjonowany w sposób absolutny umieszczany jest względem swojego bloku obejmującego, więc jeśli da się ten blok obejmujący przewijać razem z dokumentem, tak samo będzie się zachowywał element pozycjonowany w sposób absolutny. Wyśrodkowaliśmy więc kartkę i ustawiliśmy pomocne obramowanie elementów FKX. Nie jest to prawdziwe pozycjonowanie — raczej przeformatowanie normalnej zawartości. Aby przejść do prawdziwego pozycjonowania, musimy zbudować fundament. Tworzenie kontekstu Aby pozycjonować element, najpierw musimy utworzyć kontekst. Przecież zawsze pozycjonujemy coś względem czegoś innego. Terminologia CSS określa taki kontekst nazwą bloku obejmującego, a z definicji każdy pozycjonowany w sposób absolutny element posiada blok obejmujący. Co składa się na taki blok obejmujący? T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 171 Blok obejmujący każdego pozycjonowanego w sposób absolutny elementu zdefiniowany jest jako najbliższy element przodek (ancestor), który został pozycjonowany. Innymi słowy, jeśli jeden z przodków pozycjonowanego w sposób absolutny elementu został również pozycjonowany w jakiś sposób, to jest to blok obejmujący. Jeśli nie ma takich pozycjonowanych przodków, to blok obejmujący staje się „elementem podstawowym” (root element), który interpretowany jest przez przeglądarkę jako element DQF[ lub JVON. Jeśli po prostu pozycjonowalibyśmy nasze życzenia (blok „sentiment”), to ich blokiem obejmującym byłby element podstawowy (patrz rysunek 8.3). FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRTKIJVVGZVCNKIPTKIJV_ UV[NG R Y S U N E K 8 . 3 . Pozycjonowanie elementu w obrębie górnego prawego elementu podstawowego Wyłączamy tryb „normal flow” Zauważ, że po spozycjonowaniu życzeń przestrzeń wokół nich w normalnym układzie dokumentu została „zamknięta”. Spójrz jeszcze raz na rysunek 8.3. Zauważ, że między dolną krawędzią obrazka a elementem FKX napisu „Joe and Jane Dezynor” nie ma wolnego miejsca. Tak właśnie miało być. Stosując tę zasadę, udało nam się ustawić życzenia w górnym, prawym rogu dokumentu, ale nie kartki. Chcemy jednak, żeby życzenia wyglądały tak, jakby były częścią kartki. Byłoby o wiele wygodniej, aby sama kartka stała się blokiem obejmującym. Na szczęście nie będzie to trudne, ponieważ nasz element znajduje się już na właściwym miejscu. Musimy tylko go spozycjonować DQF[]VGZVCNKIPEGPVGT_/* IE5.X workaround */ FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ RQUKVKQPTGNCVKXG_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRTKIJVVGZVCNKIPTKIJV_ Stosując ten jeden prosty dodatek, sprawiliśmy, że zewnętrzny element FKX stał się blokiem obejmującym (kontekstem pozycjonującym) dla całej zawartości kartki. Zatem podczas pozycjonowania w sposób absolutny jakiegokolwiek elementu FKXw obrębie kartki, a nawet samego obrazka, kontekstem, w którym pozycjonujemy, stanie się element FKXzawierający identyfikator KF ECTF. W naszym przypadku życzenia będą teraz pozycjonowane w górnym, prawym rogu kartki, a nie całego dokumentu. Udaje się to zrobić, ponieważ spozycjonowaliśmy w sposób relatywny zewnętrzny element FKX, ale dokonaliśmy tego bez żadnych przesunięć. Zatem spozycjonowany relatywnie element FKX pozostaje dokładnie tam, gdzie powinien być, jeśli nie zostałby w ogóle 172 P R O J E K T 8 spozycjonowany. Wizualnie nie ma żadnej zmiany. Pomimo braku zmiany położenia, ten element FKX staje się blokiem obejmującym dla wszystkich swoich potomków oraz kontekstem, względem którego możemy pozycjonować w sposób absolutny nasz podpis, życzenia itd. Zachowanie czytelności Jeśli zamierzamy umieścić tekst na tle obrazka, musimy zapewnić jego czytelność. Możemy zmienić wielkość liter, ich kolor itd., ale ciągle istnieje niebezpieczeństwo, że kolor i jasność obrazka może być różna, więc część tekstu będzie czytelna, a część nie. Zobaczmy, jakie będą efekty, jeśli przesuniemy tekst nieco w dół i w lewo, wybielimy go i powiększymy (patrz rysunek 8.4). FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ RQUKVKQPTGNCVKXG_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZTKIJVRZYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG_ UV[NG R Y S U N E K 8 . 4 . Umieszczenie tekstu na tle obrazka może powodować problemy z kontrastem Wielkość czcionki ustawiona w pikselach? W większości przypadków wielkość czcionek nie powinna być ustawiana w pikselach, ponieważ może to prowadzić do problemów z dostępnością. W tym konkretnym przypadku czysto wizualna natura naszego projektu przemawia za użyciem pikseli. Ale gdybyśmy nawet wykorzystali procenty lub jednostki em, nasz projekt nie ucierpiałby na tym. Właściwości przesunięcia Ponieważ wartości VQR, TKIJV, DQVVQO i NGHV określają wielkość przesunięcia między krawędzią pozycjonowanego elementu a jego blokiem obejmującym, nazywane są właściwościami przesunięcia (offset properties). Ustawiając właściwość VQR na RZ, a TKIJV na RZ, przesunęliśmy ten element w dół o 30 pikseli i w lewo o 25 pikseli. Zabieg ten przesunie tekst, aby nie zasłaniał obramowania, dekorującego bazowy obrazek. Te dwie właściwości (razem z DQVVQO i NGHV) definiują przesunięcia względem krawędzi bloku obejmującego. Zatem ustawiliśmy zewnętrzną, górną krawędź życzeń o 30 pikseli poniżej górnej krawędzi bloku obejmującego, a zewnętrzną, prawą krawędź o 25 pikseli w lewo od prawej krawędzi bloku obejmującego. Mimo że na tym etapie nasz tekst jest całkiem czytelny, to przejście z jasnego do ciemnego tła i z powrotem jest w czasie czytania nieco męczące dla oczu. Musimy wygładzić kontrast między tekstem a obrazkiem. Aby tego dokonać, musimy dodać do życzeń obrazek tła, ale nie jakiś zwykły, stary obrazek. Wykorzystując trik opracowany przez Todda Fahrnera, doświadczonego projektanta witryn T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 173 internetowych i uznanego eksperta w dziedzinie CSS, zastosujemy do naszych życzeń coś, co nazywa się obrazkiem typu halfscreen, a wygląda jak szachownica kolorowych i przezroczystych pikseli (patrz rysunek 8.5). R Y S U N E K 8 . 5 . Obrazek tła typu halfscreen w powiększeniu 1600 , widziany w programie Photoshop R Y S U N E K 8 . 6 . Życzenia są teraz o wiele łatwiejsze do przeczytania, a jednocześnie przez nie możemy zobaczyć bazowy obrazek kartki Tymczasowe obramowanie Pamiętaj, że obramowanie znajdujące się wokół życzeń jest reliktem naszej zasady „pokaż mi wszystkie elementy FKX” i zostanie usunięte w końcowej fazie projektu. Każdy czarny piksel widoczny na tym powiększeniu będzie widoczny na ekranie, ale pozostałe piksele pozostaną przezroczyste i pozwolą na wyświetlenie tego, co znajduje się pod nimi. Kiedy do naszych życzeń dodamy ten obrazek tła — razem z odrobiną wypełnienia (padding) — otrzymamy czytelniejszy blok tekstu (patrz rysunek 8.6). FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZTKIJVRZYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG RCFFKPIRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ UV[NG Zauważ, że obrazek typu halfscreen, który wykorzystujemy, ma rozmiar 10×10 pikseli. Można zastosować nawet obrazek o wymiarach 2×2, ale ułożenie obok siebie tak małych obrazków tła może znacząco spowolnić pracę przeglądarek w czasie renderowania kartki. Ponieważ czas pobierania obrazka o wymiarach 2×2 jest praktycznie taki sam jak obrazka 10×10 (nawet przez modem), wykorzystujemy większą wersję, aby nieco odciążyć przeglądarki. 174 P R O J E K T 8 Podpisywanie kartki Nadszedł czas, aby w kontekście kartki umieścić podpis (blok „signature”). Wyśrodkujemy tekst, napiszemy go czcionką pogrubioną i umieścimy go w dolnej części obrazka. Najłatwiej to zrobić przez ustawienie przesunięcia względem bloku obejmującego i dodanie stylu pogrubionego. FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZTKIJVRZYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG RCFFKPIRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ FKXUKIPCVWTG]RQUKVKQPCDUQNWVGVQRRZNGHVTKIJVYKFVJ HQPVYGKIJVDQNF_ UV[NG Teraz, kiedy spozycjonowaliśmy podpis, okazuje się, że znajduje się on tuż pod obrazkiem. Podpis został umieszczony w taki sposób, że jego górna krawędź jest o 335 pikseli oddalona od górnej krawędzi bloku obejmującego (patrz rysunek 8.7). Właściwości left, right, i width Właściwościom NGHV, TKIJV i YKFVJ nadaliśmy bezpośrednie wartości w celu uniknięcia błędów Explorera związanych z pozycjonowaniem. Usunięcie jednej lub kilku tych wartości, nawet jeśli da się to zrobić, może prowadzić do przesunięcia względem siebie lub nawet niewyświetlenia przez IE5.X niektórych elementów. R Y S U N E K 8 . 7 . Podpis został rozmieszczony na podstawie zarówno odziedziczonych, jak i specjalnie określonych stylów Tekst jest wyśrodkowany, ponieważ odziedziczona została wartość EGPVGT właściwości VGZVCNKIP, co było częścią naszego obejścia błędów IE5.X i co jest nawet wygodne w użyciu. Ustawiliśmy wartość szerokości (YKFVJ) na , ponieważ to gwarantuje, że przeglądarki będą utrzymywały szerokość bloku FKX równą szerokości całej kartki, a co za tym idzie, umieszczą tekst na środku kartki. Stylizowanie informacji o autorze zdjęcia Ostatnim ważnym elementem, za który musimy się zabrać, jest informacja o autorze zdjęcia (blok „credit”), znajdująca się w dolnej części obrazka. Nie chcemy, żeby zajmowała ona zbyt wiele miejsca na kartce, dlatego zmniejszymy rozmiar czcionki, ustawimy jasnoszary kolor tekstu oraz wyrównamy go do prawej strony. Później podniesiemy go o parę pikseli w górę, aby nakładał się nieco na dolną krawędź obrazka (patrz rysunek 8.8). T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 175 R Y S U N E K 8 . 8 . Informacja o autorze zdjęcia zabiera teraz mniej miejsca i jest mniej widoczna FKXUKIPCVWTG]RQUKVKQPCDUQNWVGVQRRZNGHVTKIJVYKFVJ HQPVYGKIJVDQNF_ FKXETGFKV]EQNQTUKNXGTHQPVUKGVGZVCNKIPTKIJVRQUKVKQPTGNCVKXG VQRRZ_ UV[NG Tym razem spozycjonowaliśmy relatywnie element FKX i możemy zobaczyć rezultat — element FKX zawierający informację o autorze zdjęcia został podniesiony. Zauważ jednak, że zostało trochę miejsca między jego dolną krawędzią a dolną krawędzią zewnętrznego elementu FKX. Kiedy element jest pozycjonowany relatywnie, przestrzeń wokół niego nie zostaje zamknięta. Zamiast tego dokument zostaje rozmieszczony tak, jakby jego elementy nie były pozycjonowane, a relatywnie pozycjonowany element zostaje podniesiony zgodnie z wartościami właściwości jego przesunięcia (VQR, NGHV itd.). Jak widać na rysunku 8.8, oznacza to, że informacje o autorze zdjęcia zostały przesunięte do góry o 10 pikseli. Wygląda to niebyt ładnie, bo tekst wychodzi poza prawą krawędź obramowania obrazka. Musimy z powrotem przesunąć tekst trochę w lewo. Można to zrobić na trzy sposoby: ♦ ustawić wartość właściwości TKIJV na RZ, ♦ ustawić wartość właściwości OCTIKPTKIJV na RZ, ♦ ustawić wartość właściwości RCFFKPITKIJV na RZ. W tym konkretnym przypadku wszystkie sposoby dadzą identyczny efekt wizualny. Należy jednak pamiętać, że zwiększenie wartości właściwości wypełnienia powiększy również odstęp — który mógł być ustawiony — między zawartością a krawędziami. Lepiej zatem ustawiać ten rodzaj przesunięcia, stosując albo właściwość TKIJV, albo OCTIKPTKIJV. Dla odmiany zastosujmy to drugie rozwiązanie. FKXETGFKV]EQNQTUKNXGTHQPVUKGVGZVCNKIPTKIJVRQUKVKQPTGNCVKXG VQRRZOCTIKPTKIJVRZ_ UV[NG 176 P R O J E K T 8 Zabieg ten przesunie zawartość (obramowania też) w prawą stronę, ale pamiętaj, że wartość właściwości TKIJV wynosi ciągle mierzone względem punktów zdefiniowanych przez właściwości przesunięcia. . Marginesy, tak jak wszystko w obrębie elementu, są Gotowy produkt Kiedy wreszcie spozycjonowaliśmy elementy, możemy wreszcie usunąć zasadę „pokaż mi obramowanie”, aby nasza kartka wyglądała tak pięknie, jak zawsze sobie to wyobrażaliśmy (patrz rysunek 8.9). UV[NGV[RGVGZVEUUOGFKCUETGGP /* border-rule deleted */ DQF[]VGZVCNKIPEGPVGT_/* IE5.X workaround */ R Y S U N E K 8 . 9 . Gotowa cyfrowa kartka z pozdrowieniami Zauważ, że po usunięciu obramowań da się zauważyć pewne przesunięcia w rozmieszczeniu elementów. Dzieje się tak, ponieważ obramowania również zajmują nieco miejsca i przesuwają obszary zawartości trochę dalej od punktów zdefiniowanych przez właściwości przesunięcia. Jest to mało istotny efekt, który nie psuje całego projektu, ale warto o nim pamiętać w bardziej skomplikowanych sytuacjach związanych z pozycjonowaniem. Za pomocą tych kilku całkiem prostych kroków doszliśmy do arkusza stylów pokazanego na listingu 8.2. Pójdźmy jednak dalej! L I S T I N G 8 . 2 . Kompletny arkusz stylów UV[NGV[RGVGZVEUUOGFKCCNN DQF[]VGZVCNKIPEGPVGT_/* IE5.X workaround */ FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ RQUKVKQPTGNCVKXG_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZTKIJVRZYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG RCFFKPIRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ FKXUKIPCVWTG]RQUKVKQPCDUQNWVGVQRRZNGHVTKIJVYKFVJ HQPVYGKIJVDQNF_ T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 177 Nowy obrazek Zmieniamy także obrazek. Plik card-image.jpg został zamieniony na card-image2.jpg. Można to sprawdzić w źródle pliku ch08prog10.html. FKXETGFKV]EQNQTUKNXGTHQPVUKGVGZVCNKIPTKIJVRQUKVKQPTGNCVKXG VQRRZOCTIKPTKIJVRZ_ UV[NG NIECO INNE SPOJRZENIE Przyjmijmy, że po kilku przemyśleniach zdecydowaliśmy, że chropowato wyglądająca krawędź będzie wydawała się naszym odbiorcom trochę zbyt surowa. Może powinniśmy zastosować tu coś nowocześniejszego i kanciastego. Aby tego dokonać, musimy wrócić do poprzednich znaczników i stylów, jakie przedstawia rysunek 8.2, a następnie utworzyć wokół obrazka czarne obramowanie grubości 2 pikseli. Aby się to udało, musimy dopasować właściwość YKFVJzewnętrznego elementu FKX, ponieważ obrazek (szerokości 575 pikseli) plus obramowanie (2 piksele z każdej strony) daje razem 579 pikseli szerokości, a nie 575. UV[NGV[RGVGZVEUUOGFKCUETGGP DQF[]VGZVCNKIPEGPVGT_/* IE5.X workaround */ FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ RQUKVKQPTGNCVKXG_ FKXECTFKOI]DQTFGTRZUQNKFDNCEM_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZTKIJVRZYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG RCFFKPIRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ UV[NG Zauważ, że nie pozbywamy się obejścia błędów IE5 (ciągle chcemy, żeby kartka była wyśrodkowana) oraz stylów życzeń, ale wszystko inne wyrzucamy. Po wprowadzeniu zmian szerokość kartki zostaje dopasowana, a do obrazka dodane obramowanie. Moglibyśmy zatrzymać resztę stylów z poprzedniej kartki, co pewnie byłoby interesujące, ale zobaczmy, czy potrafimy utworzyć od początku nieco inny wygląd. Patrząc na rysunek 8.10., widzimy trzy rzeczy, które powinny zostać ulepszone: ♦ Podpis powinien być umieszczony w interesujący sposób. ♦ Trzeba nadać styl informacji o autorze zdjęcia. ♦ Życzenia mogłyby znaleźć się bliżej krawędzi obrazka. Zajmijmy się tymi problemami po kolei. Ponowne umieszczanie podpisu Ponieważ liczy się pomysł, niech nasi odbiorcy wiedzą, kto na niego wpadł. Możemy uzyskać to przez większe niż w poprzednim projekcie uwypuklenie podpisu. Byłoby całkiem szykownie, gdyby udało się utworzyć efekt w rodzaju wiszącej wizytówki, w którym podpis zostaje umieszczony w ramce, podzielonej na pół przez obramowanie obrazka. 178 P R O J E K T 8 R Y S U N E K 8 . 1 0 . Zaczynamy od początku z nieco zmienionym obrazkiem Najpierw musimy wybrać style czcionki, tła i obramowania podpisu. Jak już to zrobimy (patrz rysunek 8.11), możemy spozycjonować podpis. FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZTKIJVRZYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG RCFFKPIRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ FKXUKIPCVWTG]HQPVYGKIJVDQNFHQPVUKGRZDQTFGTRZUQNKFDNCEM DCEMITQWPFUKNXGTYKFVJRZOCTIKPCWVQRCFFKPIGO_ UV[NG R Y S U N E K 8 . 1 1 . Teraz podpis wygląda bardziej jak wizytówka, ale nie jest jeszcze na swoim miejscu Kiedy style są już gotowe, musimy zdecydować, jak zaamierzamy uzyskać efekt, w którym podpis w połowie nasuwa się na dolną część obrazka. Jednym ze sposobów jest spozycjonowanie relatywne podpisu z przesunięciem ku górze, ale to już robiliśmy z informacjami o autorze zdjęcia w poprzednim projekcie. W takim razie spozycjonujmy go w sposób absolutny względem kartki (która, jak pamiętamy, też jest blokiem obejmującym). T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 179 Jest to dobry plan, ale musimy postępować ostrożnie. Możemy spróbować spozycjonowania podpisu, używając ujemnego przesunięcia względem dołu, ale to by go przesunęło względem dołu kartki, a nie dołu bazowego obrazka. Definitywnie chcemy, aby podpis był umieszczony względem obrazka. Na szczęście góra kartki i góra obrazka znajdują się w tym samym miejscu, więc zdefiniujemy przesunięcie względem góry (VQR). FKXUKIPCVWTG]HQPVYGKIJVDQNFHQPVUKGRZDQTFGTRZUQNKFDNCEM DCEMITQWPFUKNXGTYKFVJRZOCTIKPCWVQRCFFKPIGO RQUKVKQPCDUQNWVGVQRRZNGHVRZTKIJVRZ_ UV[NG Zauważ, że nadaliśmy wartości właściwościom NGHV i TKIJV, co pomaga uniknąć błędów w Explorerze. Wiemy, że obrazek ma 384 piksele wysokości, więc, określając wartość właściwości VQR na RZ, umieścimy podpis w miejscu, w którym ma się znajdować (patrz rysunek 8.12). R Y S U N E K 8 . 1 2 . Wykorzystując przesunięcie względem góry, możemy umieścić podpis bardzo precyzyjnie, ale informacja o autorze zdjęcia zostaje w tym procesie zaciemniona A co się stało z informacją o autorze zdjęcia? Widać tylko sam jej dół, wystający spod podpisu na rysunku 8.12. Wsunęła się pod podpis, ponieważ podpis nie jest już częścią normalnego układu dokumentu. Jeśli nie chcemy całkiem pozbyć się informacji o autorze, musimy ją spozycjonować, aby była widoczna. Gdzie umieścić informację o autorze zdjęcia? Sposób, w jaki nadaliśmy styl informacji o autorze w poprzednim projekcie, nie był zły, ale może umieścić ją na górze obrazka zamiast na dole? A może umieścimy ją tuż nad obrazkiem? FKXUKIPCVWTG]HQPVYGKIJVDQNFHQPVUKGRZDQTFGTRZUQNKFDNCEM DCEMITQWPFUKNXGTYKFVJRZOCTIKPCWVQRCFFKPIGO RQUKVKQPCDUQNWVGVQRRZNGHVRZTKIJVRZ_ FKXETGFKV]HQPVRZ#TKCNUCPUUGTKHVGZVCNKIPTKIJVRQUKVKQPCDUQNWVG VQRRZNGHVTKIJVYKFVJEQNQT_ UV[NG 180 P R O J E K T 8 Nie ma tu zbyt wielu nowości. Zmieniliśmy kolor tekstu na jasnoszary i wyrównaliśmy go do prawej. Ustawiliśmy wartości właściwości NGHV, TKIJV i YKFVJ, żeby uniknąć kłopotów z Explorerem. Ustawiliśmy rozmiar i rodzaj czcionki. Jedyną prawdziwą różnicą jest nadanie właściwości VQR wartości ujemnej, co spowodowało, że element został umieszczony na zewnątrz swojego własnego bloku obejmującego (patrz rysunek 8.13). R Y S U N E K 8 . 1 3 . Umieszczenie informacji o autorze zdjęcia nad obrazkiem oznacza, że obrazek ten został spozycjonowany na zewnątrz swojego bloku obejmującego Inne przesunięcia W podobny sposób moglibyśmy ustawić informacje o autorze zdjęcia po prawej stronie obrazka, wykorzystując ujemną wartość właściwości TKIJV. To nie błąd, tylko dokładnie to, co miało się stać. Zasadniczo powiedzieliśmy, że przesunięcie między górą elementu FKX, zawierającego informację o autorze zdjęcia, a górną krawędzią bloku obejmującego powinno wynosić RZ. Ponieważ dodatnie wartości przesunięć powodują dodatnie wartości odstępu między tymi dwoma krawędziami, to jednocześnie powodują one przesunięcie spozycjonowanych elementów w kierunku środka ich bloku obejmującego. Wynika z tego, że ujemne wartości powinny wypychać spozycjonowane elementy na zewnątrz. Wracamy do życzeń Teraz, kiedy podpis jest bardziej widoczny, musimy coś zrobić, aby poprawić wygląd życzeń. Możemy to osiągnąć, zwiększając rozmiar czcionki elementu, co zrobimy, ale spróbujemy także uwypuklić tło tego elementu w obrębie obramowania obrazka. Będziemy także chcieli zwiększyć wartość wypełnienia elementu z życzeniami. Ta zmiana spowoduje konieczność dodania czarnego obramowania grubości 1 piksela wokół życzeń. FKXECTFKOI]DQTFGTRZUQNKFDNCEM_FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQR TKIJVYKFVJVGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCN UCPUUGTKHEQNQTYJKVGRCFFKPIRZDQTFGTRZUQNKFDNCEM DCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ Równie łatwo moglibyśmy ustawić wartość właściwości YKFVJ życzeń w pikselach, ale bardziej interesujące będzie wykorzystanie procentów. (Jeśli jesteś ambitny, sam oblicz wartość szerokości). Obramowanie pomaga określić region życzeń, nie narażając go na zbytnie nakładanie się na inne elementy, oraz zapobiega wystąpieniu efektu chropowatej krawędzi, co poprzednio widzieliśmy przy życzeniach. Modernizm górą! Niezgodność szerokości Zauważ: mimo że IE5/Mac i Netscape 6.x są zgodne z arkuszami stylów CSS i traktują właściwość RCFFKPI inaczej niż YKFVJ (oraz JGKIJV), to Explorer 4.x, 5.x, i 6.x w trybie luźnego renderowania traktują RCFFKPI, jakby był częścią YKFVJ (oraz JGKIJV) elementu. IE6 w trybie ścisłego renderowania zgadza się z arkuszami stylów CSS. T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 181 R Y S U N E K 8 . 1 4 . Przesunięcie życzeń w górę względem obramowania obrazka prowadzi do kilku innych zmian Więcej informacji na temat sposobów obchodzenia problemu niezgodności szerokości można znaleźć w artykule „Tricking Browsers and Hiding Styles”, znajdującym się w witrynie WWW tej książki. Wprowadzając te zmiany, doszliśmy do całkiem ciekawego wariantu naszego pierwszego projektu. Na listingu 8.3 pokazano kompletny arkusz stylów tego projektu. L I S T I N G 8 . 3 . Kompletny arkusz stylów wariantu UV[NGV[RGVGZVEUUOGFKCUETGGP DQF[]VGZVCNKIPEGPVGT_/* IE5.x workaround */ FKXECTF]YKFVJRZOCTIKPNGHVCWVQOCTIKPTKIJVCWVQ RQUKVKQPTGNCVKXG_ FKXECTFKOI]DQTFGTRZUQNKFDNCEM_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRTKIJVYKFVJ VGZVCNKIPTKIJVHQPVKVCNKEDQNFRZ#TKCNUCPUUGTKH EQNQPYJKVGRCFFKPIRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ FKXUKIPCVWTG]HQPVYGKIJVDQNFHQPVUKGRZDQTFGTRZUQNKFDNCEM DCEMITQWPFUKNXGTYKFVJRZOCTIKPCWVQRCFFKPIGO RQUKVKQPCDUQNWVGVQRRZNGHVRZTKIJVRZ_ FKXETGFKV]HQPVRZ#TKCNUCPUUGTKHVGZVCNKIPTKIJVRQUKVKQPCDUQNWVG VQRRZNGHVTKIJVYKFVJEQNQT_ UV[NG JESZCZE JEDEN WARIANT Nie możemy się powstrzymać od jeszcze jednego małego zestawu zmian w projekcie. Będzie to wymagało tylko kilku niewielkich zmian. Najpierw przenieśmy życzenia na lewą stronę i dopasujmy do tego ich style. Będziemy musieli przesunąć je nieco w dół, a także trochę rozszerzyć ramkę z życzeniami. Zauważ, że w tym wariancie, usunęliśmy z życzeń czarne obramowanie (patrz rysunek 8.15). 182 P R O J E K T 8 R Y S U N E K 8 . 1 5 . Jeszcze jedna stylizacja życzeń FKXECTFKOI]DQTFGTRZUQNKFDNCEM_ FKXUGPVKOGPV]RQUKVKQPCDUQNWVGVQRRZNGHVYKFVJRZ VGZVCNKIPNGHVHQPVDQNFRZ#TKCNUCPUUGTKHEQNQTYJKVG RCFFKPIRZRZRZRZDCEMITQWPFVTCPURCTGPVWTN JCNHUETGGPDNCEMIKH EGPVGTTGRGCV_ Jak widzisz, przesuwanie spozycjonowanego elementu z jednego miejsca w inne jest proste i wymaga tylko kilku dopasowań stylów. Dodatkową zaletą jest to, że użytkownik będzie nadal mógł doskonale przeczytać tekst, nawet jeśli korzysta ze starszej przeglądarki, która nie obsługuje pozycjonowania. Niespozycjonowane pocieszenie Spróbuj po prostu usunąć style pozycjonujące, aby zobaczyć, jak wygląda teraz kartka — możesz być zaskoczony jej dobrym wyglądem. Symulacja wersji kartki pozbawionej stylów nie wymaga niczego więcej, tylko sprawdzenia rysunku 8.1. T W O R Z E N I E K A R T K I I N T E R N E T O W E J Z P O Z D R O W I E N I A M I 183 PRZYKŁADOWE MODYFIKACJE Jest wiele innych sposobów na stylizowanie formy podobnej do tej, nad którą pracowaliśmy w tym projekcie. Oto kilka sugestii. 1. Spróbuj wyśrodkować życzenia z pierwszego wariantu i nadać im tło w postaci białego obrazka typu halfscreen. Będziesz musiał też zmienić kolor tekstu na jakiś ciemniejszy. Ładnie wyglądałoby też tutaj obramowanie. Może pokusić się o podwójne, grube obramowanie? 2. Przesuń wariant podpisu dosyć daleko w prawą stronę, aby zwisał z krawędzi obrazka. Powinno to dać Ci dość miejsca, aby umieścić informacje o autorze zdjęcia w dolnym, lewym rogu obrazka, co byłoby wydajniejszym wykorzystaniem miejsca. 184 P R O J E K T 8 3. A teraz dodatkowe wyzwanie: spróbuj wykorzystać szary obrazek typu halfscreen jako tło dla życzeń, biały jako tło dla podpisu, a ciemny z szarym kolorem tekstu na informacje o autorze zdjęcia. Wszystko to umieść na górze obrazka kartki i niech żadne elementy nie nakładają się na siebie. Możesz używać jakiegokolwiek obrazka dla kartki, ale dostaniesz dodatkowe punkty, jeśli wykorzystasz wersję obrazka z chropowatym obramowaniem.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS według Erica Meyera. Sztuka projektowania stron WWW
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ą: