Sunteți pe pagina 1din 11

Adobe Dreamweaver CC

1. Introducere n Dreamweaver CC.......................................................................................................... 2


1. Introducere.......................................................................................................................................... 2
2. Noi funcionaliti n Dreamweaver CC................................................................................................... 2
4. Fiierele i structura unui website.......................................................................................................... 2
3. Introducere n spaiul de lucru............................................................................................................... 2
2. Site-uri n Dreamweaver...................................................................................................................... 3
5. Definirea i gestionarea site-urilor......................................................................................................... 3
6. HTML i crearea documentelor.............................................................................................................. 3
7. Proprietile unei pagini........................................................................................................................ 3
3. Textul.................................................................................................................................................... 4
8. Bazele textului..................................................................................................................................... 4
9. Listele.................................................................................................................................................. 4
4. CSS i Dreamweaver............................................................................................................................. 5
10. Lucrul cu codul .................................................................................................................................. 5
11. Bazele CSS.......................................................................................................................................... 5
5. Panoul CSS Designer ............................................................................................................................ 6
12. Familiarizarea cu panoul CSS Designer................................................................................................. 6
13. Lucrul cu panoul CSS Designer ............................................................................................................ 6
6. CSS Layout............................................................................................................................................ 7
14. CSS Box Model................................................................................................................................... 7
15. Elementele div................................................................................................................................... 7
16. Layout-ul............................................................................................................................................ 7
7. Stilizarea cu CSS.................................................................................................................................... 8
17. Imaginile............................................................................................................................................ 8
18. Formatarea imaginilor........................................................................................................................ 8
8. Linkuri i tabele.................................................................................................................................... 9
19. Linkurile............................................................................................................................................. 9
20. Tabelele............................................................................................................................................. 9
9. Formulare i multimedia..................................................................................................................... 10
21. Formularele...................................................................................................................................... 10
22. Flash i video..................................................................................................................................... 10
10. Exemple i exerciii........................................................................................................................... 11
23. Exemple i exerciii........................................................................................................................... 11

1 / 11

1. Introducere n Dreamweaver CC
1. Introducere
n cadrul acestei lecii am rememorat principalele noiuni despre limbajele HTML i CSS, iar n continuarea cursului vom face
paralele ntre Dreamweaver i elementele HTML i CSS.

2. Noi funcionaliti n Dreamweaver CC


n aceast lecie ne-am concentrat pe noile funcionaliti din Dreamweaver CC care ne pot accelera i facilita munca.
Printre acestea am menionat panoul CSS Designer, widgets i efectele Query UI care le-au nlocuit pe cele Spry, Fluid grid
layouts, fonturile Web, noile caracteristici HTML5 video i audio, suport pentru noile elemente pentru formulare din
HTML5, conectarea cu instrumentele Edge i sincronizarea setrilor Creative Cloud. Despre toate aceste detalii vom discuta
n continuare n curs, acesta a fost doar un rezum
at al noutilor. Dac nu v-ai mai ntlnit cu instrumentul Dreamweaver putei sri peste aceast lecie.

4. Fiierele i structura unui website


Site-urile se creeaz n folderul local de pe calculator. Dup finalizare, transferm ntregul folder root pe serverul pe care se
va afla site-ul. Exist dou tipuri de linkuri, relative i absolute. Cele relative se folosesc pentru legturile din cadrul site-ului,
iar cele absolute pentru legturile ctre alte documente i pagini din afara site-ului.

3. Introducere n spaiul de lucru


n aceast lecie am clarificat elementele de baz ale spaiului de lucru n Dreamweaver. Am definit principalele elemente i
am creat o baz pentru urmtoarele lecii.
Am explicat welcome screen/ecranul de ntmpinare i opiunile sale. Am denumit principalele pri ale spaiului de lucru n
Dreamweaver. Am fcut cunotin cu document title bar, document toolbar i cu modul n care putem folosi opiunile
design/code/split. De asemenea, am explicat application bar, dar i workspace switcher. Am explicat modalitile n care
putem gestiona panourile, precum i spaiul de lucru i am menionat toolbar-urile suplimentare, precum i status bar-ul.
Ne-am oprit mai mult asupra Properties inspectorului i panoului insert ca unul din cele mai importante panouri. i n final
am vzut cum putem gestiona scurtturile de pe tastatur.

