Sunteți pe pagina 1din 26

Colegiul Naţional de Informatică

“Grigore Moisil” Braşov

Lucrare pentru atestarea competenţelor


profesionale

Profesor indrumător : Crăciun Alexandra

Elev : Agreşeanu Vlad – Ştefan


Clasa : a XII-a C

Mai 2009
Cuprins

Motivaţia alegerii temei si utilitatea aplicaţiei

2
Motivul alegerii acestei teme a fost pasiunea pentru aviaţie ,
respectul pentru cei care şi-au dedicat viaţa si au contribuit la
dezvoltarea acestui domeniu.
Această lucrare se adreseaza tatălui meu care a fost unul din
OAMENII ce şi-au închinat viaţa Aviaţiei Române .

Aplicaţia este utilă tuturor utilizatorilor internetului pentru a se


informa asupra ISTORIEI AVIAŢIEI ROMÂNE. Aplicaţia prezintă o scurtă
istorie a celor mai renumiţi inventatori ai aviaţiei române .

Aplicaţia prezintă urmatoarele opţiuni :

- Scurt istoric :
• Traian Vuia
• Aurel Vlaicu
• Henri Coandă

- Imagini :
• Avioane
• Schiţe
• Inventatori

3
Structura aplicaţiei

Organizare :

Home

Contact
Istorie Galerie

Istorie Aurel Istorie Henri


Istorie Traian
Vlaicu Coandă
Vuia
Date biografice Date biografice
Date biografice
Viaţa de Viaţa de Traian Vuia Aurel Vlaicu Henri Coandă
Viaţa de
inventator inventator
inventator

Detalii tehnice de accesare

4
Meniului programului cuprinde patru opţiuni : “ Meniu “ , “
Galerie “ , “ Istorie “ , “ Contact “ .
Alegerea opţiunii MENIU deschide pagina principală a site-ului
şi cuprinde toate adresele către paginile site-ului .

La alegerea opţiunii GALERIE se deschide un set de adrese către


toate prezentările photo din pagină . La apăsarea unei adrese , este
deschis , cu ajutorul efectului pop-up , câte un slide-show de poze .

La alegerea opţiunii ISTORIE se deschide un submeniu cu


adrese către cei trei inventatori cuprinşi in proiect . Fiecare inventator
are o scurtă prezentare a inovaţiei ( 2 – 3 pagini ).

La alegerea opţiunii CONTACT este deshisă o pagină prin


intermediul căreia se pot lăsa opinii despre acest site si poate fi
contactată persoana administratoare care se ocupă de proiect .

5
Acest proiect are o interfaţa uşor de utilizat , cu un aspect
plăcut , culorile folosite in nuanţe calde , care nu agasează
utilizatorul . Site-ul cuprinde adrese uşor de gasit , adrese care fac
legătura între toate informaţiile oferite .

Codul sursă

1. Meniu :

<head>
<title>Istoria Aviatiei - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Atestat.psd) -->
<style type="text/css">
<!--
body {

// AŞEZAREA IN PAGINĂ A DIV-urilor

background-color:#000000;
}
#Table_01 {
position:absolute;
left:252px;
top:0px;
width:800px;
height:800px;
}

6
#home-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:134px;
}

#home-02_ {
position:absolute;
left:0px;
top:134px;
width:706px;
height:666px;
}

#home-03_ {
position:absolute;
left:706px;
top:134px;
width:70px;
height:64px;
}

#home-04_ {
position:absolute;
left:776px;
top:134px;
width:24px;
height:666px;
}

#home-05_ {
position:absolute;
left:706px;
top:198px;
width:70px;
height:44px;
}

#home-06_ {
position:absolute;
left:706px;
top:242px;
width:70px;
height:74px;
}

#home-07_ {

7
position:absolute;
left:706px;
top:316px;
width:70px;
height:43px;
}

#home-08_ {
position:absolute;
left:706px;
top:359px;
width:70px;
height:69px;
}

#home-09_ {
position:absolute;
left:706px;
top:428px;
width:70px;
height:56px;
}

#home-10_ {
position:absolute;
left:706px;
top:484px;
width:70px;
height:74px;
}

