Liceul Teoretic Videle

Atestat la informatica

THE BEATLES

Indrumator:

Autor:

Prof. Matei Iuliana

Podeanu Liliana Ramona

2014

CUPRINS
Introducere..1
Prezentarea website-ului2-6
Utilizarea website-ului7-9
Cod sursa.10-14
Bibliografie..15

INTRODUCERE
THE BEATLES este un site web care aduce informatii intr-un stil atragator
despre vestita formatie din Marea Britanie, dedicat fanilor si nu numai. Am ales aceasta
tema pentru ca The Beatles detine un loc important in istoria muzicala si ar trebui
cunoscuta de toate varstele.
Vizitatorii site-ului vor putea afla despre inceputurile trupei, componentii ei,
precum si vizualiza cateva dintre clipurile video ce au facut inconjorul lumii.
Site-ul web The Beatles a fost realizat cu ajutorul aplicatiei Adobe Dreamweaver
CS 5 in limbajul HTML.
Adobe Dreamweaver este o aplicatie de dezvoltare web disponibila atat pentru
WINDOWS cat si pentru Mac OS, ce ofera suport pentru HTML, CSS sau JavaScript.
Dreamweaver permite folosirea majoritatii browserelor instalate pe calculatorul
utilizatorului, pentru a previzualiza website-ul creat. De asemenea contine si cateva
utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gasi si modifica un
paragraf sau o linie de cod, in intregul site web, pe baza oricaror parametri specificati de
utilizator.
Adobe Dreamweaver ofera suport pentru conectarea la baze de date pentru a filtra
si afisa continutul folosind scripturi (PHP, ColdFusion), fara a avea nevoie de o prealabila
experienta in programare

Prezentarea website-ului
Adobe Dreamweaver este o aplicatie destinata paginilor web ce prezinta o bara
de meniu cu butoanele: File, Edit, View, Insert, Modify, Format, Commands, Site,
Window, Help.
Aplicatia are mai multe moduri de lucru, in functie de preferintele utilizatorului,
in aceasta imagine fiind prezentat modul Design cu suprafata de lucru pe toata marimea
campului central.
In dreapta si la subsolul paginii exista 2 campuri variabile ce confirma
flexibilitatea si confera usurinta in lucrul cu acest program.

Meniurile File si Edit sunt standard pentru majoritatea programelor. Meniul File
contine comenzi de deschidere, salvare, import si export fisiere. Meniul Edit contine
comenzile de copiere/lipire, decupare, cautare si inlocuire precum si comanda Preferinte
unde pot si configurate multe elemente din interfata Dreamweaver.

Meniul View cuprinde comenzi pentru activarea grilei si a riglei, afisarea imaginii
de trasare. Activeaza si dezactiveaza vizualizarea continutului sectiunii de antet, a
elementelor invizibile, etc.
Meniul Insert permite utilizatorului inserarea elementelor disponibile pe bara de
inserari.
Meniul Modify permite modificarea proprietatilor obiectului selectat la un
moment dat.
Meniul Format ofera acces la mai multe modalitati de finisare a aspectului
textului din pagina web.
3

Meniul Commands ofera comenzi utile cum ar fi Clean up HTML si Clean Up

Word HTML folosite pentru a evita eventuale erori de cod in rulare.

Website-ul The Beatles a fost creat in modul split view si cuprinde 5 pagini
web

home.html;

introducere.html;

componenti.html;

discografie.html;