2 / 11

2. Site-uri n Dreamweaver
5. Definirea i gestionarea site-urilor
n aceast lecie ne-am familiarizat cu principalele noiuni legate de crearea proiectelor n Dreamweaver. inei minte c
ntotdeauna prima dat trebuie s crem site-ul local (proiect). Abia apoi ncepem crearea paginilor i a altor elemente. n
timpul lucrului trebuie folosite diferite browsere pentru testarea paginilor.

6. HTML i crearea documentelor


HTML (hyper text markup language) are o anumit sintax i reguli care l creeaz. Fiecare document HTML ncepe i se
termin cu tag-ul <html>, care uneori este denumit i tag-ul rdcin root. Apoi exist dou uniti de baz ale
documentului i anume <head>, respectiv antetul documentului i <body>, n care se afl ntregul coninut vizibil al paginii.
Noul document se creeaz prin dialogul New Document, dar l putem crea i direct din ecranul de ntmpinare. Document
Type Declaration sau prescurtat Doctype, se introduce la nceputul documentului HTML i seteaz gramatica documentului
HTML.

7. Proprietile unei pagini


Pentru fiecare pagin separat HTML putem defini bazele setrii prin dialogulPage Properties. Modificrile pe care le facem
aici se refer la pagina n cauz (nu influeneaz alte pagini ale site-ului). Exist cteva categorii care se afl n partea
dreapt a dialogului. Dnd clic pe ele, le deschidem setrile.

3 / 11

3. Textul
8. Bazele textului
Exist dou tipuri de elemente constructive, tag-urile block i inline. Dac vrem s introducem textul direct n DW, putem
face asta n design view. Comenzile sunt asemntoare cu cele din text editors. Cnd lucrm cu textul n documentele
HTML, este foarte important ca textul s fie setat corect i s nu aib prea multe tag-uri i atribute. Dac copiem din Word i
instrumente similare, trebuie curat codul.

9. Listele
Listele n sine nu trebuie s arate aa cum ne imaginm noi, ci pot avea un aspect total diferit. Exist trei tipuri de baz pe
care le putem folosi n DW, respectiv n documentul HTML: liste ordonate (engl. ordered), neordonate (engl. unordered) i
de definiie (engl. definition). Listele pot avea mai multe nivele de elemente. n Dreamweaver-ul listei putem seta prin
meniul drop-down Format > List > Properties sau prin panoul Properties Inspector.

4 / 11

4. CSS i Dreamweaver
10. Lucrul cu codul
Dei putem s facem cea mai mare parte a site-ului n Design View, trebuie s cunoatem i codul HTML i CSS. DW ofer o
mulime de circumstane atenuante pentru lucrul cu codul, printre care i codul Hitn. De asemenea, coding toolbar ofer o
manipulare uoar a view-ului. Comentariile le vom posta atunci cnd vrem s nsemne ceva. Quick tag editor se poate
utiliza n design view pentru a modifica rapid i uor codul i pentru a-l aduga n pagin.

11. Bazele CSS


Cascading Style Sheets (CSS) este astzi unul dintre cele mai importante elemente ale site-urilor web moderne deoarece
permite stilizarea paginilor HTML i separarea coninutului de stilizare. Elementul de baz al limbajului CSS este regula
compus din selector i declaraie (proprietate i valoare). Cu ajutorul valorilor ID i CLASS putem conecta elementele i
regulile lor CSS. CSS se poate configura i n cadrul fiierului HTML, ca fiier separat sau direct pe tag. Valoarea CSS pentru
anumite proprieti se poate scrie ntr-un mod scurt sau lung.

5 / 11

5. Panoul CSS Designer


12. Familiarizarea cu panoul CSS Designer
Locul central pentru manipularea, controlarea i crearea unei reguli/descrieri este panoul CSS Designer. Panoul CSS
Designer este format din patru uniti (panouri) interdependente: Sources, @Media, Selectors i Properties. Panoul Sources
este folosit pentru a seta locaia unde se afl descrierile CSS; Selectors pentru a seta selectorii pentru descrieri, n timp ce n
panoul Properties se seteaz proprietile n sine i valorile. Prin panoul CSS Designer se pot conecta i fiierele externe.

