Download - Visual Web Developer 2008

Transcript

I. I.1. I.2.

PRINCIPII GENERALE ALE PROIECTRII INTERFEELOR WEB ............................ 5 INTRODUCERE ........................................................................................................................................ 5 REALIZAREA INTERFEELOR WEB UTILIZND LIMBAJUL DE MARCARE HTML ..................................... 6 I.2.1. Ce este HTML ? ................................................................................................................... 6 I.2.2. Structura unui document HTML .......................................................................................... 7 I.2.3. Elemente HTML avansate .................................................................................................... 8I.2.3.1 Tabele............................................................................................................................................. 8 I.2.3.2 Cadre .............................................................................................................................................. 9 I.2.3.2.1 Cadre interne .......................................................................................................................... 10 I.2.3.2.2 Deschiderea documentelor n alte cadre ................................................................................. 11 I.2.3.3 Layere........................................................................................................................................... 12 I.2.3.4 Formulare..................................................................................................................................... 12

I.3.

I.2.4. Evaluare............................................................................................................................. 16 UTILIZAREA TEHNICII CSS PENTRU FORMATAREA DOCUMENTELOR WEB ........................................... 19 I.3.1. Ce este un stil? ................................................................................................................... 19 I.3.2. Definiii de stil.................................................................................................................... 20I.3.2.1 Definiii de stil inline .................................................................................................................... 21 I.3.2.2 Definiii de stil ncapsulate (interne) ......................................................................................... 21 I.3.2.3 Definiii de stil extern .................................................................................................................. 23

I.3.3. I.3.4. I.3.5. I.3.6. I.3.7. I.3.8. I.3.9. I.3.10. I.3.11. II. II.1. II.2. II.3. II.4. II.5. II.6. II.7. II.8. II.9. II.10. II.11. II.12. II.13. II.14. II.15. II.16. II.17. II.18. II.19. II.20. III.

Stiluri n cascad ............................................................................................................... 24 Clase de stiluri ................................................................................................................... 24 Stiluri identificator............................................................................................................. 25 Pseudoclase i pseudoelemente.......................................................................................... 26 Stiluri pentru liste............................................................................................................... 28 Casete n CSS ..................................................................................................................... 30 Poziionare n CSS ............................................................................................................. 31 Notaii i uniti de msur................................................................................................ 32 Evaluare............................................................................................................................. 34

MEDIUL DE LUCRU VISUAL WEB DEVELOPER EXPRESS 2008 ........................... 36 MEDIUL DE LUCRU ............................................................................................................................... 36 CUM MANEVRM PANOURILE .............................................................................................................. 37 MENIUL VIEW ...................................................................................................................................... 38 PAGINA DE START ................................................................................................................................ 38 PUBLICAREA UNUI SITE WEB ................................................................................................................ 38 COMPILAREA DINAMIC A SITE-ULUI ................................................................................................... 39 WEB SITE/WEB PROJECT ...................................................................................................................... 39 CREAREA UNUI SITE WEB ..................................................................................................................... 40 DESPRE OPIUNEA LOCATION( FILE SYSTEM, HTTP, FTP).................................................................. 41 CREAREA I UTILIZAREA DIRECTOARELOR........................................................................................... 42 EDITAREA PAGINILOR .......................................................................................................................... 42 SCHIMBAREA PROPRIETILOR ............................................................................................................ 43 SALVAREA MODIFICRILOR ................................................................................................................. 43 DESPRE FIIERELE COD ........................................................................................................................ 43 VIZUALIZAREA PAGINILOR NTR-UN BROWSER WEB ........................................................................... 44 MASTER PAGES .................................................................................................................................... 44 SERVERE WEB N VISUAL WEB DEVELOPER ........................................................................................ 45 ASP.NET DEVELOPMENT SERVER ...................................................................................................... 45 RULAREA SERVERULUI INTEGRAT ....................................................................................................... 46 SECURITATE N ASP.NET DEVELOPMENT SERVER ............................................................................. 46 LIMBAJUL DE SCRIPTING SERVER-SIDE ASP.NET............................................... 47

III.1. STRUCTURA UNEI PAGINI ASP.NET .................................................................................................... 47 III.1.1. Controale ASP.NET........................................................................................................... 49 III.1.2. Ciclul de via al unei pagini web. .................................................................................... 50 III.1.3. Aplicaii rezolvate.............................................................................................................. 51 III.2. LIMBAJUL C#....................................................................................................................................... 53 III.2.1. Vocabularul limbajului ...................................................................................................... 54 III.2.2. Tipuri de date..................................................................................................................... 55 III.2.3. Operatori ........................................................................................................................... 56

Principii generale ale proiectrii interfeelor WebIII.2.4. III.2.5. III.2.6. III.2.7. III.2.8. III.2.9. IV.

Conversii............................................................................................................................ 58 Funcii matematice ............................................................................................................ 59 Instruciuni C# ................................................................................................................... 60 Tablouri n C#.................................................................................................................... 67 iruri de caractere ............................................................................................................. 71 Date calendaristice ............................................................................................................ 73

MODELUL CLIENT-SERVER....................................................................................... 75

IV.1. CONTROALE SERVER WEB .................................................................................................................... 75 IV.1.1. Label .................................................................................................................................. 76 IV.1.2. Button, LinkButton, ImageButton....................................................................................... 76 IV.1.3. TextBox .............................................................................................................................. 78 IV.1.4. CheckBox, CheckBoxList ................................................................................................... 79 IV.1.5. RadioButton ....................................................................................................................... 81 IV.1.6. RadioButtonList ................................................................................................................. 82 IV.1.7. BulletList............................................................................................................................ 83 IV.1.8. Image ................................................................................................................................. 84 IV.1.9. DropDownList.................................................................................................................... 84 IV.1.10. HyperLink ........................................................................................................................ 85 IV.1.11. Table, TableRow, TableCell............................................................................................. 86 IV.1.12. MultiView, View............................................................................................................... 87 IV.1.13. FileUpload ....................................................................................................................... 87 IV.1.14. Evaluare........................................................................................................................... 89 IV.2. POST BACK .......................................................................................................................................... 90 IV.2.1. Evaluare............................................................................................................................. 92 IV.3. CONTROALE PENTRU VALIDAREA DATELOR ......................................................................................... 93 IV.3.1. RequiredFieldValidator ..................................................................................................... 93 IV.3.2. RangeValidator .................................................................................................................. 93 IV.3.3. RegularExpressionValidator.............................................................................................. 93 IV.3.4. CompareValidator ............................................................................................................. 93 IV.3.5. CustomValidator ................................................................................................................ 94 IV.3.6. Evaluare............................................................................................................................. 97 IV.4. CONTROALE SERVER WEB AVANSATE. ................................................................................................. 98 IV.4.1. ImageMap .......................................................................................................................... 98 IV.4.2. Ad Rotator........................................................................................................................ 101 IV.4.3. Calendar .......................................................................................................................... 103 IV.4.4. Evaluare........................................................................................................................... 107 IV.5. CONECTAREA LA O SURS DE DATE A CONTROALELOR ...................................................................... 107 IV.6. PSTRAREA INFORMAIILOR NTRE PAGINILE WEB ........................................................................... 109 IV.6.1. Controlul HiddenField..................................................................................................... 110 IV.6.2. ViewState ......................................................................................................................... 111 IV.6.3. Cookies............................................................................................................................. 113 IV.6.4. Query String..................................................................................................................... 114 IV.6.5. Session ............................................................................................................................. 116 IV.6.6. Application....................................................................................................................... 119 IV.6.7. Evaluare........................................................................................................................... 121 V. INTERACIUNEA CU BAZE DE DATE WEB............................................................ 122 V.1. ROLUL BAZELOR DE DATE........................................................................................................ 122 V.2. ACCESAREA BAZELOR DE DATE WEB..................................................................................... 123 V.3. PROIECTAREA BAZELOR DE DATE........................................................................................... 125 V.3.1. Entiti, instane, atribute, identificator unic ................................................................... 125 V.3.2. Relaii ntre entiti .......................................................................................................... 126 V.3.3. Evaluare........................................................................................................................... 127 V.4. CONFIGURAREA BAZEI DE DATE ............................................................................................. 128 V.4.1. Evaluare........................................................................................................................... 136 V.5. ACCESUL DIRECT LA DATE........................................................................................................ 137 V.5.1. Limbajul SQL- Elemente de baz..................................................................................... 137 V.5.2. Comenzi de manipulare a datelor .................................................................................... 140V.5.2.1 Comanda SELECT.................................................................................................................. 140 V.5.2.2 Gruparea datelor ..................................................................................................................... 143

4V.5.2.3 V.5.2.4 V.5.2.5 V.5.2.6 V.5.2.7 V.5.3.1 V.5.3.2 V.5.3.3 V.5.3.4 Sortarea datelor....................................................................................................................... 145 Interogri multiple.................................................................................................................... 146 Comanda UPDATE................................................................................................................. 149 Comanda INSERT .................................................................................................................. 149 Comanda DELETE.................................................................................................................. 150 Crearea tabelelor..................................................................................................................... 151 Modificarea structurii unei tabele .......................................................................................... 152 Redenumirea i tergerea unei tabele ................................................................................. 153 Acordarea / revocarea unor privilegii.................................................................................... 154

V.5.3.

Comenzi de definire a datelor .......................................................................................... 151

