Editarea paginilor WEB

Editarea paginilor WEB

Crearea unei pagini WEB se realizeaza din meniul File-New-Page. Se poate opta pentru:

Crearea unei pagini WEB fara continut initial (Normal Page);

Crearea unui site WEB cu ajutorul asistentilor (Wizards), utilizand anumite sabloane, caz in care utilizatorul trebuie sa raspunda la mai multe intrebari, in functie de categoria site-ului ales[1].

Deschiderea pentru editare a unei pagini WEB existente se realizeaza din meniul File-Open, inchiderea fisierului ce contine pagina WEB activa realizandu-se din meniul File-Close.

Salvarea unei pagini WEB se realizeaza din meniul File-Save. Daca pagina are nume, atunci ea va fi salvata cu acelasi nume si in aceeasi locatie. Daca titlul paginii a fost deja stabilit in optiunea Page Properties-General, atunci acesta va fi propus in caseta Page Title in momentul salvarii paginii.

Stabilirea unor parametrii ai paginii WEB se realizeaza din meniul File-Page Properties. Acestia sunt grupati dupa functionalitate in mai multe sectiuni:

Sectiunea General, stabileste cativa parametrii generali ai paginii WEB:

Title - titlul pagini;

Location - locatia unde este salvata pagina

Base location - site-ul WEB unde va fi memorata pagina;

Background Sound - fisierul cu sunete care va fi redat in momentul vizitarii paginii WEB; fisierul se poate reda de un anumit numar de ori (Loop) sau la infinit (Forever);

Design-time control scripting - se stabileste limbajul implicit interpretat in cazul utilizarii scipt-urilor;

Style - se pot stabili stiluri de formatare a paginii;

Sectiunea Background, stabileste parametrii fondului paginii WEB si culorile legaturilor hipertext in functie de starea acestora. Aceasta sectiune se poate activa si din meniul Format-Background.

Background picture - se poate specifica o imagine ca fond al paginii; imaginea este repetata astfel incat toata suprafata paginii WEB sa fie acoperita cu imaginea acesteia;

Watermark - se aplica un efect asupra imaginii de fond, astfel incat culorile acesteia sunt modificate in nuante mult deschise

Background - culoarea de fond a paginii;

Text - culoarea implicita a textului din pagina WEB;

Hypelink - culoarea legaturilor hipertext pana la vizitarea lor;

Visited Hyperlink - culoarea legaturilor hipertext care au fost vizitate;

Active Hyperlink - culoarea legaturilor hipertext in momentul cand se activeaza legatura;

Sectiunea Margins:

Inserarea sfarsitului de paragraf se realizeaza din meniul Insert-Break, tag-ul HTML fiind <BR>.

Linii (bare) orizontale se insereaza in document din meniul Insert-Horizontal Line. Pentru a modifica parametrii liniei implicite se selecteaza linia si apoi se activeaza meniul Format-Properties sau dublu clic pe linie.

Inserarea caracterelor speciale se realizeaza din meniul Insert-Symbol.

Data si ora se pot insera din meniul Insert-Date and Time.

Comentariile se insereaza din meniul Insert-Comment, tag-ul HTML generat fiind <!>.

Inserarea imaginilor se realizeaza din meniul Insert-Picture. Imaginea poate fi inserata din colectia Clip Art, dintr-un fisier local (From File) sau de la o locatie Internet (URL). Tag-ul HTML generat este <IMG SRC>.

Inserarea secventelor video se realizeaza din meniul Insert-Picture-Video (modalitatea de inserare este acceasi ca pentru imagini). Tag-ul HTML generat este <IMG DYNSRC>.

Incorporarea continutului unui fisier in pagina WEB se realizeaza din meniul Insert-File.

Formularele

Un formular se insereaza intr-o pagina WEB din meniul Insert-Form-Form. In cazul in care nu se utilizeaza aceasta optiune pentru crearea unui formular, in momentul inserarii primului control din formular se genereaza marcajul de inceput si cel de sfarsit pentru acesta. Orice control inserat in afara acestor marcaje, va avea ca efect crearea altor formulare.

Where to store results indica unde se va transmite continutul formularului completat. Se poate opta pentru un fisier, catre o adresa de e-mail, catre o baza de date, catre o alta destinatie.

Form name - numele formularului.

Target frame - numele cadrului in care va fi afisat formularul

