Jak zrobic : szybko i prosto ladna stronke? - HTML

shoco

Użytkownik
Dołączył
Grudzień 19, 2005
Posty
2
Hmm.. od czego by tu zaczac.. Zaczne od przedstawienia sytułacji.
Ten tekst nie jest dla zupelnych noobow w swiecie htmla juz nie mowie tu o php, tylko dla osob ktore chociaz umieja zrobic najprostrza stronke ktora sprawnie dziala. W tym tutrialku napisze jak dzieki prostemu i jednoczesnie bardzo dobremu programowi (to jest moje zdanie) Namo 2006 prosta, ale stylowa i ladna stronke... no dobra dosc owijania w bawelne
<
... W punktach opisze pokoleji co mamy zrobic i co nam jest potrzebne :

1) pierwsza rzecz to :
Checi
Pomysl
I umiejentnosc szukania w googlach.

1a) Wpisujemy sobie w google : Namo 06 webeditor Free download... zakladam ze po chwili znajdziemy program i klikniemy button download.


2) Ok mamy juz program .. 5 sek instalacja odpalamy.

.......................................TUTAJ ZACZYNA SIE MOJ TUTRIAL............................................


Mam nadzieje ze kazdy zna podstawy angielskiego a jesli tak sobie to ma pecha.. ja mu tylko troche pomoge
smile.gif



Mamy pusta karke przed soba. Musimy teraz zrobic sobie podstawe strony. Klikamy na ikonke na samej gorze ktora jest podpisana CREATE TABLE wysuwa nam sie nadul okienko i zaznaczamy 1 kratke. Robi nam sie na stronie cienki pasek. Klikamy na niego prawym i dajemy : TABLE PROTETIES czy jakos tak... Otwiera nam sie okienko z wymiarami tabeli itp itd. Pierwsza rzecza jaka ustawiamy to wymiary 800x600 (tego chyba nie musze tlumaczyc...)
Nastepnie musimy ustawic aby ta tabela byla nie widzialna czyli :
BORDERS>>THICKNESS>> i tu ustawiamy z 1 na 0. -- jest to grubosc tabeli -- dajemy OK
zaznaczamy nasz nowa tabele i wchodzmy w podglad strony w HTMLu.
mamy zaznaczone takie cos :

<table border="0" width="800" height="600">
<tr>
<td width="773"></td>
</tr>
</table>

I wpisujemy :

<center><table border="0" width="800" height="600">
<tr>
<td width="773"></td>
</tr>
</table></center>

Funkcja Center wysrodkowywuje nam dany obiekt.

Puki co nasz kod HTML powinien wygladac nastepujaco :



<html>

<head>
<title>No title</title>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" width="800" height="600">
<tr>
<td width="773"></td>
</tr>
</table>


</p>
</body>

</html>



Mamy juz podstawe strony. Na tej tabeli bedzie postawiona strona. Teraz dodajemy do wnetrza tabeli 3 kolejne tabele w PIONIE. Czyli znowu klikamy na ikonke z tabela i zaznaczamy 3 kratki w dol. mamy 3 tabele w 1. Powtarzamy operacje z ZMIENIANIEM GRUBOSCI TABELI aby te 3 tabelki byly przezroczyste. Rozciagamy je tak aby 1 tabelka od gory miala 200 pikseli (jak ciagniemy linie w dol to pisze nam na niej na ile pikseli ja rociagamy.) droga 360 a ta 3 ostatnia moze zostac bez zmian... Nazwijmy sobie gorna czesc nowej tabelki obiektem A srodkowa B a dolna C .

W tym momencie kod powinien wygladac tak :

<html>

<head>
<title>No title</title>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" width="800" height="600">
<tr>
<td width="773">
<table border="0" width="794" height="597">
<tr>
<td width="784" height="202"></td>
</tr>
<tr>
<td width="784" height="362"></td>
</tr>
<tr>
<td width="784" height="3"></td>
</tr>
</table>
</td>
</tr>
</table>


</p>
</body>

</html>


Jesli wszystko sie wam zgadza to jedziemy dalej...
robimy w obiekcie B (lol) 3 tabele ale poziome !. robimy stla czynnosc czyli robimy akcje aby byly przezroczyste. Dzielimy lewa i prawa czesc na 150 pikseli. Mamy juz cala podstawe szablonu. Teraz pozostalo powypelniac ja kolorami , wlozyc logo, menu newsy itp
smile.gif
Juz nie chce mi sie opisywac wiec poprostu dam gotowy HTML z menu i newsami zeby kazdy zobaczyl o co chodzi
<
ale wpierw sprawdzcie poprawnosc skryptu do tej pory czyli to wyglada tak :


<html>

<head>
<title>No title</title>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" width="800" height="600">
<tr>
<td width="773">
<table border="0" width="794" height="597">
<tr>
<td width="784" height="202"></td>
</tr>
<tr>
<td width="784" height="362">
<table border="0" width="788">
<tr>
<td width="150"></td>
<td width="474"></td>
<td width="150"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="784" height="3"></td>
</tr>
</table>
</td>
</tr>
</table>


