Poprzednie zajęcia skończyliśmy ucząc sie tworzenia...

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

{


}

a:hover

{


}

a:active

{


}

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


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.






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)

http://webmade.org/kursy-online/pozycjonowanie-absolutne-relatywne-kurs-css.php

http://www.kurshtml.boo.pl/css/pozycjonowanie.html


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.


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.


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:


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.


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.

http://pl.html.net/tutorials/css/lesson9.asp

http://pl.html.net/

http://www.kurshtml.boo.pl/index.html

http://webmaster.helion.pl/index.php/podrecznik-css

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>

<div></div>

<div></div>

<div></div>

<div></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


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.


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ć.


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.


Zapisujemy plik do sieci Web.

W oknie zapisu możemy zdecydować o formacie i parametrach zapisu poszczególnych fragmentów obrazu.


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


Warto sobie zmienić widok w Explorerze, żeby widzieć rozdzielczość poszczególnych obrazków – pomoże to

nam przy ustalaniu parametrów znaczników DIV.


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”


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


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

{


background: green url("images/Tresc.gif") no-repeat;

float: left; overflow: hidden;

} #Reklama

{


background: green url("images/Reklama.gif") no-repeat;

float: left;

TMwOSiPD, WWW – zajęcia 2, Aleksander Krzyś overflow: hidden; }


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.

Poprzednie zajęcia skończyliśmy ucząc sie tworzenia...

Documents

Transcript of Poprzednie zajęcia skończyliśmy ucząc sie tworzenia...