#home-11_ {
position:absolute;
left:706px;
top:558px;
width:70px;
height:242px;
}
body {
background-color: #000000;
margin-left: 250px;
margin-right: 250px;
background-image: url(file:///D|/ATESTAT/atestat/back.jpeg);
}
.style2 {color: #000000}
#apDiv1 {
position:absolute;
left:682px;
top:165px;

8
width:251px;
height:150px;
z-index:1;
}
.style3 {font-size: 9px}
.style4 {
font-size: 10px;
font-family: "Century Gothic";
color: #34342C;
}
#apDiv2 {
position:absolute;
left:683px;
top:307px;
width:265px;
height:97px;
z-index:2;
}
.style5 {
font-size: 10px;
font-family: "Century Gothic";
color: #3F3B2F;
}
#apDiv3 {
position:absolute;
left:685px;
top:353px;
width:262px;
height:52px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:671px;
top:459px;
width:264px;
height:227px;
z-index:4;
}
.style9 {font-family: "Century Gothic"}

-->
</style>
<!-- End ImageReady Styles -->
</head>

// Alegerea culorii de background ,a fontului si introducerea textului in


cuprinsul layout-ului

9
<body style="background-color:#FFFFFF;">
<div class="style3" id="apDiv1">
<p class="style4">&nbsp;&nbsp;Dorinta omului de a zbura cred ca s-a manifestat
odata cu propria sa aparitie dar nu s-a fructificat decat dupa mii de ani. Izvoarele
documentare scrise si orale cuprind multe date si imagini referitoare la incercarile si
posibilitatile omului de a imita zborul pasarilor si, mai mult chiar,de a strabate distanta de
la pamint pina la cel mai familiar astru, atit de intilnit in poezii si basme, luna.</p>
</div>
<div class="style5" id="apDiv2">
<p>&ldquo;Putine natii din lume se pot mandri ca au contribuit<br />
la progresul aviatiei , cat a reusit natia romana&hellip;&rdquo;<br />
Henri Coanda</p>
</div>
<div id="apDiv3">
<p class="style4">&nbsp;"Ma duc mama departe,la Paris,dar lasa mama<br />
sa nu-ti para rau ca am sa viu de acolo in zbor<br />
sau n-am sa mai vin niciodata acasa...&rdquo;<br />
<br />
</p>
</div>
<div class="style4" id="apDiv4">
<p><br />
Gheorghiu, Constantin C. -Aurel Vlaicu,un precursor al aviatiei romanesti - Gheorghiu,
Constantin <br />
C.;Zaganescu, Florin --Din istoria industriei romanesti Aviatia Salca, Horia -Contributii
romanesti in aviatieDeliu, Gheorghe &ndash;Mecanica aeronavelor <br />
-Colectia de reviste &ldquo;Aeromagazin&rdquo;</p>
</div>
<span class="style2">
<!-- ImageReady Slices (Atestat.psd) -->
</span>
<div class="style2" id="Table_01">
<div id="home-01_">
<img id="home_01" src="images/home_01.jpg" width="800" height="134"
alt="" /> </div>
<div id="home-02_">
<img id="home_02" src="images/home_02.jpg" width="706" height="666"
alt="" /> </div>
<div id="home-03_">
<img id="home_03" src="images/home_03.jpg" width="70" height="64"
alt="" /> </div>
<div id="home-04_">
<img id="home_04" src="images/home_04.jpg" width="24" height="666"
alt="" /> </div>
<div id="home-05_">
<img id="home_05" src="images/home_05.jpg" width="70" height="44"
alt="" /> </div>
<div id="home-06_">

10
<img id="home_06" src="images/home_06.jpg" width="70" height="74"
alt="" /> </div>
<div id="home-07_">
<img id="home_07" src="images/home_07.jpg" width="70" height="43"
alt="" /> </div>
<div id="home-08_">
<img id="home_08" src="images/home_08.jpg" width="70" height="69"
alt="" /> </div>
<div id="home-09_">
<img id="home_09" src="images/home_09.jpg" width="70" height="56"
alt="" /> </div>
<div id="home-10_">
<img id="home_10" src="images/home_10.jpg" width="70" height="74"
alt="" /> </div>
<div id="home-11_">
<img id="home_11" src="images/home_11.jpg" width="70" height="242"
alt="" /> </div>
</div>
<span class="style2">
<!-- End ImageReady Slices -->
</span>
</body>
</html>

2. Galerie :

<head>
<title>Galerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Atestat.psd) -->
<style type="text/css">
<!—

// AŞEZAREA IN PAGINĂ A DIV-urilor

body {
background-image:url(back.jpeg);
margin-left: 250px;
margin-right: 250px;
}

#Table_01 {
position:absolute;
left:251px;
top:1px;

11
width:800px;
height:800px;
}

#Atestat-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:133px;
}

#Atestat-02_ {
position:absolute;
left:0px;
top:133px;
width:705px;
height:667px;
}

#Atestat-03_ {
position:absolute;
left:705px;
top:133px;
width:67px;
height:63px;
}

#Atestat-04_ {
position:absolute;
left:772px;
top:133px;
width:28px;
height:667px;
}