V.5.4. Evaluare........................................................................................................................... 156 V.6. MANIPULAREA BAZELOR DE DATE WEB PRIN INTERMEDIUL OBIECTELOR ADO.NET 158 V.6.1. Arhitectura ADO.NET...................................................................................................... 158 V.6.2. Furnizori de date (Data Providers) ................................................................................. 158 V.6.3. Accesul direct la date prin intermediul ADO.NET........................................................... 159 V.6.4. Crearea unei conexiuni .................................................................................................... 160 V.6.5. Command.......................................................................................................................... 168V.6.5.1 V.6.5.2 V.6.5.3 V.6.5.4 Selectarea datelor. .................................................................................................................... 170 Inserarea datelor. ...................................................................................................................... 170 Actualizarea datelor................................................................................................................... 171 tergerea datelor....................................................................................................................... 171

V.6.6. DataReader....................................................................................................................... 172 V.6.7. Comenzi parametrizate .................................................................................................... 173 V.6.8. Studiu de caz .................................................................................................................... 174 V.7. LUCRUL N MOD DECONECTAT ................................................................................................ 184 V.7.1. DataAdapter..................................................................................................................... 184 V.7.2. DataSet............................................................................................................................. 185 V.7.3. Proiectare DataSet n mediu vizual ................................................................................. 188 V.8. LUCRUL CU MAI MULTE TABELE ........................................................................................................ 193 V.9. PROCEDURI STOCATE (STORED PROCEDURES) ........................................................................... 195 V.10. CONTROALE .NET LEGATE LA DATE .................................................................................................. 198 V.10.1. Controale pentru sursa de date ....................................................................................... 198 V.10.2. Controlul GridView......................................................................................................... 200 V.10.3. Controalele DetailsView i FormView ............................................................................ 207 V.10.4. Alte controale legate la date............................................................................................ 208V.10.4.1 V.10.4.2 V.10.4.3 V.10.4.4 V.10.4.5 Repeater................................................................................................................................. 208 DataList .................................................................................................................................. 209 DropDownList ........................................................................................................................ 210 CheckBoxList......................................................................................................................... 211 RadioButtonList ..................................................................................................................... 212

V.10.5. Evaluare .......................................................................................................................... 213 VI. SECURITATEA APLICAIILOR ASP.NET ................................................................ 214 VI.1. WINDOWS AUTHENTICATION............................................................................................................. 214 VI.2. FORMS-BASED AUTHENTICATION...................................................................................................... 215 VI.3. SECURIZAREA DIN APLICAIA WEB .................................................................................................... 215 VII. PROIECTAREA I REALIZAREA UNEI APLICAII WEB ........................................ 216 VII.1. REALIZAREA INTERFEEI ................................................................................................................... 216 VII.1.1. MasterPages ................................................................................................................... 216 VII.1.2. Foi de stiluri ................................................................................................................... 222 VII.1.3. Controalele web server din MasterPage ........................................................................ 225 VII.1.4. Conectarea la sursa de date a controalelor din MasterPage ......................................... 229 VII.2. HOME.ASPX ....................................................................................................................................... 233 VII.3. MOVIE.ASPX ...................................................................................................................................... 234 VII.4. DETALII.ASPX .................................................................................................................................... 242 VII.5. UPLOAD.ASPX .................................................................................................................................... 246 VII.6. ADAUGFILM.ASPX ........................................................................................................................... 248 VII.7. CONTACT.ASPX .................................................................................................................................. 254 VII.8. EVALUARE ......................................................................................................................................... 259 VIII. TEST DE VERIFICARE A CUNOTINELOR........................................................... 259

Principii generale ale proiectrii interfeelor Web

I. Principii generale ale proiectrii interfeelor WebI.1. IntroducereASP.NET este un set de tehnologii care ne permit crearea de aplicaii web. Este evoluia de la Microsoft Active Server Pages (ASP), dar beneficiaz de suportul platformei de dezvoltare Microsoft .NET. Una dintre cele mai importante caliti ale ASP.NET este timpul redus necesar dezvoltrii aplicaiilor web. Att tehnologia n sine, ct i uneltele de dezvoltare de aplicaii web de la Microsoft (cum ar fi Visual Web Developer Express - VWD) reduc considerabil timpul de dezvoltare al aplicaiilor web fa de alte tehnologii prin simplitatea unui limbaj de programare managed de genul C# sau Visual Basic .NET, prin colecia bogat de biblioteci de clase i controale .NET care ofer foarte mult funcionalitate out of the box, prin orientarea pe construirea de aplicaii web a mediului de dezvoltare VWD. Chiar dac ASP.NET este gndit pentru a dezvolta aplicaii web foarte complexe prin faptul c se bazeaz pe .NET, prin faptul c se insist pe un model de dezvoltare OOP, respectiv pe separarea interfeei de logica aplicaiei totui, este extrem de simplu ca folosind ASP.NET s dezvoltm aplicaii mici, de genul magazinelor online, al aplicaiilor care sunt pur i simplu un front-end pentru o baz de date, sau al site-urilor personale. ASP.NET cuprinde toate tehnologiile necesare pentru a dezvolta o aplicaie web, scriind cantitatea minim de cod. Limbajele de programare care pot fi utilizate pentru a crea aplicaii ASP.NET sunt cele suportate de platforma .NET cum sunt Visual Basic .NET i C#, iar o alt caracteristica importanta a acestor limbaje (nafara faptului c sunt managed) este ca au fost create avnd n vedere paradigma programrii orientat pe obiecte. Totul din .NET, i evident din ASP.NET, este un obiect. Evident, orice site / aplicaie web trebuie s fie gzduit pe un server pentru a putea fi utilizat. Chiar dac n capitolele viitoare vom discuta mai mult despre instalarea aplicaiilor ASP.NET, aici a dori s prezint pe scurt variantele de gzduire. Pentru o persoan / companie care dorete s beneficieze de o aplicaie ASP.NET, dup ce a fost dezvoltat, trebuie instalat undeva. Presupunnd c ea a fost dezvoltat pentru .NET, aplicaia are nevoie de un server web IIS (internet Informations Services). Exist dou variante de a gzdui aplicaiile ASP.NET: (1) intern, pe serverele proprii sau (2) extern, la o firm care ofer servicii de gzduire (hosting). Decizia trebuie luat innd cont de civa parametri:

Costul de mentenan. Intern cost administrarea serverelor cu tot ce presupune asta: hardware, software, specialiti. Extern cost un abonament fix pe lun/an. Securitatea. Dac vorbim de o aplicaie extrem de important i care manipuleaz informaii sensibile, probabil vom dori s fie sub controlul propriu. Etc. Pentru programatorii care doresc s aib un site dezvoltat din pasiune sau pentru a

nva, dar vor totui s l aib instalat undeva, variantele de mai sus devin: (1) acas, pe Windows XP / Vista cu IIS; (2) la o firm care ofer servicii de hosting gratuit. Da, exist variante de acest gen, unde v putei instala propriul site ASP.NET fr s v coste nimic (cutai pe www.live.com asp.net free hosting). Pe perioada dezvoltrii unei aplicaii web, nu este nevoie ca aceasta s fie gzduit pe un server IIS, ci poate fi rulat din Visual Web Developer folosind serverul web integrat (vezi mai multe n capitolul II).

I.2. Realizarea interfeelor Web utiliznd limbajul de marcare HTMLDe ce HTML? este simplu de neles i de utilizat poate fi creat utiliznd orice editor de texte (este un fiier ASCII) ofer structurarea formatrii este independent fa de platform

I.2.1. Ce este HTML ?HTML 1 reprezint scheletul oricrei pagini Web, el descriind formatul primar n care documentele sunt vizualizate i distribuite pe Internet. HTML nu este un limbaj de programare, deci nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii Web: titluri, liste, tabele, paragrafe, legturi cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. Fiind un limbaj de marcare, el utilizeaz etichete (marcaje 2) ce dau indicaii browsere-lor cu privire la ierarhizarea i afiarea informaiilor.

1 2

Hypertext Markup Language n englez tags n englez

Principii generale ale proiectrii interfeelor Web

I.2.2. Structura unui document HTMLEtichetele HTML sunt de dou tipuri: etichete container 3 Etichetele container sunt de forma: bloc de text specificnd formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere () este opional. etichete vide 4 Etichetele vide au forma: . Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: nceput de paragraf, sfrit de linie, linie orizontal i altele. Astfel ele dau indicaii browserului despre elementul introdus i despre cum s afieze acel element. Un document HTML este structurat astfel: 1. zona head (antet) cu etichetele 2. zona body (corp) cu etichetele sau Exemplu: codul HTML prezentat n acest exemplu utilizeaz urmtoarele marcaje 5 :-pentru definirea unui paragraf -pentru trasarea unei linii orizontale -pentru formatarea fontului -pentru inserarea unei imagini -pentru definirea unui stil nclinat Exemplu Linie orizontala de culoare albastra si grosime 2 Textul este scris cu fontul "Arial", culoare rosie si marime 7. Am inserat o imagine

3 4

container tags n englez empty tags n englez 5 aceste elemente au fost studiate la Tehnologia informaiei i comunicaiilor, n clasa a IX-a

I.2.3. Elemente HTML avansateI.2.3.1 TabeleTabelele ne permit s construim o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni de formatare: culoarea fondului, culoarea textului, alinierea textului etc. Prezentarea datelor sub form de tabele ofer importante avantaje: claritate, sistematizare, posibiliti de comparare. Marcarea unui tabel se efectueaz printr-un tag de introducere a tabelului i de definire a atributelor globale. Acesta include i definiiile pentru liniile i celulele tabelului. Sintaxa general pentru declararea unui tabel este: ... ... ... ... ...

unde etichetele: delimiteaz tabelul delimiteaz o linie a tabelului delimiteaz o celul de date a tabelului delimiteaz o celul a primei linii din tabel (a capului de tabel) delimiteaz titlul tabelului

