Adobe Dreamweaver CC

1. Introducere în Dreamweaver CC .......................................................................................................... 21. Introducere .......................................................................................................................................... 22. Noi funcţionalităţi în Dreamweaver CC ................................................................................................... 24. Fişierele şi structura unui website .......................................................................................................... 23. Introducere în spațiul de lucru ............................................................................................................... 2

2. Site-uri în Dreamweaver ...................................................................................................................... 35. Definirea şi gestionarea site-urilor ......................................................................................................... 36. HTML şi crearea documentelor .............................................................................................................. 37. Proprietățile unei pagini ........................................................................................................................ 3

3. Textul .................................................................................................................................................... 48. Bazele textului ..................................................................................................................................... 49. Listele .................................................................................................................................................. 4

4. CSS şi Dreamweaver ............................................................................................................................. 510. Lucrul cu codul .................................................................................................................................. 511. Bazele CSS .......................................................................................................................................... 5

5. Panoul CSS Designer ............................................................................................................................ 612. Familiarizarea cu panoul CSS Designer ................................................................................................. 613. Lucrul cu panoul CSS Designer ............................................................................................................ 6

6. CSS Layout ............................................................................................................................................ 714. CSS Box Model ................................................................................................................................... 715. Elementele div ................................................................................................................................... 716. Layout-ul ............................................................................................................................................ 7

7. Stilizarea cu CSS .................................................................................................................................... 817. Imaginile ............................................................................................................................................ 818. Formatarea imaginilor ........................................................................................................................ 8

8. Linkuri şi tabele .................................................................................................................................... 919. Linkurile ............................................................................................................................................. 920. Tabelele ............................................................................................................................................. 9

9. Formulare şi multimedia ..................................................................................................................... 1021. Formularele ...................................................................................................................................... 1022. Flash şi video ..................................................................................................................................... 10

10. Exemple şi exerciţii ........................................................................................................................... 1123. Exemple şi exerciţii ........................................................................................................................... 11

1 / 11

1. Introducere în Dreamweaver CC

1. Introducere

În cadrul acestei lecţii am rememorat principalele noțiuni despre limbajele HTML şi CSS, iar în continuarea cursului vom faceparalele între Dreamweaver și elementele HTML și CSS.

2. Noi funcţionalităţi în Dreamweaver CC

În această lecţie ne-am concentrat pe noile funcţionalităţi din Dreamweaver CC care ne pot accelera şi facilita munca.Printre acestea am menţionat panoul CSS Designer, widgets şi efectele Query UI care le-au înlocuit pe cele Spry, Fluid gridlayouts, fonturile Web, noile caracteristici HTML5 video şi audio, suport pentru noile elemente pentru formulare dinHTML5, conectarea cu instrumentele Edge şi sincronizarea setărilor Creative Cloud. Despre toate aceste detalii vom discutaîn continuare în curs, acesta a fost doar un rezumat al noutăţilor. Dacă nu v-aţi mai întâlnit cu instrumentul Dreamweaver puteţi sări peste această lecție. 

4. Fişierele şi structura unui website

Site-urile se creează în folderul local de pe calculator. După finalizare, transferăm întregul folder root pe serverul pe care seva afla site-ul. Există două tipuri de linkuri, relative şi absolute. Cele relative se folosesc pentru legăturile din cadrul site-ului,iar cele absolute pentru legăturile către alte documente şi pagini din afara site-ului.

3. Introducere în spațiul de lucru

În această lecţie am clarificat elementele de bază ale spațiului de lucru în Dreamweaver. Am definit principalele elemente şiam creat o bază pentru următoarele lecţii. 

Am explicat welcome screen/ecranul de întâmpinare şi opţiunile sale. Am denumit principalele părţi ale spaţiului de lucru înDreamweaver. Am făcut cunoștință cu document title bar, document toolbar şi cu modul în care putem folosi opţiuniledesign/code/split. De asemenea, am explicat application bar, dar şi workspace switcher. Am explicat modalităţile în careputem gestiona panourile, precum şi spațiul de lucru şi am menţionat 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 finalam văzut cum putem gestiona scurtăturile de pe tastatură.

2 / 11

2. Site-uri în Dreamweaver

5. Definirea şi gestionarea site-urilor

În această lecţie ne-am familiarizat cu principalele noţiuni legate de crearea proiectelor în Dreamweaver. Ţineţi minte căîntotdeauna prima dată trebuie să creăm site-ul local (proiect). Abia apoi începem crearea paginilor şi a altor elemente. Întimpul 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 setermină cu tag-ul <html>, care uneori este denumit şi tag-ul rădăcină – root. Apoi există două unităţi de bază aledocumentului şi anume <head>, respectiv antetul documentului şi <body>, în care se află întregul conţinut vizibil al paginii.Noul document se creează prin dialogul New Document, dar îl putem crea şi direct din ecranul de întâmpinare. DocumentType Declaration sau prescurtat Doctype, se introduce la începutul documentului HTML şi setează gramatica documentuluiHTML.

7. Proprietățile unei pagini

Pentru fiecare pagină separată HTML putem defini bazele setării prin dialogul Page Properties. Modificările pe care le facemaici se referă la pagina în cauză (nu influenţează alte pagini ale site-ului). Există câteva categorii care se află în parteadreaptă a dialogului. Dând clic pe ele, le deschidem setările. 

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, putemface asta în design view. Comenzile sunt asemănătoare cu cele din text editors. Când lucrăm cu textul în documenteleHTML, este foarte important ca textul să fie setat corect şi să nu aibă prea multe tag-uri şi atribute. Dacă copiem din Word şiinstrumente similare, trebuie curăţat codul. 

