Realizarea unui siteData publicarii: Iulie 2007
HTML
Iul
2007
Realizarea unui siteDupa ce am parcurs lectiile de HTML si CSS vom realiza impreuna un mic site, iar ca editor al codului sursa folosim Notepad.Pentru pozitionarea elementelor distinctive ale paginii pot fi folosite tabele sau CSS. In exemplul nostru vom folosi tabelele.
Layout-ul paginii va fi:
Vom crea un tabel cu latime 750 px, avand 3 randuri, iar pe fiecare rand cate 2 celule. Pe randul 1 si 3 unim cele 2 celule.
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2">Header</td></tr> <tr><td width="150">Meniu</td><td width="600">Continut</td></tr> <tr><td colspan="2">Footer</td></tr> </table> Inaltimea fiecarui rand va fi stabilita de elementul cel mai inalt (imagine sau text), sau prin introducerea atributului height in fiecare element td. Stabilim pentru randul 1 si 3 inaltime 50 px, iar pentru randul 2 inaltime 200 px.
Folosind CSS vom formata cele 4 celule in mod independent inserand in fiecare element td atributul class cu valoarea header, meniu, continut si footer.
<link rel="stylesheet" type="text/css" href="site.css">
In fisierul CSS extern stabilim pentru fiecare celula in parte culoarea si marimea fontului, culoarea fundalului, pozitionarea pe verticala sau orizontala a continutului, etc. Puteti vedea fisierele finale html si css pentru pagina creata.
Voua va revine ultima etapa, adaugarea informatiei in fiecare celula. Pentru dezvoltarea in continuare a paginii puteti introduce in fiecare celula (in locul textului corespunzator: Header, Meniu, Continut, Footer) alte etichete html (liste, tabele, formulare) care pozitioneze informatia dorita. Pentru a pastra layout-ul prezentat, celelalte pagini ale site-ului le obtineti astfel:
Metoda 1: copiind fisierul index.html, apoi paste si il redenumiti, urmand sa modificati continutul functie de tema noii pagini. Metoda 2: utilizarea cadrelor, prin care fiecare zona o transformati in cadru, in acest fel de la o pagina la alta doar cadrul continut se schimba. Metoda 3: dupa ce este definitivat layout-ul paginii index.html redenumiti fisierul in index.php
Din codul final al paginii index.php decupati (cut) codul pentru zona Header si inlocuiti cu:
<?php
include header.php; ?> apoi faceti paste intr-un nou fisier denumit header.php. Repetati operatia pentru zonele Meniu si Footer. La final vom avea 4 fisiere: index.php, header.php, meniu.php si footer.php Daca doriti inca o pagina (de exemplu pagina Contact) copiati fisierul index.php si redenumiti-l contact.php apoi particularizati-l modificand continutul etichetei title si continutul din zona Continut. Daca veti dori sa modificati de exemplu meniul veti modifica fisierul meniu.php iar efectul se va vedea in toate paginile site-ului. Sper ca prin acest exemplu practic, realizarea unui site sa nu mai para ceva asa de complicat. |
Copyright © 2005-2023
Termeni si conditii
| |
Comentarii:
Andrei 06-06-2010
Misto site ai facut o treaba buna.Ajuta foarte mult informatiile tale.Si asa nu avea ce ne dea profa la TIC sa facem.
Monica 15-09-2010
Buna ziua, Stiu ca sunt incepatoare in html,dar nu am putut sa-mi raspund la o intrebare.Cum trebuie sa-mi organizez structura sitelui, in folderul destinat acestuia.Continutul paginilor trebuie sa fie in fisiere separate de cele indexate?
Autor 16-09-2010
"Prima" pagina este fisierul index.html , celelalte pagini sunt in fisiere separate (de exemplu: produse.html, contact.html)
Mircea 06-03-2013
am crezut ca e ceva mai greu cu site-urile astea.nu-i greu.mircea
Robertino 06-04-2013
Nu stiu cum pot utiliza php pentru a refolosi partile comune din pagina mea. Sunt incepator in studiul webdesignului. Robertino
Autor 06-04-2013
Ultima parte a articolului raspunde exact la intrebarea ta.
Mariana 17-04-2013
Acum am inteles cum sta treaba cu fisiere externe php in care sunt zonele comune ale layoutului. Am folosit si eu la proiectul de la cursul de info. Profu m-a laudat pentru ca am studiat suplimentar. Merci
Elena 18-04-2013
Va multumesc pentru acest exemplu detaliat. M-a ajutat sa-mi fac proiectul la info. Toata grupa ne-am inspirat de aici. Va multumeste grupa 8134.
|