Documentatie

Proiect Atestat 2011
GSI. Energetic Campina
Aquatic
Cu noi aduci natura in casa ta.
LUCRARE PENTRU ATESTAT
Elevi : Jitaru Lucian, Istrate Catalin

Profesor indrumator: Stoicescu Denisa
Liceul : GSI. Energetic Campina

Cuprins:
1.
Proiect pag. 3
2.
Structura pag. 4
3.
HTML pag. 14
4.
5.
Dreamwaver pag. 29
Detalii tehnice pag. 38
6. Bibliografie pag. 45

PROIECT
Proiectul consta in realizarea unei pagini web, cu
ajutorul progamului Adobe Dreamwaver, dar si cu
limbajul Html oferit de internet.
Site-ul consta in prezentarea unei firme de constructii
de acvarii, singura din Romania, care pe langa
construirea propriu-zisa se mai ocupa si cu mentenanta
acvariilor, intretinerea de la cea de baza pana la cea mai
detaliata. Pe langa construirea acvariilor, ne ocupam si
cu construirea si asamblarea, la comanda a capacelor de
acvarii si a filtrelor externe, avantajul principal fiind un
raport calitate/pret exceptional.
In cele ce urmeaza va fi prezentat site-ul, atat
structura de desing cat si cea de cod (limbaj html).

STRUCTURA
Site-ul este realizat in Dreamweaver CS 3 ( detalii

despre Deamweaver)folosind cod html si facilitatile
programului .
Site- ul este alcatuit din pagini multiple.
Structura folderelor este urmatoarea:
Folderul principal:

Folderul resurse:

Si folderul images:

La inceput apare home page-ul de unde puteti naviga

oriunde pe site :
In meniul home-pageului apare si zona cu cele mai

solicitate produse; Aceasta zona este reprezentata de:

Standul pentru acvariu, din PAL:
Filtru extern DIY:
Si Capac PAL la comanda:

8

Despre Noi
9

Contact
10

Produse
11

Submeniul Creveti:
Submeniul Pesti de acvariu:
12

Submeniul Hrana:
Submeniul Acvarii:
13

HTML
1. Limbajul HTML
HTML (Hypertext Markup Language) este un limbaj creat n scopul
de a descrie, n mod text, formatul paginilor Web; fisierele create n
acest limbaj vor fi interpretate de navigatoare, care vor afisa paginile n
forma dorit (cu texte formatate, liste, tabele, formule, imagini,
hiperlegturi, obiecte multimedia etc.). HTML a aprut ca o aplicatie
ISO standard (apartine standardului SGML - Standard Generalized
Markup Language, specializat pentru hipertext si adaptat la Web).
Asa cum se poate deduce din numele limbajului, HTML descrie
caracteristicile de format ale elementelor incluse prin procedee de
marcare. Acestea pot fi asemnate intuitiv cu marcajele folosite n
tipografie pentru a indica scrierea unui text cu un anumit tip de
caractere. Fiecare element va fi introdus ntre dou marcaje ("tags", n
limba englez) - de nceput si sfrsit - (uzual) de forma <marcaj>
</marcaj>. Caracterele speciale de delimitare a marcajelor "<", ">"
permit deosebirea acestora de textul propriu-zis. De exemplu, pentru
textele aldine (ngrosate), marcajul de nceput este <B> iar de sfrsit </B>.
n informatic, limbajele de marcare sunt foarte convenabile fiindc
comenzile lor pot fi interpretate simplu. LaTeX-ul, de exemplu, este tot
un limbaj de marcare; prin interpretarea fisierelor .tex descrise n acest
limbaj se va genera formatul dorit al documentelor pe diverse tipuri de
sisteme de calcul (n cazul, LaTeX-ului, se obtine uzual format
PostScript sau PDF). n schimb, procesoarele de documente uzuale nu
au un limbaj de marcare standardizat, care s ofere compatibilitate
ntre diverse tipuri de calculatoare si sisteme de operare. Astfel, se poate
spune c avantajele aplicrii limbajelor de marcare constau n
portabilitate si flexibilitate: fisierele create cu ajutorul lor pot fi
transferate pe orice tip de sistem, unde vor fi interpretate cu ajutorul
unor programe specifice.
14

De fapt, procesoarele de texte uzuale folosesc adesea procedee de

