Vous êtes sur la page 1sur 33

Colegiul Naional de Informatic

Piatra Neam

PROIECT PENTRU ATESTAREA COMPETENELOR


PROFESIONALE N INFORMATIC

site web

Coordonatori,

Candidat,

Nour Georgeta

Ciofu

Daniel
Podbereschi Maria
mai 2015

Gabriel

CUPRINS:

I.

Argument alegerea temei

...............3
Mediul de programare ...............4
I.1. Limbajul HTML (Hyper Text Mark-up Language) ..4
I.2. Limbajul CSS (Cascading Style Sheets) ..........7
I.3. Browsere WEB ...............10
I.4. Adobe Photoshop CS6 ............12
I.5. Adobe Dreamweaver CS6 .............15
III. Prezentarea site-ului WEB ............16
IV. Resurse de hard i soft necesare .........51
V. Concluzii
II.

..................52
VI. Bibliografie .................53

I. Argument alegerea temei


Londra se numara printre orasele cu adevarat mari ale lumii si poate fi
incadrat in aceeasi categorie cu New York, Tokyo, Paris si Sydney. Acesta este unul
dintre acele locuri care pur si simplu trebuie sa fie vizitate in timpul unei vieti! Am
ales aceasta teme pentru atestat deoarece, pe langa oportunitatea de a admira
unele dintre cele mai spectaculoase obiective turistice ale lumii sau de a te bucura
de restaurantele exclusiviste de rang Michelin, Londra pune la dispozitie o
varietate impresionanta de activitati cu care iti pot ocupa timpul liber.

II. Mediul de programare

II.1. Limbajul HTML (Hyper Text Mark-up Language)


HTML este o form de marcare orientat ctre prezentarea documentelor text
pe o singur pagin, utiliznd un software de redare specializat, numit agent
utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web.
HTML furnizeaz mijloacele prin care coninutul unui document poate fi adnotat cu
diverse tipuri de metadate i indicaii de redare. Indicaiile de redare pot varia de la
decoraiuni minore ale textului, cum ar fi specificarea faptului c un anumit cuvnt
trebuie subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate,
hri de imagini i formulare. Metadatele pot include informaii despre titlul i autorul
documentului, informaii structurale despre cum este mprit documentul n diferite
segmente, paragrafe, liste, titluri etc. i informaii cruciale care permit ca
documentul s poat fi legat de alte documente pentru a forma astfel hiperlink-uri
(sau web-ul).
HTML este un format text proiectat pentru a putea fi citit i editat de oameni
utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel
solicit cunotine solide de HTML i este consumatoare de timp. Editoarele grafice
(de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage permit ca paginile web sa fie tratate asemntor cu documentele Word,
dar cu observaia c aceste programe genereaz un cod HTML care este de multe
ori de proast calitate.

HTML se poate genera direct utiliznd tehnologii de codare din partea


serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a
coninutului, wiki-uri i forumuri web genereaz pagini HTML.
HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail
folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de
prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect
controversat i multe liste de mail le blocheaz intenionat.

Sintaxa limbajului HTML


HTML este prescurtarea de la Hyper Text Mark-up Language i este codul care
sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri i au
extensia .html sau .htm. n marea lor majoritate aceste etichete sunt pereche, una
de deschidere <etichet> i alta de nchidere </etichet>, mai exist i cazuri n
care nu se nchid, atunci se folosete <etichet /> browserul interpreteaz aceste
etichete afind rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu
face deosebirea ntre litere mici i mari). Pagina principal a unui domeniu este
fiierul index.html respectiv index.htm. Aceast pagin este setat a fi afiat
automat

la

vizitarea

unui

domeniu.

De

exemplu

la

vizitarea

domeniului

www.nume.ro este afiat pagina www.nume.ro/index.html.


Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<etichet atribut="valoare"> ... </etichet>
Componena unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset>
Toate paginile HTML ncep i se termin cu etichetele <html> i </html>. n
interiorul acestor etichete gsim perechile <head>, </head> i <body>, </body>.

Eticheta head conine titlul paginii ntre etichetele <title> i </title>,


descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi i linkuri ctre
fiiere externe (de exemplu scripturi, fiiere de tip CSS).
Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre
autor, informaii utile motoarelor de cutare i au urmtorul format: <META
NAME="nume" CONTENT="coninut">
Exemplu:

link

ctre

un

fiier

extern

CSS:

<link

rel="stylesheet"

type="text/css" href="css.css">
Eticheta body gzduiete practic toate etichetele afiate de browser pe
ecran.
Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut pagin
<html>
<head>
<title>Titlu</title>
</head>
<body>
<p>Continut pagina</p>
</body>
</html>