9. Listele

Listele în sine nu trebuie să arate aşa cum ne imaginăm noi, ci pot avea un aspect total diferit. Există trei tipuri de bază pecare le putem folosi în DW, respectiv în documentul HTML: liste ordonate (engl. ordered), neordonate (engl. unordered) şide definiţie (engl. definition). Listele pot avea mai multe nivele de elemente. În Dreamweaver-ul listei putem seta prinmeniul drop-down Format > List > Properties sau prin panoul Properties Inspector.

4 / 11

4. CSS şi Dreamweaver

10. Lucrul cu codul

Deși putem să facem cea mai mare parte a site-ului în Design View, trebuie să cunoaştem şi codul HTML și CSS. DW oferă omulțime de circumstanțe atenuante pentru lucrul cu codul, printre care şi codul Hitn. De asemenea, coding toolbar oferă omanipulare uşoară a view-ului. Comentariile le vom posta atunci când vrem să însemne ceva. Quick tag editor se poateutiliza în design view pentru a modifica rapid și ușor codul și pentru a-l adăuga în pagină.

11. Bazele CSS

Cascading Style Sheets (CSS) este astăzi unul dintre cele mai importante elemente ale site-urilor web moderne deoarecepermite stilizarea paginilor HTML şi separarea conţinutului de stilizare. Elementul de bază al limbajului CSS este regulacompusă din selector şi declaraţie (proprietate şi valoare). Cu ajutorul valorilor ID şi CLASS putem conecta elementele şiregulile lor CSS. CSS se poate configura şi în cadrul fişierului HTML, ca fişier separat sau direct pe tag. Valoarea CSS pentruanumite proprietăţi 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 CSSDesigner este format din patru unităţi (panouri) interdependente: Sources, @Media, Selectors şi Properties. Panoul Sourceseste folosit pentru a seta locația unde se află descrierile CSS; Selectors pentru a seta selectorii pentru descrieri, în timp ce înpanoul Properties se setează proprietățile în sine și valorile. Prin panoul CSS Designer se pot conecta și fișierele externe.

13. Lucrul cu panoul CSS Designer

Când vrem să introducem o anumită valoare, în funcție de tipul de câmp, panoul CSS Designer se comportă diferit.Proprietățile 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 fișier extern, le putem șterge dar și deconecta temporar.

6 / 11

6. CSS Layout

14. CSS Box Model

În această lecţie 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 lecţii, sunt prezentate aceste detalii depoziţionare prin exemple simple şi este acordată o atenţie sporită codului şi structurii în sine, pentru a le clarifica. În lecţiileurmătoare, în materialele video vom clarifica toate acestea şi vom vedea mai multe exemple prin interfaţa Dw.

15. Elementele div

Putem introduce elementele div în mai multe moduri, din meniul drop-down Insert > Div sau selectând din panoul/toolbarInsert opţiunea Div. Dialogul New CSS Rule poate fi folosit pentru a crea noi descrieri CSS şi dialogul CSS Rule definition ca oalternativă la panoul CSS Designer.

16. Layout-ul

Înainte de introducerea conţinutului trebuie să setăm pagina layout. Pentru layout, putem utiliza acum şi noi elementesemantice HTML5.

7 / 11

7. Stilizarea cu CSS

17. Imaginile

Există trei tipuri de imagini folosite astăzi pe web: JPG, GIF și PNG. Fiecare format are avantajele și dezavantajele sale.Putem adăuga imaginile prin meniurile drop-down, prin panoul files, prin panoul assets și așa mai departe. Panoul Assets seutilizează pentru o manipulare mai ușoară a materialelor pe care le folosim. Dreamweaver are o integrare excelentă cuinstrumentul Photoshop şi acceptă direct fișierele PSD.

18. Formatarea imaginilor

Imaginile pot fi formatate şi prin HTML și CSS, deşi, al doilea mod este cu mult mai convenabil și acesta ar trebui utilizat. Cudescrierile CSS putem influenţa imaginea și afişarea ei. Prin CSS putem plasa fundalul (background) imaginii, care în generalnu 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 până la pagină și fișiere,dar, de asemenea, şi până la name anchor, respectiv amplasarea pe aceeași pagină sau pe o alta. De asemenea, putemposta linkuri și până la adresele de email.

20. Tabelele

În loc să introduceți tabelul manual, proces care poate fi foarte obositor, Dw permite introducerea tabelului într-un modvizual simplu, folosind instrumente built-in/încorporate. Elementele tabelului se pot modifica ușor și putem corecta afișareaprin 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, fără a fi nevoie deintroducerea manuală a codului. De asemenea, acum sunt introduse şi elementele formularului care au apărut în limbajulHTML5. Formularele şi elementele se pot stiliza în descrierile CSS.

22. Flash şi video

Dreamweaver facilitează introducerea fișierelor multimedia, coordonează atributele care determină modul în care fișierelemedia vor fi afișate pe pagină și acolo unde este cazul, Dreamweaver oferă posibilitatea de a schimba modul în careutilizatorul interacționează cu aceste fișiere. Putem introduce animaţiile flash, fișiere video Flash, dar şi fişiere mai noiHTML5 video și audio. Trebuie să fim precauți în privința introducerii elementelor HTML5, deoarece acestea nu suntacceptate de către toate browserele de pe calculatoare. Pe de altă parte, pe dispozitivele mobile și altele similare, Flash nufuncţionează.

10 / 11

10. Exemple şi exerciţii

23. Exemple şi exerciţii

Powered by TCPDF (www.tcpdf.org)

11 / 11