#Atestat-05_ {
position:absolute;
left:705px;
top:196px;
width:67px;
height:46px;
}

#Atestat-06_ {
position:absolute;
left:705px;
top:242px;
width:67px;

12
height:61px;
}

#Atestat-07_ {
position:absolute;
left:705px;
top:303px;
width:67px;
height:53px;
}

#Atestat-08_ {
position:absolute;
left:705px;
top:356px;
width:67px;
height:72px;
}

#Atestat-09_ {
position:absolute;
left:705px;
top:428px;
width:67px;
height:41px;
}

#Atestat-10_ {
position:absolute;
left:705px;
top:469px;
width:67px;
height:77px;
}

#Atestat-11_ {
position:absolute;
left:705px;
top:546px;
width:67px;
height:254px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>

13
// Alegerea culorii de background ,a fontului şi introducerea textului in
cuprinsul layout-ului

<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Atestat.psd) -->
<div id="Table_01">
<div id="Atestat-01_">
<img id="Atestat_01" src="images/Atestat_01.jpg" width="800"
height="133" alt="" />
</div>
<div id="Atestat-02_">
<img id="Atestat_02" src="images/Atestat_02.jpg" width="705"
height="667" alt="" />
</div>
<div id="Atestat-03_">
<img id="Atestat_03" src="images/Atestat_03.jpg" width="67" height="63"
alt="" />
</div>
<div id="Atestat-04_">
<img id="Atestat_04" src="images/Atestat_04.jpg" width="28"
height="667" alt="" />
</div>
<div id="Atestat-05_">
<img id="Atestat_05" src="images/Atestat_05.jpg" width="67" height="46"
alt="" />
</div>
<div id="Atestat-06_">
<img id="Atestat_06" src="images/Atestat_06.jpg" width="67" height="61"
alt="" />
</div>
<div id="Atestat-07_">
<img id="Atestat_07" src="images/Atestat_07.jpg" width="67" height="53"
alt="" />
</div>
<div id="Atestat-08_">
<img id="Atestat_08" src="images/Atestat_08.jpg" width="67" height="72"
alt="" />
</div>
<div id="Atestat-09_">
<img id="Atestat_09" src="images/Atestat_09.jpg" width="67" height="41"
alt="" />
</div>
<div id="Atestat-10_">
<img id="Atestat_10" src="images/Atestat_10.jpg" width="67" height="77"
alt="" />
</div>
<div id="Atestat-11_">
<img id="Atestat_11" src="images/Atestat_11.jpg" width="67"
height="254" alt="" />

14
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

3. Istorie :

<head>
<title>Atestat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Atestat.psd) -->
<style type="text/css">
<!--

// AŞEZAREA IN PAGINĂ A DIV-urilor

#Table_01 {
position:absolute;
left:224px;
top:0px;
width:800px;
height:800px;
}

#istorie-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:134px;
}

#istorie-02_ {
position:absolute;
left:0px;
top:134px;
width:705px;
height:70px;
}

#istorie-03_ {
position:absolute;
left:705px;
top:134px;
width:70px;

15
height:60px;
}

#istorie-04_ {
position:absolute;
left:775px;
top:134px;
width:25px;
height:666px;
}

#istorie-05_ {
position:absolute;
left:705px;
top:194px;
width:70px;
height:51px;
}

#istorie-06_ {
position:absolute;
left:0px;
top:204px;
width:486px;
height:596px;
}

#istorie-07_ {
position:absolute;
left:486px;
top:204px;
width:148px;
height:38px;
}

#istorie-08_ {
position:absolute;
left:634px;
top:204px;
width:71px;
height:596px;
}

#istorie-09_ {
position:absolute;
left:486px;
top:242px;
width:148px;
height:35px;

16
}

#istorie-10_ {
position:absolute;
left:705px;
top:245px;
width:70px;
height:58px;
}

#istorie-11_ {
position:absolute;
left:486px;
top:277px;
width:148px;
height:29px;
}

#istorie-12_ {
position:absolute;
left:705px;
top:303px;
width:70px;
height:75px;
}

#istorie-13_ {
position:absolute;
left:486px;
top:306px;
width:148px;
height:494px;
}

#istorie-14_ {
position:absolute;
left:705px;
top:378px;
width:70px;
height:40px;
}

#istorie-15_ {
position:absolute;
left:705px;
top:418px;
width:70px;
height:56px;
}

17
#istorie-16_ {
position:absolute;
left:705px;
top:474px;
width:70px;
height:69px;
}

#istorie-17_ {
position:absolute;
left:705px;
top:543px;
width:70px;
height:257px;
}
body {
background-image: url(../back.jpeg);
}