Eticheta <p> reprezint un paragraf, iar codul de mai sus va avea urmtorul
rezultat:

DTD (Document Type Definition) specific un set de reguli pentru limbajul


markup, astfel nct browserele s afieze n mod corect coninutul paginilor web.
Cele mai utilizate versiuni de HTML sunt:
6

HTML 4.01 Strict


<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
Aceast versiune conine toate elementele i atributele HTML, dar nu include
elementele cu rol de prezentare sau cele nvechite (de exemplu, font). Frameseturile nu sunt permise.
HTML 4.01 Transitional
<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
Aceast versiune conine toate elementele i atributele HTML, inclusiv
elementele cu rol de prezentare sau cele nvechite (de exemplu, font). Frameseturile nu sunt permise.
HTML 4.01 Frameset
<!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
Aceast versiune este echivalentul versiunii HTML 4.01 Transitional, dar
permite utilizarea frameset-urilor.
HTML 5
<!DOCTYPE HTML>
Spre deosebire de HTML 4.01, HTML5 nu este bazat pe SGML (Standard
Generalized Markup Language) i de aceea nu necesit o referin ctre un DTD.
i n HTML poate fi introdus un comentariu, care bineneles nu va fi afiat de
browser.

II.2. Limbajul CSS (Cascading Style Sheets)


Crearea paginilor HTML este un lucru relativ simplu, nvarea etichetelor
HTML i crearea unor imagini ducnd la realizarea de pagini web de o complexitate
medie. Odat cu dezvoltarea internetului, site-urile au devenit din ce n ce mai
7

complexe, cu un numr mai mare de pagini, cerinele privind grafica i elementele


din pagin au devenit mai pretenioase i astfel proiectarea paginilor web a devenit
o sarcin ceva mai dificil.
O problem important cnd avem un site cu multe pagini este atunci cnd
dorim s facem anumite schimbri n elementele paginii: fondul, grafica sau fontul
textelor

din

pagini.

Prin utilizarea CSS (Cascading Style Sheets), n traducere "foi de stil n cascad",
acest lucru nu mai este o problem, realizndu-se relativ uor, prin schimbarea sau
adugarea unor elemente n codul CSS, nefiind nevoii s lucrm la fiecare pagin
sau la fiecare element din pagin.
CSS este un standard pentru formatarea elementelor unui document HTML.
Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere externe sau n
cadrul documentului, prin elementul <style> i/sau atributul style. CSS se poate
utiliza i pentru formatarea elementelor XHTML, XML i SVGL.
CSS se ocupa n general cu aspectul i controlul grafic al elementelor din
pagin, cum ar fi: textul, imaginile, fondul, culorile i aezarea acestora n cadrul
ferestrei paginii. CSS folosete stiluri, acestea nglobeaz, sub un anumit nume,
atribute de formatare care se aplic asupra unui element individual din pagin,
asupra unui grup de elemente sau la nivelul ntregului document.
CSS funcioneaz cu HTML, ns nu este HTML. El extinde funcionalitile
HTML, permind redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element
individual din interiorul sau, poate fi controlat mult mai uor. Stilurile pot fi aplicate
asupra unui element, a unui document sau chiar asupra unui ntreg site web.
Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca
documentele HTML sunt afiate ca si cum CSS n-ar exista, dar cele mai cunoscute
si utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera, si altele,
sunt compatibile CSS.
Versiuni de CSS:
CSS 1

Prima specificaie CSS a fost publicat de ctre W3C n anul 1996 i printre
altele oferea suport pentru:
-

proprieti ale font-ului, precum typeface i emphasis;


culoarea textului, a fundalurilor i a altor elemente;
atribute ale textului precum spaierea dintre cuvinte, litere i linii de text;
alinierea textului, a imaginilor, a tabelelor i a altor elemente;
marginea, bordura, spaierea i poziionarea pentru majoritatea

elementelor;
identificarea unic i clasificri generice a unor grupuri de atribute.

n prezent, W3C nu mai susine folosirea nivelului 1 de CSS.


CSS 2
Nivelul 2 de CSS a fost publicat ca o recomandare n anul 1998 i a fost
practic un super set ce coninea specificaiile CSS1 i un alt set de noi atribute,
precum: poziionarea elementelor n raport cu pagina (absolute, relative, fixed), zindex, conceptul de tip media (media types), suport pentru text bidirecional i noi
proprieti ale fontului, precum shadow.
n prezent, W3C nu mai susine folosirea nivelului 2 de CSS.
CSS 2.1
Nivelul 2.1 a aprut ca recomandare oficial n anul 2011, dup mai multe
modificri i reprezint o variant mbuntit a nivelului 2, n concordan cu
cerinele noilor browsere.
n prezent CSS 2.1 este cel mai utilizat nivel de CSS.

