TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do
poprzedniego scenariusza, jeśli ktoś go nie skończył).
Skoro jesteśmy przy odsyłaczach, to warto poznać możliwości zmiany zachowania odsyłaczy (ich wygląd,
przed odwiedzeniem strony, w czasie kiedy najedziemy na niego kursorem, czy też odwiedzony link).
Uwaga – w niektórych przeglądarkach różnice mogą być niewidoczne – zależy to od przeglądarki i ew. od jej
ustawień.
Ustawienia stylów (np. w pliku stylów *.css):
a:link
{
właściwość: wartość
}
a:visited
{
właściwość: wartość
}
a:hover
{
właściwość: wartość
}
a:active
{
właściwość: wartość
}
Oczywiście można używać różnych właściwości/cech, np.:
text-decoration: underline bold; /*link będzie podkreślony, pogrubiony*/
color: red; /*kolor fontu linków na stronie będzie czerwony*/
font-size: 22pt; /*wielkość/stopień pisma będzie wynosił 22pt*/
a tak dla przypomnienia - komentarze w css ujmujemy w znaczniki /* */ w przeciwieństwie do komentarzy
w html, gdzie stosujemy znaczniki <!-- -->
tak wygląda link standardowy, jeszcze
nie odwiedzony
tak wygląda link już odwiedzony
tak wygląda link po najechaniu na
niego kursorem
tak wygląda link po ciśnięciu
przycisku myszy
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Wykorzystanie znacznika DIV.
Znacznik <DIV> można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy
dowolną treść.
Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie i dodatkowo można
ustawiać je jak warstwy jedna nad drugą (jedna zasłaniająca drugą).
Jak to działa?
Jeśli umieścimy w kodzie dwa znaczniki DIV bez parametrów: <div>pierwsza treść, zdjęcie, tabele lub „cokolwiek”</div>
<div>druga treść</div>
to efekt będzie taki:
Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub
„cokolwiek”</div>
<div>druga treść</div>
to otrzymamy:
czyli umieściliśmy nasz element/pudełko DIV w taki sposób, że jest z lewej strony i z
drugiej strony jest umieszczony drugi element.
W ten sposób można np. oblać tekstem rysunek.
Kod: <div style="float: left">
<img src="kwiat.gif" alt="Kwiatek" />
</div>
W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie.
W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie.
W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie.
W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie.
W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie.
W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie.
Efekt:
Bez style="float: left" efekt byłby taki:
Więcej nt. pozycjonowania DIV-ów (głównie w połączeniu z CSS):
http://webmade.org/kursy-online/pozycjonowanie-absolutne-relatywne-kurs-css.php
http://www.kurshtml.boo.pl/css/pozycjonowanie.html (cały rozdział nt. pozycjonowania)
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Znacznik <span>
Do wyróżniania fragmentów dokumentu HTML jest znacznik <span>, pozwala on na „grupowanie”
elementów.
Działa trochę podobnie do <div> z tym, że sam w sobie nie wpływa na wygląd bądź pozycjonowanie
wspomnianych fragmentów.
Jego działanie jest bardzo proste.
Przykład:
CSS
i HTML:
Efekt:
Proszę zauważyć, że wyróżnione są (zastosowany jest do nich styl określony przez klasę „czerwony”)
tylko te fragmenty pierwszego zdania, które są ujęte w znacznik grupujący <span>.
Znacznik akapitu <p> użyłem po to żeby pokazać różnicę pomiędzy przypisaniem stylu do całego
akapitu w stosunku do przypisania tylko do jego fragmentów.
Takich efektów nie uzyskamy również przy użyciu <div> chyba, że „bawilibyśmy się” w bardzo
dokładne pozycjonowanie/układanie poszczególnych divów względem siebie, co wymagało by sporo
pracy a do tego każda zmiana powodowała by konieczność ponownego „dopasowywania divów do
siebie.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
z-index Przy stosowaniu znaczników div można użyć znacznika położenia w osi Z: z-index
Czyli czy element jest bliżej nas czy dalej. Inaczej – czy jest przed innym elementem czy za nim.
Przykład (świadomie wklejam zrzuty ekranu, żebyście Państwo pisali – nie ma tego dużo a skuteczniej się uczy, kiedy
człowiek się parę razy pomyli
Będzie to strona z trzema rysunkami umieszczonymi względem strony lub elementu nadrzędnego
(pozycjonowanie absolute)
W pliku CSS mamy trzy selektory identyfikatorów: element1…3 (ich położenie jest ustalone poprzez trzy
pierwsze właściwości position, left, top).
W pliku strony dodajemy trzy znaczniki „div”, w których umieszczamy obrazy:
Efekt na następnej stronie.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Efekt:
Przy pomocy właściwości z-index, możemy ustalać, który element leży wyżej, a który niżej, np.:
Teraz będą identycznie jak poprzednio:
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
A przy takich wartościach właściwości z-index:
… będą w kolejności odwrotnej – pierwszy „na górze”:
Do czego można to wykorzystać?
Np. do opisywania zdjęć – można umieścić tytuł zdjęcia „nad nim” i będziemy mieli pewność, że niezależnie
od kolejności wstawiania tych elementów w kodzie strony opis będzie zawsze widoczny (przy wyższej
wartość z-index).
W niektórych przeglądarkach, bez ustawienia tego parametru strona będzie źle wyświetlana – będziemy mieli
taki przykład, kiedy będziemy używali kontrolki „menu” przy tworzeniu aplikacji internetowej w ASP.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Jeśli zostanie czas, to proszę zerknąć na stronę:
http://pl.html.net/tutorials/css/lesson9.asp
jest tu fajnie wytłumaczone zagadnienie marginesów (wewnętrznego i zewnętrznego – padding i
margin) oraz obramowań (border) – łącza do szczegółowego opisu wspomnianych funkcji są na dole
strony.
Proszę to przećwiczyć.
Warte uwagi internetowe kursy CSS i HTML:
http://pl.html.net/
http://www.kurshtml.boo.pl/index.html
http://webmaster.helion.pl/index.php/podrecznik-css
i wiele innych, wystarczy tylko ćwiczyć, ćwiczyć i ćwiczyć :)
Proszę również mieć świadomość, że niedługo będą wdrażane oficjalnie HTML w wersji 5 i CSS w
wersji 3.
Warto poczytać o nowościach wprowadzanych przez te przyszłe standardy.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
CSS i layout strony
Zadanie:
Zrobimy stronę podobną do tej, której schemat jest poniżej.
Działa to w taki sposób, że skorzystamy ze znaczników <div>, w których umieścimy poszczególne części
strony.
<div> to takie pudełko, w którym możemy umieścić dowolną zawartość i te pudełka umieszczać na stronie
niezależnie od siebie.
Struktura strony będzie wyglądała następująco:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/StyleSheet.css" /> <!—oczywiście jeśli strona jest
w tym samym katalogu, co plik
arkuszy stylów, to link będzie bez
nazwy katalogu podrzędnego-->
</head>
<body>
<div><!--Ten div to główne „pudełko”, w którym będą umieszczone pozostałe-->
<div><!--Tu będzie Nagłówek--></div>
<div><!--Tu będzie Menu--></div>
<div><!--Tu będzie contentplaceholder, czyli zasobnik na treść poszczególnych stron--></div>
<div><!--Tu będzie stopka--></div>
</div>
</body>
</html>
Jeśli zostawili byśmy tak jak to widać, to efekt byłby taki, że poszczególne <div> umieszczone byłyby jeden
pod drugim.
Żeby <div> mogły być ułożone tak jak tego chcemy, to w pliku CSS musimy utworzyć ich cechy i wartości
tych cech.
Nagłówek strony i logo
Stopka – Autor strony, data (aktualna), adres email i przycisk „wyślij
email”
Poszczególne strony Menu:
- Strona
główna
- łącza do
poszczególnyc
h stron z
zadaniami
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Czyli plik StyleSheet.css możemy zrobić tak, jak poniżej.
(dla przypomnienia – jeśli selektor jest poprzedzony znakiem # to znaczy, że jest selektorem identyfikatora.
Identyfikator można dodać tylko do jednego elementu na jednej stronie. Sposób dodania jest widoczny na
następnej stronie). #CALOSC
{
width: 1004px;
/* warto całość umieścić w jednym „pudełku”, mamy wtedy pewność, że żaden <div> wewnątrz
nie „ucieknie” nam, czyli nie przesunie się.
Proszę jeszcze zwrócić uwagę, że określona jest szerokość największego zasobnika, żebyśmy
mieli pewność, że strona będzie wyglądała tak jak chcemy a nie rozszerzy nam się na całą
szerokość ekranu, ponieważ wtedy na różnych monitorach strona może różnie wyglądać.
I jeszcze – suma szerokości tych dwóch pudełek, które są koło siebie nie może być większa
niż szerokość głównego pudełka, ponieważ ustawiły by się jedno pod drugim */
}
#NAGLOWEK
{
/* tu nie musimy nic dodawać, w sumie to takiego selektora identyfikatora nie musielibyśmy
dodawać. I tak na marginesie – jeśli chcemy dodać komentarz, czyli jakiś tekt, który nie
będzie brany pod uwagę a może być pomocny w opisaniu sobie gdzie co jest, to możemy
umieścić gpo pomiędzy takimi znaczkami, jak na początku i na końcu zielonego tekstu */
}
#MENU
{
width: 204px;
float: left;
overflow: hidden;
/* tutaj mamy po kolei:
- szerokość zasobnika
- sposób umieszczenia tego zesobnika względem pozostałych
- overflow, to parametr, który przy ustawieniu wartości „hidden” powoduje, że jeśli
umieścimy w zasobniku coś, co nie będzie się w nim mieściło, to część tego nie
będzie widoczna – chodzi o to, żeby np. za duży rysunek nie nakładał się na inny
zasobnik lub nie powodował konieczności jego przesunięcia. Prawda, że proste ;) */
}
#TRESC
{
width: 800px;
float:left;
overflow: hidden;
/* tutaj mamy podobne parametry, jak w przypadku #MENU, tylko większą szerokość */
}
#STOPKA
{
clear: both;
/* ten parametr blokuje możliwość umieszczenia innych <div> obok – po prostu obie strony
(both) muszą być czyste (clear) */
}
A kod stron będzie, w części <body>, wyglądał następująco:
<body>
<div id="CALOSC">
<div id="NAGLOWEK">Tu będzie Nagłówek</div>
<div id="MENU">Tu będzie Menu</div>
<div id="TRESC">Tu będzie treść stron</div>
<div id="STOPKA">Tu będzie stopka</div>
</div>
</body>
Efekt (dodałem kolory, żeby było lepiej widać).
Proszę również dodać kolory.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Zadanie - kolejna, inna, strona
- tak jak mówiłem, jeśli ktoś chce, to może sobie w domu zrobić swój layout,
ale nie ma takiej konieczności - na stronie zamieściłem gotowy zestaw obrazów.
Tak więc strony od 10 do 14 można pominąć.
Tworzymy nowy obraz w Photoshopie.
Proszę wziąć pod uwagę rozmiar – tak, żeby mieścił się na „standardowym” ekranie (rozdzielczości).
Można ustawić(zakładam, że najmniejsza rozdzielczość ekranu będzie wynosiła 1280x800):
- szerokość na np. 1004 (margines 20 px na suwak/pasek przewijania strony),
- wysokość na 600 (te 200 px na paski przeglądarki i pasek zadań Windows; oczywiście trudno przewidzieć
ile każdy odwiedzający naszą stronę ma „zajętego” miejsca, ale tak powinno być OK – nie powinna
wystąpić konieczność wyświetlania paska przewijania pionowego.
Tworzymy layout strony (na poniższym przykładzie zrobiłem bardzo prosty layout, żeby było dobrze
wszystko widać).
Jeśli ktoś ma Layout z wcześniejszych zajęć, to może go wykorzystać.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Dodajemy wszystkie elementy strony.
Nie ma różnicy, czy będą one na różnych warstwach itp. w efekcie i tak będziemy korzystali z
Przy pomocy narzędzia Slice Tool (nóż?) dzielimy obraz na części.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Zapisujemy plik do sieci Web.
W oknie zapisu możemy zdecydować o formacie i parametrach zapisu poszczególnych fragmentów obrazu.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
W trakcie zapisywania można zerknąć do „Preview” – zobaczymy jak wygląda nasza strona i będzie można
zobaczyć, jak strona wygląda w przeglądarce oraz zobaczyć wygenerowany kod – w postaci tabeli z
poszczególnymi częściami w komórkach tabeli (my zrobimy w DIV).
Po zapisaniu otrzymujemy zbiór plików
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Warto sobie zmienić widok w Explorerze, żeby widzieć rozdzielczość poszczególnych obrazków – pomoże to
nam przy ustalaniu parametrów znaczników DIV.
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Zadanie
Następnie, skorzystamy z kaskadowych arkuszy stylów w celu rozmieszczenia elementów na stronie.
Plik HTML
Ustawienie jest takie (to tylko schemat)
DIV „MenuCD jest po to, żeby tło było takie jak trzeba (czyli kontynuacja gradientu).
DIV „strona”
DIV „naglowek”
DIV „menu”
DIV „OMnie” DIV „Hobby” DIV „Wroclaw” DIV „Kontakt” DIV „MenuCD”
DIV „Tresc” DIV „Reklama”
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Plik CSS (na kolejnej stronie jest to samo - jeśli ktoś chce, to może skopiować, chociaż lepiej zostaje w
głowie, jeśli wpisuje się samodzielnie.
width – szerokość
height – wysokość
background – parametry tła: kolor url(„adres
obrazka”) brak powtarzania
float – jak mają się układać inne elementy
clear – że obok nie może być innych
elementów
overflow – że zawartość DIVa nie może
„wychodzić” poza pudełko
na następnej stronie wklejam tekst - można go
sobie skopiować, ale dobrze by było,
żebyście Państwo wpisali przynajmniej
część - dla praktyki
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
body { }
#tlo
{
}
#strona
{ width: 1004px;
margin: 2cm auto;
} #naglowek
{
width:1004px; height: 80px;
background: green url("images/Naglowek.gif") no-repeat;
} #menu
{
clear: both; }
#StronaGlowna
{ width: 160px;
height: 30px; background: green url("images/StronaGlowna.gif") no-repeat;
float: left;
overflow: hidden; }
#OMnie
{ width: 91px;
height: 30px;
background: green url("images/OMnie.gif") no-repeat; float: left;
overflow: hidden;
}
#Hobby
{
width: 76px;
height: 30px;
background: green url("images/Hobby.gif") no-repeat; float: left;
overflow: hidden;
} #Wroclaw
{
width: 94px; height: 30px;
background: green url("images/Wroclaw.gif") no-repeat;
float: left; overflow: hidden;
}
#Kontakt {
width: 101px;
height: 30px; background: green url("images/Kontakt.gif") no-repeat;
float: left;
overflow: hidden; }
#MenuCD
{ width: 482px;
height: 30px;
background: green url("images/MenuCD.gif") no-repeat; float: left;
overflow: hidden;
} #Tresc
{
width: 824px; height: 491px;
background: green url("images/Tresc.gif") no-repeat;
float: left; overflow: hidden;
} #Reklama
{
width: 180px; height: 491px;
background: green url("images/Reklama.gif") no-repeat;
float: left;
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś overflow: hidden; }
TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś
Zadanie
Proszę stworzyć wszystkie strony (OMnie, Hobby, Wrocław, Kontakt) i napisać coś na nich.
Strony umieścić w katalogu „strony”.
Index.html ma być poza tym katalogiem.
Standardowo robimy to tak, że tworzymy strony o identycznej treści jak index.html i w pudełku ”Tresc”
wpisujemy zawartość strony.
Proszę zwrócić uwagę, że trzeba podać prawidłowe linki do poszczególnych plików html i pliku CSS.
To nie jest najwygodniejszy sposób tworzenia stron, ponieważ każda strona musi zawierać całą zawartość i
tylko w części
jest treść strony.
To nie jest bardzo "fachowy" sposób tworzenia stron, ale jest prosty i można dobrze się przy tym uczyć zasad
budowania stron opartych na HTML i CSS.
Top Related