CuprinsPrezentare site PARMEN.............................................................................................................3

1.1.Home.....................................................................................................................................6

1.2.Proces de producţie..............................................................................................................7

1.3.Beneficii................................................................................................................................8

1.4.Produse.................................................................................................................................8

1.5.Ambalarea bag-in-box.........................................................................................................8

1.6.Contact..................................................................................................................................8

2.Îmbunătăţiri................................................................................................................................9

3.Bibliografie..................................................................................................................................9

Prezentare site PARMEN

Sucul comercializat de PARMEN S.R.L este un produs 100% natural, obţinut din fructe proaspete şi sănătoase atent selecţionate, spălate, tocate, presate la rece, pasteurizate şi ambalate în "bag-in-box". Sucul 100% natural nu conţine conservanţi, arome, aditivi alimentari (E-uri) şi nici nu are zahar adăugat.

Am ales acest site deoarece sucul de mere este unul dintre cele mai sănătoase produse pe care ni le oferă natura. Beneficiile sucului de mere pentru sănătate îl recomandă drept o băutură extrem de potrivită atât pentru copii, cât şi pentru adulţi. În sucul de mere se regăsesc numeroase ingrediente care îmbunătăţesc sănătatea, precum vitamina C, care ajută organismul să lupte cu o gamă variată de factori nesănătoşi.

PARMEN SRL nu face doar suc de mere ci şi de pere. Perele sunt o sursă excelentă de fibre, antioxidanţi, vitamine A, B1, B2, C, K, magneziu, potasiu, sodiu, calcar, fier, fosfor, iod.

Pentru a realiza acest site am utilizat un template html de pe site-ul quackit.com pe care l-am modificat.

Cod template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><title>Suc natural de mere, pere</title><style type="text/css"></style><script type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}

function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}

function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}

function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script></head>

<body onload="MM_preloadImages('images/mere1.jpg')"><div id="container"> <div id=""><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/mere1.jpg',1)"><img src="images/main.jpg" name="Image1" width="877" height="364" border="0" id="Image1" /></a></div>

<div id="menu"> <ul> <li class="menuitem"><a href="index.html">Home</a></li> <li class="menuitem"><a href="proces de productie.html">Proces de productie </a></li> <li class="menuitem"><a href="beneficii.html">Beneficii</a></li> <li class="menuitem"><a href="produse.html">Produse</a></li> <li class="menuitem"><a href="ambalare bag in box.html">Ambalarea bag-in-box</a></li> <li class="menuitem"><a href="contact.html">Contact</a></li> </ul> </div>

<div id="content"> <h2> </h2> <blockquote> <h4 align="center" class="style1"> </h4> <p class="style1"> </p> </blockquote> <p> </p>

</div></div></body></html>

Rezultat:

În partea superioară a template-ului am inserat o imagine care sugerează naturaleţea fructelor din care se face sucul.

Cod:<div id="mainpic"></div>

Bara de meniuri am păstrat-o şi am făcut legăturile pentru fiecare pagină cu următoarele instrucţiuni: după fiecare comandă “a href=” ” ” am introdus numele paginii dorite.

Cod:<div id="menu"> <ul> <li class="menuitem"><a href="index.html">Home</a></li> <li class="menuitem"><a href="proces de productie.html">Proces de productie

</a></li> <li class="menuitem"><a href="beneficii.html">Beneficii</a></li> <li class="menuitem"><a href="produse.html">Produse</a></li> <li class="menuitem"><a href="ambalare bag in box.html">Ambalarea bag-in-

box</a></li> <li class="menuitem"><a href="contact.html">Contact</a></li> </ul>

</div>

Rezultat:

Template-ul astfel modificat l-am copiat în următoarele paginii modificând doar informaţiile şi inserând diverse imagini sau tabele.

1.1. Home

