[home]
techniki internetowe[home] 25/III
[top]
E. A. Meyer

Eric A. Meyer

CSS według Erica Meyera

Stylizowanie kolekcji zdjęć

Przykład z rozdziału 2 CSS według Erica Meyera. Kolejna odsłona.

Cele projektu: (1) przygotowanie dwóch metod prezentacji zdjęć: arkusza kontaktowego i szczegółowego widoku katalogowego. W arkuszu kontaktowym powinno się pojawić na ekranie jak najwięcej zdjęć w taki sposób aby nie było potrzeby przewijania ekranu; zdjęcia powinny się układać w postaci siatki; w tym widoku wystarczy umieścić tytuł zdjęcia. W widoku katalogu powinny się pojawić wszystkie dane na temat każdego zdjęcia; stronę można przewijać.

Zanim zabierzemy się za stylizowanie kolekcji zdjęć zobaczmy jak to robią inni. CSSPlay: A catalogue art gallery, Photo Strip Gallery, List of Demonstrations: Demos – Photo galleries

Oto kolekcja zdjęć którą będziemy stylizować. Oznacza to, że nie będziemy w żaden sposób zmieniać zawartości elementu body — wszystkie znaczniki pozostawimy bez zmian. Stronie nadamy pożądany wygląd wyłącznie za pomocą CSS. Na razie strona ta zawiera następujący kod CSS:

body { background: #EED; margin: 1em; } div#footer { clear: both; padding-top: 3em; font: 85% Verdana, sans-serif; }

Po tych próbach zabieramy się za projektowanie arkusza kontaktowego. Same zdjęcia już umiemy układać w siatkę. Teraz musimy jakoś umieścić podpisy pod rysunkami.

(Przerwa?) Teraz zabieramy się za projektowanie widoku katalogu

Formatowanie kalendarza wydarzeń

Przykład z rozdziału 3 książki CSS według Erica Meyera.

Kalendarze po umieszczeniu na stronie WWW są zadziwiająco użyteczne. Nieprawdaż? W tym projekcie przyjmiemy że dane do kalendarza są generowane z bazy danych. Naszym celem jest wymyślenie jakie znaczniki powinny generować skrypty, tak aby późniejsze formatowanie kalendarza było zgodne z naszym wyobrażeniem jak taki kalendarz powinien wyglądać.

Jeśli tak sformatowany kalendarz będziemy chcieli umieścić na stronie WWW, to powinniśmy zadbać aby reguły dotyczące kalendarza dotyczyły tylko jego samego. Osiągniemy to dopisując przed każdym selektorem table#calendar.

Teraz jesteśmy już przygotowani aby zmierzyć się z bardziej szczegółowym kalendarzem ...ale odłożymy to spotkanie na później.

Zobacz też Fixed Table Layouts oraz Table cell widths - fixing width, wrapping/truncating long words

[top]