Web Design pentru incepatori
Despre structurarea continutului si include-uri
Majoritatea site-urilor pe care le vizitam zi de zi au o structura bine definita, care ofera utilizatorului (chiar si celui care se afla pentru prima data acolo) o modalitate simpla si intuitiva de a naviga prin ceea ce uneori este o veritabila jungla de informatie.Cel mai important element al acestei structuri este bara de navigare--de fapt, este atat de important incat uneori exista chiar doua: o bara orizontala de navigare, plasata in partea de sus a paginii, si una verticala, plasata de obicei in stanga paginii. In bara de navigare, web designerul trebuie sa structureze continutul astfel incat orice vizitator sa se descurce pe site la fel de usor ca in propria casa.
In afara de bara de navigare, exista in mod obisnuit si un header care afiseaza numele site-ului cu litere mari si colorate in partea de sus a paginii, si un footer, mai modest in aspect si care contine detalii de copyright si contact, in partea de jos.
Toate aceste elemente constituie partea fixa a site-ului, interfata acestuia cu utilizatorul. Orice pagina de pe site trebuie sa le contina, nu doar pagina principala. Am comparat mai sus un site web cu o casa, dar analogia nu e tocmai potrivita. Un site web ar trebui sa fie mai degraba ca o casa a viitorului, unde poti sa te teleportezi dintr-o camera in orice alta camera, in loc sa treci de fiecare data prin hol. Imaginati-va ce ar insemna sa sa folositi mereu butonul Back pentru a ajunge inapoi la pagina principala pentru ca doar de acolo aveti acces la alte sectiuni ale site-ului.
Dar oricine a petrecut mai mult de o zi navigand pe Internet a avut ocazia sa observe singur aceste lucruri. Ceea ce poate unii dintre voi nu s-au intrebat pana acum este: Si asta cum se face?
Cineva care creeaza pentru prima data un site poate cadea in capcana atat de indragitei combinatii de taste CRTL-C, CRTL-V. Da, ati ghicit--omniprezentul Copy-Paste. De ce sa nu scriu codul HTML pentru pagina principala, s-ar gandi un web designer incepator, si apoi sa-l refolosesc, modificand doar partea de continut efectiv, lasand restul neschimbat? In aparenta, totul va merge bine... pana cand web designer-ul nostru isi va da seama ca a uitat sa adauge un nou link in sectiunea de navigare, ca a scris gresit numele site-ului in header sau ca trebuie sa modifice adresa de contact. Moment in care, pus in fata a cateva zeci de pagini care necesita acum modificari, va fi probabil foarte tentat sa arunce tastatura pe fereastra.
Solutia pentru un continut fix, usor de modificat, care se repeta pe toate paginile site-ului o reprezinta include-urile. Dupa cum sugereaza si numele, include-urile sunt portiuni de pagina (fisiere externe) care pot fi incluse in alte pagini web. Deoarece HTML-ul nu ofera facilitatea de a include direct alte fisiere HTML, va fi nevoie sa apelati la un limbaj de programare sau sa folositi un program de management al continutului (Content Management Tool).
Include-uri folosind PHP
Pasi
1. Salveaza codul HTML pentru partile fixe ale site-ului tau in fisiere diferite: navigare.html, header.html, footer.html etc. Alternativ, poti salva fisierele cu extensia php, in loc de html.2. In fiecare pagina HTML in care vrei sa incluzi fisierele de mai sus, scrie urmatoarele linii de cod:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>Avantaje
- Simplitate
Dezavantaje
- Scriptul se executa pe server (serverul trebuie sa suporte PHP)
Include-uri folosind ASP
Pasi
1. Salveaza codul HTML pentru partile fixe ale site-ului tau in fisiere diferite: navigare.html, header.html, footer.html etc. Alternativ, poti salva fisierele cu extensia asp, in loc de html.2. In fiecare pagina HTML in care vrei sa incluzi fisierele de mai sus, scrie urmatoarea linie de cod:
<!--#include file="path to file/include-file.html"-->Avantaje
- Simplitate
Dezavantaje
- Scriptul se executa pe server (serverul trebuie sa suporte ASP)
Include-uri folosind JavaScript
Pasi
1. Salveaza codul HTML pentru partile fixe ale site-ului tau in fisiere diferite, cu extensie js: navigare.js, header.js, footer.js.2. Ia fiecare linie din fisier si da-o ca parametru functiei de afisare:
document.print("<p>o linie din fisierul HTML</p>");Atentie, daca apare simbolul ", ca de exemplu in <a href="index.html">Home</a>, acesta trebuie precedat de \:
document.print("<a href=\"index.html\">Home</a>");3. In fiecare pagina HTML in care vrei sa incluzi fisierele de mai sus, scrie urmatoarea linie de cod:
<script type="text/javascript" src="path to file/include-file.js"> </script>Avantaje
- Scriptul este executat de browser
Dezavantaje
- Cod mai complicat de scris
Alte variante pentru include-uri
Cele trei metode prezentate mai sus nu sunt singurele care pot fi folosite pentru a include portiuni fixe in pagini web. Exista si alte metode, care folosesc:- SSI (Server Side Includes)
- CGI
- Flash
- frame-uri*
Niciun comentariu:
Trimiteți un comentariu