Atributele etichetelor table i td sunt: Atribut border width height bgcolor background cellspacing cellpadding align valign colspan rowspan Semnificaie stabilete limea bordurii stabilete limea stabilete nlimea stabilete culoarea de fundal stabilete imaginea de fundal stabilete distana dintre celule stabilete distana dintre marginea celulei i coninut aliniaz pe orizontal coninutul (left, right, center) aliniaz pe verticalal coninutul (top, bottom, middle) unete celula cu cea din dreapta ei stabilete limea bordurii table * * * * * * * td * * * * * * * *

Exemplu: pagina urmtoare conine un tabel fr formatri. tabel HTMLTABELE FORMULARE CADRE

Principii generale ale proiectrii interfeelor Web

Exemplu: pagina urmtoare conine un tabel cu bordur, avnd culoare stabilit de fundal, cu celule unite. tabel HTMLTABELE FORMULAREASP CADREVisual Web DevExpress 2008

I.2.3.2 Cadre 6Exemplele prezentate anterior ncrcau o singur pagina HTML n fereastra browserului. Sunt i situaii n care imaginea afiat de browser este format din mai multe pagini HTML numite cadre. Caracteristica acestor pagini este c perechea de etichete este nlocuit de , iar n interiorul lor cadrele sunt delimitate de i . Observaii: Exist browsere care nu suport cadre. Pentru acestea se utilizeaz n interiorul blocului eticheta . Dac browserul poate s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona va fi singurul care va fi recunoscut i afiat.

Atributele etichetei frameset sunt: Atribut cols Semnificaie mparte pagina n coloane i are valori exprimate n procente din dimensiunea ferestrei sau numr de pixeli sau * 7 (spaiul rmas) rows mparte pagina n rnduri cu aceleai valori ca la cols bordercolor stabilete culoarea tuturor chenarelor conform modelului #rrggbb 8 frameborder permite/inhib afirea chenarelor cu valorile yes sau no

n englez frames dac mai multe elemente din list sunt configurate cu *, atunci spaiu disponibil rmas se va mpri n mod egal ntre ele 8 culorile pot fi precizate prin nume sau prin construcia #rrggbb, unde r(red), g(green) i b(blue) sunt cifre hexazecimale7

Cadrele sunt introduse prin perechea de etichete , i suport atributele: Atribut name src bordercolor noresize scrolling frameborder marginheight marginwidth Semnificaie stabilete numele asociat cadrului stabilete fiierul sau adresa fiierului introdus stabilete culoarea chenarului cadrului curent conform dezactiveaz posibilitatea vizitatorului de a redimensiona cadrul permite/inhib adaugarea barelor de defilare cu valorile yes no si auto stabilete dac se afieaz chenarul cadrului (1-implicit) sau nu (0) permite stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale ale cadrului permite stabilirea distanei n pixeli dintre coninutul unui cadru i marginile orizontale ale cadrului limea total.

Exemplu: pagin cu dou cadre verticale n proporia 30% i 70% din Cadrul din dreapta este mprit la rndul su n dou cadre orizontale.

I.2.3.2.1 Cadre interneUn cadru intern este specificat prin intermediul marcajului . Acesta

definete o arie rectangular n interiorul documentului, arie n care browserul va afia un alt document HTML complet, inclusiv marginile i barele de derulare. Un cadru intern se insereaz ntr-o pagin Web n mod asemntor cu o imagine, n interiorul blocului . Exemplu: pagin cu trei link-uri; acestea deschid paginile referite de ele n cadrul intern din centrul paginii. Cadre interne link 1 link 2 link 3

Principii generale ale proiectrii interfeelor Web

I.2.3.2.2 Deschiderea documentelor n alte cadreDac ntr-unul dintre documentele deschise n cadru exist link-uri, acestea vor deschide paginile referite de ele n cadrul curent. Acest comportament se poate schimba prin plasarea n eticheta a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei:

Exemplu: pagin cu dou cadre de tip coloan. n cel din stnga se va deschide documentul c5.html, iar n cel din dreapta, documentul c7.html. Cel de-al doilea cadru a fost numit "cadru_dreapta".

c5.html: acest document conine patru link-uri. Prin intermediul atributului target am specificat faptul c toate legturile ncarc paginile referite n cadrul din dreapta. c5.html Tabele
Cadre
Formulare
Home

Atributul target al etichetei accept anumite valori predefinite:Atribut Semnificaie

_self _blank _parent _top

ncrcarea noii pagini are loc n cadrul curent ncrcarea noii pagini are loc ntr-o fereastr nou, anonim ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist, altfel are loc n fereastra curent a browserului ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent

Exemplu: pagin cu 3 link-uri n care atributul target ia 3 valori.Aceasta legatura incarca pagina t1.html in alta fereastra
Aceasta legatura incarca pagina c1.html in fereastra curenta
Aceasta legatura incarca pagina c2.html in fereastra parinte

Observaii: Utilizarea cadrelor prezint o serie de avantaje: uurina n navigare reducerea timpilor de ncrcare i o serie de dezavantaje: indexarea paginii de ctre motoarele de cutare este mai dificil exist browsere care nu suport cadrele; este recomandat s existe pentru fiecare astfel de pagin i o versiune fr cadre, ceea ce implic un efort suplimentar.

I.2.3.3 Layere 9Layer-ele sunt elemente HTML asemntoare frame-urilor, adic sunt nite containere pentru orice altceva ar putea intra ntr-o pagina HTML, dar spre deosebire de acestea, se pot suprapune (ca i regiunile unei hri). Etichetele definesc un layer. Atributele etichetei sunt:Atribut Semnificaie

name left/ top bgColor width/ height visibility src

stabilete numele asociat layer-ului stabilesc poziia n pagin a layer-ului stabilete culoarea de fundal a layer-ului stabilesc dimensiunile layer-ului permite/inhib vizibilitatea layer-ului prin valorile SHOW-implicit/HIDE stabilete adresa fiierului care conine informaiile ce sunt preluate n layer Am definit un layer

Observaii: Putem avea un layer n alt layer. n acest caz valorile atributelor left i top ale layer-ului din interior vor indica poziia acestuia fa la marginea de sus i marginea din stnga a layer-ului care l cuprinde. Layer-ele sunt acceptate doar de versiunile de la Netscape 4.0 n sus.

I.2.3.4 FormulareUn formular este un ansamblu de zone active alctuit din casete combinate, cmpuri de editare, butoane radio, butoane de comand etc. Formularele asigur construirea unor pagini Web care permit utilizatorilor s introduc informaii i s le transmit serverului. O sesiune cu o pagin Web ce conine un formular cuprinde dou etape:

straturi

Principii generale ale proiectrii interfeelor Web utilizatorul completeaz formularul i expediere) datele nscrise n formular.

trimite serverului (prin apsarea butonului de

o aplicaie dedicat de pe server (un script) analizeaz informaiile transmise i, n funcie de configuraia scriptului, fie stocheaz datele ntr-o baz de date, fie le transmite la o adres de mail indicat de dumneavoastr. Dac este necesar, serverul poate expedia i un mesaj de rspuns utilizatorului.

Un formular este definit ntr-un bloc delimitat de etichetele . n interiorul blocului sunt incluse: elementele formularului, n care vizitatorul urmeaz s introduc informaii, un buton de expediere, la apsarea cruia, datele sunt transmise ctre server, opional, un buton de anulare, prin care utilizatorul poate anula datele nscrise n formular. Cele mai importante atribute ale etichetei sunt:Atribut Semnificaie

action

comunic browserului unde s trimit datele introduse n formular. n general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primete datele formularului:

method

precizeaz metoda utilizat de browser pentru expedierea datelor formularului get (valoarea implicit) - datele din formular post - folosit cel mai des. n acest caz datele sunt expediate separat. sunt adugate la adresa URL precizat de Sunt permise cantiti mari de atributul action (nu sunt permise cantiti date. mari de date)

Calea prin care informaiile introduse ntr-un formular pot parveni creatorului paginii este folosirea comenzii mailto:

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei . Aceasta este utilizat mpreun cu urmtoarele atribute:Atribut Valoare Element introdus Semnificaie

text radio type checkbox button

caset de text buton radio csu de validare buton de comand

permite introducerea unui ir de caractere pe un singur rnd permite alegerea, la un moment dat, a unei singure variante din mai multe posibile permite selectarea sau deselectarea unei opiuni permite declanarea unei operaii atunci cnd utilizatorul execut click sau dblclick pe suprafaa

acestuia este butonul a crui activare declaneaz operaiunea de trimitere a datelor catre server reset este butonul a crui activare readuce controalele din formular la valorile lor iniiale image permite nlocuirea unui buton submit cu o imagine specificat password caset de este similar controlului text, diferenele text special constnd n faptul c datele introduse de utilizator vor fi afiate printr-un caracter "masc" (ex: "*") pentru a oferi un anumit grad de confidenialitate. Este folosit de obicei la introducerea unor parole. hidden cmp ascuns permite introducerea n formular a unui cmp ascuns file permite expedierea coninutului unui fiier a crui adres URL este submit buton de transmitere buton de resetare imagine transmis prin intermediul atributului value sau poate fi tastat ntrun cmp de editare ce apare odat cu formularul sau poate fi selectat prin intermediul unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse din formular.

name value checked

permite ataarea unui nume fiecrui element al formularului permite atribuirea unei valori iniiale unui element al formularului are rolul de a preseta o anumit opiune, pe care ns utilizatorul o poate schimba, dac dorete size seteaz numrul de caractere al csuei de text afiate maxlength seteaz numrul maxim de caractere al csuei de text afiate Cu ajutorul etichetei putei insera n pagin o caset de text multilinie care permite vizitatorului s introduc un text mai lung, care se poate ntinde pe mai multe linii.

Exemplu: pagina urmtoare conine elemente de mai multe tipuri ncadrate ntr-un formular unic. Pentru alinierea elementelor utilizate pentru informaiile personale am utilizat un tabel.

Principii generale ale proiectrii interfeelor Web

Etichetele i permit introducerea ntr-un formular a unui meniu derulant. Fiecare opiune care face parte din blocul se introduce prin eticheta . Atributele etichetei :Atribut Semnificaie

name size multiple

ataeaz listei un nume (utilizat n perechile name=value) expediat serverului precizeaz cte elemente din list sunt vizibile la un moment dat pe ecran, valoarea implicit fiind 1 permite selectarea mai multor valori din cadrul unei liste de selecie

Atributele etichetei :Atribut Semnificaie

value

primete ca valoare un text care va fi expediat serverului n perechea name=value; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup :Exemplu Exemplu

selected

permite selectarea prestabilit a unui element al listei

Exemplu: pagina urmtoare conine o list derulant.

I.2.4. Evaluare1. Care dintre urmtoarele expresii HTML pentru introducerea unui hyperlink, este corect din punct de vedere sintactic?a) Visual Studio 2008 Express Editions b) Visual Studio 2008 Express Editions c) Visual Studio 2008 Express Editions d) http://www.microsoft.com/express/download/default.aspx