CSS 3
Spre deosebire de CSS 2, care reprezint un singur set de specificaii, CSS3
este mprit n mai multe documente, numite module. Fiecare modul aduce noi
capabiliti sau le mbuntete pe cele existente n CSS 2.
n anul 2012 erau deja 50 de module publicate i cele mai importante dintre
ele sunt:
-

Selectori (Selectors);
9

Model caset (Box Model);


Fundaluri i borduri (Backgrounds and Borders);
Efecte de text (Text Effects);
Transformri 2D/3D (2D/3D Transformations);
Animaii (Animations);
Aspect de coloane multiple (Multiple Column Layout);
Interfaa utilizator (User Interface);

Suportul n rndul browserelor este din ce n ce mai rspndit, ultimele


versiuni incluznd deja proprietile CSS3.
Sintaxa limbajului CSS
Un set de reguli CSS conine un selector i un bloc de declaraie.

Selectorul

pointez

ctre elementul HTML pe care vrem s-l stilizm.


Blocul de declaraie conine una sau mai multe declaraii separate prin ;.
Fiecare declaraie conine o proprietate i o valoare, separate prin :.
Exemplu:
O declaraie se termin ntotdeauna cu ;, iar grupurile de declaraie ncep i
se termin cu {}.
p {color:red;text-align:center;}

Regula de mai sus atribuie tuturor elementelor p culoarea roie i o aliniere


a textului n centru.

II.3. Browsere WEB


Un browser este o aplicaie software care permite utilizatorilor s afieze
texte, grafic, video, muzic i alte informaii localizate pe o pagin din World Wide

10

Web, dar i s comunice cu ofertantul de informaii sau cu ali utilizatori. Browserul


este, prin urmare, un program de navigare n web.
n componena unui browser intr un set de programe care permit afiarea i
manevrarea informaiilor bazate pe text, imagini i sunet, precum i rularea unor
programe pe care site-urile web i documentele pot s le includ sau apeleze
(applet-uri, scripturi). Fiecare browser are o caset de text n care utilizatorul poate
s scrie adresa documentului sau a site-ului dorit, adres care este unic (Uniform
Resource Locator sau URL). Dac utilizatorul nu cunoate adresa exact, el poate
introduce drept "cheie de cutare" o parte de text pe care documentul ar trebui s l
conin.

Browserul

transmite

acest

text

unor

aplicaii

speciale

din

web,

numite motoare de cutare. Acestea caut n multitudinea de documente sau


site-uri respectivul text, oferind apoi ca rezultat o list de adrese care conin textul
cutat. Utilizatorului nu i mai rmne dect s aleag - eventual prin mai multe
ncercri - locaia dorit. n realitate aceast list de adrese poate fi uneori extrem
de lung, de ordinul sutelor de mii de linii, caz n care este nevoie de o strategie de
cutare mai exact.
Funcii accesate cu ajutorul unui browser:
-

navigarea printre documentele html din www sau din alte servicii, ori de

pe propriul calculator; vizualizarea acestora.


Urmrirea conexiunilor dintre documentele html.
Copierea informaiilor n calculatorul propriu.
Utilizarea unor proceduri de cutare a informaiei.
Gsirea rapid a informaiilor cu ajutorul semnelor de carte i a

istoricului.
Accesarea altor servicii de informare i servicii Internet: pot electronic,
serviciul de tiri, serviciul ftp (transferul de fiiere), etc.

Elemente specifice unui browser:


-

Descrcare (Download) reprezint copierea unui fiier n calculatorul

utilizatorului.
Directorul cache n care browserul pstreaz informaia primit din web.
Dac utilizatorul parcurge paginile vizitate n sesiunea curent, el
acceseaz informaia salvat n directorul cache la prima trecere prin

aceste pagini.
Remprosptarea paginii web: pagina va fi ncrcat din nou din reea,
chiar dac exist deja n directorul cache.
11

Imaginile in-line sunt acele imagini incluse ntr-o pagin web, care nu

pot fi modificate, redimensionate sau deplasate, dar pot fi vizualizate.


Istoricul (History) reprezint lista paginilor accesate ntr-o sesiune (cea
actual sau, n cazul unora dintre browsere, mai multe sesiuni anterioare).
O adres accesat anterior poate fi apelat prin reluarea ei din aceast

list.
Semnul de carte sau pagina favorit: utilizatorul poate asocia
unei anumite pagini o denumire preferat, cu ajutorul creia poate ncrca

acea pagin, n locul URL al paginii respective.


Aplicaie ajuttoare reprezint un soft prin intermediul cruia

utilizatorul poate afia anumite formate de fiiere (ex. fiiere audio).


Plug-in soft ce mrete funcionalitatea browserului (ex. afiarea 3-D).

