curs webdesign
Despre Dreamweaver
Dreamweaver este un editor HTML care permite crearea şi administrarea de site-uri web. Printre avantajele Dreamweaver se numără: • • • • •
crearea de pagini web atât în mediu grafic cât şi cod HTML, CSS sau JavaScript; posibililitatea verificării link-uri din site; verificarea compatibilităţii site-ului pe mai multe browsere; upload-ul site-ului pe un server web; actualizarea/întreţinerea în timp optim a site-ului.
Prima dată când veţi lansa programul va apărea o fereastră care va permite alegerea spaţiului de lucru: primul este un spaţiu de lucru integrat, în care toate ferestrele şi panourile sunt băgate într-o fereastră de aplicaţie mai mare şi al doilea spaţiu de lucru în care fiecare aplicaţie se află în propria ferestră separat iar panourile nu sunt grupate într-o singură fereastră. Dacă mai târziu vă razgândiţi modificarea o veţi face din Edit -Preferances -General şi apăsarea butonului Change Workspace care va genera pagina de alegere a spaţiului de lucru. În partea de sus aveţi: Menu Bar – Meniul ce conţine comenzi pentru Dreamweaver. Multe opţiuni din meniu sunt şi în alte locaţii precum în meniul Windows, în panouri şi în tag inspector. Ca multe alte aplicaţii bara de meniu oferă acces către comenzile programului, precum File – Save, Edit – Undo, View- Zoom etc. Insert Bar – Conţine o serie de butoane ce permite inserarea diferitelor obiecte, precum text sau imagini. Există diferite Insert Bars pe care le puteţi alege, depinde de tipul de element pe care doriţi să îl inseraţi în pagina web. În loc de acest Tab puteţi folosi meniul Insert (din Meniu Bar) care conţine aceleaşi opţiuni. La mijlocul pozei şi programului Dreamweaver se află: Fereastra de lucru – spaţiu efectiv unde veţi lucra, modifica, aranja pagina web. Partea de jos: Properties Inspector – denumit şi Tag Inspector – afişează proprietăţile obiectului selectat. Pentru a ascunde fereastra temporar apăsaţi de săgeata de lângă Properties. Pentru a vizualiza din nou tag-ul nu rămâne decât să apăsaţi din nou pe respectiva săgeată sau apăsaţi CTRL+ F3. În partea dreaptă: Panoul sau Grupul de Panouri – conţine un set de ferestre grupate împreună. Pentru a vizualiza un panou (fereastra) nu trebuie decât să apăsaţi pe numele respectiv. Grupul de panouri permite acces catre Design, Code, Application, Tag, Files, Layers si History.
Modul de vizualizare a paginilor În Dreamweaver se pot edita paginile web în: • • •
Design View – în modul Design/Grafic – vizualizând direct modificările făcute; Code View – în codul HTML, pentru cei care cunosc limbajul; Code & Design View – modul mixt – care împarte fereastra de lucru în 2: cod şi design.
Meniul HELP pentru îmbunăţirea cunoştinţelor Dreamweaver !!!
1
curs webdesign Despre site-urile din Dreamweaver Un website este o înlănţuire de documente şi resurse cu atribute comune, design similar sau obiectiv comun. Dreamweaver este un editor de site-uri, dar şi un instrument de management, pe care îl puteţi folosi atât pentru a crea documente individuale, cât şi siteuri complete. În Dreamweaver, termenul “site” se referă la o locaţie de stocare a documentelor care aparţin website-ului. Un site în Dreamweaver furnizează o modalitate de a organiza şi gestiona toate documentele web, încărcarea site-ului pe un server, urmărirea şi întreţinerea link-urilor, gestionarea şi partajarea fişierelor.
Definirea unui site Pentru a beneficia de toate avantajele opţiunilor din Dreamweaver, mai întâi trebuie sa definim un site. Un site in Dreamweaver constă din 3 părţi, în funcţie de mediul de dezvoltare şi de tipul de site pe care îl creaţii. Acestea sunt: •
•
•
Directorul rădăcină local: Stochează fişierele la care lucraţi. Dreamweaver se referă la acest director ca local site. El se poate afla pe computerul dvs sau pe un server. Dacă lucraţi direct pe server, Dreamweaver uploadează (încarcă) fişierele pe server de fiecare dată când le salvaţi. Directorul separat (remote director): Stochează fişiere pentru testare, producţie, colaborare, etc. Dreamweaver se referă la acest director ca remote site, în panoul Files (F8). În mod uzual, directorul remote se află pe serverul ce găzduieşte siteul web. Împreună, directoarele local şi remote vă permit să transferaţi fisiere între hard disk-ul dvs şi serverul web, facilitând gestionarea fişierelor. Directorul de testare server: Este directorul în care Dreamweaver procesează paginile dinamice.
Nota: Pentru a defini un site in Dreamweaver, trebuie doar sa setaţi un director local. Pentru a dezvolta un site pe un server la distanţă (remote) sau pentru a transfera fişiere, trebuie ca mai intai sa completezi datele de conectare la serverul respectiv.Înţelegerea structurii directoarelor local şi remote Când vreţi să folosiţi Dreamweaver pentru a vă conecta la un director remote, trebuie să specificaţi directorul remote în categoria Remote Info din căsuţa de dialog Site Definition. Directorul remote pe care il precizaţi (care mai este denumit şi director gazdă sau host directory) ar trebui să corespundă cu directorul local rădăcină al site-ului dvs în Dreamweaver. Directoarele remote pot avea orice titlu, dar de obicei furnizorii de servicii de găzduire utilizeaza directoarele remote rădăcină ca public_html, pub_html sau ceva similar. Dacă sunteţi responsabil de propriul server şi îl puteţi numi cum doriţi, o idee bună ar fi ca directorul local rădăcină şi directorul remote să aibă acelaşi nume. În figura de mai jos puteţi vedea un director local rădăcină (în partea stângă) şi un director remote (în partea dreaptă). Directorul local rădăcină este legat de directorul remote de pe serverul web şi nu de sub-directoarele acestuia.
Nota: Exemplul de mai sus ilustreaza un director local radacina, si un director remote pe cel mai inalt nivel pe serverul web remote. Daca ai stocate un numar de site-uri pe computerul local, vei avea nevoie de un numar egal de directore remote. In acest caz, exemplul de mai sus nu se aplica si vei crea diferite directore remote in cadrul directorului public_html, iar apoi le vei lega de directoarele locale radacina corespunzatoare. Cand stabilesti pentru prima data o conexiune remote, directorul remote de pe serverul web este de obicei gol. Apoi, cand folosesti Dreamweaver pentru a incarca toate fisierele din directorul local pe server, directorul remote se populeaza cu toate fisierele tale web. Structura directorului remote si al radacinii directorului local ar trebui sa fie mereu aceeasi (cu alte cuvinte, trebuie sa existe mereu o corespondenta 1 la 1 intre fisierele si sub-directoarele locale si cele de pe server). Daca structura din directorul remote nu se potriveste cu cea a directorului radacina local, Dreamweaver incarca fisiere in locul gresit, unde s-ar putea sa nu fie vizibile pentru vizitatorii site-ului. In plus, caile pentru imagini si link-uri pot fi alterate usor cand structurile de director si fisierele nu sunt in
2
curs webdesign
Lucrul în fereastra document - Code, Design sau Split În acest tutorial veţi putea citi despre diferitele modalităţi în care puteţi edita un document în Adobe Dreamweaver, despre ferestre cascadate sau intercalate şi despre redimensionarea ferestrei document.
Schimbarea modurilor de vizualizare în fereastra document Adobe Dreamweaver permite vizualizarea documentelor în mai multe moduri de afişare: Code (sursa documentului), Design (ceea ce afişează browserul) sau Split (cod şi design). Pentru a activa modul Code, mergeţi la View -> Code sau daţi click pe butonul Show Code View din toolbar-ul documentului:
Pentru a activa modul Design, mergeţi la View -> Design sau daţi click pe butonul Show Design View din toolbar-ul documentului:
Pentru a activa modul Split, selectaţi View -> Code and Design sau daţi click pe butonul Split (Show Code and Design View) din toolbar-ul documentului:
Trecerea succesivă între modul Code şi Design se face apăsând tastele Ctrl+ " ' ". Dacă ne aflăm în modul Split şi sunt afişate pe ecran ambele vizualizări, atunci această combinaţie de taste mută cursorul între cele două ferestre.
Ferestre cascadate sau intercalate Daca aveţi multe documente deschise în acelasi timp, puteţi să le aranjaţi în cascadă sau sa le intercalaţi. Alegeţi una dintre cele două opţiuni: Window -> Tile Horizontally sau Window -> Tile Vertically pentru a afişa toate ferestrele în acelaşi timp sau Window -> Cascade pentru a le afişa în cascadă (una deasupra celeilalte).
Redimensionarea ferestrei document Bara de stare afişează dimensiunile curente ale ferestrei (în pixeli). Pentru a crea o pagină care sa arate cât mai bine la o anumită rezoluţie, puteţi aduce fereastra la orice dimensiune predefinită sau puteţi defini mărimi noi. Pentru a utiliza o mărime predefinită a ferestrei, selectaţi una dintre dimensiunile din meniul pop-up Window Size aflat în partea de jos a ferestrei. Notă(Numai pentru Windows): Puteţi maximiza (mări) fereastra document astfel încât să ocupe întreaga suprafaţă a documentului din fereastra integrată. Nu puteţi redimensiona fereastra când este maximizată.
Dimensiunea reflectă mărimea ferestrei de browser, fără margini; dimensiunea monitorului este trecută în paranteze. De exemplu,
3
curs webdesign veţi utiliza marimea 536 x 196 (640 x 480, Default) dacă vizitatorii site-ului dvs vor folosi cel mai probabil Microsoft Internet Explorer sau Netscape Navigator pe un monitor de 640 x 480. Pentru o dimensionare mai puţin precisă, folosiţi metodele standard ale sistemului dvs de operare pentru redimensionarea ferestrelor (de exemplu tragând colţul dreapta-jos al ferestrei).
Schimbarea valorilor listate în meniul pop-up Window Size • • • •
Selectaţi din meniu Edit Sizes Click pe oricare din valorile de lăţime (width) sau înălţime (height) din lista Window Sizes şi tastaţi noua valoare. Pentru ca fereastra sa ajusteze numai lăţimea (width) specifică, lăsând înălţimea nemodificată, selectaţi şi stergeţi valoarea câmpului înălţime (height). Click pe Description şi adăugaţi un text descriptiv pentru marimea pe care aţi modificat-o.
Adăugarea unei noi dimensiuni în meniul pop-up Window Size • • • •
Selectaţi din meniu Edit Sizes Click pe spaţiul gol de sub ultima valoare din coloana Width Adăugaţi valori pentru lăţime şi înălţime (Width şi Height). Pentru a seta numai una din valori, lăsaţi gol celălalt câmp. Click pe Description şi adăugaţi un text descriptiv pentru mărimea pe care aţi creat-o. De exemplu, puteţi scrie "SVGA" sau "average PC" lângă elementul de intrare pentru un monitor de 800x600px şi "17-in. Mac" lângă elementul de intrare pentru un monitor 832x624px. Majoritatea monitoarelor pot fi ajustate la o varietate de dimensiuni.
Dimensiunea ferestrei şi viteza de conectare Pentru a modifica dimensiunea ferestrei şi viteza de conectare: • • •
Selectaţi Edit -> Preferences (Windows) sau Dreamweaver -> Preferences (Macintosh). Selectaţi tab-ul Status Bar din lista Category aflată în partea stângă. Setaţi oricare din următoarele opţiuni: Mărimea ferestrei (Window Sizes) : - modifică dimensiunile ferestrei din meniul pop-up al status bar. Viteza conexiunii (Connection Speed): - determină viteza conexiunii (în kb/sec) folosită pentru a calcula rata de download a unei pagini.
Rata de download pentru pagină este afişată în status bar. Când o imagine este selectată în fereastra document, rata de descărcare a imaginii este afişată în Property Inspector.
Rapoarte în Dreamweaver Adobe Dreamweaver oferă o serie de rapoarte pe care le puteţi utiliza pentru a vă verifica site-ul. Acestea pot fi accesate din fereastra Results (F7): • • • • •
•
Search - puteţi căuta tag-uri, atribute, text în cadrul tag-urilor. Validation - puteţi verifica erorile de sintaxă ale codului. Target Browser Check - puteţi testa codul HTML din documentele dvs pentru a vedea dacă unele tag-uri şi atribute nu au suport pe anumite browsere. Link Checker - puteţi găsi link-uri deteriorate, externe, "orfane". Site Reports - puteţi îmbunătăţi atributele de test HTML şi workflow-ul din site-ul dvs. Rapoartele Workflow includ note de design, "checked out by", modificări recente; rapoartele HTML includ taguri de font imbricate, accesibilitate, lipsa textului "alt", taguri imbricate "alt" redundante, tag-uri vide ce pot fi şterse, documente fără titlu. FTP Log - vă permite sa vizualizaţi toată activitatea de transfer FTP.
4
curs webdesign •
Server Debug - vă permite sa vizualizaţi informaţia pentru a depana o aplicaţie Macromedia ColdFusion de la Adobe.
Tipurile de fişiere în Dreamweaver Adobe Dreamweaver permite lucrul cu o gamă largă de fişiere, cum ar fi pagini html, css, imagini jpg sau gif, xml, pagini dinamice php sau asp. Dintre acestea, cel mai întâlnit este formatul html, responsabil pentru afişarea unei pagini internet într-un browser. Fişierele HTML (Hypertext Markup Language) conţin un limbaj bazat pe tag-uri, responsabil pentru afişarea unei pagini internet într-un browser. Puteţi salva fişierele HTML fie cu extensia .html sau .htm. La salvare Dreamweaver foloseşte implicit extensia .html. În afară de acestea, tipurile cele mai întâlnite de fişiere sunt: CSS (Cascading Style Sheet) - aceste fişiere se salvează cu extensia . css; sunt folosite pentru a formata conţinutul HTML şi pentru a controla poziţionarea diferitelor elemente în pagină. GIF (Graphics Interchange Format) - extensia este .gif; GIF-ul este un format grafic web des utilizat pentru desene, logo-uri, grafică cu zone transparente, animaţii; fişierele .gif conţin cel mult 256 de culori. JPEG (Joint Photographic Experts Group) - extensia este .jpg şi sunt de obicei fotografii sau imaginii cu o coloristică foarte variată; formatul JPEG este recomandat pentru fotografii digitale sau scanate, imagini cu textură, cu tranziţie gradată a culorilor şi orice imagine care necesită pentru redare mai mult de 256 de culori. XML (Extensible Markup Language) - extensia este .xml; fisierele contin date intr-o forma bruta care pot fi formatate folosind XSL. XSL (Extensible Stylesheet Language) - extensia este .xsl sau .xslt; sunt folosite pentru a formata datele XML pe care vreţi să le afişaţi pe pagina web. CFML (ColdFusion Markup Language) - extensia este .cfm; sunt fişiere utilizate pentru a procesa paginile dinamice. ASPX - fisierele ASP.NET au extensia .aspx şi sunt folosite tot pentru procesarea paginilor dinamice. PHP (Hypertext Preprocessor ) - extensia este .php şi sunt folosite pentru procesarea paginilor dinamice.
TEMĂ
Creaţi un site-uleţ din 3 pagini html în Dreamweaver folosind numai text şi imagini şi directorul dvs 5
curs webdesign local.
6