2. n care dintre codurile HTML urmtoare chenarul tabelului nu este afiat?a) b) c1 c2 c) d)

3.Urmtorul cod HTML genereaz un tabel cu o linie i dou celule.

Ce culoare vor avea cele dou celule? a) ambele vor fi albe b) ambele vor fi roii

Principii generale ale proiectrii interfeelor Web c) c1 va fi alb i c2 gri d) c1 va fi gri i c2 roie

4. Cu ce putem completa codul HTML pentru a obine tabelul din figur? Nume Limbaje de programare studiate MihaiC# Java

a) rowspan=1 5. Secvena :

b) colspan=2

c) rowspan=2

d) colspan=1

are ca rezultat : 6. Cte cadre sunt create prin secvena de cod HTML de mai jos?

a) 2

b) 5

c) 3

d) 4

7. Fie urmtoarea secven de cod: Informatica Fizica Chimia Biologia

Dac este bifat opiunea Informatica, care este perechea nume/valoare care va fi transmis serverului? a) "opt=Informatica" b) "opt=inf" optiunea1 optiunea2

c) "inf=Informatica" d) "radio=inf"

8. Cte elemente sunt vizibile si cte sunt selectate n lista urmtoare?

18 optiunea3 optiunea4

a) un element vizibil, dou selectate b) dou elemente vizibile, dou selectate

c) patru elemente vizibile, dou selectate d) dou elemente vizibile, unul selectat

9. Pentru a grupa un numr de butoane radio, acestea trebuie s aib aceeai valoare pentru atributul: a) type b) value c) id d) name 10. Secvena urmtoare de cod genereaz:

Internet

HTML Informatica

a) b) c) d)

o list cu 4 elemente 2 liste imbricate cu cte 2 elemente fiecare 2 liste neimbricate cu cte 2 elemente fiecare 4 liste

11. Scriei codul HTML care s afieze tabelul: 12. Scriei codul HTML care s afieze cadrele de mai jos. Imaginile afiate sunt distincte i nu sunt neaprat identice cu cele din exemplu.

13. Scriei codul HTML pentru realizarea urmtorului formular: 14. Pornind de la coninutul fiierului alturat, mbuntii aspectul paginii parcurgnd urmtorii pai: Utilizai o imagine de fundal . Introducei tag-urile speciale de deplasare spre dreapta a titlului. Modificai structura tabelului astfel nct primul rnd s conin o singur celul. Alegei o culoare pentru fundalul celulei. Introducei n celulele tabelului de mai jos cte o imagine. Creai cte o legtur de la fiecare imagine la fisierul grafic corespunztor. Modificai dimensiunea bordurii tabelului la 5 i centrai tabelul. Introducei n documentul HTML urmtoarea list utiliznd culoarea preferat pentru font: Liste 1. HTML-iniiere 2. HTML-elemente avansate Formatare Tabele paragrafe Cadre Imagini

Principii generale ale proiectrii interfeelor Web Formulare

I.3. Utilizarea tehnicii CSS 10 pentru formatarea documentelor WebDe ce CSS?

Aplicarea stilurilor reprezint o extindere important a posibilitilor de stilizare, evitnd utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i manipularea lor greoaie.

Folosind stilurile HTML putei fi siguri c vizitatorii paginii dumneavoastr vor vedea pagina exact aa cum a fost ea proiectat.

I.3.1. Ce este un stil?A stiliza nseamn a da unui obiect o form corect i expresiv. Un stil reprezint o colecie de valori ale atributelor elementelor unui document, valori care pot fi aplicate ntregului document sau doar unei pri din acesta. Aceste atribute pot fi: mrimea, grosimea, tipul i culoarea fontului, marginile, paragrafele i orice altceva ce poate influena aspectul unui element, deci a unei pagini. Gruparea lor n stiluri permite designer-ului s aplice aceeai colecie la diferite pri ale unui document. Folosirea stilurilor reduce considerabil efortul depus atunci cnd dorii s aducei modificri aspectului i aranjrii elementelor din paginile dumneavoastr. n loc s parcurgei fiecare document n parte i s facei modificri asupra fiecrui element, operai modificri numai asupra foii de stiluri care stilizeaz aceste elemente. Sintaxa general a unei declaraii de stil este:list_selectori{proprietatea1:list_valori1; proprietatea2:list_valori2; proprietatean:list_valorin; }

Selectorii sunt utilizai pentru determinarea elementelor HTML asupra crora vor fi aplicate stilurile. Urmtorul segment de cod definete proprietile font, font-size, color i text-align pentru nivelele de titlu H1, H2 i H3:H1,H2,H3 {font-family:Arial,Garamond;text-align:center} 11 H1 {font-size:18px;color:red;background-color:gray} H2 {font-size:16px;color:blue}1011

Cascading Style Sheets n englez n scrierea definiiei unui stil este posibil s grupm selectorii n liste, separai prin virgul

20 H3 {font-size:14px;color:blue}

I.3.2. Definiii de stilStilurile pot fi aplicate elementelor unui document n trei moduri: La nivel de element 12: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din document. Aceasta nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate. Este o modalitate mai puin utilizat, deoarece contrazice principiul general al stilurilor, acela de a simplifica i de a face mai lizibil codul documentului HTML. ncapsulate 13: stilurile sunt incluse n documentul asupra cruia se aplic, i anume n seciunea a documentului, prin utilizarea marcajului . Legate 14: stilurile sunt definite n fiiere separate de documentul HTML. Documentul face apel la foaia de stiluri prin intermediul etichetei . Avantajul folosirii foilor de stiluri externe este dublu. Pe de-o parte, ele se pot aplica la nivelul mai multor documente HTML, realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. Pe de alt parte, acelai document poate folosi foi de stiluri diferite, oferind vizitatorului posibilitatea de a opta la un moment dat, pentru unul sau altul dintre ele, n funcie de propriile preferine. Includerea stilurilor ntr-un document HTML: legate