Din 1991 pn acum au aprut peste 500 de browsere web, poate acest
numr pare cam mare ns trebuie s inem cont c doar n jur de 10% dintre ele au
fost promovate n decursul anilor i sunt ceva mai cunoscute. Evoluia World Wide
Web-ului a fcut ca de la 4 milioane de utilizatori n 1991, pentru browserul Nexus,
s se ajung la peste 2.405 milioane de utilizatori n 2013. Utilizatori mprii ntre
browserele Chrome, Firefox, Internet Explorer, Opera, Safari, etc.
Google Chrome este unul dintre cele mai bune browsere web disponibile n
momentul de fa, necesit configurare minim i promite pstrarea datelor n
siguran. Google Chrome a devenit unul dintre cele mai descrcate browsere de pe
web chiar dac a fost lansat abia n septembrie 2008. n ultimul an acest browser a
fost lansat i pentru sistemele de operare ale dispozitivelor mobile.
Mozilla Firefox este unul dintre cele mai populare browsere web din lume.
Acesta a fost lansat n noiembrie 2004. n 2013 a avut loc i lansarea sistemului de
operare Firefox OS care a atras i mai muli utilizatori datorit funcionalitilor
share-uite ntre browser i sistemul de operare.
Internet Explorer este, nc, unul dintre cele mai utilizate browsere pe scar
larg. Dei este unul dintre cele mai vechi browsere web, fiind lansat n 1995,
acesta a avansat din punct de vedere al tehnologiei destul de greu, adoptnd CSS3
i HTML5 ntr-un mod eficient doar de la versiunea 9. Popularitatea sa este datorat
n special sistemului de operare Microsoft Windows, n care este inclus.

12

Opera este unul dintre cele mai vechi browsere web din lume, cu peste 270
milioane de utilizatori. Opera a fost lansat n 1994 i s-a bazat pe propriul motor de
randare pn anul trecut. Odat cu versiunea 15 i trecerea de la motorul de layout
Presto la motorul WebKit, putem s ne ateptm doar la performane mai bune i o
cretere semnificativ a utilizatorilor.
Safari este un browser dezvoltat de Apple Inc. i a fost lansat n 2003, iniial
doar pentru sistemul de operare iOS. Acest browser a atras un numr mare de
utilizatori datorit fiabilitii oferite pentru sistemele de operare iOS, fie ca este
vorba de Mac-uri, iPhone-uri sau iPad-uri.
La sfritul anului 2008 ponderea browserelor, n funcie de numrul de
utilizatori, era urmtoarea:
IE - 46.0 %; Firefox - 44.4 %; Chrome - 3.6 %; Safari - 2.7 %; Opera - 2.4 %.
Situaia s-a schimbat dramatic n ultimii ani, alungndu-se la nceputului lui
2014 ca ponderea s fie urmtoarea:
Chrome 56.4 %; Firefox - 26.4 %; IE - 9.8 %; Safari - 4.0 %; Opera - 1.9 %.

II.4. Adobe Photoshop CS6


Pentru realizarea machetei (a mock-up-ului) am utilizat programul de editare
grafic i foto, Photoshop.
Adobe Photoshop este vrful de lance al gamei de produse software pentru
editare de imagini digitale, fotografii, grafic pentru tipar, video i Web de pe pia.
Photoshop este un program cu o interfa intuitiv i care permite o multitudine
extraordinar de modificri necesare n mod curent profesionitilor i nu numai:
editri de luminozitate i contrast, culoare, focalizare, aplicare de efecte pe imagine
sau pe zone (selecii), retuare de imagini degradate, numr arbitrar de canale de
culoare, suport de canale de culoare pe 8, 16 sau 32 bii etc.
Principalele elemente prin care Photshop se difereniaz de aplicaiile
concurente i prin care stabilete noi standarde n industria prelucrrii de imagini
digitale sunt:
-

Seleciile
Straturile (Layers)
Mtile (Masks)
Canalele (Channels)
13

Retuarea
Optimizarea imaginilor pentru Web

Photoshop poate citi majoritatea fiierelor raster i vector. De asemenea, are


o serie de formate proprii:
PSD (abreviere pentru Photoshop Document). Acest format conine o imagine
ca un set de straturi (Layers), incluznd text, mti (mask), informaii despre
opacitate, moduri de combinare (blend mode), canale de culoare, canale alfa
(alpha), ci de tiere (clipping path), setri duotone precum i alte elemente
specifice Photoshop. Acesta este un format popular i des rspndit n rndul
profesionitilor, astfel c este compatibil i cu unele aplicaii concurente Photoshop.
PSB (denumit Large Document Format) este o versiune mai nou a formatului
PSD, conceput special pentru fiiere mai mari (2GB) sau cu o informaie prezent pe
o suprafa definit de laturi mai mari de 30.000 de pixeli (suport pn la
300.000x300.000 pixeli).
PDD este un format mai puin ntlnit, fiind asociat iniial aplicaiei Adobe
PhotoDeluxe, astzi (dup 2002) compatibil doar cu aplicaiile Adobe Photoshop sau
Adobe Photoshop Elements.
Spaiul de lucru n Photoshop
Spaiul