Formularul si fiecare control dispun de un set de proprietati prin care se stabilesc anumiti parametrii ai acestora. Pentru anumite controale se poate defini un set de reguli de validare (constrangeri) care sa actioneze asupra acestora in momentul in care se incearca validarea continutului lor. Daca regulile de validare ale unui control nu sunt verificate atunci nu se poate salva continutul controlului. Aceste reguli sunt utile pentru a elimina pe cat posibil greselile de completare a formularului, in scopul obtinerii unor informatii cat mai exacte. Fereastra cu proprietati se activeaza selectand un control sau un formular, dupa caz, apoi una din urmatoarele variante:

dublu-clic pe obiectul selectat;

clic-dreapta si Form Field Properties pentru proprietatile unui control, Form Properties pentru proprietatile formularului;

meniul Format-Properties;

combinatia de taste ALT+ENTER.

Pentru a activa fereastra pentru editarea regulilor de validare definite asupra unui control, dupa selectarea acestuia, se poate alege una din variantele:

clic-dreapta si Form Field Validation;

din fereastra Form Field Properties se alege butonul Validate.

Controalele ce se pot plasa pe un formular, precum si principalele proprietati aferente acestora:

a). Caseta de text (On-Line Text Box)

Figura Lista cu proprietati a unei casete de text

Proprietati:

Name - numele sub care se poate referi controlul din pagina WEB;

Initial value - valoarea implicita a controlului;

Width in characters - lungimea la care va fi afisat controlul;

Password field - controlul va fi utilizat pentru introducerea mascata (Yes) print-un caracter a continutului (in general parole de acces) sau pentru introducere obisnuita (No);

Tab order - indica ordinea de vizitare a controlului in cadrul formularului.

b). Caseta de text pentru texte de dimensiuni mari (Scolling Text Box) - are aceleasi proprietati ca o caseta de text (prezentata la punctul a), in plus existand proprietatea Number of Lines, care stabileste numarul de linii afisate;

c). Caseta de validare (Check Box)

Figura Lista cu proprietati a unei casete de validare

Value - valoarea controlului in cazul in care este selectat;

Initial State - caseta este selectata implicit (Checked)  sau nu (Not checked);

d). Butonul de optiune (Radio Button) are aceleasi proprietati ca o caseta de validare cu mentiunea ca proprietatea Initial State are valorile Selected, atunci cand controlul este selectat si Not selected, atunci cand controlul nu este selectat;

e). Butonul de comanda (Push Button) creeaza un buton care in momentul activarii poate executa o actiune definita de utilizator (Normal), trimite (Submit) continutul formularului catre adresa Internet specificata in proprietatea Action a formularului sau anuleaza (Reset) continutul controalelor din formular; proprietatea Value/Label stabileste valoarea memorata de control, respectiv textul afisat in buton;

f). Lista de valori (Drop Down Menu) - poate fi afisata in doua moduri lista derulanta de valori (caseta de text impreuna cu lista de valori) sau lista simpla de valori.

Proprietati:

Name - numele sub care va fi referit controlul din pagina WEB;

Value - valorile listei; coloana Selected indica daca valoarea este implicit selectata (Yes) sau nu (No), Choice indica valorile afisate de lista pentru fiecare valoare din coloana Value;

Allow multiple selections - pot fi selectate mai multe valori (Yes) in acelasi timp sau numai una (No); daca are valoarea Yes controlul generat este lista simpla de valori;

Height - numarul de randuri afisat de lista; daca este unu sau mai multe si Allow multiple selections are valoarea Yes controlul generat este lista simpla de valori; daca este unu si Allow multiple selections are valoarea No controlul generat este lista derulanta de valori;

Figura Lista cu proprietati a controlului lista de valori

Add, Modify, Remove - adauga, modifica respectiv sterge o valoare din lista; se stabileste daca valoarea este selectata implcit sau nu;

Move Up, Move Down - schimba ordinea valorilor din lista (muta in jos si muta in sus);

g).Butonul de comanda ce afiseaza o imagine (Image);

h). Eticheta - caseta de text cu explicatii, descrieri. Se utilizeaza numai impreuna cu unul din controalele prezentate.

Legaturi hipertext

Inserarea legaturilor hipertext se realizeaza din meniul Insert-Hyperlink. Definirea unui marcaj in document (ancora) se realizeaza din meniul Insert-Bookmark, in punctul care va marca inceputul zonei afisate la activarea legaturii hipertext catre acesta.