</p>
</body>

</html>


Noo.. a teraz dam troszke bardziej uzupelniony kod...




<html>

<head>
<title>No title</title>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<center><table border="0" width="800" height="600">
<tr>
<td width="773">
<table border="0" width="794" height="597">
<tr>
<td width="784" height="202">LOOOOOOOOOOOOOOOGOOOOOOOOOOOOOOo</td>
</tr>
<tr>
<td width="784" height="362">
<table border="0" width="788" height="373">
<tr>
<td width="150" height="369">
<table border="0" width="150" height="165">
<tr>
<td width="140" height="23">MENU</td>
</tr>
<tr>
<td width="140" height="136">linki itp</td>
</tr>
</table>
<table border="0" width="150" height="229">
<tr>
<td width="140" height="23">MENU</td>
</tr>
<tr>
<td width="140" height="198"></td>
</tr>
</table>
</td>
<td width="474" height="369">
<table border="0" width="474" height="159">
<tr>
<td width="464">News !</td>
</tr>
<tr>
<td width="464" height="128">Jakis tam text
<
<
</td>
</tr>
</table>
<table border="0" width="474" height="114">
<tr>
<td width="464">News !</td>
</tr>
<tr>
<td width="464" height="83">Jakis tam text
<
<
</td>
</tr>
</table>
<table border="0" width="474" height="123">
<tr>
<td width="464">News !</td>
</tr>
<tr>
<td width="464" height="92">Jakis tam text
<
<
</td>
</tr>
</table>
</td>
<td width="150" height="369">
<table border="0" width="150" height="165">
<tr>
<td width="140" height="23">MENU</td>
</tr>
<tr>
<td width="140" height="136"></td>
</tr>
</table>
<table border="0" width="150" height="229">
<tr>
<td width="140" height="23">MENU</td>
</tr>
<tr>
<td width="140" height="198"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="784" height="3">STOPKA CZY AUTOR I TP</td>
</tr>
</table>
</td>
</tr>
</table></center>


</p>
</body>

</html>



No a teraz juz z kolorkami
smile.gif





<html>

<head>
<title>No title</title>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>

<body bgcolor="#99CC33" text="black" link="blue" vlink="purple" alink="red">
<center><table border="0" width="800" height="545" bgcolor="#0066FF">
<tr>
<td width="773" height="541">
<table border="0" width="794" height="556">
<tr>
<td width="784" height="202">LOOOOOOOOOOOOOOOGOOOOOOOOOOOOOOo</td>
</tr>
<tr>
<td width="784" height="321">
<table border="0" width="788" height="345">
<tr>
<td width="150" height="341">
<table border="0" width="150" height="177">
<tr>
<td width="140" height="23" bgcolor="#00FF33">MENU</td>
</tr>
<tr>
<td width="140" height="146" bgcolor="#003399">linki itp</td>
</tr>
</table>
<table border="0" width="150" height="165">
<tr>
<td width="140" height="23" bgcolor="#00FF33">MENU</td>
</tr>
<tr>
<td width="140" height="136" bgcolor="#003399">linki itp</td>
</tr>
</table>
</td>
<td width="474" height="341">
<table border="0" width="474" height="187">
<tr>
<td width="464" bgcolor="#006699">News !</td>
</tr>
<tr>
<td width="464" height="156" bgcolor="#33CC66">Jakis tam text
<
<
</td>
</tr>
</table>
<table border="0" width="474" height="159">
<tr>
<td width="464" bgcolor="#006699">News !</td>
</tr>
<tr>
<td width="464" height="128" bgcolor="#33CC66">Jakis tam text
<
<
</td>
</tr>
</table>
</td>
<td width="150" height="341">
<table border="0" width="150" height="179">
<tr>
<td width="140" height="23" bgcolor="#00FF33">MENU</td>
</tr>
<tr>
<td width="140" height="148" bgcolor="#003399">linki itp</td>
</tr>
</table>
<table border="0" width="150" height="165">
<tr>
<td width="140" height="23" bgcolor="#00FF33">MENU</td>
</tr>
<tr>
<td width="140" height="136" bgcolor="#003399">linki itp</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="784" height="3">STOPKA CZY AUTOR I TP</td>
</tr>
</table>
</td>
</tr>
</table></center>


</p>
</body>

</html>



Acha i na koniec - nie zapomnijcie zmienic funkcj title ! (wyswietla nam na pasku np. ie nazwe strony czy cus
<
czyli chodzi tu o to : <title>No title</title> w miejsce no title dajcie nazwe strony
smile.gif
)

Soryy ze nie opisalem wszystkiego ale to jeszcze zajelo by mi z dluzsza chfile a juz jest puzino a ja nie nawidze chodzic puznio znac sorowka all
smile.gif


see u :3majsie:
 

shoco

Użytkownik
Dołączył
Grudzień 19, 2005
Posty
2
a po co to napisalem ?
<
tak O ?
smile.gif
oczywiescie ze po to zeby komus sie to przydalo..
<
 
Do góry Bottom