|
Piątek, 18 września 2009
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:55
HTML/CSS
/ kurs CSS
|
Pozycjonowanie -wstęp
Na poprzednich lekcjach pokazywałem Ci jak można tworzyć strony za pomocą warstw. Lepiej lub gorzej już to umiesz, kiedy chodzi o pływanie. Jednak przy pływaniu [jak mogłeś doskonale zauważyć] istnieje jeszcze zależność między umieszczeniem warstwy w kodzie, a miejscem jej wyświetlenia. Korzystając z pozycjonowania likwidujemy tę zależność! Napiszmy więc kod kolejnej strony:
Kod XHTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="banner"></div> // 1
<div id="w01"></div> // 2
<div id="w02"></div> // 2
<div id="w03"></div> // 3
<div id="w04"></div> // 3
<div id="menu">Tu będzie menu</div> // 4
<div id="tresc">Tu treść</div> // 5
</body>
</html>
 Opis
* - strona ostatecznie [za kilka lekcji] będzie wyglądać jak ta ->
1 - warstwa banner, to ta podłużna [najjaśniejsza] warstwa u góry, która przykrywa dwie warstwy-kwadraty.
2 - warstwy w01 i w02 są to te dwie warstwy boczne [kwadratowe].
3 - warstwy w03 i w04 to te dwie warstwy podłużne - nad i pod 'banner'
4 - to jest warstwa po lewej na dole.
5 - to jest warstwa po prawej na dole.
Jeśli ktokolwiek już skopiował/przepisał kod i spróbował go uruchomić zauważył, że nic nie jest tak jak to jest pokazane na przykładzie! Bo i przecież być nie może... mamy 7 warstw, jedna pod drugą, do których jeszcze nie przypisano żadnych właściwości. Zróbmy więc to.
Plik CSS:
body {
margin: 0; // 1
padding: 0; } // 1
div { // 1
margin: 0;
padding: 0;
border: 1px solid silver;
position: absolute; } // 2
div#w01, div#w02, div#w03 { // 3
top: 5px; } // 4
div#w01 {
left: 128px; // 5
width: 200px;
height: 200px;
background-color: silver; }
div#w02 {
right: 128px; // 6
width: 200px;
height: 200px;
background-color: silver; }
div#w03, div#w04 {
left: 338px; // 7
right: 338px; // 8
height: 20px;
background-color: gray; }
div#w04 { top: 185px; }
div#banner {
top: 35px; // 9
left: 138px; // 9
right: 138px; // 9
height: 140px; }
Opis:
* - zajmę się jedynie rzeczami nieznanymi dotychczas
1 - dla całej strony usuwam odległości [dzięki temu treść strony będzie się mogła stykać z ramą przeglądarki - domyślnie jest to niemożliwe]. Podobny zabieg robię we wszystkich DIV - osobiście wolę mieć pełną kontrolę nad odległościami, niż polegać na domyślnych, gdyż nigdy nie wiadomo, czy nie pojawi się jakaś nowa przeglądarka z innyymi wartościami...
2 - ustalam atrybut 'position' dla wszystkich warstw na 'absolute'. Oznacza to, że ta warstwa nie jest już brana pod uwagę podczas ustawiania wszystkich elementów na stronie - tak jakby "podskoczyła", a wszystko co było za nią "wślizguje się" na jej pozycję. W ustawieniu elementów na stronie mamy taki sam efekt, jakbyśmy ją usunęli - jednak nadal ją mamy. Dzięki temu zabiegowi sami będziemy mogli ustalać miejsce, w którym znajduje się konkretna warstwa.
3 - tworzę regułę aż dla 3 warstw - jaka oszczędnośc miejsca!:-)
4 - wcześniej miałeś do czynienia z dwoma rodzajami odległości - margin i padding. A teraz poznasz trzecią możliwą odległość - wykorzystywaną podczas pozycjonowania [ustawiania odpowiedniej pozycji]. Taki zapis oznacza, że odległość od góry dla tych warstw ma wynieść 5px.
5 - a tu kolejna możliwa odległość pozycjonowania - left. Ustalam, że ma ona wynosić 128px. Dzięki temu mam już pierwszą wypozycjonowaną warstwę - ma ona być odsunięta od góry [top] o 5px, a od lewej o [left] 128px. Poprzez przypisanie dodatkowych właściwości [wysokość, szerokość, tło] uzyskałem pierwszy kwadrat! Czas na pozostałe warstwy.
6 - sytuacja analogiczna jak wyżej - teraz jednak zamiast przypisywać odległość od lewej strony, dałem odległość od prawej. Pozostałe opisane właściwości z tej reguły sprawią, że uzyskaliśmy 2 bliźniacze kwadraty - fajne, co:-)
7, 8 - kolejne dwie bliźniacze warstwy - jedna pod, a druga nad 'banner'. Im nie przypisuję szerokości. W zamian za to przypisuję im odległość od lewej i prawej, przez co zostaną "rozciągnięte" do pewnego - zmieniające się wraz z wielkością okna przeglądarki rozmiaru. To tak jakbyś miał płachtę materiału zahaczoną na dwóch łańcuchach - jeden po prawej, drugi po lewej. Jeśli naprężysz łańcuchy [powiększysz okno przeglądarki, lub zwiększych rozdzielczość] - płachta się rozszerzy [by łańcuchy nie pękły - zawsze mają taką samą długość], gdy poluźnisz łańcuchy [zmniejszych okno przeglądarki lub zmniejszych rozdzielczość] - płachta skórczy się. Uwaga: Efekt nie działa poprawnie w Internet Explorer. W dalszej części kursu dowiesz się jak to obejść.
9 - W przypadku 'banner' użyłem tego samego - Powiedziałem jak daleko od prawej i lewej krawędzi strony ma być ta warstwa - dzięki czemu uzyskam automatycznie szerokość tej warstwy. Przypisałem także dla tej warstwy odległość od góry, po to, aby nie nachodziła na 'w03'.
Jak widzisz teraz warstwy są już ułożone [jedynie te górne, dolnymi zajmiemy się później] i w żaden sposób na siebie nie oddziałują. Wcześniej - gdy chciałeś zmienić którąkolwiek z odległości, musiałeś się liczyć z tym, że może to zakłucić cały układ twojej strony, gdyż elementy nawzajem się "odpychały". Tu tego nie ma. One po prostu "szubują" w miejscu, które im wyznaczyłeś.
Różne warianty 'position':
Chyba każda właściwość CSS ma kilka opcji - podobnie dzieje się w przypadku atrybutu 'position':
- position: relative:
ustawiamy wzglądem pozycji, jaką normalnie ma taki obiekt. Czyli jeśli np. ustawimy top: 5px, to warstwa [choć nie tylko warstwy można pozycjonować - właściwie każdy znacznik się nadaje] zostaie przesunięta o 5px w dól od swojej normalnej pozycji. Można także stosować wartości minusowe - wtedy, np. top: -5px spowoduje podciągnięcie takiej warstwy o 5px w górę. Pamiętaj jednak, że wartości ujemne są nieprawidłowo odczytywane przez MSIE... [2 razy więcej]
- position: fixed:
ustawiamy identycznie jak w przypadku 'absolute' czyli względem pojemnika nadrzędnego [przeważnie strony]. Jednak ta wartość sprawia, że nasza warstwa [lub dowolny inny element wypozycjonowany] będzie się znajdowała w tym miejscu, również wtedy, gdy użyjemy suwaka, aby przewinąć stroną niżej. Element tak wypozycjonowany jest "zawieszony" w danym miejscu na stałe i nie przesuwa się.
- position: absolute:
element jest ustawiany względem nadrzędnego pojemnika [najczęściej strony].
Nadrzędny pojemnik:
Kilkukrotnie użyłem na tej lekcji określenia "nadrzędny pojemnik". Jak już wcześniej udowodniliśmy DIV jest prostokątem - podobnie jak strona. Nazwijmy więc ten prostokąt "pojemnikiem". Jeśli umieścimy DIV z atrybutem 'position: absolute' bezpośrednio w sekcji body [czyli ta warstwa nie będzie umieszczona w żadnej warstwie, tabeli itp.] to dla takiego DIV pojemnikiem nadrzędnym będzie strona - odległości [left, top, right, bottom] będą liczone od obramowania przeglądarki.
Jeśli jednak, umieścimy DIV id="zagniezdzony" w DIV id="nadrzedny", i 'nadrzedny' będzie miał dowolną wartość 'position', to pojemnikiem nadrzędnym stanie się właśnie DIV id="nadrzedny". Jeśli 'nadrzedny' nie będzie miał przypisanej wartości 'position', wtedy nadal 'zagniezdzony' będzie ustalany względem strony - oczywiście jeśli będzie miał 'postion: absolute'.
Mam nadzieję, że udało mi się to opisać wystarczająco prosto, a jednoczesnie nie opuściłem niczego ważnego.
Pozycjonowanie jest przyszłością webmasteringu więc naprawdę warto jest się go nauczyć. Jeśli czegoś nie jesteś do końca pewien, to dokładnie przestudiuj jeszcze raz tę lekcję i wtedy idź dalej. Jeszcze będzie trochę o tym. Zapraszam więc dalej!
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:55
HTML/CSS
/ kurs CSS
|
Warstwa do warstwy i mamy stronę
Opisując pozycjonowanie powiedziałem, że warstwy "szybują". To chyba rzeczywiście dobre określenie. Ale skoro szybują, to powinny mieć - jak prawdziwe samoloty - możliwości latania na róznych wysokościach. I też takie możliwości mają!
Zmień w pliku CSS:
body {
margin: 0;
padding: 0; }
div {
margin: 0;
padding: 0;
border: 1px solid silver;
position: absolute; }
div#w01, div#w02, div#w03 {
top: 5px; }
div#w01 {
left: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index:1; } // 1
div#w02 {
right: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index: 2; } // 2
div#w03, div#w04 {
left: 338px;
right: 338px;
height: 20px;
background-color: gray;
z-index:3; } // 3
div#w04 {
top: 185px;
z-index:4; } // 4
div#banner {
top: 35px;
left: 138px;
right: 138px;
height: 140px;
z-index:10; } // 5
Opis:
1 - oś z-index jest osią głębi. Na pewno słyszałeś o osi X[szerokość] i Y[wysokość]. Oś z jest trzecim wymiarem. Nie ma jednostki [jak px, pt, %] - po prostu wpisuje się liczbę. Im liczba ta jest większa tym wyżej na stosie jest warstwa [lub inny element]. W tym wypadku przypisałem tej warstwie 1, czyli bardzo małą liczbę [mógłbym także przypisać 100000, jednak jeśli wszystkie warstwy miałyby wyższe wartości, to i tak znajdowałaby się na spodzie]
2 - kolejnej warstwie przypisuję 2
3 - przy regule dla dwóch warstw wpisuję 3. Obie warstwy są teraz na jednym poziomie - należy jednak unikać takich sytuacji...
4 - .. dlatego po raz kolejny dla 'w04' określiłem wartość z-index. Ta warstwa nie będzie na dwóch poziomach - tylko na jednym. Tym, który został przypisany jako ostatni.
5 - dla 'banner' zrobiłem spory skok. To całkowicie dozwolone - nawet zalecane, gdyż dzięki temu w przyszłości można dodać koljene elementy, dla których będzie się już miało gotowe poziomy.
To już wszystko, co chciałem Ci pokazać na tej lekcji:-) Mam nadzieję, że rozumiesz na czym to polega. Jeśli nie - napisz do mnie czego nie rozumiesz, a spróbuję Ci pomóc oraz ewentualnie wprowadzic pewne poprawki do kursu.
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:54
HTML/CSS
/ kurs CSS
|
Pozycjonowanie - gotowa strona
Powtórka z rozrywki, czyli pozycjonowanie. Tym razem skończymy opisywanie wszystkich warstw.
Plik CSS:
body {
margin: 0;
padding: 0; }
div {
margin: 0;
padding: 0;
border: 1px solid silver;
position: absolute; }
div#w01, div#w02, div#w03 {
top: 5px; }
div#w01 {
left: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index: 1;}
div#w02 {
right: 128px;
width: 200px;
height: 200px;
background-color: silver;
z-index: 2;}
div#w03, div#w04 {
left: 338px;
right: 338px;
height: 20px;
background-color: gray;
z-index: 3;
min-width: 200px;} // 1
div#w04 {
top: 185px;
z-index: 4;}
div#banner {
top: 35px;
left: 138px;
right: 138px;
height: 140px;
z-index: 10;}
div#menu { // 2
top: 215px;
left: 128px;
width: 200px;
background-color: #6e6e6e;
z-index: 15; }
div#tresc {
positon: static; // 3
margin: 215px 128px 0 338px; // 4
background-color: #646464;
z-index: 25;
min-width: 550px; }
Opis:
1 - nowa właściwość. Związana ściśle z tym "rozciąganiem", o ktorym pisałem na poprzednich lekcjach. Nie ustalając szerokości, tylko odległości z dwóch przeciwległych stron sprawiamy, że szerokość zmienia się wraz z szerokościa okna przeglądarki [zmniejsz (przyciskiem w prawym górnym rogu) okno przeglądarki, a zobaczysz, że i warstwa się "skurczyła". Jesli będziesz nadal zmniejszał rozmiar okno, warstwa wreszcie może zniknąć...]. wstawiając minimalną szerokość unikamy takiej sytuacji - po zmnijeszeniu do jakieś [ustalonej szerokości] warstwa nie będzie się już kurczyć.
2 - obiecany opis 'menu': odległość od góry 215px, od lewej 128px, szerokość stała: 200px, tło w kolorze niestandardowym, poziom 15.
3 - spójż na regułę dla DIV [bez id i class]. Widzisz, że tam przypisałem wszystkim warstwom 'position: absolute;'. Jednak ta warstwa ma być "normalna", czyli niewypozycjonowana, stąd ta wartość 'static'.
4 - teraz zamiast odległości, daję marginesy. Normalnie [gdyby inne warstwy nie były wypozycjonowane] marginesy liczone byłyby od dolnego obramowania warstw położonych wyżej. Jednak warstwy wypozycjonowane "szybują", więc marginesy tej warstwy ich nie dotyczą. Są to odległości od obramowania przeglądarki.
Zapisz teraz wszytsko i uruchom stronę. Już powinieneś widzeć efekty. W niektórych przeglądarkach trzeba będzie do warstw 'menu' i 'tresc' wstawić kilka liter - zrób to:-). Efekt jest pełny. Uwaga: MSIE 6.0 nie obsługuje części kodu [tej dotyczącej "rozciągania" wartsw na odległościach]. Możesz to obejść, jednak stracisz elastyczność warstw: zamiast dawać zarówno prawą jak i lewą odległość, daj tylko lewą i wstaw atrybut 'width'. Jest to chyba najlepsze rozwiązanie - być może następne wersje MSIE będą już poprawnie obsługiwać style... Nam pozostaje mieć tylko nadzieję:-), a dziś tworzyć strony lekko uboższe [lub różne arkusze stylów dla różnych przeglądarek].
A teraz zadanie dla Ciebie:
Stwórz jakieś ciekawe menu. Oparte na listach, może z jakąś grafiką pojawiającą się po najechaniu - lub od razu, a w miejsce tej grafiki [po najechaniu] wczytać inną [tu trzeba zrobić regułę dla 'a' z grafiką w tle odpowiednio wypozycjonowaną, a po najechaniu 'a:hover' zmienia tło]... Wierzę, że sobie poradzisz i wymyślisz coś ciekawego. A w 'tresc' wstaw nagłówek pierwszego stopnia i jakiś akapit. Tylko od ciebie zależy jak będzie to wyglądać! Jeśli już uda Ci się to wszystko zrobić zapraszam dalej.
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:54
HTML/CSS
/ kurs CSS
|
Czary z tłem
Już wielokrotnie powtarzałem podczas tego kursu, że CSS ma wielkie możliwości i bardzo łatwo jest wykrzesać ciekawe efekty. po tej lekcji chyba powinieneś się już do tego całkowice przekonać. Do pliku css dorzucimy tylko kilka linijek, a oblicze strony zmieni się niczym za dotknięciem czarodziejskiej różdżki...
body {
margin: 0;
padding: 0;
background: black url(szare.jpg) 128px 5px no-repeat fixed; } // 1
div {
margin: 0;
padding: 0;
border: 1px solid silver;
position: absolute; }
div#w01, div#w02, div#w03 {
top: 5px;
background: #848484 url(biale.jpg) 128px 5px no-repeat fixed; } // 2
div#w01 {
left: 128px;
width: 200px;
height: 200px;
/* usunięto : background-color: silver; */ // 3
z-index: 1;}
div#w02 {
right: 128px;
width: 200px;
height: 200px;
/* usunięto : background-color: silver; */ // 3
z-index: 2;}
div#w03, div#w04 {
left: 338px;
right: 338px;
height: 20px;
background: #848484 url(biale.jpg) 128px 5px no-repeat fixed; // 2
z-index: 3;
min-width: 200px;}
div#w04 {
top: 185px;
z-index: 4;}
div#banner {
top: 35px;
left: 138px;
right: 138px;
height: 140px;
background: transparent url(podstawowe.jpg) 128px 5px no-repeat fixed; // 4
z-index: 10;}
div#menu {
top: 215px;
left: 128px;
width: 200px;
background: #c8c8c8 url(jasne.jpg) 128px 5px no-repeat fixed; // 5
z-index: 15; }
div#tresc {
positon: static;
margin: 215px 128px 0 338px;
background: #c8c8c8 url(jasne.jpg) 128px 5px no-repeat fixed; // 5
z-index: 25;
min-width: 550px; }
Opis:
* - aby móc zobaczyć ten efekt musisz pobrać zestaw grafi[42KB]
1 - dopisuję do reguły body, kolejną właściwośc. Jesto to skrót, który należy rozumieć: wczytaj grafikę 'szare.jpg' [url(szare.jpg], a gdziejej nie będzie daj czarne tło [black], gtrafike w tle ustaw 128px od poczatku strony [128px] i 5px od góry [5px], obrazku w tle nie powtarzaj [no-repeat] i nie przesuwaj [fixed]. Uwaga: efekt osiągnięty tym sposobem nie będzie działać w MSIE:-(
2 - ten sam skrót. Jedyne co się zmieniło to kolor tła i grafika.
3 - usunąłem deklaracje koloru tła, gdyż są one już zapisane we wcześniejszej regule.
4 - inna grafika w tle, a także brak koloru. 'Transparent' nie jest żadnym kolorem, oznacza "przezroczyste", czyli bedzie przebijać to co jest poniżej.
5 - do dolnych warstw wczytuje tą samą grafikę i ten sam kolor tła.
Cały efekt polega na tym, że wszystkie tła są umieszczane względem początku strony, czyli ładnie będą do siebie pasować. Dodatkowo, dzięki 'fixed' nie będą się przesuwać wraz z zawartością strony - dany fragment tła będzie zawsze w tym samym miejscu. Nie da się tego tak dokładnie opisać - to trzeba zobaczyć. Zapisz to i odpal przeglądarkę [Operę8.0 lub FF1.0], a zobaczysz dlacego tak nazwałem tą lekcję. Aha, aby dokładniej zobaczyć efekt w 'tresc' wpisz kilkanaście akapitów - tak by pokazał się przesuwak.
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:53
HTML/CSS
/ kurs CSS
|
Skrótowy zapis właściwości
Zdecydowałem się na napisanie osobnej lekcji o tym zagadnieniu, bo umiejętność używania skrótów może bardzo skócić czas pisania kodu CSS. A czas to pieniądz [na dole strony jest nr konta:-)]!
Poczwórne wartości:
Ten skrót wprowadziłem już podczas podstawowej części kursu, teraz jednak pokaże jak można jeszcze bardziej skracać kod:
/* najdłuższy możliwy zapis: */
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
padding-rightt: 5px;
/* lekki skrót: */
pading: 10px 5px 10px 5px;
/* większy skrót: */
padding: 10px 5px;
Pierwszego zapisu chyba nie muszę tłumaczyć. Drugi zapis był często spotykany podczas kursu. Oznacza padding: góra prawa dól lewa. Trzeci zapis można stosować jeśli wartośc top-bottom i left-right jest taka sama. Wtedy przeglądarka automatycznie rozumie, że ma przypisać przeciwległej stronie tą samą wartość. Oczywiście taki zapis mozna także z powodzeniam używać w przypadku margin i innych tego typu właściwości.
Ale czasem występuje sytuacja, kiedy tylko jedna strona się wyróżnia:
/* długi [choć nie najdłuższy] zapis: */
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 3px solid white;
border-bottom: 1px solid white;
/* skrócony zapis: */
border: 1px solid white;
border-width: 3px 1px 1px;
Ten zapis także można stosować dla innych właściwości. Napisałem wartości tylko dla 3 stron [góra prawa dół], jednak 2 ostatnie wartości były takie same, przez co automatycznie 4 będzie także miała wartość 1px.
Właściwości czcionki:
Bardzo często trzeba wielokrotnie w jednym arkuszy stylów wpisywać właściwości opisujące czcinkę, dlatego ten skrót jest jednym z moich ulubionych:
/* czcionka pogrubiona, pochylona, 12px, arial */
font-weight: bold;
font-style: italic;
font-size: 12px;
font-family: arial;
/* a teraz wersja skrócona: */
font: bold italic 12px arial;
/* a jeśli nie jest pochylona i pogrubiona i ma kilka czcionek: */
font: 12px arial, verdana, tahoma;
No tu chyba nie ma wiele do tłumaczenia - kod wręcz sam mówi:-)
Tło:
Już raz to pokazywałem podczas kursu, ale przyda się powtórka:
/* długa wersja: */
background-color: red;
background-image: url(tlo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 30%;
/* a wersja skrócona: */
background: red url(tlo.gif) 0 30% no-repeat fixed;
/* a jeśli chcesz mieć przeźroczyste tło: */
background: transparent url(tlo.gif) 0 30% no-repeat fixed;
To jest naprawdę bardzo przydatne rozwiązanie - z 5 linijek kodu otrzymujemy jedynie 1!
Zapis kolorów:
Istnieją 4 sposoby zapisu kolorów w CSS, z czego jeden jest skrótowym zapisem:
/* zapis nazwą angielską [mnomeniczną]: */
color: red;
/*zapis kodem heksadecymalnym: */
color: #FF0000;
/* skrócony zapis heksadecymalnym: */
color: #F00;
/* zapis kodem RGB: */
color: rgb(255, 0, 0);
Jeśli chodzi o pierszą metodę - wszystko jasne. Angielska nazwa koloru. W drugiej metodzie też nie ma wielkiej filozofii:-) Po prostu kopiujemy z programu graficznego [lub specjalnych tabel koloru] kod heksadecymalny. Można go zapisać skrótowo, jeśli parami, 3krotnie obok siebie sa takie same znaki - jak w przykładzie: #FF0000 = 'FF' => 'F', '00' => '0'.
Jak otrzymać niestandardowy kolor:
Wyżej podałem link do specjalnej tabeli kolorów. Ale taki kolor mozna uzyskac samemu - nawet w MS Paint! Otwórz ten program. Kliknij dwókrotnie na jakimkolwiek kolorze. Pojawi się okno. Kliknij 'Definiuj kolory niestandardowe', a następnie ustaw wskaźniki w odpowiednich pozycjach. Z pól po prawej [czerwony, zielony, niebieski] skopiuj zawartość i wklej do RGB(czerwony, zielony, niebieski). Lepsze programy graficzne posiadają także automatycznie zapis w kodzie heksadecymalnym.
Skróty przedstawione na tej lekcji nie są oczywiście wszystkimi możliwymi! Jednak zebrałem tu te, których sam najczęściej używam. Istnieją także ciekawe sztuczki ze skrótami - warto poszukać. Szczególnie polecam zaglądanie w kody przeglądanych stron lub gotowych, darmowych szablonów dostępnych w Internecie.
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:52
HTML/CSS
/ kurs CSS
|
Hacki, czyli jak obejść niedoskonałości przeglądarek
Jak z pewnością spostrzegłeś podczas kursu wielokrotnie pisałem, żetego nie obsługuje jedna przeglądarka, a tego inna. Najczęściej jednak problemy stwarza MSIE, dlatego głównie na nim skupimy się podczas tej lekcji. Hacki najczęściej wykorzystują dziurę w jakiejś przeglądarce. Zobacz przykłady:
Na początek ukrywanie fragmentów kodu CSS dla MSIE:
/* w pliku css */
table {
width: 100px;
voice-family: "\"}\""; // 1
voice-family: inherit; // 2
width: 200px; } // 3
Opis:
* - ten hack nazywa się "box model hack"
1 - 'voice-family' jest analogiczny do 'font-family', z tą różnicą, że jest wykorzystywane do odczytywania - na głos - przez przeglądarkę strony [w praktyce chyba tylko Opera 8.0 korzysta z tego, chyba:-)]. Przypisana wartość nic nie znaczy - powoduje, że MSIE przestaje czytać style od tego miejsca [zaczyna czytać dopiero kolejną regułę].
2 - przypisujemy do 'voice-family' wartość domyślą, żeby "naprawić" wcześniejszy - specjalny błąd.
3 - po raz kolejny definiujemy właściwości, które chcemy ukryć przed MSIE Oczywiście napisałem jedynie przykładowo. Pamiętaj, że jeśli określimy coś raz, a później jeszcze raz to ta ostatnia opcja jest ważniejsza.
/* tak to czyta MSIE: */
table {
width: 100px;
voice-family: "\"}\""; // i już kończy, dalej nie będzie sprawdzał tej reguły - skoczy do następnej
voice-family: inherit;
width: 200px; }
/* a nowoczesne przeglądarki: */
table {
width: 100px;
voice-family: "}"; // nieprawidłowa wartośc, ale czyta dalej, bo to przecież nie koniec świata:-)
voice-family: inherit;
width: 200px; }
Chyba wszystko jasne. Efekt jest bardzo ciekawy. Choć w przykładzie może się wydawać, że daje niewiele możliwości, to można dzięki niemu czasem rozwiązać pewne problemy. Ja osobiście rzadko używam tego hacka, gdyż częsciej zdarza mi się sytuacja, kiedy to MSIE wymaga więcej kodu niż nowoczesne przeglądarki. A teraz kolejny ciekawy efekt:
table {
właściwości: wartości czytane przez wszystkie przeglądarki;
}
/*
Komentarz wieloliniowy, jednak przez dodanie '\' na końcu MSIE przeoczy
koniec i będzie uważał cały pozostały kod za komentarz
\*/
table {
właściwości: czytane tylko przez nowsze przeglądarki;
}
/* Komentarz wieloliniowy zamknięty normalnie
MSIE będzie uważał zamknięcie tego komentarza jako zamknięcie poprzedniego,
a otwierające '\*' zignoruje */
* - ten hack nazywa się "commented backslash hack"
Oczywiście można - używając hacków - tworzyć reguły dla innych selektorów niż 'table'. Zasada działania tego hacku jest podobna, gdyż ukrywa się fragmenty kodu dla MSIE. Z tą różnicą, że poprzedniego używa się do ukrywania pojedyńczych właściwości, a tego do całych reguł.
I jeszcze jeden hack, którego zadaniem jest ukrywanie kawałków kodu przed MSIE.
table {
właściwości: wartości czytane przez wszystkie przeglądarki;
}
body>table {
właściwości: czytane tylko przez nowsze przeglądarki;
}
Jest to jeden z ciekawszych hacków. M.in. dlatego, że pozwala na obejście niedoskonałości MSIE6.0. Pierwsza reguła jest czytana całkowicie normalnie - przez wszystkie przeglądarki. Druga reguła jednak jest rozpoznawana jedynie przez nowoczesne przeglądarki - choć jest w pełni zgodna ze standardami. Wskazuje się po prostu, że body jest "starsze" od table. Oczywiście można stsować taki zapis do wszystkich selektorów - należy jednak pamiętać, o tym, aby "ta nierówność" była spełniona.
Osobny arkusz stylów dla MSIE:
No juz próbowąłeś wszystkiego - prośbą, groźbą - a on nic! To "jak nie młotem, to pałą" i daj mu osobny plik CSS
..
<head>
<link rel="stylesheet" href="style-normal.css" type="text/css" />
<!-- [if IE]> // 1
<style type="text/css"> // 2
table { width: 100px; } // 2
</style> // 2
<![endif] --> // 3
</head>
..
* - ten hack nazywa się "warunkowy komentarz"
1 - w HTML/XHTML taki zapis: '<!-- cośtam cośtam -->' jest traktowany jako komentarz i nie jest w żadanesposób interpretowany. Jeśli jednak umieścimy '[if IE]' MSIE zaczyna interpretować zawartość tego komentarza.
2 - W powyższym przykładzie dodaliśmy jedną linijkę kodu CSS, ale moglibyśmy dodać jej dużo więcej, lub nawet po raz kolejny załączyć plik css z dodatkowym opisem styli dla MSIE. Pamiętaj, żeby jednak odwołanie do styli dla wszystkich przeglądarek umieścić nad tym zapisem.
3 - zamykamy obszar czytany przez MSIE, a także cały komentarz.
Ten sposóh jest używany przez mnie najczęściej, ponieważ daje mi to, czego ja najbardziej chcę - opis właściwości tylko dla MSIE. Teraz wróc do lekcji "Pozycjonowanie - gotowa strona" i dodaj tam odpowiednie linie kodu [HTML i CSS], aby sprawić, by strona w Operze/FF była "elestyczna", a w MSIE prezentowała się nieźle.
Osobny arkusz stylów, ale za pomocą JS
...
<head>
<script type="text/javaScript"> // 1
if (-1 != navigator.userAgent.indexOf("MSIE")) { // 2
document.write('<link rel="stylesheet" type="text/css" href="msie.css" />'); } // 3
</script> // 1
</head>
...
Opis:
1 - obszar skryptu JS.
2 - sprawdzam, czy internauta używa MSIE. Jeśli tak...
3 - używając metody write() piszę dodatkową linie kodu wczytującą inny arkusz stylów.
Można oczywiście dopisać tym sposobem tylko fragment kodu - jedną regułę, a można wstawić cały plik. Zasada jest taka sama jak w przykładzie powyżej - i efekt tez identyczny.
Uwaga: niektórzy mają wyłączoną obsługę JS, przez co ten sposób wydaje się być gorszy. Jednak jeśli ktoś używa MSIE, to raczej nie wyłącza obsługi JS [to domena bardziej doświadczonych internautów, kórzy używają lepszych programów niż MSIE].
Uwaga: niektórzy po zainstalowaniu Opery nie zmieniają w jej ustawieniach opcji 'Przedstawiaj jako MSIE', przez co nawet Opera będzie czytać ten plik/regułę, co może spowodować, że strona nie będzie się w niej prezentować tak dobrze jak w FF - raczej nie ma możliwości, aby prezentowała się gorzej niż w MSIE:-/.
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:52
HTML/CSS
/ kurs CSS
|
Skok w przyszłość - XHTML
Na początek warto byłoby powiedzeć czym jest XHTML. Otóż wg definicji, XHTML jest aplikacją XML... no i teraz mnie wyzywasz:-) XML jest językiem znaczników, który sam siebie opisuje. W skrócie oznacza to, że tworzysz własne znaczniki a ich wygląd opisujesz w CSS - tak jak tworzyliśmy "nowe" tagi z DIVów. XHTML jest zgodny ze specyfikacją XML i "symuluje" HTML. Tzn., że ma zestaw znaczników prawie identyczny z HTMLem [o czym mogłeś się przekonać], jednak w przyszłości możliwe będzie przekonwertowanie poprawnie napisanych dokumentów XHTML na XML - wydłużając ich żywotność.
Dlaczego należy przestrzegać standardów?
A dlaczego należy przestrzegać przepisów ruchu drogowego?:-) Jeszcze kilka lat temu wcale mnie nie dziwiło, że strona nie jest zgodna ze standardami - "pff, przecież nikt ich nie przestrzega!". Jednak sytuacja się zmieniła diametralnie: nowe przeglądarki, nowe technologie i rzesze nowych twórców, którzy wymyślają to coraz zabawniejsze sposoby na łamanie standardów... Póki na rynku była jedna przeglądarka - rzeczywiście przestrzeganie standardów nie było aż takie konieczne [choć i tak należało ich przestrzegać]. Jednak nie sprawdzało się wtedy poprawności ze standardami, tylko wygląd w tej przeglądarce. Teraz są już co najmniej 3 ważne przeglądarki: MSIE6.0, FF1.0, Opera8.0. A do tego doliczyć można jeszcze Mozillę i Netscape'a. Starczy więc nauczyć się standardów, które wszystkie te przeglądarki przestrzegają [może oprócz MSIE], a nie zestawu nowych tagów, hacków i oryginalnych atrybutów obsługiwanych tylko przez "wybranców". Po za tym - jak napisałem wcześniej - poprawny dokument XHTML można przekonwertować na XML, dzięki czemu wydłuża się życie takiej strony. Często można się spotkać z zarzutem, że standardy nie pozwalają na tworzenia efektownych stron... o większej bzdury nie słyszałem - pozwalają naprawdę rozwinąć skrzydła twórcom i sprawić by ich praca była jeszcze przyjemniesza - gdyż nie trzeba co chwilę sprawdzać w każdej przeglądarce jak wygląda strona...
Z pewnością, jeśli chcesz się na poważnie zająć tworzeniem stron [nie mówię "zawodowo"], to przestrzegaj standardów, bo strona stworzona zgodnie ze standardami to strona lepsza, mniejsza objętościowo i nowocześniejsza.
Różnice między HTML a XHTML
Na dobrą sprawę prócz kilku prostych rzeczy XHTML jest identyczny z HTML. Zacznijmy od nagłówka:
W XHTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
W HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/html4/loose.dtd">
lub:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3c.org/TR/html4/strict.dtd">
lub:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3c.org/TR/html4/frameset.dtd">
Każda strona, czy to napisana w HTML, czy to w XHTML powinna zawierać deklarację typu dokumentu. Jak widzimy w XHTML pojawiły się także dodatkowe atrybuty w znaczniku <html>. HTML ma kilka różnych deklaracji, ponieważ jest kilka "odmian" tego samego języka. Najbardziej restrykcyjnym jest 'strict', 'transitional' jest przejściowy, a 'frameset' pozwala na stosowanie ramek.
Lista nowych zasad:
1. Tagi i atrybuty pisane małą literą.
W HTML często stosowało się zapis '<ZNACZNIK atrybut="wartość">'. Było to nawet wygodne i często zalecane, gdyż łatwo było spostrzec co jest znacznikiem, a co jego atrybutem. Czasem stosowało się zapis '<ZNACZNIK OnMouseOver="">', który także powinien zostać zmieniony - wszystko co jest umieszcozne między < a > musi być z małej litery. Wyjątek: deklaracja 'DOCTYPE' zawsze jest pisana wielka literą - wyjątek potwierdza regułę.
2. Zamykanie atrybutów i tagów
Każdy atrybut powinien mieć wartość, czyli:
w HTML było dopuszczalne:
<INPUT type="checkbox" name="ok" value="tak" selected>
w XHTML już należy zrobić to tak:
<input type="checkbox" name="ok" value="tak" selected="selected" />
Jak łatwo zauważyć kod XHTML jest w całości pisany małą literą, atrybut 'selected' zyskał wartość, a dodatkowo na końcu pojawiło się '/>'. Pisząc strony w XHTMLu należy pamiętać, że każda wartość atrybutu musi zostać ujęta w cudzysłów. Także każdy element musi zostać zamknięty:
w HTML dopuszczalne było:
<Br>
lub
<LI> to jest opcja
w XHTML należy to już zrobić tak:
<br />
<li>to jest opcja</li>
Jeśli znacznik jest pusty [np. br] należy nadać mu nową strukturę: '<pusty_element />'.
3. Zamykanie w odwrotnej kolejności do otwierania
w HTML można było:
<i><U><b>To jest tekst</I></u></B>
w XHTML należy już zachowac kolejność:
<i><u><b>To jest tekst</b></u></i>
Tu chyba wszystko jasne - najpierw wsiadasz do samochodu, potem go odpalasz. Jak kończysz jazdę, najpierw zatrzymujesz sięi gasisz silnik, a potem wysiadasz - nie odwrotnie:-)
Inny sposób dołączania JS:
w HTML:
<script language="JavaScript">
// kod skryptu
</script>
w XHTML:
<script type="text/javascript">
<![CDATA [
// kod skryptu
]]>
</script>
Jak widać w przykładzie zmieniono atrybut language na type. Zamianie uległa także wartość. Następną nowinką jest ujęcie kodu JS w klamrę tworzoną przez '<![CDATA[ ... ]]>'.
"Słownik" XHTMLowo HTMLowy:-)
- HTML:
'<basefont face="arial" color="red">'
- zastosowanie: ustawienie domyślnej czcionki i koloru dla całej strony
- XHTML [CSS]: body { font-family: arial; color: red; }
- HTML:
'<center></center>'
- zastosowanie: Wyśrodkowanie elementów
- XHTML [CSS] - wyśrodkowanie zawartości pojemnika: p { text-align: center; }
- XHTML [CSS] - wyśrodkowanie pojemnika: p { margin-left: auto; margin-right: auto; }
- HTML:
'<font face="arial" color="red">'
- zastosowanie: ustawienie czcionki i koloru dla fragmentu tekstu
- XHTML [CSS]: span { font-family: arial; color: red; }
- XHTML: Wycofano ze specyfikacji
'font'. Należy używać 'span'
Prócz wyżej wymienionych elementów wycofano sporą część atrybutów. Wszystkie usunięte atrybuty należy zastąpić [najczęsciej identycznie nazwanymi] atrybutami CSS:
- HTML:
'alink, link, vlink'
- zastosowanie: zmiana wyglądu hiperłącza
- miejsce opisu: definicja body [
'<body ...>']
- XHTML [CSS]: pseudoklasy - a:active, a:link, a:visited
- HTML:
'background, bgcolor'
- zastosowanie: określanie tła [wczytywanie grafiki oraz zmiana koloru tła]
- miejsce opisu: definicja body oraz definicje innych elementów
- XHTML [CSS]: background-color: kolor; background-image: url(plik.gif);
- HTML:
'height'
- zastosowanie: określanie wysokości tabel
- miejsce opisu: definiacja table
- XHTML [CSS]: height: 200px;
- HTML:
'hspace, vspace'
- zastosowanie: określanie odległości poziomych [hspace] i pionowych [vspace]
- XHTML [CSS]: padding:5px; margin:5px;
Przedstawiona tu lista nie jest pełna. Wypisałem tu najczęściej używane właściwości i elementy oraz sposoby ich zastępowania.
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:51
HTML/CSS
/ kurs CSS
|
CSS - historia, możliwości, zastosowania
Na początku był html, i więcej nic nie było:-) Możnaby lekko żartobliwie rzec. Ale to prawda, na poczatku lat '90 powstał HTML. Język, który miał stać się uniwersalnym językiem wszystkich platform. I udało się. Jednak czysty HTML był wystarczający tylko początkowo - kiedy Internet służył głównie do wymiany informacji, a na wizualną stronę sieci nikt nie zwracał uwagi. W miarę czasu jednak internet stawął się coraz bardziej dostępnym medium, powstawały pierwsze przeglądarki internetowe z obsługa grafiki, łącza stawały się coraz szybsze, a internauci coraz wrażliwsi na piękno.. Zauważono wtedy, że jednak sam HTML to zdecydowanie za mało. Teraz panuje słuszny trend by już jedynie strukturę strony opisywać za pomocą HTMLa. Do opisu wyglądu stosować jedynie CSS [tyczy się to HTMLa i XHTMLa].
Jeśli chodzi o możliwości stylów, powiem jedynie na razie, że jest ich naprawdę sporo. Spójż na tę stronę. Jak myślisz ile tabel użyłem do jej wykonania. Jak osiągnąłem efekt zmiany koloru hiperłącza po najechaniu? Wszystko to było niesamowicie proste i maxymalnie szybkie, i oczywiście zrobione w CSS. O tym jak dowiesz się w dalszej części kursu.
Być może teraz zastanawiasz się "po co mi są te style"? Odpowiedź jest bardzo prosta. Style przydadzą Ci się na każdej nawet najprostszej stronie. Dzięki nim w szybki i wygodny sposob wykonasz to, co w HTML-u musiałbyś robić kilka godzin. Jeśli znasz HTML, a teraz chcesz się nauczyć stylów, to będziesz musiał trochę przestawić swoją mentalność. Teraz w html-u stworzysz jedynie ramy strony, a wszystkie właściwości obiektów znajdujących się na niej opiszesz w CSS. Dzięki temu twoja strona zyska, po pierwsze przejrzysty kod, a po drugie bardzo schludny wygląd i dużo mniej zapracowanego autora:-).
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:50
HTML/CSS
/ kurs CSS
|
Wstęp do kursu
Właściwie, zaznajomienie się z tym textem nie jest potrzebne, by móc z pełnym sukcesem przerobić ten kurs. Jednak na pewno nie zaszkodzi.
Programy:
W zupełności starczy zwykły systemowy notatnik - choć polecam [PitPad 3.2], a także jakakolwiek przeglądarka internetowa interpretująca CSS - choć odradzam Internet Explorera, gdyż jest przestarzała i nie pozwala w pełni wykorzystywać możliwości drzemiących w CSS. Kurs przygotowywany na Operze i FF . Większość efektów - jeśli nie wszystkie - powinny być identyczne na popularniejszych przeglądarkach.
Dlaczego powstał ten kurs:
Stworzyłem ten kurs dlatego, że [prócz nielicznych wyjątków] żaden, który trafił w na mój monitor nie był w stanie w prosty i zrozumiały sposób wyjaśnić o co tak właściwie chodzi. Ten kurs ma za zadanie pokazać ci jak używać CSS - nie jaki on jest (nie będę Ci kazał na pamięć wykuwać się fragmentów kodu). Po skończeniu tego kursu powieneś wiedzieć jak stosować CSS, by niewielkim nakładem sił uzyskiwać ciekawe efekty.
Dla kogo jest ten kurs:
Najogólniej mówiąc dla wszystkich chętnych między 7 a 150 rokiem życia:-), przyjmując, że dopiero w wieku siedmiu lat człowiek posiada zdolność czytania - z jednym zastrzeżeniem - trzeba znać html przynajmniej całkowite podstawy (podstawy podtstaw). Jeśli nie znasz html-a polecam mój kurs tworzenia stron www, który zbiera pochlebne recenzje wśród początkujących webmasterów. Osobiście wątpie, aby ktokolwiek miał choćby najmniejsze problemy ze zrozumieniem którejś z lekcji - wszystkie starałem się pisać w sposób jak najprostszy, tłumaczą prawie każdy znak. (Swoją drogą tak powinien, moim zdaniem, wyglądać kurs dla początkujących). A więc życzę powodzenia!
Co potem:
Po przerobieniu tego kursu radzę nie zaprzestawać na tym. Style CSS są "trochę" obszerniejsze niż treści przedstawione w tym kursie. [w poszerzaniu swojej wiedzy może posłuzyć "Poradnik dla webmasterów K. Stelmacha", umieszczony razem z ta witryną (patrz 'na koniec')] Na dobry początek starczy ta strona. Po przyswojeniu sobie wiedzy zawartej na niej, każdy będzie w stanie szybko i bez większych trudności przygotować ładnie wyglądającą stronę.
O autorze:
Tak więc (dane na 20:26 02-05-2004) jestem uczniem ogólniaka w Złotowie, najdalej wysuniętym powiecie woj. wielkopolskiego. Moją przygodę z tworzeniem stron zacząłem w gimnazjum. Mam już na koncie kilka stron opublikowanych w sieci [zapraszam dział 'Linki']. Stylami zająłem się tak jakoś "przy okazji" tworzenia jednej strony i stwierdziłem, że jest to naprawdę przyjemne. Moim głównym zainteresowaniem jest informatyka. Z całego ogromu działów informatyki najbardziej podoba mi się internet i jego możliwości. Mam nadzieję, że ten kurs przyda się choć kilku osobom. Tych, którzy zdecydują się na przerobienie go proszę o kontakt. Nie chodzi tu o nic wielkiego, chciałbym jedynie się dowiedzieć jak oceniacie kurs, co było opisane dobrze, co źle itp. Dzięki Wam kurs może być jeszcze lepszy. A teraz zapraszam do głównej części i powodzenia!
Read more
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:45
HTML/CSS
/ kurs HTML
|
|
Na poprzedniej lekcji zapoznałeś się z możliwością wykorzystania zdarzeń JS.
Terach chciałbym ci pokazac jak można załączyć cały skrypt na stronę. JavaScript wbre powszechnej opinii to nie jest banalny język. Można w nim robić naprawdę wielkie rzeczy (może świadczyć o tych choćby gmail.com oparty właśnie o javascript).
Ale mniejsza o to, niech kod przemówi:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Przykład</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
alert("To jest w sekcji head");
</script>
</head>
<body onload="alert('to jest w onload')">
<p onclick="alert('kliknięto mnie')">Kliknij na mnie</p>
<script type="text/javascript">
alert("To jest na dole strony");
</script>
</body>
</html>{/codecitation}
Powyższy kod powinien wywołać 3 razy okienko z komunikatem. Komunikat jasno określa, z którego miejsca kodu pochodzi. Oczywiście, JS nie jest językiem, w którym jedynie można wyświetlać okienka z komunikatami. Jednak to jest kurs HTML. Nie chcę się tu zajmować JavaScriptem jako takim, a jedynie jego umiejscowieniem w kodzie strony. Read more
|
|
Zmieniony ( sobota, 14 listopada 2009 14:58 )
|
|
Strona 3 z 5
<< Początek < Poprzednia 1 2 3 4 5 Następna > Ostatnie >>
|
English
Arabic
Bulgarian
Croatian
Czech
Danish
Dutch
Finnish
French
German
Greek
Hindi
Italian
Japanese
Korean
Norwegian
Polish
Portuguese
Romanian
Russian
Spanish
Swedish
Catalan
Filipino
Hebrew
Indonesian
Latvian
Lithuanian
Serbian
Slovak
Slovenian
Ukrainian
Vietnamese
Albanian
Estonian
Galician
Hungarian
Maltese
Thai
Turkish
Persian
Afrikaans
Malay
Swahili
Irish
Welsh
Belarusian
Icelandic
Macedonian
Yiddish
Armenian
Azerbaijani
Basque
Georgian
Haitian Creole
Urdu
Chinese (S)
Chinese (T)