de

lucru

sau W

orksp

ace c

um

se mai

spune

este

format

din

14

diferite elemente ca panouri, butoane, bare i ferestre care sunt aranjate ntr-un fel
anume.
1.
2.
3.
4.
5.
6.
7.
8.

Panoul de instrumente
Panoul de control
Ferestre documente cu file
Bara de aplicaii
Comutator pentru spaii de lucru
Bara de titlu a panoului
Butonul restringere de pictograme
Grupuri de panouri amplasate vertical

Spaiul de lucru se poate schimba cu altul i chiar crea unul propriu. Pentru
aceasta trebuie doar cu ajutorul cursorului s mutam elementele dup cum dorim, i
s le salvm sub denumirea dorit.
n imaginea de mai jos este prezentat coninutul panoului de instrumente.
II.5. Adobe

Dreamweaver CS6
Pentru
dezvoltarea

site-ului

web

folosit ca i
de

am

editor

cod

HTML,

CSS,

dar

aplicaia

Adobe

Dreamweaver.
Adobe

Dreamweaver
(cunoscut

anterior

ca

Macromedia
Dreamweaver) este o aplicaie
de dezvoltare web

Adobe

companiei

americane
Systems.

Versiunile recente includ suport pentru tehnologii web cum ar fi CSS, JavaScript,
PHP, Cold Fusion, etc.
15

Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor 1990 i


momentan deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi
rulat pe variate platforme software: Mac OS, Windows, dar suport n acelai timp i
platforme UNIX cu ajutorul unor emulatoare software cum ar fi Wine.
Ca orice alt editor WYSIWYG (What You See Is What You Get), Dreamweaver
poate ascunde detaliile de implementare a paginilor HTML, fcnd astfel posibil
crearea cu uurin a acestora i de ctre utilizatorii neexperimentai.
Dreamweaver

permite

folosirea

majoritii

browserelor

instalate

pe

calculatorul utilizatorului, pentru a previzualiza site-ul web creat. De asemenea


conine i cteva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a
gsi i modifica un paragraf sau o linie de cod, n ntregul site, pe baza oricror
parametri specificai de ctre utilizator.
Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare
dinamic a coninutului. De asemenea este oferit suport pentru conectarea la baze
de date (cum ar fi cele de tip MySQL i Microsoft Access) pentru a filtra i afia
coninutul folosind scripturi de genul PHP, ColdFusion, Active Server Pages (ASP) i
ASP.NET.

Spaiul de lucru n Dreamweaver


La deschiderea aplicaiei Adobe Dreamweaver se observ o suprafa alb,
denumit fereastra de lucru, care va afia pagina Web aa cum va aprea ea n
browser.

n fereastra

de

lucru putem

crea

modifica

pagina

HTML.

aplicaia Adobe Dreamweaver paginile Web pot fi create att n modul grafic
(Design), ct i direct n cod HTML (Code).
Bara

de

aplicaie (Application

comutatorul spaiului de lucru

bar)

conine

meniurile

aplicaiei,

i alte controale de aplicaie (Layout, Extend

Dreamweaver, Site).
Bara de instrumente Document ( Document toolbar) este creat pentru
a oferi posibilitatea accesului rapid la comenzile mai importante.Conine butoane

16

pentru

diferite

moduri

de

vizualizare

aleferestrei

Document (Code,

Split,

Design), Multiscreen (vizualizm

documentul HTML ca i cum ar aprea n ecrane de diferite dimensiuni), pentru


examinarea ntr-un browser configurat (Preview/Debug in browser), pentru
verificarea compatibilitii foilor de stil (CSS) cu diferite browsere (Check browser
compatibility).
Modul de vizualizare Code permite scrierea i editarea codului HTML,
JavaScript, PHP sau ColdFusion Markup Language (CFML), precum i a oricrui alt tip
de cod.
Modul de vizualizare Split permite afiarea n fereastra Document att a
codului surs, ct i a reprezentrii vizuale a documentului HTML.
Modul de vizualizare Design este un mediu de editare vizual i dezvoltare
rapid

de

aplicaii,

care

afieaz

reprezentare

asemntoare cu cea din fereastra browser-ului.

17

vizual

documentului,

Live View este similar modului de vizualizare Design, afind o reprezentare


