XI.4.a. Rozumiesz i potrafisz modyfikować kod HTML generujący

Transkrypt

XI.4.a. Rozumiesz i potrafisz modyfikować kod HTML
generujący tabele i ramki
Wykonanie tabeli w języku HTML jest bardzo proste. Wystarczy pamiętać, Ŝe całą tabelę
ograniczają znaczniki <table> i </table>, wiersz znaczniki <tr> i </tr>, a komórki w wierszu
– znaczniki <td> i </td>.
Bardzo przydatne jest opanowanie niektórych atrybutów, które moŜesz umieszczać
w znaczniku <table>. Pierwszy, border, jest związany ze sposobem obramowania, kolejny –
cellspacing – pozwala na regulowanie odstępów między komórkami. Atrybut cellpadding
określa odległość zawartości komórki od jej obramowania, atrybutem bordercolor ustawisz
kolor ramki, a background kolor tła. Bardzo istotny jest atrybut width, który definiuje
szerokość całej tabeli, jeśli wykorzystasz go jako atrybut znacznika <table>, lub szerokość
komórki, jeśli wykorzystasz go jako atrybut znacznika wiersza <td>. Co ciekawe,
w przypadku komórek moŜesz ich rozmiar określić w procentach w stosunku do szerokości
tabeli, co zapewni efektywne rozmieszczenie elementów tabeli niezaleŜnie od rozdzielczości.
Atrybutem align moŜna pozycjonować tekst w komórce w obrębie jej szerokości, natomiast
atrybut valign umoŜliwia pozycjonowanie w obrębie wysokości (rys. XI.1p).
<html>
<table border cellspacing=0 cellpadding=6
bordercolor=blue width=250 height=120>
<tr>
<td width="25%" valign=top align=left>A1</td>
<td width="25%" valign=middle align=right>A2</td>
<td width="50%" valign=bottom align=center>A3</td>
</tr>
<tr>
<td width="25%" valign=top align=right>B1</td>
<td width="25%" valign=bottom align=left>B2</td>
<td width="50%" valign=middle align=center>B3</td>
</tr>
</table>
</html>
poziom wymagań
cykl kształcenia
N
2
3
4
D
R
P
Zapamiętaj!
Jeśli chcesz ustalić róŜną
liczbę komórek tabeli
składającej się z kilku
wierszy, zastosuj
w wybranej komórce
atrybut colspan. Podobnie
moŜesz łączyć komórki
w kolumnach, jeśli
zastosujesz w komórce
atrybut rowspan.
Rys. XI.1p
Warto wiedzieć
Znaczniki tworzące tabele pozwalają na ustawienie znacznie większej liczby atrybutów.
MoŜna uzyskiwać naprawdę ciekawe efekty, a nawet pozycjonować układ tabeli względem
tekstu pisanego poza tabelą.
Ramki umoŜliwiają podział strony na dowolne części, przy czym kaŜda z nich jest
skojarzona z innym plikiem. Do tworzenia ramki uŜywa się znacznika <frameset>.
Podstawowymi atrybutami są rows i cols, definiujące liczbę i szerokości ramek w poziomie
i pionie.
Rys. XI.2p
Oczywiście, wartość tych atrybutów musi być podana w pikselach lub procentach. Istnieje
moŜliwość maskowania wartości za pomocą znaku „*” – wówczas szerokość ustala komputer.
W przykładzie na rysunku XI.2p mamy dokument podzielony na trzy ramki – dwa wiersze,
Technologia informacyjna nie tylko dla uczniów
Wydawnictwo Szkolne PWN
1
E. Krawczyński, Z. Talaga, M. Wilk
przy czym drugi wiersz jest podzielony na dwie kolumny. Spróbuj dokonać analizy treści
plików, które tworzą prezentowaną ramkę, a później zobacz, jak moŜesz rozbudować ramkę,
stosując kilka podstawowych atrybutów.
Oto wersje źródłowe plików:
ram1.htm
<html>
ramka.htm
<html>
<frameset rows="40%,*">
<frame src="ram1.htm" >
<frameset cols="30%,*">
</html>
<p align="center"> To jest plik
<b>ram1.htm</b></p>
</html>
ram2.htm
<html>
<b>ram2.htm</b></p>
</html>
ram3.htm
<html>
<b>ram3.htm</b></p>
</html>
Teraz kilka pozostałych istotnych atrybutów: frameborder pozwala na wyświetlanie lub
ukrywanie obramowania, framespacing określa odległość tekstu od obramowania, atrybutem
bordercolor moŜesz ustalić kolor obramowania, a atrybutem border jego grubość. Bardzo
waŜne znaczenie ma bezparametrowy atrybut noresize zabraniający skalowania myszą, oraz
atrybut scrolling pozwalający lub zabraniający przewijania ekranu.
Warto wiedzieć
Jeśli klikniesz prawym przyciskiem myszy neutralne miejsce serwisu utworzonego z ramek,
moŜesz odczytać plik skojarzony z daną ramką. Jeśli wybierzesz z głównego menu opcje
Widok, Źródło, zobaczysz plik generujący całość dokumentu.
Zapamiętaj!
Nieumiejętne stosowanie
ramek moŜe być przyczyną
kłopotów z odczytaniem
serwisu. Jeśli ustawisz na
przykład atrybut scrolling
na wartość NO i wpiszesz
więcej tekstu, niŜ zmieści
się na ekranie, na pewno
zdenerwujesz klienta
serwisu.
Jedną z waŜniejszych przyczyn stosowania ramek jest moŜliwość przekazywania
sterowania do części dokumentu, która moŜe być skojarzona z róŜnymi plikami. W ten sposób
moŜesz na przykład po lewej stronie dokumentu umieszczać listę menu, która w kaŜdej chwili
będzie łatwo dostępna, a w innym zarezerwowanym obszarze będziesz prezentować efekt
wyboru poszczególnych pozycji menu.
Kluczem do przekazywania sterowania jest moŜliwość nadawania nazw poszczególnym
ramkom i odwoływanie się do nich za pośrednictwem hiperłączy.
Oto przykład sterowania ramkami, w których główną rolę spełnia atrybut target (cel).
Przeanalizuj kod źródłowy pliku index.htm, którego efekt moŜesz zobaczyć na rysunku XI.3p.
ZauwaŜ, Ŝe kaŜda ramka została opatrzona nazwą – ramka 1 i ramka 2, odpowiednio.