13. Lucrul cu panoul CSS Designer


Cnd vrem s introducem o anumit valoare, n funcie de tipul de cmp, panoul CSS Designer se comport diferit.
Proprietile din cadrul panoului properties sunt grupate n mai multe categorii: Layout, Text, Border, Background i Others.
Prin panoul CSS Designer putem muta regulile ntr-un fiier extern, le putem terge dar i deconecta temporar.

6 / 11

6. CSS Layout
14. CSS Box Model
n aceast lecie ne-am familiarizat cu Box Model. Box Model este un cadru de programare oferit de CSS pentru a formata
i/sau redefini orice element HTML dat. n materialul video aferent acestei lecii, sunt prezentate aceste detalii de
poziionare prin exemple simple i este acordat o atenie sporit codului i structurii n sine, pentru a le clarifica. n leciile
urmtoare, n materialele video vom clarifica toate acestea i vom vedea mai multe exemple prin interfaa Dw.

15. Elementele div


Putem introduce elementele div n mai multe moduri, din meniul drop-down Insert > Div sau selectnd din panoul/toolbar
Insert opiunea Div. Dialogul New CSS Rule poate fi folosit pentru a crea noi descrieri CSS i dialogul CSS Rule definition ca o
alternativ la panoul CSS Designer.

16. Layout-ul
nainte de introducerea coninutului trebuie s setm pagina layout. Pentru layout, putem utiliza acum i noi elemente
semantice HTML5.

7 / 11

7. Stilizarea cu CSS
17. Imaginile
Exist trei tipuri de imagini folosite astzi pe web: JPG, GIF i PNG. Fiecare format are avantajele i dezavantajele sale.
Putem aduga imaginile prin meniurile drop-down, prin panoul files, prin panoul assets i aa mai departe. Panoul Assets se
utilizeaz pentru o manipulare mai uoar a materialelor pe care le folosim. Dreamweaver are o integrare excelent cu
instrumentul Photoshop i accept direct fiierele PSD.

18. Formatarea imaginilor


Imaginile pot fi formatate i prin HTML i CSS, dei, al doilea mod este cu mult mai convenabil i acesta ar trebui utilizat. Cu
descrierile CSS putem influena imaginea i afiarea ei. Prin CSS putem plasa fundalul (background) imaginii, care n general
nu apare n codul HTML.

8 / 11

8. Linkuri i tabele
19. Linkurile
n Dw linkurile le putem stabili cel mai simplu prin panoul properties inspector. Linkurile se pot seta pn la pagin i fiiere,
dar, de asemenea, i pn la name anchor, respectiv amplasarea pe aceeai pagin sau pe o alta. De asemenea, putem
posta linkuri i pn la adresele de email.

20. Tabelele
n loc s introducei tabelul manual, proces care poate fi foarte obositor, Dw permite introducerea tabelului ntr-un mod
vizual simplu, folosind instrumente built-in/ncorporate. Elementele tabelului se pot modifica uor i putem corecta afiarea
prin modul de lucru Design. Tabelele pot fi stilizate cu descrierile CSS.

9 / 11

9. Formulare i multimedia
21. Formularele
Dw permite introducerea formularului i a elementelor formularului direct prin Design View, fr a fi nevoie de
introducerea manual a codului. De asemenea, acum sunt introduse i elementele formularului care au aprut n limbajul
HTML5. Formularele i elementele se pot stiliza n descrierile CSS.

22. Flash i video


Dreamweaver faciliteaz introducerea fiierelor multimedia, coordoneaz atributele care determin modul n care fiierele
media vor fi afiate pe pagin i acolo unde este cazul, Dreamweaver ofer posibilitatea de a schimba modul n care
utilizatorul interacioneaz cu aceste fiiere. Putem introduce animaiile flash, fiiere video Flash, dar i fiiere mai noi
HTML5 video i audio. Trebuie s fim precaui n privina introducerii elementelor HTML5, deoarece acestea nu sunt
acceptate de ctre toate browserele de pe calculatoare. Pe de alt parte, pe dispozitivele mobile i altele similare, Flash nu
funcioneaz.

10 / 11

10. Exemple i exerciii


23. Exemple i exerciii

11 / 11