<meta name="author" content="Jakub & Jan Filipowscy">
<meta name="description" content="Serwis webmasterow. Znajdziesz tu kilka kursow popularnych internetowych jezykow programowania takich jak: HTML, CSS, WML, SGML, XML, PHP, Perl i Java. Zamiescilismy tu rowniez wiele skryptow JavaScript, PHP i CGI. Przeczytac mozna kilka artykulow i sciagnac kilka szablonow. Dla poczatkujacych jest dzial BeginnerZone. ">
<P ALIGN="justify">Chcia│bym siΩ zaj▒µ tym tematem od strony tworzenia "szkieletu" witryny. Ramki s▒ stworzone specjalnie do tego celu. Jednak coraz czΩ╢ciej w│a╢nie tabelki s▒ u┐ywane przez webmaster≤w do tworzenia witryn. Przyk│adem strony z zastosowaniem ramek jest <A HREF="http://web-area.org/index.php?id=197">Projekt Syf</A>, a strony z zastosowaniem tabelek <A HREF="http://www.vacuum.prv.pl">Vacuum</A>. Poni┐ej przedstawiΩ zalety i wady obu rozwi▒za±.<BR><BR>
Ramki maj▒ ten du┐y plus, ┐e s▒ o wiele szybciej wczytywane z serwera. Strony najczΩ╢ciej sk│adaj▒ siΩ z trzech ramek, z kt≤rych tylko jedna zmienia swoj▒ zawarto╢µ, podczas gdy dwie pozosta│e s▒ niezmienne przez ca│y czas. Gdy w│a╢nie w tych dw≤ch ramkach znajduj▒ siΩ strony o du┐ej pojemno╢ci, to u┐ytkownik oszczΩdza wiele czasu, gdy┐ nie musi od nowa wczytywaµ tej samej strony. Ramki s▒ zalecane g│≤wnie dla pocz▒tkuj▒cych webmaster≤w, gdy┐ s▒ │atwiejsze w tworzeniu i nie wymagaj▒ wielkiej wiedzy na temat HTML'a. Minusem ramek jest to, ┐e poprawnie s▒ interpretowane tylko w Internet Explorerze, nowych wersjach Netscape Navigatora i paru innych, mniej znacz▒cych przegl▒darkach. Jednak w Polsce ponad 90 procent internaut≤w u┐ywa w│a╢nie Internet Explorera, gdy┐ jest on dostarczany na p│ycie z Windowsem i nie trzeba za niego dodatkowo p│aciµ, w przeciwie±stwie do Netscape'a.<BR><BR>
Tabelki s▒ wczytywane wolniej, poniewa┐ to, co w ramkach znajdowa│o siΩ na trzech stronach, tu jest na jednej. Po klikniΩciu na linka ca│a strona wczytuje siΩ od nowa. Jednak stosuj▒c tabelki, webmaster ma mo┐liwo╢µ bardziej siΩ wykazaµ. Tabelki daj▒ wiΩcej pola do popisu, mo┐na dziΩki nim zastosowaµ wiele ciekawych rozwi▒za± szaty graficznej. Wymagaj▒ wiΩcej umiejΩtno╢ci i wiΩcej siΩ trzeba przy nich napracowaµ, ale daj▒ lepszy efekt ko±cowy. Oczywi╢cie, je┐eli kto╢ jest dobrym webmasterem, to potrafi stworzyµ witrynΩ u┐ywaj▒c ramek tak, aby wygl▒da│a jak ta zrobiona tabelkami. Jednak to jest dzia│ HTML Beginner i nie zajmujemy siΩ do╢wiadczonymi webmasterami. </P>
<H3>Ramki</H3>
<P ALIGN="justify">W zasadzie aby tworzyµ ramki, niewiele trzeba siΩ uczyµ. Postaram siΩ tutaj jak naj│atwiej przyswoiµ wiedzΩ na ten temat.<BR><BR>
Strona z ramkami ma trochΩ inny uk│ad ni┐ strona bez ramek. W pliku index.html nie wstawiamy sekcji BODY (patrz: <A HREF="index.php@url=beginner_2Fh2&menu=h">Pocz▒tki HTML'a</A>), ale zamiast tego wpisujemy inne znaczniki. Podam tutaj przyk│ad zawieraj▒cy trzy ramki, kt≤rych uk│ad przedstawiony jest poni┐ej.</P>
<P ALIGN="justify">Ramka 1 jest ramk▒ niezmienn▒, wczytywany jest do niej plik tytul.html, kt≤ry zawiera logo oraz tytu│ strony. Ramka 2 r≤wnie┐ jest niezmienna, a wczytywany jest do niej plik spis.html, zawieraj▒cy "spis tre╢ci", czyli linki do poszczeg≤lnych stron. Ramka 3 zmienia swoj▒ zawarto╢µ za pomoc▒ ramki 2. KlikniΩcie linka z ramki 2 powoduje wczytanie innej strony do ramki 3. Po wej╢ciu na stronΩ, w ramkΩ 3 wczytany zostaje plik glowna.html. Plik ten zawiera to, co na stronie bez ramek plik index.html.<BR><BR>
Znacznik FRAMESET rozpoczyna ci▒g znacznik≤w odnosz▒cych siΩ do ramek. BORDER jest nam ju┐ znany, okre╢la grubo╢µ krawΩdzi miΩdzy ramkami. COLS (kolumny) i ROWS (wiersze) okre╢laj▒ wielko╢µ tych kom≤rek. Np. ROWS=250,* oznacza, ┐e pierwszy wiersz (u nas ramka 1) bΩdzie mia│ wysoko╢µ 140 pikseli, a drugi (ramka 2 i 3) dostosuje siΩ do wielko╢ci ekranu (bΩdzie tak d│ugi, a┐ sko±czy siΩ monitor). Analogicznie COLS=250,* oznacza, ┐e ramka 2 bΩdzie mia│a szeroko╢µ 250 px, a ramka 3 dostosuje siΩ do wielko╢ci ekranu. Z tego wynika, ┐e ramki niezmienne (1 i 2) maj▒ sta│e rozmiary, natomiast ramka 3 z│o┐ona jest z dw≤ch gwiazdek (*), czyli jej wysoko╢µ i szeroko╢µ bΩd▒ dostosowywa│y siΩ do ekranu. Wielko╢ciami mog▒ byµ r≤wnie┐ procenty. Znacznik FRAME okre╢la konkretn▒ ramkΩ. Ramka 1 znajduje siΩ pod pierwszym znacznikiem FRAME. Jest to pierwszy wiersz. Jednak drugi wiersz sk│ada siΩ z dw≤ch ramek, wiΩc ponownie musimy zastosowaµ komendΩ FRAMESET, tym razem tylko dla ramki 2 i 3. Drugi znacznik FRAMESET zawiera siΩ w pierwszym. NAME jest to nazwa ramki, kt≤ra jest ustalana dowolnie przez webmastera. Nale┐y pamiΩtaµ o tym znaczniku, gdy┐ przyda siΩ on p≤╝niej, przy tworzeniu link≤w. Znacznik SRC ustala ╝r≤d│o ramki, czyli plik, jaki ma byµ wczytany po wej╢ciu na stronΩ. Znacznik SCROLLING oznacza suwaki (scrollery). Warto╢µ "no" oznacza brak scroller≤w, a "yes" pozwala je u┐ywaµ, gdy istnieje taka potrzeba. NORESIZE znaczy, ┐e dana ramka nie mo┐e zmieniaµ swojej wielko╢ci, czyli u┐ytkownik nie mo┐e sam jej rozszerzyµ ani zwΩ┐yµ. Istniej▒ jeszcze parametry BORDERCOLOR, kt≤ry pozwala ustaliµ kolor krawΩdzi ramek, oraz MARGINHEIGHT (margines g≤rny i dolny konkretnej ramki) oraz MARGINWIDTH (lewy i prawy).</P>
<H3>Linki w ramkach</H3>
<P ALIGN="justify">Je┐eli zapozna│e╢ siΩ z artyku│em "Pocz▒tki HTML'a", to nie bΩdziesz mia│ problem≤w z linkami w ramkach. S▒ to zwyk│e linki, ale w znaczniku nale┐y dodaµ jedn▒ komendΩ - TARGET. TARGET okre╢la nazwΩ strony, do kt≤rej link ma byµ wczytany. Je╢li w naszej ramce 2 znajduje siΩ link do strony brudas.html i chcemy tΩ stronΩ wczytaµ do ramki 3, nale┐y wpisaµ nastΩpuj▒c▒ komendΩ:<BR><BR>
PamiΩtajmy, ┐e ramkΩ z plikiem glowna.html nazwali╢my ramka3 i dlatego teraz odnosimy siΩ do tej nazwy. Gdyby╢my nie wpisali komendy TARGET, to strona brudas.html wczyta│aby siΩ do ramki 2.</P>
<H3>Tabelki</H3>
<P ALIGN="justify">Jak ju┐ napisa│em, tabelki nie s▒ tak proste jak ramki. W miejsce trzech ramek wstawia siΩ jedn▒ stronΩ z tabelk▒. I tak plik index.html, jak i inne pliki danej witryny, zawieraj▒ tΩ sam▒ tabelkΩ, ale z r≤┐n▒ zawarto╢ci▒.</P>
<P ALIGN="justify">Nale┐y zwr≤ciµ uwagΩ na fakt, i┐ na tych rysunkach krawΩdzie nie s▒ krawΩdziami ramek, jak to by│o w poprzednim rysunku, ale krawΩdziami tabelki.<BR><BR>
Strona zbudowana z tabelek ma taki sam uk│ad jak zwyk│a strona, to znaczy jest sekcja HEAD i BODY, a w sekcji BODY wszystko zawiera siΩ miΩdzy dwoma znacznikami: TABLE i /TABLE.<BR><BR>
<HTML><BR><BR>
<HEAD><BR>
</HEAD><BR><BR>
<BODY><BR>
<TABLE><BR>
<TR><BR>
<TD> </TD><BR>
</TR><BR>
<TR><BR>
<TD> </TD><BR>
</TR><BR>
</TABLE><BR>
</BODY><BR><BR>
<HTML><BR><BR>
Znacznik TR oznacza wiersz tabelki, a zawiera w sobie kolumny - TD. Oczywi╢cie tabelka nie musi s│u┐yµ jedynie do stworzenia szkieletu strony, mo┐e byµ r≤wnie┐ u┐yta jako zwyk│a tabelka, a jej konstrukcja wygl▒daµ bΩdzie tak samo. Strona stworzona za pomoc▒ tabelek mo┐e wygl▒daµ identycznie, jak za pomoc▒ ramek. Jednak mo┐e wygl▒daµ o wiele lepiej. Ale do tego potrzebne s▒ wysokie umiejΩtno╢ci.<BR><BR>
W znaczniku TABLE mo┐emy wstawiµ nastΩpuj▒ce komendy:<BR>
- BORDER oznacza obramowanie tabeli, np. BORDER=3. Wpisanie komendy tej bez warto╢ci powoduje siΩ wy╢wietlenie tabelki o domy╢lnej grubo╢ci krawΩdzi, r≤wnej 1<BR>
- BORDERCOLOR oznacza kolor obramowania tabeli, np. BORDERCOLOR="red"<BR>
- ALIGN to wyr≤wnanie tabeli, a warto╢ciami mo┐e byµ "right" - do prawej, "left" - do lewej, "center" - do ╢rodka<BR>
- WIDTH to szeroko╢µ tabeli. Mo┐e to byµ warto╢µ w pikselach, jak i w procentach, np. WIDTH=400 lub WIDTH=80%<BR>
- HEIGHT to wysoko╢µ tabeli. Stosuje siΩ to podobnie jak WIDTH<BR>
- BGCOLOR to kolor t│a tabeli, np. BGCOLOR="yellow". Zamiast tego mo┐emy zastosowaµ plik: BACKGROUND="malpa.jpg"<BR>
- CELLSPACING oznacza obramowanie kom≤rek, a praktycznie s▒ to odleg│o╢ci pomiΩdzy kom≤rkami, np. CELLSPACING=8:<BR><BR>
W znaczniku TD mo┐emy wstawiµ komendy takie same jak odnosz▒ce siΩ do TABLE, ale bΩd▒ one odnosi│y siΩ wy│▒cznie do danej kom≤rki. Ponadto mo┐emy dodaµ VALIGN - pionowe wyr≤wnanie zawarto╢ci kom≤rki, "top" - do g≤ry, "bottom" - do do│u, "middle" - do ╢rodka, np. VALIGN="top"<BR><BR>
Aby nasza tabelka mia│a uk│ad jak na rysunku 2 i 3, musimy zastosowaµ komendΩ COLSPAN, kt≤ra pozwala rozszerzyµ jeden wiersz tak, aby pokrywa│ powierzchniΩ wiΩkszej liczby wierszy. Analogicznie do kolumn stosujemy komendΩ ROWSPAN.<BR>
<td width="770" valign="top" colspan="3" align="right"><br><br><span class="m">All rights reserved by <a href="mailto:web-area@web-area.org">J&J Filipowscy Design & Code</a></td>
