Professional Documents
Culture Documents
L E C Ţ I E D E M O N S T R AT I VĂ
m c ţie
on
st
ra
tiv
ă
INTRODUCERE
Toate aceste website-uri arat i funcioneaz într-un anumit fel. Procedeul prin care
un website ia natere se numete webdesign, website-urile ind opera webdesign-
erilor. Webdesignerii sunt specialiti care nu aparin neaprat domeniului IT, ci mai
degrab departamentelor de creaie din diverse companii specializate în webdesign,
publicitate sau alte domenii conexe. Procedeul de dezvoltare a unui site nu are de-a
face doar cu tehnologia informaional.
Pentru a face cât mai clare pentru dvs. aceste aspecte, Institutul Eurocor vine în
întâmpinarea doritorilor de DESIGN I PROGRAMARE WEB cu pachetul de curs
omonim, dorind s puncteze cât mai clar cu putin care sunt metodele de dezvoltare
a unui website. Vom încerca s structurm acest curs pe dou coordonate: graca
unui website i programarea.
Acest curs se adreseaz atât acelora dintre dumneavoastr care au cunotine ante-
rioare de webdesign, dar care doresc o reactualizare a acestora i o mai bun xare
a lor, cât i celor care vor s construiasc website-uri învând alturi de Eurocor, pas
cu pas, cum se face acest lucru.
Cursul nostru folosete o abordare diferit, urmrind evoluia unui website real, pe
care îl vei putea accesa pe adresa http://www.eurocor.ro/cursdesignsiprogramare-
web. Putei accesa adresa doar în baza unor credeniale, utilizator i parol, furnizate
împreun cu acest curs. Zona aceasta va conine o pagin separat pentru ecare
modul, cu exemplicri asupra celor învate în modulul respectiv.
Acest curs poate considerat o introducere în webdesign. Dei subiectul este unul
vast, cerând nenumrate ore de experien, dac v vei regsi în ipostaza de a
crea un website pentru compania dumneavoastr, pentru proiectul dumneavoastr,
pentru familia dumneavoastr sau pentru una dintre pasiunile dumneavoastr, i nu
v permitei s apelai la o rm specializat, atunci, acest curs este cel mai nimerit
pentru a v ajuta s ducei la bun sfârit planul. Cu ajutorul cursului nostru i cu puin
dedicaie i pasiune, ar trebui ca rezultatul s e unul pe msur.
Profesorul dumneavoastr
Exerciţiu
Indic exerciiile pe care vi le propunem spre rezolvare
EXEMPLU
3/18 Indic faptul c tema respectiv a mai fost abordat într-un modul anterior (în acest caz,
tema a mai fost abordat în modulul 3, la pagina 18)
MODUL 3 HTML
ce este HTML?
tipuri de date HTML
structura global a unui document HTML
exemple HTML – linii de cod
exemple de website-uri bazate pe HTML
MODUL
1 INTRODUCERE ÎN CREAREA
WEBSITE-URILOR
Modulul 1 al cursului nostru îi propune s explice cât mai clar noiunile de baz
necesare procesului de webdesign. Vom puncta ce înseamn webdesignul, care
sunt mijloacele necesare crerii unui website i care sunt tehnologiile folosite.
în cadrul acestuia. O parte important a acestui modul este cea în care vom înva despre numele
unui domeniu i ce ar trebui s avem în vedere atunci când îl alegem.
OBIECTIVE
Entităţi XML
O entitate în XML este un corp de date, de cele mai multe ori ind vorba
de text. Entitile sunt folosite pentru a reprezenta caractere care nu pot
introduse uor sau chiar deloc, folosind tastatura. Aceste caractere
speciale pot introduse în documentul XML e folosind referine despre
entiti, e folosind referine numerice la diferite caractere. Un exemplu
de caracter numeric este „€”. Acesta desemneaz caracterul
Deniiile i noiunile Euro prin intermediul codului unicode în format hexadecimal.
importante au fost
marcate printr-o grac O astfel de referin conine codul hexadecimal care denete un caracter.
Acest cod conine întotdeauna caracterul de început „&”, urmat de cod i apoi
special. terminându-se cu „;”. XML conine cinci entiti predenite:
& (&)
< (<)
> (>)
' (‘)
" (“)
EXEMPLU
Alte elemente pot de asemenea introduse în DTD-ul documentului XML. Mai jos
un exemplu în acest sens:
EXEMPLU
caractere Semnul „&” din exemplul anterior, poate , de asemenea, introdus în acest fel
numerice într-un document de tip XML, dup cum urmeaz:
<nume_companie>C&C Tuning</nume_companie>
<nume_companie>C&C Tuning</nume_companie>
Atât 38, cât i 26, în hexadecimal i decimal, reprezint semnul „&”.
EXEMPLU
EXEMPLU
Similar cu HTML, putem s alturm unui document XML o linie opional XML care
declar versiunea de XML folosit (cea mai uzitat este versiunea 1.0).
EXEMPLU
Tot similar cu DTD-ul documentelor HTML, linia XML de mai sus poate conine i
informaii despre encoding; în cazul nostru se va folosi standardul UTF-8 (Unicode
Transformation Format - 8).
EXEMPLU
EXEMPLU
Valorile atribut trebuie s se ae mereu între ghilimele. Pentru aceasta vom folosi
ghilimele duble sau ghilimele simple, ecare nume de atribut trebuind s apar o
singur dat într-un singur element. XML implic ca elementele s e structurate
corect – elementele nu trebuie niciodat s se suprapun. Trebuie s m ateni la
tag-urile de închidere i de deschidere ale unei linii de cod XML.
EXEMPLU
EXEMPLU
<foo></foo>
<foo />
<foo/>
Un astfel de element poate conine i atribute:
<info autor=”Nume Prenume” genre=”specie literar” date=”data lansrii crii” />
MODUL 3 HTML
Pe lâng exemple,
pentru facilitarea
înelegerii informaiilor
prezentate, am inserat
în paginile cursului
imagini i print
screen-uri sugestive.
2/36 Vom urmri, în cele ce urmeaz, schia logic care a rezultat dup studiul de caz
din modulul 2: clientul dorete un site aerisit, în partea de sus un banner i imediat
dedesubt, un meniu orizontal care s conin meniul propriu-zis.
scheletul În baza diagramei vom realiza i noi scheletul website-ului conform elementelor
site-ului învate în capitolul „Exemple HTML”. Vom realiza aceasta integral cu ajutorul
editorului Notepad.
Dimensionm mrimea website-ului astfel încât acesta s e vizibil pe un minimum
de rezoluie 1024x768 pixeli, folosindu-ne de un tabel cu funcia <table>, cu limea
de 900 de pixeli. În acest tabel adugm înc 4 tabele – primul pentru banner,
al doilea pentru zona meniu, al treilea pentru zona de content cu scroll i ultimul
pentru zona x cu date de contact.
Vom împri în dou pri primul tabel (cel pentru banner): o parte pentru banner i
cealalt pentru zona cu data i ora, aa cum au fost solicitate de client.
EXEMPLU
Un element foarte Area: menu Focus: 7/7 Width: 690px Height: 45px 1
util în acest curs îl Area: primary sidebar
Focus: 3/7 Width: 250px
Height: auto
reprezint urmrirea
Area: primary content Focus: 5/7 Width:690px Height: auto
4 7
Legend:
- Zona 1 – aceast zon propune amplasarea unui banner, propune dimensiunile
bannerului.
- Zona 2 – aceast zon propune amplasarea meniului principal.
- Zona 3 – aceast zon propune amplasarea coninutului principal al website-
ului, informaiile principale.
- Zona 4 – ind o propunere de website cu coninut principal i secundar, aceast
zon propune amplasarea coninutului secundar.
- Zona 5 – aceast zon propune amplasarea meniului secundar.
- Zona 6 – aceast zon propune amplasarea unui sidebar principal.
- Zona 7 – aceast zon propune amplasarea unui sidebar secundar.
Dup cum putei vedea din imaginea anterior prezentat, zonele de interes
sunt delimitate, denite prin text, generic i sunt denite i mrimile elementelor
grace.
EXEMPLU
Studiul de caz
Logo [217x90, perma] Leaderboard [728x90, perma]
1
urmrete construcia
unui website i Valuta Lungime Masa Viteza Temperatura Consum Lorem ipsum 2 Alte conversii
My Convertor
3
Content [500xH]
Rectangle [300x250, perma]
Wide Skyscraper
[160x600, perma]
Legend:
- Zona 1 – aceast zon a evoluat de la un simplu banner, la o zon cu dou
bannere: logo i banner principal.
- Zona 2 – meniul propus în imaginea precedent pe culoarea neagr a primit
câteva elemente grace i a fost populat cu nite cuvinte cheie.
- Zona 3 – a fost introdus i un meniu vertical, cât i o zon grac.
- Zona 4 – zona din mijloc nu mai conine coninut primar i secundar, cele
dou zone ind acum una i aceeai.
- Zona 5 – tot în aceast zon a fost introdus i un mic spaiu publicitar.
- Zona 6 – pe bara de jos a fost eliminat cu totul meniul secundar.
- Zona 7 – în partea dreapt, lucrurile s-au pstrat aproape la fel.
Putei descoperi pe
site-ul cursului http://
www.eurocor.ro/curs-
designsiprogramare-
web/ noi elemente:
– posibilitatea de a
descrca i lucra cu
template-uri;
– de a verica online
rezultatul studiului
de caz din caiet etc.
Acesta vine în com-
pletarea informaiilor
din caiet.
Exerciiile sunt un
instrument de veri-
care a cunotinelor
dobândite în cadrul
modulelor de curs.
Constituie un pas util
în rezolvarea temei
pentru acas.
Exerciţiul 5
Exemple XHTML
Dup cum ai învat în capitolele anterioare, XHTML este o versiune mai strict i
mai curat a HTML.
În cele ce urmeaz vom descrie diferenele dintre XHTML i HTML prin exemple.
Codul surs pentru varianta HTML permisiv:
<b><i><u>Text ingrosat, sublinitat si italic.</b></i></u>
Iat cum interpreteaz Internet Explorer codul de mai sus:
R E Z U M AT U L M O D U LU LU I 6
6.1 Designul este primul elementul decisiv când vizitm un website. Este
Fiecare modul important s dezvoltm un design cât mai simplu, cât mai aerisit i cât
mai potrivit pentru proiectul nostru. Nu exist o reet punctual de
conine un rezumat realizare a designului unui proiect web, exist îns reguli de bun-sim i de
corectitudine a esteticii.
al informaiilor 6.2 Cromatica joac un rol extrem de important în realizarea unui design web.
prezentate în cadrul Este important s stabilim de la început i s punem la dispoziia clientului
nostru posibilitile cromatice, clasa de culori în care putem realiza designul
su. Acesta v ajut la website-ului. Nu putem folosi foarte multe culori sau s le combinm la
modul liber.
recapitularea i xarea 6.3 Nu este nici uor i nici simplu s alegem culorile sau s amestecm
culorile pentru proiectul nostru. S alegem schema de culori potrivit este
principalelor aspecte poate cea mai complicat activitate, aceasta ind responsabil direct de a
transmite mesajul ctre vizitator i de a crea ceea ce se numete brand
teoretice tratate. awareness. O schem de culori poate inuena vizitatorul s rmân
pe website-ul dvs. i s efectueze nite activiti (ex. achiziionarea de
produse sau servicii) sau s-l prseasc dup câteva secunde.
6.4 Iat câteva „reguli” dup care v putei ghida atunci când alegei schema de
culori a unui website: alegei o palet de culori naturale, creai un contrast
puternic între background-ul website-ului i textul su, alegei maximum
3 culori i folosii-le doar pe acestea în designul website-ului dvs., luai în
consideraie elementele care denesc vizitatorii dvs.: probleme ale vzului,
vârst, sex.
6.7 Felul în care vei aeza butoanele, elementele grace, textele, felul în
care sunt aate toate aceste lucruri va inuena dramatic vizitatorul. Nu
este plcut s avem de-a face cu un layout prea încrcat din care nu mai
putem înelege nimic, prea multe elemente, prea multe culori care pot s
goneasc vizitatorul. Fii astfel ateni la elementele pe care le introducei,
la numrul de culori i de elemente i mergei pe ideea simplu = bun.
6.8 Photoshop este un editor grac oferit de compania Adobe Systems. Acest
tip de program se mai numete i DPD (Desktop Publishing Program). În
acest moment, Photoshop este liderul de pia în sfera editoarelor grace
i este, bineîneles, produsul cel mai important oferit de Adobe Systems.
Este considerat un standard în industria de producie grac.
(modul 4)
RĂSPUNSURI LA EXERCIŢII
Exerciiul 5
Modulele de curs Mai jos un exemplu de rezolvare:
<?xml version=”1.0” encoding=”utf-8” ?>
cuprind i o seciune - <matrimoniale>
de rspunsuri la - <id>
<nume>Apostol</nume>
exerciii, care v <prenume>Dana</prenume>
ofer anumite sugestii <sex>F</sex>
<oras>Iasi</oras>
de rezolvare. <dn>04.06.1986</dn>
<ocupatie>student</ocupatie>
<inaltime>1.72</inaltime>
<greutate>55</greutate>
<ochi>caprui</ochi>
<par>saten</par>
</id>
- <id>
<nume>Dragomir</nume>
<prenume>Dragos</prenume>
<sex>M</sex>
<oras>Bucuresti</oras>
<dn>14.03.1982</dn>
<ocupatie>inginer</ocupatie>
<inaltime>1.84</inaltime>
<greutate>86</greutate>
<ochi>verzi</ochi>
<par>saten</par>
</id>
- <id>
<nume>Gabrunski</nume>
<prenume>Irina</prenume>
<sex>F</sex>
<oras>Bucuresti</oras>
<dn>11.08.1978</dn>
<ocupatie>avocat</ocupatie>
<inaltime>1.70</inaltime>
<greutate>52</greutate>
<ochi>negri</ochi>
<par>brunet</par>
</id>
</matrimoniale>
D I C Ţ I O N A R D E S P E C I A L I TAT E
3. Ce înseamn WYSIWYG?
a) o funcie dedicat pentru a introduce cod CSS în editoarele HTML;
b) What You See Is What You Get;
c) o capabilitate de conectivitate a editoarelor HTML;
d) o funcie de cod HTML.
Temele se rezolv pe
formulare speciale,
care pot trimise spre Codul
profesorului
corectare. De ase-
menea, putei rezolva Numele [i prenumele
Adresa
CURS: DESIGN ŞI PROGRAMARE
GR WEB
temele i online, pe Nr. modul: 5
Cod po[tal Localitatea
Num\rul cursantului
site-ul www.eurocor.ro
LU
Observa]iile
bserva]iile profesorului:
profeso
Pentru exerciţiile cu variante de răspuns, un singur răspuns este corect.
1. Cum se numesc funcţiile prin care putem urca fişierele unui websit
website
pe internet prin intermediul Adobe Dreamweaver?
a) FTP şi Manage Sites;
b) Manage Sites;
P
c) FTP şi UTP;
d) Manage Sites şi HTML.
3. Ce înseamnă WYSIWYG?
WYG
a) o funcţie dedicată pentru
pe t u a introduce cod CSS în editoarele HTML;
EX
4. f ă edito
Ce funcţie oferă
ofer editorul 1st Page 2006?
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
Semn\tura profesorului:
ATEN}IE !
NU UITA}I S| AL|TURA}I UN PLIC TIMBRAT PE NUMELE {I ADRESA DUMNEAVOASTR|!