354
DESIGNER PAGINI WEB 1 Anca Mehedinţu Irina Ciocîrlan DESIGNER PAGINI WEB
| Date post: | 03-Feb-2016 |
| Category: |
Documents |
| Upload: | teo-giuvelea |
| View: | 260 times |
| Download: | 5 times |
DESIGNER PAGINI WEB
1
Anca Mehedinu Irina Ciocrlan
DESIGNER PAGINI WEB
DESIGNER PAGINI WEB
2
INTRODUCERE
Designerul de pagini de web (studii medii) este liantul ntre clienii, persoane juridice
sau persoane fizice, fiecare cu nevoile lor i tehnologia de promovare prin pagini web. Este
un bun cunosctor al structurii tehnologice a internetului, a mediului specific n care sunt
instalate-publicate, gzduite, promovate i vizitate paginile diferitor clieni de ctre
vizitatorii din ntreaga lume. Este cel care face transferul de informaie primit de la client,
sub o anume form, ntr-o manier ct mai apropiat de vizitatori.
Vizualizarea coninutului informaional destinat vizitatorilor de pagini web se face prin
intermediul diferiilor navigatori sau browseri, cum ar fi: Internet Explorer, Netscape,
Opera, Mozilla, Konqueror sau Firefox.
Designerul de pagini web pune n practic cunotine din domeniul marketing,
realizeaz analize i sinteze, pentru a descoperi cerinele vizitatorilor i clienilor, are
aptitudini specifice proiectanilor n domeniul tehnologiei informaiei dar i calitile unui
artist cu ajutorul crora modeleaz site-urile. El reuete s mbine datele tehnice ntr-o
structur artistic ct mai plcut i funcional.
ntruct proiectarea unei pagini web presupune activiti din domenii conexe, este
necesar munca n echipe de webdesigneri care s conlucreze la realizarea acestor lucrri
complexe. Ocupaia satisface un segment limitat al nevoilor clienilor, printr-o specializare
ntr-o anumit zon a proiectrii de pagini de internet: texte, grafic i animaie, coninut,
multimedia, interactivitate.
Cunotine necesare practicii ocupaiei:
calculatoare i subsisteme hardware: structura i arhitectura calculatoarelor;
Serviciul World Wide Web;
HTML ca limbaj de marcare al hypertext-ului;
JavaScript i alte limbaje de scriptare;
Framework.NET
PHP & MySQL.
Autorii
Septembrie 2014
DESIGNER PAGINI WEB
3
CUPRINS
INTRODUCERE ............................................................................................................. 2
CUPRINS ......................................................................................................................... 3
Partea I ................................................................................................................................. 4
Partea II .............................................................................................................................. 12
Partea III............................................................................................................................. 16
PARTEA IV ....................................................................................................................... 19
PARTEA V ........................................................................................................................ 29
PARTEA VI ....................................................................................................................... 44
PARTEA VII ................................................................................................................... 274
PARTEA VIII .................................................................................................................. 278
PARTEA IX ..................................................................................................................... 282
PARTEA X ...................................................................................................................... 301
PARTEA XI ..................................................................................................................... 307
PARTEA XII ................................................................................................................... 312
PARTEA XIII .................................................................................................................. 322
PARTEA XIV .................................................................................................................. 330
PARTEA XV ................................................................................................................... 334
PARTEA XVI .................................................................................................................. 340
Partea XVII ...................................................................................................................... 348
BIBLIOGRAFIE .......................................................................................................... 352
DESIGNER PAGINI WEB
4
PARTEA I
DEZVOLTAREA PROFESIONAL.
COMUNICAREA INTERACTIV LA
LOCUL DE MUNC. LUCRUL N ECHIP
DESIGNER PAGINI WEB
5
1.1. DEZVOLTAREA PROFESIONAL
Aspecte generale
Conducerea propriei dezvoltri profesionale nseamn a fi capabil de a:
Evalua propriile performane n comparaie cu cerinele slujbei voastre prezente sau viitoare prin solicitarea permanent a unui feedback din partea colegilor i a clienilor;
Identifica un stil personal de nvatare pentru direcionarea dezvoltarii competenelor voastre.
Elabora un plan de dezvoltare personal i a-l aplica;
Utiliza diverse metode de investigare a intereselor personale n scopul dezvoltrii sau mbunatatirii cunotinelor i competenelor;
Identifica i exploata oportunitaile de dezvoltare profesional.
Cteva informaii de baz
Dezvoltarea profesional nseamna s i intelegi propriile puncte forte i puncte slabe, s i identifici obiectivele i cum poi s te ajui pe tine nsui s le atingi. Pe parcursul definirii competenelor din cadrul acestui program privind experiena de munc vi se va solicita s identificai n fiecare etap punctele forte i mbuntirile pe care le putei aplica n afara experienei de munc, n viitoarea voastr carier.
Dezvoltarea profesional proprie a captat o importan tot mai mare n ultimele decenii. n
prezent este mult mai probabil s aveti mai multe cariere n cadrul mai multor organizaii, iar ceea ce n trecut era cunoscut drept scara unei cariere, este astazi o expresie nvechit. Acum, tendina s-a indeprtat de la ideea de urmare a unei ci prestabilite de promovare lucrnd pentru acelai angajator, n schimb este mult mai posibil s castigai experien dintr-o
varietate de funcii n diferite organizaii, transfernd competenele i experienele de la una la
alta.
Probabil vei recunoate din experienele pe care le-ai avut n cadrul colii i universitii c suntei mai buni la anumite lucruri dect la altele. Unele vi se par uoare, la altele trebuie s petrecei mai mult timp cercetnd, nvatnd i exersnd. Acelai principiu se aplic i carierei voastre. Identificarea unei competene sau a unui domeniu de cunotine pe care dorii s le mbunttii reprezint un pas, dar cu toate acestea merit s petrecei o perioada de timp analiznd cum voi ca persoane ai putea nvaa cel mai eficient. Prin aceasta putei s v directionai modul de abordare ctre nvaare i mbuntirea competenelor, fie c acest
DESIGNER PAGINI WEB
6
lucru nseamn cercetare sau strngerea de informaii de pe Internet sau participarea la cursuri
de instruire interactive.
Un mod de identificare a preferinelor legate de stilul vostru de nvare este cel descris de
Peter Honey i Alan Mumford. Cercetrile pe care acetia le-au ntreprins indic faptul c puteti nvata mult mai repede dac folositi stilul vostru natural de a invata. Un rezumat al acestor stiluri de nvare poate fi gasit pe site-ul web al EFWE, www.efwe.org.
Dezvoltarea profesional nu trebuie realizat independent. Dimpotriv, feedback-ul din partea
colegilor, a prietenilor i mentorilor are un rol vital n a v ajuta s identificai care sunt punctele slabe i zonele care trebuie dezvoltate. Solicitarea unui feedback nu trebuie s fac parte doar din procesul anual de revizuire, ci trebuie s fie o constant de-a lungul ntregii voastre activiti. Deschiderea ctre feedback-ul pe care l primii reprezint de asemenea o abilitate esenial, la fel ca i disponibilitatea de a aciona conform acestuia, n cazul n care considerai necesar. Planurile de dezvoltare personal (PDP) sunt un instrument folositor pentru construirea unei structuri n spatele obiectivelor dumneavoastr, iar acestea pot fi ct de simple sau detaliate dorii.
Este ilustrat un exemplu de baz prin care se identific paii i oportunitile pentru atingerea scopurilor voastre, suportul necesar pentru ndeplinirea obiectivelor i se specific perioada de timp n care le vei obine.
Exemplu
Domeniu de competen
Pai De ce suport am nevoie?
Perioada
de timp
Capacitatea de
a face
prezentri
1.Participarea la un curs
de
formare a abilitilor de prezentare.
2.Prezentarea proiectului
n
cadrul unei sedine interne.
3. Identificarea altor
oportuniti de prezentare pe masur ce apar.
Obinerea aprobrii pentru curs de la
managerul direct.
Obinerea acordului efului de departament pentru
a m prezenta la sedin. Obinerea sprijinului
managerului direct
pentru identificarea
altor oportunitai i obinerea feedback-ului
1 lun 2 luni Permanent
Recomandari:
Preferina pentru modul de nvare i dezvoltare de noi competene se va schimba n timp i poate fi influenat de mediu i rolul pe care l avei prin funcia voastr. Periodic, trebuie s analizai dac preferinele voastre s-au schimbat, pentru a v ajuta n dezvoltarea voastr viitoare.
DESIGNER PAGINI WEB
7
Profitai de ansa de a experimenta noi modaliti de dezvoltare a competenelor. Nu le excludei doar pentru ca nu le-ai mai ncercat niciodat. Obinuii-v s v stabilii obiective n mod regulat i s v analizai progresul prin implicarea altora.
Dezvoltarea profesional se refer la competena necesar autoevalurii capacitilor proprii i aplicrii n activitatea practic a cunotinelor acumulate la diverse forme de formare continu, asigurnd astfel mbuntirea performanelor profesionale.
Elemente de competen Criterii de realizare
1. Identific necesarul de perfecionare 1.1. Necesarul de perfecionare este stabilit prin
autoevaluare obiectiv 1.2. Necesarul de perfecionare este identificat
pe baza observaiilor venite din partea echipei multidisciplinare
2. Autoinstruire profesional 2.1. Materialele de specialitate sunt consultate
periodic/ori de cte ori este necesar pentru
asigurarea unui volum de informaii noi necesare n activitatea desfurat 2.2. Autoinstruirea profesional este fcut prin
consultarea surselor de informare
corespunztoare necesarului de informaii 2.3. Cunotinele dobndite sunt aplicate n activitatea curent n scopul creterii calitii muncii
2.4. Cunotinele dobndite sunt aplicate n interesul beneficiarului
Gama de variabile
Materialele documentare de specialitate pot fi: publicaii de specialitate, manuale de prezentare i exploatare sau ghiduri de utilizare a altor produse software, participare la expoziii, trguri, simpozioane de specialitate etc.
Pentru autoinstruire pot fi folosite: manuale de specialitate, reviste, documentaie electronic, INTERNETul etc.
Ghid pentru evaluare
Cunotinele necesare se refer la: - Participare la cursuri de instruire - Citirea de publicaii de specialitate - Aplicarea cunotinelor dobndite
DESIGNER PAGINI WEB
8
La evaluare se urmrete: - Contiinciozitatea de a-i mbunti activitatea profesional; - Capacitatea de analiz i sintez viznd identificarea necesarului de perfecionare ; - Capacitatea de a procesa informaiile; - Obiectivitate n autoevaluarea nivelului de cunotine; - Receptivitate fa de informaiile de specialitate.
1.2. COMUNICAREA INTERACTIV LA LOCUL DE
MUNC
Descriere
Unitatea se refer la competena de comunicare a sarcinilor, evenimentelor i a tuturor aspectelor legate de activitile de la locul de munc, n cadrul discuiilor n grup sau individuale i la capacitatea de a formula i a transmite opinia.
Elemente de
competen Criterii de realizare
1. Transmite i primete informaii
1.1. Metoda de comunicare este utilizat corespunztor situaiei date pentru transmiterea i primirea corect i rapid a informaiilor. 1 .2. Transmiterea i primirea informaiilor este efectuat permanent cu respectarea raporturilor ierarhice i funcionale. 1 .3. Limbajul utilizat este specific locului de munc pentru primirea i transmiterea informaiilor cu corectitudine. 1 .4. Modul de adresare utilizat este concis i politicos. 1 .5. ntrebrile utilizate sunt pertinente i logice pentru obinerea de informaii suplimentare i clarificri.
2. Particip la discuii de grup
2.1. Opiniile i punctele de vedere proprii sunt communicate deschis pentru clarificarea problemelor aprute. 2.2. Opiniile proprii sunt susinute cu argumente clare, prin intervenii prompte i logice. 2.3. Participarea la discuii n grup este efectuat prin respectarea opiniilor i a drepturilor celorlali colegi. 2.4. Problemele sunt discutate i rezolvate printr-un proces agreat i acceptat de toi membrii grupului. 2.5 Divergenele aprute sunt comunicate deschis efului direct, pentru rezolvarea acestora cu promptitudine.
2.6 Divergenele aprute sunt rezolvate rapid, pentru desfurarea unei activiti fluente.
Gama de variabile
Unitatea se aplic la toate ocupaiile din domeniul informaticii, proiectrii i publicitii (electronice i tipografice).
DESIGNER PAGINI WEB
9
1. Surse de informaii: documentaia (fia de proiect, fia de lucrare) specifice lucrrii, etaloane, referine, sarcini verbale / scrise de la efii direci .
2. Forme de comunicare: scris / verbal
Comunicarea se refer la activitile procesului de creaie design, respectiv de implementare punere n opera a concepiei.
Ghid pentru evaluare
Cunotine necesare: - Terminologia de specialitate.
La evaluare se urmrete: 1. Utilizarea corect a terminologiei de specialitate; 2. Adaptarea stilului de comunicare la situaie i interlocutor; 3. Capacitatea de selecie a informaiile primite; 4. Politeea i promptitudinea la transmiterea i recepionarea informaiilor; 5. Receptivitatea, adaptabilitatea; respectul faa de prerile altor persoane.
1.3. LUCRUL N ECHIP n zilele noastre, individualitatea si originalitatea personala au pierdut teren in fata
muncii in echipa, mai ales in cazul sarcinilor complexe. Toate companiile bazate pe
informaie, care practica tehnologii de vrf, servicii ireproabile si un management modern si eficient, solicita din partea personalului abilitati superioare de comunicare si team-player
(lucru in echipa). O echipa profesionista este o structura in care intregul este mai mult decat
suma partilor. Membrii formatiei actioneaza in sinergie si consens pentru realizarea unui
obiectiv comun. Echipa inseamna comunicare directa si fatisa, obligand la asumarea
constanta a responsabilitatii propriilor obiective, deoarece neindeplinirea acestora este
imediat sanctionata de catre grup.
In managementul resurselor umane, termenul de echipa/team este frecvent utilizat, desi
cel de retea tinde sa-i ia rapid locul. Adesea il folosim pentru a ne referi la intreaga
companie, deoarece scopurile propuse nu pot fi atinse decat prin coroborarea tuturor fortelor.
Dar totdeauna este dificil sa sudezi, sa motivezi, sa pregatesti si sa conduci o echipa strans
unita, formata din peste doisprezece membri.
Diagnosticarea echipelor
Studii realizate in peste 150 de organizatii din diferite domenii si la care au participat
peste 6000 de persoane pun in evidenta faptul ca o echipa performanta este caracterizata de 5
dinamici cheie:
Membrii echipei. Membrii echipei au competentele tehnice si interpersonale necesare
pentru a putea lucra eficace in echipa.
Relatiile de lucru in cadrul echipei. Relatiile in cadrul echipei sunt constructive:
caracterizate prin deschidere si sprijin reciproc.
DESIGNER PAGINI WEB
10
Procesele pe care le foloseste echipa. Rezolvarea problemelor si luarea deciziilor in
echipa se face la timp si cu cele mai bune rezultate.
Atributele liderului de echipa. Conducerea incurajeaza realizarile colective si lucrul
in echipa.
Factorii organizationali care influenteaza lucrul in echipa. Mediul organizational
(practicile manageriale, sistemele, structurile si procesele) promoveaza in mod sincer
colaborarea si lucrul in echipa.
Pentru a actiona eficace in directia dezvoltarii unei echipe trebuie sa stabilim unde
anume este necesar sa se focalizeze interventia sau daca este cazul unei interventii sistemice.
Instrumentele pe care le utilizam pentru diagnosticare vizeaza aceste 5 dinamici cheie:
Effective Team Member (ETM) este un instrument bazat pe Feedback la 360 de
grade care analizeaza abilitatile individuale de lucru in echipa. O varianta simplificata
a ETM poate fi folosita in timpul programelor de teambuilding ca baza pentru
elaborarea unor planuri individuale de invatare si dezvoltare.
Analiza Motivatiei Echipei (AME) este un instrument usor de aplicat si interpretat
care permite identificarea factorilor motivationali asupra carora trebuie actionat
pentru a obtine cel mai mare impact.
Metoda Sedintelor Asistate (MSA) consta in participarea consultantilor nostri la o
serie de sedinte obisnuite ale echipei. Dupa etapa de observare urmeaza oferirea de
coaching echipei pentru cresterea performantelor.
After Action Review (AAR) este o metoda de coaching pentru echipe utilizata si de
armata SUA care ne permite sa ajutam echipa sa progreseze in ceea ce priveste
eficacitatea si eficienta proceselor ei lucru. Utilizam un set de 12 criterii de evaluare a
performantei definite in termeni comportamentali. Folosim AAR atat in faza de
diagnosticare cat si in sesiunile de reflectie din cadrul programelor de teambuilding.
Leadership Effectiveness Apraisal Package (LEAP) este un instrument bazat pe
Feedback la 360 de grade care ofera liderului echipei o oglinda a diferentelor dintre
perceptia proprie si cea a subordonatilor, colegilor si sefilor referitoare la
competentele sale de conducere. Competentele evaluate sunt direct corelate cu
capacitatea de a conduce echipa catre performante inalte.
Analiza Mediului Organizational (AMO) urmareste stabilirea aspectelor (practici
manageriale, sisteme, structuri si procese) asupra carora trebuie sa ne concentram
pentru a ajuta la crearea unui mediu favorizant pentru lucrul in echipa. Folosim in
acest scop metode cum sunt: workshop-uri cu echipa, interviuri cu manageri si
persoane cheie din cadrul organizatiei, chestionare, tehnici proiective.
DESIGNER PAGINI WEB
11
DESIGNER PAGINI WEB
12
PARTEA II
APLICAREA PROCEDURILOR DE
CALITATE
DESIGNER PAGINI WEB
13
ESTE NEVOIE DE ORDINE
Pentru obinerea unui un rezultat n bun web design este nevoie de ordine. Lucrul
haotic, "vznd i fcnd" aduce arareori rezultate. n plus, ntotdeauna cineva risca s fie
nemulumit n final. Aadar, toate etapele de lucru trebuie s fie clare de la nceput, puse
pe hrtie i urmate, astfel nct nimic s nu rmn pe dinafar. Trebuie s existe
proceduri testate i eficiente pentru fiecare stadiu de lucru.
Proceduri de calitate, pe stadii de lucru, n proiectarea paginilor web
Activitatea se desfoar n compartimentul de informatic, atelier- birou, sau client -
dac condiiile tehnice permit.
n web design, orice detaliu uitat devine o problema mai trziu!
PROCEDUR PRIVIND REALIZAREA UNUI SITE
Colectarea datelor de la client - aadar, pentru nceput designerul se ntlnete
cu clientul. Afl despre ce este vorba i care sunt nevoile reale ale clientului,
dincolo de "am nevoie de un site". Se intereseaz de afacerea lui, caut esena i o
ntelege din toate materialele de prezentare i din discutie. Se traseaz primii pai:
Primul pas n web design - elaborarea de prototipuri: interfata grafica, sau
designul site-ului, layoutul, faa, prima pagin, un "print-screen" a ceea ce se va
construi n etapele urmtoare.
Al doilea pas n web design - elaborarea site-ului : grafica aplicat; acum
dezvoltm fiecare pagin pornind de la tema grafic aprobat, facem analizele de
"usability", gndim n detaliu fiecare meniu, pagin n aa fel nct experiena de
navigare s fie ct mai bun, iar conversia cat mai mare.
Al treilea pas - web development testarea, publicarea, i ntreinerea site-
ului: acum programm site-ul i dm viata tuturor elementelor de web design
stabilite n etapele anterioare; acest pas se finalizeaza cu o verificare a calitii,
pentru a fi siguri nu numai ca nu ne-a scapat nimic, dar i ca toate elementele sunt
mbinate exact asa cum trebuie. De asemenea trebuie intoduse textele. Fr texte,
un site nu exist. Se poate ntmpla s se construiasc un site al crui continut s
nu fie mulumitor , pentru ca nu aduce vizite suficiente, nu este uor de gasit n
Google i alte motoare de cutare sau este gsit dupa cuvinte i fraze care nu
intereseaz. Pe scurt, textele sunt o problem. Pentru efecte rapide la inceput, este
DESIGNER PAGINI WEB
14
suficient s adaugam corect coninutul n site. Ulterior, pentru c nici concurena
nu st degeaba, trebuie s facem periodic cercetarea online necesar, s revizuim
constant textele, s schimbm cte ceva acolo unde este nevoie i s adaugam
coninut nou.
Criterii de performan pe care trebuie s le ndeplineasc un site
1. Web design ORIGINAL
Unul dintre principiile de web design este originalitatea. n prezent exista sute de
servicii care furnizeaza site-uri "la cheie", cu "design personalizat", dar care opereaza cu
interfete grafice lucrate n prealabil (template-uri) i carora le schimba culorile i le
adauga sigla beneficiarului. Aceste site-uri nu au un design original i se poate avea
surpriza de a regsi pe internet un site cu un aspect identic sau aproape identic.
2. Web design CORECT
Dei aspectul grafic poate fi acelai, ntre doua site-uri pot exista diferene majore de
execuie. Dup ce aspectul grafic dorit a fost hotrt, site-urile sunt lucrate prin utilizarea
unui cod specific care are o serie de particularitai i necesit rigurozitate. ntocmai ca o
limba strin, codul poate fi folosit mai fluent sau mai stngaci, n funcie de cunotinele
pe care le deine programatorul.
PROCEDUR PRIVIND CODAREA CORECT
pasajele de cod s poata fi uor descifrate i integrate cu elementele noi de
programare pentru ca atunci cand doriti s adaugati o componenta sau un
element functional nou n site-ul dumneavoastra s avei posibilitatea
interventiilor ulterioare facile.
cod curat care s asigure execuia mai fluid a diverselor funcii. Acest lucru
trebuie s conduc la o vitez de ncrcare mai mare. Acest aspect poate parea
fr importan, dar avnd n vedere viteza conexiunilor la care au n prezent
acces din ce n ce mai muli utilizatori de internet n cazul executarii unei cutri
ntr-un site cu continut complex, fiecare milisecunda conteaza.
cod curat, care s favorizeze site-ul la afiarea n lista de rezultate n motoarele
de cutare serioase (ex.:Google). Dac selectati View>Page Source (Ctrl+U n
Mozilla Firefox) sau View>Source (n Internet Explorer) vei putea observa ceea
ce "vd" motoarele de cutare atunci cnd intr n site-ul dumneavoastra. Cu ct
DESIGNER PAGINI WEB
15
codul este mai curat, cu att este mai favorizat optimizarea ctre deschiderea
site-ului n motoarele de cutare.
3. Web design USABILITY
Un site trebuie s fie uor de utilizat att pentru persoana care l administreaz
(beneficiar) ct i pentru vizitatori (poteniali clienti). Accesibilitatea funciilor,
vizibilitatea butoanelor, poziionarea meniurilor i a diverselor elemente de interes intr-o
pagina web este esenial pentru transformarea simplilor vizitatori n clieni. Noiunea de
"uzabilitate" definete msura n care un website este accesibil vizitatorilor si, dar i
motoarelor de cutare .
Un site frumos nu este neaparat i "usable"!!!!
n urm cu civa ani erau la mod site-urile realizate integral n Flash i exista nc
tendina pentru prezena online plin de animaie. Unul dintre dezavantajele site-urilor
realizate integral n Flash este compatibilitatea pariala cu motoarele de cutare ,
situaie n care coninutul este arareori indexat corespunztor, iar site-ul este greu de
gasit. n acelasi timp, un site care servete scopului pentru care a fost creat nu trebuie s
fie exclusiv pe gustul proprietarului su, ci i pe gustul celor care urmeaz sa-l viziteze.
Nu putem alege un fundal cu flori de cmp pentru un site dedicat modului de fabricaie al
uruburilor i piulielor, de exemplu. De asemenea melodia preferat a clientului este
arareori un fundal muzical potrivit pentru site.
4. Interaciunea vizitatorilor cu site-ul
Un website i atinge scopul atunci cnd publicul pentru care a fost creat poate beneficia
optim de coninutul acestuia. Daca site-ul nu direcioneaza vizitatorii ctre accesarea
informaiilor disponibile, iar coninutul este greu de gsit, va pierde trafic. Vizitatorii se
plictisesc rapid, nu au rabdare s caute i tiu c pot gasi informaii, mai repede, i n alta
parte. Prin urmare, coninutul unui site trebuie s fie accesibil, lizibil i vizibil.
5. Interactiunea motoarelor de cutare cu site-ul
Un website, pentru a atrage vizitele publicurilor int, trebuie s poat fi gsit rapid de
ctre motoarele de cutare i n directoarele cel mai des folosite. Astfel, exist procedurile
de optimizare a site-urilor pentru motoarele de cutare , care, daca sunt aplicate corect,
pot s dea rezultate foarte bune i s poziioneze site-ul preferenial fa de alte site-uri al
cror coninut nu este optimizat.
DESIGNER PAGINI WEB
16
PARTEA III
APLICAREA NORMELOR DE TEHNICA
SECURITATII MUNCII SI A
PREVEDERILOR PENTRU STINGEREA
INCENDIILOR
DESIGNER PAGINI WEB
17
INSTRUCIUNI SPECIFICE PROPRII
de aprare mpotriva incendiilor n spaii administrative, birouri, etc.
Art. 1 Se va reduce la minimum pericolul potenial de incendiu, n sensul limitrii la
strictul necesar a materialelor combustibile care se introduc n spaiile respective.
Art. 2 n interiorul spaiilor respective i pe holurile cldirilor n care sunt amplasate
acestea, fumatul este strict interzis.
Art. 3 Fumatul este permis numai n spaiile amenajate, prevzute cu perei de separaie i
ventilaie, astfel nct noxele rezultate s fie evacuate i s nu ptrund n holul cldirilor
sau interiorul spaiilor de lucru (birouri, sli).
Art. 4 Holurile cldirilor i casa scrilor vor fi meninute liber permanent. n caz de
incendiu acestea devin ci de evacuare a personalului i bunurilor materiale, de aceea se
interzice blocarea cu dulapuri, fiete, etc., fie i cu caracter temporar.
Art. 5 Amplasarea meselor de lucru se va face astfel nct, de la fiecare loc de munc
pn la ua de evacuare, s existe culoar pentru evacuarea persoanelor i bunurilor
materiale.
Art. 6 Se interzice utilizarea surselor de foc deschis (reouri, aeroterme etc.) pentru
nclzirea spaiilor de lucru sau n alte scopuri.
Art. 7 Prizele pentru alimentarea consumatorilor cu energie electric, vor avea marcat
lng ele tensiunea de alimentare.
Art. 8 Nu se vor alimenta la aceiai priz mai muli consumatori, pentru evitarea
suprasolicitrii acesteia, ceea ce ar conduce la nclziri repetate, urmate de deteriorarea
izolaiei conductorilor de alimentare i implicit la apriia nceputurilor de incendiu.
Art. 9 Se vor utiliza numai prize legate la centura de mpmntare a cldirii, iar
consumatorii vor fi alimentai prin techere cu protecie (al treilea fir).
Art. 10 Orice lucrri cu foc deschis, pentru remedierea unor deficiene aprute, se vor
executa numai dup ntocmirea permisului de lucru cu foc, realizarea msurilor necesare,
cu avizul pompierilor sau, dup caz, chiar sub supravegherea acestora.
Art. 11 La terminarea lucrului, la toi consumatorii electrici, se va ntrerupe alimentarea
cu energie electric, prin scoaterea din priz (calculatoare, imprimante, etc.).
Art. 12 Pentru stingerea incendiilor se vor utiliza n general stingtoare cu praf i CO2
(P3, P5, P6, P10 etc.) exceptnd incendiile la componentele electrice. Litera P nscris pe
DESIGNER PAGINI WEB
18
etichet arat c substana de stingere este praf n amestec cu CO2, iar cifra care o
nsoete arat cte kilograme de substan de stingere conine fiecare tip de stingtor.
Art. 13 Pentru stingerea incendiilor la componentele electronice calculatoare,
imprimante, etc. se utilizeaz stingtoare cu CO2 (G3, G6,, etc.). Litera G arat c
stingtorul (butelia) conine numai gaz CO2, iar cifra arat cte kilograme de gaz conine
butelia.
DESIGNER PAGINI WEB
19
PARTEA IV
INTRODUCEREA INFORMAIILOR I
DATELOR N FORMAT ELECTRONIC
DESIGNER PAGINI WEB
20
I. Data i informaia
Informaia poate fi format din texte, numere, imagini sau sunete.
Datele sunt codificri binare ale informaiei, deoarece calculatorul nu tie s
prelucreze dect iruri binare, care pot fi modelate fizic prin impulsuri de curent,
cu dou niveluri de tensiune, ce corespund celor dou cifre binare:0 i 1.
II. Tipuri de programe de introducere a datelor
a) Editoare de text: sunt o aplicaie software (un program) folosit pentru editarea
(= crearea i modificarea) de fiiere text, mai mult sau mai puin complexe. Spre
deosebire de procesoarele de texte, un editor de text nu ofer funciile complexe
specifice crerii asistate de calculator a publicaiilor (numite aplicaii de tip
DeskTop Publishing, DTP).Editoarele de text se folosesc ndeosebi pentu scrierea
(dezvoltarea) de programe i de pagini web (pot fi: simple ex.:Notepad, complexe:
phpDesigner7 (editor php printre altele) etc.).
b) Editoare grafice complexe: Schimb sau mbuntesc imaginile grafice de
exemplu:imagini bitmap, fotografii, imagini grafice vectoriale etc. Folosind un
editor grafic, imaginile pot fi modificate de utilizator folosind stilou, pensula,
aerograful i alte instrumente. Display-urile computerelor sunt alctuite din puncte
minuscule numite pixeli . Imaginile bitmap sunt de asemenea construite folosind
DESIGNER PAGINI WEB
21
aceste puncte. Cu ct sunt mai mici i mai apropiate, cu att calitatea imaginii este
mai ridicat, dar i mrimea fiierului necesar pentru stocarea ei. Dac imaginea
este afiat la o mrime mai mare dect cea la care a fost creat iniial, devine
granulat i neclar, deoarece pixelii din alctuirea imaginii nu mai corespund cu
pixelii de pe ecran. Exemple de editoare grafice: simple Paint, etc. complexe
CorelDRAW, Adobe Illustrator, etc.
c) Programe de calcul tabelar: uureaz sistemul de calcul i ordonarea alfabetic a
datelor dintr-un tabel (Tabelul este o baz de date n care se face ordonarea pe
rnduri orizontale i coloane verticale dup diferite criterii a datelor sau textelor
culese. Prin capul tabelei se stabilete punctele de referin a modului de
ordonare a datelor n cmpurile coninute de coloane sau rndur). Exemple
programe de calcul tabelar: MS Excel - cel mai folosit.
d) Programe (sisteme) de gestiune a bazelor de date: reprezint totalitatea
programelor utilizate pentru crearea, interogarea i ntreinerea unei baze de date.
Include dou categorii de module: module care sunt comune cu cele ale sistemelor
de operare ale calculatoarelor i module cu funcii specifice bazei de date.( O baz
de date, uneori numit i banc de date, reprezint o modalitate de stocare a
unor informaii i date pe un suport extern (un dispozitiv de stocare), cu
posibilitatea extinderii uoare i a regsirii rapide a acestora. Cel mai rspndit tip
de baze de date este cel relaional, n care datele sunt memorate n tabele. Pe lnga
tabele, o baz de date relaional mai poate conine: indeci, proceduri stocate,
declanatori, utilizatori i grupuri de utilizatori, tipuri de date, mecanisme de
securitate i de gestiune a tranzaciilor etc). Exemplu de sisteme de gestiune a
bazelor de date: MS Access, MySQL, VisualFox, etc.
e) Softuri pentru accesul direct la o baz de date: cel mai bun exemplu este
produsul phpMyAdmin (instalat i pe calculatoarele noastre n cadrul platformei
WAMP) care este un utilitar software gratuit scris n PHP destinat s se ocupe de
administrarea MySQL pe World Wide Web. phpMyAdmin suport o gam larg
de operaii cu MySQL. Operaiunile cel mai frecvent utilizate sunt suportate de
ctre interfaa de utilizator (gestionarea bazelor de date, tabele, cmpuri, relaii,
DESIGNER PAGINI WEB
22
indici, utilizatori, permisiuni, etc), n timp ce noi avem posibilitatea de a executa
direct o declaraie SQL.
III. Procesul informaional
Este format din:
1. Introducerea datelor;
2. Prelucrarea datelor;
3. Extragerea informaiilor;
4. Arhivarea(stocarea)datelor.
IV. Introducerea datelor
Este procesul prin care datele sunt prelucrate de calculator i convertite ntr-un format pe
care-l poate prelucra.
Introducerea datelor se poate face:
- pe loturi(batch)
- direct(on-line)
Pentru a ntelege mai bine ideea de intoducere a datelor n calculator s vedem care sunt
sursele care furnizeaz informaia:
DESIGNER PAGINI WEB
23
Tipuri de fiiere:
Tipuri de baze de date:
DESIGNER PAGINI WEB
24
Tipuri de bnci de date:
V. Introducerea datelor cu ajutorul unui ablon de tip formular
DESIGNER PAGINI WEB
25
Un formular este un obiect din baza de date care se utilizeaz pentru a crea o interfa
utilizator pentru o aplicaie de baz de date. Un formular legat este unul conectat n
mod direct la o surs de date cum ar fi un tabel sau o interogare i poate fi utilizat pentru a
introduce, a edita sau a afia date din sursa de date. Alternativ, este posibil s creai un
formulat nelegat care s nu se lege direct la o surs de date, dar care s conin n
continuare butoane de comand, etichete sau alte controale de care avei nevoie pentru a
opera aplicaia.
Un ablon formular este un fiier singular ce conine mai multe fiiere formular de suport
sau fiiere surs, cum ar fi fiiere care definesc modul de afiare a controalelor n ablonul
formular, fiiere pentru imagini care apar n ablonul formular i fiiere de programare
care activeaz n ablonul formular comportamente particularizate. Aceste fiiere de
suport sunt cunoscute mpreun ca fiiere formular. La proiectarea unui ablon formular,
se pot vizualiza i se poate lucra cu fiierele formular care alctuiesc ablonul formular
extrgnd i salvnd acele fiiere formular ntr-un folder.
Cnd completeaz formulare, utilizatorii introduc informaii tastnd n casete text,
executnd clic pe elementele unei liste, bifnd casete de selectare i efectund alte aciuni.
Obiectele de interfa grafic utilizator interacioneaz cu obiecte care se numesc
controale. Controalele se utilizeaz pentru a afia date sau opiuni, a efectua o aciune sau
a uura citirea interfeei utilizator. Informaiile care se introduc ntr-un control sunt
stocate n sursa de date (Surs de date: Colecia de cmpuri i grupuri care definesc i
stocheaz datele unui formular . Controalele din formular sunt legate la cmpurile i
grupurile din sursa de date.a formularului).
Majoritatea acestor controale dintr-un formular sunt asociate sau legate la sursa de date a
ablonului formular. Majoritatea controalelor, inclusiv casetele text, casetele de selectare
i casetele list, sunt legate la cmpuri. Dac un control nu este legat la un cmp sau grup
din sursa de date sau dac este legat incorect, informaiile introduse n control nu se pot
salva corect n fiierul formularului adiacent.
Prezentm mai jos o list a controalelor cel mai des utilizate controalele standard - care
se asociaz de obicei cu colectarea i afiarea informaiilor:
Control Pictogram Descriere
DESIGNER PAGINI WEB
26
Caset text
Controlul cel mai frecvent
utilizat n formular.
Utilizatorii pot introduce
orice tip de text neformatat
ntr-o caset text, cum ar fi
propoziii, nume, numere,
date i ore. Casetele text nu
pot conine text formatat.
Caset text mbogit
Un control care poate
conine text formatat, aldin
sau cursiv, diverse fonturi,
dimensiuni de font i culori
de font. n plus, ntr-o caset
text mbogit utilizatorii pot
insera imagini, liste i
tabele.
Caset cu list vertical
Un control care prezint
utilizatorilor o list de
opiuni ntr-o caset. Pentru
a selecta un element din
list, utilizatorii fac clic pe o
sgeat pentru a deschide
lista de opiuni. Opiunile
pot s provin dintr-o list
creat manual, de la valorile
sursei de date ale
formularului sau de la
valorile care provin din
conexiunea de date la un
document XML, baz de
date, serviciu Web sau
bibliotec ori list.
DESIGNER PAGINI WEB
27
Caset combo
Un control care prezint
utilizatorilor o list de
opiuni ntr-o caset de unde
utilizatorii selecteaz
elementul corespunztor sau
l tasteaz pe cel propriu.
Opiunile pot s provin
dintr-o list creat manual,
de la valorile sursei de date
ale formularului sau de la
valorile care provin din
conexiunea de date la un
document XML, baz de
date, serviciu Web sau
bibliotec ori list.
Caset list
Control care prezint
utilizatorilor o list de
opiuni ntr-o caset de unde
utilizatorii selecteaz
elementul adecvat. Opiunile
pot s provin dintr-o list
creat manual, de la valorile
sursei de date ale
formularului sau de la
valorile care provin din
conexiunea de date la un
document XML, baz de
date, serviciu Web sau
bibliotec ori list.
Caset de selectare
(CheckBox pentru un
formular Web)
Un control care permite
utilizatorilor s seteze valori
da/nu sau adevrat/fals,
DESIGNER PAGINI WEB
28
adugnd sau eliminnd un
marcaj de selectare dintr-o
caset ptrat mic. Cu
ajutorul CheckBox-urilor
userul are posibilitatea de a
alege unul, doua sau mai
multe variante de raspuns.
Buton opiune (radio)
Un control care permite
utilizatorilor s selecteze un
set de alegeri care se exclud
reciproc. Cnd se selecteaz
un buton de opiune dintr-un
grup, celelalte butoane de
opiune se debifeaz. Un
grup de butoane de opiune
este legat la un singur cmp
din sursa de date, iar fiecare
buton de opiune salveaz o
valoare diferit n
respectivul cmp.
Buton (de trimitere
pentru un formular Web)
Un control care se poate
utiliza pentru a remite un
formular sau interoga o baz
de date, ntre alte
posibiliti. De asemenea,
butonul se poate asocia la
reguli sau cod particularizat
care se execut cnd
utilizatorii fac clic pe buton.
DESIGNER PAGINI WEB
29
PARTEA V
PROCESAREA INFORMATIILOR SI
DOCUMENTELOR DIN FORMATE
BRUTE
DESIGNER PAGINI WEB
30
MICROSOFT WORD
Microsoft Word este o aplicaie de procesare de text i face parte din suita de aplicaii
Microsoft Office.
Un procesor de text, sau un sistem de pregtire a documentelor, este o aplicaie
software folosit pentru producerea (nelegnd prin aceasta: compoziie, editare, aezare
n pagin sau formatare, eventual i tiprire) de orice tip de material destinat tipririi.
Deschiderea aplicaiei Word
Exist dou posibiliti de a deschide aplicaia Microsoft Word:
Din meniul Start Programs - Microsoft Word
Efectund dublu clic pe pictograma Microsoft Word de pe ecran
Dup executarea uneia dintre cele 2 posibiliti se deschide urmtoarea fereastr:
Deschiderea unui document Word
Petru a deschide un document Word existent avem mai multe posibiliti:
Localizm n calculator documentul i efectum dublu clic pe pictograma acestuia.
Lansm n execuie aplicaia Word i din meniul Fiier selectm opiunea Deschidere, se
va deschide fereastra Deschidere cu ajutorul creia vom cuta fiierul dorit. Dup gsirea
fiierului se execut dublu clic pe acesta sau se selecteaz si se apas butonul Deschide.
Microsoft Word ne ofer posibilitatea de a deschide mai multe documente n acelai timp,
acestea fiind marcate pe bara de Start sau n meniul Fereastr. Schimbarea fiierului n
care se dorete scrierea se realizeaz prin click pe numele documentului deschis pe bara
de Start.
Crearea unui document nou
n momentul n care se lanseaz aplicaia Microsoft Word se deschide un
document nou care poart numele de: document1.doc pn cnd documentul este salvat.
Pentru a crea un document nou exist mai multe posibiliti:
Din meniul Fiier se alege opiunea Nou
DESIGNER PAGINI WEB
31
Prin apsarea pe butonul Document necompletat nou
Prin apsarea combinaiei de taste Ctrl + N
Salvarea unui document Word
Pentru a salva un document Word, se apeleaz funcia Salvare din meniul Fiier
sau se apas pe butonul Salvare din bara de instrumente a aplicaiei.
O alt metod de salvare a documentul este prin folosirea combinaie de taste Ctrl
+ S.
Dup folosirea uneia dintre aceste metode se deschide urmtoarea fereastr:
Dup ce se salveaz documentul pe bara de titlu a aplicaiei apare numele cu care
a fost salvat documentul. Dup ce documentul a fost salvat cu un nume pentru a salva
modificrile fcute n document se folosete butonul Salvare sau combinaia de taste
Ctrl + S.
Salvarea fiierului sub un alt format sau cu un alt nume
Un fiier poate fi salvat sub diferite tipuri n funcie de dorina utilizatorului. Cele mai
uzuale tipuri sunt:
Document Word, cu extensia .doc (implicit)
Pagin Web, cu extensia .html
ablon Document, cu extensia .dot
Rich Text Format, cu extensia .rtf
Text simplu, cu extensia .txt
Pentru a salva fiierul cu o alt extensie la opiunea Tip fiier din fereastra Salvare ca se
alege tipul fiierului.
nchiderea unui document Word
nchiderea documentului se poate realiza prin alegerea urmtoarelor posibiliti:
Meniul Fiier nchidere
sau se poate apsa pe butonul de nchidere existent n colul din dreapta sus al
aplicaiei
La nchiderea documentului, dac modificrile nu au fost salvate aplicaia Microsoft
Word afieaz pe ecran urmtoarea fereastr:
DESIGNER PAGINI WEB
32
Pentru a pstra informaia din fiier se apas butonul Da.
nchiderea aplicaiei
Pentru a nchide aplicaia se alege opiunea Ieire din meniul Fiier sau se poate
apsa pe butonul de nchidere existent n colul din dreapta sus al aplicaiei.
Modul de vizualizare al paginii
Procesorul de texte Word permite vizualizarea documentului n mai multe moduri:
Aspect pagin imprimat - n acest mod, documentul este afiat pe ecran, pagin cu
pagin, exact aa cum va fi tiprit. Se recomand folosirea acestui mod de vizualizare.
Normal prezint documentul ntr-un format mai mare deoarece nu prezint
marginile documentului;
Aspect pagin Web este folosit pentru a crea pagini simple Web;
Schi ofer o prezentare succint a documentului sub form de schi.
Funcia de modificare a dimensiunii vizualizrii paginii
Apelnd din meniul Vizualizare, opiunea Panoramare se deschide fereastra:
O alt metod prin care se poate modifica dimensiunea vizualizrii paginii pe ecran este
prin folosirea butonului de panoramare aflat pe bara de instrumente . n cazul
n care se dorete s se introduc o anumit dimensiune care nu exist n meniul derulant
al casetei se poate introduce manual n caset de la tastatur i se apas tasta Enter.
Modificarea barei de instrumente
Microsoft Word ofer utilizatorului o gam foarte larg de instrumente. Acestea sunt
grupate n funcie de aria de aplicabilitate, pentru a optimiza i uura munca utilizatorului.
Aceste instrumente sunt grupate sub forma unor bare de instrumente ce pot fi aduse pe
ecran (activate) sau pot fi ascunse n funcie de necesitile de moment. Pentru a activa
aceste bare de instrumente folosim meniul Vizualizare - Bare de instrumente - selectm
bara dorit. Nu este recomandat s folosim un numr foarte mare de astfel de bare pentru
a nu micora prea mult spaiu de lucru.
Modificarea opiunilor generale ale aplicaiei
Microsoft Word permite utilizatorului modificarea unor opiuni generale ale
aplicaiei din care cale mai importante sunt:
DESIGNER PAGINI WEB
33
numele utilizatorului
directorul n care se salveaz implicit fiierele
unitatea de msur (cm, mm, inches)
Aceste modificri pot fi fcute din fereastra Opiuni ce se deschide selectnd meniul
Instrumente - Opiuni .
Introducerea simbolurilor i a caracterelor speciale
Microsoft Word permite utilizatorului s foloseasc, pe lng caracterele normale i alte
caractere speciale. Acestea se introduc din fereastra Simbol ce se deschide activnd
opiunea Simbol din meniul Inserare.
Pentru a introduce n text un caracter special trebuie s poziionai punctul de inserare n
locul n care se dorete introducerea simbolului. Din fereastra Simbol se selecteze
simbolul dorit i se apas butonul Inserare.
Simbolurile pot fi formatate asemenea unui text normal.
Introducerea datei calendaristice
Pentru a introduce data ntr-un document Word se apeleaz din meniul Inserare
comanda Data i ora . Se deschide urmtoarea fereastr:
Dac se dorete ca data s fie inserat cu actualizare automat se bifeaz opiunea
Actualizare automat. Acest lucru face ca data inserat s se actualizeze de fiecare dat
cnd se deschide documentul.
n cazul n care data introdus nu este cea corespunztoare zilei i orei actuale verificai
ceasul calculatorului care pstreaz evidena datei i orei.
Anularea i refacerea comenzilor
Aplicaia Microsoft Word permite anularea
operaiunilor efectuate. n momentul n care se dorete
anularea unei operaii se folosete comanda Anulare Tastare
din meniul Editare.
Acelai lucru se poate realiza cu ajutorul butonului de pe bara de instrumente sau se
poate folosi combinaia de taste Ctrl + Z
DESIGNER PAGINI WEB
34
Opus funciei de Anulare Tastare este funcia Repetare Tastare care reface ultima
operaiune anulat. Acelai lucru se poate realiza cu ajutorul butonului de pe bara
de instrumente sau se poate folosi combinaia de taste Ctrl + Y.
Selectarea textului dintr-un document Word
Selectarea textului este folosit n multe situaii, nainte de a efectua o comand
de modificare a textului acesta trebuie selectat. Microsoft Word ofer utilizatorului mai
multe posibiliti de realizare a seleciei. n funcie de necesitate se poate efectua:
selectarea unei poriuni din text (poziionnd mouse-ul la nceputul textului de
selectat, se apas butonul stnga al mouse-ului i se mut cursorul la sfritul
textului ce trebuie selectat);
selectarea unui cuvnt (se efectueaz dublu clic stnga pe cuvntul respectiv);
selectarea unui paragraf (se efectueaz triplu clic stnga pe paragraful
respectiv);
selectarea unui rnd (se efectueaz clic n dreptul rndului respectiv, n partea
stng, n afara spaiului de scriere);
selectarea ntregului text (se realizeaz prin apsarea simultan a tastelor
CTRL+A);
Selecia se mai poate realiza innd apsat tasta SHIFT i deplasndu-ne prin text cu
ajutorul sgeilor de deplasare. Textul selectat va aprea scris cu culoare alb pe fond
negru ex:
Pentru deselectarea textului se realizeaz un clic n orice parte a documentului.
Mutarea i copierea textului
Pentru a putea muta o poriune din text, aceasta trebuie selectat. Cu textul
selectat, efectuai click pe butonul Decupare de pe bara standard pentru a decupa
textul selectat. Odat ce ai tiat textul selectat, mutai puctul de inserare ntr-o nou
locaie i executai un click pe butonul Lipire .
Pentru decuparea textului se poate folosi i combinaia de taste Ctrl + X sau din
meniul Editare se alege comanda Decupare
DESIGNER PAGINI WEB
35
. Odat ce ai selectat textul, putei de asemenea sa-l copiai. Pentru copiere se apas pe
butonul Copiere aflat pe bara standard. Mutai cursorul ntr-o nou locaie (in cadrul
aceluiai document sau ntr-un document nou) i efectuai click pe butonul Lipire .
Acum, avei dou copii ale textului selectat una n locaia original a textului i una n
noua locaie. Pentru copiere, n afara de buton, se mai poate folosi combinaia de taste
CTRL+C, sau opiunea Copiere din meniul Editare
Odat ce utilizatorul a copiat sau a mutat un text, informaia se pstreaz n
memoria Clipboard a calculatorului de unde poate fi lipit de fiecare dat cnd se folosete
comanda de Lipiere.
De asemenea pentru Lipire, n afara de buton, se mai poate folosi combinaia de
taste CTRL+V, sau opiunea Lipire din meniul Editare.
tergerea textului
Pentru a terge un text se folosete tasta BackSpace(terge la stnga punctului de
inserare) sau tasta Delete (terge la dreapta punctului de inserare). Pentru a terge o
poriune mai mare de text, acesta se selecteaz i se apas tasta Delete.
Gsirea i nlocuirea
Exist situaii n care este necesar ca n interiorul unui document s gsim un
anumit cuvnt. Pentru a uura munca de cutare a aplicaiei Microsoft Word, ofer o
funcie de gsire n interiorul documentului. Pentru a activa aceast funcie exist dou
posibiliti:
se apas simultan tastele CTRL+F
din meniul Editare se selecteaz opiunea Gsire
n ambele situaii se va deschide fereastra Gsire i nlocuire.
n cmpul De cutat se scrie cuvntul care se caut i se apas butonul Urmtorul
gsit.
De fiecare dat cnd cuvntul cutat a fost gsit n text, cutarea se suspend i
cuvntul gsit apare selectat n text. Cutarea se poate relua apsnd din nou butonul
Urmtorul gsit.
Pentru a nlocui un cuvnt din text cu altul Microsoft Word, ofer o funcie de
nlocuire a cuvintelor. Pentru a activa aceast funcie exist dou posibiliti:
se apas simultan tastele CTRL+H
DESIGNER PAGINI WEB
36
Aldin
(ngroare)
Cursiv
(nclinare) Subliniere
Culoare text
din meniul Editare se selecteaz opiunea nlocuire
n ambele situaii se va deschide fereastra Gsire i nlocuire
Pentru nlocuirea cuvintelor se poate apsa pe butonul Urmtorul gsit pentru a
gsi cuvntul de cutat i pe butonul nlocuire n cazul n care se dorete nlocuirea
cuvintelor pas cu pas sau putei apsa pe butonul nlocuire peste tot pentru a nlocui toate
cuvintele cutate.
Formatare text.
Formatarea fonturilor
Orice text introdus ntr-un document Word trebuie format. Prin procedeul de
formatare se lucreaz asupra caracterelor din interiorul paragrafelor pentru obinerea unor
efecte: font, dimensiune, stil de afiare (sublinieri, ngrori, nclinare), cuvinte cheie,
citate, efecte special, indici, spaiul dintre caractere, introducerea unor caractere speciale
(sgei, figuri, semne speciale etc.)
Pentru a putea formata un text se apeleaz comanda Font din meniul Format. Se
deschide urmtoarea fereastr:
Pentru a se economisi timp, modificrile asupra textului se pot realiza folosind
butoanele de pe bara de formatare.
Pentru a scrie mai ngroat va trebui s apsai pe butonul B (Bold);
Pentru a scrie nclinat se apas pe butonul I (Italic sau Cursiv);
Pentru a sublinia textul se apas pe butonul U (Subliniat);
Pentru a scrie cu o anumit culoarea se folosete butonul ;
Pentru a schimba fontul sau dimensiunea acestuia se folosesc butoanele
;
Pentru a schimba stilul paragrafului se folosete butonul ;
DESIGNER PAGINI WEB
37
Desprirea n silabe
Desprirea n silabe se poate face n dou feluri:
Manual, utilizatorul desparte cuvntul la sfritul rndului cu ajutorul
liniuei despritoare;
Automat, se selecteaz textul, se activeaz fereastra Desprire n silabe
din meniul Instrumente Limb Desprire n silabe
Se bifeaz opiunea Desprire automat n silabe n document, se apas butonul
OK.
Formatarea paragrafelor
Pentru a vizualiza paragrafele introduse ntr-un text se activeaz butonul
Afiare/Ascundere aflat pe bara de butoane.
Paragrafele pot fi aliniate la:
stnga - pentru alinierea paragrafului la stnga se selecteaz paragraful i se apas
pe butonul
centru - pentru alinierea paragrafului la centru se selecteaz paragraful i se apas
pe butonul
dreapta - pentru alinierea paragrafului la dreapta se selecteaz paragraful i se
apas pe butonul
stnga dreapta - pentru alinierea paragrafului la stnga-dreapta se selecteaz
paragraful i se apas pe butonul
O alt metod de aliniere a unui paragraf este prin folosirea comenzii Paragraf din meniul
Format, ce are ca urmare deschiderea urmtoarei ferestre:
Pentru a modifica distana dintre liniile de spaiere ale unui paragraf trebui s folosii
meniul derulant care se deschide prin apsarea pe sgeata din dreapta opiunii Spaiere
din fereastra Paragraf .
n mod normal spaierea dintre rnduri este la un rnd.
Dac se dorete s se modifice spaiul dintre dou paragrafe, trebuie s lucrai cu
opiunea Spaiere
DESIGNER PAGINI WEB
38
Indentarea paragrafelor
Indentarea unui paragraf reprezint deplasarea testului fa de marginile
documentului stnga i dreapta la o anumit distan. Pentru a realiza acest lucru se
selecteaz paragraful i din opiunea Indentare a ferestrei Paragraf se alege distana la
care se dorete s se fac indentarea paragrafului.
Folosirea i setarea tabulatorilor
Exist patru tipuri de tabulatori:
Tabulator de aliniere la stnga - textul este introdus de la stnga la dreapta
ncepnd de la tabulator
Tabulator de aliniere la dreapta - textul se aliniaz la dreapta pn la tabulator
Tabulator de aliniere la centru - textul introdus se aliniaz la centru innd cont
de poziia tabulatorului.
Tabulator separator zecimal - textul se aliniaz nainte de punctul zecimal la
stnga, iar dup punctul zecimal se aliniaz la dreapta.
Fixarea tabulatorilor
Pentru a introduce un tabulator se poziioneaz punctul de inserare n faa textului care se
dorete a fi aliniat cu ajutorul unui tabulator i se alege din meniul Format comanda
Tabulatori. Se deschide urmtoarea fereastr:
Stiluri de formatare a paragrafelor
Un stil reprezint un ansamblu de mai multe cerine ce caracterizeaz un paragraf
(font, dimensiune, culoare, aliniere, spaiere, indentare).
Pentru a aplica un stil asupra unui paragraf putei apela comanda Stil din meniul Format
sau se poate folosi meniul derulant Stil din bara de formatare.
Folosirea listelor numerotate i a listelor cu marcatori
Pentru a introduce o list de marcatori, trebuie selectat textul, apoi se activeaz fereastra
Marcatori i numerotare selectnd opiunea Marcatori i numerotare din meniul
Format. Din fereastra ce se deschide putei alege un anumit tip de marcator.
DESIGNER PAGINI WEB
39
Pentru a folosi o list numerotat se lucreaz n meniul Numerotat din fereastra
Marcatori i numerotare, pentru a folosi o list cu marcatori se lucreaz n meniul Cu
marcatori din fereastra Marcatori i numerotare.
Folosirea chenarelor
Pentru a evidenia un cuvnt, sau o parte dintr-un text putei alege s ncadrai textul
respectiv ntr-un chenar. Pentru aceasta trebuie urmai paii:
se selecteaz textul pentru care se dorete adugarea chenarului
din meniul Format, clic pe opiunea Borduri i umbrire. Apare fereastra Borduri
i umbrire.
Pentru a aplica un efect umbrit n interiorul unui chenar se folosete meniul
Umbrire din fereastra Borduri i umbrire din care se alege culoarea de umplere a
chenarului.
ntreruperea documentului n seciuni
Exist situaii n care chiar dac nu s-a ajuns la sfritul paginii, utilizatorul
dorete trecerea la o pagin nou. Pentru aceasta, se poziioneaz cursorul n locul de
unde se dorete introducerea unei noi pagini, i se activeaz opiunea ntrerupere din
meniul Inserare. Se va deschide o fereastra cu opiuni, se va marca opiunea Sfrit de
pagin si se apas pe butonul OK.
Punctul de inserare va ajunge automat pe pagina urmtoare. Daca dup poziionarea
punctului de inserare a existat text, textul va fi automat mutat pe pagina urmtoare.
Pentru a vizualiza unde a fost fcut ntreruperea sfrit de pagin trebuie s apsai pe
butonul Afiare/ascundere de pe bara de instrumente . Dac se dorete s se tearg
aceast ntrerupere se selecteaz i se apas tasta Delete.
Introducerea antetului i a subsolului
DESIGNER PAGINI WEB
40
n cazul n care se dorete introducerea n document a unui antet sau a unui subsol, care s
conin: o sigl, numele utilizatorului, titlu lucrrii, denumirea capitolului, numrul
paginii, data sau alte informaii ce vor fi afiate pe fiecare pagin, Microsoft Word ofer
posibilitatea de a introduce un antet sau un subsol. Pentru aceasta se activeaz opiunea
Antet i subsol din meniul Vizualizare. Se vor activa automat seciunile Antet (n parte de
sus a paginii) i Subsol (n partea de jos a paginii) precum i bara de butoane Antet i
subsol. Dup introducerea textului n antet sau n subsol se apas butonul nchidere sau
se face un dublu click n document.
Numerotarea paginilor
Programul Microsoft Word ofer posibilitatea de a numerota paginile din
document. Pentru acesta, se alege opiunea Numere de pagin din meniul Inserare.
Dac dorii ca numerotarea s nu fie afiat pe prima pagin, debifai opiunea de
Afiare numr pe prima pagin.
Pentru a stabili un anumit format de numerotare se apas pe butonul Format. Se
deschide urmtoarea fereastr:
Pentru crearea unui tabel trebuie s mergei n meniul Tabel Inserare - Tabel.
La apelarea comenzii se va deschide o fereastr n care vei putea s stabilii opiunile
necesare construirii tabelului dumneavoastr: numr de rnduri, numr de coloane, stil de
formatare.
Numrul de coloane i numrul de rnduri poate fi modificat din seciunile
corespunztoare cu ajutorul sgeilor sus, jos sau prin modificarea manual a valorii
existente n caset. Dac se apas butonul AutoFormatare atunci se va deschide o
fereastr n care vei putea s alegei un stil de formatare pentru tabel.
Tabelul obinut poate fi completat cu datele necesare. Deplasarea
dintr-o csu n alta se face cu ajutorul sgeilor direcionale sau cu mouse-ul, prin clic n
formatarea numrului de pagini
inserare numr inserare numrul inserare inserare
de pagin total al paginilor dat curent ora curent
Comut ntre antet
i subsol
DESIGNER PAGINI WEB
41
csua n care dorii s ajungei. Formatarea textului din tabel se face n mod obinuit cu
ajutorul comenzilor de formatare a fontului i paragrafului.
Obiecte i imagini
Inserarea foilor de calcul din aplicaia Microsoft Excel se face prin comanda
Obiect din meniul Inserare. Din fereastr alegei obiectul ce trebuie inserat,
respectiv Foaie de lucru Microsoft Excel. Apsai OK, iar n document apare o
gril cu rnduri i coloane care reprezint o foaie de calcul alb. Pentru a edita
obiectul va trebui s-l accesai printr-un dublu clic stnga pe el. Se pot introduce
date, se pot efectua calcule i alte operaii specifice aplicaiei Microsoft Excel.
Inserarea diagramelor se face prin comanda Imagine, Diagram din meniul
Inserare. n cadrul documentului apare un grafic mpreun cu foaia de calcul care
conine datele pe baza crora este construit. Modificarea datelor din foaie va duce
la modificarea aspectului graficului. Printr-un clic n afara zonei de grafic, foaia
de calcul se va nchide, iar n document va rmne doar diagrama. Pentru editarea
numelor de rnd, coloan sau a valorilor numerice trebuie s facei dublu clic
stnga pe diagram i se va activa foaia de lucru unde putei s facei modificrile
necesare.
Inserarea imaginilor. Exist dou categorii de imagini care se pot introduce n
cadrul unui document: imagini existente n galeria de imagini a aplicaiei i
imagini stocate n fiiere de imagini n calculatorul dumneavoastr.
Inserarea imaginilor din galeria de imagini trebuie s mergei n
meniul Inserare, Imagine, Miniatur. n fereastra Clip Art care apare
apsai butonul Search pentru a cuta toate tipurile de imagini din
calculatorul dumneavoastr sau v putei rafina cutarea n funcie de ceea
ce dorii s gsii. Pentru acest lucru, n seciunea Search for va trebui s
scriei cuvntul semnificativ pentru categoria de imagini cutat i s
apsai butonul Search. Pentru a insera n documentul dumneavoastr
imaginea gsit trebuie s facei clic pe ea sau pe bara gri care apare n
dreapta pozei i s alegei comanda Insert.
DESIGNER PAGINI WEB
42
Inserare imaginilor din fiier trebuie s mergei n meniul Inserare,
Imagini, Din fiier. Se va deschide o fereastr n care va trebui s
localizai fiierul care conine imaginea dorit.
Redimensionarea unei imagini sau a unui grafic
Pentru a modifica dimensiunile unui obiect exist dou metode:
Metoda manual selectai obiectul i tragei cu butonul stng al mouse-ului
apsat de butoanele de control care apar n jurul su. Obiectul se va mri sau se va
micora n funcie de direcia n care deplasai marginile.
Metoda automat selectai obiectul respectiv iar din meniul Format alegei
comanda Obiect. Se va deschide o fereastr n care putei s stabilii mai multe
opiuni:
Dimensiunile obiectului se stabilesc din submeniul Dimensiune.
Modificai nlimea i limea imaginii nu nainte de a debifa butonul
Blocare aspect raport.
Culorile i liniile de contur ale obiectului se pot modifica din
submeniul Culori i linii.
Aspectul obiectului se modific din submeniul Aspect.
tergerea unui obiect
Pentru a terge un obiect, acesta trebuie selectat i se poate apsa una dintre tastele
BackSpace sau Delete.
Desenarea i manipularea obiectelor grafice
Dac avei nevoie s introducei n document diferite obiecte de desen putei s
utilizai bara de desenare care apare n partea de jos a ecranului. n cazul n care nu este
activ, o putei activa din meniul Vizualizare, Bare de instrumente, Desenare.
Cu ajutorul acestei bare putei s desenai linii simple cu butonul , sgei cu
, dreptunghiuri sau ptrate dac inei tasta Shift apsat cu , elipse sau cercuri cu
tasta Shift apsat cu . Putei s colorai obiectele cu ajutorul butonului sau
DESIGNER PAGINI WEB
43
putei s colorai conturul cu butonul . Putei s modificai limea liniei cu butonul
, stilul de linie cu i forma i direcia sgeilor cu butonul . Se pot stabili
umbre i adncimi ale obiectelor cu butoanele i . Casetele de text se introduc cu
butonul , iar textul artistic (Word Art) se creeaz cu butonul .
Dac vrei s mrii sau s micorai obiectul va trebui s-l selectai i s tragei
cu butonul stng al mouse-ului de butoanele de control aprute n jurul obiectului. Pentru
a muta un obiect n pagin putei s v poziionai pe el i cu butonul stng apsat s-l
deplasai n alt loc. Eliberai butonul atunci cnd ai ajuns n locul dorit.
Dac dorii s adugai text pe un obiect trebuie s facei un clic dreapta pe el i s
selectai comanda Adugare text din meniul care apare. Textul poate fi formatat n mod
obinuit cu ajutorul comenzilor de formatare.
DESIGNER PAGINI WEB
44
PARTEA VI
LIMBAJUL HTML, BAZE DE DATE
MYSQL, LIMBAJUL JAVASCRIPT,
CADRUL DE SOFTWARE,
FRAMEWORK.NET
DESIGNER PAGINI WEB
45
PLATFORMA .NET
Prezentare
NET este un cadru (Framework) de dezvoltare software unitar care permite realizarea,
distribuirea i rularea aplicaiilor-desktop Windows i aplicaiilor WEB. Tehnologia .NET
pune laolalt mai multe tehnologii (ASP, XML, OOP, SOAP, WDSL, UDDI) i limbaje
de programare (VB, C++, C#, J#) asigurnd totodat att portabilitatea codului compilat
ntre diferite calculatoare cu sistem Windows, ct i reutilizarea codului n programe,
indiferent de limbajul de programare utilizat.
.NET Framework este o component livrat mpreun cu sistemul de operare Windows.
De fapt, .NET 2.0 vine cu Windows Server 2003, se poate instala pe versiunile anterioare,
pn la Windows 98 inclusiv; .NET 3.0 vine instalat pe Windows Vista i poate fi instalat
pe versiunile Windows XP cu SP2 i Windows Server 2003 cu minimum SP1.
Pentru a dezvolta aplicaii pe platforma .NET este bine sa avem 3 componente
eseniale:
un set de limbaje (C#, Visual Basic .NET, J#, Managed C++, Smalltalk, Perl, Fortran,
Cobol, Lisp, Pascal etc),
un set de medii de dezvoltare (Visual Studio .NET, Visio),
i o bibliotec de clase pentru crearea serviciilor Web, aplicaiilor Web i aplicaiilor
desktop Windows.
Cnd dezvoltm aplicaii .NET, putem utiliza:
Servere specializate - un set de servere Enterprise .NET (din familia SQL Server
2000, Exchange 2000 etc), care pun la dispoziie funcii de stocare a bazelor de date,
email, aplicaii B2B (Bussiness to Bussiness comer electronic ntre partenerii unei
afaceri).
Servicii Web (n special comerciale), utile n aplicaii care necesit identificarea
utilizatorilor (de exemplu, .NET Passport - un mod de autentificare folosind un singur
nume i o parol pentru toate ste-urile vizitate)
Servicii incluse pentru dispozitive non-PC (Pocket PC Phone Edition, Smartphone,
Tablet PC, Smart Display, XBox, set-top boxes, etc.)
.NET Framework
DESIGNER PAGINI WEB
46
Componenta .NET Framework st la baza tehnologiei .NET, este ultima interfa ntre
aplicaiile .NET i sistemul de operare i actualmente conine: Limbajele C#, VB.NET,
C++ i J#. Pentru a fi integrate n platforma .NET toate aceste limbaje respect nite
specificaii OOP numite Common Type System (CTS). Ele au ca elemente de baz: clase,
interfee, delegri, tipuri valoare i referin, iar ca mecanisme: motenire, polimorfism i
tratarea excepiilor.
Platforma comun de executare a programelor numit Common Language Runtime
(CLR), utilizat de toate cele 4 limbaje. CTS face parte din CLR. Ansamblul de biblioteci
necesare n realizarea aplicaiilor desktop sau Web numit Framework Class Library
(FCL).
Arhitectura .NET Framework
Componenta .NET Framework este format din compilatoare, biblioteci i alte
executabile utile n rularea aplicaiilor .NET. Fiierele corespunztoare se afl, n general,
n directorul C:\WINDOWS\Microsoft. NET\Framework\V2.0. (corespunztor
versiunii instalate)
Compilarea programelor
Un program scris ntr-unul dintre limbajele .NET conform Common Language
Specification (CLS) este compilat n Microsoft Intermediate Language (MSIL sau IL).
Codul astfel obinut are extensia exe, dar nu este direct executabil, ci respect formatul
unic MSIL.
CLR include o main virtual asemntoare cu o main Java, ce execut instruciunile
IL rezultate n urma compilrii. Maina folosete un compilator special JIT (Just In
Time). Compilatorul JIT analizeaz codul IL corespunztor apelului unei metode i
produce codul main adecvat i eficient. El recunoate secvenele de cod pentru care s-a
obinut deja codul main adecvat permind reutilizarea acestuia fr recompilare, ceea
ce face ca, pe parcursul rulrii, aplicaiile .NET s fie din ce n ce mai rapide.
Faptul c programul IL produs de diferitele limbaje este foarte asemntor are ca rezultat
interoperabilitatea ntre aceste limbaje. Astfel, clasele i obiectele create ntr-un limbaj
specific .NET pot fi utilizate cu succes n altul.
n plus, CLR se ocup de gestionarea automat a memoriei (un mecanism implementat n
platforma .NET fiind acela de eliberare automat a zonelor de memorie asociate unor date
devenite inutile Garbage Collection).
DESIGNER PAGINI WEB
47
Ca un element de portabilitate, trebuie spus c .NET Framework este implementarea unui
standard numit Common Language Infrastructure (http://www.ecmainternational.
org/publications/standards/Ecma-335.htm), ceea ce permite rularea aplicaiilor .NET, n
afar de Windows, i pe unele tipuri de Unix, Linux, Solaris, Mac OS X i alte sisteme de
operare (http://www.mono-project.com/Main_Page ).
De ce am alege .NET?
n primul rnd pentru c ne ofer instrumente pe care le putem folosi i n alte programe,
ofer acces uor la baze de date, permite realizarea desenelor sau a altor elemente grafice.
Spaiul de nume System.Windows.Forms conine instrumente (controale) ce permit
implementarea elementelor interfeei grafice cu utilizatorul.
Folosind aceste controale, putei proiecta i dezvolta rapid i interactiv, elementele
interfeei grafice. Tot .NET v ofer clase care efectueaz majoritatea sarcinilor uzuale cu
care se confrunt programele i care plictisesc i fur timpul programatorilor, reducnd
astfel timpul necesar dezvoltrii aplicaiilor.
Editoare PHP/HTML
Exist o suit de editoare text simple, gratuite, ce ofer suport pentru programarea
n PHP/HTML. Acestea au suficiente faciliti pentru a putea fi folosite cu succes zi de zi
pentru a scrie cod-surs n PHP/HTML.
Cele mai cunoscute dintre acestea sunt:
Notepad++ (Windows)
PsPad (Windows)
SciTE (Windows si Linux)
Crimson Editor (Windows)
Pentru nceptori un editor simplu este de cele mai multe ori alegerea ideal,
datorit simplitii modului de lucru i a interfeei grafice. La majoritatea editoarelor
simple nu exist conceptul de proiect i se lucreaz direct cu fiiere simple ce pot fi
grupate manual n directoare.
Eclipse pentru PHP. Eclipse este o platform integrat de dezvoltare (IDE) extensibil,
ce dispune de o multitudine de funcionaliti. Folosit iniial pentru dezvoltarea n
limbajul Java, a fost ulterior extins i la alte limbaje de programare.
Eclipse PDT (Eclipse PHP Development Tools) reprezint la ora actual unul din
cele mai avansate editoare PHP. Este gratuit i poate rula pe orice sistem de operare. Mai
multe informaii pot fi gsite pe site-ul proiectului Eclipse PDT.
Editorul Eclipse este centrat pe ideea de proiect. Un proiect reprezint o suit de
mai multe fiiere PHP, grupate n acelai director. Este indicat s creai un proiect nou
pentru fiecare aplicaie PHP, n care putei salva mai multe scripturi diferite.
DESIGNER PAGINI WEB
48
Netbeans. Netbeans vine din aceeai zon a programrii n Java. Este un IDE complet
ce a fost extins recent pentru lucrul n PHP. Ca i Eclipse poate fi folosit pe orice
sistem de operare ntruct ruleaz pe platforma Java. Poate fi descarcat gratuit de la
http://netbeans.org/downloads/ (alegei pachetul PHP). Modul de lucru n Netbeans
este similar cu cel din Eclipse. Avem i aici conceptul de proiect iar pentru a putea
crea scripturi PHP este nevoie s creai n prealabil un proiect de tip PHP. Toate
celelalte observaii fcute la editorul Eclipse rmn valabile i aici.
Zend Studio i Adobe Dreamweaver. Zend Studio i Adobe Dreamweaver sunt dou
IDE-uri comerciale pentru programarea n PHP. Zend Studio este bazat pe Eclipse
PDT i specializat doar pe dezvoltarea n PHP, pe cnd Adobe Dreamweaver poate fi
folosit si pentru web-design. Ambele editoare pot fi descrcate pentru teste (trial
version), dar pentru a continua folosirea lor trebuie achiziionat o licen.
Un IDE avansat poate avea mai multe faciliti, dar deprinderea cu folosirea lui
poate lua ceva timp. n schimb, pentru nceptori se recomand un editor simplu, datorit
simplitii modului de lucru i a interfeei grafice cu utilizatorul.
HTML
Ce este HTML?
HTML este prescurtarea pentru HyperText Markup Language.
HyperText este metoda prrin care navighezi pe web apsnd pe text special
numit hyperlink care te direcioneaz ctre alte pagini. Prin hyper se nelege
neliniar adic, poi ajunge ctre orice loc de pe Internet cand vrei apsnd pe
link-uri nu exist ordine prestabilit n care se fac lucrurile.
Markup este ceea ce extensiile HTML fac textului din interiorul lor. l marchez
ca un anumit tip de text (text n italic, de exemplu).
HTML este un limbaj, avand codul i sintaxa sa, ca orice alt limbaj.
Ce este o pagin HTML?
O pagin HTML este un document care folosete limbajul HTML pentru a indica
modul n care va fi format textul cand va fi afiat - adic va diferenia textul pe categorii:
link-
uri, titluri, paragrafe, liste etc, - i pentru a nsoi textul cu forme interactive, imagini
ncadrate i alte obiecte
DESIGNER PAGINI WEB
49
Fundamental, este un fiier text cu extensia .html sau htm. Aa arat o pagin
web simpla atunci cand este deschisa cu un browser web.
Cum arat codul HTML?
Consider c avem o pagin web simpla salvat ntr-un fiier de tip text numit
simplepage.html. La stanga poti vedea pagina web aa cum arata cand este deschisa cu
un browser web. La dreapa poti vedea codul paginii web, asa cum arata cand este
deschis cu un editor de text.
DESIGNER PAGINI WEB
50
Ce este un tag?
HTML utilizeaz "tag-uri" pentru a specifica modul n care textul va fi formatat atunci
cnd se va folosi un web browser. Tag-urile sunt nconjurate de paranteze n unghi. Tag-
urile vin de cele mai multe ori n perechi. n fiecare pereche, exist o etichet de
deschidere "" i o etichet de nchidere " '. Tag-ul de deschidere conine un nume
de etichet i, uneori, atributele tag-ului. El i spune browser-ului c ai dori s efectuai o
aciune de formatare din acel punct al textului. Eticheta de nchidere spune browser-ului,
cu "/" (numit forward slash), urmat de acelai nume al tag-ului, c dorii s oprii
aciunea la acel punct al textului.
Bold (ngroat)
Pentru a face cuvintele s apar boldate (bold), nconjurai textul cu taguri .
Trenul Consecinelor Trenul Consecinelor
Italic (nclinat) Pentru a face cuvintele s par nclinate spre dreapta, nconjurai textul cu
taguri .
Aproape Onest Aproape Onest
DESIGNER PAGINI WEB
51
Subscript (indice) Pentru a face cuvintele s apar ca jumtate din nlime i 50% sub
linie, nconjurai textul cu taguri .
n ora mea cea mai ntunecat n ora mea cea mai ntunecat
Superscript (exponent)
Pentru a face cuvintele s apar ca jumtate din nlime i 50% peste linie,
nconjurai textul cu taguri .
Poduri arznde Poduri arznde
Cum pot folosi un heading?
O poziie n text este creat cu tag. Exist de fapt 6 poziii de tag-uri: (cel
mai mare) i (cel mai mic).
Cum pot decora textul?
Exist o mulime de lucruri pe care le putei face pentru a schimba aspectul fontului.
Primul lucru este s utilizai un font diferit. Cum putei face asta? Putei face acest lucru
folosind atributul face astfel:
Elysian Fields Elysian Fields
Avei aici mai multe fonturi pe care le putei ncerca:
Arial
Arial Black
Arial Narrow
Book Antiqua
Bookman Old Style
Century Gothic
Comic Sans MS
Courier New
Garamond
DESIGNER PAGINI WEB
52
Times New Roman
Verdana
Putei de asemenea s schimbai mrimea fontului. Facei acest lucru folosind
atributul mrime (size) ,astfel:
Sngele eroilor Sngele eroilor
Insomnie Insomnie
Voi fi acolo Voi fi acolo
i n sfrit,putei schimba culoarea textului, folosind atributul pentru culoare
(color).Astfel:
Trezire grosolan Trezire grosolan
Paragrafe i linia nou
Un nou paragraf se ncepe cu tag-ul , i poate fi, ncheiat, opional, cu tag-ul
invers al alineatului.
O linie nou este creat de tag.
Privii exemplul urmtor:
Cum pot aduga Caractere speciale?
Exist mai multe moduri de a aduga simboluri pentru paginile dumneavoastr.
Probele urmtoare ilustreaz utilizarea fiecrei metode de cod. Pentru a plasa un simbol
ntr-o pagin HTML, copiai i inserai codul corespunztor n dosarul n care dorii
simbolul.
HTML Cod Numeric
DESIGNER PAGINI WEB
53
exemplu: pentru a face o acolad,{ tastai {
Font Face Tag
A
HTML Literal Code
exemplu: pentru a face simbolul gradului, ,tastai
Este prezentat un tabel ce conine simbolurile i codurile corespunztoare ale
acestora n Appendix A.
Care este structura de baz a unui document HTML?
Aceasta este structura de baz a unei pagini HTML:
Tag-urile HTML
Un document HTML ncepe cu un element HTML care conine HEAD i BODY
Pentru a ncepe o pagin HTML:
Tasteaz pentru a ncepe partea HTML din documentul dumneavoastr
Lasai cteva spaii pentru crearea restului paginii dumneavoastr
DESIGNER PAGINI WEB
54
Tastai
Tag-ul HEAD
Seciunea head este locul unde vei defini titlul paginii tale, incluznd informaii
despre pagina ta, pentru motoarele de cutare precum Google, stabilete locaia paginii,
adaug stil foii tale i scrie script-urile.
Pentru a crea seciunea head:
Imediat dup deschiderea tag-ului html, tastai .
Las cteva spaii pentru seciunea capului de pagin.
Tasteaz .
Tag-ul BODY
Body documentului tu HTML include coninutul paginii tale de Web, care este,
partea pe care vizitatorii ti o vor vedea, inclusiv textul i elementele de grafic.
Pentru a crea cuprinsul:
Dup ultimul tag, tasteaz
Las cteva spaii pentru coninutul paginii tale de Web
Tasteaz
Problema rezolvat: Crearea unui document HTML.
Prima mea pagina web
Bine ai venit!
Vom invata impreuna limbajul HTML. Aceasta este prima mea
pagina web!
Am folosit tag-ul pentru a trece pe urmtorul rnd. Astfel i spunem
browser-ului c ce va fi scris dup tag-ul va trebui afiat pe urmtorul rnd. Tag-ul
nu are un tag de nchidere.
DESIGNER PAGINI WEB
55
Folosim pentru editarea codului editorul de texte Notepad. Dup ce am scris
codul, va trebui s salvm documentul cu extensia .html sau .htm. Din meniul File se
alege opiunea Save As, iar apoi se denumete documentul index, dar cu una din
extensiile de mai sus. Se apas butonul Save. Am obinut acum un document html, care
reprezint prima pagin web realizat. Acest fiier va fi salvat la adresa:
C:\wamp\www\test.
Se deschide browserul web i se introduce n bara de adrese:
http://localhost/test/
Efectul este acela c browserul va afia coninutul paginii web creat aa cum este
prezentat n figura 1.
Crearea unei pagini web folosind cod HTML
Problema rezolvat: Crearea unui document HTML care folosete diferite tag-uri
i atribute pentru formatare.
Prima mea pagina web
Bine ai venit!
Vom invata impreuna limbajul HTML. Aceasta este prima mea
pagina web!
DESIGNER PAGINI WEB
56
Crearea unei pagini web folosind cod HTML cu exemple de atribute
Problema rezolvat: Crearea unui document HTML care folosete opiuni de
formatare a textului.
Eticheta
Invat limbajul HTML.
Exersez limbajul HTML.Stiu limbajul HTML.
Crearea unei pagini web folosind cod HTML cu exemple de formatare a textului
DESIGNER PAGINI WEB
57
Probleme propuse:
Stiluri pentru blocuri de text
Text scris cu caractere ingrosate.
Text cu caractere marite cu o unitate mai mare i mai mare
i mai mare.
Textul este scris cu caractere micsorate cu o unitate mai
mic.
Text scris cu caractere italice.
n aceasta linie sus este superscript iar jos este
subscript.
Aceasta linie este n intregime sectionata de o linie orizontala.
n aceasta linie urmatorul cuvant este subliniat, iar cuvantul strike
sectionat. Acest cuvant clipeste Blink
==============================================================
Linii orizontale
Tipuri de linii orizontale O linie implicita alinierea
stanga, latime 100%, grosime 2 cu umbra.
Tipuri de linii orizontale
Tipuri de linii orizontale
Tipuri de linii orizontale
Tipuri de linii orizontale
Tipuri de linii orizontale
Urmeaza o linie aliniata n centru, de latime 50%, grosime 5 pixeli, fara umbra.
Urmeaza o linie aliniata la dreapta,
de latime 150 de pixeli, grosime 12 pixeli, de culoare rosie.
DESIGNER PAGINI WEB
58
Problema rezolvat: Crearea unui document HTML care afieaz imagini.
Imagini
Adaugarea imaginilor in paginile web
Crearea unei pagini web folosind cod HTML cu exemple de imagini
Pentru a folosi o imagine ca fundal al unei pagini web vom aduga tag-ului
atributul BACKGROUND dup cum urmeaz:
Imagini
Adaugarea imaginilor in paginile web
DESIGNER PAGINI WEB
59
Crearea unei pagini web folosind cod HTML cu exemple de imagini i background
Crearea Listelor i Tabelelor
Cum pot crea o list?
Acesta este modul prin care poi crea o list simpl:
1. Tasteaz pentru o list ordonat sau pentru a ncepe o lista neordonat.
2. Tasteaz pentru a ncepe primul item al listei.
3. Tasteaz textul care urmeaz s fie inclus n item.
4. Tasteaz pentru a completa fiecare item al listei.
5. Continu acest proces introducnd cai mai muli itemi ai listei care sunt necesari
pentru a-i completa lista ordonat.Nu exist o limit a numrului de itemi pe care-i poate
avea o list.
6. Pentru a ncheia lista., introdu un sfrit or pentru a marca tag-ul de nceput
dup ultimul item al listei.
DESIGNER PAGINI WEB
60
Problem propus:
Culori pentru legaturi
Setarea culorilor pentru link-uri:rosu pentru legaturi active, verde pentru
legaturi vizitate i albastru pentru legaturi nevizitate
Link catre pagina 1
Link catre pagina 2
Link catre pagina 3
Cum pot crea un tabel?
Un tabel este un element structurat care const n rnduri i coloane de celule. Ai
DESIGNER PAGINI WEB
61
posibilitatea s introduci orice fel de coninut doreti n aceste celule: text, imagini, i
chiar
alte tabele.
Acesta este modul n care putei crea un tabel simplu:
1. Tasteaz tag.
2. Tasteaz pentru a marca nceputul primului rnd.
3. Tasteaz pentru a marca nceputul celulei.
4. Tasteaz coninutul celulei.
5. Completeaz celula introducnd un tag de nchidere:
6. Repet paii 3. pn la 5. pentru fiecare celula pe care doreti s o adugai
rndului. Cnd rndul dvs. este terminat, mut-te la urmtoarea linie i
introducei un tag de ncheiere aliniat vertical cu tag-ul de deschidere ,
pentru a crea lizibilitate.
celula 1
celula 2
celula 3
7. Repet paii 2. pn la 7. pentru fiecare rnd.
8. Dupa ce completezi numrul de rnduri dorit, tasteaz tag-ul pentru a
termina tabelul.
DESIGNER PAGINI WEB
62
EXEMPLU
Frames
Ce sunt frames?
Cu frames, poi afia mai mult de un document HTML n aceeai fereastr de
browser.Fiecare document HTML se numete frame i fiecare frame este independent de
celelalte.
DESIGNER PAGINI WEB
63
Acesta este un exemplu de o pagin Web care folosete frames:
Poi vedea o linie vertical ce divide ecranul n dou pari. Cea din stnga este o bar
lateral n timp ce cea din dreapta este o list cu anunuri pentru o lecie de zoologie.
Acestea sunt dou documente separate HTML pe care, pn n acest moment, ar trebui s
fii capabil s le creezi singur, deci haide s ne concentrm pe codul pe care urmeaz s-l
foloseti pentru a pune toate acestea ntr-o pagin de Web.
Tag-ul Frameset
Tag-ul definete modul n care se poate mpri fereastra n frame-uri. Fiecare
frameset definete un set de rnduri / coloane. Valorile rndurilor / coloanelor Indic ct
din suprafaa ecranului va fi ocupat de fiecare rnd / coloan.
DESIGNER PAGINI WEB
64
Tag-ul frame
Tag-ul definete ce document HTML trebuie s fie pus n fiecare frame. n
exemplul de mai sus, am creat un set de frames cu dou coloane. Prima coloan ocup
15% din browser-ul total al ecranului, iar a doua coloan ocup restul. Documentul
HTML "sidebar.html" e