H1 {color: #008000; font-weight: bold} P {font-family: Arial; color: #800080; font-size: 14px}

ncapsulate

1213

inline n englez embedded n englez 14 linked n englez

Principii generale ale proiectrii interfeelor Web

I.3.2.1 Definiii de stil inlineSpre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile inline fac parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style n asociere cu etichetele HTML standard. Definiiile de stil inline se aplic numai asupra elementelor incluse ntre etichetele care au asociat atributul style. Din acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui scrise din nou, ncrcnd astfel documentul HTML. Totui, utilitatea stilurilor inline este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt prioritare fa de cele din stilurile ncapsulate sau externe. Stil inline pentru acest paragraf

Exemplu: pagina urmtoare conine o definiie de stil pentru al II-lea titlu de nivel 3 15 care nu se aplic i celorlalte titluri de acelai nivel.

I.3.2.2 Definiii de stil ncapsulate (interne)Crearea unui astfel de stil se realizeaz folosind eticheta . Eticheta de stil este plasat n antetul documentului adic n seciunea .

textele cuprinse ntre etichetele

Exemplu: pagina conine o definiie de stil care realizeaz afiarea tuturor titlurilor de nivel 1 cu caractere bold i culoare gri. Textele incluse ntre etichetele vor fi afiate cu fontul arial, de mrime 12 i culoare violet. De asemenea, este creat un stil "stil_text" care poate fi aplicat oricrui text. Prin intermediul su, textul este afiat cu caractere de dimensiuni mai mari i culoare roie.

Exemplu: pagina conine o definiie de stil ncapsulat i dou de stil inline.

Atunci cnd lucrai cu documente HTML deja existente, crora dorii s le aplicai stiluri inline, este recomandat s folosii etichetele i . Acestea v permit s aplicai stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu suport stiluri. Eticheta funcioneaz asemntor cu eticheta , marcnd un ntreg bloc de coninut, dar fr a genera linii albe ntre paragrafe.

Principii generale ale proiectrii interfeelor Web

Eticheta este similar cu eticheta aplicndu-se elementelor dintr-o poriune mic a documentului, de la cteva cuvinte, la cteva linii.

I.3.2.3 Definiii de stil externO foaie de stiluri este un fiier text care conine reguli de stil definite n aceeai manier ca la stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css. Apelul foilor de stiluri se poate realiza n dou moduri: folosind eticheta folosind funcia @import

Metoda importului (@import) este puin mai lent, fiind posibil s dureze o secund, dou, pn se ncarc foaia de stil, timp n care coninutul este afiat fr formatarea designer-ului. Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei conform urmtoarei sintaxe:

Exemplu:

pagina urmtoare utilizeaz foaia de stiluri stil.css, prin intermediul

etichetei cu atributul rel="stylesheet". Atributul href al etichetei are ca valoare numele 16 foii de stiluri apelate. Am utilizat i proprietatea background-repeat pentru introducerea unei imagini pe fundal i repetarea ei doar pe axa Ox.stil.css body{background-image:url(i4.gif); background-repeat:repeat-x;background-color:gray;} h2{color:yellow} .semafor{color:red;Font-Family:Arial Black;background-color:yellow} Referirea unei foi de stil externe Pentru acest document am folosit un fisier de tip foaie de stil in interiorul caruia am definit 3 stiluri:

pentru corpul documentului
pentru titlurile de nivel 2
un stil pentru punerea in evidenta a unor pasaje de text, stil numit semafor

i adresa relativ, dac este necesar

I.3.3. Stiluri n cascadCele trei tipuri de stiluri pot fi combinate n cadrul aceluiai document. Relaiile dintre diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode. Browserul rezolv conflictul dintre definiiile de stiluri respectnd urmtoarea regul: stilurile inline au cea mai mare prioritate, apoi cele interne i, n cele din urm, stilurile externe, cu prioritate minim. O regul de stil poate s-i mreasc prioritatea dac este nsoit de declaraia "!important":P {font-size:12pt!important; font-style:italic }

Dac ne referim la "care dintre cele 3 definiii de stil este mai bun", standarde WEB indic: utilizarea foilor .css pentru definirea caracteristicilor care se aplic la formatarea prii comune a tuturor paginilor unui document utilizarea stilurilor ncapsulate pentru definirea caracteristicilor care se aplic la formatarea unei anumite pagini; utilizarea stilurilor inline pentru definirea caracteristicilor care se aplic la formatarea unui anumit element.

I.3.4. Clase de stiluriAcestea permit definirea unui stil general (aplicabil n mai multe locuri n cadrul aceleiai pagini sau n pagini diferite) n vederea inserrii lui oriunde este necesar prin intermediul unei simple referiri. S presupunem c dorim s definim o clas de stiluri "ftext" (pe care dorim s o aplicm anumitor poriuni de text pentru a le face s apar de culoare roie, aliniate la stnga, avnd culoarea de fundal gri i mrimea fontului de 14). all.ftext{text-align:left; color:red;}

Cuvntul standard "all" aflat n faa clasei de stiluri "ftext" indic faptul c aceast clas este aplicabil tuturor blocurilor de text, atunci cnd este necesar. Practic clasa de stiluri "ftext" poate fi asociat tuturor tagurilor HTML care opereaz cu text (ca de exemplu: H2, H3, P, DIV, etc...) utiliznd n interiorul fiecrui tag vizat o referire explicit la aceast clas:

Principii generale ale proiectrii interfeelor Web

Dac dorim s aplicm aceast clas de stiluri unui titlu de nivel 2, atunci scriem: Acest header este aliniat la stanga si are culoarea rosie

Dup cum s-a vzut, pentru apelarea unei clase de stiluri n vederea aplicrii sale elementului tag curent se folosete atributul "class", avnd ca valoare numele clasei de stil. mpreun cu specificaia "all" din definirea clasei de stiluri, atributul "class" devine un atribut universal, adic va putea fi asociat tuturor tagurilor HTML crora li se poate aplica. Dac dorim ca o clas de stiluri s fie aplicabil numai pentru anumite elemente ale documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"), atunci n construcia clasei va aprea acest element (de exemplu "p.ftext"). Exemplu: acest exemplu conine o definiie de clas aplicabil doar textelor desemnate prin marcajul .

I.3.5. Stiluri identificatorDenumirea stilurilor identificator este dat de modul n care este asociat stilul respectiv unui element, prin intermediul atributului id. Definirea unui stil identificator este similar cu a unei clase de stiluri. Vom folosi id-uri doar pentru stilizarea elementelor dintr-o pagina care apar doar o singura dat, altfel, folosirea claselor este recomandat.# nume_stil { descriere }

Utilizarea stilului identificator se realizeaz incluznd n interiorul etichetei elementului de text secvena:id = nume_stil

Exemplu: acest exemplu conine dou definiii de stil de tip identificator cap i corp.

I.3.6. Pseudoclase i pseudoelementePseudoclasele controleaz comportamentul dinamic al unor elemente, cum ar fi legturile. n CSS, o legtur poate avea 5 stri ce corespund la 5 pseudoclase: Atribut :link :visited :hover :active :focus Semnificaie descrie starea normal a unei legturi descrie o legtur vizitat descrierea aspectul legturii cnd aceasta primete focusul descrie starea activ a unei legturi descrie o legtur selectat

Exemplu: n aceast pagin hiperlegturile vor fi subliniate i vor avea culoarea roie. Legturile vizitate sunt scrise cursiv, cele active sunt afiate cu caractere aldine 17, iar legtura care deine focusul este reprezentat cu majuscule.

italice

Principii generale ale proiectrii interfeelor Web

Exemplu: pagina urmtoare utilizeaz foaia de stiluri test.css. n documentul HTML am inclus i o legtur, pentru a exemplifica modul n care foaia de stiluri schimb culorile legturii.

Pseudoelementele controleaz aspectul anumitor poriuni ale unui element, cum ar fi prima linie a unui paragraf sau prima liter a unui text. Astfel, pentru formatarea paragrafelor, avem urmtoarele pseudoelemente:selector:first-line {descriere} descrie aspectul primei linii a unui paragraf; selector:first-letter {descriere} descrie aspectul primei litere a unui paragraf;

unde selector poate descrie orice element de text. Exemplu: n aceast pagin am utilizat pseudoelementul first-letter.

I.3.7. Stiluri pentru listelist-style-type Folosind eticheta ol din HTML putem crea liste ordonate sau numerotate. Adugnd comenzi CSS n zona HEAD putem aduga pe lng numere i cifre, alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS dect pentru eticheta li. li {list-style-type: valoare;}

valoare disc circle square decimal lower-roman upper-roman upper-alpha lower-alpha none

semnificaie disc cerc ptrat numere ntregi numere romane, caractere mici (i, ii, iii, iv) numere romane, caractere mari (I, II, III, IV) litere mari (A, B, C, D) litere mici (a, b, c, d) nimic

Exemplu: pagina urmtoare conine o list ordonat care utilizeaz ca marcatori literele mari ale alfabetului englez

Principii generale ale proiectrii interfeelor Web

list-style-image n afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite i imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url(). Exemplu: pagina urmtoare conine o list ordonat folosind ca marcaj imaginea i4.gif.

Exemplu: pagina urmtoare conine un meniu structurat ca o list i stilizat folosind CSS. Pentru a crea un sistem de navigare bazat pe o list neordonat 18, mai inti se creeaz lista, plasnd fiecare legatur ntr-un element . Apoi, se ncadreaz textul cu i i se asociaz un id corespunztor.

marcat cu ajutorul tagului

30

I.3.8. Casete n CSSElementele cu care lucreaz HTML sunt afiate de browser n interorul unei zone dreptunghiulare ca n figur alturat, unde: 19 20

marginea 19 este spaiul exterior chenarului pn la celelalte elemente, chenarul 20 este o bordur care nconjoar elementul, completarea 21 stabilete distana dintre coninut i chenar,margin n englez border n englez 21 padding n englez

Principii generale ale proiectrii interfeelor Web coninutul include informaia util (text, tabele, imagini, formulare etc.) .

31

Exemplu: pagina urmtoare conine 3 definiii de clase utiliznd proprietile borderwidth, border-style i border-color i o imagine poziionat la 50px fa de latura stng i 25px fa de latura de sus i bordat cu chenar portocaliu.

I.3.9. Poziionare n CSSPoziionarea permite aezarea unui obiect ntr-un anume loc folosind coordonatele sale. Totodat obiectele pot fi poziionate pe straturi diferite, unul deasupra celuilalt. O astfel de aezare se poate face utiliznd atributul position. Att poziionarea absolut ct i cea relativ folosesc proprietile left i top exprimate n px (pixeli), in (inci), pt (puncte), cm (centimetri). Poziionarea absolut plaseaz obiectul n pagin exact n locaia data de left i top. Astfel poate fi creat un element liber fa de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat poziionarea absolut etichetei h3.

Poziionarea relativ este poziionarea unui element n funcie de elementele anterioare. Un element poate fi deplasat fa de altul folosind proprietile left i top.

32

Exemplu: n pagina urmtoare cuvintele sunt poziionate relativ unul fa de cellalt.

Poziionarea tridimensional Elementele sunt poziionate pe ecran pe o suprafa bidimensional dar pot fi aezate i unul deasupra celuilalt, ntr-o stiv utiliznd un indicativ (index-z) ncepnd cu 0, urmtorul 1 i tot aa, n continuare. Elementul cu indexul cel mai mare este aezat deasupra.

Exemplu: pagina urmtoare conine 3 imagini poziionate absolut i suprapuse.

I.3.10. Notaii i uniti de msurFoile de stil utilizeaz dou tipuri de uniti de lungime: relative: exprim o dimensiune n raport cu alt dimensiune , absolute: exprim o dimensiune fix.

Uniti de msur relative:

Principii generale ale proiectrii interfeelor Web em-reprezint limea literei M relativ la fontul utilizat 22, ex- reprezint nlimea literei 'X' relativ la fontul utilizat, px-pixeli (dimensiunea este dependent de rezoluia calculatorului) . Uniti de msur absolute: in-inch (1in=2.54cm), cm-centimetri, mm-milimetri, pt-punct tipografic(1pt=1/72 in). Culori

33

Atributul culoare pentru un obiect poate fi specificat printr-un cuvnt cheie (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si yellow ) sau prin intermediul unei specificaii numerice RGB. i conine ase cifre hexazecimale. URL 23 este soluia aleas de World Wide Web Consortium, pentru specificarea unei resurse (unui site sau a unei pagini) n Internet. Sintaxa general este::///

Acestea sunt luate din paleta VGA

Windows. Specificarea unei culori n forma hexazecimal RGB se prefixeaz cu caracterul #

unde protocol este protocolul folosit (de cele mai multe ori HTTP), nume_DNS este numele domeniului pe care se afl resursa, nume_local este format din calea i numele resursei de pe discul local.

Care este diferena dintre CSS i HTML? HTML-ul este utilizat pentru structurarea coninutului unei pagini, iar CSS-ul este utilizat pentru formatarea acestuia.

22 23

Mrimea celorlalte caractere este ajustat n funcie de acesta Uniform Resource Locator

34

I.3.11.

Evaluare

1. Care dintre urmtoarele este o sintax corect CSS? a) {body;color:gray} b) body {color:gray} c) body:color=gray d){body:color=gray(body)} 2. Care dintre urmtoarele expresii CSS aplic proprietatea bold elementelui p? a) b) p {text-size:bold} c) p {font-weight:bold} d) 3. Cum definim o bordur dimensionat astfel: top border = 10 px; bottom border = 5 px; left border = 20 px; right border = 1px? a) border-width:10px 1px 5px 20px b) border-width:10px 5px 20px 1px c) border-width:5px 20px 10px 1px d) border-width:10px 20px 5px 1px 4. Care din urmtoarele variante definete un model de stil aplicabil tuturor elementelor h3 dintr-un document? a) b) h3{..} c) .h3{..} d) #h3{..} 5. S considerm urmtoarea definire a unui model de stil n antetul documentului HTML: .ochean{...}

