Documente Academic
Documente Profesional
Documente Cultură
Dreamweaver - Partea 1
Dreamweaver - Partea 1
Pentru realizarea unui site web este nevoie de un editor HTML. Exist dou tipuri de editoare HTML: editoare de tipul WYSIWYG (What You See Is What You Get - ceea ce vedei este ceea ce obinei) editoare n cod HTML Editoarele WYSIWYG sunt uor de utilizat chiar i pentru nceptori, realizarea unei pagini web simple neridicnd nici un fel de probleme. Nu trebuie dect s introducei text, cteva imagini, legturi i pagina web este gata. Dezavantajele editoarelor WYSIWIG constau n faptul c nu permit realizarea unei programri HTML avansate iar fiierele rezultate sunt mai mari. Exemple de editoare WYSIWYG: Microsoft FrontPage, Netscape Composer, etc. Editoarele n cod HTML permit editarea unei pagini web n mod profesionist. La fel ca editoarele WYSIWIG i acestea v permit s vedei modul n care va arta pagina web. Exemple de editoare HTML: HotDog, HTML Assistant Pro, etc. Macromedia Dreamweaver MX 2004 este un program hibrid care mbin cele dou tipuri de editoare HTML, utilizatorul putnd alege modul de proiectare: cu ajutorul interfeei grafice sau prin scrierea codului HTML. De asemenea, Dreamweaver v permite s realizai att creerea i formatarea paginilor web ct i organizarea i administrarea unui site existent. Dreamweaver permite o organizare facil a fiierelor din site, fiiere care ulterior vor fi transferate pe un server care va gzdui siteul. Siteurile web sunt alctuite din pagini web. Fiecare pagin este un fiier HTML care conine text formatat i legturi ctre alte pagini. O pagin web poate conine i imagini sau elemente media, cum ar fi sunete sau secvene video, cu meniunea c toate aceste obiecte sunt fiiere separate i ele doar par a fi parte integrant a paginii respective. Textul este principalul element de coninut al unui site. Acesta poate fi scris direct n Dreamweaver sau poate fi importat dintr-un editor de text cum ar fi Microsoft Word. Elementele de grafic care se introduc n site trebuie s fie n format GIF sau JPEG, formate obinute cu ajutorul unui program de grafic, cum ar fi Adobe Photoshop. Fiierele de sunet sau fiierele video pot fi integrate complet n site sau putei ntroduce link-uri ctre ele, pentru a fi deschise ntr-o fereastr de browser separat. Realizarea unui site web presupune efectuarea a trei pai: adunarea fiierelor de care avei nevoie ntr-un director realizarea unui site local ncrcarea coninutului site-ului pe un server -1-
Interfaa Dreamweaver
Elementele ce apar la lansarea programului Dreamweaver sunt prezentate n figura de mai jos:
Panoul Insert
Fereasta Site
Panoul Properties Fereastra Document este locul n care proiectai coninutul paginii. Dac avei deschise mai multe pagini, n partea superioar a acestei ferestre vor fi tab-uri care v permit s comutai ntre ele, cum se vede din figura de mai jos:
Tot din partea superioar a fereastrei Document putei alege editorul HTML n care dorii s lucrai: editorul de tip WYSIWYG prin selectarea butonului Design, editorul n cod HTML, prin selectarea butonului Code, sau amndou editoare cu Split. Panoul Insert conine pictograme de comand rapid care v permit s introducei n pagin obiectele dorite. Panoul Properties se modific n funcie de obiectul selectat i v permite modificarea atributelor acestuia. Panourile ancorate permit realizarea operaiilor dorite fr a mai fi nevoie de a accesa meniul principal i a cuta n submeniuri. Acestea pot fi nchise prin selectarea Close Panel Group din partea dreapt sus a fiecrui panou. Fereastra Site este una din cele mai importante, acesta fiind locul unde creai, denumii, organizai i tergei fiierele dintr-un site. Tot din aceast fereastr putei deschide pentru editare n fereastra Document fiierele HTML.
-2-
afiate ambele editoare, se poate observa c formatarea unui text nseamn asocierea de etichete HTML textului respectiv. Dreamweaver poate fi utilizat pentru a integra imagini, a le redimensiona i a le muta n pagin. Este de preferat utilizarea formatelor GIF, care permit transparena culorii folosite pentru sigle, pictograme de navigare i JPEG, care au un numr mare de culori folosite de obicei pentru fotografii. Pentru a insera o imagine se d clic pe pictograma corespunztoare din panoul Insert. La selectarea imaginii panoul Properties va afia caracteristicile acesteia i putei astfel face modificrile dorite. Putei denumi imaginea, cu meniunea c numele imaginii nu este acelai cu numele fiierului, ci este numele sub care apare dac se alege din browser Save Picture As. De asemenea, putei aduga i text alternativ, care va fi afiat n browser atunci cnd un utilizator trece cu mouse-ul peste imagine.
Utilizarea tabelelor
Tabelele sunt folosite pentru a organiza textul i imaginile, ele reprezentnd elementul de baz pentru controlul aezrii n pagin. Pentru a introduce un tabel se poate accesa din meniul principal Insert/Table. Se deschide astfel o fereastr care permite definirea acestuia. Cell padding reprezint spaiul dintre coninutul unei celule i marginea sa, iar Cell spacing reprezint spaiul dintre celule. Odat introdus un tabel i putei schimba caracteristicile din panoul Properties. Putei schimba grosimea i culoarea chenarului, putei defini o culoare sau o imagine de fundal. Tabelul mai poate fi utilizat i pentru definirea limii unei pagini, prin introducerea ntregului coninut al paginii respective ntr-ul tabel cu o singur celul, fr chenare i centrat, care s aibe limea identic cu cea dorit pentru pagin. Fiecare celul din cadrul tabelului poate fi formatat individual. Dac o celul conine text, n panoul Properties va aprea n partea superioar elementele pentru formatarea textului i n partea inferioar cele pentru formatarea celulei.
-4-
Exerciiul 1 1. Creai un director. Creai un site n acel director. Creai dou pagini n site: index.htm i tabel.htm 2. Utiliznd acest document proiectai pagina de start pentru a arta identic cu cea din figura de mai jos (fr a utiliza tabele):
Imaginea o denumii poza.jpg Fixai dimensiunea imaginii la 200 x 150 Adugai textul interfata Vizualizai pagina n browser pentru rezoluii diferite ale monitorului 5. Proiectai pagina tabel.htm pentru a arta identic cu imaginea de mai jos (utiliznd tabele):
6. Selectai pagina index.htm i utilizai un tabel pentru a definii limea paginii la 600 pixeli. i n acest caz vizualizai pagina n browser pentru rezoluii diferite ale monitorului. -5-