curs webdesign Introducerea unui tabel în Dreamweaver
Se face cu opţiunea din meniu Insert ->Table sau CTRL+Alt+ T 2. Setarea tabelului Din Property Inspector (sub pagină) putem seta: • • • • • •
Width este lăţimea tabelului şi o puteţi exprima în mărime absolută(pixeli) sau relativă(procente) Columns – numărul de coloane dorit Rows – numărul de rânduri dorit Border – dimensiunea în pixeli a chenarului (marginea tabelului). Dacă nu doriţi sa aibă chenar setaţi dimensiunea 0 Cell Padding – dimeniunea dată mărimii celulei şi textului Cell Spacing – distanţa dintre celule
O dată ce aţi apăsat Ok aveţi deja tabelul creat. •
Adăugarea de rânduri sau coloane
Click dreapta acolo unde doriţi să adăugaţi o nouă coloană sau rând selectând Table -> Insert Row/Column. (above sau below). Dacă tabelul este deja completat cu date şi doriţi să inseraţi noi rânduri la sfârşit fie folosiţi prima variantă, fie puneţi cursorul în ultima celulă şi apăsaţi tasta TAB ce va crea un nou rând. •
Împărţirea(divizarea) sau Contopirea(unirea) Celulelor
Celulele pot fi împărţite în multiple coloane şi rânduri. Faceţi click pe celula dorită şi apoi Modify -> Table -> Split Cell. În fereastra nou apărută puteţi alege să împărţiţi celula în rânduri sau coloane şi numărul acestora. Alternativ, puteţi contopi 2 sau mai multe celule într-una singură urmând paşii Selectare celule dorite -> Modify -> Table -> Merge Cells. •
Stergerea de randuri sau coloane
Pentru a sterge un rand sau o coloana din tabel trebuie sa selectati randul/coloana respectiva sau grupul de coloane/randuri si sa utilizati apoi Modify -Tabel – Delete Row/ Column. •
Codul Tabelului
Codul Tabelului poate fi vizualizat prin selectarea Code View. tagul de început <table> şi corespunzător sfârşitul</table> încadrează între ele întreg tabelul. În cadrul primului tag sunt definite proprietăţile tabelului(width...border etc). tagul <tr> şi corespunzător sfârşitul tagului</tr> reprezintă începutul, respectiv sfârşitul, unui rând (table row) al tabelului. Fiecare rând conţine mai multe tabele. Tagul<td> cu </td> marchează începutul, respectiv sfârşitul, unei celule din cadrul unui rând.
1
curs webdesign •
Proprietatile Tabelului
În bara Property Inspector putem seta cam tot ce ne trebuie pentru un tabel. Rows, Cols, W (width – lăţime), H (heightînălţime), CellPad, CellSpace, Border – setări pe care le-am fixat de când am făcut tabelul iniţial şi pot fi modicate aici. În plus, mai sunt câteva setări. Bg Color- culoarea de background a tabelului, Bg Image – imaginea de fundal a tabelului, Brdr Color – culoarea chenarului. În stânga jos sunt 6 imagini – în ordine reprezintă: • • • • • •
clear colum widths – ştergerea lăţimii precizată în caseta W. convert table widths to pixels – transformarea modului de exprimare a lăţimii tabelului în pixeli convert table widths to percent- transformarea modului de exprimare a lăţimii tabelului în procente clear row heights – ştergerea înălţimii rândurilor precizată în caseta H. convert table heights to pixels – transformarea modului de exprimare a înălţimii tabelului în pixeli; convert table heights to percent – transformarea modului de exprimare a înălţimii tabelului în procente.
•
Marimi diferite
Dacă doriţi ca o celulă, un rând sau o coloană să aibă alte dimensiuni decât întregul tabel fie lucraţi în design view trăgând de margini fie selectaţi celula/ rândul/ coloana şi introduceti proprietăţile dorite în Properties. •
Sabloane pentru formatarea tabelelor
Un şablon grupează un set de formatări care vor fi aplicate tabelului selectat. Din meniul Commands alegem Format table, se va deschide o fereastră de unde puteţi alege un şablon deja existent pe care să îl aplicaţi tabelului. Fiecare şablon poate fi modificat după dorinţă. După ce modificările au fost efectuate sau şablonul ales nu uitaţi să apăsaţi tasta Apply şi apoi OK. •
Sortarea datelor intr-un tabel
Pentru a ordona datele dintr-un tabel se utilizează meniul Commands şi apoi opţiunea Sort table . Fereastra deschisă vă va oferi mai multe modalităţi de sortare: sortare alfabetică, pentru datele de tip text şi sortare numerică, pentru datele de tip numeric şi ordinea de sortare – ascendent şi descendent. Dacă aveţi nevoie de un al doilea criteriu de sortare, atunci trebuie să introduceti un nou criteriu în Then By. La Options avem următoarele opţiuni : sortarea va include şi primul rand; sortarea se aplică şi rândurilor aflate în interiorul tag-ului <thead>, tag ce defineşte rândurile respective ca antet; sortarea rândurilor din interiorul tagurilor<tfoot>, tag ce defineşte rândurile ca subsol al tabelului; şi ultima opţiune ce face ca formatările aplicate rândurilor sortate să fie asociate aceluiaşi conţinut. Dacă aveţi rândurile tabelului în culori alternante, este mai bine să lăsaţi nebifată această opţiune.
2
curs webdesign Formulare în Dreamweaver Un formular se poate insera folosind din meniu Insert->Form->Form. Elementele unui formular pot fi: - Text Field – caseta de text se inserează din meniu din comanda Insert->Form->Textfield. Text field se poate redimensiona introducând un număr în caseta de text Char Width din Property Inspector. Pentru a crea o caseta de parolă selectaţi câmpul de text şi în zona Type alegeţi Password. Pentru a limita numărul de caractere permise selectaţi câmpul de text dorit şi la Max Chars introduceţi numărul maxim de caractere ce poate fi introdus în câmp.
-
Textarea – caseta de editare se inserează din meniu din comanda Insert->Form->Textarea şi are aceleaşi proprietăţi ca şi caseta de text. Button – butonul se inserează din meniu din comanda Insert->Form->Button. Proprietăţile lui sunt: name, label(textul butonului), action care poate fi de două tipuri: submit pt buton de acceptare sau reset pt buton de anulare formular. Check Box – butonul(caseta) de validare se inserează din meniu din comanda Insert->Form->Check Box. Proprietăţile acestuia sunt name, value şi initial state(determină dacă este sau nu bifat iniţial). Radio Button – butonul radio – de obicei aparţine unui grup de mai multe butoane radio. Butonul se inserează din meniu din comanda Insert->Form->Radio Button. Proprietăţile sunt denumirea butonului şi starea iniţială (apăsat sau neapăsat). List/Menu – reprezintă lista din care putem alege elemente. Se inserează din meniu din comanda Insert-> Form->List/Menu. Are următoarele proprietăţi: type care poate fi menu sau list, height (înălţimea listei), list values în care definim valorile posibile ale listei. File Field – reprezintă câmpul de tip fişier care permite încărcarea unui fişier ales pe server. Se inserează din meniu din comanda Insert->Form->File Field. Image Field – reprezintă un câmp imagine pe care îl pot adăuga formularului. Se inserează din meniu din comanda Insert->Form->Image Field.
Metode formular: • • • • •
Nu uitaţi că metoda GET nu trebuie utilizată decât pentru formulare mai mici şi care nu conţin date importante şi sensibile deoarece folosind metoda GET datele din formular sunt ataşate la o adresă URL . Folosiţi din caseta Property Inspector atributul Enctype pentru a codifica datele în metoda POST. În fereastra Document care conţine formularul selectaţi formularul şi din caseta Behaviors adăugaţi acţiunea Validate Form. Şi de acolo veţi putea selecta numele de câmp pe care doriţi să-l validaţi . Dacă doriţi să fie obligatoriu validaţi “Required”. Pentru a restricţiona conţinutul alegeţi opţiunea dorită (număr- trebuie să conţină doar numere, number from n to n – interval de numere, email ) Asiguraţi-vă că este precizat onSubmit !!!
Prima metoda La properties selectaţi Form şi în Properties completaţi action: mailto:emailaddress method: GET Enctype: text/plain Asiguraţi-vă ca aţi inclus butonul submit – selectaţi butonul şi asiguraţi-vă că aţi pus la action Submit form. A doua metodă – mult mai folosită este utilizarea unui script. Dacă alegeţi un script CGI, la property unde aveţi action veţi pune calea catre fisierul cgi (gen cgi-bin/formamil.pl) şi metoda post.
3
curs webdesign
Frame-uri în Dreamweaver Frame-urile sunt cadre în pagină, fiind flexibile permit păstrarea pe loc a anumitor părţi ale site-ului. Folosind frameurile nu va mai trebui să repetaţi aceleaşi elemente în pagină şi prin urmare nici reîncărcarea lor în browser. Foarte util pentru începători este faptul ca Dreamweaver poate crea automat un document set de cadre atunci când se împarte o pagină în două sau mai multe. Paşii:
1. Se deschide o pagină goală; 2. Modify – Frameset şi de aici se va selecta una din opţiunile: • • • •
Split Frame Left (stanga) Split Frame Right(dreapta) Split Frame Up(sus) Split frame Down(jos)
Sau Insert- Frames / File – New Document – Category(o gamă bogată de frameuri) În jurul fiecărui cadru(frame) şi în jurul întregii pagini veţi avea borderuri noi. Borderurile de cadru delimitează fiecare frame. Pentru a modifica un frame nu ramâne decât să trageţi bordura într-o nouă locaţie. Selectarea unui cadru – Apăsaţi ALT şi executaţi click în interiorul cadrului. Când selectaţi un cadru, Property Inspector afişează proprietăţile cadrului selectat. Pentru a adauga frame-uri: Modify- Frameset sau prin tragerea cu mouseul (+ALt opţional) Pentru a sterge un cadru: click pe bordura cadrului şi fie se scoate în afara paginii sau se mută borderul până se ajunge la o altă bordură de cadru. Salvarea cadrelor – Ctrl+S (dar nu veţi fi siguri ce pagină se salvează); File – Save all; Se executa click în interiorul frame-ului şi apoi File – Save file as (astfel încât veţi putea după cum doriţi şi ştiind clar fiecare frame în parte). Pentru fişierul set de cadre se va da index.html (sau orice adresă).
TEMĂ
Să se adauge o nouă pagină la site-ul dvs care să conţină un tabel şi în acel tabel elementele unui formular aliniate frumos.
4