 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html Paginile web - aranjarea in pagina - folosirea spatiilor goale |
Paginile web - aranjarea in pagina - folosirea spatiilor goale
Machetarea paginilor web
Lectia nr. 1 - Introducere
Prin machetarea unei pagini web se intelege modul cum sunt aranjate elementele constitutive ale unei pagini : continut, grafica, legaturi, sistem de navigare, elemente multimedia, etc. In cadrul aceluiasi proces de machetare se va analiza structura paginii. Pentru ca toate informatiile sa fie prezentate intr-un mod atractiv si original , o pagina web poate sa fie simpla sau impartita in :
cadre
tabele simple
tabele multiple sau imbricate
o combinatie a acestor elemente
Felul cum vor fi aranjate elementele componente intr-o pagina web depinde numai de imaginatia si bunul gust al fiecaruia. Cautati sa faceti o buna impresie cu prima pagina. Aceasta
trebuie sa fie deosebit de atractiva si interesanta si sa arate in mod clar ce contine restul sitului.
DE RETINUT:
Dispuneti de aproximativ 15 secunde pentru a capta atentia cititorilor. In general, vizitatorii nu vor sa fie bombardati numai cu oferte de vanzare ale unor produse sau servicii. Incercati sa le oferiti cat mai multe informatii si articole folositoare. Puteti sa le oferiti chiar si cadouri gratuite.
Cand incepeti operatiunea de machetare a sitului, trebuie sa luati in calcul urmatoarele elemente:
stilul pe care-l veti imprima paginilor dvs. Elementele componente ale unei pagini web
continut
grafica
- imagini GIF&JPEG
- fundal
- animatii
- harti grafice
- logo si icon-uri
legaturi
sistem de navigare
elemente multimedia
Modul de impartire in pagina
cadre ( frames )
tabele
1. Stil
Asa cum se poate usor observa, ziarele si revistele acorda o mare importanta stilului in care apar . Acesta trebuie sa fie unitar si usor de recunoscut, in comparatie cu alte publicatii similare. La fel trebuie sa fie realizat si un sit web. Vizitatorii trebuie sa recunoasca fara dificultate un anumit stil, o anumita tusa pe care trebuie s-o imprimati paginilor web. Ceea ce inseamna ca va trebui sa gasiti o nota deosebita, un aranjament ingenios pentru aceste pagini. Ele trebuie sa se diferentieze net si chiar sa iasa in evidenta, in multimea siturilor web. Cu toate acestea, va trebui sa pastrati un stil unitar. Folosirea unui design unitar mai are si un alt avantaj
major: atunci cand vreti sa adaugati o noua pagina, formatul general il aveti deja si nu trebuie decat sa adaugati continutul . In acest caz , nu va trebui decat sa urmariti ca machetarea paginii sa se inscrie firesc in modul de prezentare general .
Obtinerea unui design unitar se poate realiza prin:
modul de aranjare in pagina
folosirea spatiilor goale
stilul de scriere
Aranjarea in pagina
Documentele care se citesc online trebuie sa fie concise sii structurate pentru o scanare rapida. Stilul ' piramida inversa ', uzual in jurnalism, se poate adapta si la paginile web. Aceasta inseamna ca informatiile cele mai importante trebuiesc puse in primul paragraf, acolo unde cititorul poate sa le gaseasca cel mai repede. In mod uzual, utilizatorii printeaza orice document mai lung de o pagina, in loc sa-l citeasca online. Pentru a putea fi tiparit in intregime continutul pe o pagina format A4 este indicat sa formatati latimea paginii web la 570 pixeli.
O pagina web poate avea orice lungime dorita. Trebuie sa luati in considerare ca o pagina care se incarca greu poate sa alunge vizitatorii. O importanta deosebita o au titlurile sau anteturile pe care le folositi. Ele trebuie sa fie scurte si la obiect.
Titlul va fi centrat in mijlocul paginii si se va folosi o dimensiune a fontului majorata, dar nu exagerat de mare, pentru a nu avea un aspect tipator. Subtitlurile trebuie sa fie putin mai mari decat restul textului. Nu este gresit daca titlurile si subtitlurile vor avea alta culoare decat cea folosita pentru continut . Bineinteles ca aceasta culoare va trebui sa fie in ton cu fundalul si restul imaginilor folosite. Este recomandat sa alegeti aceeasi schema de aranjare a paginii si acelasi fundal. Pentru a nu se produce confuzii, meniurile si simbolurile folosite pentru navigare trebuie sa fie pozitionate in acelasi loc pe pagina.
Folosirea spatiilor goale
In aceeasi masura, trebuie sa acordati atentie si folosirii spatiilor goale intre paragrafe, intre titlu si text, intre text si imagini, etc. Pagina web nu trebuie sa arate ca un bloc masiv de text. Incercati sa impartiti continutul in bucati mai mici, numite paragrafe. Fiecare paragraf va contine una sau mai multe propozitii si va fi separat de celelalte paragrafe sau de titlu prin spatii goale. In acest mod, textul se poate citi mult mai usor si fara a obosi ochii. De asemenea, prin folosirea judicioasa a spatiilor goale puteti sa atrageti atentia asupra unor articole sau fraze importante.
Spatiile goale se pot adauga printr-o multime de metode:
indentarea propozitiilor
folosirea de celule goale in tabele
aliniamente diferite in tabele sau in afara lor
pauze ( folosind marcajul in HTML sau diferite
combinatii de taste
combinatii ale acestor metode
Stilul de scriere
Atunci cand analizati stilul de scriere pentru pagina web, trebuie sa tineti cont de faptul ca un text pe ecranul monitorului se va citi mai greoi si mai incet ( in medie cu 20% ) decat textul tiparit . Stilul de scriere ( felul fonturilor , dimensiunea , culorile , etc. ) trebuie sa fie similar pentru toate paginile .In acest fel , cititorul se va familiariza mai usor cu paginile pe care le-ati creat . Incercati sa nu folositi o varietate prea mare de fonturi pentru aceeasi pagina Fonturile uzuale sunt ARIAL si TIMES NEW ROMAN . Mai puteti folosi si VERDANA sau COURIER , care dau o nota de modernitate paginilor web. Aceste fonturi sunt acceptate de toate browserele. Puteti sa folositi si fonturi mai ' exotice ' dar in acest caz riscati ca vizitatorii care nu au instalat fontul respectiv sa nu poata vizualiza paginile respective .
NU FOLOSITI TEXT IN CARE SA EXISTE NUMAI LITERE MARI.
ACEST TEXT SE CITESTE MULT MAI GREU SI IN PLUS , CITITORUL
VA AVEA SENZATIA CA ESTE AGRESAT VIZUAL.
De asemenea , nu este recomandabila folosirea textelor care clipesc (blink text) si a textelor care defileaza (scroling marques). Pentru a da o nota deosebita continutului , puteti sa scrieti prima litera a unui paragraf cu un alt font, alta dimensiune si o alta culoare. Bineinteles ca acest lucru va va lua mai mult timp, dar rezultatele vor fi deosebite. Se poate incerca si folosirea unei culori atractive pentru text , dar in acest caz trebuie sa va asigurati ca exista un contrast suficient de mare intre aceasta culoare si culoarea fundalului .In caz contrar , lizibilitatea va fi
mult mai scazuta iar cititorii vor obosi curand si in consecinta vor renunta sa mai navigheze prin paginile sitului .
Exemplu de sit web
Cand am inceput machetarea sitului web https://www.afaceri.net am luat in calcul toate elementele mentionate. Am cautat sa folosesc un stil unitar si aceeasi schema de aranjare pentru toate paginile. Pentru a obtine acest lucru am folosit un sablon. Mai intai am stabilit care sunt elementele care trebuie sa se regaseasca in fiecare pagina. Acestea sunt: logo, cautarea in pagina, lista de discutii, contoarele de trafic, harta grafica. Dupa ce am realizat un sablon (cu ajutorul tabelelor), am inserat aceste elemente. In continuare, folosind acest sablon am realizat foarte usor noi pagini in care am inclus numai continutul propriu-zis. Pentru ca vizitatorii sa nu fie derutati, am pastrat acelasi loc in pagina pentru meniul si simbolurile folosite pentru navigare ( sagetile stanga si dreapta ).
Informatiile cele mai importante le-am pus la inceput iar apoi le-am dezvoltat si am cautat sa le exemplific. Pagina web nu trebuie sa arate ca un bloc masiv de text. De aceea , am impartit continutul in bucati mai mici, numite paragrafe. Fiecare paragraf contine una sau mai multe propozitii si este separat de celelalte paragrafe, sau de titlu, prin spatii goale. In acest mod, textul se poate citi mult mai usor si fara a obosi ochii.
Lectia nr. 1 - Introducere
Prin machetarea unei pagini web se intelege modul cum sunt aranjate elementele constitutive ale unei pagini : continut, grafica, legaturi, sistem de navigare, elemente multimedia, etc. In cadrul aceluiasi proces de machetare se va analiza structura paginii. Pentru ca toate informatiile sa fie prezentate intr-un mod atractiv si original , o pagina web poate sa fie simpla sau impartita in :
cadre
tabele simple
tabele multiple sau imbricate
o combinatie a acestor elemente
Felul cum vor fi aranjate elementele componente intr-o pagina web depinde numai de imaginatia si bunul gust al fiecaruia. Cautati sa faceti o buna impresie cu prima pagina. Aceasta
trebuie sa fie deosebit de atractiva si interesanta si sa arate in mod clar ce contine restul sitului.
DE RETINUT:
Dispuneti de aproximativ 15 secunde pentru a capta atentia cititorilor. In general, vizitatorii nu vor sa fie bombardati numai cu oferte de vanzare ale unor produse sau servicii. Incercati sa le oferiti cat mai multe informatii si articole folositoare. Puteti sa le oferiti chiar si cadouri gratuite.
Cand incepeti operatiunea de machetare a sitului, trebuie sa luati in calcul urmatoarele elemente:
stilul pe care-l veti imprima paginilor dvs. Elementele componente ale unei pagini web
continut
grafica
- imagini GIF&JPEG
- fundal
- animatii
- harti grafice
- logo si icon-uri
legaturi
sistem de navigare
elemente multimedia
Modul de impartire in pagina
cadre ( frames )
tabele
1. Stil
Asa cum se poate usor observa, ziarele si revistele acorda o mare importanta stilului in care apar . Acesta trebuie sa fie unitar si usor de recunoscut, in comparatie cu alte publicatii similare. La fel trebuie sa fie realizat si un sit web. Vizitatorii trebuie sa recunoasca fara dificultate un anumit stil, o anumita tusa pe care trebuie s-o imprimati paginilor web. Ceea ce inseamna ca va trebui sa gasiti o nota deosebita, un aranjament ingenios pentru aceste pagini. Ele trebuie sa se diferentieze net si chiar sa iasa in evidenta, in multimea siturilor web. Cu toate acestea, va trebui sa pastrati un stil unitar. Folosirea unui design unitar mai are si un alt avantaj
major: atunci cand vreti sa adaugati o noua pagina, formatul general il aveti deja si nu trebuie decat sa adaugati continutul . In acest caz , nu va trebui decat sa urmariti ca machetarea paginii sa se inscrie firesc in modul de prezentare general .
Obtinerea unui design unitar se poate realiza prin:
modul de aranjare in pagina
folosirea spatiilor goale
stilul de scriere
Aranjarea in pagina
Documentele care se citesc online trebuie sa fie concise sii structurate pentru o scanare rapida. Stilul ' piramida inversa ', uzual in jurnalism, se poate adapta si la paginile web. Aceasta inseamna ca informatiile cele mai importante trebuiesc puse in primul paragraf, acolo unde cititorul poate sa le gaseasca cel mai repede. In mod uzual, utilizatorii printeaza orice document mai lung de o pagina, in loc sa-l citeasca online. Pentru a putea fi tiparit in intregime continutul pe o pagina format A4 este indicat sa formatati latimea paginii web la 570 pixeli.
O pagina web poate avea orice lungime dorita. Trebuie sa luati in considerare ca o pagina care se incarca greu poate sa alunge vizitatorii. O importanta deosebita o au titlurile sau anteturile pe care le folositi. Ele trebuie sa fie scurte si la obiect.
Titlul va fi centrat in mijlocul paginii si se va folosi o dimensiune a fontului majorata, dar nu exagerat de mare, pentru a nu avea un aspect tipator. Subtitlurile trebuie sa fie putin mai mari decat restul textului. Nu este gresit daca titlurile si subtitlurile vor avea alta culoare decat cea folosita pentru continut . Bineinteles ca aceasta culoare va trebui sa fie in ton cu fundalul si restul imaginilor folosite. Este recomandat sa alegeti aceeasi schema de aranjare a paginii si acelasi fundal. Pentru a nu se produce confuzii, meniurile si simbolurile folosite pentru navigare trebuie sa fie pozitionate in acelasi loc pe pagina.
Folosirea spatiilor goale
In aceeasi masura, trebuie sa acordati atentie si folosirii spatiilor goale intre paragrafe, intre titlu si text, intre text si imagini, etc. Pagina web nu trebuie sa arate ca un bloc masiv de text. Incercati sa impartiti continutul in bucati mai mici, numite paragrafe. Fiecare paragraf va contine una sau mai multe propozitii si va fi separat de celelalte paragrafe sau de titlu prin spatii goale. In acest mod, textul se poate citi mult mai usor si fara a obosi ochii. De asemenea, prin folosirea judicioasa a spatiilor goale puteti sa atrageti atentia asupra unor articole sau fraze importante.
Spatiile goale se pot adauga printr-o multime de metode:
indentarea propozitiilor
folosirea de celule goale in tabele
aliniamente diferite in tabele sau in afara lor
pauze ( folosind marcajul in HTML sau diferite
combinatii de taste
combinatii ale acestor metode
Stilul de scriere
Atunci cand analizati stilul de scriere pentru pagina web, trebuie sa tineti cont de faptul ca un text pe ecranul monitorului se va citi mai greoi si mai incet ( in medie cu 20% ) decat textul tiparit . Stilul de scriere ( felul fonturilor , dimensiunea , culorile , etc. ) trebuie sa fie similar pentru toate paginile .In acest fel , cititorul se va familiariza mai usor cu paginile pe care le-ati creat . Incercati sa nu folositi o varietate prea mare de fonturi pentru aceeasi pagina Fonturile uzuale sunt ARIAL si TIMES NEW ROMAN . Mai puteti folosi si VERDANA sau COURIER , care dau o nota de modernitate paginilor web. Aceste fonturi sunt acceptate de toate browserele. Puteti sa folositi si fonturi mai ' exotice ' dar in acest caz riscati ca vizitatorii care nu au instalat fontul respectiv sa nu poata vizualiza paginile respective .
NU FOLOSITI TEXT IN CARE SA EXISTE NUMAI LITERE MARI.
ACEST TEXT SE CITESTE MULT MAI GREU SI IN PLUS , CITITORUL
VA AVEA SENZATIA CA ESTE AGRESAT VIZUAL.
De asemenea , nu este recomandabila folosirea textelor care clipesc (blink text) si a textelor care defileaza (scroling marques). Pentru a da o nota deosebita continutului , puteti sa scrieti prima litera a unui paragraf cu un alt font, alta dimensiune si o alta culoare. Bineinteles ca acest lucru va va lua mai mult timp, dar rezultatele vor fi deosebite. Se poate incerca si folosirea unei culori atractive pentru text , dar in acest caz trebuie sa va asigurati ca exista un contrast suficient de mare intre aceasta culoare si culoarea fundalului .In caz contrar , lizibilitatea va fi
mult mai scazuta iar cititorii vor obosi curand si in consecinta vor renunta sa mai navigheze prin paginile sitului .
Exemplu de sit web
Cand am inceput machetarea sitului web https://www.afaceri.net am luat in calcul toate elementele mentionate. Am cautat sa folosesc un stil unitar si aceeasi schema de aranjare pentru toate paginile. Pentru a obtine acest lucru am folosit un sablon. Mai intai am stabilit care sunt elementele care trebuie sa se regaseasca in fiecare pagina. Acestea sunt: logo, cautarea in pagina, lista de discutii, contoarele de trafic, harta grafica. Dupa ce am realizat un sablon (cu ajutorul tabelelor), am inserat aceste elemente. In continuare, folosind acest sablon am realizat foarte usor noi pagini in care am inclus numai continutul propriu-zis. Pentru ca vizitatorii sa nu fie derutati, am pastrat acelasi loc in pagina pentru meniul si simbolurile folosite pentru navigare ( sagetile stanga si dreapta ).
Informatiile cele mai importante le-am pus la inceput iar apoi le-am dezvoltat si am cautat sa le exemplific. Pagina web nu trebuie sa arate ca un bloc masiv de text. De aceea , am impartit continutul in bucati mai mici, numite paragrafe. Fiecare paragraf contine una sau mai multe propozitii si este separat de celelalte paragrafe, sau de titlu, prin spatii goale. In acest mod, textul se poate citi mult mai usor si fara a obosi ochii.
|
Camp de selectie: pune la dispozitie o lista de optiuni din care utilizatorul poate selecta pentru una sau mai multe dintre ele. Admite atribute de stabilire a marimii casetei cu optiuni, selectia multipla. Se poate de asemenea seta o optiune ca implicit selectata.
Arie de text: foloseste pentru a pune la dispozitia utilizatorului o suprafata de editare mai mare decat a unei casete de text. Admite atribute de stabilire a latimii si inaltimii ariei de editare, a unui text de fisat in mod implicit, de atribuire a unui nume elementului arie de text.
2. Construirea unui formular
Exemplul urmator este un formular prin care un vizitator al paginii poate face o rezervare pentru cazare la o unitate de turism. Trimiterea datelor din formular se face prin e-mail. Deschideti un document nou NotePad si introduceti urmatoarele linii de cod. Salvati documentul sub numele comanda.htm in directorul dumneavoastra de lucru.
<html>
<head>
<title>comanda de cazare</title>
</head>
<body>
<h4 align='center'>Puteti rezerva din timp locuri de cazare in complexul nostru completand formularul de mai jos</h4>
<form action='mailto:adresa_valida@de.email' method= 'post' enctype='text/plain' name='formular'>
<p>Numele <input type='text' size='15' name='numele clientului '></p>
<p>Prenumele <input type='text' size='12' name='prenumele clientului '></p>
Doriti cazare la <select name='tip_cazare' size='1'>
<option selected value='Hotel'>Hotel
<option value='Vila'>Vila
<option value='Cabana'>Cabana
</select>
Numele unitatii de cazare <select name= 'numele_unitatii' size='1'>
| Contact |- ia legatura cu noi -| |  |
| Adauga document |- pune-ti documente online -| |  |
| Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| |  |
| Copyright © |- 2024 - Toate drepturile rezervate -| |  |
 |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
Esee pe aceeasi tema | ||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
|
||||||||||||||||||||||||