Care din urmtoarele variante definete un paragraf cruia i se aplic stilul respectiv? a) Am aplicat stilul... b) Am aplicat stilul... c) Am aplicat stilul... d) Am aplicat stilul... 6. Dac ntr-un document HTML apar urmtoarele definiii de stil: .ochean{background-color:gray;color:red;align:center} H1{color:yellow;align:left} ...

antetul definit mai sus va avea urmtoarele proprieti: a) background-color:gray;color:yellow;align:center b) background-color:gray;color:red;align:left c) background-color:gray;color:blue;align:left d) background-color:gray;color:blue;align:center

Principii generale ale proiectrii interfeelor Web 7. Scriei codul HTML care s afieze o legtur stilizat ca n figur: 8. Scriei codul HTML care s realizeze pagina alturat, utiliznd urmtorul fiier extern de stiluri:

35

9. Completai sursa HTML de mai jos astfel nct listele definite s apar cu mai multe tipuri de marcaje, ca n figur.

10. Adugai tabelului de mai jos nc o celul (celula12) formatat ca n figur.

36

II. Mediul de lucru Visual Web Developer Express 2008De ce Visual Web Developer?

este simplu de neles i de utilizat conine un editor vizual conine un editor performant de cod C#/HTML conine suport pentru depanarea aplicaiilor Web 24 conine ultima versiune a coleciei de clase necesare pentru a putea creea pagini web folosind funcii gata implementate 25 conine un Web Server propriu ce poate rula paginile Web create are integrat SQL Server Express, un mediu vizual pentru editarea bazelor de date conine faciliti ca Master Page 26

II.1. Mediul de lucruVisual Web Developer este un mediu de lucru dezvoltat de Microsoft, specializat pe realizarea site-urilor. Ediia Express este proiectat special pentru amatorii care vor s nvee s foloseasc Visual Web Developer i tehnologii asemntoare, fr s aib ndemnri n utilizarea instrumentelor folosite de programatorii profesioniti; ea conine instrumente de dezvoltare moderne, uor de neles i uor de folosit, de dimensiuni mici, cu interfee de lucru simplificate dar n acelai timp beneficiare ale trsturilor clasice ale Visual Studio i ale noilor funcionaliti implementate n .NET Framework . Visual Web Developer se lanseaz printr-un simplu click pe butonul Start i alegerea opiunii Visual Web Developer 2008 Express Edition din All Programs.Solution Explorer/ Database Explorer

Properties window

Toolbox

Design surface

n figur pot fi vizualizate urmtoarele panouri:24 25

debug n englez .NET FRAMEWORK 3.5 26 un Master Page este un formular WEB standard care acioneaz ca un tipar pentru paginile unui site

Mediul de lucru Visual Web Developer Express 2008 Toolbox: cnd

37

deschidei o pagin sau alt item pentru editare, Toolbox v ofer

instrumentele ce v permit adugarea de noi componente 27 paginii. Design Surface: este panoul de editare a paginilor . Solution Explorer/Database Explorer: Fiecare site Web pe care l creai este organizat ca un grup de foldere care apare n Solution Explorer. Orice baz de date pe care o creai pentru site-ul dumneavoastr apare n Database Explorer. Pentru comutarea ntre cele dou programe Explorer se folosete tabul din josul panoului. Properties: afieaz proprietile asociate obiectului sau paginii cu care se lucreaz.

II.2. Cum manevrm panourilePanourile pot fi mutate, redimensionate, afiate sau ascunse. Dac avei dou sau mai multe panouri suprapuse la marginea ecranului, putei face panoul de la baz mai lung sau mai scurt deplasndu-i marginea superioar .

Aa cum arat figura de mai sus, bara de titlu a unui panou conine trei butoane intitulate Window Position, Auto Hide i Close. Selectnd Window Position putei accesa urmtoarele opiuni ale meniului n cascad : Floating: tranform panoul ntr-o fereastr flotant care se poate muta i redimensiona. Dockable: ancoreaz panoul. Tabbed Document: mut panoul n zona de editare, identificat printr-un tab n partea sa superioar. Accesarea tab-ului face panoul vizibil. Pentru a reancora panoul n fereastra programului se d click dreapta pe tab i se alege Dockable. Auto Hide: convertete panourile deschise n panouri ascunse de-a lungul marginii programului. Hide: ascunde panoul. Cu attea panouri opionale i attea moduri de a muta i a redimensiona lucrurile, este uor s facei o mare dezordine n fereastra programului. Pentru a aduce totul la normal, trebuie s alegei Window Reset Window Layout din bara de meniu.

27

controale

38

II.3. Meniul ViewOpiunea View din bara de meniu ofer acces la toate panourile 28 opionale. Dac nchidei un panou folosind butonul Close, acesta poate fi fcut din nou vizibil accesnd numele lui din meniul View. Unele opiuni ale meniului View, cum ar fi Object Browser i Error List, vor avea un rol semnicativ atunci cnd vei construi efectiv o pagin. Meniul View ofer i optiunea Toolbars, opiune pe care o putei folosi pentru a face vizibile sau a ascunde diferite bare de instrumente.

II.4. Pagina de startPagina de start apare de fiecare dat cnd deschidei Visual Web Developer. Sub Recent Projects vei observa o list cu site-urile Web la care ai lucrat recent. Pentru a deschide unul dintre site-uri selectaii numele. Pagina de start nu conine nimic din ce este necesar pentru a construi un site, ci doar linkuri ctre cri electronice online gratuite i MSDN Library for Visual Studio Express Editions. Dup ce ai creat sau ai deschis un site Web, pagina de start dispare. Dac v rzgndii i vrei s aducei pagina de start napoi pe ecran trebuie s alegei, ViewOther Windows Start Page din meniul View.

II.5. Publicarea unui site webConstrucia unui site pe propriul calculator e doar primul pas. Dac dorii ca acesta s poat fi accesat de public trebuie s obinei un domeniu i apoi s publicai site-ul pe un server aflat la adresa domeniul. Compania care v asigur spaiu pentru publicarea site-ului este de obicei numit hosting service sau hosting provider. Serviciile de hosting care suport tehnologiile specifice pe care le folosete Visual Web Developer se numesc ASP.NET 29 2.0 Hosters. Dac site-ul are i o baz de date n spate, atunci vei avea nevoie de un serviciu de hosting care suport ASP.NET 2.0 i SQL Server 2005.

28 29

numite i ferestre pentru c pot fi flotante ASP.NET este o tehnologie Microsoft pentru crearea de aplicaii web i servicii web.

Mediul de lucru Visual Web Developer Express 2008

39

Observaii: Exist variante de hosting gratuit, unde v putei instala propriul site ASP.NET fr s v coste nimic (cutai pe www.live.com asp.netfree hosting).

II.6. Compilarea dinamic a site-uluincepnd cu ASP.NET 2.0, exist posibilitatea de a crea site-uri web n care compilarea se face dinamic pentru o pagin, atunci cnd pagina respectiv este cerut de utilizator. Cealalt opiune ar fi de a avea un assembly 30. Pagina compilat ine cont de un timestamp 31 asociat fiierului surs, astfel nct dup fiecare modificare a acestuia, pagina se recompileaz la prima cerere. Avantajele acestei opiuni de instalare a site-urilor ASP.NET sunt: Nu este nevoie s recompilm ntreaga aplicaie atunci cnd se modific doar o pagin a

acesteia. Paginile care conin erori de compilare nu opresc execuia ntregului site cum s-ar ntmpla

dac n loc de pagini compilate dinamic am avea un assembly.

II.7. Web site/Web projectVisual Web Developer Express dispune de dou variante diferite de a crea un site web: Web Site (File -> New Web Site) Web Application Project.