marcare pentru formatri (de exemplu, formatrile de tip caracter din
Word); n acest caz ns, caracterele de control introduse sunt ascunse
iar rezultatul editrii este direct vizibil ("What You See Is What You
Get"). n schimb, n limbajele de marcare - inclusiv HTML - marcajele
sunt introduse n text, astfel nct acestea sunt exclusiv succesiuni de
caractere (litere, cifre, caractere speciale) - fisiere de tip text.
Referitor la legtura dintre procesoarele de documente uzuale si
limbajul HTML, mai trebuie mentionat faptul c ultimele versiuni ale
editoarelor de documente ofer facilitti de salvare n format HTML de exemplu, Word, ncepnd cu versiunea Microsoft Office '97. Mai
mult, toate produsele incluse n aceast gam dedicat biroticii (MS
Office) ofer compatibilitate cu formatul HTML.
Procesele de standardizare si de includere a comenzilor de marcare
n fisierele HTML permit navigatoarelor s citeasc si s formateze
paginile Web, lucru foarte important n conditiile n care ele contin nu
numai texte alb-negru, ci si culori, imagini, hiperlegturi, diverse
obiecte. Practic, marcajele HTML asigur controlul asupra modului de
afisare a obiectelor corespunztoare n cadrul programelor de
vizualizare a documentelor HTML - navigatoarele.
Limbajul HTML a evoluat n versiuni succesive, odat cu evolutia
protocolului HTTP si a programelor de navigare. Astfel, HTML 1.0 era
compatibil cu Mosaic, primul program de navigare, dar dup aparitia
unor navigatoare noi, a fost necesar introducerea unui standard oficial
Internet pentru construirea paginilor (HTML 2.0) si extinderea sa cu
noi facilitti: formule matematice, tabele, moduri avansate de descriere
a organizrii paginilor (ncepnd cu HTML 3.0).
Standardizarea oficial a limbajului HTML a fost realizat de
consortiul WWW si dezvoltat de diversi productori de soft (unii
dintre acestia urmresc chiar promovarea navigatoarelor proprii prin
introducerea unor particularitti n formatele oficiale).
15

Paginile HTML se pot crea cu orice editor de texte de ctre

utilizatorii care cunosc limbajul HTML sau mai simplu, se pot utiliza
editoare speciale, n care obiectele se introduc interactiv iar codul
HTML se genereaz automat. Avnd n vedere c si n acest caz este
util cunoasterea marcajelor generate pentru corectarea eventualelor
erori (mai ales n cazul link-urilor), vom prezenta n continuare
entittile care se pot introduce n paginile HTML si marcajele
caracteristice acestora:
Elementele limbajului HTML
Toate obiectele HTML sunt introduse ntre marcaje care le
definesc; majoritatea acestora sunt de forma <tip_obiect> (la nceput) si
</tip_obiect> (la sfrsit). Tipul standard al obiectului poate fi specificat
cu majuscule sau minuscule; totusi, se recomand utilizarea
majusculelor fiindc astfel marcajele ies n evident.
Majoritatea navigatoarelor permit vizualizarea paginii curente n
formatul surs HTML (forma pe care o interpreteaz pentru afisarea
paginii). La interpretare, programele de navigare ignor spatiile si
<Enter>-urile, aplicnd formatarea specificat.
Exist ns si marcaje cu parametri; acestea au forma <tip_obiect
param1=valoare1 param2=valoare2 >. De exemplu, obiectele de tip
imagine sunt introduse cu delimitatorul <IMG>, care are diversi
parametri. Pentru definirea hiperlegturilor se foloseste marcajul <A>,
care are de asemenea parametri proprii.
Codurile de marcare HTML pot fi clasificate n urmtoarele categorii:
1. marcaje de baz - cele care delimiteaz pagina / documentul
HTML, titlul acesteia si corpul paginii;
2. marcaje pentru structurarea documentului - care permit
introducerea de subtitluri, paragrafe, linii de delimitare;
3. marcaje pentru formatarea textului si crearea listelor;
4. marcaje pentru crearea hiperlegturilor (hyperlinks);
5. marcaje pentru introducerea de obiecte - tabele, formule, imagini
sau obiecte multimedia preluate din fisiere, formulare.
16

Vom descrie n paragrafele urmtoare, elementele caracteristice

fiecreia din aceste categorii.
Pentru structurarea si organizarea informatiilor din paginile web se
pot utiliza frame-uri (marcajul <FRAME>), prin care la un moment dat
se afiseaz mai multe ferestre continnd fiecare cte o pagin.
Introducerea si gestiunea frame-urilor se realizeaz foarte convenabil
folosind editoarele HTML.
Mai mentionm faptul c n ultimele versiuni ale limbajului HTML

si ale browser-elor s-a introdus posibilitatea integrrii, respectiv lansrii
n executie prin navigator, a unor aplicatii. Acestea sunt scrise n
limbajul Java,
un limbaj cu caracteristici distribuite si obiectuale, adaptat
programrii n Web; ele se numesc "applet"-uri si se introduc n sursele
HTML cu marcajul <APP> sau <APPLET> . Ultimele versiuni de
editoare HTML permit introducerea interactiv a applet-urilor Java.
Marcaje de baz
O pagin Web este delimitat de marcajele <HTML> si </HTML> care
indic nceputul si finalul documentului si contine:
17
zon de antet cuprins ntre marcajele: <HEAD> </HEAD>

si
un corp delimitat de marcajele:
<BODY> </BODY>.

Zona de antet este utilizat de ctre programele de cutare pe siteurile web si permite specificarea titlului paginii care va fi afisat de
navigator (nu apare propriu-zis n continutul paginii).
titlul, introdus n antet, este cuprins ntre marcajele <TITLE>
</TITLE>.
Astfel, o form extrem de simpl a unui document HTML ar putea fi
cea din urmtorul exemplu:
<HTML>
<HEAD> <TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY>
</HTML>
Marcaje pentru structurarea documentului
Programele de navigare asigur afisarea diferentiat a unot titluri
si subtitluri pentru sectiunile paginii, dup criteriile implementate n
acest scop la conceperea sa (litere mai mari sau mai mici, diverse culori,
litere aldine sau simple, unul sau mai multe rnduri libere dup titlu
etc.).
Titlurile de capitole sau subtitlurile sunt definite de marcajele
<Hn>, unde n este o cifr ntre 1 si 6 care specific nivelul titlului (1 este
titlul principal iar 6 corespunde celui mai sczut nivel). Astfel:
<H1> </H1> indic un subtitlu de nivelul 1
<H6> </H6> indic un subtitlu de nivelul 6.
18

Pentru separarea zonelor paginii se pot folosi treceri la:
linie nou - cu marcajul <BR>, eventual cu desenarea unei linii

orizontale - marcajul <HR>;
paragraf nou - cu marcajul <P> (se insereaz o linie nou si
eventual se face o indentare). Marcajul </P> desemneaz sfrsitul
de paragraf dar este mai rar folosit (se poate omite).
Marcaje pentru formatarea textului si crearea listelor

Formatrile uzuale de texte permit scrierea cu caractere:
aldine - n acest scop pentru acel text se aplic marcajele <B>

</B>;
cursive (italice) - pentru acel text se aplic marcajele <I>
</I>;
subliniate - textul se introduce ntre marcajele <U> </U>.
Unele programe mai vechi de navigare nu permiteau reprezentarea

acestor formate; n acest caz, se aplicau alte moduri de evidentiere a
textelor respective (culori, video invers).
Alte tipuri de formatri de caractere care se pot defini se refer la:
dimensiunea fonturilor si culori - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> </FONT> , care indic utilizarea unui
font de dimensiune x si culoare y.
19
x poate fi un numr ntre 1 si 12, indicnd mrimea exact, sau un

numr cu semn, indicnd mrimea relativ la dimensiunea
curent.
y poate fi numele unei culori standard, specificat n limba
englez si ntre ghilimele, sau, eventual, descompunerea unei
culori n componentele RGB, sub form hexazecimal (cte dou
cifre hexa pentru fiecare component).

Suplimentar, se pot crea pagini de stiluri, n care s se defineasc stiluri

logice, modificabile ulterior; n acest scop, se folosesc marcajele <DN> definitie, <EM> - punere n evident, <STRONG> - accentuare
puternic.
Pentru tastaturile care suport numai codurile ASCII, caracterele
speciale se pot crea folosind formatul &nume_caracter - de exemplu,
è pentru e.
Avnd n vedere semnificatia special a caracterelor <, > si &, aparitia
lor n documente trebuie specificat sub forma caracterelor speciale:
< , > , respectiv & .
Prezentm n continuare un exemplu de document HTML,
precum si modul n care acesta este afisat de Netscape Navigator.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Pagina simpla</title>
</head>
<body>
<p>Acesta este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mica imagine
<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>
</html>
20

n figura, se observ c textul propriu-zis al documentului poate fi

delimitat fat de codurile de marcare, iar formatarea textului din
documentul HTML nu corespunde cu cea afisat de programul de
vizualizare:
textul este extins pentru a ocupa ntregul ecran si este afisat cu un

corp de liter diferit fat de sursa HTML;
terminatorii de linie nu sunt respectati;
spatiile albe suplimentare din documentul surs sunt ignorate.
Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliat

mai jos.
Limbajul HTML permite definirea mai multor tipuri de liste si
imbricarea lor (includerea unor liste n altele), caz n care trebuie
verificat cu atentie corespondenta dintre marcajele de nceput si sfrsit
pentru fiecare list. Formatarea listelor la afisarea paginii (introducerea
bulinelor, numerotrii etc.) se face de ctre programul de navigare.
Elementele listelor se introduc ntre marcajele <LI> </LI>
("list item"). Modul de aparitie al elementelor depinde de tipul de list
n care sunt incluse (cu buline, numerotate etc.), determinat de marcajul
specific.
21

Astfel, listele pot fi:
neordonate (cu buline) - delimitate de marcajele <UL> </UL>

("unordered list"); elementele lor se afiseaz cu buline;
ordonate (numerotate) - delimitate de marcajele <OL> </OL>
("ordered list"); elementele lor se vor numerota;
de tip meniu - delimitate de marcajele <MENU> </MENU>;
elementele acestor liste apar ntr-o reprezentare compact pe
ecran (multicoloan);
glosare (liste de definitii) delimitate de marcajele <DL> </DL>
("definition list"); elementele acestora au cte dou componente,
introduse respectiv cu marcajele <DT> (pentru nume) si <DD>
(pentru semnificatia asociat);
tabele scurte - create cu marcajul <DIR>.
Listele utilizate cel mai frecvent sunt cele ordonate si neordonate.

Prezentm n continuare un exemplu simplu de pagin HTML care
contine aceste tipuri de liste.
<html>
<head>
<title>Pagina cu liste</title>
</head>
<body>
<p>Aceasta pagina exemplifica crearea listelor</p>
<p>Cele mai uzual folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O lista ordonata este o lista numerotata:
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>
22

Exemple de liste ntr-o pagin HTML

Marcaje pentru crearea hiperlegturilor
Hiperlegturile ("hyperlinks") se introduc cu marcajele <A> </A>

("anchor") aplicate asupra unui text sau a unei imagini. Ele se pot crea
ctre:
adrese URL - astfel se asigur accesul n cadrul procesului de

navigare (prin protocoale specifice), nu numai la paginile web, ci
si la diverse servicii Internet;
fisiere / resurse locale adic aflate pe acelasi calculator cu pagina
creat - link-uri locale ; acestea ar putea fi accesate si printr-un
URL cu protocolul "file" dar pentru mai mult simplitate, este
suficient specificarea numelui si cii fisierului local;
o zon din documentul HTML curent - link-uri interne.
n fiecare din aceste cazuri, un click pe textul sau imaginea respectiv

va determina activarea legturii si afisarea prin intermediul
navigatorului a resursei asociate link-ului.
23

Resursa asociat unei legturi este descris prin parametrii marcajului

<A>:
HREF - permite asocierea unei adresei URL, crearea unei legturi

locale prin specificarea numelui si cii fisierului corespunztor
sau a unei legturi interne documentului; este cel mai important
parametru pentru construirea de hiperlegturi;
NAME - numele hiperlegturii sau al zonei dintr-o pagin ctre
care se face referirea, n cazul unui link intern;
METHODS - metodele de acces (acest parametru se utilizeaz
doar n prelucrri speciale).
Astfel, un link local sau ctre o adres URL se poate defini pe un
text cu: <A HREF="resursa"> text </A>.
O legtur intern ctre o zon a documentului curent se indic folosind

marcajul <A NAME="nume-zona">.
Marcaje pentru introducerea de obiecte
Prima versiune de HTML (1.0) nu permitea descrierea tabelelor
sau a informatiilor formatate. Asemenea obiecte trebuiau create
formatat si introduse ca obiect deja formatat, cu marcajele <PRE>,
</PRE>. Aceste marcaje indicau navigatorului c textul inclus trebuia
afisat caracter cu caracter, fr vreo interventie de formatare. n
versiunile ulterioare ale limbajului HTML, s-au introdus ns facilitti
elegante de formatare, de includere a tabelelor si a altor obiecte.
n HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii
orizontale si coloane verticale la a cror intersectie se formeaz celulele.
Acestea pot contine intrri diverse: texte, figuri sau chiar alte tabele. Se
pot realiza reuniri de celule (de exemplu, pentru titluri mai lungi).
Atributele de formatare a tabelului (aliniere, stilul chenarului si
marginilor etc.) se definesc n proiectarea paginii dar modul lor de
afisare va depinde si de programul de navigare.
24

Tabelele se introduc ntre marcajele <TABLE> </TABLE>,

crora li se pot atasa (optional) parametrii BORDER si RULES. Un
titlu pentru tabel se poate introduce cu marcajul <CAPTION>. Fiecare
coloan se defineste cu marcajul <COL>, avnd ca parametru ALIGN modul de aliniere a informatiilor din acea coloan (LEFT, CENTER,
RIGHT).
Antetul tabelului se poate indica ntre marcajele <TH></TH>
("Table Header"), pentru trecerea la o linie nou se utilizeaz marcajul
<TR> ("Table Row") iar celulele individuale se marcheaz cu <TD>
("Table Data"), eventual cu parametru de aliniere. Se mai pot specifica
alinieri orizontale sau verticale ale celulelor, grupri de celule etc.
Aceste marcaje permit navigatorului s afiseze diferentiat informatiile
din tabel.
Prezentm n continuare un exemplu simplu de tabel.
<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231
milioane lei</TD>
</TABLE>
</BODY>
</HTML>
25

Exemplu de tabel ntr-o pagin HTML
Mrimea liniilor si a coloanelor poate fi controlat suplimentar prin

marcajele <ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare
indicnd mrimea n "celule normale". n plus, se poate indica trasarea
unei margini pentru tabel, prin marcajul <TABLE BORDER>.
Includerea imaginilor se face folosind marcajul <IMG>, care are
parametri specifici:
26
SRC indic (dup semnul '=') URL-ul imaginii, respectiv calea

fisierului dac acesta este local; uzual, se accept fisiere n format
GIF sau JPEG;
ALLIGN controleaz alinierea imaginii fat de limita inferioar a
textului (TOP, MIDDLE sau BOTTOM); este un parametru
optional;
ALT furnizeaz textul afisat n locul imaginii dac utilizatorul
dezactiveaz optiunea de afisare a imaginilor (parametru
optional);
ISMAP este un indicator optional pentru imaginile care sunt hrti
selectabile.

Astfel, introducerea simpl a unei imagini se poate realiza cu <IMG

SRC="specificare-imagine">. Un exemplu de imagine inserat ntr-o
pagin
Remarcm faptul c, utiliznd parametri specifici, marcajul <IMG> se
poate folosi si pentru inserarea unor fisiere multimedia, cum ar fi
secventele video. Avnd n vedere c aceste operatii se realizeaz mai
usor folsind un editor HTML.
Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor
de la furnizori ctre utilizatori, transferul n sens invers fiind foarte
dificil.
Odat cu dezvoltarea Web-ului si mai ales cu utilizarea sa n scopuri
comerciale si n diverse alte domenii, s-a fcut simtit necesitatea
comunicrii n dublu sens pentru preluri de comenzi, completarea
unor fise de nregistrare, distribuirea de produse soft, administrarea de
chestionar, transmiterea unor informatii personale etc. Acestea au fost
motivatiile introducerii formularelor n HTML 2.0.
Formularele contin obiecte de control care permit utilizatorilor
introducerea de informatii prin completarea unor cmpuri specifice
(casete de text), prin selectarea sau activarea unor optiuni (comutatoare,
grupuri sau liste de optiuni). Aceste informatii vor fi transmise, dup
activarea butonului SUBMIT (echivalent cu tastarea lui <Enter>)
proprietarului paginii, introduse n baze de date dedicate si prelucrate
cu aplicatii specifice.
Formularele se introduc prin marcajelele <FORM> ... </FORM> ,
crora li se ataseaz parametri specifici care definesc metodele de
transmitere si tratare a datelor. Un formular poate contine obiecte de
control de diverse tipuri, definite cu marcajul <INPUT> si o varietate de
parametri care stabilesc, pentru obiectul definit, tipul, dimensiunea si
modul lui de afisare. Astfel, se pot crea cmpuri de text (care vor fi
completate cu texte de ctre utilizator), liste de alternative, comutatoare,
grupuri de optiuni, butoane, hrti active etc.
27

Datele preluate prin intermediul formularelor se trateaz conform

standardului CGI (Common Gateway Interface) prin intermediul unor
programe sau script-uri CGI. n plus, un asemenea script poate
interactiona cu baza de date creat pentru realizarea unor actiuni
specifice (de exemplu, hrtile active folosesc script-uri CGI pentru a
executa diferite actiuni, n functie de zona selectat de utilizator).
Script-urile CGI pot executa si alte operatii dect prelucrarea
formularelor, producnd iesiri convenabile. Dac o hiperlegtur indic
spre un script CGI, la selectarea legturii se va executa script-ul (cu
anumite variabile de context care retin diverse informatii de stare).
Script-ul va produce un fisier, de exemplu o pagin web, care va fi
interpretat() de navigator. Acest mecanism permite script-urilor s
genereze, aproape
instantaneu, pagini web care s satisfac diverse cerinte ale

utilizatorilor, furniznd anumite rspunsuri asteptate n urma unor
actiuni.
Crearea interactiv a formularelor, folosind produse soft specializate
n realizarea de pagini Web este relativ accesibil pentru utilizatorii
familiarizati cu caracteristicile obiectelor de control specifice
aplicatiilor soft dar tratarea ulterioar a informatiilor transmise
necesit cunostinte de specialitate.
Numele, simbolurile si procedura de introducere interactiv dintr-un

editor HTML (de exemplu, Microsoft Front Page) a obiectelor de
control sunt extrem de apropiate de cele asociate obiectelor similare din
formularele sau rapoartele Microsoft Access. Pentru utilizatorii mai
putin avizati ns, crearea, chiar interactiv, a formularelor este mai
dificil.
28

Macromedia Dreamweaver
Macromedia Dreamweaver este o unealta destinata creatorilor de pagini
web. Dreamweaver a fost creat de Macromedia (acum Adobe Systems) si
momentan a ajuns la versiunea 9.Primele versiuni ale produsului serveau
doar ca simple editoare HTML de tipul WYSIWYG ,dar in versiunile recente
au fost implementate functii de editare avansate si support pentru alte
tehnologii web cum ar fi CSS ,JavaScript etc.
Dreamweaver s-a bucurat de un larg success inca de la sfarsitul anilor
90 si momentan detine aproximativ 80% din piata editoarelor
HTML.Produsul poate di rulat pe variante platforme software: Mac ,
Windows, dar suporta in acelasi timp si platforme UNIX cu ajutorul unor
emulatoare software,cum ar fi Wine.
Ca orice alt editor WYSIWYG,Dreamweaver poate ascunde detaliile de
implementare a paginilor HTML, facand astfel posibila crearea cu usurinta a
paginilor web de catre utulizatorii neexperimentati.
Unii creatori de pagini web critica aceste tipuri de editoare deoarece
produc pagini de dimensiuni mult mai mari decat ar fi necesar ,ceea ce
conduce la o functionare neperformanta a browserelor web.
Aceasta afirmatie este in mare parte adevarata deoarece paginile web
produse folosesc design-ul pe baza de table. In plus, produsul a mai fost
criticat in trecut si pentru producerea de coduri care adesea nu erau conform
standardelor W3C, dar acest aspect a fost mult imbunatatit in versiunile
recente.
Cu toate acestea,Macromedia a crescut suportul pentru tehnologia CSS si
alte modalitati de design fara a fi necesara folosirea design-ului pe baza de
tabel.
Dreamweaver pemite folosirea majoritatii browserelor instalate pe

calculatorul utilizatorului ,pentru a previzualiza website-ul creat. De
asemenea contine si cateva utulitare pentru administrarea site-urilor ,cum ar
29

fi cele pt a gasi si a modifica un paragraf sau o linie de cod,in intregul web

site, pe baza oricaror parametri specificati de catre utilizator. Cu ajutorul
panourilor de stare se poate crea cod JavaScript fara a avea cunostinte de
programare.
Odata cu aparitia versiunii MX, Macromedia a incorporate utilitare de

generare dinamica a continutului.De asemenea ,este oferit suport pentru
conectarea la baze de date (cum ar fi MySQL si Microsoft Access) pentru a
filtra si afisa continutul script-ului de genul PHP, ColdFusion, Active Server
Pages(ASP) si ASP.NET, fara a avea nevoie de o prealabila experienta in
programare.
Un aspect foarte laudat al Dreamweaver-ului il reprezinta arhitectura
sa extensibila.
Extensiile,asa cum sunt ele cunoscute ,sunt mici programe,pe care orice
dezvoltator le poate scrie (de obicei in HTML si JavaScript ) sip e care le
poate descarca si instala , acestea aducand un spor de performanta si
functionalitate imbunatatita programului .Exista o comunitate de dezvoltatori
care produc extensii si le publica (atat commercial , cat si gratuit ) pentru
probleme de dezvoltare web,de la simple efecte rollover pana la solutii
complete de vanzare online.
30

31

Meniul programului Macromedia Dreamweaver 8

Meniurile File si Edit sunt standard pentru majoritatea programelor.Meniul
File contine comenzi de deschidere, salvare , import si export de fisiere.
Meniul edit contine comenzile Cut , Copy si Paste ,alaturi de comenzile Find
si Replace si comanda Preferences.Multe elemente din interfata Dreamweaver
si din operarea sa pot fi configurate in Preferences.
32

Meniul View activeaza si dezactiveaza vizualizarea continutului sectiunii

de antet(head); a elementelor inviziblile;a straturilor ,tabelelor si
limitelor cadrelor,a barei de stare si a hartilor de imagine.
Meniul View are de asemenea comenzi de activare a riglei si a grilei,de
executare a pug-in-urilor si pentru afisarea de imagini de trasare. Comanda
Prevent Layer Overlaps(Prevenirea suprapunerii de straturi) este si ea
pozitionata in meniul View.
Meniul View
33

Meniul Insert este aproape echivalent cu bara de inserari.Din acest meniu se

poate insera optional toate elementele disponibile pe bara de inserari. Bara de
inserari contine un numar total de sectiuni din care putem sa alegem diferite
categorii de obiecte disponibile. Exista douasprezece sectiuni in bara de
inserari: Common,
Layout,Text,Tables,Frames,Forms,Templates,Characters,Media,Head,Script
si Application. Pentru a afisa butoanele obiectelor dintr-o anumita categorie
trebuie sa dam click pe sectiunea categoriei.
34

Meniul Modify ne permite sa modificam proprietatile obiectului selectat la un

moment dat.
35

Meniul Text ne ofera acces la mai multe modalitati de finisare a aspectului

textului din pagina Web. Cel mai important pentru cei care scriu cu greseli
este ca meniul text contine comanda Check Spelling (verificarea ortografiei).
Putem indenta un text,crea o lista si modifica proprietatile fontului.
36

Meniul Commands ofera comenzi utile cum ar fi Clean up HTML (curatarea

codului HTML) si Clean Up Word HTML ( Curatarea cuvintelor din codul
HTML).
37

Detalii Tehnice
Codul sursa :
(home page)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aquatic</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!-.style2 {
font-size: 18px;
font-weight: bold;
}
.style3 {color: #0099FF}
.style4 {
color: #00CCFF;
font-weight: bold;
}
.style5 {font-weight: bold}
-->
</style>
</head>
<body>
<div id="mainPan">
<div id="topPan">
<a href="index.html"><img src="images/logo.gif" alt="Aquatic" width="136"
height="31" border="0" class="logo" title="Aquatic"/></a> <b>
<p class="caption style4"><font color="#0099FF"> Cu noi aduci natura in casa
ta</font> </p></b>
</div>
<div id="headerPan">
<ul class="leftmenu style5">
<li></li>
<li>
<div align="left"><a href="index.html">Home</a></div>
</li>
<li>
<div align="left"><a href="resurse/Produse.html">Produse </a><a
href="resurse/Despre Noi.html">Despre Noi</a><a
href="resurse/Contact.html">Contact</a></div>
38

</li>
</ul>
</div>
<div id="bodyPan">
<div id="leftPan">
<h2>Parteneri </h2>
<ul>
<li><a href="http://www.acvariu.ro"
target="http://www.acvariu.ro">acvariu.ro</a></li>
<li><a href="http://www.reef.ro"
target="http://www.reef.ro">reef.ro</a></li>
<li><a href="http://www.pepika.ro"
target="http://www.pepika.ro">pepika.ro</a></li>
<li> </li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="rightPan">
<p> </p>
<p> Aquatic este singura firma din Romania ce se
ocupa cu fabricarea integrala a, acvarilor , oferind o gama larga de produse (acvarii
de dimensiuni diverse sau la dimensiunea ceruta de client , echipamente specifice , hrana
pesti , pesti etc .)</p>
<p>Pentru a vedea gama noastra de produse accesati pagina produselor .</p>
<p> </p>
<p> </p>
<p>Mai jos puteti vedea cele mai comandate produse din saptamana
trecuta.</p>
<p> </p>
<p> </p>
<p class="more"><span class="style2">Cele mai solicitate produse
...</span></p>
<ul class="events">
<li class="captionthree style3"></li>
<li><a href="resurse/Stand PAL.html">Stand acvariu PAL </a><a
href="resurse/Filtru DIY.html">FIltru extern DIY</a></li>
<li></li>
<li><a href="resurse/acvarii.html">Acvarii</a> </li>
<li><a href="resurse/Capac PAL.html">Capac PAL la
comanda</a></li>
39

</ul>
<p><img src="images/Aquascape-Takashi-Amano.jpg" width="161"
height="115" align="right"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<p class="copyright">aquatic. All right reserved. </p>
<p class="copyright">design by Jitaru Lucian si Istrate Catalin</p>
</div>
</div>
</body>
</html>
Fisierul Style.css:
/* CSS Document */
body{padding:0px; margin:0px; background:url(images/main-bg.gif) 0 0 repeat-x #fff;
color:#5F7A77; font:13px/19px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, h5, img{padding:0px; margin:0px;}
ul{list-style-type:none}
/*----MAIN PANEL----*/
#mainPan{width:778px; position:relative; margin:0 auto;}
/*----TOP PANEL----*/
#topPan{width:778px; height:65px; background:url(images/topbg.jpg) 0 0 no-repeat #fff;
color:#828282; position:relative; margin:0 auto;}
#topPan img.logo{width:136px; height:31px; position:absolute; top:12px; left:235px;}
#topPan p.caption{width:200px; background:#fff; color:#828282; position:absolute;
top:43px; left:235px;}
#topcontactPan{width:181px; height:36px; background:url(images/icon1.jpg) 68px 0px
no-repeat; position:absolute; top:11px; left:567px; padding:7px 0 0;}
#topcontactPan p.callus{width:63px; height:17px; display:block; background:#DDC40C;
color:#fff; font:14px/17px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;
text-transform:uppercase; text-align:center;}
#topcontactPan p.tollfree{width:63px; height:20px; display:block; background:#fff;
color:#A99607; font:11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; fontweight:bold; text-transform:uppercase; text-align:center;}
40