-->
</style>
<!-- End ImageReady Styles -->
</head>

// Alegerea culorii de background ,a fontului şi introducerea textului in


cuprinsul layout-ului

<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Atestat.psd) -->
<div id="Table_01">
<div id="istorie-01_">
<img id="istorie_01" src="images/istorie_01.jpg" width="800"
height="134" alt="" />
</div>
<div id="istorie-02_">
<img id="istorie_02" src="images/istorie_02.jpg" width="705"
height="70" alt="" />
</div>
<div id="istorie-03_">
<a href="../Home/home.html"><img src="images/istorie_03.jpg"
alt="" name="istorie_03" width="70" height="60" border="0" id="istorie_03"
/></a> </div>
<div id="istorie-04_">
<img id="istorie_04" src="images/istorie_04.jpg" width="25"
height="666" alt="" />
</div>
<div id="istorie-05_">

18
<img id="istorie_05" src="images/istorie_05.jpg" width="70"
height="51" alt="" />
</div>
<div id="istorie-06_">
<img id="istorie_06" src="images/istorie_06.jpg" width="486"
height="596" alt="" />
</div>
<div id="istorie-07_">
<a href="traianvuia1.html"><img src="images/istorie_07.jpg" alt=""
name="istorie_07" width="148" height="38" border="0" id="istorie_07" /></a>
</div>
<div id="istorie-08_">
<img id="istorie_08" src="images/istorie_08.jpg" width="71"
height="596" alt="" />
</div>
<div id="istorie-09_">
<a href="Aurelvlaicu1.html"><img src="images/istorie_09.jpg"
alt="" name="istorie_09" width="148" height="35" border="0" id="istorie_09"
/></a> </div>
<div id="istorie-10_">
<a href="../Galerie/Atestat.html"><img src="images/istorie_10.jpg"
alt="" name="istorie_10" width="70" height="58" border="0" id="istorie_10"
/></a> </div>
<div id="istorie-11_">
<a href="Henricoanda1.html"><img src="images/istorie_11.jpg"
alt="" name="istorie_11" width="148" height="29" border="0" id="istorie_11"
/></a> </div>
<div id="istorie-12_">
<img id="istorie_12" src="images/istorie_12.jpg" width="70"
height="75" alt="" />
</div>
<div id="istorie-13_">
<img id="istorie_13" src="images/istorie_13.jpg" width="148"
height="494" alt="" />
</div>
<div id="istorie-14_">
<a href="istorie.html"><img src="images/istorie_14.jpg" alt=""
name="istorie_14" width="70" height="40" border="0" id="istorie_14" /></a>
</div>
<div id="istorie-15_">
<img id="istorie_15" src="images/istorie_15.jpg" width="70"
height="56" alt="" />
</div>
<div id="istorie-16_">
<img id="istorie_16" src="images/istorie_16.jpg" width="70"
height="69" alt="" />
</div>
<div id="istorie-17_">

19
<img id="istorie_17" src="images/istorie_17.jpg" width="70"
height="257" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

4. Contact:

<head>
<title>Atestat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Atestat.psd) -->
<style type="text/css">
<!—

// AŞEZAREA IN PAGINĂ A DIV-urilor

#Table_01 {
position:absolute;
left:225px;
top:0px;
width:800px;
height:800px;
}

#contct-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:134px;
}

#contct-02_ {
position:absolute;
left:0px;
top:134px;
width:705px;
height:417px;
}

#contct-03_ {
position:absolute;
left:705px;
top:134px;
width:70px;

20
height:60px;
}

#contct-04_ {
position:absolute;
left:775px;
top:134px;
width:25px;
height:666px;
}

#contct-05_ {
position:absolute;
left:705px;
top:194px;
width:70px;
height:51px;
}

#contct-06_ {
position:absolute;
left:705px;
top:245px;
width:70px;
height:58px;
}

#contct-07_ {
position:absolute;
left:705px;
top:303px;
width:70px;
height:75px;
}

#contct-08_ {
position:absolute;
left:705px;
top:378px;
width:70px;
height:40px;
}

#contct-09_ {
position:absolute;
left:705px;
top:418px;
width:70px;
height:56px;

21
}

#contct-10_ {
position:absolute;
left:705px;
top:474px;
width:70px;
height:69px;
}

#contct-11_ {
position:absolute;
left:705px;
top:543px;
width:70px;
height:257px;
}

#contct-12_ {
position:absolute;
left:0px;
top:551px;
width:175px;
height:249px;
}

#contct-13_ {
position:absolute;
left:175px;
top:551px;
width:110px;
height:12px;
}