În partea superioară a template-ului am inserat o imagine care sugerează naturaleţea fructelor din care se face sucul. În momentul în care vizitatorul mişcă mouse-ul peste imagine această se schimbă cu alta. Această tehnică am folosit-o numai pe prima pagină.Insert→Image Objects→Rollover Image→am selectat imaginea originală→ selectare imaginea care o va înlocui.

Cod:<div id=""><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/mere1.jpg',1)"><img src="images/main.jpg" name="Image1" width="877" height="364" border="0" id="Image1" /></a></div>

În prima pagină am prezentat câteva informaţii cu privire la originea fructelor şi la procesul de fabricare. După prezentarea acestor informaţii am inserat un tabel în care am introdus o poză. Am ales această tehnică pentru a putea poziţiona centrat imaginea.

Cod:<table width="200" border="0" align="center"> <tr> <td><img src="images/suc de mere.jpg" width="320" height="180"

/></td> </tr>

</table>

Rezultat:

Imaginile inserate sunt în acelaşi folder cu index.html.

1.2. Proces de producţiePentru realizarea acestei pagini am utilizat template-ul. În această pagină am prezentat

procesul de producţie prin care trec merele/perele pentru a ajunge suc natural.Cod:<p class="style1">Odată ce merele / perele au fost culese la vârful lor de coacere, ele sunt

sortate şi spalate. Fructele proaspete sunt inspectate manual eliminând orice fruct stricat. Dupa presare, sucul se pasteurizează înainte de a-l ambala în sistem Bag-in-Box, păstrându-se astfel la fel de proaspăt ca în ziua în care a fost presat.</p>

1.3.BeneficiiÎn cadrul acestei paginii am prezentat câteva dintre beneficiile sucului de mere şi de pere

şi am inserat câte o imagine pentru fiecare fruct.

1.4.ProduseÎn această pagină am prezentat cele două produse ale firmei PARMEN, adică sucul de

mere şi de pere. Pentru ca informaţiile să fie bine structurate le- am inserat într-un tabel.

1.5. Ambalarea bag-in-box

Am prezentat avantajele ambalării bag-in-box. Structura paginii este simplă, informaţiile fiind scrise direct în cadrul template-ului, utilizând fontul Arial, size 13 şi culoarea neagră.

1.6.ContactÎn această pagină am introdus datele de contact ale firmei şi am inserat o imagine cu

adresa firmei. Pentru cei care vor să contacteze firma producătoare am creat un formular de contact.Cod:

<Form> <h5>Nume: <INPUT NAME="Nume" TYPE="TEXT"> <BR> <br> Prenume: <INPUT NAME="Prenume" TYPE="TEXT"> <BR> <br> Mesaj: <INPUT NAME="Mesaj" TYPE="TEXT"> <BR> <br> <INPUT name="Butontrimite" TYPE="BUTTON" VALUE="Trimite">

</h5>Rezultat:

2.ÎmbunătăţiriConsider că site-ul făcut de mine este mai atractiv deoarece am folosit imagini si culori

care să atragă vizitatorul, spre deosebire de site-ul creat de ei care are pe margini o imagine care te duce cu gândul la scânduri. Am decis să atrag atenţia vizitatorilor cu ajutorul pozei în care sunt prezente merele roşii, culoarea roşie fiind o culoare care atrage privirea. Verdele este culoarea pe care ochiul o acceptă cel mai uşor şi poate îmbunătăţi vederea. Verdele este cel mai des folosit pentru a simboliza natura, lucrurile naturale, ecologice.

Cu ajutorul meniului dispus orizontal informaţiile pot fi accesate rapid şi este pusă în evidenţă ambalarea bag-in-box.

Harta din pagina Contact are rolul de a ajuta vizitatorul să găsească cât mai repede fabrica.

3.Bibliografie1. Gaceu Liviu – Curs SIAB2. Laborator SIAB3. www.sucnaturaldemere.ro

Model de Prezentare Site

Documents

Transcript of Model de Prezentare Site