#topcontactPan p.phoneno{width:88px; height:28px; display:block; position:absolute;
top:7px; left:91px; background:#fff; color:#00473E; border:1px solid #A2C1C0; fontsize:11px; line-height:14px; text-align:center;}
/*----/TOP PANEL----*/
/*----HEADER PANEL----*/
#headerPan{width:686px; height:153px; background:url(images/header.jpg) 0 0 norepeat; position:relative; margin:0 auto; padding:11px 0 0 92px;}
#headerPan ul.leftmenu{width:87px;}
#headerPan ul.leftmenu li{width:87px; height:22px; border-bottom:1px dashed
#AECCCA;}
#headerPan ul.leftmenu li a{width:72px; height:22px; display:block;
background:url(images/bullet-normal.gif) 0 7px no-repeat #fff; color:#305E5C; lineheight:22px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li a:hover{background:url(images/bullet-hover.gif) 0 7px norepeat #fff; color:#305E5C; line-height:22px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li.Solutions{width:72px; height:22px; display:block;
background:url(images/bullet-hover.gif) 0 7px no-repeat #fff; color:#305E5C; lineheight:22px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li.clients{width:87px; height:22px; border-bottom:none;}
#headerPan ul.botton{width:150px; height:45px; position:absolute; top:118px;
left:250px;}
#headerPan ul.botton li{float:left; height:45px;}
#headerPan ul.botton li.home a{width:42px; height:45px; display:block;
background:url(images/home-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0
12px 0 0;}
#headerPan ul.botton li.home a:hover{background:url(images/home-hover.gif) 0 0 norepeat;}
#headerPan ul.botton li.aboutus a{width:42px; height:45px; display:block;
background:url(images/aboutus-normal.gif) 0 0 no-repeat; text-indent:-200000px;
margin:0 12px 0 0;}
#headerPan ul.botton li.aboutus a:hover{background:url(images/aboutus-hover.gif) 0 0
no-repeat;}
#headerPan ul.botton li.contact a{width:42px; height:45px; display:block;
background:url(images/contact-normal.gif) 0 0 no-repeat; text-indent:-200000px;
margin:0px;}
#headerPan ul.botton li.contact a:hover{background:url(images/contact-hover.gif) 0 0 norepeat;}
/*----/HEADER PANEL----*/
/*----BODY PANEL----*/
#bodyPan{width:686px; background:url(images/bodybg.gif) 0 0 no-repeat;
position:relative; margin:0 auto; padding:22px 0 0 92px;}
/*----Body Left Panel----*/
41