Cteva diferene dintre cele dou variante: Web Project Site-ul creaz un compileaz assembly.

dinamic paginile; Web Application Atunci cnd creem un Web Site, avem i posibilitate de a face build pe o singur pagin i nu pe tot site-ul. Web site-ul genereaz dinamic fiierele care conin cod generat automat de Visual Studio (cel cu definiiile controalelor); Web Application Project creaz fiierul respectiv pe disc, cu extensia .designer.cs. Un beneficiu al variantei a doua este timpul mai mic necesar30 31

un .dll timp de creare.

40

unui build.

Atunci cnd creem o clas n aplicaia noastr, dac lucrm

cu varianta Web Site clasa respectiv va fi implicit mutat ntr-un folder special numit App_Code. Asta pentru c la build nu rezult un assembly, ci se compileaz dinamic paginile, iar codul care nu ine de pagini este cutat special n acel folder. Dac lucrm cu Web Application Project, putem s creem propria noastr structur de foldere.

Observaii: Dac ne referim la "care dintre cele 2 variante este mai bun (Web Site sau Web Application Project)" recomandm ca pentru aplicaiile cu mult cod i o durat de implementare mare s se foloseasc Web Application Project, iar pentru cele mici Web Site.

II.8. Crearea unui site webPrimul lucru pe care l avei de fcut n Visual Web Developer este s deschidei sau s creai un nou Web Site. Din punctul de vedere al Visual Web Developer, un site Web este un director care conine mai multe subdirectoare i fiiere. Spre deosebire de un un site Web real, cel pe care l creai va fi stocat pe hard-disk-ul calculatorului dumneavoastr. Pentru a crea un site Web nou care utilizeaz C# ca limbaj de programare implicit, se urmresc paii: De la bara de meniu se selecteaz FileNew Web Site. Csua de dialog va aprea ca n figur. Se selecteaz ASP.NET Web Site. Din lista Location, se alege File System.

Mediul de lucru Visual Web Developer Express 2008 Din lista Language, se alege limbajul C# . Opional, se schimb numele i locaia site-ului. n exemplul din figur, noul site a fost denumit Web1. Se apas OK. Crearea Web va dura site-ului cteva

41

secunde. Cnd site-ul s-a ncrcat, va fi afiat un fiier Default.aspx, care este pagina principal a site-ului. Vei observa i un folder App_Data, n care va fi stocat o posibil baz de date.

II.9. Despre opiunea location( File System, HTTP, FTP)Opiunea Location din fereastra de creare a unui nou site Web v ofer dou alternative la File System pentru a v stoca site-ul: FTP sau HTTP. FTP este prescurtarea de la Hypertext Transfer Protocol32

i este un protocol

standard de Internet pentru transferarea fiierelor. Vei alege aceast opiune dac dorii s creai site-ul pe un server Web la distan, server care permite ncrcare FTP. Dar nu este neaprat nevoie s creeai site-ul pe un calculator la distan. Este mai simplu s creai un site local (pe calculatorul personal), i apoi cnd este terminat s-l transferai pe un server. HTTP este prescurtarea de la File Transfer Protocol33

i este metoda standard

pentru transferul datelor n World Wide Web. Putei folosi aceast opiune pentru a crea siteul pe un server la distan, chiar i pe calculatorul personal dac avei IIS 34 instalat, dar pentru c nu este necesar i este dificil de efectuat, vom rmne cu opiunea File System selectat. Pagina afiat de Visual Studio ne prezint codul care va fi trimis spre browser. Aceasta poate fi abordat i n mod Designer 35, selectnd tab-ul Design.

32 33

Protocol de Transfer al Hypertext-ului Protocol de Transfer al Fiierelor 34 Internet Information Services, n englez 35 n mod grafic

42

II.10. Crearea i utilizarea directoarelor 36Putei folosi directoare pentru a organiza paginile i alte componente din site-ul tu Web n aproape acelai fel n care folosii directoarele n Windows pentru a organiza fiierele. Pentru a crea un director, urmai urmtorii pai: selectai panoul Solution Explorer. facei click-dreapta pe numele site-ul din partea de sus a ferestrei Solution Explorer i alegei New Folder, ca n exemplu tastai un nume pentru folder, apoi apsai Enter.

II.11. Editarea paginilorPentru a edita o pagin existent n Visual Web Developer, este nevoie mai nti s deschidei pagina pentru a fi afiat pe suprafaa de Design. Pentru a deschide o pagin, se face dublu-click pe pictograma ei din Solution Explorer. S ncercm s editm pagina n mod Design. Vom tasta Prima mea pagin WEB.

Editarea textului n modul Design este foarte asemntoare cu editarea n Microsoft Word, sau orice alt editor de text: selectai pagina, poziionai cursorul, apoi tastai textul. Toate instrumentele i metodele standard de editare a textului funcioneaz n suprafaa de Design. De exemplu putei terge textul cu tastele Backspace i Delete, putei selecta textul cu mouse-ul sau cu tastele de navigare, putei copia i lipi text din/pe suprafaa de Design. Formatarea textului funcioneaz la fel n Visual Web Developer ca n orice alt program de editare a textului. n exemplul din dreapta am selectat textul i din bara de formatare am ales opiunea Heading 3.

36

foldere-lor, n englez

Mediul de lucru Visual Web Developer Express 2008

43

II.12. Schimbarea proprietilorPagina Web lucreaz cu obiecte. Pentru a vedea, i poate a schimba proprietile unui obiect, selectai obiectul (click) i vizualizai panoul Properties. Vom aduga din Toolbox un control Label (Label1) schimbndu-i proprietatea Text n Prima mea pagin WEB.

Lista de proprieti a unui obiect ofer cteva opiuni pentru modificarea obiectului, dar nu pe toate. Orice opiune care se leag de felul n care arat obiectul pe n pagin, poate fi schimbat i cu ajutorul Style Builder sau CSS.

II.13. Salvarea modificrilorImediat dup ce ncepei s editai o pagin, vei observa c numele paginii este scris cu bold i se termin cu *, ca n exemplul din figura alturat. Caracterul * din dreapta titlului marcheaz faptul c ai modificat pagina de la ultima salvare. Pentru a salva pagina cu schimbrile recente, putei folosi oricare din metodele: butonul Save din bara de unelte, Ctrl+S, FileSave numele paginii din meniu. Observaii:Apsnd butonul Save All, poi salva toate paginile deschise.

II.14. Despre fiierele codMulte din paginile .aspx au un fiier cod n spate, cod de programare care definete comportamentul paginii. Codul din aceste fiiere va fi scris n limbajul de programare pe care l alegei atunci cnd creeai site-ul Web, n cazul nostru C#. n Solution Explorer, orice pagin care are un fiier cod n spate prezint un semn + lang iconia sa, sau un semn minus cu o iconi pentru fiierul cod din spatele ei.

44

Numele paginii de cod este acelai cu numele paginii .aspx, dar cu o extensie .cs 37 adaugat, cum poate fi vzut n figur. Mergem n zona de cod (click dreapta pe numele fiierului .aspx i alegem View Code), n care se implementeaz codul care d caracterul dinamic al paginii i modificm metoda Page_Load() ca mai jos:protected void Page_Load(object sender, EventArgs e) { int an = DateTime.Now.Year; int luna = DateTime.Now.Month; int zi = DateTime.Now.Day; Label1.Text = Label1.Text + " " + zi + "-" + luna + "-" + an; }

Ce se vede n browser?

Observaii:Fiierul cod este locul unde se afl partea de programare din spatele paginii Web.

II.15. Vizualizarea Paginilor ntr-un Browser WebModul de vizualizare Design v ofer o idee despre cum va arta pagina n browser. Dar nu prezint ntotdeauna o imagine exact a site-ului. Pentru a testa pagina dumneavoastr, deschidei pagina ntr-un browser Web. Pentru a vizualiza, ntr-un browser, pagina la care lucrai n modurile de vizualizare Design sau Source n Visual Web Developer, putei folosi oricare dintre metodele urmtoare: Click dreapta pe orice spaiu gol din pagina i alegei View in Browser. Click pe butonul View in Browser aflat n bara de instrumente Tastai Ctrl+F5

II.16. Master pagesEste foarte indicat pentru un site ca paginile sale s aib acelai aspect vizual, adic s urmreasc acelai tipar 38. ASP.NET, nc de la versiunea 2.0, ne pune la dispoziie paginile numite Master Pages, care pot fi utilizate ca un template de ctre paginile propriu zise ale aplicaiei. Master pages nu sunt pagini care au coninut, n sensul c ele nu pot fi3738

n cazul n care ai ales limbajul C#template, n englez

Mediul de lucru Visual Web Developer Express 2008

45

vizualizate direct, ci doar motenite din punct de vedere al interfeei de ctre paginile cu coninut.

II.17. Servere Web 39 n Visual Web DeveloperPentru a testa i a rula o aplicaie Web ASP.NET, vei avea nevoie de un server Web. Serverul Web pentru sistemele de operare Windows este IIS, care include serverul FTP, serverul de e-mail SMTP 40 i alte faciliti. Pentru a rula IIS, trebuie s lucrai pe o versiune Windows, care este capabil s funcioneze ca un server de reea. n Windows 2000 Server i n versiuni anterioare, IIS este instalat ca o parte a sistemului de operare. n Windows XP i Windows Server 2003, IIS trebuie instalat separat; putei face acest lucru folosind opiunea Add/Remove Windows ComponentsAdd or Remove Programs din Control Panel. Observaii: Putei avea probleme cu IIS din urmtoarele motive: Lucrai cu pagini ASP.NET pe un sistem de operare Windows XP Home Edition, care nu suporta IIS Nu vrei s avei un server Web pe computerul dumneavoastr din motive de securitate. Rularea unui server Web precum IIS presupune civa pai n plus pentru a securiza serverul i a fi la zi cu ultimele update-uri de securitate.

