Eric A. Meyer css według erica meyera. sztuka projektowania stron pełna wersja, ebooki
[ Pobierz całość w formacie PDF ]
4
PROJEKT 5. Jak upikszy2 menu
103
Cel projektu .........................................................................................................................................................104
Przygotowania.....................................................................................................................................................104
Na pocztek..........................................................................................................................................................104
Formatowanie menu.........................................................................................................................................106
Zmiana wygldu menu ....................................................................................................................................116
Przykładowe modyfikacje...............................................................................................................................121
PROJEKT 6. Formatowanie wydruków
123
Cel projektu .........................................................................................................................................................124
Przygotowania.....................................................................................................................................................124
Na pocztek..........................................................................................................................................................124
Formatowanie dokumentu do druku..........................................................................................................126
Style drukowania na potrzeby artykułu prasowego..............................................................................134
Formatowanie wydruku kalendarza............................................................................................................138
Przykładowe modyfikacje...............................................................................................................................145
PROJEKT 7. Dbamy o wygl%d formularzy
147
Cel projektu .........................................................................................................................................................147
Przygotowania.....................................................................................................................................................148
Na pocztek..........................................................................................................................................................148
Formatowanie dokumentu .............................................................................................................................150
Style wykorzystywane do druku..................................................................................................................155
Wyko1czenie .......................................................................................................................................................163
Przykładowe modyfikacje...............................................................................................................................165
PROJEKT 8. Tworzenie kartki internetowej z pozdrowieniami
167
Cel projektu .........................................................................................................................................................167
Przygotowania.....................................................................................................................................................168
Na pocztek..........................................................................................................................................................168
Stylizujemy dokument.....................................................................................................................................169
Nieco inne spojrzenie.......................................................................................................................................177
Jeszcze jeden wariant........................................................................................................................................181
Przykładowe modyfikacje...............................................................................................................................183
PROJEKT 9. Układ wielokolumnowy
185
Cel projektu .........................................................................................................................................................186
Przygotowania.....................................................................................................................................................186
Na pocztek..........................................................................................................................................................186
Stylizujemy dokument.....................................................................................................................................187
Stylizujemy dokument przez pozycjonowanie.......................................................................................193
Stylizujemy trzy kolumny..............................................................................................................................197
Wracamy do pływania......................................................................................................................................205
Przykładowe modyfikacje...............................................................................................................................207
5
PROJEKT 10. Ucieczka z pudełka
209
Cel projektu.......................................................................................................................................................210
Przygotowania ..................................................................................................................................................210
Na pocztek .......................................................................................................................................................210
Stylizujemy dokument ..................................................................................................................................211
Uwaga, zakr,ty.................................................................................................................................................219
Przykładowe modyfikacje ............................................................................................................................229
PROJEKT 11. Pozycjonowanie sposobem ulepszenia projektu
231
Cel projektu.......................................................................................................................................................232
Przygotowania ..................................................................................................................................................232
Na pocztek .......................................................................................................................................................232
Stylizujemy dokument ..................................................................................................................................234
Przykładowe modyfikacje ............................................................................................................................253
PROJEKT 12. Unieruchamiamy tło
255
Cel projektu.......................................................................................................................................................256
Przygotowania ..................................................................................................................................................256
Na pocztek .......................................................................................................................................................256
Stylizujemy dokument ..................................................................................................................................257
Inne pomysły ....................................................................................................................................................271
PROJEKT 13. Eric Meyer o CSS w CSS
273
Cel projektu.......................................................................................................................................................274
Przygotowania ..................................................................................................................................................274
Na pocztek .......................................................................................................................................................274
Okre lenie stylów w dokumencie .............................................................................................................275
Analiza po uko1czeniu projektu................................................................................................................295
Przykładowe modyfikacje ............................................................................................................................297
SKOROWIDZ
299
8
T
WORZENIE KARTKI
INTERNETOWEJ
Z
POZDROWIENIAMI
Kiedy dostajesz kartki na Boe Narodzenie, a sam takowych nie wysyłasz,
musisz pogodzi si ze wiadomoci ycia w niełasce przez cztery lata,
ale potem ju wiesz, e ludzie, którzy przysyłaj Ci kartki na wita, robi to,
by zrobi
przyjemno i nie spodziewaj si odpowiedzi.
— Q
UENTIN
C
RISP
(
CYTOWANY PRZEZ
J
ONA
W
INOKURA
)
Tobie
J
ELI CZYTASZ T KSIK
, to jest bardzo prawdopodobne,
e spdzasz duo czasu w internecie. Jest te bardzo prawdopodobne,
e znasz sporo ludzi — przyjaciół, kolegów, klientów itd. — którzy
równie spdzaj mnóstwo czasu w sieci. Postpujc wic zgodnie
z duchem cyfrowego #wiata, moesz wysła$ im własnorcznie
utworzon kartk z pozdrowieniami #witecznymi. Moe to by$
bardzo elektryzujce Boe Narodzenie (albo inne dowolne zimowe
#wito) dla kadego!
C
EL PROJEKTU
Naszym głównym celem jest utworzenie ładnie wygldajcej kartki,
któr mona 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.
Nastpnie utworzymy inaczej wygldajce kartki, dokonamy tego
168
P
ROJEKT
8
przez odmienne rozmieszczenie elementów tekstowych wzgldem głównego obrazka.
Na ko,cu otrzymamy trzy róne układy kartki.
P
RZYGOTOWANIA
Z serwera FTP naley pobra$ pliki do projektu 8. Jeeli planujesz wprowadza$ modyfikacje
równolegle z czytaniem ksiki, otwórz w dowolnym edytorze tekstów plik ch08proj.html.
Wła#nie ten plik bdziemy w miar postpu prac edytowa$, zapisywa$, a nastpnie
od#wiea$ jego wygld w przegldarce.
Instrukcje dotyczce
pobierania plików z serwera
znajduj si we wstpie
do tej ksiki.
N
A POCZTEK
Potrzebujemy odpowiedniego do pory roku obrazka i ycze,. Na rysunku 8.1 przedstawiono
to, od czego musimy zacz$.
R
YSUNEK
8.1.
Bazowa kartka
z pozdrowieniami,
jeszcze niezmieniona
przy uyciu stylów CSS
Aby umoliwi$ efektywne wykorzystanie stylów, musimy okre#li$ struktur strony. Chcemy
zachowa$ maksimum elastyczno#ci, wic kad lini zawrzemy w osobnym elemencie
,
a cało#$ z kolei — w nadrzdnym elemencie
. W nastpnym etapie wyrzucimy wszystkie
elementy
, poniewa ju nie bdziemy ich potrzebowa$. Natura blokowa elementów
pomoe nam w rozmieszczeniu kolejnych linii tekstu. Na listingu 8.1 pokazano te zmiany.
L
ISTING
8.1.
Dokument z nowymi elementami
div
!
"#$%%%%&''"( )**+
"( +
")*+
)+"#),-). )+
")*+
/*0+
[ Pobierz całość w formacie PDF ]
zanotowane.pl doc.pisz.pl pdf.pisz.pl upanicza.keep.pl
4
PROJEKT 5. Jak upikszy2 menu
103
Cel projektu .........................................................................................................................................................104
Przygotowania.....................................................................................................................................................104
Na pocztek..........................................................................................................................................................104
Formatowanie menu.........................................................................................................................................106
Zmiana wygldu menu ....................................................................................................................................116
Przykładowe modyfikacje...............................................................................................................................121
PROJEKT 6. Formatowanie wydruków
123
Cel projektu .........................................................................................................................................................124
Przygotowania.....................................................................................................................................................124
Na pocztek..........................................................................................................................................................124
Formatowanie dokumentu do druku..........................................................................................................126
Style drukowania na potrzeby artykułu prasowego..............................................................................134
Formatowanie wydruku kalendarza............................................................................................................138
Przykładowe modyfikacje...............................................................................................................................145
PROJEKT 7. Dbamy o wygl%d formularzy
147
Cel projektu .........................................................................................................................................................147
Przygotowania.....................................................................................................................................................148
Na pocztek..........................................................................................................................................................148
Formatowanie dokumentu .............................................................................................................................150
Style wykorzystywane do druku..................................................................................................................155
Wyko1czenie .......................................................................................................................................................163
Przykładowe modyfikacje...............................................................................................................................165
PROJEKT 8. Tworzenie kartki internetowej z pozdrowieniami
167
Cel projektu .........................................................................................................................................................167
Przygotowania.....................................................................................................................................................168
Na pocztek..........................................................................................................................................................168
Stylizujemy dokument.....................................................................................................................................169
Nieco inne spojrzenie.......................................................................................................................................177
Jeszcze jeden wariant........................................................................................................................................181
Przykładowe modyfikacje...............................................................................................................................183
PROJEKT 9. Układ wielokolumnowy
185
Cel projektu .........................................................................................................................................................186
Przygotowania.....................................................................................................................................................186
Na pocztek..........................................................................................................................................................186
Stylizujemy dokument.....................................................................................................................................187
Stylizujemy dokument przez pozycjonowanie.......................................................................................193
Stylizujemy trzy kolumny..............................................................................................................................197
Wracamy do pływania......................................................................................................................................205
Przykładowe modyfikacje...............................................................................................................................207
5
PROJEKT 10. Ucieczka z pudełka
209
Cel projektu.......................................................................................................................................................210
Przygotowania ..................................................................................................................................................210
Na pocztek .......................................................................................................................................................210
Stylizujemy dokument ..................................................................................................................................211
Uwaga, zakr,ty.................................................................................................................................................219
Przykładowe modyfikacje ............................................................................................................................229
PROJEKT 11. Pozycjonowanie sposobem ulepszenia projektu
231
Cel projektu.......................................................................................................................................................232
Przygotowania ..................................................................................................................................................232
Na pocztek .......................................................................................................................................................232
Stylizujemy dokument ..................................................................................................................................234
Przykładowe modyfikacje ............................................................................................................................253
PROJEKT 12. Unieruchamiamy tło
255
Cel projektu.......................................................................................................................................................256
Przygotowania ..................................................................................................................................................256
Na pocztek .......................................................................................................................................................256
Stylizujemy dokument ..................................................................................................................................257
Inne pomysły ....................................................................................................................................................271
PROJEKT 13. Eric Meyer o CSS w CSS
273
Cel projektu.......................................................................................................................................................274
Przygotowania ..................................................................................................................................................274
Na pocztek .......................................................................................................................................................274
Okre lenie stylów w dokumencie .............................................................................................................275
Analiza po uko1czeniu projektu................................................................................................................295
Przykładowe modyfikacje ............................................................................................................................297
SKOROWIDZ
299
8
T
WORZENIE KARTKI
INTERNETOWEJ
Z
POZDROWIENIAMI
Kiedy dostajesz kartki na Boe Narodzenie, a sam takowych nie wysyłasz,
musisz pogodzi si ze wiadomoci ycia w niełasce przez cztery lata,
ale potem ju wiesz, e ludzie, którzy przysyłaj Ci kartki na wita, robi to,
by zrobi
przyjemno i nie spodziewaj si odpowiedzi.
— Q
UENTIN
C
RISP
(
CYTOWANY PRZEZ
J
ONA
W
INOKURA
)
Tobie
J
ELI CZYTASZ T KSIK
, to jest bardzo prawdopodobne,
e spdzasz duo czasu w internecie. Jest te bardzo prawdopodobne,
e znasz sporo ludzi — przyjaciół, kolegów, klientów itd. — którzy
równie spdzaj mnóstwo czasu w sieci. Postpujc wic zgodnie
z duchem cyfrowego #wiata, moesz wysła$ im własnorcznie
utworzon kartk z pozdrowieniami #witecznymi. Moe to by$
bardzo elektryzujce Boe Narodzenie (albo inne dowolne zimowe
#wito) dla kadego!
C
EL PROJEKTU
Naszym głównym celem jest utworzenie ładnie wygldajcej kartki,
któr mona 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.
Nastpnie utworzymy inaczej wygldajce kartki, dokonamy tego
168
P
ROJEKT
8
przez odmienne rozmieszczenie elementów tekstowych wzgldem głównego obrazka.
Na ko,cu otrzymamy trzy róne układy kartki.
P
RZYGOTOWANIA
Z serwera FTP naley pobra$ pliki do projektu 8. Jeeli planujesz wprowadza$ modyfikacje
równolegle z czytaniem ksiki, otwórz w dowolnym edytorze tekstów plik ch08proj.html.
Wła#nie ten plik bdziemy w miar postpu prac edytowa$, zapisywa$, a nastpnie
od#wiea$ jego wygld w przegldarce.
Instrukcje dotyczce
pobierania plików z serwera
znajduj si we wstpie
do tej ksiki.
N
A POCZTEK
Potrzebujemy odpowiedniego do pory roku obrazka i ycze,. Na rysunku 8.1 przedstawiono
to, od czego musimy zacz$.
R
YSUNEK
8.1.
Bazowa kartka
z pozdrowieniami,
jeszcze niezmieniona
przy uyciu stylów CSS
Aby umoliwi$ efektywne wykorzystanie stylów, musimy okre#li$ struktur strony. Chcemy
zachowa$ maksimum elastyczno#ci, wic kad lini zawrzemy w osobnym elemencie
,
a cało#$ z kolei — w nadrzdnym elemencie
. W nastpnym etapie wyrzucimy wszystkie
elementy
, poniewa ju nie bdziemy ich potrzebowa$. Natura blokowa elementów
pomoe nam w rozmieszczeniu kolejnych linii tekstu. Na listingu 8.1 pokazano te zmiany.
L
ISTING
8.1.
Dokument z nowymi elementami
div
!
"#$%%%%&''"( )**+
"( +
")*+
)+"#),-). )+
")*+
/*0+
[ Pobierz całość w formacie PDF ]