#leftPan{width:114px; float:left;}
#leftPan h2{width:114px; height:34px; background:#fff; color:#5F7A77; font-size:18px;
line-height:34px;}
#leftPan ul{width:114px;}
#leftPan ul li{width:114px; height:24px;}
#leftPan ul li a{width:102px; height:24px; display:block; background:url(images/bullet2normal.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none; lineheight:24px; padding:0 0 0 12px;}
#leftPan ul li a:hover{background:url(images/bullet2-hover.gif) 0 10px no-repeat #fff;
color:#5F7A77; text-decoration:none;}
#leftPan ul li span{text-decoration:underline;}
/*----/Body Left Panel----*/
/*----Body Right Panel----*/
#rightPan{width:511px; float:left; border-left:1px solid #C8E8E2; margin:28px 0 0;
padding:0 30px;}
#rightPan p{padding:0 0 10px 0;}
#rightPan p.more{width:502px; height:25px; float:left; background:url(images/sky-colorbg.gif) 0 10px repeat-x; padding:0 0 20px 0;}
#rightPan p.more a{width:92px; height:21px; display:block;
background:url(images/icon2.jpg) 0 0 no-repeat #fff; color:#958201; line-height:21px;
text-transform:uppercase; text-decoration:none; margin:0 0 0 328px; padding:4px 0 0
50px;}
#rightPan p.more a:hover{background:url(images/icon2.jpg) 0 0 no-repeat #fff;
color:#645804; text-decoration:none;}
#rightPan h2{width:96px; height:77px; float:left; display:block;
background:url(images/icon3.jpg) 8px 38px no-repeat #B1DED5; color:#fff; fontsize:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0
0 75px; margin:0 0 5px 0;}
#rightPan ul.services{width:137px; height:114px; float:left; border:1px solid #B1DED5;
background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
#rightPan ul.services li.captionone{background:#fff; color:#AC9601; font-size:12px;
font-weight:bold; text-decoration:underline;}
#rightPan ul.services li{width:137px; height:20px;}
#rightPan ul.services li a{width:125px; height:20px; display:block;
background:url(images/bullet2-normal.gif) 0 7px no-repeat #fff; color:#5F7A77; textdecoration:none; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.services li a:hover{background:url(images/bullet2-hover.gif) 0 7px norepeat #fff; color:#5F7A77; text-decoration:none;}
#rightPan ul.servicestwo{width:137px; height:114px; float:left; border-bottom:1px solid
#B1DED5; border-top:1px solid #B1DED5; border-right:1px solid
#B1DED5;background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
42