<html>
<frameset cols="20%,*">
<frame name="ramka 1" src="1.htm" scrolling="auto" noresize>
<frame name="ramka 2" src="strona1.htm" scrolling="auto" noresize>
</frameset>
</html>
2

<html>
<p><a href="strona1.htm" target="ramka 2">strona 1</a></p>
</html>

<html>
<p align="center">strona 1</p>
</html>
Rys. XI.3p
Kliknięcie odpowiedniego napisu przekaŜe sterowanie do ramki nazwanej ramka 2,
jednak kaŜdy napis jest skojarzony z innym plikiem. Jak zachowa się serwis przy kliknięciu
przycisku strona 2, pokazaliśmy na rysunku XI.4p.
Zapamiętaj!
Atrybut target moŜe
przyjmować cztery
predefiniowane wartości,
z których szczególnie
waŜna jest wartość
„_blank”, pozwalająca na
otwarcie dokumentu
w nowej kopii
przeglądarki.
<html>
<p align="center">strona 2</p>
</html>
Rys. XI.4p
Teraz wiesz, Ŝe jest to prosty mechanizm i na pewno uda ci się dostosować go do swoich
potrzeb.
3
Sprawdź, czy potrafisz
? Wykonaj działające menu w układzie przedstawionym na rysunku XI.5p.
Rys. XI.5p
? Wykonaj to zadanie, zamieniając tekst menu na przyciski graficzne.
4

XI.4.a. Rozumiesz i potrafisz modyfikować kod HTML generujący

Transkrypt

Podobne dokumenty

Najlepsi bębniarze świata w Opolu

Po lekcjach - Szkoła Podstawowa Nr 6 w Legnicy

Niezwykła wystawa w Muzeum Śląska Opolskiego

Zdjęcie znaków z czeskich skrzyżowań

Mistrzostwa Nysy w siatkówce plażowej

Dziś poznamy najpiękniejszą opolankę

Podwójna ramka na zdjęcia czarna

Polacy na paryskim cmentarzu