Inserarea unei legaturi hipertext catre un punct din documentul curent (sau catre un punct din alt document). Se selecteaza textul sau obiectul pe care va fi definita legatura, apoi marcajul (Bookmark) catre care se realizeaza. Daca nu se alege nici un marcaj sau daca nu este definit nici un marcaj in pagina tinta, aceasta va fi afisata de la inceput. Daca rezultatul activarii legaturii hipertext se doreste afisat intr-un cadru (frame), se tasteaza (sau selecteaza) numele acesuia in caseta Target Frame.

Inserarea unei legaturi hipertext catre o locatie Internet. Dupa selectarea textului sau a obiectului pe care va fi definita se stabileste locatia Internet spre care se defineste legatura (URL) .

Formatarea textului si liste

Formatarea caracterelor se realizeaza din meniul Format-Font[2]. Sunt puse la dispozitie o serie de efecte speciale, care se pot aplica aplica supra cracterelor.

Formatarea paragrafelor se realizeaza din meniul Format-Paragraph[3].

Stabilirea unei zone de text ca lista de elemente se realizeaza din meniul Format-Bullets and Numbering.

Listele neordonate se definesc in sectiunea Plain Bullets (elementele listei sunt precedate de unul din caracterele: n t) sau in sectiunea Picture Bullets (elementele listei sunt precedate de o imagine stabilita de utilizator).

Listele ordonate se definesc in sectiunea Numbers (vezi figura de mai sus). In caseta Start At, se stabileste pozitia de la care incepe numerotarea elementelor listei.

Exemplu: Pagina WEB cu liste de elemente.

Tabele

Celulele unui tabel dintr-o pagina WEB pot contine text, imagini, legaturi hipertext, controalele unui formular, alte tabele, etc. Inserarea unui tabel in pagina WEB se realizeaza din meniul Table-Insert-Table. Titlul tabelului se stabileste din meniul Table-Insert Caption. Acesta se poate plasa deasupra tabelului (Top of Table) sau sub tabel (Bottom of Table) din meniul Table-Caption Properties. Stabilirea carateristicilor celulelor intregului tabelul se realizeaza din meniul Table-Table Properties. O parte din caracterstici se pot stabili inca de la crearea tabelului:

Rows - numarul de randuri

Columns - numarul de coloane;

Alignment - alinierea tabelului pe orizontala; poate fi pe centru (Center), la stanga (Left) sau la dreapta (Right);

Border Size - grosimea bordurii tabelului;

Cell Padding - spatiul din jurul continutului fiecarei celule;

Cell Spacing - spatiul dintre celule;

Specify Width - stabileste dimensiunea tabelului fata de suprafata ferestrei in care este afisata pagina WEB; se poate stabili ca procent din suprafata ferestrei (in Percent) sau in pixeli (in Pixels); daca se stabileste in pixeli, atunci tabelul va fi afisat la dimensiunea stabilita indiferent de suprafata ferestrei in care este afisata pagina WEB; daca se stabileste ca procent din suprafata ferestrei atunci tabelul va fi redimensionat automat astfel incat sa fie afisat in intregime.

Unirea mai multor celule intr-una singura se realizeaza prin selectarea celulelor de unit, apoi activarea meniului Table-Merge Cells. Impartirea uneia sau mai multor celule in mai multe se realizeaza din meniul Table-Split Cells. Se poate opta pentru impartire in mai multe coloane (Split into Columns) sau in mai multe randuri (Split into Rows). Numarul acestora se stabileste din optiunea Number of Columns pentru coloane sau Number of Rows pentru randuri.

Selectarea celulelor se poate realiza si din meniul Table-Select apoi una din optiunile:

Stabilirea caracteristicilor unei celule

Dupa selectarea uneia sau mai multor celule se activeaza meniul Table-Properties-Cell, ce ofera urmatoarele facilitati:

Horizontal alignment alinierea pe orizontala a continutului unei celule fata de marginile ei; poate fi la stanga (Left), la dreapta (Right) sau pe centru (Center);

Vertical alignment - alinierea pe verticala a continutului unei celule fata de marginile ei; poate fi sus (Top), jos (Bottom) sau pe centru (Middle);

Row spanned - numarul de randuri care este ocupat de o celula;

Column spanned - numarul de coloane care este ocupat o celula;