#rightPan ul.servicestwo li.captiontwo{background:#fff; color:#AC9601; font-size:12px;
font-weight:bold; text-decoration:underline;}
#rightPan ul.servicestwo li{width:137px; height:20px;}
#rightPan ul.servicestwo li a{width:125px; height:20px; display:block;
background:url(images/bullet2-normal.gif) 0 7px no-repeat #fff; color:#5F7A77; textdecoration:none; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.servicestwo li a:hover{background:url(images/bullet2-hover.gif) 0 7px norepeat #fff; color:#5F7A77; text-decoration:none;}
#rightPan h4{width:96px; height:77px; float:left; display:block;
background:url(images/icon4.jpg) 8px 38px no-repeat #DFD79C; color:#fff; fontsize:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0
0 75px; margin:0 0 5px 0;}
#rightPan ul.events{width:305px; height:114px; float:left; border:1px solid #B1DED5;
background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
#rightPan ul.events li.captionthree{background:#fff; color:#AC9601; font-size:12px;
font-weight:bold; text-decoration:none;}
#rightPan ul.events li{width:305px; height:20px;}
#rightPan ul.events li a{width:293px; height:20px; display:block;
background:url(images/bullet2-normal.gif) 0 7px no-repeat #fff; color:#959595; textdecoration:underline; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.events li a:hover{background:url(images/bullet2-hover.gif) 0 7px no-repeat
#fff; color:#5F7A77; text-decoration:underline;}
/*----/Body Right Panel----*/
/*----/BODY PANEL----*/
/*----/MAIN PANEL----*/
/*----FOOTER PANEL----*/
#footermainPan{height:103px; background:url(images/footerbg.gif) 0 0 repeat-x
#D3F0F0; color:#2F5958; font:13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
position:relative; margin:0 auto; clear:both; padding:36px 0 0;}
#footerPan{width:778px; position:relative; margin:0 auto;}
#footerPan ul{width:608px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#2F5958; background:#EBF8F7; textdecoration:none; font-size:13px;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan p.copyright{width:250px; margin:10px 0 0 92px;}
43