mai apropiat de ceea ce documentul HTML va arta n browser. Acest mediu
permite interaciunea cu documentul la fel ca ntr-un browser. n modul Live
View coninutul documentului HTML nu este editabil.
Live Code View este disponibil doar atunci cnd vizualizm un document n
modul Live View. n modul Live Code View nu avem posibilitatea s editm codul
surs al paginii HTML.
Panouri i ferestre de inspectare
Panourile i ferestrele de inspectare permit vizualizarea i modificarea
proprietilor obiectului selectat. Cu ajutorul lor stabilim proprieti, se crem
animaii i adugm diferite funcionaliti paginii Web.
Panourile din Adobe Dreamweaver sunt structurate n grupuri, pe seciuni,
alturi de fereastra Document. Panourile pot fi extinse, comprimate sau nchise prin
acionarea sgeii situat n dreapta panoului.

III. Prezentarea site-ului WEB


Pagina principala prezinta meniul site-ului si un slider ce contine
imagini cu principalele obiective turistice din Londra.

18

COD
<div id="tooplate_menu">
<ul>
<li><a href="index.html"
class="current"><span></span>Acasa</a></li>
<li><a
href="about.html"><span></span>Istorie</a></li>
<li><a href="gallery.html"><span></span>De vizitat</a></li>
</ul>
</div>
<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow"
class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="leaf"
href="images/slider/01_l.jpg" title="Palatul Westminster">
<img
src="images/slider/01_t.jpg" alt="Palatul Westminster" />
</a>
</li>

<li>
<a class="thumb" name="leaf"
href="images/slider/02_l.jpg" title="Tower Bridge">

19

<img
src="images/slider/02_t.jpg" alt="Tower Bridge" />
</a>
</li>
<li>
<a class="thumb" name="leaf"
href="images/slider/03_l.jpg" title="London Eye">
<img
src="images/slider/03_t.jpg" alt="London Eye" />
</a>
</li>
<li>
<a class="thumb" name="leaf"
href="images/slider/04_l.jpg" title="Big Ben">
<img
src="images/slider/04_t.jpg" alt="Big Ben" />
</a>
</li>
<li>
<a class="thumb" name="leaf"
href="images/slider/05_l.jpg" title="Title 05">
<img
src="images/slider/05_t.jpg" alt="Title 05" />
</a>
</li>
</ul>
</div>
<div id="tooplate_sidebar">
20

<div class="sidebar_box">
<h2>Noutati</h2>
<div class="news_box">
<a href="pod.html">Tower Bridge</a>
<p>Podul a fost construit ntre anii 1888 - 1894 i leag partea
de sud cu nordul oraului. </p>
</div>
<div class="news_box">
<a href="buckingham.html">Palatul Buckingham</a>
<p>Palatul Buckingham este reedina principal din Londra a
monarhilor britanici.</p>
</div>
</div>
</div> <!-- end of sidebar -->
<div id="tooplate_content">
<div class="col_fw">
<h1>Istoria Orasului</h1>
<img src="images/tooplate_image_01.jpg" alt="Image 01"
class="image_fl" />
<p><em>Londra, capitala Regatului Unit al Marii Britanii i al
Irlandei de Nord, are o istorie care dateaz nc de acum 2000 de ani. n tot
acest timp s-a dezvoltat, devenind una dintre cele mai mari capitale ale
lumii, att pe plan financiar, ct i pe plan cultural. Pe de alt parte, a avut i
experiene nefericite, ca rzboiul civil, ciuma, incendii devastatoare,
bombardamente aeriene i atacuri teroriste. </em></p>
<p>n conformitate cu legenda <i>Historia Regnum
Britanniae</i> (Istoria Regilor britanici) de Geoffrey of Monmouth, Londra
a fost ntemeiat de Brutus din Troia dup ce i-a nvins pe giganii Gog i
Magog i a fost cunoscut ca Caer Troia, Troia Nova (denumiri n limba
latin pentru Noua Troia), care, conform unei etimologii aproximative, s-a
transformat n Trinovantum. Trinovantes erau un trib din Epoca Fierului care
a locuit n zon nainte de venirea romanilor. Geoffrey i atribuie Londrei
preistorice un ir de regi legendari ca Regele Lud, fiul lui Heli, care, aa cum
21

susine autorul, i-a dat aezrii numele CaerLudein, de la care deriv


denumirea de Londra (London, n limba englez), i care a fost nmormntat
la Ludgate.</p>
<li><a href="about.html">Mai multe</a></li>
</div>
</div>

Pentru animatie am utilizat doua script-uri java.


