Académique Documents
Professionnel Documents
Culture Documents
Piatra Neam
site web
Coordonatori,
Candidat,
Nour Georgeta
Ciofu
Daniel
Podbereschi Maria
mai 2015
Gabriel
CUPRINS:
I.
...............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
la
vizitarea
unui
domeniu.
De
exemplu
la
vizitarea
domeniului
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:
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.
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:
-
elementelor;
identificarea unic i clasificri generice a unor grupuri de atribute.
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
Selectorul
pointez
10
Browserul
transmite
acest
text
unor
aplicaii
speciale
din
web,
navigarea printre documentele html din www sau din alte servicii, ori de
istoricului.
Accesarea altor servicii de informare i servicii Internet: pot electronic,
serviciul de tiri, serviciul ftp (transferul de fiiere), etc.
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
list.
Semnul de carte sau pagina favorit: utilizatorul poate asocia
unei anumite pagini o denumire preferat, cu ajutorul creia poate ncrca
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 %.
Seleciile
Straturile (Layers)
Mtile (Masks)
Canalele (Channels)
13
Retuarea
Optimizarea imaginilor pentru Web
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
permite
folosirea
majoritii
browserelor
instalate
pe
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
bar)
conine
meniurile
aplicaiei,
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,
de
aplicaii,
care
afieaz
reprezentare
17
vizual
documentului,
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
'fast',
exemptionSelector: '.selected'
};
$.fn.opacityrollover = function(settings) {
$.extend(this, defaults, settings);
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
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
$('.number').hide();
piro_play.remove();
}
$
(piro_gallery).filter('.item').removeClass('item');
item.addClass('item');
$('.c_c').removeClass('unique');
});
});
30
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+
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
Surse de coninut:
http://www.ghiduri-turistice.info
http://www.travelworld.ro
http://www.wikipedia.org
33