#contct-14_ {
position:absolute;
left:285px;
top:551px;
width:420px;
height:249px;
}

#contct-15_ {
position:absolute;
left:175px;
top:563px;
width:110px;
height:237px;
}

22
body {
background-image: url(../back.jpeg);
}
#apDiv1 {
position:absolute;
left:655px;
top:149px;
width:249px;
height:328px;
z-index:1;
}
.style1 {
font-family: "Century Gothic";
font-weight: bold;
}
.style2 {color: #43432a}
.style3 {color: #43432a; font-style: italic; }

-->
</style>
<!-- End ImageReady Styles -->

// Alegerea culorii de background ,a fontului şi introducerea textului in


cuprinsul layout-ului

</head>

<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (Atestat.psd) -->
<div id="Table_01">
<div id="contct-01_"><img id="contct_01" src="images/contct_01.jpg"
width="800" height="134" alt=""

/></div>
<div id="contct-02_">
<img id="contct_02" src="images/contct_02.jpg" width="705"
height="417" alt="" /> </div>
<div id="contct-03_">
<a href="../Home/home.html"><img src="images/contct_03.jpg"
alt="" name="contct_03" width="70"

height="60" border="0" id="contct_03" /></a> </div>


<div id="contct-04_">
<img id="contct_04" src="images/contct_04.jpg" width="25"
height="666" alt="" /> </div>
<div id="contct-05_">

23
<img id="contct_05" src="images/contct_05.jpg" width="70"
height="51" alt="" /> </div>
<div id="contct-06_">
<a href="../Galerie/Atestat.html"><img src="images/contct_06.jpg"
alt="" name="contct_06"

width="70" height="58" border="0" id="contct_06" /></a> </div>


<div id="contct-07_">
<img id="contct_07" src="images/contct_07.jpg" width="70"
height="75" alt="" /> </div>
<div id="contct-08_">
<a href="../Istorie/istorie.html"><img src="images/contct_08.jpg"
alt="" name="contct_08"

width="70" height="40" border="0" id="contct_08" /></a> </div>


<div id="contct-09_">
<img id="contct_09" src="images/contct_09.jpg" width="70"
height="56" alt="" /> </div>
<div id="contct-10_">
<a href="contct.html"><img src="images/contct_10.jpg" alt=""
name="contct_10" width="70"

height="69" border="0" id="contct_10" /></a> </div>


<div id="contct-11_">
<img id="contct_11" src="images/contct_11.jpg" width="70"
height="257" alt="" /> </div>
<div id="contct-12_">
<img id="contct_12" src="images/contct_12.jpg" width="175"
height="249" alt="" /> </div>
<div id="contct-13_">
<img id="contct_13" src="images/contct_13.jpg" width="110"
height="12" alt="" /> </div>
<div id="contct-14_">
<img id="contct_14" src="images/contct_14.jpg" width="420"
height="249" alt="" /> </div>
<div id="contct-15_">
<img id="contct_15" src="images/contct_15.jpg" width="110"
height="237" alt="" /> </div>
</div>

<!-- End ImageReady Slices -->


<div class="style1" id="apDiv1"><form method="post"
action="mailto:youremail@email.com">
<p>Nume: </p>
<p>
<input type="text" size="20" maxlength="40" name="name">
</p>
<p>Pareri :</p>
<p>

24
<textarea rows="5" cols="20" wrap="physical"
name="comments"></textarea>
</p>
<p>
<input name="Reset" type="reset" value="Reset" />
<br />

<input name="Submit" type="submit" value="Trimite">


</p>
</form></div>
</p>
</div>
</body>
</html>

Resurse Hard şi Soft necesare

Rularea acestui program implică puţine resurse hard si soft


.Calculatorul şi componentele sal reprezintă resursa hard principală .
Resursa soft utilizată este explorerul GOOGLE CHROME.

Probleme de browser

Pe masura ce vom aprofunda folosirea CSS-ului, veti descoperi ca


nu toate browserele interpreteaza la fel stilurile. CSS-ul va fi
interpretat diferit de browsere, ceea ce va va cauza dureri de cap.
Exista totusi metode de rezolvare a acestor metode pe care le vom
explica la momentul potrivit.

25
Bibliografie

-Gheorghiu, Constantin C.
-Aurel Vlaicu,un precursor al aviatiei romanesti - -Gheorghiu,
Constantin
-C.Zaganescu, Florin -- Din istoria industriei romanesti Aviatia
Salca
-Contributii romanesti in aviatie Deliu, Gheorghe –Mecanica
aeronavelor
-Colectia de reviste “Aeromagazin”

26