Header Cell - celula este parte componenta din antetul tabelului;

No Wrap - continutul celulei nu este scris pe mai multe randuri in cazul in care este epuizata dimensiunea celulei; dimensiunea acesteia va fi extinsa pe orizontala astfel incat textul sa fie scris pe un sigur rand;

Background Color - culoarea fondului unei celule;

Use Background Image imagine care va fi afisata pe fundalul celulei;

Exemplu: pagina WEB pentru prezentarea clientilor firmei, a filialelor acestora si a adreselor de e-mail

Codul HTML al tabelului de mai sus:

<table BORDER=1 CELLPADDING=0 CELLSPACING=0 BGCOLOR='#FFFF00' BORDERCOLOR='#808080'>
<tr>
<td><b><font color='#0000ff'>Firma</font></b></td>
<td><b><font color='#0000ff'>Filiala</font></b></td>
<td><b><font color='#0000ff'>Adresa e-mail</font></b></td>
</tr>
<tr>
<td rowspan='2><b>S.C. InfoMega' S.R.L.</b></td>
<td HEIGHT=24><b>Infomega One</b></td>
<td HEIGHT=24><a href=mailto:oneinfomega@infomega.ro>oneinfomega@infomega.ro</a></td>
</tr>
<tr>
<td><b>Infomega Two</b></td>
<td><a href=mailto:twoinfomega@infomega.ro>twoinfomega@infomega.ro</a></td>
</tr>
<tr>
<td rowspan='3><b>S.C. InfoRo' S.A.</b></td>
<td><b>Info Mosilor</b></td>
<td rowspan='3><a href=mailto:inforo@info.ro>inforo@info.ro</a></td>
</tr>
<tr>
<td><b>Info Stefan cel Mare</b></td>
</tr>
<tr>
<td><b>Info Unirii</b></td>
</tr>
<tr>
<td COLSPAN=3><b>Acesta este un exemplu de tabel HTML, inclusiv cu linii si coloane unite</b></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Alte tipuri de obiecte

Se realizeaza din meniul Insert-Component, selectandu-se apoi categoria obiectului care se introduce in pagina WEB. Principalele categorii de obiecte ce pot fi inserate intr-o pagina sunt

Foaie de calcul Excel (Office Spreadsheet

Tablela pivot (Office PivotTable

Grafic (Office chart

Numarare vizitatori (Hit counter)

Text defilant se insereaza in pagina WEB din meniul Insert-Component-Marquee.

Tag-ul HTML generat este <MARQUEE>. O serie de programe navigator nu recunosc aceasta intrare HTML. Rubricile ferestrei Marquee Properties:

Text - textul care defileaza

Direction - directia de defilare; textul poate defila de la stanga la dreapta (Right) sau de la dreapta la stanga (Left);

Speed - viteza de defilare a textului; Delay stabileste pauza (milisecunde) efectuata dupa deplasarea cu o unitate de miscare a textului; dimensiunea unitatii de miscare (pixeli) se stabileste in caseta Amount;

Behavior - stilul de defilare; Scroll - in momentul atingerii marginii opuse se continua defilarea pana la disparitia completa a textului; Slide - in momentul atingerii marginii opuse se reia defilarea; Alternate - in momentul atingerii marginii opuse se reia defilarea in sens invers;

Align with Text - alinierea fata de randul curent; poate fi in partea de sus (Top) fata de text, la mijloc (Middle) sau in partea de jos (Bottom);

Size - stabileste lungimea (Width) si inaltimea (Height) casetei in care defileaza textul; se poate stabili in pixeli (in Pixels) sau ca procent din dimensiunea ferestrei active (in Percent);

Repeat - stabileste numarul de defilari executate; se poate stabili un numar fix de defilari (times) sau sa defileze la infinit (Continuously);

Background Color - culoarea de fond a casetei in care defileaza textul;

Efecte aplicate unor obiecte WEB

Se pot aplica o serie de efecte asupra obiectelor dintr-o pagina WEB, FrontPage, generand automat scripturile acestora. Efectele, din cele mai atractive, se pot plasa pentru unul din urmatoarele evenimente

Un singur click deasupra unui obiect (Click);

Dublu click deasupra unui obiect (Double click);

Trecerea cu mouse-ul pe deasupra unui obiect (Mouse Over);

Incarcarea unei pagini (Page load).