galerie_video.html;
O pagina web este alcatuita din 5 diviziuni: antet, bara meniu, diviziunea stanga si
diviziunea de continut si o imagine de fundal .
Diviziunile au fost create folosind limbajul html <div> </div> si stilizate, asezate
in pagina cu ajutorul CSS (cascading style sheets).
Antetul contine o imagine de fundal introdusa prin CSS, o imagine simpla care
face trimitere la pagina home.html prin introducerea comenzilor HTML < img src= > si
<a> </a> pentru ancorare. Este acelasi pentru toate cele 5 pagini web din cadrul site-ului.
Bara de meniu asezata sub Antetul paginii, are culoare de fundal #DBB586
introdusa CSS, un tabel cu un sigur rand si 4 coloane introdus folosind comanda <table>
si 4 butoane : Introducere, Componenti, Discografie, Galerie Video, fiecare localizat intruna dintre celulele tabelului. Butoanele sunt documente .png realizate si stilizate prin
intermediul Adobe Photoshop, si sunt link-uri corespondente catre paginile site-ului.
Diviziunea din stanga asezata sub antet si la stanga diviziunii de meniu si a
diviziunii de continut, are inserate 4 imagini jpg. redimensionate si stilizate in
programul Paint, si introduse folosind comanda HTML <img src>
Diviziunea de continut este localizata la dreapta diviziunii din stanga, sub bara de
meniu si, fiind singura care difera de la o pagina la alta, si va fi descrisa in fiecare
situatie:

In pagina Home.html diviziunea de continut are fundalul de culoare

#FFFF99, bordurile negre, solide si rotunjite, si contine informatii
generale in legaura cu autorul prezentului website separate in 3 alte
diviziuni inserate prin comanda din meniu Insert>Layout Objects>Ap
Div. Textul este din familia Verdana, are dimensiunea de 24px si este italic

In pagina Introducere.html, fundalul are culoarea #FFFF99 bordurile sunt

negre , solide si rotunjite, informatii generale in legatura cu formatia The
Beatles cu textul din familia Verdana 24px si culoarea #303 in codul HEX
de culori.

In pagina Componenti.html, fundalul si bordurile indentice

cu

precendentele, continutul reprezentat de alte 4 diviziuni fiecare cu

imaginea .jpg a unui reprezentant al trupei, cu bordurile solide de culoarea
#CF0

Discografie.html contine un tabel inserat HTML prin comanda < table>

cu 2 coloane si 15 randuri, coloanele colorate diferit, avand in coloana din
stanga albumele trupei si in coloana din dreapta data la care au fost
lansate.

Galerie_video.html are si ea 4 diviziuni, fiecare continand un clip video

.flv ( de tip flash video ) inserat folosind meniul Insert>Media>FLV.
Clipul video are in stanga jos 4 butoane pentru redare, pauza, oprire
repectiv volum.

Imaginea de fundal a tuturor paginilor web din cadrul site-ului a fost inserata
folosind meniul Modify>Page properties>Bg color.

Utilizarea website-ului
Pentru a deschide site-ul web, este necesar ca utilizatorul sa aiba in sistemul de
operare un browser web precum Internet Explorer sau Mozilla Firefox, si sa acceseze
pagina home.html :

Din acest moment utilizatorul poate sa acceseze oricare pagina web doreste,
intrucat butoanele din bara de meniu contin link-uri catre toate celelalte pagini web din
interiorul site-ului. Dupa cum se poate observa, in pagina home.html utilizatorul este

informat despre Profesorul coordonator, insitutia de care apartine elevul, si motivul

lucrarii prezente.

Prin click stanga pe butonul introducere, se poate accesa pagina web

introducere.html.

Butonul Componenti trimite utilizatorul catre o a treia pagina componenti.html

Se pot observa cele 4 diviziuni ale continutului, cu bordurile verde aprins, si

imaginile celor 4 componenti ai trupei si descrierea lor pe scurt.
Butonul Discografie este un link catre pagina discografie.html iar Galerie Video
catre galerie_video.html.

Codul sursa
1. Pentru diviziunea Antet s-a folosit urmatoarea secventa de linii de cod:
HTML <div id="header"><a href="home.html"><img
src="images/cover_logo.jpg" alt="logocover" width="151" height="150" hspace="5"
vspace="5" align="middle" /></a></div>
CSS #header {
position:absolute;
left:150px;
top:50px;
width:1050px;
height:150px;
z-index:1;
background-image: url(images/cover_background1.jpg);
background-repeat: no-repeat;
background-position: right -30px;
border: 1px solid #A1876E;
-webkit-border-radius: 10px;