#footerPan ul.templateworld{width:250px; background:#D3F0F0; color:#007163;
display:block; font-size:10px; position:absolute; top:49px; left:92px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#D3F0F0; display:block; color:#007163;
text-decoration:none; padding:0px; font-size:10px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:35px;
left:549px;}
#footerPanhtml a{width:64px; height:24px; display:block; background:url(images/htmlnormal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:23px; fontweight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 7px;}
#footerPanhtml a:hover{background:url(images/html-hover.gif) 0 0 no-repeat #D3F0F0;
color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:35px;
left:624px;}
#footerPancss a{width:49px; height:24px; display:block; background:url(images/cssnormal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:24px; fontweight:bold; text-decoration:none; text-transform:uppercase; padding:0 0 0 10px;}
#footerPancss a:hover{background:url(images/css-hover.gif) 0 0 no-repeat #D3F0F0;
color:#fff; text-decoration:none;}
/*----/FOOTER PANEL----*/
44

BIBLIOGRAFIE
Detalile despre Html au fost luate de pe
Wikipedia si carti de profesie.
2. Detalile despre Dreamweaver si Macromedia
au fost luate de pe site-ul producatorilor si
traduse in romana iar apoi combinate cu alte
informati carti de profesie.
3. Imaginile folosite sunt ale autorului.
1.
45