;(function($) {
var defaults = {
mouseOutOpacity: 0.67,
mouseOverOpacity: 1.0,
fadeSpeed:

'fast',

exemptionSelector: '.selected'
};

$.fn.opacityrollover = function(settings) {
$.extend(this, defaults, settings);

var config = this;

function fadeTo(element, opacity) {


var $target = $(element);
if (config.exemptionSelector)
$target = $target.not(config.exemptionSelector);
$target.fadeTo(config.fadeSpeed, opacity);
}

22

this.css('opacity', this.mouseOutOpacity)
.hover(
function () {
fadeTo(this, config.mouseOverOpacity);
},
function () {
fadeTo(this, config.mouseOutOpacity);
});

return this;
};
})(jQuery);

(function($) {
$.fn.piroBox = function(opt) {
opt = jQuery.extend({
my_speed : null,
close_speed : 300,
bg_alpha : 0.5,
scrollImage : null,
pirobox_next : 'piro_next_out',
pirobox_prev : 'piro_prev_out',
radius : 4,
close_all : '.piro_close,.piro_overlay',
slideShow : null,
slideSpeed : null //slideshow duration in seconds
}, opt);
function start_pirobox() {
23

var corners =
'<tr>'+
'<td colspan="3" class="pirobox_up"></td>'+
'</tr>'+
'<tr>'+
'<td class="t_l"></td>'+
'<td class="t_c"></td>'+
'<td class="t_r"></td>'+
'</tr>'+
'<tr>'+
'<td class="c_l"></td>'+
'<td
class="c_c"><span><span></span></span><div></div></td>'+
'<td class="c_r"></td>'+
'</tr>'+
'<tr>'+
'<td class="b_l"></td>'+
'<td class="b_c"></td>'+
'<td class="b_r"></td>'+
'</tr>'+
'<tr>'+
'<td colspan="3" class="pirobox_down"></td>'+
'</tr>';
var window_height = $(window).height();
var bg_overlay = $(jQuery('<div
class="piro_overlay"></div>').hide().css({'opacity':
+opt.bg_alpha,'height':window_height+'px'}));
var main_cont = $(jQuery('<table class="pirobox_content"
cellpadding="0" cellspacing="0"></table>'));

24

var caption = $(jQuery('<div


class="caption"></div>').css({'opacity':'0.8','-moz-borderradius':opt.radius+'px','-khtml-border-radius':opt.radius+'px','-webkit-borderradius':opt.radius+'px','border-radius':opt.radius+'px'}));
var piro_nav = $(jQuery('<div class="piro_nav"></div>'));
var piro_close = $(jQuery('<div
class="piro_close"></div>'));
var piro_play = $(jQuery('<a href="#play"
class="play"></a>'));
var piro_stop = $(jQuery('<a href="#stop"
class="stop"></a>'));
var piro_prev = $(jQuery('<a href="#prev"
class="'+opt.pirobox_prev+'"></a>'));
var piro_next = $(jQuery('<a href="#next"
class="'+opt.pirobox_next+'"></a>'));
$('body').append(bg_overlay).append(main_cont);
main_cont.append(corners);
$('.pirobox_up').append(piro_close);
$('.pirobox_down').append(piro_nav);
$('.c_c').append(piro_play);
piro_play.hide();
piro_nav.append(piro_prev).append(piro_next).append(caption);
if(piro_prev.is('.piro_prev_out') ||
piro_next.is('.piro_next_out')){
$('body').append(piro_prev).append(piro_next);
piro_prev.add(piro_next).hide()
}else{
piro_nav.append(piro_prev).append(piro_next);
}
var my_nav_w = piro_prev.width();
main_cont.hide();
25

var my_gall_classes = $("a[class^='pirobox_gall']");


var map = new Object();
for (var i=0; i<my_gall_classes.length; i++) {
var it=$(my_gall_classes[i])
map['a.'+it.attr('class')]=0;
}
var gall_settings = new Array();
for (var key in map) {
gall_settings.push(key);
if($(key).length === 1){//check on set of images
alert('For single image is recommended to use
class pirobox');
$(key).css('border','2px dotted red');
}
}
for (var i=0; i<gall_settings.length; i++) {
$(gall_settings[i]).each(function(rel){this.rel =
rel+1 + "&nbsp;of&nbsp;" + $(gall_settings[i]).length;});
var add_first = $(gall_settings[i]
+':first').addClass('first');
var add_last = $(gall_settings[i]
+':last').addClass('last');
}
$(my_gall_classes).each(function(rev){this.rev = rev+0});
var piro_gallery = $(my_gall_classes);
var piro_single = $('a.pirobox');
$.fn.fixPNG = function() {
return this.each(function () {
var image = $(this).css('backgroundImage');
if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
26

image = RegExp.$1;
$(this).css({
'backgroundImage': 'none',
'filter':
"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=" + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop' :
'scale') + ", src='" + image + "')"
}).each(function () {
var position = $(this).css('position');
if (position != 'absolute' && position !
= 'relative')
$(this).css('position', 'relative');
});
}
});
};
$(window).resize(function(){
var new_w_bg = $(window).height();
bg_overlay.css({'visibility':'visible','height':+
new_w_bg +'px'});
});
piro_prev.add(piro_next).bind('click',function(c) {
c.preventDefault();
var image_count = parseInt($
(piro_gallery).filter('.item').attr('rev'));
var start = $(this).is('.piro_prev_out,.piro_prev') ? $
(piro_gallery).eq(image_count - 1) : $(piro_gallery).eq(image_count + 1);
start.click();

piro_close.add(caption).add(piro_next).add(piro_prev).css('visibility','hidden')
;
27

});
piro_single.each(function(d) {
var item = $(this);
item.bind('click',function(d) {
d.preventDefault();
piro_open(item.attr('href'));
var this_url = item.attr('href');
var descr = item.attr('title');
if( descr == ""){
caption.html('<p>'+ this_url+'<a href='+
this_url +' class="link_to" target="_blank" title="Open Image in a new
window"></a></p>');
}else{
caption.html('<p>'+ descr+'<a href='+
this_url +' class="link_to" target="_blank" title="Open Image in a new
window"></a></p>');
}
$('.c_c').addClass('unique');
piro_next.add(piro_prev).add(piro_close).add(caption).hide();
$('.play').remove();
});
});
$(piro_gallery).each(function(array) {
var item = $(this);
item.bind('click',function(c) {
c.preventDefault();
piro_open(item.attr('href'));
var this_url = item.attr('href');
var descr = item.attr('title');

28

var number = item.attr('rel');


if( descr == ""){
caption.html('<p>'+ this_url+'<em
class="number">' + number + '</em><a href='+ this_url +'
class="link_to" target="_blank" title="Open Image in a new
window"></a></p>');
}else{
caption.html('<p>'+ descr+'<em
class="number">' + number + '</em><a href='+ this_url +'
class="link_to" target="_blank" title="Open Image in a new
window"></a></p>');
}
if(item.is('.last')){
$('.number').css('textdecoration','underline');
}else{
$('.number').css('textdecoration','none');
}
if(item.is('.first')){
piro_prev.hide();
piro_next.show();
}else{
piro_next.add(piro_prev).show();
}
if(item.is('.last')){
piro_prev.show();
piro_next.hide();
}
if(item.is('.last') && item.is('.first') ){
piro_prev.add(piro_next).hide();
29

$('.number').hide();
piro_play.remove();
}
$
(piro_gallery).filter('.item').removeClass('item');
item.addClass('item');
$('.c_c').removeClass('unique');
});
});

30

IV. Resurse de hard si soft necesare


Hardware Requirements:

Intel Pentium III/M 1.4 GHz, or Pentium IV 1.4 GHz minimum.


512 MB RAM (1 GB for Microsoft Windows Vista, Microsoft Windows 7 or Microsoft Windows 8
Release Preview).
300 MB free hard disk space.
SVGA or higher-resolution monitor (XGA is recommended).
Mouse or other pointing device.

Supported Operating Systems:

Microsoft
Microsoft
Microsoft
Microsoft
Microsoft
Microsoft

Windows
Windows
Windows
Windows
Windows
Windows

8 Release Preview
7
Vista
Server 2008 (SP2)
Server 2003 (SP1)
XP Professional (SP3)

Supported Browsers:

Internet Explorer 9+
Firefox 3.6+
Chrome 19+
Safari 5.1+
Opera 12+

Supported mobile components for mobile OS:

iOS (iPhone, iPad) 3.1.3+


Android 2+
BlackBerry 5+
Windows Phone 7+
Symbian 5+
WebOS 1.4.1+
Requires PhoneGap 1.8.1

Standalone App Development:

iOS (iPhone, iPad) 3.1.3+


Android 2+
BlackBerry 5+

31

V. Concluzii
Experiena dobndit n urma realizrii acestui proiect a fost una care m-a
ajutat s mi mbuntesc cunotinele n cadrul calculatoarelor i programrii web.
Am nvat s folosesc limbajele de programare web HTML i CSS la un nivel
avansat, ca i editorul de HTML Adobe Dreamweaver sau aplicaia Adobe
Photoshop.

32

VI. Bibliografie

Web design cu Dreamweaver, Editura Isa Multimedia (2008)


Adobe Photoshop CS6 - Curs oficial Adobe Systems, Editura Teora (2012)

Surse de coninut:

http://www.ghiduri-turistice.info
http://www.travelworld.ro
http://www.wikipedia.org

33

Vous aimerez peut-être aussi