II.18. ASP.NET Development ServerDac nu putei folosi IIS ca server web, putei testa paginile dumneavoastr ASP.NET folosind ASP.NET Development Server. ASP.NET Development Server este integrat n Visual Web Developer i este un server Web care ruleaz local pe sistemele de operare Windows, incluznd Windows XP Home Edition. Este construit special pentru a rula pagini ASP.NET doar pentru calculatorul pe care lucrai. ASP.NET Development Server v pune la dispoziie o foarte bun i simpl metod de a v testa paginile local nainte de a le publica i a le pune pe un server IIS.

39 40

Un calculator conectat la Internet care furnizeaz clienilor, la cerere, diverse resurse web Simple Mail Transfer Protocol

46

ASP.NET Development Server funcioneaz numai cu pagini individuale i nu include toate facilitile IIS. De exemplu, ASP.NET Development Server nu suport un server de mail SMTP. Dac aplicaia dumneavoastr Web include trimiterea de mesaje e-mail, trebuie s avei acces la serverul virtual IIS SMTP pentru a testa e-mail, deoarece ASP.NET Development Server nu poate trimite mesaje e-mail.

II.19. Rularea Serverului integratASP.NET Development Server este instalat automat odat cu Visual Web Developer. Dac lucrai la un site Web bazat pe un sistem de fisiere, Visual Web Developer folosete automat Visual Web Developer pentru a rula paginile. Implicit, serverul Web utilizeaz un port aleatoriu. De exemplu, dac testai o pagin numit ex1.aspx, cnd o rulai pe ASP.NET Development Server, URL-ul poate arta aa: Dac vrei s rulai ASP.NET Development Server pe un port specific, putei configura serverul pentru a face asta. Observaii: Visual Web Developer nu poate garanta c portul pe care l specificai va putea fi folosit atunci cand vei rula site-ul dumneavoastr Web.

II.20. Securitate n ASP.NET Development ServerO diferen important ntre ASP.NET Development Server i IIS o reprezint securitatea n fiecare dintre cele dou servere. Atunci cnd rulai o pagin folosind ASP.NET Development Server, pagina ruleaz n contextul de securitate a contului de utilizator pe care l folosii. De exemplu, atunci cnd rulai o pagin cu ajutorul ASP.NET Development Server folosind un cont de utilizator cu nivel de administrator, i pagina va avea privilegii de administrator. n IIS, ASP.NET ruleaz implicit n contextul userului special (ASPNET sau NETWORK SERVICES) care are privilegii limitate, ceea ce restrnge accesul la resursele de pe alt calculator. Dac rulai codul dintr-o pagin simpl ASP.NET, diferena nu este foarte important. Diferenele apar atunci cnd: sunt accesate resurse cum ar fi: fiiere care nu sunt pagini Web, regitri Windows etc., este accesat o baz de date, sunt accesate resurse protejate. Observaii: Chiar dac utilizai ASP.NET Development Server pentru a testa paginile care sunt funcionale, ar trebui sa le testai din nou dup ce le-ai publicat pe un server Web care ruleaz IIS.

Limbajul de scripting server-side ASP.NET

47

III. Limbajul de scripting server-side ASP.NETIII.1. Structura unei pagini ASP.NETOrice pagin ASP.NET presupune dou componente: partea de interfa (controalele care vor fi vizualizate de ctre utilizator) i codul .NET care va fi executat pe server atunci cnd se face o cerere ctre pagina respectiv (numit i code behind). Codul poate fi scris folosind limbajul C# sau Visual Basic .NET. Script-urile ASP.NET sunt fiiere text cu extensia .aspx, care conin controale HTML sau ASP. Codul C# sau VB.NET asociat paginii sau obiectelor din pagin poate fi plasat direct n fiierul cu extensia .aspx, sau ntr-un fiier separat .aspx.cs (pentru C#) sau .aspx.vb (pentru VB.NET). Pentru a evita aa-numitul spaghetti code, unde partea care descrie interfaa este intercalat cu instruciunile care asigur funcionalitatea, este de preferat folosirea unui fiier separat pentru a reine codul. Observaie. n cadrul acestui manual, toate exemplele vor fi prezentate folosind limbajul C#. n cazul n care se gsete direct n pagin, codul este cuprins ntre tag-urile , cu atributul runat = server. Iat o prima pagina web simpl: Exemplul 3.1 first.aspx

protected void Page_Load(object sender, EventArgs e) { output.InnerText = "Hello World!"; } First page

48

n exemplul de mai sus, la ncrcarea paginii web, va fi afiat mesajul Hello world. Codul C# asociat, este scris n cadrul paginii .aspx. Observaii: n Visual Web Developer, pentru a separa codul ntr-un fiier separat, la adugarea unei pagini noi n proiectul curent, se bifeaz opiunea Place code in separate file:

Figura 3.1 Adugarea unei noi pagini web ntr-un proiect

Aceeai aplicaie poate fi realizat scriind codul C# ntr-un fiier separat avnd extensia .aspx.cs: first.aspx First Page

Limbajul de scripting server-side ASP.NET

49

using using using using using using using using using using using using

System; System.Collections; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Xml.Linq;

public partial class first : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { output.InnerText = "Hello World !"; } }

first.aspx.cs

Exemplul 3.2

Observaii: Cu excepia liniei output.InnerText = "Hello World !"; , codul de mai sus este generat automat de Visual Web Developer. Orice pagin web .aspx conine o seciune de directive, care descrie modul n care pagina este procesat de ctre server. Aceast seciune este cuprins ntre tag-urile i precizeaz limbajul utilizat pentru scrierea codului i numele fiierului n care este reinut codul (atunci cnd este cazul):

III.1.1.

Controale ASP.NET

Pentru a realiza layout-ul unei pagini web, ASP.NET pune la dispoziia programatorului o serie de controale predefinite, precum i posibilitatea definirii unor controale proprii. Controalele ASP.NET se mai numesc i controale server deoarece pot fi programate, prin intermediul unui cod server-side, s rspund la anumite evenimente din pagin. Pentru a putea fi accesate prin intermediul codului, aceste controale trebuie sa conin atributele id i runat=server. Exista doua tipuri de controale server: Web si Html. Controalele server HTML corespund controalelor standard HTML, si pot fi create prin adugarea atributului runat=server unui tag HTML. Pentru a putea identifica un control Html n codul server-side, trebuie sa-i atam atributul id: .

50

Cnd scriei cod server-side pentru controalele server HTML de tip input (text, button, checkbox, radioButton) putei folosi proprietatea value pentru a accesa valoarea introdus de utilizator. Proprietatea InnerText reprezint textul cuprins ntre tag-urile de deschidere respectiv nchidere ale unui control Html, iar proprietatea InnerHtml reprezint marcajele Html cuprinse ntre tag-urile de deschidere respectiv nchidere ale controlului Html. Observaii: n Visual Web Developer, putei aduga controale standard HTML din modul design, folosind fereastra ToolBox seciunea HTML.

Controalele server Web ofer mai multe funcionaliti programabile dect cele HTML. Aceste controale pot corespunde mai multor tag-uri HTML, i pot include cod javascript. Sunt cuprinse ntre tag-urile . De exemplu un control Web pentru introducerea datelor de ctre utilizator este textbox:

III.1.2.

Ciclul de via al unei pagini web.

Paginile ASP.NET ruleaz pe server-ul web Microsoft IIS. n urma prelucrrii pe server, rezult o pagin web Html, care este trimis ctre browser. Ciclul de via al unei pagini web are urmtorii pai: 1. User-ul scrie adresa unei pagini web. Acest lucru nseamn o cerere a browser-ului web ctre server, prin intermediul metodei HTTP GET. Pe server, pagina ruleaz pentru prima dat, executndu-se i codul C# existent. 2. Rezultatul este o pagin Html care este trimis browser-ului. 3. User-ul poate introduce date sau apsa un buton, i pagina este trimis napoi server-ului. Dac utilizatorul acceseaz un link, se ncarc o alt pagin, i nici o prelucrare nu este efectuat de pagina iniial. 4. Pagina este trimis ctre browser prin intermediul metodei HTTP POST. n ASP.NET aceast aciune se numete PostBack. 5. Pe server-ul web, pagina ruleaz din nou, i sunt prelucrate informaiile introduse de ctre utilizator n browser. 6. Rezultatul este trimis browser-ului, i astfel se reia ciclul. Procesul de prelucrare a paginii web de ctre server este mprit n mai multe etape. Fiecare etap corespunde unui eveniment asociat paginii. Printre cele mai importante evenimente asociate paginii sunt:

Limbajul de scripting server-side ASP.NET Init se iniializeaz fiecare control server Load se execut la fiecare cerere a paginii Render se genereaz codul html ce va fi trimis browser-ului UnLoad sunt eliberate resursele folosite.

51

III.1.3.

Aplicaii rezolvate

Aplicaia 1. Folosind Visual Web Developer i controale server HTML, creai o pagin web care s conin dou casete text pentru introducerea numelui i prenumelui unei persoane, i un buton la apsarea cruia datele introduse vor fi afiate n pagin cu ajutorul unui tag HTML de tip paragraf. Rezolvare: Se c

Top Related

Utilizare Visual Studio .Net

Visual Foxpro

Initiere in Visual FoxPro

Informatica de Gestiune (Visual Basic)

Visual FoxPro - Oradea

Proiect Visual Basic

Visual Cristina Pavelescu

VISUAL FOXPRO-CURS-BORZA.pdf