Documentatie

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Documentatie

Încărcat de

Drepturi de autor:

Formate disponibile

Proiect Atestat 2011

GSI. Energetic Campina

LUCRARE PENTRU ATESTAT

Elevi : Jitaru Lucian, Istrate Catalin

Proiect Atestat 2011

Proiect Atestat 2011

Proiect Atestat 2011

Site-ul este realizat in Dreamweaver CS 3 ( detalii

Proiect Atestat 2011

Proiect Atestat 2011

Proiect Atestat 2011

La inceput apare home page-ul de unde puteti naviga

In meniul home-pageului apare si zona cu cele mai

Proiect Atestat 2011

Standul pentru acvariu, din PAL:

Filtru extern DIY:

Si Capac PAL la comanda:

Proiect Atestat 2011

Proiect Atestat 2011

Proiect Atestat 2011

Proiect Atestat 2011

Submeniul Pesti de acvariu:

Proiect Atestat 2011

Proiect Atestat 2011

Proiect Atestat 2011

De fapt, procesoarele de texte uzuale folosesc adesea procedee de

Proiect Atestat 2011

Paginile HTML se pot crea cu orice editor de texte de ctre

Proiect Atestat 2011

Vom descrie n paragrafele urmtoare, elementele caracteristice

Mai mentionm faptul c n ultimele versiuni ale limbajului HTML

zon de antet cuprins ntre marcajele: <HEAD> </HEAD>

Proiect Atestat 2011

<H6> </H6> indic un subtitlu de nivelul 6.

Proiect Atestat 2011

Pentru separarea zonelor paginii se pot folosi treceri la:

linie nou - cu marcajul <BR>, eventual cu desenarea unei linii

Marcaje pentru formatarea textului si crearea listelor

aldine - n acest scop pentru acel text se aplic marcajele <B>

Unele programe mai vechi de navigare nu permiteau reprezentarea

x poate fi un numr ntre 1 si 12, indicnd mrimea exact, sau un

Proiect Atestat 2011

Suplimentar, se pot crea pagini de stiluri, n care s se defineasc stiluri

Proiect Atestat 2011

n figura, se observ c textul propriu-zis al documentului poate fi

textul este extins pentru a ocupa ntregul ecran si este afisat cu un

Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliat

Proiect Atestat 2011

Astfel, listele pot fi:

neordonate (cu buline) - delimitate de marcajele <UL> </UL>

Listele utilizate cel mai frecvent sunt cele ordonate si neordonate.

Proiect Atestat 2011

Exemple de liste ntr-o pagin HTML

Hiperlegturile ("hyperlinks") se introduc cu marcajele <A> </A>

adrese URL - astfel se asigur accesul n cadrul procesului de

o zon din documentul HTML curent - link-uri interne.

n fiecare din aceste cazuri, un click pe textul sau imaginea respectiv

Proiect Atestat 2011

Resursa asociat unei legturi este descris prin parametrii marcajului

HREF - permite asocierea unei adresei URL, crearea unei legturi

O legtur intern ctre o zon a documentului curent se indic folosind

Proiect Atestat 2011

Tabelele se introduc ntre marcajele <TABLE> </TABLE>,