10

-moz-border-radius: 10px;
border-radius: 10px;
background-color: #E4E4E4;
2. Diviziunea bara de Meniu :
HTML <div id="menubar">
<table width="100%" height="46" border="0" align="center"
cellpadding="10">
<tr>
<td width="28%"><a href="introducere.html"><img
src="images/menu_intro.png.png" alt="intro" width="180" height="40" hspace="0"
vspace="0" align="absmiddle" /></a></td>
<td width="28%" align="center"><a href="componenti.html"><img
src="images/menu_comp.png" width="180" height="40" alt="comp" /></a></td>
<td width="30%" align="center"><a href="discografie.html"><img
src="images/menu_disco.png" width="180" height="40" alt="disco" /></a></td>
<td width="14%" align="center"><a href="galerie_video.html"><img
src="images/menu_galvid.png" width="180" height="40" alt="vgal" /></a></td>
</tr>
</table>
</div>
CSS

#menubar {
position:absolute;
left:300px;
top:200px;
width:900px;
height:50px;
z-index:3;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

11

border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-color: #DBB586;
}
3. Diviziunea din stanga
HTML <div id="leftdiv">
<table width="100%" height="606" border="0">
<tr>
<td height="47" bgcolor="#666666">&nbsp;</td>
</tr>
<tr>
<td height="133"><img src="images/leftdiv_mic.jpg" alt="leftdivmic"
width="142" height="130" border="0" /></td>
</tr>
<tr>
<td><img src="images/leftdiv_guitar2.jpeg" width="142" height="130"
alt="guitar" /></td>
</tr>
<tr>
<td><img src="images/leftdiv_bass2.jpg" width="142" height="130"
alt="bass" /></td>
</tr>
<tr>
<td height="133"><img src="images/leftdiv_drums.jpg" alt="drums"
width="142" height="130" border="0" /></td>
</tr>
</table>
</div>
CSS #leftdiv {

12

position:absolute;
left:150px;
top:200px;
width:150px;
height:600px;
z-index:2;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-color: #FDD6AD;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
4. Diviziunea de continut difera in functie de pagina web si pentru simpla
exemplificare voi afisa codul sursa doar pentru pagina introducere.html
HTML <div id="content">
<div>
<p><strong><span lang="ro"
xml:lang="ro">The</span></strong><strong><span lang="ro" xml:lang="ro">
Beatles</span></strong><span lang="ro" xml:lang="ro"> a fost unul dintre grupurile a
crui muzic a fost cea mai influent pentru era rock care a urmat. Grupul a avut ca int
generaiile de tineri rezultate de dup al Doilea Rzboi Mondial, n Anglia, SUA, etc.
Fr dubiu, &quot;The Beatles&quot; este unul din cele mai faimoase i de succes
grupuri n istoria muzicii rock, contoriznd peste 1,1 miliarde de discuri vndute n
lumea ntreag.</span></p>

13

<p><span lang="ro" xml:lang="ro">n timp ce iniial au devenit faimoi pentru

ceea ce unii au etichetat drept muzic pop, lucrrile lor de mai trziu au realizat o
combinaie de laude att din partea criticilor ct i din partea asculttorilor inegalat n
secolul XX. </span></p>
<p><span lang="ro" xml:lang="ro">n 2004 revista <em>Rolling</em><em>
Stone</em> clasa trupa The Beatles pe locul 1 pe lista celor 100 cei mai mari artiti ai
tuturor timpurilor. n conformitate cu aceeai revist, muzica inovativ a trupei The
Beatles i impactul cultural au ajutat la definirea anilor 1960.</span></p>
</div>

CSS #content {
position:absolute;
left:300px;
top:250px;
width:856px;
height:509px;
z-index:4;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-color: #FFFF99;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: Verdana, Geneva, sans-serif;

14

color: #303;
font-size: 24px;
padding: 20px;
margin: auto;
}

BIBLIOGRAFIE

15