Dreamweaver MX

DREAMWEAVER
CUPRINS
Conversaia 1. Creai pagini Web cu Dreamweaver MX................. 3
Dreamweaver Dreamweaver Dreamweaver Dreamweaver Dreamweaver MX Dreamweaver, un editor de tip WYSIWYG . 3 MX Stabilii obiectivele site-ului dumneavoastr . 4 MX Principalele componente Dreamweaver .................. 5 4 workspace, MX workspace Spaiul de lucru .................. 8 MX Tem .. 27
Conversaia 2. Creai un site Web cu Dreamweaver MX .............. 29
Dreamweaver MX Creai un site nou ... 29 Dreamweaver MX workspace, 4 workspace Definii local site-ul dumneavoastr .... 30 Dreamweaver MX Tem .. 46
Conversaia 3. Introducei i formatai caracterele cu Dreamweaver MX .................................................... 47
Dreamweaver 4 workspace, MX workspace Introducei text .. 47 Dreamweaver 4 workspace, MX workspace Inserai caractere speciale.. 63 Dreamweaver 4 workspace, MX workspace Inseraii caractere proprii (X)HTML ........ 70 Dreamweaver 4 workspace, MX workspace Aplicai unui text formate fizice i logice ............................ 76 Dreamweaver MX workspace Inserai abrevieri i acronime ............. 93 Dreamweaver 4 workspace, MX workspace Scriei un text cu exponent sau cu indice .. 97 Dreamweaver 4 workspace, MX workspace Definii tipul de font . 105 Dreamweaver 4 workspace, MX workspace Definii dimensiunea fontului .. 110 Dreamweaver 4 workspace, MX workspace Definii culorile ... 115 Dreamweaver MX workspace Creai propriile stiluri HTML ... 128 Dreamweaver MX Tem .. 135
Conversaia 4. Creai i formatai paragrafele cu Dreamweaver MX .................................................... 137
Dreamweaver 4 workspace, MX workspace Creai un paragraf . 137 Dreamweaver 4 workspace, MX workspace Schimbai alinierea unui paragraf ................... 142
Dreamweaver 4 workspace, MX workspace Trecei la linia urmtoare ntr-un paragraf ... 152 Dreamweaver 4 workspace, MX workspace Indentai un paragraf .. 156 Dreamweaver 4 workspace, MX workspace Inserai un text preformatat ......... 161 Dreamweaver 4 workspace, MX workspace Creai un titlu ................ 166 Dreamweaver 4 workspace, MX workspace Creai liste cu simboluri (simple), numerotate (ordonate) i de definiii ..... 173 Dreamweaver MX Tem .. 202
Conversaia 5. Inserai i personalizai o linie orizontal cu Dreamweaver MX .................................................... 203

Dreamweaver 4 workspace, MX workspace Inserai o linie orizontal...... 203 Dreamweaver MX workspace Colorai o linie orizontal ...... 208 Dreamweaver 4 workspace Definii lungimea i nlimea unei linii orizontale . 209 Dreamweaver 4 workspace Aliniai o linie orizontal ..... 212 Dreamweaver MX workspace Personalizai o linie orizontal .. 215 Dreamweaver MX Tem ............... 217
Conversaia 6. Creai i utilizai foi de stiluri n cascad cu Dreamweaver MX .................................................... 219

Dreamweaver MX Tipuri de stiluri CSS folosite n Dreamweaver .. 219 Dreamweaver 4 workspace, MX workspace Creai stiluri CSS . 220 Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu opiunea Make Custom Style (class) .... 224 Dreamweaver 4 workspace, MX workspace Aplicai un stil CSS (o clas) unui paragraf .... 233 Dreamweaver 4 workspace, MX workspace Modificai un stil CSS (o clas) . 237 Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu opiunea Redefine HTML Tag i aplicai-l unui text .. 241 Dreamweaver 4 workspace, MX workspace Modificai link-urile cu selectorii CSS . 248 Dreamweaver 4 workspace, MX workspace Creai i aplicai o foaie de stiluri extern . 256 Dreamweaver MX Tem .. 272
Conversaia 7. Inserai imagini cu Dreamweaver MX ................... 273
Dreamweaver 4 workspace, MX workspace Inserai o imagine . 274 Dreamweaver 4 workspace, MX workspace Aliniai orizontal o imagine. 286 Dreamweaver 4 workspace, MX workspace Aplicai o bordur unei imagini .. 289
Dreamweaver 4 workspace, MX workspace Definii un text de nlocuire (substituie) pentru o imagine .... 292 Dreamweaver 4 workspace, MX workspace Aliniai vertical o imagine n raport cu un text ....... 295 Dreamweaver MX workspace Inserai un spaiu rezervat pentru o imagine n construcie .... 302 Dreamweaver MX workspace Plasai text n jurul unei imagini .. 304 Dreamweaver 4 workspace, MX workspace Adugai mai multe spaii n jurul unei imagini . 307 Dreamweaver 4 workspace, MX workspace Aplicai o imagine de background .............. 309 Dreamweaver 4 workspace, MX workspace Convertii o imagine n legtur . 315 Dreamweaver 4 workspace, MX workspace Creai o imagine cu zone reactive ............................................................................. 321 Dreamweaver MX Tem .. 327
Conversaia 8. Creai legturi cu Dreamweaver MX ...................... 329

Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext ctre o alt pagin Web .. 329 Dreamweaver 4 workspace, MX workspace Creai legturi n aceeai pagin Web . 336 Dreamweaver 4 workspace, MX workspace Creai o legtur extern ctre un site Web, avnd ca suport o imagine ........................ 353 Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext extern ctre un site Web .. 359 Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext extern ctre o adres e-mail . 364 Dreamweaver 4 workspace, MX workspace Modificai culoarea legturilor hipertext ... 372 Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr . 377 Dreamweaver MX Tem ............... 381
Conversaia 9. Creai tabele cu Dreamweaver MX ........................ 383
Dreamweaver 4 workspace, MX workspace Creai un tabel .............. 384 Dreamweaver 4 workspace, MX workspace Aliniai un tabel ............. 393 Dreamweaver 4 workspace, MX workspace Atribuii un titlu tabelului .. 398 Dreamweaver 4 workspace, MX workspace Aplicai o bordur tabelului... 408 Dreamweaver 4 workspace, MX workspace Aliniai orizontal datele unui tabel ................... 411 Dreamweaver 4 workspace, MX workspace Aliniai vertical datele unui tabel. Aplicaii 415
Dreamweaver 4 workspace, MX workspace Modificai spaiul dintre celulele unui tabel .. 419 Dreamweaver 4 workspace, MX workspace Modificai dimensiunile liniilor unui tabel .. 422 Dreamweaver 4 workspace, MX workspace Modificai marginile interioare ale celulelor unui tabel ..... 429 Dreamweaver 4 workspace, MX workspace Extindei o celul pe mai multe coloane sau linii ............... 432 Dreamweaver 4 workspace, MX workspace Aplicai o culoare elementelor unui tabel .......... 442 Dreamweaver 4 workspace, MX workspace Aplicai o imagine de background unui tabel sau unei celule a tabelului ... 444 Dreamweaver 4 workspace, MX workspace Utilizai un tabel ca un instrument de punere n pagin .... 449 Dreamweaver 4 workspace, MX workspace Formatai un tabel utiliznd modele predefinite ............................ 452 Dreamweaver 4 workspace, MX workspace Creai un tabel n modul Layout View ...................... 466 Dreamweaver MX Tem ............. 476
Conversaia 10. Creai formulare cu Dreamweaver MX ................ 477
Dreamweaver 4 workspace, MX workspace Creai un formular.. 477 Dreamweaver 4 workspace, MX workspace Creai un buton pentru expedierea (submit) unui formular ... 485 Dreamweaver 4 workspace, MX workspace Creai un buton pentru resetarea (reset) unui formular ..... 491 Dreamweaver 4 workspace, MX workspace Inserai o zon simpl de text .... 495 Dreamweaver 4 workspace, MX workspace Inserai o zon de text multilinie .. 503 Dreamweaver 4 workspace, MX workspace Creai o caset de validare 508 Dreamweaver 4 workspace, MX workspace Creai un buton radio.. 516 Dreamweaver 4 workspace, MX workspace Creai un meniu derulant .. 526 Dreamweaver MX Tem .. 542
Conversaia 11. Inserai obiecte cu Dreamweaver MX ................. 543

Dreamweaver 4 workspace, MX workspace Inserai animaii Flash i Shockwave ............... 543 Dreamweaver 4 workspace, MX workspace Inserai un text n format Flash .. 550 Dreamweaver 4 workspace, MX workspace Creai un buton de navigare Flash .. 555 Dreamweaver 4 workspace, MX workspace Inserai un obiect Fireworks i data zilei .. 560
Dreamweaver 4 workspace, MX workspace Inserai un applet Java 567 Dreamweaver 4 workspace, MX workspace Inserai obiecte care necesit un plugin 572 Dreamweaver MX Tem ............... 583
Conversaia 12. Creai cadre cu Dreamweaver MX ....................... 585
Dreamweaver MX Apreciai cadrele Dreamweaver ..... 585 Dreamweaver 4 workspace, MX workspace Creai cadre care se afieaz n coloane . 587 Dreamweaver 4 workspace, MX workspace Inserai o pagin (X)HTML ntr-un cadru ....... 595 Dreamweaver 4 workspace , MX workspace Creai cadre care se afieaz n linii .. 601 Dreamweaver 4 workspace, MX workspace Salvai setul de cadre 605 Dreamweaver 4 workspace, MX workspace Numii un cadru . 608 Dreamweaver 4 workspace , MX workspace Creai o legtur (link) ctre un cadru .......... 612 Dreamweaver 4 workspace , MX workspace Formatai bordurile cadrelor ... 617 Dreamweaver 4 workspace , MX workspace Controlai prezena sau absena barelor de defilare ale cadrelor ......... 620 Dreamweaver MX Tem .. 627
Conversaia 13. Creai straturi cu Dreamweaver MX .................... 629
Dreamweaver 4 workspace, MX workspace Creai un strat (layer).. 629 Dreamweaver 4 workspace, MX workspace Modificai dimensiunile i poziia unui strat. Aplicaii ..... 638 Dreamweaver 4 workspace, MX workspace Modificai vizibilitatea i ordinea de suprapunere a straturilor. Aplicaii . 648 Dreamweaver 4 workspace, MX workspace Controlai coninutul unui strat 656 Dreamweaver 4 workspace, MX workspace Creai straturi imbricate (nested) ... 662 Dreamweaver MX Tem ....... 669
Conversaia 14. Creai biblioteci cu Dreamweaver MX ................. 671
Dreamweaver MX Bibliotecile de obiecte ... 671 Dreamweaver 4 workspace, MX workspace Creai un element de bibliotec . 675 Dreamweaver 4 workspace, MX workspace Inserai un element de bibliotec . 682 Dreamweaver 4 workspace, MX workspace Modificai un element de bibliotec. Aplicaii .. 688 Dreamweaver 4 workspace, MX workspace Creai un model de pagin. 695
Dreamweaver 4 workspace, MX workspace Definii regiunile editabile ale unui model. Aplicaii .......................... 703 Dreamweaver MX workspace Utilizai regiunile facultative ale unui model ....................... 715 Dreamweaver MX workspace Definii regiunile repetabile ale unui model. Aplicaii . 724 Dreamweaver 4 workspace, MX workspace Exportai structuri de date n format XML 732 Dreamweaver MX Tem ....... 739
Conversaia 15.Creai comportamente cu Dreamweaver MX ....... 741

Dreamweaver MX workspace - Comportamente Dreamweaver ............ 741 Dreamweaver 4 workspace, MX workspace Creai comportamentul Open Browser Window .... 745 Dreamweaver 4 workspace, MX workspace Creai comportamentul Swap Image ..... 752 Dreamweaver 4 workspace, MX workspace Creai comportamentul Set Text of Status Bar. Aplicaie .... 759 Dreamweaver 4 workspace, MX workspace Creai comportamentul Validate Form. Aplicaii . 766 Dreamweaver 4 workspace, MX workspace Creai comportamentul Set Text of Layer. Aplicaii .... 772 Dreamweaver 4 workspace, MX workspace Creai comportamentul Set Text of Frame 778 Dreamweaver MX Tem ....... 785
Conversaia 16. Creai scenarii cu Dreamweaver MX ................... 787
Dreamweaver MX workspace Creai un scenariu ........ 787 Dreamweaver MX workspace Creai o animaie simpl .. 790 Dreamweaver MX workspace Creai o animaie curb. Aplicaie ............. 795 Dreamweaver MX workspace Creai o animaie complex. Aplicaii 798 Dreamweaver MX workspace Declanai sau oprii un scenariu cu ajutorul unui comportament 804 Dreamweaver MX Tem .. 806
Bibliografie ....................................................................................... 807
Conversaia 1
Creai pagini Web cu Dreamweaver MX

n aceast conversaie:
Dreamweaver MX Dreamweaver, un editor de tip WYSIWYG Dreamweaver MX Stabilii obiectivele site-ului dumneavoastr Dreamweaver MX Principalele componente Dreamweaver Dreamweaver 4 workspace, MX workspace Spaiul de lucru Dreamweaver MX Tem
Dreamweaver MX
Dreamweaver, un editor de tip WYSIWYG
Acum, dup ce ai creat mai multe documente (X)HTML i dup ce ai neles bine principiile de baz (X)HTML putei trece la utilizarea unui editor de tip WYSIWYG (What You See Is What You Get) pentru crearea paginilor Web. Sunt civa ani de cnd editoarele de tip WYSIWYG au inundat piaa dar din pcate numai cteva au rezistat n timp. Macromedia Dreamweaver este unul dintre acestea, la ora actual fiind cel mai performant soft pentru crearea site-urilor Web. S m explic.
4
Dreamweaver genereaz cod (X)HTML foarte apropiat de standardul impus de W3C, este complet i la zi cu noile tehnologii Internet. n plus, Dreamweaver poate genera i cod D-HTML; recunoate foile de stiluri CSS1 i CSS-P. Macromedia Dreamweaver MX (ultima versiune, dup Dreamweaver 4) integreaz toate funciile necesare crerii site-urilor dinamice cu ajutorul tehnologiilor: ASP, ASP.net, ColdFusion Markup Language (CFML), JSP sau PHP.
Remarci: Dreamweaver dispune de un editor HTML puternic i de o interfa WYSIWYG tot att de puternic. Dreamweaver este respectuos! El nu altereaz codul dumneavoastr HTML, ceea ce i-a atras popularitatea. Dreamweaver a reuit acolo unde alii au dat gre! Funciile de editare vizual Dreamweaver permit crearea rapid a paginilor Web fr a scrie nici-o linie de cod HTML (bucuria de moment a debutanilor care nu au cunotine HTML!). Dac dorii s facei apel la codificarea manual (vor exista astfel de situaii!), Dreamweaver v pune la dispoziie, dup caz numeroase instrumente. Dac ai utilizat alte aplicaii pentru crearea site-urilor Web FrontPage, de exemplu suntei liber s trecei la Dreamweaver pentru a dezvolta site-ul dumneavoastr. Dreamweaver permite vizualizarea paginilor Web n diverse navigatoare, pe diferite platforme, dar importul de fiiere create cu alte programe poate fi o operaie destul de pretenioas. Dreamweaver a primit numeroase distincii internaionale fiind de departe numrul 1 n top-ul aplicaiilor Web.
Dreamweaver MX
Stabilii obiectivele site-ului dumneavoastr
nainte de a v lansa n construcia site-ului dumneavoastr, ncercai s rspundei la ct mai multe din ntrebrile listate mai jos. La cteva dintre ele putei rspunde pe loc; pentru celelalte vei gsi rspunsul puin mai trziu. Succes!
Care sunt obiectivele site-ului dumneavoastr?
5
Cine sunt vizitatorii site-ului dumneavoastr? Cine va lucra pe site-ul dumneavoastr? Cte persoane cu sarcini precise n dezvoltarea i ntreinerea site-ului trebuie s coordonai? Ce proceduri vei utiliza pentru colectarea textului i a imaginilor ce aparin site-ului dumneavoastr? Care este modul de organizare al fiierelor site-ului dumneavoastr? Ce fiiere multimedia Flash, real Audio va conine site-ul dumneavoastr? Care sunt funciile interactive pe care dorii s le conin site-ul dumneavoastr? Care sunt aplicaiile de care avei nevoie pentru a obine funcii particulare (de exemplu Macromedia Flash pentru animaii vectoriale)? Care este sistemul de navigare ce se adapteaz cel mai bine site-ului dumneavoastr? Cum vei administra extinderile ulterioare ale site-ului dumneavoastr?
Dreamweaver MX
Principalele componente Dreamweaver
La prima privire, Dreamweaver poate prea descurajant! Nu se poate spune c totul vorbete de la sine! Funciile se ascund n panouri, n bare de instrumente i n cutii de dialog. A crea o pagin Web n Dreamweaver este un joc de copii! V vei convinge c nu exagerez cu nimic! S trecem la treab! Deschidei Dreamweaver MX (via Start afieaz (figura 1.1). Programs Macromedia
Macromedia Dreamweaver MX) i analizai caseta de dialog care se
Figura 1.1
Sub Windows, Dreamweaver MX v propune dou prezentri: un spaiu de lucru integrat ntr-o singur fereastr care conine toate elementele (Dreamweaver MX Workspace); un spaiu de lucru flotant care seamn cu cel de la versiunea 4 Dreamweaver (Dreamweaver 4 Workspace). Atunci cnd lansai Dreamweaver pentru prima dat va trebui s selectai una din opiunile urmtoare: Dreamweaver MX Workspace spaiu de lucru integrat care utilizeaz interfaa MDI (Multiple Document Interface) n care toate ferestrele documentului i toate panourile sunt reunite ntr-o fereastr mare a aplicaiei, grupurile de panouri fiind ancorate n dreapta. Aceasta este prezentarea recomandat majoritii utilizatorilor. Dreamweaver MX Workspace, Home Site/Coder-Style acelai spaiu de lucru integrat, dar grupurile de panouri sunt ancorate
7
n stnga, ntr-o prezentarea similar cu aceea utilizat de Macromedia HomeSite i Macromedia ColdFusion Studio. Ferestrele documentului se afieaz n mod Code HTML. Pentru a alege aceast prezentare, selectai opiunea Dreamweaver MX Workspace i apoi selectai opiunea Home Site/Coder Style. Dreamweaver 4 Workspace spaiul de lucru utilizat n Dreamweaver 4, unde fiecare document se afieaz ntr-o fereastr flotant individual. Grupurile de panouri sunt ancorate mpreun, dar ele nu sunt ancorate n aceeai fereastr a aplicaiei. Aceast prezentare este recomandat numai utilizatorilor Dreamweaver 4 care prefer conservarea unui spaiu de lucru care le este familiar.
Remarc. Dac dorii s schimbai ulterior spaiul de lucru, executai clic pe: Edit Preferences categoria General Change Workspace.
Evident, spaiul de lucru este locul n care dumneavoastr elaborai paginile Web. El const dintr-o fereastr principal care afieaz pagina Web i o serie de panouri (flotante) i de ferestre care v procur toate instrumentele necesare activitii de creare pagini Web. Spaiul de lucru Dreamweaver are n structura sa patru componente de baz: fereastra documentului; panourile flotante; bara de meniuri; bara de stare.
Remarc. n cadrul acestei lucrri, vom prezenta Dreamweaver MX (sub Windows), dup cum urmeaz: Dreamweaver 4 workspace. Dreamweaver MX workspace.
Dreamweaver 4
workspace
Spaiul de lucru
Fereastra documentului
n caseta de dialog Workspace Setup (figura 1.2) selectai opiunea Dreamweaver 4 Workspace i n continuare executai clic pe butonul OK (figura 1.2).
Figura 1.2
Pe
ecranul
monitorului
dumneavoastr
se
afieaz
fereastra
documentului,
panourile flotante (Insert, inspectorul de proprieti,
Launcher), Panel Group, bara de meniuri, bara de stare (figura 1.3). Fereastra documentului (o pagin alb al crei cod HTML este rudimentar) este ncrcat n spaiul de lucru Dreamweaver 4. Aici este locul n care introducei text, imagini i elemente care se afieaz simultan n browser-ele Web ale vizitatorilor dumneavoastr.
Figura 1.3
Remarc. Dreamweaver include opiuni care permit crearea paginilor Web n funcie de navigatoarele de care dispunei.
Panourile flotante
Panourile flotante Dreamweaver 4 workspace ofer un acces rapid la cele mai importante funcii Dreamweaver. Cele trei panouri (Insert, Properties, Launcher) sunt elemente eseniale ale interfeei Preferences Dreamweaver. n mod implicit ele sunt afiate deasupra ferestrei documentului dar putei modifica aceast opiune via Edit Categoria Panels. De asemenea putei deplasa i combina cele trei panouri. Toate panourile pot fi accesate din meniul Window. Dac dorii, putei masca toate panourile afiate via View Hide panels.
Panoul Insert conine icon-uri pentru crearea elementelor (obiectelor) HTML: imagini, tabele, caractere speciale, formulare etc. n partea superioar a panoului se afl un meniu derulant care permite selectarea uneia dintre cele unsprezece categorii de panouri: Common, Text,
10
Tables, Frames, Forms, Templates, Characters, Media, Head, Script, Application (figura 1.4).
Figura 1.4
Inspectorul
de
proprieti
permite
vizualizarea,
modificarea
proprietilor unui element al paginii (text, tabel, imagine etc.). Inspectorul de proprieti se identific puin mai greu ntruct numele su nu figureaz n bara de titlu a panoului. n figura 1.5 a fost selectat imaginea situat n colul din stnga sus. Inspectorul de proprieti afieaz instantaneu caracteristicile sau atributele acestei imagini (lungime, lime, aliniere, URL-ul etc.).
11
Figura 1.5
Remarci: Putei lsa deschis panoul Properties pe toat durata lucrului. Inspectorul de proprieti nu permite accesarea tuturor atributelor unui element (vezi opiunea Page Properties, din meniul Modify) dar putei parametriza atributele cele mai des folosite. Pentru a afia mai multe atribute ale obiectului selectat, executai clic pe situat n colul din dreapta jos al panoului Properties. butonul
Panoul Launcher conine icon-uri (figura 1.6) care permit accesul rapid la urmtoarele funcii Dreamweaver 4 workspace: Show Sites ( ), Show Assets ( ), Show CSS Style ( ), Show Behaviors ( ), ),
Show History (
), Show Bindings (
), Show Server Behaviors ( ).
Show Components (
Figura 1.6
), Show Databases (
Remarc. Toate funciile afiate n panoul Launcher vor fi studiate n cadrul acestei lucrri (vezi conversaiile urmtoare).
12
Bara de meniuri
n partea de sus a ferestrei principale Dreamweaver 4 workspace se gsete bara de meniuri (figura 1.7).
Figura 1.7
Remarc. Meniurile afiate n bara de meniuri (File, Edit, View, Insert, Modify, Text, Commands, Site, Window, Help) permit accesarea tuturor funciilor Dreamweaver 4 workspace (unele dintre ele le gsii n panourile flotante; anumite funcii nu sunt disponibile dect n meniuri).
Bara de stare
Bara de stare se afieaz la baza ferestrei principale Dreamweaver 4 workspace (figura 1.8). Ea permite afiarea urmtorilor parametrii: codul HTML (colul din stnga), dimensiunea ferestrei i a documentului, timpul de ncrcare i Mini-Launcher (colul din dreapta al barei de stare).
Figura 1.8
Remarc. n mod implicit, imediat sub bara de meniuri apare bara de instrumente (figura 1.9) care permite accesul rapid la un mare numr de funcii Dreamweaver.
Figura 1.9
13
Dreamweaver MX
workspace
Spaiul de lucru
Revenii la vechea interfa

Pentru a schimba spaiul de lucru Dreamweaver respectai procedura descris n continuare. 1. Executai clic pe Edit Preferences (figura 1.10).
Figura 1.10
Remarc. Se deschide caseta de dialog Preferences.
2. n caseta de dialog Preferences, n categoria General executai clic pe Change Workspace.
14
Figura 1.11
3. n caseta de dialog care se afieaz (figura 1.12) selectai opiunea Dreamweaver MX Workspace, iar n continuare executai clic pe butonul OK.
Figura 1.12
15
Remarc. n caseta de avertisment (Macromedia Dreamweaver MX) executai clic pe OK. Modificarea este aplicat dup nchiderea apoi deschiderea aplicaiei Dreamweaver.
Pe ecranul monitorului dumneavoastr, n spaiul de lucru Dreamweaver MX se afieaz: fereastra documentului (figura 1.13).
Figura 1.13
fereastra Welcome (figura 1.14) care furnizeaz indicaii privind configurarea spaiului de lucru (dac este cazul!).
Figura 1.14
16
bara de meniuri (figura 1.15).
Figura 1.15
grupul de panouri Insert (figura 1.16).

Figura 1.16
panoul Properties (Inspectorul de proprieti) situat n afara spaiului de lucru Dreamweaver MX (figura 1.17).
Figura 1.17
bara de instrumente standard (figura 1.18).

Figura 1.18
grupurile de panouri nchise: Design, Code, Application, Answers; grupul de panouri deschis Files (figura 1.19). Panoul Site (figura 1.19) permite administrarea fiierelor i a dosarelor site-ului dumneavoastr.
Figura 1.19
17
bara de stare situat la baza ferestrei principale Dreamweaver MX workspace (figura 1.20).
Figura 1.20
Fereastra documentului
Fereastra documentului corespunde paginii Web curente. Iat cum descoperii fereastra documentului Dreamweaver MX. 1. Executai clic pe Untitled 2 pentru a schimba pagina (figura 1.21).
Figura 1.21
2. Executai clic n interiorul paginii Untitled 2 i introducei: Un text oarecare! (figura 1.22).
18
Figura 1.22
3. Afiai cele dou ferestre n cascad, via Window (figura 1.23).
Cascade
Figura 1.23
19
Grupul de panouri Insert
Grupul de panouri Insert permite inserarea n pagin a unei serii de obiecte diverse: imagini, tabele, rollover-e, animaii, caractere speciale, formulare etc. Grupul de panouri Insert conine 12 sub-panouri, fiecare dintre ele coninnd propriul set de icon-uri pentru diferite funcii: Common, Layout, Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script i Application. Dreamweaver face referiri la aceste sub-panouri prin numele lor complet, ca de exemplu: Insert Table sau Insert Form. n figura 1.24 se prezint grupul de panouri Insert pentru sub-panourile Common, Text i Media.
Figura 1.24
Remarci: Interfaa utilizator integrat n Windows este o schimbare capital n spaiul de lucru Dreamweaver MX. Desigur putei utiliza i panourile flotante (Dreamweaver 4) dar Macromedia v recomand (i eu) s optai pentru noua interfa. Panoul (grupul de panouri) Insert ofer un acces rapid la obiecte i comportamente; este n ntregime extensibil. Aspectul panoului Insert poate fi personalizat. Putei afia butoanele cu icon-uri sau numai cu text sau ambele, via Edit Preferences categoria General Insert panel: Icons only, Icons and text sau Text only.
Aplicaii Afiai panoul Answers. Iat care este procedura pe care v invitm s-o urmai. 1. Executai clic pe Window Answers.
20
Remarc. Se afieaz panoul Answers (figura 1.25).
Figura 1.25 2. Executai clic pe numele panoului pentru a-l reduce. 3. Executai clic pe numele panoului pentru a-l dezvolta. nchidei panoul Answers. Iat care este procedura pe care v invitm s-o urmai. 1. Executai clic pe butonul (figura 1.26).
Figura 1.26
21
2. n meniul local ( 1.27). ) executai clic pe Close Panel Group (figura
Figura 1.27
_________________________________________________________ ___________________________________________________________ ___________________________________________________________ ___________________________________________________________ ___________________________________________________________
Afiai sau mascai rapid panourile. Iat care este procedura pe care v invitm s-o urmai. 1. Acionai tasta F4.
Remarc. Panourile sunt mascate (figura 1.28).
Figura 1.28 2. Acionai tasta F4 pentru a afia din nou panourile.

Remarc. Pentru a masca sau afia rapid panourile din dreapta spaiului de lucru apsai
butoanele
sau .
Grupai panourile Answers i Files. Iat care este procedura pe care v invitm s-o urmai. 1. Selectai panoul Answers care se regrupeaz cu Files (figura 1.29).
22
Figura 1.29
2. n panoul Answers, executai clic pe butonul
(figura 1.30).
Figura 1.30
23
3. Executai clic pe Group Answers with apoi pe numele panoului Files (figura 1.31).
Figura 1.31
Remarc. Panourile Answers i Files sunt regrupate (figura 1.32).
Figura 1.32
Remarc. Fiecare panou posed propriul su sub-panou.
24
Panoul Properties (Inspectorul de proprieti)
n Dreamweaver MX workspace, Inspectorul de proprieti (Properties) este situat la baza paginii i nu mai acoper spaiul de lucru. El afieaz proprietile (atributele) elementului selectat.
Remarc. n Dreamweaver MX workspace, Inspectorul de proprieti se identific foarte uor ntruct numele su, Properties figureaz n bara de titlu a panoului.
n figura 1.33 Inspectorul de proprieti afieaz atributele tabelului HTML selectat.
Figura 1.33
Remarci: Panoul Launcher este acum situat n colul inferior dreapta al spaiului de lucru, dar poate fi deplasat (figura 1.34).
Figura 1.34
Panoul Launcher conine urmtoarele icon-uri: Show Sites ( ), Show ), Show CSS Style ( ), Show Behaviors ( ), Show History Assets ( ( ), Show Bindings ( ), Show Server Behaviors ( ), Show Components ( ), Show Databases ( ). Ultimele funcii: Show Server Behaviors, Show Components i Show Databases sunt importante dac dorii s legai site-ul dumneavoastr la o baz de date.
25
Bara de meniuri
Bara de meniuri permite accesarea tuturor funciilor Dreamweaver MX workspace. Meniurile din bara de meniuri au urmtoarele denumiri: File, Edit, View, Insert, Modify, Text, Commands, Site, Window, Help.
Bara de stare
Bara de stare permite afiarea urmtorilor parametrii: codul HTML, dimensiunea ferestrei i a documentului, timpul de ncrcare al paginii i lansatorul (figura 1.35).
Figura 1.35
Remarci: Selectorul de tag-uri v permite s tii unde suntei n codul HTML; asociat cu Quick Tag Editor putei modifica rapid codul pentru a optimiza pagina dumneavoastr Web. Dimensiunea ferestrei v permite s schimbai rapid dimensiunea acesteia. Atenie la timpii de ncrcare ai paginilor Web! Vizitatorii dumneavoastr nu au timp s atepte!
Aplicaie Afiai bara de instrumente. Iat care este procedura pe care v invitm s-o urmai. 1. Executai clic pe View Toolbars (figura 1.36).
2. Executai clic pe numele barei (Standard), figura 1.36.
26
Figura 1.36
Remarc. Putei schimba poziia barei de instrumente, glisnd bara
(figura 1.37).
Figura 1.37
27
Dreamweaver MX
Testai-v cunotinele
Tem
1. Prezentai argumentele care au stat la baza alegerii Dreamweaver MX. 2. Care sunt componentele de baz ale spaiului de lucru Dreamweaver. 3. De ce utilizm Dreamweaver 4 workspace? 4. Descriei pe scurt: panoul Insert, inspectorul de proprieti, panoul Launcher, bara de meniuri i bara de stare din Dreamweaver 4 workspace. 5. Precizai rolul i structura grupului de panouri Insert din Dreamweaver MX workspace. 6. Cum afiai/mascai rapid panourile: Design, Code, Application, Files, Answers?
Vizitai site-urile
www.macromedia.com www.djtracyyoung.com
Conversaia 2
Creai un site Web cu Dreamweaver MX

Dreamweaver MX Creai un site nou Dreamweaver MX workspace Definii local site-ul dumneavoastr Dreamweaver 4 workspace Definii local site-ul dumneavoastr Dreamweaver MX Tem
Dreamweaver MX
Creai un site nou
tiu c suntei nerbdtori s ncepei s lucrai la prima pagin Web cu Dreamweaver, dar este bine s mai ateptai o conversaie n care vei nva cum s creai local un site nou, urmnd ca dup aceea pe structura site-ului creat s stocai paginile proprii. Merit acest efort credei-m, chiar dac la nceput site-urile dumneavoastr nu sunt mari dar, cu timpul, cu siguran ele vor crete ca orice lucru-n via: copcel, copcel! Este bine s ncepei crearea unui site direct pe calculatorul dumneavoastr, n mod local. Desigur aceasta nu este dect o prim etap urmnd apoi s-l publicai i nu doar att.
Remarci: Fiecare site pe care l creai cu Dreamweaver trebuie s fie definit.
30
n momentul definirii unui site nou, trebuie s creai pe hard-discul dumneavoastr un folder, numit folder rdcin local (Local Root Folder) n care vor fi stocate toate fiierele pe care le creai (documente HTML, imagini, scripturi, animaii etc.). Pentru crearea site-ului dumneavoastr cu Macromedia Dreamweaver MX folosii dou metode: o metod elementar (Basic) i o metod avansat (Advanced) pe care le putei aplica att pentru Dreamweaver MX Workspace ct i pentru Dreamweaver 4 Workspace.
i acum s trecem la treab!
Dreamweaver MX Definii local site-ul dumneavoastr

workspace
Utilizai categoria Local Info

Macromedia Dreamweaver MX propune dou soluii pentru crearea site-ului dumneavoastr: o metod elementar i o metod avansat.
Remarc. Cele dou metode se aplic pentru: Dreamweaver MX Workspace; Dreamweaver 4 Workspace.
Metoda elementar (BASIC)

Iat care este procedura pe care v invitm s-o urmai dac ai ales
metoda elementar pentru crearea site-ului dumneavoastr, cu

Dreamweaver MX workspace. 1. Executai clic pe Site New Site.
Remarc. Se deschide caseta de dialog Site Definition for (figura 2.1).
31
Figura 2.1
2. Activai zona Basic (figura 2.2).
Figura 2.2
32
3. Introducei de la tastatur, n zona What would you like to name your site? numele site-ului dumneavoastr (figura 2.3).
Figura 2.3
4. Executai clic pe butonul Next (figura 2.4).
Figura 2.4
5. Rspundei
cu
No
(figura
2.5)
la
ntrebarea
pe
care
Dreamweaver v-o adreseaz n continuare: Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? (Dorii s utilizai o tehnologie de tip server: ASP Java Script, ASP VB Script, , PHP?).
Figura 2.5
6. Executai clic pe butonul Next.
33
7. Indicai modul de lucru: local (opiunea cea mai eficace) sau direct pe server (nu v recomandm aceast opiune), figura 2.6.
Figura 2.6
8. Executai clic pe (figura 2.7).
pentru a identifica folder-ul site-ului local
Remarc. Se deschide caseta de dialog Choose Local Root Folder for Site Site web:
Figura 2.7
9. Selectai folder-ul local (figura 2.8) i executai clic pe butonul Select.
34
Figura 2.8
Remarc. Dac folder-ul nu exist, executai clic pe
pentru a-l crea.
10. n caseta de dialog Site Definition for Site web executai clic pe butonul Next. 11. Alegei tipul de conexiune la server. Pentru moment optai pentru None (figura 2.9).
Figura 2.9
12. Executai clic pe butonul Next.

Remarc. n caseta de dialog Site Definition for Site web se afieaz un rezumat al tuturor parametrilor site-ului dumneavoastr (figura 2.10).
35
Figura 2.10
13. n caseta de dialog Site Definition for Site web executai clic pe butonul Done.
Remarc. n grupul de panouri Files, n zona Site putei vizualiza noul dumneavoastr site (figura 2.11).
Figura 2.11
36
Metoda avansat (Advanced)
Iat care este procedura pe care trebuie s-o urmai dac ai ales metoda avansat pentru crearea site-ului dumneavoastr cu Dreamweaver MX. 1. Executai clic pe Site New Site.
2. n caseta de dialog Site Definition for, care se deschide activai zona Advanced (figura 2.12).
Figura 2.12
3. Executai clic pe una din categoriile afiate (figura 2.13): Local Info; Remote Info; Testing Server;
37
Cloaking; Design Notes; Site Map Layout; File View Columns.
Figura 2.13
Remarc. Pentru moment, numai categoria Local Info ne intereseaz (figura 2.14).
4. Modificai opiunile corespunztoare categoriei Local Info. n figura 2.14 sunt listate toate opiunile pentru categoria Local Info: Site Name, Local Root Folder, Default Images Folder, HTTP Address, Cache.
Figura 2.14
5. n caseta Site Definition, executai clic pe butonul OK.
38
Utilizai categoriile: Remote Info, Design Notes, Site Map Layout, File View Columns
Identificai n caseta de dialog Site Definition for Site web urmtoarele ase categorii:
Categoria Remote Info (vezi Dreamweaver 4 workspace). Categoria Testing Server permite specificarea unui server utilizat numai pentru dezvoltare, etap necesar n procesul de creare a unui site Web care utilizeaz funciile UltraDev ale Dreamweaver-ului cu o baz de date. Categoria Cloaking permite excluderea tuturor folder-elor i fiierelor specifice operaiilor efectuate n cadrul site-ului ceea ce nseamn c folder-ele i fiierele proiectate nu pot fi nici alterate nici descrcate n site. Aceast funcie este practic dac dorii s conservai diferite seciuni ale unui site fr ca ele s poat fi vizibile vizitatorilor dumneavoastr. Categoria Design Notes (vezi Dreamweaver 4 workspace). Categoria Site Map Layout (vezi Dreamweaver 4 workspace). Categoria File View Columns (vezi Dreamweaver 4 workspace).
Remarci: Nu uitai s salvai toate fiierele care alctuiesc site-ul dumneavoastr Web n folder-ul rdcin local (Local Root Folder). Dreamweaver MX v avertizeaz de fiecare dat cnd dorii s utilizai un fiier care nu se gsete n folder-ul local (figura 2.15).
Figura 2.15
39
Putei modifica parametrii unui site, via Site Edit Sites. n lista site-urilor care se afieaz, selectai site-ul corespunztor i apoi executai clic pe unul din butoanele: New, Edit, Duplicate, Remove, Export (permite salvarea tuturor caracteristicilor site-ului ntr-un fiier XML), Import (permite crearea unui nou site pornind de la caracteristicile altui site). n final, executai clic pe butonul Done (figura 2.16).
Figura 2.16
Cnd creai mai multe site-uri, putei accesa pe oricare dintre acestea, via Site Site Files.
Dreamweaver 4
workspace
Definii local site-ul dumneavoastr
Utilizai categoria Local Info

Iat care este procedura care trebuie urmat pentru crearea unui site cu Macromedia Dreamweaver 4 workspace. 1. Executai clic pe Site New Site.
Remarc. Se deschide caseta de dialog Site Definition (figura 2.17).
40
Figura 2.17
Remarc. Pentru moment numai categoria Local Info v intereseaz. aceasta este selectat (vezi figura 2.17). Asigurai-v c
2. Introducei de la tastatur, n zona Site Name numele noului site. Acest nume este definit numai pentru dumneavoastr i pentru Dreamweaver 4! (figura 2.18).
Figura 2.18
3. n zona (cmpul) Local Root Folder (Folder-ul rdcin local) introducei calea de acces (figura 2.19) sau executai clic pe
41
icon-ul folder-ului aflat n partea dreapt a zonei Local Root Folder, (figura 2.20).
Figura 2.19
Figura 2.20
Remarc. Se deschide caseta de dialog Choose Local Root Folder for Site (figura 2.21).
Figura 2.21
42
4. Selectai folder-ul pe care dorii s-l utilizai i executai clic pe Select. Calea pe care ai ales-o ctre folder-ul rdcin local se va afia n zona Local Root Folder (figura 2.22).
Figura 2.22
5. Activai butonul Refresh Local File List Automatically pentru ca Dreamweaver s actualizeze n mod automat lista noilor pagini introduse n site-ul dumneavoastr (figura 2.23).
Figura 2.23
6. Activai opiunea Enable Cache (figura 2.24).
Figura 2.24
Remarc. Opiunea Enable Cache permite aplicaiei Dreamweaver s creeze un fiier de cache care ajut la administrarea site-ului, garantnd c link-urile sunt actualizate n mod permanent. Sfatul nostru: facei cum credei, dar utilizai aceast opiune.
43
7. n caseta de dialog Site Definition for executai clic pe butonul OK.
Utilizai categoriile: Remote Info, Design Notes, Site Map Layout, File View Columns
Identificai n caseta de dialog Site Definition for urmtoarele patru categorii: Remote Info, Design Notes, Site Map Layout, File View Columns.
Dreamweaver dispune de funcii FTP care permit descrcarea paginilor Web pe un server Web dedicat. n caseta de dialog Site Definition for, categoria Remote Info introducei informaiile de conexiune corespunztoare (figura 2.25). Cnd lucrai n grup, utilizai opiunea de extragere i arhivare pentru a cunoate n orice moment evoluia site-ului dezvoltat de mai multe persoane.
Figura 2.25
44
Utilizai categoria Design Notes (note de concepie). n caseta de dialog Site Definition for, categoria Design Notes introducei informaiile care controleaz modul n care Dreamweaver utilizeaz Design Notes (figura 2.26).
Figura 2.26 Utilizai Design Notes atunci cnd realizai un proiect de site Web n echip pentru a v informa colegii (programatori, designeri, specialiti n animaii etc.) de activitile prestate (modificri de script-uri, sursa unei imagini etc.). Aceste note de concepie (Design Notes) pot fi asociate documentelor sau obiectelor incluse ntr-o pagin Web. Design Notes funcioneaz ca un tag de comentarii HTML fr ca acesta s fie afiat n browser. Dar, Design Notes merge puin mai departe! Contrar tag-urilor de comentarii (COMMENT) HTML vizitatorii nu pot vedea coninutul Design Notes chiar dac afieaz fiierul surs HTML al paginii dumneavoastr. Putei descrca Design Notes pentru a le partaja cu alte persoane care acceseaz server-ul dumneavoastr sau putei preveni aceast operaie pentru a pstra confidenialitatea comentariilor dumneavoastr. Utilizai categoria Site Map Layout pentru a crea n mod automat o hart (diagram) a tuturor paginilor Web din site-ul dumneavoastr. Gestiunea site-ului devine n acest mod mult mai uoar ntruct
45
beneficiai de o reprezentare grafic ierarhic a paginilor i a link-urilor. Site Map Layout este un instrument de mentenan a fiierelor i a folder-elor care structureaz site-ul dumneavoastr. n figura 2.27 se prezint diagrama (harta) site-ului care conine structura crii pe care o lecturai.
Figura 2.27 Utilizai categoria File View Columns pentru a modifica fereastra site-ului dumneavoastr. Atunci cnd lucrai n echip, informaiile provenind din Design Notes sau informaiile personale pot fi listate n fereastra folder-ului local adugnd dup caz una sau mai multe coloane.
46
Dreamweaver MX
Testai-v cunotinele
Tem
1. Ce soluii propune Dreamweaver MX pentru crearea site-ului dumneavoastr? 2. Descriei pe scurt metoda elementar (BASIC) Dreamweaver MX workspace pentru crearea unui site. 3. Descriei pe scurt metoda avansat (Advanced) Dreamweaver MX workspace pentru crearea unui site. 4. Care este rolul categoriei Design Notes (caseta DE DIALOG Site Definition for Site)?
Vizitai site-urile
www.macromedia.com/fr/support/ www.echomedium.com www.projectseven.com/dreamweaver
Conversaia 3
Introducei i formatai caracterele cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Introducei text Dreamweaver 4 workspace, MX workspace Inserai caractere speciale Dreamweaver 4 workspace, MX workspace Inserai caractere proprii HTML Dreamweaver 4 workspace, MX workspace Aplicai unui text formatele fizice i logice Dreamweaver MX workspace Inserai abrevieri i acronime Dreamweaver 4 workspace, MX workspace Scriei un text cu exponent sau cu indice Dreamweaver 4 workspace, MX workspace Definii tipul de font Dreamweaver 4 workspace, MX workspace Definii dimensiunea fontului Dreamweaver 4 workspace, MX workspace Definii culorile Dreamweaver MX workspace Creai propriile stiluri HTML Dreamweaver MX Tem
Dreamweaver 4
workspace
Introducei text
Acum, dup ce site-ul dumneavoastr a fost definit putei ncepe s creai pagini Web, pentru a-l umple.
48
Pentru a nu ne complica viaa (care trebuie trit i nu consumat) vom pstra aceeai aplicaie pe care am folosit-o la prezentarea (X)HTML-ului. Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! Iat care este procedura Dreamweaver 4 workspace pe care trebuie s-o urmai. 1. Executai clic pe butonul Code and Design View din bara de instrumente, pentru a vizualiza n acelai timp codul surs (HTML) i pagina (figura 3.1).
Figura 3.1
Se obine imaginea din figura 3.2, n care pagina dumneavoastr se afieaz la baza ferestrei, iar codul surs HTML, pe care de fiecare dat v invitm s-l analizai se afieaz n partea superioar a ferestrei.
Figura 3.2
49
nainte de a executa primul pas al procedurii asigurai-v c v aflai n spaiul de lucru Dreamweaver 4 workspace (vezi Conversaia 1). Executai clic n partea de sus a paginii (complet vid) pentru a poziiona cursorul (figura 3.3).
Figura 3.3
Remarci: Metoda cu modul dublu de afiare (pagin i cod) este foarte practic atunci cnd dorii s efectuai modificri n codul surs i s vedei imediat rezultatul n pagin (se poate i invers). Putei efectua toate modificrile dorite. Atunci cnd selectai un element ntr-una din ferestre (cod sau pagin) echivalentul su este de asemenea selectat n cealalt fereastr. Putei modifica dimensiunea celor dou ferestre (cod, pagin), redimensionnd separatorul orizontal al celor dou ferestre. Dac dorii ca pagina dumneavoastr s se afieze n partea superioar a ferestrei i codul la baza ferestrei, executai clic pe View Design View on Top sau alegei aceeai comand n meniul butonului bara de instrumente. (View Options) din
Pentru a reveni la pagina dumneavoastr, executai clic pe butonul (Show Design View).
2. Dai un titlu (Pagina 1) paginii. Pentru a da un titlu paginii cu Dreamweaver 4, folosii una din metodele prezentate mai jos. Metoda 1 Meniul Modify, via Page Properties Title.
Metoda 2 Caseta de text Title de pe bara de instrumente.
50
Vom folosi n cele ce urmeaz cea de-a doua metod.
Metoda 2
2.1. Executai clic n zona Title situat pe bara de instrumente. 2.2. Introducei textul: Pagina 1 (figura 3.4). 2.3. Acionai tasta Enter.
Figura 3.4
Remarci: Dreamweaver 4 workspace atribuie n mod automat unui document nou titlul: Untitled Document. ncercai s modificai formatarea textului care reprezint titlul paginii! Nu vei reui! Titlul paginii se afieaz n bara de titlu a navigatorului (figura 3.5).
Figura 3.5
3. Introducei de la tastatur, n fereastra Document, textul specificat (figura 3.6).
Figura 3.6
51
4. Analizai codul HTML generat (figura 3.7).
Figura 3.7
Remarci: Utilizai litere mari pentru tag-urile HTML pentru a le face s ias n eviden atunci cnd analizai codul. Executai clic pe Edit Preferences. Se deschide caseta de dialog Preferences (figura 3.8).
Figura 3.8
52
n caste de dialog Preferences, categoria Code Format, alegei <UPPERCASE> din meniul derulant Default Tag Case i executai clic pe butonul OK pentru a nchide caseta de dialog (Preferences), figura 3.9.
Figura 3.9
Selectai tag-ul <HTML> n partea de sus a ecranului splitat (figura 3.10) i executai clic pe butonul Reference <?> de pe bara de instrumente (figura 3.10).
Figura 3.10
Se deschide panoul Reference n care se afieaz informaiile privind tag-ul selectat <HTML> (figura 3.11).
Figura 3.11
53
Procedai n mod similar cu restul tag-urilor afiate sau, deschidei panoul Reference, via Window Reference, selectai opiunea OREILLY HTML Reference n meniul derulant BOOK, iar n meniul derulant Tag selectai pe rnd tag-urile despre care dorii s aflai informaii. Pentru fiecare tag selectat, se vor afia n partea de jos a panoului informaiile corespunztoare (figura 3.12).
Figura 3.12
Citii Conversaia 3, paragraful HTML4 Introducei text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
5. Salvai documentul n folder-ul rdcin local, via File (figura 3.13).
Save
Figura 3.13
54
6. Vizualizai pagina Web ntr-un browser, folosind una din metodele prezentate n continuare:
Executai clic pe File Check Page CheckTarget Browsers i
alegei un navigator din fereastra deschis.
sau,
Acionai tasta F12 pentru vizualizarea paginii n navigatorul principal (Internet Explorer) sau tastele CTRL+F12 pentru vizualizarea paginii n navigatorul secundar (Netscape).
sau,
Executai clic pe butonul vizualizarea. (Preview/Debug in Browser) din
bara de instrumente i selectai browser-ul n care dorii
n figura 3.14 se prezint pagina Web vizualizat n browser-ul Internet Explorer.
Figura 3.14
Remarci: Pentru vizualizarea paginii, Dreamweaver creeaz un fiier temporar (D:\Site\TMP38bfw8jnh0.htm); numele fiierului ncepe cu sufixul TMP. Macromedia permite definirea a cel mult 20 de browser-e! Va trebui s avei instalate n calculatorul dumneavoastr aceste aplicaii nainte de a cere vizualizarea paginilor dumneavoastr Web. n ceea ce ne privete, am definit dou browser-e: Microsoft Internet Explorer i Netscape Navigator, ambele gratuite i disponibile pe Internet.
55
Dreamweaver MX
workspace
Introducei text
Cu Dreamweaver MX workspace putei crea mai multe tipuri de pagini pentru Web. Iat care este procedura Dreamweaver MX workspace pe care trebuie s-o urmai pentru a crea o pagin Web care conine text (Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! vezi Dreamweaver 4 workspace) n conformitate cu codul XHTML. Pentru a completa site-ul dumneavoastr, adugai pagini noi, ori de cte ori este necesar. 1. Executai clic pe File New (figura 3.15).
Figura 3.15
Remarc. Se afieaz caseta de dialog New Document (figura 3.16).
56
2. n caseta de dialog New Document executai clic pe General (opiune selectat implicit figura 3.16).
Figura 3.16 Remarc. Pentru a utiliza un model citii conversaia 14.
3. n lista Category executai clic pe Basic Page (figura 3.17). 4. Executai clic pe HTML n lista Basic Page (figura 3.17).
Figura 3.17
57
5. Activai opiunea Make Document XHTML Compliant (figura 3.18).
Figura 3.18
6. Executai clic pe butonul Create (figura 3.19).
Figura 3.19
Remarc. Se afieaz o nou pagin goal! (figura 3.20).
Figura 3.20
Remarci: Dreamweaver MX workspace atribuie n mod automat, unui document nou, titlul Untitled Document (figura 3.20). Pentru a modifica numele implicit al paginii (atribuit n mod automat de Dreamweaver MX workspace) salvai documentul. Numele fiierului html sub care salvai documentul va nlocui pe cel implicit atribuit de Dreamweaver MX workspace.
58
7. Dai un titlu (Pagina 1) paginii. Folosii una din metodele prezentate mai jos. Metoda 1 aceeai ca la Dreamweaver 4 workspace; Metoda 2 aceeai ca la Dreamweaver 4 workspace. 8. Executai clic pe butonul specificat (figura 3.21). (Code and Design View) situat pe
bara de instrumente i introducei de la tastatur textul
Figura 3.21
9. Analizai codul XHTML generat (figura 3.22).
Figura 3.22
59
Remarci: Utilizai meniul Help Using Dreamweaver, seciunea Index pentru a afia informaii despre tag-ul xml. Respectai procedura descris n continuare. Executai clic pe Help Using Dreamweaver; n caseta de dialog care se afieaz, Using Dreamweaver MX, n zona: Type in keyword to find:, tastai xml (figura 3.23).
Figura 3.23
Executai clic pe butonul Display. n caseta de dialog Topics Found, n zona Title, executai clic pe About
XML, iar apoi pe butonul Display ( figura 3.24).
Figura 3.24
60
n partea dreapt a casetei de dialog Topics Found se afieaz About XML (figura 3.25). n caseta de dialog Using Dreamweaver MX, seciunea Index, n zona Type in the keyword to find, tastai xhtml. Acionai butonul Display i citii informaiile care se afieaz n partea dreapt a ferestrei de dialog.
Figura 3.25
Utilizai meniul Help, seciunea Search pentru a afia informaiile despre tag-ul doctype (tastai doctype n zona Type in the keyword to find:; executai clic pe List Topics i apoi pe butonul Display). Citii Conversaia 3, paragraful XHTML Introducei text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
10. Salvai documentul n folder-ul rdcin local Site. 10.1. Executai clic pe File Save.
(Save).
Remarc. Dac bara de instrumente Standard este afiat, executai clic pe Pentru a salva toate documentele, executai clic pe (Save all) (figura 3.26).
Figura 3.26
61
10.2. n zona file name tastai numele fiierului. 10.3. Executai clic pe butonul Save. 11. Vizualizai pagina Web ntr-un browser.
Pentru a vizualiza pagina Web ntr-un browser folosii una din metodele (Metoda 3) prezentate pentru Dreamweaver 4 workspace.
Metoda 3
1. Executai clic pe butonul (figura 3.27). (Preview/Debug in browser)
Figura 3.27
2. Executai clic pe Preview in iexplorer (figura 3.28).
62
Figura 3.28
Remarc. n figura 3.29 se prezint pagina Web vizualizat n Internet Explorer.
Figura 3.29
3. nchidei fereastra navigatorului.

Remarc. Pentru a testa pagina ntr-un browser, Dreamweaver MX creeaz un fiier temporar al crui nume este afiat n bara de adrese (figura 3.30).
Figura 3.30
63
Dreamweaver 4
workspace
Inserai caractere speciale
n Dreamweaver caracterele speciale sunt ceea ce n HTML numim entiti de caractere (caractere speciale - , ; caractere accentuate , ; caractere care conin diacritice , ; simboluri matematice , ). Pentru a insera caractere speciale cu Dreamweaver 4 workspace, folosii una din metodele prezentate n continuare. Metoda 1 Meniul Insert, via Special Characters; Metoda 2 Panoul Insert, via Characters. Iat cum inserm cu Dreamweaver 4 textul: 2003 LUMINA BLND care conine caracterul special (copyright drept de autor).
Metoda 1
1. Introducei textul menionat lsnd un spaiu (blanc) naintea lui 2003.
Figura 3.31
2. Executai clic n spaiul dinaintea lui 2003.
Figura 3.32
64
3. Executai clic pe Insert (figura 3.33). Special Characters Copyright
Figura 3.33
Remarc. Caracterul special copyright se afieaz n pagina document (vezi figura 3.34).
Figura 3.34
65
Figura 3.35
Remarci: n (X)HTML toate entitile de caractere ncep cu & i se termin cu ;. Citii conversaia 3, paragraful HTML 4 Introducei caractere speciale (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). Folosii seciunea Index din meniul Help Using Dreamweaver pentru a afia informaiile care se refer la entitatea de caractere © (special characters inserting) (figura 3.36).
Figura 3.36
5. Vizualizai pagina Web ntr-un browser.
Figura 3.37
66
Metoda 2
1. Afiai panoul Insert, via Window Insert.
2. Executai clic pe comanda Characters din meniul derulant al panoului Insert (figura 3.38).
Remarc. Se afieaz icon-urile caracterelor speciale din Dreamweaver 4 workspace (figura 3.39)
Figura 3.38
Figura 3.39
3. Executai clic n spaiul de dinaintea lui 2003 (figura 3.40).
Figura 3.40
4. Executai clic pe butonul Copyright din panoul Insert subpanoul Characters (figura 3.39).
Remarc. n spaiul de dinaintea lui 2003 se insereaz caracterul (vezi figura 3.41).
67
Figura 3.41
5. Inserai icon-ul de conformitate HTML generat (figura 3.42).
i analizai codul
Figura 3.42
6. Vizualizai pagina Web ntr-un browser (figura 3.43).
Figura 3.43
68
Dreamweaver MX
workspace
Inserai caractere speciale
Pentru a insera caractere speciale cu Dreamweaver MX workspace, folosii una din metodele prezentate n continuare. Metoda 1 Meniul Insert, via Special Characters; Metoda 2 Grupul de panouri Insert. Iat cum inserm cu Dreamweaver MX workspace textul: 2003 LUMINA BLANDA, care conine caracterul special (copyright).
Metoda 2
1. Afiai grupul de panouri Insert, via Window 3.44).
Figura 3.44
Insert (figura
2. Executai clic pe subpanoul Characters (figura 3.45).
Figura 3.45
Remarc. Se afieaz icon-urile caracterelor speciale din Dreamweaver MX (figura 3.46).
Figura 3.46
3. Introducei textul: 2003 LUMINA BLANDA, lsnd un spaiu naintea lui 2003 (figura 3.47).
69
Figura 3.47
4. Executai clic n spaiul de dinaintea lui 2003. 5. n subpanoul Characters, executai clic pe butonul
(copyright), figura 3.48.
Figura 3.48
Remarc. n spaiul de dinaintea lui 2003 se afieaz caracterul (figura 3.49).
Figura 3.49
70
Figura 3.50
Figura 3.51
Dreamweaver 4
workspace
Inserai caractere proprii HTML
Pentru a insera caractere proprii (X)HTML cu Dreamweaver 4 workspace folosii una din metodele prezentate n continuare. Metoda 1 Meniul Insert, via Special Characters Metoda 2 Panoul Insert. Iat cum inserai cu Dreamweaver 4 workspace caracterul propriu HTML & n textul: Vizitai magazinele C&A! Other;
71
Metoda 2
1. Introducei textul menionat, lsnd un spaiu (blanc) ntre caracterele C i A (figura 3.52).
Figura 3.52
2. Executai clic n spaiul dintre cele dou caractere (C i A).
Figura 3.53
3. Executai clic pe butonul
(Insert Other Character) n panoul
de obiecte Characters (figura 3.54).
Figura 3.54
Remarc. Se afieaz caseta de dialog Insert Other Character.
4. n caseta de dialog Insert Other Character, executai clic pe caracterul ampersand (&) sau, tastai & n zona Insert.
72
5. n caseta de dialog Insert Other Character executai clic pe butonul OK.
Remarc. n fereastra document se afieaz caracterul special & (figura 3.55).
Figura 3.55
Figura 3.56
Remarci: Citii Conversaia 3, paragraful HTML 4 Inserai caractere proprii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). Afiai numerotarea liniilor de cod via butonul (figura 3.57). (Options) Line Numbers
Figura 3.57
73
Figura 3.58 Aplicaie Introducei urmtorul text (n limba francez) care conine caractere accentuate (e cu accent grav). Ma premire page Web est O.K.! Indicaie. Folosii o tastatur cu caractere franuzeti sau inserai caracterul special e cu accent grav (è), acionnd butonul via Insert Other Character. din panoul Insert
Dreamweaver MX Inserai caractere proprii (X)HTML

workspace
Pentru a insera caractere proprii (X)HTML cu Dreamweaver MX, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Special Characters Dreamweaver 4); Metoda 2 Grupul de panouri Insert. Iat cum inserm cu Dreamweaver MX workspace textul Vizitai magazinele (ampersand). C&A care conine caracterul propriu (X)HTML & Other (vezi
Metoda 2
74
1. Introducei textul, lsnd un spaiu ntre caracterele C i A. 2. Executai clic n spaiul dintre cele dou caractere (C i A). 3. n grupul de panouri Insert, executai clic pe butonul Other Character (figura 3.59).
Figura 3.59
Se afieaz caseta de dialog Insert Other Character (figura 3.60).
Figura 3.60
4. n caseta de dialog Insert Other Character, executai clic pe butonul & (ampersand), dac l gsii (!) sau tastai & n zona Insert, care afieaz codul (X)HTML corespunztor caracterului pe care dorii s-l inserai. 5. Executai clic pe butonul OK.
Remarc. n fereastra document se afieaz caracterul special &. (figura 3.61).
75
Figura 3.61
Figura 3.62
Figura 3.63
76
Dreamweaver 4
workspace
Aplicai unui text formatele fizice i logice
Elementele de formatare clasic accesibile n Dreamweaver 4 workspace sunt: bold (ngroat), italic (cursiv), underline (subliniat), strikethrough (barat sau tiat), teletype (cu pas fix, ca la maina de scris). Celelalte stiluri big i small nu sunt accesibile n Dreamweaver dar le putei utiliza direct n HTML 4, cum de altfel ai i fcut-o. Pentru a aplica unui text formate fizice i logice cu Dreamweaver 4 workspace folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Style; Metoda 2 Inspectorul Properties.
Formatai un text cu caractere ngroate (bolduit) i cursive (italice)

Iat cum aplicm formatul fizic bold textului: Bine ai venit!.
Metoda 1
1. Selectai textul (figura 3.64).
Figura 3.64
2. Executai clic pe Text
Style
Bold.
77
Textul selectat se afieaz cu caractere bold (vezi figura 3.65).
Figura 3.65
Figura 3.66
Remarci: Selectai tag-ul <STRONG>, deschidei panoul Reference i citii informaiile care se afieaz. Citii conversaia 3, paragraful HTML Aplicai unui text formate fizice i logice (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). Schimbai culoarea liniei de cod <STRONG>Bine ati venit</STRONG> via Edit Preferences categoria Code Colors.
Figura 3.67
78
Metoda 2
1. Asigurai-v c inspectorul Properties este deschis. 2. Selectai textul. 3. Executai clic pe butonul 3.68).
Figura 3.68
n inspectorul Properties (figura
4. Analizai codul HTML generat. 5. Vizualizai pagina Web ntr-un browser. Iat cum aplicm formatul fizic italic textului: Felicitri pentru rbdarea de a ne fi descoperit!.
Metoda 1
1. Selectai textul (figura 3.69).
Figura 3.69
Style
Italic.
Remarc. Textul selectat se afieaz cu caractere italice (vezi figura 3.70).
Figura 3.70
79
Figura 3.71
Remarci: Selectai tag-ul <EM>, deschidei panoul Reference i citii informaiile care se afieaz. Citii conversaia 3, paragraful HTML Aplicai unui text formate fizice i logice (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
4. Vizualizai pagina Web ntr-un browser (3.72).
Figura 3.72
Metoda 2
1. Asigurai-v c inspectorul Properties este deschis. 2. Selectai textul. 3. Executai clic pe butonul I n inspectorul Properties (figura 3.73).
Figura 3.73
4. Analizai codul HTML generat. 5. Vizualizai pagina Web ntr-un browser.

Remarc. Metoda 2 se folosete numai pentru aplicarea stilurilor bold (B) i italic (I).
80
Mrii sau micorai un text
W3C a prevzut dou tag-uri (formate fizice) big, small pentru mrirea sau micorarea unui text, dar ele nu sunt accesibile n Dreamweaver. n consecin, va trebui s le introducem n codul surs HTML. Pentru a aplica unui text formatul fizic big, Dreamweaver 4 workspace ofer patru metode: Metoda 1 Show Code and Design View ( );
Metoda 2 Inspectorul de cod (Code Inspector); Metoda 3 Quick Tag Editor; Metoda 4 Show Code View ( ).
Iat cum introducem n codul surs HTML tag-ul de formatare <big> pe care urmeaz s-l aplicm cuvntului venit din fraza Bine ai venit!.
Metoda 1
1. Asigurai-v c butonul (Show Code and Design Views) din
bara de instrumente este activat. 2. Executai clic naintea cuvntului venit din prima fraz afiat n fereastra de sus a ecranului (conine codul surs HTML), figura 3.74.
Figura 3.74
81
3. Introducei, n continuare tag-ul <BIG> (figura 3.75).
Figura 3.75
4. Introducei imediat dup cuvntul venit, tag-ul final </BIG> (figura 3.76).
Figura 3.76
(Refresh Design View) din bara
de instrumente pentru a actualiza pagina (figura 3.77).

Figura 3.77 Remarci:
Deoarece stilul big nu este definit n Dreamweaver, el nu va apare n documentul dumneavoastr, ci numai n browser. Pentru a reveni la pagina dumneavoastr, executai clic pe butonul situat n bara de instrumente.
82
Figura 3.78
Aplicaii Aplicai tag-ul de formatare <small> frazei Felicitri pentru rbdarea de a ne fi descoperit!. Utilizai metoda 1. Aplicai tag-ul de formatare <nobr> frazei Universitatea Petrol-Gaze din Ploieti, tradiie i dinamism.. Utilizai metoda 1.
Metoda 2
Inspectorul Code Inspector afieaz codul surs HTML al paginii curente. Inspectorul Code Inspector este foarte util atunci cnd dorii s adugai sau s rectificai un tag la nivel de cod. n orice moment, cu inspectorul Code Inspector putei vizualiza i modifica codul surs al paginii. Iat cum utilizm inspectorul Code Inspector pentru inserarea n codul surs HTML a tag-ului <big> pe care urmeaz s-l aplicm cuvntului venit din fraza Bine ai venit!. 1. Lansai inspectorul Code Inspector din meniul Window, via Window Other Code Inspector (figura 3.79).
83
Figura 3.79
Remarc. Se afieaz codul surs al paginii Web (vezi figura 3.80).
Figura 3.80
2. Acionai butonul
(View Options) care v permite
parametrizarea modului de afiaj al codului surs (figura 3.81).
84
Figura 3.81
Remarci: Opiunea Word Wrap permite citirea cu uurin a unei linii de cod atunci cnd limea ferestrei este prea mic pentru a vizualiza totul pe o singur linie. Opiunea Line Numbers permite numerotarea fiecrei linii a codului surs. Opiunea Highlight Invalid HTML permite punerea n eviden prin fenomenul de clipire a erorilor la nivel de cod HTML. Opiunea Syntax Coloring permite afiarea n culori a diferitelor pri ale codului surs n funcie de preferinele definite. Opiunea Auto Indent permite indentarea automat a anumitor pri ale codului n funcie de preferinele definite.
3. Executai clic pe prima opiune Word Wrap din meniul de opiuni (figura 3.82).
Figura 3.82
85
4. Introducei n codul surs HTML tag-ul <BIG>, naintea cuvntului venit i tag-ul </BIG> dup cuvntul venit (figura 3.83).
Figura 3.83
5. Executai clic pe butonul instrumente.
Refresh Design View din bara de
6. Acionai tasta F10 pentru a reveni n fereastra document. 7. Vizualizai pagina Web ntr-un browser.
Aplicaie Aplicai tag-ul <small> frazei Felicitri pentru rbdarea de a ne fi descoperit!. Utilizai metoda 2.
Metoda 3
Quick Tag editor permite verificarea, adugarea, modificarea i suprimarea rapid a unui tag HTML direct n fereastra Document. Quick Tag Editor este un instrument foarte practic pentru aceia dintre dumneavoastr care cunosc bine HTML i care doresc s efectueze modificri n codul surs, n mod rapid, fr a deschide fereastra n care se afieaz codul surs HTML i a identifica elementul de modificat.
86
Quick Tag Editor poate fi utilizat n trei moduri: Insert HTML; Edit Tag; Wrap Tag. Pentru a bascula ntre cele trei moduri apsai pe CTRL+T. Iat cum utilizm aplicaia Quick Tag Editor pentru a insera n codul surs HTML, tag-ul <big> care urmeaz s fie aplicat cuvntului venit din fraza Bine ai venit!. Se va utiliza modul Insert HTML. 1. n fereastra Document, selectai cuvntul venit din fraza Bine ai venit! (figura 3.84).
Figura 3.84
2. Executai clic pe butonul Quick Tag Editor din inspectorul Properties, sau acionai simultan tastele CTRL+T (figura 3.85).
Figura 3.85
Fereastra Quick Tag Editor se deschide cu meniunea Wrap Tag (vezi figura 3.86).
87
Figura 3.86 Remarc. Aplicaia Quick Tag Editor mai poate fi lansat cu una din metodele: acionnd simultan CTRL+T; din meniul Modify, via Modify Quick Tag Editor; executai clic cu butonul drept al mouse-ului pe orice obiect i selectai comanda Edit Tag din meniul derulant.
3. Selectai tag-ul big (figura 3.87).
Figura 3.87
Remarci: Tag-ul <big> mai poate fi selectat introducnd prima liter b a tag-ului (figura 3.88). Quick Tag Editor selecteaz n lista sa primul element care ncepe cu litera b.
88
Figura 3.88
4. Acionai tasta Enter pentru ca tag-ul <big> i </big> s fie acceptate (figura 3.89).
Figura 3.89
5. Acionai nc o dat tasta Enter pentru a valida modificarea efectuat. 6. Vizualizai pagina Web ntr-un navigator (3.90).
Figura 3.90
Remarci: Tag-ul <BIG> (element standard W3C) nu se afieaz n Dreamweaver. Analizai codul surs HTML. Dreamweaver adaug tag-ul <BIG> naintea obiectului selectat (venit) respectiv tag-ul de nchidere </BIG> dup obiectul (venit) selectat.
89
Dai ordin s clipeasc un text n pagin
W3C a prevzut tag-ul <blink> pentru ca un text s clipeasc n cadrul unei pagini. Cum tag-ul <blink> nu este accesibil n Dreamweaver, va trebui s-l introducem n codul surs HTML. Pentru ca textul bine ai venit s clipeasc, introducei tag-ul <blink> n codul surs HTML. Utilizai una din cele patru metode prezentate V lsm singuri s executai cu plcere ordinul s clipeasc textul Bine ai venit!. Dac-i ordin!...
Dreamweaver MX
workspace
Aplicai unui text formatele fizice i logice
Pentru a aplica unui text formate fizice i logice cu Dreamweaver MX, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Style; Metoda 2 Inspectorul Properties; Metoda 3 Grupul de panouri Insert. Iat cum aplicm formatul fizic bold, textului Bine ai venit!
Metoda 3
1. Asigurai-v c grupul de panouri Insert este deschis. 2. Selectai textul. 3. n grupul de panouri Insert, executai clic pe subpanoul Text (figura 3.91).
Figura 3.91
Remarc. Dreamweaver afieaz butoanele B I (figura 3.92).
90
Figura 3.92

Figura 3.93
(figura 3.93)
n fereastra document textul selectat se afieaz bolduit (figura 3.94).
Figura 3.94
Figura 3.95
91
Remarci: n mod implicit, Dreamweaver utilizeaz elementul HTML <strong> n locul elementului <b>. Pentru a utiliza elementul standard <b> aplicai urmtoarea procedur: Executai clic pe Edit Preferences; n categoria General, dezactivai opiunea Use <strong> and <em> in place of <b> and <i>. Citii conversaia 3, paragraful XHTML Aplicai unui text formate fizice i logice (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 3.96
Iat cum aplicm formatul fizic italic, textului Felicitri pentru rbdarea de a ne fi descoperit!.
Metoda 3
1. Asigurai-v c grupul de panouri Insert este deschis. 2. Selectai textul. 3. n grupul de panouri Insert, executai clic pe subpanoul Text. 4. Executai clic pe butonul
Figura 3.97
Remarc. n fereastra document textul selectat se afieaz cu italice (figura 3.98).
(figura 3.97).
92
Figura 3.98
Figura 3.99
Remarci: n mod implicit Dreamweaver utilizeaz elementul HTML <em> n locul elementului <i>. Pentru a utiliza elementul standard <i> aplicai urmtoarea procedur: Executai clic pe Edit Preferences; n categoria General, dezactivai opiunea Use <strong> and <em> in place of <b> and <i>. Citii conversaia 3, paragraful XHTML Aplicai unui text formate fizice i logice (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 3.100
93
Mrii sau micorai un text
Iat cum introducem n codul surs XHTML tag-ul de formatare <big> pe care urmeaz s-l aplicm cuvntului venit din fraza Bine ai venit!. Indicaie. Pentru a aplica unui text formatul fizic big cu Dreamweaver MX workspace, folosii una din cele patru metode prezentate pentru Dreamweaver 4 workspace. Analizai codul XHTML generat (figura 3.101).
Figura 3.101
Dreamweaver MX
workspace
Inserai abrevieri i acronime
Pentru a insera n pagina dumneavoastr Web o abreviere sau un acronim cu Dreamweaver MX workspace, folosii grupul de panouri Insert din care selectai subpanoul Text. Iat cum procedm pentru a insera abrevierea PL S, de la Ploieti Sud.
94
1. Introducei abrevierea i selectai-o (figura 3.102).
Figura 3.102
2. n grupul de panouri Insert, executai clic pe Text (figura 3.103).
abbr.
Figura 3.103
Remarc. Se afieaz caseta de dialog Abbreviation.
3. n caseta de dialog Abbreviation, n zona Full Text introducei textul complet Ploieti Sud iar n zona Language introducei ro (pentru Romnia), figura 3.104. 4. Executai clic pe butonul OK.
Figura 3.104
5. Salvai documentul. 6. Analizai codul XHTML generat (figura 3.105).
95
Figura 3.105
Figura 3.106
Pentru a insera un acronim (UPG de la Universitatea Petrol-Gaze) aplicai procedura descris n continuare. 1. Introducei acronimul i selectai-l. 2. n grupul de panouri Insert, executai clic pe Text W3C.
3. n caseta de dialog Acronym, care se afieaz, n zona Full Text introducei textul complet al acronimului: Universitatea Petrol-Gaze (figura 3.107).
Figura 3.107
96
4. Introducei ro (pentru Romnia) n zona Language i executai clic pe butonul OK. 5. Salvai documentul. 6. Analizai codul XHTML generat (figura 3.108).
Figura 3.108
Figura 3.109
Remarc. Cnd poziionai pointer-ul pe acronim se afieaz textul integral pe care l-ai introdus n zona Full Text.
97
Dreamweaver 4
workspace
Scriei un text cu exponent sau cu indice
Consoriul W3C a prevzut dou elemente: <sup> i <sub> pentru a scrie un text cu exponent sau cu indice, dar ele nu sunt accesibile n Dreamweaver. n consecin, va trebui s le introducem n codul surs (X)HTML. Iat cum scriem cu Dreamweaver 4 workspace expresia: LUMINABLANDA2=LUMINABLANDA*LUMINABLANDA Vom aplica formatul fizic <SUP>. Pentru jos: Metoda 1 Show Code and Design View ( ); scrierea unei expresii cu exponent sau cu indice, cu
Dreamweaver 4 workspace, folosii una din metodele prezentate mai
Metoda 2 Inspectorul de cod (Code Inspector); Metoda 3 Quick Tag Editor; Metoda 4 Show Code View ( ).
Vom folosi Metoda 3, ntruct Quick Tag Editor permite efectuarea modificrilor n mod rapid, fr a mai fi nevoie de a deschide fereastra codului i a identifica elementul de modificat. Quick tag editor este un instrument foarte puternic pentru cei care cunosc bine (X)HTML.
Metoda 3
1. n fereastra Document (figura 3.110), tastai: LUMINABLANDA2=LUMINABLANDA*LUMINABLANDA.
98
Figura 3.110
2. n fereastra Document selectai numai cifra 2 (figura 3.111).
Figura 3.111
3. Activai Quick Tag Editor prin icon-ul su ori direct de la tastatur (CTRL+T). Fereastra Quick Tag Editor se deschide cu meniunea Wrap Tag (vezi figura 3.112).
Figura 3.112
99
4. Selectai tag-ul de inserat, sup (figura 3.113).
Figura 3.113
Remarc. Cnd se afieaz lista de tag-uri, tastai s. Quick Tag Editor selecteaz primul tag care ncepe cu s (sau tastai rapid su). Derulai lista tag-urilor pn identificai i selectai tag-ul <sup>.
5. Acionai tasta Enter. 6. Acionai nc o dat tasta Enter. 7. Analizai codul HTML generat. 8. Vizualizai pagina Web ntr-un navigator (figura 3.114).
Figura 3.114
Iat cum scriem cu Dreamweaver 4 workspace expresia: LUMINABLANDA12=LUMINABLANDA1*LUMINABLANDA1 Vom aplica formatul fizic <SUB>. Pentru scrierea cu indice a expresiei de mai sus vom folosi tot Quick Tag Editor (Metoda 3), dup cum urmeaz.
100
Metoda 3
1. n fereastra Document (figura 3.115), tastai: LUMINABLANDA12=LUMINABLANDA1*LUMINABLANDA1
Figura 3.115
2. Selectai din LUMINABLANDA12 numai cifra 1 (figura 3.116).
Figura 3.116
3. Acionai Quick Tag Editor. Fereastra Quick Tag Editor se deschide cu meniunea Wrap Tag (vezi figura 3.117).
101
Figura 3.117
4. Tastai ntre cele dou paranteze sub. Se afieaz lista de tag-uri cu tag-ul sub selectat (figura 3.118).
Figura 3.118
5. Acionai tasta Enter. 6. Acionai nc o dat tasta Enter. 7. Analizai codul XHTML generat. 8. Vizualizai pagina Web ntr-un navigator (figura 3.119).
Figura 3.119
9. Selectai cifra 1 din LUMINABLANDA1 (primul factor din membrul drept!).
102
10. Repetai paii 3, 4, 5, 6, 7, 8. 11. Selectai cifra 1 din LUMINABLANDA1 (al doilea factor din membrul drept!). 12. Repetai paii 3, 4, 5, 6, 7, 8.
Dreamweaver MX
workspace
Scriei un text cu exponent sau cu indice
Pentru a scrie cu Dreamweaver MX workspace un text care conine exponeni sau indici, folosii una din cele 4 metode prezentate pentru Dreamweaver 4 workspace. Iat cum scriem cu Dreamweaver MX workspace expresia: LUMINA BLANDA2=LUMINA BLANDA * LUMINA BLANDA Vom aplica formatul fizic <sup>.
Metoda 2
1. Executai clic pe Window Others Code Inspector.
Remarc. Se deschide fereastra Code Inspector (figura 3.120).
Figura 3.120
103
Remarci: Pentru a deschide fereastra Code Inspector, putei folosi de asemenea tasta F10. Butonul View Options ( ) v permite parametrizarea modului de afiare a codului surs (figura 3.121).
Figura 3.121
2. Introducei codul XHTML (figura 3.122):

LUMINABLANDA<SUP>2</SUP>=LUMINABLANDA*LUMINABLANDA
Figura 3.122
3. Tastai F10 pentru a reveni n fereastra document. 4. Vizualizai pagina Web ntr-un browser (figura 3.123).
104
Figura 3.123
Iat cum scriem cu Dreamweaver MX workspace expresia: LUMINABLANDA12=LUMINABLANDA1*LUMINABLANDA1 Vom aplica formatul fizic <sub>.
Metoda 4 (vezi Dreamweaver 4 workspace)

1. Executai clic pe butonul (Show Code View), figura 3.124.
Figura 3.124
2. Introducei codul XHTML

LUMINABLANDA<sub>1</sub><sup>2</sup>=LUMINABLANDA<sub>1 </sub>*LUMINABLANDA<sub>1</sub>
Figura 3.125
105
3. Executai clic pe butonul sau (Show Code and Design Views) (Show Design View) pentru a reveni n fereastra
document. 4. Vizualizai pagina Web ntr-un navigator (figura 3.126).
Figura 3.126
Dreamweaver 4
workspace
Definii tipul de font
V mai amintii de tag-urile <font>, <basefont> din HTML? Dar de atributele lor: face, size, color? Ce vremuri, nu-i aa! Ele rmn clasice n via, dei W3C (World Wide Web Consortium) dorete s le desfiineze, recomandnd n schimb foile de stiluri (CSS-1). Deoarece nu toate navigatoarele recunosc foile de stiluri, se pare c formatarea clasic va mai avea nc zile frumoase de trit! Unde se termin realitatea, ncepe sperana! Pentru a aplica unui text fonturi de substituie cu Dreamweaver 4 workspace folosii una din metodele prezentate mai jos: Metoda 1 Inspectorul Properties; Metoda 2 Meniul Text.
106
Iat cum aplicm textului integral al paginii, fonturi de substituie din grupul de fonturi: Georgia, Times New Roman, Times, serif disponibile n Dreamweaver. 1. Selectai textul integral al paginii Web (figura 3.127).
Figura 3.127
2. Deschidei inspectorul Properties, via Window
Properties.
3. Derulai caseta Font Combination din inspectorul Properties, pn identificai i apoi selectai din lista corpurilor de liter, grupul de fonturi: Georgia, Times New Roman, Times, serif.
Figura 3.128
4. Executai clic pe grupul de fonturi selectat. 5. Analizai codul XHTML generat (figura 3.129).
107
Figura 3.129
Figura 3.130
Remarci: Dreamweaver 4 workspace propune ase familii de fonturi, care reprezint ase stiluri diferite: grupul de fonturi: Arial, Helvetica i sans-serif; grupul de fonturi: Times New Roman, Times i serif; grupul de fonturi: Courier New, Courier i mono; grupul de fonturi: Georgia, Times New Roman, Times, serif; grupul de fonturi: Verdana, Arial, Helvetica i sans-serif; grupul de fonturi: Geneva, Arial, Helvetica i san-serif. Navigatorul analizeaz secvenial lista fonturilor i se oprete la primul font disponibil n Windows, pe calculatorul dumneavoastr. Dac nici unul din fonturile analizate nu este disponibil, browser-ul va folosi corpul de liter prestabilit, de obicei Times New Roman. Atributul despre care am discutat, legat de definirea tipului de font folosete tag-ul <font>, care dup cum am precizat nu este ncurajat de W3C. i dumneavoastr v putei crea propriile grupuri de fonturi! Fonturile Verdana i Georgia au fost create de Matthew Carter la solicitarea lui Microsoft. Ele se difuzeaz gratuit.
Metoda 2
1. Selectai textul integral al paginii Web.
108
2. Executai clic pe Text Font i apoi selectai grupul de fonturi Georgia, Times New Roman, Times, serif (figura 3.131).
Figura 3.131
3. Executai clic pe grupul de fonturi selectat. 4. Analizai codul HTML generat. 5. Vizualizai pagina Web ntr-un browser.
Remarc. Dac dorii s utilizai un anume font cruia i cunoatei numele, introducei direct numele n zona de fonturi a inspectorului Properties.
Aplicaie Aplicai celei de-a doua fraze Felicitri pentru rbdarea de a ne fi descoperit! a paginii Web, fonturile de substituie din grupul Times New Roman, Times, serif. Indicaie. Selectai fraza menionat, dup care utilizai una din metodele prezentate.
109
Dreamweaver MX
workspace
Definii tipul de font
Pentru a aplica unui text fonturi de substituie cu Dreamweaver MX workspace, folosii una din cele dou metode prezentate pentru Dreamweaver 4 workspace. Iat cum aplicm textului integral al paginii, fonturi de substituie din grupul de fonturi: Georgia, Times New Roman, Times, serif disponibile n Dreamweaver.

1. Selectai textul integral al paginii Web. 2. Executai clic pe Text Font i apoi selectai grupul de fonturi:
Georgia, Times New Roman, Times, serif. 3. Executai clic pe grupul de fonturi selectat. 4. Analizai codul XHTML generat (figura 3.132).
110
Figura 3.132
Figura 3.133
Dreamweaver 4
workspace
Definii dimensiunea fontului
Putei sublinia sau reduce importana unui fragment de text schimbnd dimensiunea caracterelor. Valorile absolute posibile ntr-o pagin Web variaz de la 1 la 7 (vezi HTML 4).
111
Pentru a aplica unui text o anumit dimensiune cu Dreamweaver 4 workspace folosii una din metodele prezentate mai jos: Metoda 1 Inspectorul Properties; Metoda 2 Meniul Text, via Size. Iat cum definim dimensiunea (4) fontului pentru textul integral al paginii.
Metoda 1
1. Selectai textul integral al paginii Web (figura 3.134).
Figura 3.134
2. Deschidei inspectorul Properties, via Window
Properties.
3. Derulai caseta Size din inspectorul Properties, pn identificai i apoi selectai valoarea absolut (4) a corpului de liter (figura 3.135).
Figura 3.135
112
Remarc. Pentru a reveni la dimensiunea prestabilit a selectai None. corpului de liter,
4. Executai clic pe valoarea absolut 4. 5. Analizai codul HTML generat (figura 3.136).
Figura 3.136
Remarci: Selectai tag-ul <FONT>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul size. Citii conversaia 3, paragraful HTML 4 Definii dimensiunea fontului (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 3.137
Metoda 2
1. Selectai textul integral al paginii Web. 2. Executai clic pe Text Size 1 to 7 (figura 3.138).
113
Figura 3.138
3. Executai clic pe valoarea absolut (4), figura 3.138. 4. Analizai codul HTML generat. 5. Vizualizai pagina Web ntr-un browser.
Remarci: n HTML nu exist nici o modalitate de a stabili o dimensiune precis, n puncte a corpului de liter, dect folosind foile de stil n cascad (CSS). Corespondena ntre dimensiunea fix a fontului i dimensiunea apropiat de cea tipografic (exprimat n puncte) este urmtoarea: 1 la 8 puncte; 2 la 10 puncte; 3 sau dimensiunea implicit la 12 puncte; 4 la 14 puncte; 5 la 18 puncte; 6 la 24 puncte; 7 la 36 puncte. Dimensiunea implicit a fontului n Dreamweaver este 3. Dimensiunile relative variaz de la -7 la +7, dar dimensiunea obinut nu coboar niciodat sub 1 i nu depete niciodat valoarea 7. Pentru a aplica o dimensiune relativ n raport cu dimensiunea implicit (3), selectai cuvntul (fraza sau textul integral al paginii), apoi utilizai meniul Text Size Change, apoi alegei +1 pn la +4 sau -1 pn la -3,
sau,
n inspectorul Properties, utilizai meniul derulant Size (figura 3.139).
114
Figura 3.139
Aplicaie Atribuii valoarea (absolut) 7, dimensiunii fontului pentru cea de-a doua fraz Felicitri pentru rbdarea de a ne fi descoperit! a paginii Web. Indicaie. Selectai fraza indicat, dup care utilizai una din cele dou metode prezentate.
Dreamweaver MX
workspace
Definii dimensiunea fontului
Pentru a defini dimensiunea unui font cu Dreamweaver MX workspace, folosii una din metodele prezentate pentru Dreamweaver 4 workspace. Iat cum definim dimensiunea (4) fontului pentru textul integral al paginii.

1. Selectai textul integral al paginii Web. 2. Deschidei inspectorul Properties. 3. Derulai caseta Size din panoul Properties. 4. Executai clic pe 4 (valoarea absolut dorit) (figura 3.140).
Figura 3.140
115
Remarc. Dimensiunea 4 este aplicat fontului pentru textul integral al paginii.
Figura 3.141
Figura 3.142
116
Dreamweaver 4
workspace
Definii culorile
Putei schimba, dup cum cunoatei, culoarea ntregului text al paginii, a unei poriuni de text (cuvnt, fraz) sau a legturilor (vizitate, active) hipertext. Pe fundalul paginii dumneavoastr putei de asemenea aplica o culoare uniform sau o imagine. Dac le aplicai pe amndou, atenie la lizibilitate i nu doar att!
Colorai textul integral al paginii

Iat cum procedai pentru a colora n albastru tot textul paginii: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! 2003 LUMINA BLND. 1. Executai clic pe Modify Page Properties (figura 3.143).
Figura 3.143
117
Remarc. Se afieaz caseta de dialog Page Properties.
2. n caseta de dialog Page Properties executai clic n zona Text (culoarea textului). 3. Folosii selectorul de culori (Color Picker) pentru a alege o culoare (albastru) din paleta de culori (Executai clic cu pipeta pe culoarea respectiv), figura 3.144.
Figura 3.144
Remarc. Putei folosi o culoare personalizat.
4. n caseta de dialog Page Properties executai clic pe butonul OK. 5. Analizai codul HTML generat (figura 3.145).
Figura 3.145
118
Figura 3.146
Remarci: Tot textul paginii se afieaz n albastru. Putei de asemenea, alege o culoare pentru tot textul paginii, tastnd direct n caset, valoarea RGB hexazecimal a culorii (dac o cunoatei). Putei de asemenea tasta numele culorii (blue) n cazul nostru. Pentru a terge culoarea curent fr a alege o alt culoare, executai clic pe butonul Default Color din paleta de culori (selectai butonul Apply pentru a vedea pe ecran modificarea culorii textului). Paleta de culori (acceptate de browser-ele Internet Explorer i Netscape) Dreamweaver cuprinde 212 culori (paleta tradiional de culorii cuprinde 216 culori!). n Dreamweaver putei defini toate proprietile (atribute n HTML) unui obiect (dup ce l-ai selectat!) cu ajutorul inspectorului Properties, cu o singur excepie: Page Properties din meniul Modify.
Colorai un cuvnt sau o fraz

Pentru a colora un cuvnt sau o fraz cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Color; Metoda 2 Inspectorul Properties. Iat cum colorai n rou fraza de copyright, din pagin: 2003 LUMINA BLND.
Metoda 1
1. Selectai fraza menionat (figura 3.147).
119
Figura 3.147
Color (figura 3.148).
Figura 3.148
Remarc. Se afieaz caseta de dialog Color.
3. Alegei o culoare (rou) websafe (culoare recunoscut de diferite browser-e pe diferite platforme) n Basic colors sau creai (cu mult pruden) propria culoare personalizat n zona din dreapta a casetei (figura 3.149).
120
Figura 3.149
4. Analizai codul HTML generat.
Figura 3.150
Remarci: Selectai tag-ul <FONT>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul color. Citii conversaia 3, paragraful HTML Aplicai unui text formatele fizice i logice (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
121
Figura 3.151
Metoda 2
1. Selectai fraza menionat. 2. Deschidei Inspectorul Properties, via Window Properties.
3. Executai un clic pe meniul de alegere a culorii websafe (figura 3.152).
Figura 3.152 Remarc. Se afieaz codul hexazecimal al culorii (#FF0000).
4. Executai clic cu pipeta pe culoarea dorit (rou) din paleta de culori care se afieaz (figura 3.153).
Figura 3.153
122
Figura 3.154
Remarc. Dac cunoatei numele culorii, introducei direct numele culorii n caseta dedicat culorii din Inspectorul Properties.
Definii culoarea de fond

n mod implicit, culoarea de fond este alb (#FFFFFF) iar textul din pagin este de culoare neagr (#000000). Iat cum colorai n verde background-ul paginii dumneavoastr Web. 1. Executai clic pe Modify Page Properties.
2. n caseta de dialog Page Properties executai clic n caseta Background situat deasupra casetei Text (figura 3.155).
Figura 3.155
123
3. Folosii selectorul de culori (Color Picker) pentru a alege o culoare (verde) din paleta de culori (executai clic cu pipeta pe culoarea respectiv), figura 3.156.
Figura 3.156
Remarc. Putei alege de asemenea modul colorimetric, executnd clic pe meniul local situat n colul din dreapta sus, sau tastai numele culorii (green) n caseta background.
4. Executai clic pe butonul OK. 5. Analizai codul HTML generat (figura 3.157).
Figura 3.157
Remarci: Selectai tag-ul <BODY>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributele bgcolor i text. Citii conversaia 3, paragraful HTML Definii culorile (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
124
Figura 3.158
Remarc. Background-ul paginii s-a colorat n verde.
Dreamweaver MX
workspace
Definii culorile
Colorai textul integral al paginii

Iat cum procedai pentru a colora n albastru tot textul paginii: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! 2003 LUMINA BLND. 1. Executai clic pe Modify Page Properties.
2. n caseta de dialog Page Properties, care se afieaz executai clic pe n zona Text.
3. Executai clic pe culoarea albastru n paleta de culori (figura 3.159).
Figura 3.159
Remarc. Textul integral al paginii se afieaz n albastru.
4. Executai clic pe butonul OK.
125
Figura 3.160
Figura 3.161
Colorai un cuvnt sau o fraz

Pentru a colora un cuvnt sau o fraz cu Dreamweaver MX workspace, folosii una din metodele prezentate pentru Dreamweaver 4 workspace. Iat cum colorai n rou fraza de copyright: 2003 LUMINA BLAND.
126
Metoda 2
1. Selectai fraza menionat. 2. Deschidei panoul Properties. 3. Executai un clic pe meniul de alegere a culorii websafe (figura 3.162).
Figura 3.162
4. Executai clic cu pipeta pe culoarea dorit (rou) din paleta de culori care se afieaz (figura 3.163).
Figura 3.163
Textul selectat se afieaz n rou.
127
Figura 3.164
Figura 3.165
Remarc. Dac cunoatei numele culorii, introducei direct numele culorii n caseta dedicat culorii din Inspectorul Properties.
Definii culoarea de fond

Pentru background-ul paginii dumneavoastr putei utiliza fie o culoare uni fie o imagine. Dac le utilizai pe amndou, imaginea va fi afiat cu prioritate.
128
Iat cum colorai n verde background-ul paginii dumneavoastr Web. 1. Executai clic pe Modify Page Properties.
2. n caseta de dialog Page Properties care se afieaz executai clic n caseta Background. 3. Executai clic pe culoarea verde n paleta de culori. 4. Executai clic pe butonul OK. 5. Analizai codul XHTML generat (figura 3.166).
Figura 3.166
Figura 3.167
129
Dreamweaver MX
workspace
Creai propriile stiluri HTML
ntr-un document sau ntr-un site Web complet, problema formatrii textelor apare n mod regulat. Pentru a ctiga timp i a v menaja sistemul nervos folosii stilurile HTML! Nu confundai stilurile HTML cu foile de stiluri n cascad (CSS). Stilurile HTML nu sunt dect o colecie de tag-uri <FONT> i alte atribute de stiluri pe care le putei salva n Dreamweaver i apoi folosi n mod elegant. Marea diferen ntre stilurile HTML i CSS-uri este acea c dac modificai un text formatat cu un stil, aceast modificare nu actualizeaz stilul corespunztor.
Creai un stil HTML

Pentru a crea stiluri HTML cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via HTML Styles Metoda 2 Panoul Design New Style;
Subpanoul HTML Styles.
Remarc. Pentru a crea stiluri HTML cu Dreamweaver 4 workspace folosii aceleai metode.
Iat cum procedm pentru a crea un nou stil HTML: bold+red.
Metoda 2
1. n panoul Design, executai clic pe subpanoul HTML Styles (figura 3.168).
130
Figura 3.168
2. n subpanoul HTML Styles, executai clic pe butonul Style), figura 3.169.
(New
Figura 3.169
Remarc. Se afieaz caseta de dialog Define HTML Style.
3. n caseta de dialog Define HTML Style (figura 3.170) executai urmtoarele aciuni: n zona Name: n zona Apply to tastai numele stilului: bold+red; alegei Selection(a) pentru a crea un stil ce urmeaz a fi aplicat caracterelor; dac dorii s creai un stil ce se va aplica unui paragraf selectai Paragraf(); n zona When Applying alegei Clear Existing Style pentru
131
a aplica stilul creat, suprimnd elementele de formatare existente; n zona Font Attributes definii toate atributele de formatare: culoarea, fontul, stilul dimensiunea, iar caracterelor
apoi executai clic pe butonul OK.
Figura 3.170 Remarc. Noul stil se afieaz n subpanoul HTML Styles (figura 3.171).
Figura 3.171
132
Aplicai un stil HTML (predefinit)
Pentru a aplica stiluri HTML predefinite, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via HTML Styles; Metoda 2 Meniul Window, via HTML Styles; Metoda 3 Panoul Design. Iat cum aplicm cuvntului Bine din paragraful Bine ai venit! stilul predefinit bold+red.
Metoda 3
1. Selectai cuvntul Bine n paragraful: Bine ai venit!. 2. n panoul Design, executai clic pe subpanoul HTML Styles. 3. n lista de stiluri predefinite, care se afieaz, executai clic pe stilul bold+red (figura 3.172).
Figura 3.172
Remarci: Stilurile HTML aplicabile caracterelor sunt precedate de simbolul a sau a+. Cele care se aplic paragrafelor sunt precedate de simbolul . Simbolul a aplic stilul predefinit suprimnd formatarea existent. Simbolul a+ aplic stilul predefinit adugndu-l la formatarea existent. Dac opiunea Auto Apply este activat, stilul se aplic direct.
133
4. Executai clic pe butonul Apply, n cazul n care opiunea nu a fost activat (figura 3.173).
Figura 3.173
Figura 3.174
Figura 3.175
134
Remarci: Putei modifica, duplica i suprima un stil existent utiliznd butoanele de la baza ferestrei HTML Styles. Toate stilurile HTML sunt stocate n fiierul styles.xml din folder-ul Library.
Aplicaie Modificai toate atributele elementului <font> ntr-o singur caset de dialog. Utilizai panoul Insert. Iat care este procedura pe care v invitm s-o aplicai. 1. Selectai textul Felicitri pentru rbdarea de a ne fi descoperit! (figura 3.176).
Figura 3.176 2. n subpanoul Text din grupul de panouri Insert, executai clic pe butonul (Font Tag Editor), figura 3.177.
Figura 3.177 3. n caseta de dialog Tag Editor Font care se afieaz , n categoria General, alegei n zona Face, o familie de caractere; n zona size alegei dimensiunea caracterelor, iar n zona color alegei culoarea caracterelor (figura 3.178).
135
Figura 3.178 4. Executai clic pe butonul OK. 5. Analizai codul XHTML generat (figura 3.179).
Figura 3.179 6. Vizualizai pagina Web ntr-un browser (figura 3.180).
Figura 3.180
136
Dreamweaver MX
Testai-v cunotinele
Tem
1. Cum dai un titlu paginii cu Dreamweaver 4 workspace/ Dreamweaver MX workspace? Descriei pe scurt una din metodele folosite. 2. Descriei pe scurt procedura Dreamweaver MX de inserare caractere speciale i caractere proprii (X)HTML. 3. Descriei pe scurt metodele Dreamweaver 4 workspace /Dreamweaver MX workspace de formatare a unui text cu caractere ngroate (bolduite) i cursive (italice). 4. Aplicai unui text formatul fizic big cu metoda Quick Tag Editor. 5. Descriei pe scurt procedura Dreamweaver MX workspace de inserare a abrevierilor i acronimelor. 6. Cum procedai pentru a scrie cu Dreamweaver MX un text care conine exponent sau indice? 7. Cum definii cu Dreamweaver 4 workspace: tipul de font, dimensiunea fontului, culoarea fontului pentru: textul integral al paginii; un cuvnt, o fraz.
Vizitai site-urile
www.macromedia.com/fr/software/dreamweaver www.manipulation.com www.projectseven.com/dreamweaver
Conversaia 4
Creai i formatai paragrafele cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Creai un paragraf Dreamweaver 4 workspace, MX workspace Schimbai alinierea unui paragraf Dreamweaver 4 workspace, MX workspace Trecei la linia urmtoare ntr-un paragraf Dreamweaver 4 workspace, MX workspace Indentai un paragraf Dreamweaver 4 workspace, MX workspace Inserai un text preformatat Dreamweaver 4 workspace, MX workspace Creai un titlu Dreamweaver 4 workspace, MX workspace Creai liste cu simboluri (simple), numerotate (ordonate) i de definiii Dreamweaver MX - Tem
Dreamweaver 4
workspace
Creai un paragraf
n Dreamweaver, ori de cte ori acionai tasta Enter, creai un nou paragraf. Acesta este separat de precedentul prin echivalentul unei linii vide.
138
Iat cum structurm textul din aplicaia noastr n trei paragrafe:
Primul paragraf: Al doilea paragraf:
Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit!
Al treilea paragraf: Dorim s ne cunoatem mai bine i s rmnem

mpreun! LUMINA BLND este puternic i nu doar att! 1. Introducei textul n fereastra Document (figura 4.1).
Figura 4.1
2. Executai clic acolo unde trebuie s nceap al doilea paragraf (figura 4.2).
Figura 4.2
3. Acionai tasta Enter. ntre cele dou blocuri de text se afieaz o linie vid, transformndu-le n dou paragrafe distincte (vezi figura 4.3).
139
Figura 4.3
Figura 4.4
Remarci: Selectai tag-ul <P>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 4, paragraful: HTML- Creai un paragraf (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
5. Repetai paii 2 i 3 pentru cel de-al treilea paragraf. 6. Analizai codul HTML generat (figura 4.5).
Figura 4.5
140
Figura 4.6
Dreamweaver MX
workspace
Creai un paragraf
Dreamweaver MX workspace creeaz un nou paragraf de fiecare dat cnd acionai tasta ENTER. Putei de asemenea scinda un text existent n mai multe paragrafe. Iat cum scindm n trei paragrafe urmtorul text: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND este puternic i nu doar att! Primul paragraf este Bine ai venit!, iar al doilea paragraf este: Felicitri pentru rbdarea de a ne fi descoperit! 1. Introducei textul. 2. Executai clic dup primul semn al mirrii (!). 3. Acionai tasta Enter. 4. Acionai clic dup cel de-al doilea semn al mirrii (!) din cadrul paragrafului generat.
141
5. Acionai tasta Enter. 6. Analizai codul XHTML generat (figura 4.7).
Figura 4.7
Remarci: Selectai tag-ul <p> (executai clic pe tag-ul <p> n bara de stare) i executai clic pe butonul (figura 4.8).
Figura 4.8
Panoul Reference afieaz informaiile despre tag-ul selectat (<p>), figura 4.9.
142
Figura 4.9
Citii Conversaia 4, paragraful: XHTML-Creai un paragraf (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Dreamweaver 4
workspace
Schimbai alinierea unui paragraf
n Dreamweaver 4 workspace sunt permise urmtoarele tipuri de alinieri: Left, Center, Right i Justify. Pentru a modifica cu Dreamweaver 4 workspace alinierea paragrafelor, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Align; Metoda 2 Inspectorul Properties. Iat cum centrm primul paragraf, cum aliniem la dreapta cel de-al doilea paragraf i cum aliniem la stnga cel de-al treilea paragraf.
Metoda 1
1. Executai clic n primul paragraf (selectai paragraful), figura 4.10.
143
Figura 4.10
Align
Center (figura 4.11).
Figura 4.11
Primul paragraf se afieaz n centrul paginii Web (vezi figura 4.12).
Figura 4.12
144
Figura 4.13
Remarci: Selectai tag-ul <p>, deschidei panoul Reference, utilizai meniul derulant Description pentru a vizualiza atributul align cu valoarea center. Citii Conversaia 4, paragraful: HTML4 - Schimbai alinierea unui paragraf (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.14
Remarci: Pentru a alinia la dreapta cel de-al doilea paragraf, utilizai Metoda 1, modificnd pasul 2, dup cum urmeaz: 2. Executai clic pe Text Align Right. Pentru a alinia la stnga cel de-al treilea paragraf, utilizai Metoda 1, modificnd pasul 2, dup cum urmeaz: 2. Executai clic pe Text Align Left
145
Metoda 2
1. Selectai primul paragraf (figura 4.15).
Figura 4.15

Figura 4.16
(center) din inspectorul Properties.
Figura 4.17
Remarci: Selectai tag-ul <p>, deschidei panoul Reference, utilizai meniul Description pentru a vizualiza atributul align cu valorile left i right. Citii Conversaia 4, paragraful: HTML4 - Schimbai alinierea unui paragraf (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
146
Pentru a alinia la dreapta cel de-al doilea paragraf, utilizai Metoda 2, modificnd pasul 2, dup cum urmeaz: (Align Right), din inspectorul 2. Executai clic pe butonul Properties (figura 4.19).
Figura 4.19 Pentru a alinia la stnga cel de-al treilea paragraf, utilizai Metoda 2, modificnd pasul 2, dup cum urmeaz: (Align Left), din inspectorul Properties 2. Executai clic pe butonul (figura 4.20). Figura 4.20 Aplicaie Aplicai alinierea de tip justify paragrafului: Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND este puternic i nu doar att!. Indicaie. Utilizai Metoda 1, executnd clic pe Text Align Justify
sau,
Utilizai Metoda 2, executnd clic pe butonul Properties. (Align Justify), din inspectorul
147
Dreamweaver MX
workspace
Schimbai alinierea unui paragraf
n Dreamweaver MX workspace sunt permise urmtoarele tipuri de alinieri: left; center; right; Justify. Pentru a modifica cu Dreamweaver MX workspace alinierea paragrafelor, folosii una din metodele prezentate pentru Dreamweaver 4 workspace. Iat cum procedm pentru a centra primul paragraf Bine ai venit!.
Metoda 1
1. Selectai paragraful. 2. Executai clic pe Text Align Center.
Figura 4.21
148
Figura 4.22
Aplicaii Aliniai la dreapta cel de-al doilea paragraf: Felicitri pentru rbdarea de a ne fi descoperit! Aliniai la stnga cel de-al treilea paragraf: Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLND este puternic i nu doar att!. Aliniai la dreapta primul paragraf Bine ai venit!, modificnd atributul elementului XHTML: <p align=center>Bine ai venit!</p> cu inspectorul de tag-uri. Iat care este procedura pe care trebuie s-o urmai.
1. Afiai inspectorul de tag-uri, via Window

sau,
Acionai tasta F9. Se afieaz panoul Code (figura 4.23).
Tag Inspector
149
Figura 4.23
Remarc. n partea superioar a panoului putei vizualiza toat structura HTML a documentului.
2. Selectai elementul (X)HTML <p> n aceast fereastr sau selectai

elementul grafic <p> n pagin.
3. n partea inferioar a ferestrei Inspectorului de tag-uri, executai clic

pe atributul align pe care dorii s-l modificai pentru a afia valorile disponibile (figura 4.24).
Figura 4.24
4. Selectai valoarea right (figura 4.25).
150
Figura 4.25 Pagina Web este actualizat imediat.
Figura 4.26
151
Figura 4.27 Aplicai alinierea de tip justify paragrafului: Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLND este puternic i nu doar att!
Metoda 2
1. Selectai paragraful. 2. Executai clic pe butonul 4.28). (Align Justify) n panoul Properties (figura
Figura 4.28
Remarc. n Dreamweaver MX workspace este permis tag-ul de aliniere Justify.
152
Figura 4.29 4. Vizualizai pagina Web ntr-un browser (4.30).
Figura 4.30
153
Dreamweaver 4
workspace
Trecei la linia urmtoare ntr-un paragraf
n cadrul aceluiai paragraf este posibil de a trece la o nou linie fr a crea un nou paragraf. Pentru a crea cu Dreamweaver 4 workspace un salt de linie n cadrul aceluiai paragraf, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Special Characters Metoda 2 Panoul Insert; Metoda 3 Shift + Enter. Iat cum form un salt de linie al celei de-a doua fraze din paragraful Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND este puternic i nu doar att!. Line Break;
Metoda 1
1. Executai clic naintea cuvntului LUMINA (figura 4.31).
Figura 4.31
154
2. Executai clic pe Insert Special Characters Line Break.
Remarc. Se insereaz un salt de linie (vezi figura 4.32).
Figura 4.32
Figura 4.33
Figura 4.34
155
Metoda 2
Se modific pasul 2 din Metoda 1, dup cum urmeaz: 2. n panoul Insert, executai clic pe butonul Break) din categoria Characters (figura 4.35). (Insert Line
Figura 4.35
Punctul de inserie se deplaseaz la nceputul liniei urmtoare, dar rmne tot timpul n acelai paragraf (vezi figura 4.36).
Figura 4.36
Remarc. Pentru a vizualiza salturile de linie n pagina dumneavoastr Web trebuie s acionai elementul invizibil Line Breaks iar apoi s-l afiai dup cum urmeaz: 1. Executai clic pe EDIT Preferences Invisible Elements
2. Activai opiunea Line Breaks iar apoi executai clic pe butonul OK. 3. Afiai elementele invizibile executnd clic pe View
Elements. Visual Aids Invisible
156
Dreamweaver MX
workspace
Trecei la linia urmtoare ntr-un paragraf
Dac dorii s trecei la linia urmtoare n cadrul aceluiai paragraf, va trebui s inserai un salt de linie (elementul <br /> n XHTML). Pentru a crea cu Dreamweaver MX workspace un salt de linie n cadrul aceluiai paragraf, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Special Characters Metoda 2 Grupul de panouri Insert; Metoda 3 Shift + Enter. Iat cum form un salt de linie al celei de-a doua fraze din paragraful Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND este puternic i nu doar att!. Line Break;
Metoda 2
1. Executai clic naintea cuvntului LUMINA cu care ncepe cea de-a doua fraz a textului introdus n pagina Document. 2. n grupul de panouri Insert executai clic pe subpanoul Characters.
Remarc. Se afieaz subpanoul Characters (figura 4.37).
Figura 4.37
(Line Break), figura 4.38.
Figura 4.38
157
Punctul de inserie se deplaseaz la nceputul liniei urmtoare, dar rmne tot timpul n acelai paragraf (figura 4.39).
Figura 4.39
Remarc. Pentru a vizualiza salturile de linie n pagina dumneavoastr Web aplicai procedura prezentat la Dreamweaver 4 workspace.
Dreamweaver 4
workspace
Indentai un paragraf
n Dreamweaver 4 workspace, pentru un paragraf sunt permise indentri stnga-dreapta (de mrime egal). Pentru a indenta cu Dreamweaver 4 workspace un paragraf, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Indent; Metoda 2 Inspectorul Properties. Iat cum indentm dreapta paragraful Felicitri pentru rbdarea de a ne fi descoperit!.
158
Metoda 1
1. Selectai paragraful (figura 4.40).
Figura 4.40
Indent.
Figura 4.41
Remarc. Paragraful se afieaz decalat, spre dreapta (vezi figura 4.42).
Figura 4.42
159
Figura 4.43
Remarci: Atunci cnd aplicai indentri unui paragraf, Dreamweaver 4 workspace utilizeaz elementul <BLOCKQUOTE> </BLOCKQUOTE>. Selectai tag-ul <BLOCKQUOTE>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 4, paragraful: HTML4- Indentai un paragraf (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.44
Metoda 2
Se modific pasul 2 din Metoda 1, dup cum urmeaz: 2. Executai clic pe butonul Properties (figura 4.45). (Text Indent) din inspectorul
160
Figura 4.45
Remarci: De fiecare dat cnd creai o nou indentare, limea paragrafului se diminueaz. Pentru a indenta stnga paragraful menionat, utilizai Metoda 1, modificnd pasul 2, dup cum urmeaz: 2. Executai clic pe Text Outdent sau, utilizai Metoda 2, modificnd pasul 2 dup cum urmeaz:
(Text Outdent) din inspectorul Properties.
Dreamweaver MX
workspace
Indentai un paragraf
Pentru a indenta cu Dreamweaver MX workspace un paragraf, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Indent; Metoda 2 Panoul Properties; Metoda 3 Grupul de panouri Insert. Iat cum indentm dreapta paragraful Felicitri pentru rbdarea de a ne fi descoperit!.
Metoda 3
1. Selectai paragraful. 2. n grupul de panouri Insert, executai clic pe subpanoul Text. 3. n subpanoul Text, executai clic pe butonul
Figura 4.46
Remarc. Paragraful se afieaz indentat, spre dreapta.
(figura 4.46).
161
Figura 4.47
Remarci: n (X)HTML n afara utilizrii foilor de stiluri n cascad (CSS-1) nu este posibil de a crea pentru prima linie a unui paragraf indentri stnga/dreapta. Atunci cnd aplicai indentri unui paragraf, Dreamweaver utilizeaz elementul HTML <blockquote>, care este prevzut de W3C pentru punerea n eviden a citatelor de text. Citii Conversaia 4, paragraful: XHTML - Indentai un paragraf (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.48
162
Dreamweaver 4
workspace
Inserai un text preformatat
Preformatarea unui text permite crearea cu uurin a coloanelor de text n pagina dumneavoastr Web. Toate spaiile definite de tag-ul HTML <PRE> sunt conservate. La ora actual, utilizarea tag-ului <PRE> este din ce n ce mai redus (vezi recomandarea consoriului W3C). Pentru a insera cu Dreamweaver 4 workspace un text preformatat, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Paragraph Format Text; Metoda 2 Inspectorul Properties. Iat cum inserm un text preformatat Bine ai venit!, lsnd ntre cuvinte opt spaii. Preformatted
Metoda 1
1. Introducei textul Bine ai venit!. 2. Selectai textul (figura 4.49).
Figura 4.49
3. Executai clic pe Text Text (figura 4.50).
Paragraph Format
Preformatted
163
Figura 4.50
4. Introducei cte opt spaii ntre cuvinte.

Remarc. Textul se afieaz cu opt spaii ntre cuvinte (figura 4.51).
Figura 4.51
Figura 4.52
164
Remarci: Selectai tag-ul <PRE>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 4, paragraful: HTML4- Comunicai browser-ului s afieze liniile vide, spaiile suplimentare etc. (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003)
Figura 4.53
Metoda 2
Se modific pasul 3 din Metoda 1, dup cum urmeaz: 3. n inspectorul Properties, afiai meniul Format i apoi executai clic pe Preformatted (figura 4.54).
Figura 4.54
Aplicaii Lsai un spaiu de 15 pixeli ntre primele dou paragrafe. Indicaie. Pentru a ajusta spaiul vertical, acionai tasta Enter de cte ori este necesar 15 ori (vezi figura 4.55). Analizai codul HTML generat.
165
Figura 4.55 Lsai un spaiu de 25 de pixeli naintea primei linii a textului: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND este puternic i nu doar att!. Indicaie. Pentru a ajusta spaiul vertical, acionai bara de spaii de cte ori este necesar 25 de ori (figura 4.56). Analizai codul HTML generat.
Figura 4.56
Dreamweaver MX
workspace
Inserai un text preformatat
Pentru a insera cu Dreamweaver MX workspace un text preformatat, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Paragraph Format Text; Preformatted
166
Metoda 2 Panoul Properties; Metoda 3 Grupul de panouri Insert. Iat cum inserm un text preformatat Bine ai venit!, lsnd ntre cuvinte opt spaii.
Metoda 3
1. Introducei textul. 2. Selectai textul pe care l-ai introdus. 3. n grupul de panouri Insert, executai clic pe subpanoul Text. 4. n subpanoul Text, executai clic pe butonul
Figura 4.57
(figura 4.57).
5. Introducei cte opt spaii ntre cuvinte. 6. Analizai codul XHTML generat (figura 4.58).
Figura 4.58
Remarc. Citii Conversaia 4, paragraful: XHTML- Comunicai browser-ului s afieze liniile vide, spaiile suplimentare etc. (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003)
167
Figura 4.59
Dreamweaver 4
workspace
Creai un titlu
Cnd aplicai un antet, aliniat (stnga, dreapta, centru mai puin justify) sau nu, textul apare bolduit, pe cel mult ase nivele Header 1 (dimensiunea cea mai mare) la Header 6 (dimensiunea cea mai mic). Pentru a defini un antet cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Paragraph Format; Metoda 2 Inspectorul Properties. Iat cum afim centrat, pe trei nivele de titlu, paragraful Bine ai venit!.
Metoda 1
1. Selectai textul ce urmeaz a fi convertit n titlu (figura 4.60).
168
Figura 4.60
2. Centrai textul, executnd clic pe butonul inspectorul Properties (figura 4.61).

Figura 4.61
(center) din
3. Executai clic pe Text 4.62).
Paragraph Format
Heading 1 (figura
Figura 4.62
Remarc. Titlul se afieaz centrat, cu dimensiunea cea mai mare H1 (figura 4.63).
169
Figura 4.63
Figura 4.64
Remarci: Selectai tag-ul <H1>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul Description pentru a vizualiza atributul align. Citii Conversaia 4, paragraful: HTML4- Creai un titlu (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
5. Repetai pasul 3 nlocuind Heading1 cu Heading 2, Heading 3. 6. Analizai codul HTML generat (figura 4.65).
Figura 4.65
170
Remarci: Selectai tag-urile <H2>, <H3> deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul Description pentru a vizualiza atributul align.
Figura 4.66
Metoda 2
Se modific pasul 3 din Metoda 1, dup cum urmeaz: 3. n inspectorul Properties, afiai meniul Format i apoi executai clic pe nivelul de titlu Heading 1 (figura 4.67).
Figura 4.67 Aplicaie Creai urmtoarele titluri centrate:
Primul titlu: Al doilea titlu: Al treilea titlu: Al patrulea titlu: Al cincilea titlu:
Primul paragraf Un antet de nivel 3 Al doilea paragraf Ultimul Paragraf Un antet de nivel 6
171
Atunci cnd un text conine mai multe elemente care trebuie s fie, de exemplu, centrate (paragrafe, antet-uri, imagini), putei optimiza codul, utiliznd tag-ul <DIV> care permite crearea unei diviziuni logice n cadrul documentului. Tag-ul <DIV> recunoate atributul align. Iat cum definim diviziunea logic DIV n documentul HTML pentru afiarea centrat a titlurilor menionate. 1. Tastai i inserai toate elementele necesare pentru a afia codul surs (figura 4.68).
Figura 4.68 2. Introducei tag-ul: <DIV align=center> (figura 4.69)
Figura 4.69
172
3. Introducei tag-ul de nchidere </DIV> dup toate elementele de centrat (figura 4.70).
Figura 4.70
Remarci: Selectai tag-ul <DIV>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul Description pentru a vizualiza atributul align.
Figura 4.71
173
Dreamweaver MX
workspace
Creai un titlu
Pentru a crea o ierarhie n paginile dumneavoastr Web, adugai titluri i subtitluri. Pentru a defini un antet cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via Paragraph Format; Metoda 2 Panoul Properties; Metoda 3 Grupul de panouri Insert. Iat cum afim centrat, pe trei nivele de titlu, paragraful Bine ai venit!.
Metoda 3
1. Selectai textul ce urmeaz a fi convertit n titlu. 2. Centrai textul. 3. n grupul de panouri Insert, executai clic pe subpanoul Text. 4. n subpanoul Text, executai clic pe butonul
Figura 4.72
(figura 4.72).
5. Titlul se afieaz centrat, bolduit cu caractere de cea mai mare dimensiune. 6. Repetai pasul 4 executnd clic pe butonul butonul . i apoi pe
174
Figura 4.73
Remarci: Citii Conversaia 4, paragraful: XHTML- Creai un titlu (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). n (X)HTML titlurile au fost create pentru a indica vizual importana lor ntr-un document foarte mare.
Creai liste cu simboluri (simple),
Dreamweaver 4
workspace
numerotate (ordonate) i de definiii
Listele permit crearea unei enumerri de elemente. n Dreamweaver, ca i n HTML putei crea liste cu simboluri (simple), liste numerotate (ordonate), liste de definiii. Avei de asemenea posibilitatea de a imbrica listele, unele ntr-altele.
Creai o list cu simboluri

Pentru a crea cu Dreamweaver 4 workspace o list cu simboluri, folosii una din metodele prezentate mai jos:
175
Metoda 1 Meniul Text, via List Unordered List; Metoda 1; Metoda 1 modificat Selectai elementele listei Metoda 2 Inspectorul Properties. Metoda 2;
Metoda 2 modificat Selectai elementele listei
Iat cum crem cu Dreamweaver 4 workspace, o list cu simboluri pentru serviciile oferite de firma LUMINA BLND: turism, training, service PC-uri.
Metoda 1
1. Introducei textul: LUMINA BLND ofer urmtoarele
servicii:, iar apoi acionai tasta Enter (figura 4.74).
Figura 4.74
List
Unordered List (figura 4.75).
Figura 4.75
176
Remarc. Se afieaz primul bumb (punct negru), figura 4.76.
Figura 4.76
3. Tastai elementele listei, acionnd tasta Enter dup fiecare element. n momentul n care ai terminat de introdus elementele listei, acionai de dou ori tasta Enter (figura 4.77).
Figura 4.77
Figura 4.78
177
Remarci: Selectai tag-urile <UL>, <LI>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 4, paragraful: HTML4 - Creai o list cu simboluri (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.79
Metoda 1 modificat
1. Selectai elementele listei (figura 4.80).
Figura 4.80
List
Unordered List. Se afieaz lista
cu simboluri (figura 4.81).
178
Figura 4.81
3. Analizai codul HTML generat. 4. Vizualizai pagina Web ntr-un browser.
Metoda 2
1. Executai clic pe butonul Properties. 2. Tastai elementele listei, acionnd tasta Enter dup fiecare element. n momentul n care ai terminat de introdus elementele listei, acionai de dou ori tasta Enter. 3. Analizai codul HTML generat. 4. Vizualizai pagina Web ntr-un browser. (Unordered List) din inspectorul
Metoda 2 modificat
1. Selectai elementele listei. 2. Executai clic pe butonul Properties. 3. Analizai codul HTML generat. 4. Vizualizai pagina Web ntr-un browser. (Unordered list) din inspectorul
179
Aplicaie Marcai elementele listei (cu simboluri) cu un ptrat. Iat cum schimbai stilul marcajului pentru toate elementele listei. 1. Executai clic pe un element oarecare al listei.
Figura 4.82 2. Executai clic pe Text List Properties.
Remarc. Putei, de asemenea utiliza inspectorul Properties, acionnd butonul List Item (figura 4.83).
Figura 4.83 3. n meniul derulant List Type, selectai Bulleted List (figura 4.84).
Figura 4.84 4. Selectai Square din meniul derulant Style (figura 4.85).
180
Figura 4.85
Remarc. Pentru a utiliza cel de-al treilea stil circle, va trebui s afiai codul surs dup care s introducei atributul circle (figura 4.86).
Figura 4.86 5. n caseta de dialog List Properties executai clic pe butonul OK.
Remarc. Se afieaz lista formatat.
Figura 4.87
181
Remarc. Selectai tag-ul <UL>, deschidei panoul Reference i utilizai meniul Description pentru a vizualiza atributul type.
Figura 4.88
Creai o list ordonat

Pentru a crea cu Dreamweaver 4 workspace o list ordonat, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via List Ordered List; Metoda 1;
Metoda 1 modificat Selectai elementele listei Metoda 2 Inspectorul Properties.
Metoda 2;
Iat cum crem cu Dreamweaver 4 workspace o list ordonat pentru serviciile oferite de firma LUMINA BLND: turism, training, service PC-uri.
Metoda 1
Modificai pasul 2 (vezi Metoda 1, List cu simboluri), dup cum urmeaz: 2. Executai clic pe List Ordered List (figura 4.89).
182
Figura 4.89
Remarc. Se afieaz 1 (figura 4.90).
Figura 4.90
Remarci: Codul HTML generat este ilustrat n figura 4.91.
Figura 4.91
183
Pagina Web afiat n Internet Explorer este ilustrat n figura 4.92.
Figura 4.92
Metoda 1 modificat
Modificai pasul 2 (vezi Metoda 1 modificat, List cu simboluri) dup cum urmeaz: 2. Executai clic pe Text List Ordered List
Metoda 2
Modificai pasul 1 (vezi Metoda 2, List cu simboluri) dup cum urmeaz: 1. Executai clic pe butonul Properties.
Figura 4.93
Remarc. Se afieaz lista ordonat din figura 4.94.
(Ordered List) din inspectorul
Figura 4.94
184
Remarci: Codul HTML generat este ilustrat n figura 4.95. Selectai tag-ul <OL>, deschidei panoul Reference i citii informaiile care se afieaz.
Figura 4.95
Pagina Web afiat n Internet Explorer este ilustrat n figura 4.96.
Figura 4.96
Metoda 2 modificat
1. Selectai elementele listei. 2. Executai clic pe butonul Properties. 3. Analizai codul HTML. 4. Vizualizai pagina Web ntr-un browser. (Ordered List) din inspectorul
185
Aplicaii Schimbai stilul de numerotare din lista ordonat creat anterior cu stilul: cifre romane minuscule (i, ii, iii). Iat care este procedura pe care trebuie s-o urmai. 1. Executai clic pe un element oarecare al listei numerotate. 2. Executai clic pe Text List Properties
Se afieaz caseta de dialog List Properties (figura 4.97).
Figura 4.97 Remarc. Putei, de asemenea utiliza inspectorul Properties, acionnd butonul List Item (figura 4.98).
Figura 4.98 3. Selectai n caseta List Type opiunea Numbered List (figura 4.99).
Figura 4.99
186
4. Selectai n caseta Style stilul Roman Small [i, ii, iii ] (figura 4.100).
Figura 4.100 5. Executai clic pe butonul OK. Se afieaz lista numerotat, cu stilul Roman Small (figura 4.101).
Figura 4.101 6. Analizai codul HTML generat (figura 4.102).
Figura 4.102
187
Remarci: Selectai tag-ul <OL>, deschidei panoul Reference i utilizai meniul Description pentru a vizualiza atributul type.. Citii Conversaia 4, paragraful: HTML4- Creai o list ordonat (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.103 Schimbai stilul Roman Small din lista ordonat creat anterior cu stilul Alphabet Large (A, B, C). Indicaie. Selectai n zona Style stilul Alphabet Large (A, B, C), via Text Properties (figura 4.104). List
Figura 4.104
Remarc. Se afieaz lista numerotat cu stilul Alphabet Large (A, B, C), figura 105.
Figura 4.105
188
Schimbai numrul de ordine iniial (1) din stilul Number (1, 2, 3) cu numrul 7. Indicaie. Selectai n zona Style stilul Number (1, 2, 3) i tastai 7 n caseta Start Count (Number), via Text List Properties.
Creai o list de definiii

Iat cum crem cu Dreamweaver 4 workspace o list de definiii aceeai pe care am creat-o i n (X)HTML. 1. Executai clic pe Text List Definition List (figura 4.106).
Figura 4.106
2. Introducei textul Lista cu simboluri (prima entitate ce urmeaz a fi definit) apoi acionai tasta Enter (figura 4.107).
Figura 4.107
189
3. Introducei definiia pentru primul element al listei, iar apoi acionai tasta Enter (figura 4.108).
Figura 4.108
4. Introducei al doilea element al listei Lista numerotat, iar apoi acionai tasta Enter (figura 4.109).
Figura 4.109
5. Introducei definiia pentru cel de-al doilea element al listei. n momentul n care ai terminat de introdus elementele listei, acionai de dou ori tasta Enter (figura 4.110).
190
Figura 4.110
Figura 4.111
Remarci: Selectai tag-urile <DL>, <DT>, <DD>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 4, paragraful: HTML4- Creai o list de definiii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
191
Figura 4.112 Remarc. Pentru a repera ce nivel al listei ai introdus, privii cu atenie bara de stare a ferestrei document. Tot timpul, aceasta indic tag-ul HTML n care v aflai: <DL> / <DT> / <DD>.
Creai o list imbricat

Cu Dreamweaver 4 workspace putei imbricate. Iat cum crem n Dreamweaver 4 workspace aceeai list imbricat pe care ai realizat-o n HTML. 1. Executai clic pe butonul Properties. 2. Introducei prima linie a listei Partea nti, apoi acionai tasta Enter. 3. Executai clic pe butonul Properties (figura 4.113).
Figura 4.113
imbrica listele, unele ntr-altele
pentru a obine mai multe nivele ierarhice vizibile, cu o indentare a listei
(Ordered List) din inspectorul
(Text Indent) din inspectorul
192
4. Introducei liniile: Capitolul 1, Capitolul 2 corespunztoare acestui nivel. Dup fiecare linie acionai tasta Enter (figura 4.114).
Figura 4.114
5. Executai clic pe butonul Properties (figura 4.115).

Figura 4.115
(Text Outdent) din inspectorul
Se afieaz prima parte a listei imbricate (figura 4.116).
Figura 4.116
6. Introducei restul listei respectnd paii anteriori (figura 4.117).
193
Figura 4.117
7. Acionai de dou ori tasta Enter. 8. Schimbai stilul Number (1, 2, 3) n Roman Large (I, II, III), figura 4.118.
Figura 4.118
9. Schimbai stilul Number (1, 2, 3) n Alphabet Large (A, B, C) pentru toate cele trei liste imbricate (nested). 10. Analizai codul HTML generat. 11. Vizualizai pagina Web ntr-un browser (figura 4.119).
194
Figura 4.119
Creai liste cu simboluri (simple),
Dreamweaver MX
workspace
numerotate (ordonate) i de definiii
Pentru a structura o list de elemente, adugai simboluri sau numere n faa fiecrui element (figura 4.120). SIMPL turism; training; service PC-uri.
Figura 4.120
LISTA NUMEROTAT DE DEFINIII HTML 1. turism; Hyper Text Markup Language 2. training; XHTML 3. service PC-uri.
Extended Hyper Text Markup Language XML Extensible Markup Language
195
Creai o list cu simboluri
Pentru a crea cu Dreamweaver MX workspace o list cu simboluri, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via List Unordered List; Metoda 1;
Metoda 1 modificat Selectai elementele listei Metoda 2 Panoul Properties;
Metoda 2 modificat Selectai elementele listei Metoda 3 Grupul de panouri Insert;
Metoda 2;
Metoda 3.
Iat cum procedm pentru a crea cu Dreamweaver MX workspace, o list cu simboluri, aceeai pe care ai creat-o cu Dreamweaver 4 workspace.
Metoda 3
servicii: iar apoi acionai tasta Enter. 2. n grupul de panouri Insert, executai clic pe subpanoul Text. 3. n subpanoul Text, executai clic pe butonul List), figura 4.121.
Figura 4.121
(Unordered
4. Tastai elementele listei, acionnd tasta Enter dup fiecare element. 5. Acionai de dou ori tasta Enter n momentul n care ai terminat de introdus elementele listei (figura 4.122).
196
Figura 4.122
Figura 4.123
Remarci: Pentru a extinde o list cu simboluri, executai clic la finele ultimei linii dup care acionai tasta Enter. Citii Conversaia 4, paragraful: XHTML- Creai o list cu simboluri (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
197
Figura 4.124 Aplicaii Marcai elementele listei simple cu un ptrat. Marcai elementele listei simple cu un cerc (vezi Dreamweaver 4 workspace). Utilizai inspectorul de tag-uri pentru a schimba valoarea atributului type din tag-ul <ul>.
Creai o list ordonat

Pentru a crea o list ordonat cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Metoda 2 Metoda 3 Meniul Text, via List Panoul Properties; Metoda 2; Metoda 3; Grupul de panouri Insert; Ordered List; Metoda 1;
Metoda 1 modificat Selectai elementele listei Metoda 2 modificat Selectai elementele listei Metoda 3 modificat Selectai elementele listei
Iat cum procedm pentru a crea cu Dreamweaver MX workspace o list ordonat, aceeai pe care ai creat-o cu Dreamweaver 4 workspace.
Metoda 3 modificat
servicii:, iar apoi acionai tasta Enter. 2. Introducei i selectai elementele listei.
198
3. n grupul de panouri Insert, executai clic pe subpanoul Text. 4. n subpanoul Text, executai clic pe butonul figura 4.125.
Figura 4.125
(Ordered list),
Figura 4.126
Figura 4.127 Aplicaii Schimbai stilul de numerotare din lista ordonat creat anterior cu stilul Roman Small: cifre romane minuscule (i, ii, iii ) vezi Dreamweaver 4 workspace.
199
Schimbai stilul Roman Small cu stilul Alphabet Large (A, B, C) vezi Dreamweaver 4 workspace. Schimbai numrul de ordine iniial (1) din stilul Number (1, 2,3) cu numrul 7.
Creai o list de definiii

Pentru a crea o list de definiii cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Text, via List Definition List; Metoda 2 Grupul de panouri Insert. Iat cum procedm pentru a crea cu Dreamweaver MX workspace o list de definiii, aceeai pe care am creat-o cu Dreamweaver 4 workspace.
Metoda 2
1. n grupul de panouri Insert, executai clic pe subpanoul Text. 2. n subpanoul Text, executai clic pe butonul List), figura 4.128.
Figura 4.128
(Definition
3. Introducei primul element al listei Lista cu simboluri, iar apoi acionai tasta Enter. 4. Introducei definiia pentru primul element al listei, iar apoi acionai tasta Enter. 5. Introducei al doilea element al listei Lista numerotat, iar apoi acionai tasta Enter. 6. Introducei definiia pentru cel de-al doilea element al listei.
200
7. Acionai de dou ori tasta Enter n momentul n care ai terminat de introdus elementele listei. 8. Analizai codul XHTML generat (figura 4.129).
Figura 4.129
Remarc. Citii Conversaia 4, paragraful: XHTML- Creai o list de definiii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.130
201
Creai liste imbricate
Cu Dreamweaver MX putei workspace.
Aplicaii Creai o list imbricat, aceeai pe care ai creat-o cu Dreamweaver 4. Creai lista nested prezentat n figura 4.131.
de asemenea crea liste imbricate sau
nested, folosind una din metodele prezentate la Dreamweaver 4
Figura 4.131 Iat care este procedura pe care trebuie s-o urmai. 1. Executai clic pe butonul (Ordered List) din panoul Properties.
2. Introducei Limbaje informatice, iar apoi acionai tasta Enter. 3. Executai clic pe butonul (figura 4.115). 4. Executai clic pe butonul (Unordered List) din panoul Properties. (Text Indent) din panoul Properties
5. Introducei liniile corespunztoare acestui nivel; dup fiecare linie acionai tasta Enter. 6. Executai clic pe butonul (Text Outdent) din inspectorul Properties.
7. Introducei restul listei respectnd paii anteriori. 8. Analizai codul XHTML generat (figura 4.132).
202
Figura 4.133
203
Dreamweaver MX
Testai-v cunotinele
Tem
1. Cum creai un paragraf cu Dreamweaver? 2. Ce tipuri de alinieri sunt permise n Dreamweaver MX? 3. Cu creai un salt de linie cu Dreamweaver MX? 4. Descriei o metod Dreamweaver MX pentru crearea unui titlu. 5. Descriei metodele Dreamweaver MX workspace pentru crearea urmtoarelor tipuri de liste: cu simboluri; numerotate; de definiii. 6. Folosii butoanele ul, ol, li din subpanoul Text (grupul de panouri Insert) pentru a crea direct, n codul surs XHTML mai multe tipuri de liste.
Vizitai site-urile
www.mashat.com www.cinemascope.com/photos
Conversaia 5
Inserai i personalizai o linie orizontal cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Inserai o linie orizontal Dreamweaver MX workspace Colorai o linie orizontal Dreamweaver 4 workspace Definii lungimea i nlimea unei linii orizontale Dreamweaver 4 workspace Aliniai o linie orizontal Dreamweaver MX workspace Personalizai o linie orizontal Dreamweaver MX Tem
Dreamweaver 4
workspace
Inserai o linie orizontal
n Dreamweaver avei posibilitatea de a insera o linie (bar) orizontal pentru a separa diferite zone ale documentului dumneavoastr. De notat c formatarea acestei linii este foarte sumar. Pentru a insera cu Dreamweaver 4 workspace o linie orizontal, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Horizontal Rule; Metoda 2 Panoul Insert.
204
Iat cum separm printr-o linie orizontal primele dou paragrafe ale paginii dumneavoastr.
Metoda 1
1. Executai clic la finele primului paragraf (figura 5.1).
Figura 5.1
2. Executai clic pe Insert
Horizontal Rule (figura 5.2).
Figura 5.2
Remarc. Se insereaz o linie orizontal pe toat lungimea ferestrei (figura 5.3).
205
Figura 5.3
3. Executai clic la finele celui de-al doilea paragraf (figura 5.4). 4. Executai clic pe Insert Horizontal Rule. Se insereaz o linie
orizontal pe toat lungimea ferestrei (figura 5.4).
Figura 5.4
Figura 5.5
206
Remarci: Selectai tag-ul <HR>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 5, paragraful: HTML4 Inserai o linie orizontal (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 5.6
Metoda 2
Se modific paii 2 i 4 din Metoda 1, dup cum urmeaz: 2,4. n panoul Insert, categoria Common, executai clic pe butonul (Insert Horizontal Rule), figura 5.7.
Figura 5.7
207
Dreamweaver MX
workspace
Inserai o linie orizontal
Pentru a delimita diferite zone ale paginii dumneavoastr Web, inserai cu Dreamweaver MX workspace o linie orizontal. Pentru a insera o linie orizontal cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Horizontal Rule; Metoda 2 Grupul de panouri Insert. Iat cum separm printr-o linie orizontal primele dou paragrafe ale paginii dumneavoastr, aceleai pe care le-ai separat cu Dreamweaver 4 workspace .
Metoda 2
1. Executai clic la finele primului paragraf. 2. n grupul de panouri Insert, executai clic pe subpanoul Common (figura 5.8). 3. n subpanoul Common, executai clic pe butonul Rule), figura 5.8. (Horizontal
Figura 5.8
Remarc. Se insereaz o linie orizontal pe toat lungimea ferestrei.
4. Executai clic la finele celui de-al doilea paragraf. 5. n subpanoul Common, executai clic pe butonul Rule).
Remarc. Se insereaz o linie orizontal pe toat lungimea ferestrei.
(Horizontal
208
Figura 5.9 Remarc. Citii Conversaia 5, paragraful: XHTML Inserai o linie orizontal (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 5.10
Dreamweaver MX
workspace
Colorai o linie orizontal
Dreamweaver-ul v permite s aplicai sau nu o umbr liniilor orizontale, dar nu v permite s schimbai culoarea unei linii orizontale (vizibil numai cu Internet Explorer, non standard W3C). Dac inei neaprat s
209
colorai o linie orizontal, utilizai de forma unei linii orizontale n culori.
Remarc. Zona Horizontal Rule vizibil n Inspectorul/Panoul Properties permite atribuirea unui nume liniei orizontale, n cazul n care vei utiliza aceast linie ntr-un script (figura 5.11).
Macromedia Fireworks (Adobe
Photoshop sau orice alt aplicaie) cu care s realizai propria imagine
Figura 5.11
Dreamweaver 4
workspace
Definii lungimea i nlimea unei linii orizontale
Cu Dreamweaver putei personaliza o linie orizontal modificnd lungimea, limea etc. Iat cum definim n procente (75%) lungimea primei linii orizontale. 1. Selectai prima linie orizontal n vederea personalizrii acesteia (figura 5.12).
Figura 5.12
2. n zona W din inspectorul Properties introducei valoarea 75% (valoare relativ, exprimat n procente), figura 5.13.
Figura 5.13
210
Remarc. Dac dorii s aplicai liniei orizontale i efectul de umbr, activai opiunea Shading din inspectorul Properties, figura 5.14.
Figura 5.14
Dezactivai opiunea Shading dac dorii ca bara s aib un aspect plin!
Figura 5.15
Remarc. Dimensiunea, umbra au fost modificate conform cerinelor (vezi figura 5.15).
Figura 5.16
Remarc. Selectai tag-ul <HR>, deschidei panoul Reference i utilizai meniul derulant Description pentru a vizualiza atributul width.
211
Figura 5.17
Iat cum modificm lungimea i nlimea celei de-a doua linii orizontale cu 25 respectiv 10 pixeli. 1. Selectai a doua linie orizontal n vederea personalizrii acesteia. 2. n zona Horizontal Rule W din inspectorul Properties introducei valoarea 25 (valoare absolut, exprimat n pixeli), iar n zona Horizontal Rule H introducei valoarea 10 (valoarea absolut, exprimat n pixeli), figura 5.18.
Remarc. nlimea (Horizontal Rule - H) este ntotdeauna exprimat n pixeli.
Figura 5.18
Remarc. Cea de-a doua linie orizontal se afieaz conform specificaiilor (figura 5.19).
Figura 5.19
212
Figura 5.20
Remarci: Selectai tag-ul <HR>, deschidei panoul Reference, utilizai meniul derulant Description pentru a vizualiza atributul size. Citii Conversaia 5, paragraful: HTML4 Definii lungimea i nlimea unei linii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 5.21
Dreamweaver 4
workspace
Aliniai o linie orizontal
Iat cum aliniem la dreapta pe o lungime de 75% din limea total a paginii, linia orizontal care separ primele dou paragrafe ale paginii.
213
1. Selectai prima linie orizontal n vederea alinierii acesteia (figura 5.22).
Figura 5.22
2. n meniul derulant Align din inspectorul Properties identificai opiunea Right, iar apoi introducei valoarea 75% n zona W (figura 5.23).
Figura 5.23
Figura 5.24
214
Remarci: Selectai tag-ul <HR>, deschidei panoul Reference, utilizai meniul derulant Description pentru a vizualiza atributul align. Citii Conversaia 5, paragraful: HTML4 Aliniai o linie orizontal (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 5.25
Pentru a centra pe o lungime de 75 de pixeli linia care separ cel de-al doilea paragraf de restul textului respectai procedura descris n cele ce urmeaz. 1. Selectai cea de-a doua linie orizontal. 2. n zona Horizontal Rule W introducei valoarea 75 iar n meniul derulant Align selectai Center (figura 5.26).
Figura 5.26
Remarc. Linia orizontal se afieaz conform specificaiilor (figura 5.27).
Figura 5.27
215
Figura 5.28
Figura 5.29
Dreamweaver MX
workspace
Personalizai o linie orizontal
Iat cum procedm pentru a personaliza prima linie orizontal: lungimea 75%; aliniere dreapta; efect de umbr. 1. Selectai prima linie orizontal care separ primele dou paragrafe. 2. n zona W din panoul Properties introducei valoarea 75% (figura 5.30).
216
3. n meniul derulant Align din panoul Properties alegei opiunea Right (figura 5.30). 4. Activai opiunea Shading din panoul Properties (figura 5.30).
Figura 5.30
Figura 5.31
Figura 5.32
217
Aplicaie Centrai pe o lungime de 75 de pixeli linia care separ cel de-al doilea paragraf de restul textului. Indicaie. Introducei 75 n zona W, iar n meniul derulant Align (panoul Properties) selectai Center.
218
Dreamweaver MX
Testai-v cunotinele
Tem
1. Descriei pe scurt o metod Dreamweaver 4 workspace de inserare n pagina dumneavoastr a unei linii orizontale. 2. Cum folosii grupul de panouri Insert pentru inserarea unei linii orizontale? 3. Cum colorai cu Dreamweaver MX workspace o linie orizontal? 4. Descriei pe scurt procedura Dreamweaver 4 workspace/Dreamweaver MX workspace pentru alinierea unei linii orizontale. 5. Cum personalizai o linie orizontal cu Dreamweaver MX workspace?
Vizitai site-urile
www.flashkit.com www.werehere.com www.macromedia.com/software/trial www.libpng.org/pub/png
Conversaia 6
Creai i utilizai foi de stiluri n cascad cu Dreamweaver MX

Dreamweaver MX Tipuri de stiluri CSS folosite n Dreamweaver Dreamweaver 4 workspace, MX workspace Creai stiluri CSS Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu opiunea Make Custom Style (class) Dreamweaver 4 workspace, MX workspace Aplicai un stil CSS (o clas) unui paragraf Dreamweaver 4 workspace, MX workspace Modificai un stil CSS (o clas) Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu opiunea Redefine HTML Tag i aplicai-l unui text Dreamweaver 4 workspace, MX workspace Modificai link-urile cu selectorii CSS Dreamweaver 4 workspace, MX workspace Creai i aplicai o foaie de stiluri extern Dreamweaver MX Tem
Dreamweaver MX
Tipuri de stiluri CSS folosite n Dreamweaver
Cu Dreamweaver MX putei crea dou tipuri de foi de stiluri: foi de stiluri interne i foi de stiluri externe.
220
Tipurile de stiluri CSS pe care le putei crea n cele dou tipuri de foi, cu Dreamweaver MX sunt: Make Custom Style (class) permite crearea unei clase; Redefine HTML Tag CSS Selector permite personalizarea tag-urilor HTML; permite redefinirea tag-ului ancor <a>.
Remarc. Citii Conversaia 6 (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003), paragrafele: (X)HTML Foile de stiluri n cascad CSS1, CSS2, CSS3; (X)HTML Creai stiluri CSS; (X)HTML Categorii de proprieti de stiluri.
Dreamweaver 4
workspace
Creai stiluri CSS
Iat cum procedai pentru a crea un stil CSS n pagina unui document deschis, cu Dreamweaver 4 workspace. 1. Folosii una din metodele prezentate mai jos pentru a afia caseta de dialog New Style: Metoda 1 Meniul Window, via CSS Styles (New Style); Metoda 2 Meniul Text, via CSS Styles New CSS Style; New CSS Style. Metoda 3 Meniul Window, via CSS Styles
Remarc. Se deschide caseta de dialog New CSS Style (figura 6.1).
butonul
Figura 6.1
221
2. n caseta de dialog New CSS Style, n zona: Name introducei numele stilului; Type alegei una din opiunile: Make Custom Style (class), care permite crearea unui stil personalizat numit clas; Redefine HTML Tag, care permite formatarea unui element HTML existent; Use CSS Selector, care permite ntr-o prim etap definirea link-urilor pentru patru stri: a:link; a:hover; a:active; a:visited; Define In alegei una din opiunile: New Style Sheet File, care permite crearea unei foi de stiluri extern; This Document Only, care permite crearea unei foi de stiluri intern. 3. n caseta de dialog New CSS Style, executai clic pe butonul OK.
Aplicaii Afiai stilurile CSS. Iat care este procedura pe care v invitm s-o aplicai. 1. Executai clic pe Window CSS Styles (figura 6.2).
Figura 6.2
222
Remarc. Se afieaz panoul CSS Styles (figura 6.3).
Figura 6.3 Identificai icon-urile; Style Sheet); (Attach Style Sheet); (New Style); (Edit
(Delete CSS Style) de la baza panoului.
Dreamweaver MX
workspace
Creai stiluri CSS
Iat cum procedai pentru a crea un stil CSS n pagina unui document deschis, cu Dreamweaver MX workspace. 1. Folosii una din metodele prezentate mai jos: Metoda 1 Meniul Window, via CSS Styles (New CSS Style); Metoda 2 Meniul Text, via CSS Styles Style; Metoda 4 Panoul CSS Styles, via butonul Style. New CSS New CSS Style; New CSS Metoda 3 Meniul Window, via CSS Styles butonul
223
Se deschide caseta New CSS Style. 2. n caseta de dialog New Style, n zona: Name Type introducei numele stilului; alegei una din opiunile: Make Custom Style; Redefine HTML Tag; Use CSS Selector; Define In alegei una din opiunile: New Style Sheet File; This Document Only. 3. n caseta de dialog New CSS Style, executai clic pe butonul OK.
Aplicaie Afiai stilurile CSS. Iat care este procedura pe care v invitm s-o aplicai. 1. Executai clic pe Window CSS Styles.
Se afieaz panoul CSS Styles (figura 6.4).
Figura 6.4 2. n panoul CSS Styles, executai clic pe butonul radio: Apply Styles se afieaz lista stilurilor CSS ale documentului (figura 6.5);
224
Figura 6.5 Edit Style se afieaz stilurile CSS i caracteristicile acestora (figura 6.6).
Figura 6.6
Dreamweaver 4
workspace
Creai un stil CSS cu opiunea Make Custom Style (class)
Pentru a crea o clas (un stil personalizat) cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos:
225
Metoda 1 Meniul Window, via CSS Styles Style Sheet); Metoda 2 Meniul Window, via CSS Styles Style); Metoda 3 Meniul Window, via CSS Styles Metoda 4 Meniul Text, via CSS Styles Metoda 5 Panoul Launcher. Iat cum crem clasa: .parag {font-family: Georgia, Times New Roman, Times, Serif; font-size: 24 px; font-weight: bold; color: #00FF00}. Acest stil personalizat l vom aplica paragrafului: LUMINA BLND este puternic i nu doar att!. New Style; New Style; icon-ul (New icon-ul (Edit
Metoda 1
1. Executai clic pe Window CSS Styles.
2. n panoul CSS Styles, care se afieaz executai clic pe icon-ul (Edit Style Sheet), figura 6.7.
Figura 6.7
Remarc. Se deschide caseta de dialog Edit Style Sheet.
226
3. n caseta de dialog Edit Style Sheet, executai clic pe butonul New (figura 6.8).
Figura 6.8 Remarc. Se deschide caseta de dialog New CSS Style.
4. n caseta de dialog New CSS Style (figura 6.9), n zona: Name introducei numele stilului personalizat (.parag); Type activai butonul radio Make Custom Style (class); Define In activai butonul radio This Document Only.
Figura 6.9
227
5. n caseta de dialog New CSS Style, executai clic pe butonul OK.
Remarc. Se deschide caseta de dialog CSS Style definition for .parag n care urmeaz s configurai atributele stilului.
6. n caseta de dialog CSS Style definition for .parag (figura 6.10), n categoria Type, zona: Font Size selectai Georgia, Times New Roman, Times, Serif; selectai valoarea 24;
Weight selectai bold; Color introducei #00FF00 (culoarea verde).
Figura 6.10
7. Executai clic pe butonul OK (pentru a salva stilul).

Remarc. Se afieaz caseta de dialog Edit Style Sheet.
8. n caseta de dialog Edit Style Sheet, executai clic pe butonul Done (figura 6.11).
228
Figura 6.11
Remarc. n panoul CSS Styles se afieaz noul stil personalizat (.parag), figura 6.12.
Figura 6.12
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul CSS Styles, executai clic pe icon-ul (New Style).
229
Metoda 3
Se modific paii 2 i 3 (Metoda 1) dup cum urmeaz: 2. Deschidei meniul local al panoului CSS Styles i alegei New CSS Style (figura 6.13).
Figura 6.13
Metoda 4
Se modific paii 1 3 (Metoda 1) dup cum urmeaz: 1. Executai clic pe Text 6.14). CSS Styles New CSS Style (figura
Figura 6.14
230
Metoda 5
Se modific pasul 1 (Metoda 1) dup cum urmeaz: 1. n panoul Launcher, executai clic pe butonul figura 6.15. (CSS Style),
Figura 6.15
Dreamweaver MX
workspace
Creai un stil CSS cu opiunea Make Custom Style (class)
Pentru a crea un stil personalizat (o clas), cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Window, via CSS Styles Style Sheet); Metoda 2 Meniul Window, via CSS Styles CSS Style); Metoda 3 Meniul Window, via CSS Styles Metoda 4 Meniul Text, via CSS Styles Metoda 5 Panoul CSS Styles. Iat cum crem clasa (aceeai pe care ai creat-o cu Dreamweaver 4 workspace): .parag {font-family: Georgia, Times New Roman, Times, Serif; font-size: 24 px; font-weight: bold; color: #00FF00}. New CSS Style; New Style; icon-ul (New icon-ul (Edit
231
Aplicai acest stil paragrafului: LUMINA BLANDA este puternic i nu doar att!.
Metoda 5
1. n panoul CSS Styles, deschidei meniul local ( CSS Style (figura 6.16). ) i alegei
Figura 6.16
2. n panoul CSS Styles, executai clic pe figura 6.17.
(New CSS Style),
Figura 6.17
Remarc. Se deschide caseta de dialog New CSS Style.
232
3. n caseta de dialog New CSS Style, executai urmtoarele aciuni: n zona Name n zona Type introducei .parag; activai butonul radio Make Custom Style (class); n zona Define in activai butonul radio This Document Only; executai clic pe butonul OK. 4. n caseta de dialog Style definition for .parag executai urmtoarele aciuni: configurai atributele stilului .parag (zonele Font, Size, Weight, Color); executai clic pe butonul OK.
Remarc. n panoul CSS Styles se afieaz noul stil personalizat .parag (figura 6.18).
5. n caseta de dialog Edit Style Sheet, care se afieaz, executai clic pe butonul Done.
Figura 6.18
233
Dreamweaver 4
workspace
Aplicai un stil CSS (o clas) unui paragraf
Iat cum procedm pentru a aplica stilul CSS personalizat .parag, paragrafului: LUMINA BLND este puternic i nu doar att!. 1. Selectai paragraful. 2. Afiai panoul CSS Styles. 3. n panoul CSS Styles, selectai stilul CSS personalizat .parag (figura 6.19).
Figura 6.19
Remarci: Stilul selectat se aplic automat paragrafului din documentul Dreamweaver. Pentru a aplica imediat stilul personalizat, asigurai-v c n panoul CSS Styles, opiunea Apply este activat.
234
Figura 6.20
Remarc. Citii Conversaia 6, paragraful: HTML 4 Creai i aplicai o clas (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 6.21
235
Dreamweaver MX
workspace
Aplicai un stil CSS (o clas) unui paragraf
Iat cum procedm pentru a aplica stilul CSS personalizat .parag, paragrafului: LUMINA BLND este puternic i nu doar att!. 1. Selectai paragraful. 2. n panoul CSS Styles executai clic pe Apply Styles (figura 6.22).
Figura 6.22
3. n panoul CSS Styles, executai clic pe stilul CSS personalizat .parag (figura 6.23).
Figura 6.23
236
Remarc. Stilul .parag este aplicat paragrafului selectat.
Figura 6.24
Figura 6.25
237
Dreamweaver 4
workspace
Modificai un stil CSS (o clas)
Pentru a modifica un stil CSS personalizat (o clas), folosii una din metodele prezentate mai jos: Metoda 1 Panoul CSS Style, via icon-ul Metoda 2 Meniul Text, via CSS Styles (Edit Style Sheet); Edit Style Sheet;
Metoda 3 Panoul CSS Styles, via Edit Style Sheet. Iat cum procedm pentru a modifica stilul CSS personalizat .parag, dup cum urmeaz: .parag {font family: Times New Roman, Times, Serif; font size: 36 px; color: #0000FF}.
Metoda 1
1. Afiai panoul CSS Styles. 2. n panoul CSS Styles, executai clic pe icon-ul Sheet).
Remarc. Se deschide caseta de dialog Edit Style Sheet.
(Edit Style
3. n caseta de dialog Edit Style Sheet, executai clic pe butonul Edit.

Remarc. Se deschide caseta de dialog Style definition for .parag.
4. n caseta de dialog CSS Style definition for .parag, n categoria Type (figura 6.26), zona: Font selectai Times New Roman, Times, serif; Size selectai 36 px; Color selectai #0000FF.
238
Figura 6.26
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. Executai clic pe Text CSS Styles Edit Style Sheet.
Metoda 3
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. Deschidei meniul local din panoul CSS Styles ( clic pe Edit Style Sheet.
Aplicaii Anulai stilul CSS personalizat .parag. Indicaie. n panoul CSS Styles, executai clic pe stilul none. Duplicai stilul CSS personalizat .parag.
) i executai
239
Indicaie. n caseta de dialog Edit Style Sheet selectai stilul .parag, iar apoi executai clic pe butonul Duplicate. Suprimai stilul CSS personalizat .parag. Indicaie. n panoul CSS Styles, executai clic pe butonul Exportai stilul CSS personalizat .parag. Indicaie. n panoul CSS Styles, n meniul local ( ) alegei Export Style Sheet. (Delete Style).
Creai dou clase: avantaje, dezavantaje, care se vor aplica urmtoarelor dou paragrafe: Avantaje: Se ctig mult timp n activitatea de formatare. Dezavantaje: Nu toate navigatoarele recunosc foile de stil.
Remarc. Cele dou clase sunt definite n Conversaia 6, paragraful: HTML 4 Creai i aplicai o clas (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Indicaie. Creai cele dou clase cu una din metodele prezentate. Aplicai apoi cele dou clase, paragrafelor listate n cadrul aplicaiei.
Dreamweaver MX
workspace
Modificai un stil CSS (o clas)
Iat cum procedm pentru a modifica stilul CSS personalizat .parag, (acelai pe care l-ai modificat cu Dreamweaver 4 workspace). .parag {font family: Times New Roman, Times, serif; font size: 36 px; color: #0000FF} 1. n panoul CSS Styles, executai clic Edit Styles (figura 6.27).
240
Figura 6.27
2. Executai dublu clic pe numele stilului personalizat .parag (figura 6.28).
Figura 6.28
241
3. n caseta de dialog CSS Style definition for .parag care se afieaz, n zonele Font, Size, Color introducei noile caracteristici ale stilului .parag. 4. Executai clic pe butonul OK.
Remarc. Stilul .parag a fost modificat.
Aplicaie Anulai un stil CSS. Indicaie. n panoul CSS Styles, executai clic pe Apply Styles.
Dreamweaver 4
workspace
Creai un stil CSS cu opiunea Redefine HTML Tag i aplicai-l unui text
Redefine HTML Tag, cea de-a doua opiune din caseta de dialog New CSS Style (figura 6.29) v d acces la o list de tag-uri pe care le putei redefini mult mai simplu ca n HTML.
Figura 6.29
Iat cum definim cu Dreamweaver 4 workspace stilul: h1 {text align: center}.
242
Vom aplica acest stil textului: LUMINA BLND.
Remarc. n mod prestabilit, tag-ul <H1> aliniaz textul (obiectul) la stnga.
1. Afiai caseta de dialog New CSS Style. 2. n caseta de dialog New Style, n zona (figura 6.30): Type Tag activai butonul radio Redefine HTML Tag; executai clic pe butonul tag-ul h1; Define In activai butonul radio This Document Only. , iar apoi selectai
Figura 6.30

Remarc. Se afieaz caseta de dialog CSS Style definition for h1, unde categoria Type este selectat n mod automat.
4. n caseta de dialog CSS Style definition for h1 (figura 6.31), executai urmtoarele aciuni: selectai categoria Block; n zona Text Align (categoria Block) selectai Center.
243
Figura 6.31

Remarci: Dreamweaver 4 workspace centreaz imediat textul formatat cu <H1>. Tag-urile HTML redefinite nu apar n lista cu stiluri din panoul CSS Styles.
244
Figura 6.32
Figura 6.33 Aplicaii Creai cu Dreamweaver 4 workspace stilul: h1 {text-align: center; font-size: 24 pt; color: #FF0000; background: cyan}. Aplicai acest stil textului: LUMINA BLANDA. Indicaie. n caseta de dialog CSS Style definition for h1 selectai categoria Type i apoi categoria Background. Creai cu Dreamweaver 4 workspace stilul: p {text align: center; font size: 18 pt; color: blue}.
245
Aplicai acest stil paragrafului Felicitri pentru rbdarea de a ne fi descoperit!. Creai cu Dreamweaver 4 workspace stilurile: h1{text-align: right; font-size: 24 pt; color: red; background: cyan}; h2{text-align: left; font-size: 18 pt; color: purple}; p{text-align: left; font-size: 14 pt; color: blue}. Aplicai stilurile h1, h2 i p urmtoarelor texte prezentate mai jos: LUMINA BLANDA; Bine ai venit!; Felicitri pentru rbdarea de a ne fi descoperit!.
Dreamweaver MX
workspace
Creai un stil CSS cu opiunea Redefine HTML Tag i aplicai-l unui text
Iat cum definim cu Dreamweaver MX workspace stilul: h1 {text align: center}. Vom aplica acest stil textului: LUMINA BLND. 1. Afiai caseta de dialog New CSS Style. 2. n caseta de dialog New CSS Style, executai urmtoarele aciuni (figura 6.34): n zona Type n zona Tag activai butonul radio Redefine HTML Tag; selectai tag-ul h1; Only; executai clic pe butonul OK. n zona Define In activai butonul radio This Document
246
Figura 6.34
3. n caseta de dialog CSS Style definition for h1, executai urmtoarele aciuni: selectai categoria Block; selectai n zona Text Align (categoria Block) Center; executai clic pe butonul OK.
Remarc. Se afieaz caseta de dialog Edit Style Sheet.
4. n caseta de dialog Edit Style Sheet, executai clic pe butonul Done. 5. Analizai codul XHTML generat (figura 6.35).
Figura 6.35
247
Figura 6.36
Aplicaii Creai cu Dreamweaver MX workspace stilul: body {font-style: italic}. Aplicai acest stil textului integral al paginii. Creai cu Dreamweaver MX workspace stilul: body {font-size: 30 pt}. Aplicai acest stil textului integral al paginii. Creai cu Dreamweaver MX workspace urmtoarele stiluri: h1 {color: red}; h2 {color: red}; p {color: blue}. Aplicai aceste stiluri urmtoarelor trei texte: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! LUMINA BLANDA este puternic i nu doar att! Creai cu Dreamweaver MX workspace urmtoarele stiluri: body {background-color: purple}; p {color: blue; background-color: white}.
248
Aplicai aceste stiluri: fundalului unei pagini; paragrafului LUMINA BLANDA este puternic i nu doar att! Dorim s ne cunoatem i s rmnem mpreun! din cadrul aceleiai pagini. Creai cu Dreamweaver MX workspace stilul: body{background-image: URL (C:\Windows\Web\Wallpage\ follow.jpg)}. Creai cu Dreamweaver MX stilul: p {letter-spacing: 30 em}. Aplicai acest stilul paragrafului: LUMINA BLANDA este puternic i nu doar att! Creai cu Dreamweaver MX workspace stilul: h1 {text-decoration: blink}. Aplicai acest stilul titlului de nivel 1: Bine ai venit!. Creai cu Dreamweaver MX workspace stilul: h1 {text-decoration: blink}. Aplicai acest stilul titlului de nivel: Bine ai venit!
Dreamweaver 4
workspace
Modificai link-urile cu selectorii CSS
Modificarea link-urilor cu selectorii CSS Selector, cea de-a treia opiune din caseta de dialog New CSS Style (figura 6.37) este o practic frecvent i uneori chiar amuzant.
249
Figura 6.37
Stilurile CSS Selector a: link; a: hover; a: active; a: visited redefinesc tag-ul ancor <a>. Iat cum folosim selectorul a: hover pentru a crea un efect de hiperlegtur derulant. 1. Creai un stil nou (New Style). 2. n caseta de dialog New CSS Style, n zona Type, selectai butonul radio Use CSS Selector (figura 6.37).
Remarc. Cele patru stiluri de link-uri se afieaz imediat n meniul derulant (figura 6.38).
Figura 6.38
3. n caseta de dialog New CSS Style, executai urmtoarele aciuni: afiai meniul derulant n zona Selector i selectai a: hover, tipul de link pe care dorim s-l personalizm. n zona Define In activai butonul radio New Style Sheet File. executai clic pe butonul OK.
250
Remarc. Se afieaz caseta de dialog CSS Style Definition for (figura 6.38).
4. n caseta de dialog CSS Style definition for, n categoria Type, selectai o culoare green dup care executai clic pe butonul OK (figura 6.39).
Figura 6.39
5. Creai o hiperlegtur n pagina Dumneavoastr Web, pentru a vedea selectorul a: hover pe care l-ai definit (vezi figura 6.40).
Figura 6.40
251
6. Salvai pagina. 7. Analizai codul HTML generat (figura 6.41).
Figura 6.41
Figura 6.42
Remarc. Efectul (a:hover) este disponibil numai n Internet Explorer. Cnd cursorul dumneavoastr se afl deasupra hiperlegturii, aceasta i schimb culoarea.
252
Aplicaii Convertii stilurile CSS n tag-uri HTML. n acest mod, reuii s fii amabili cu vizitatorii care folosesc browser-e mai vechi. Iat care este procedura pe care trebuie s-o urmai: 1. Salvai pagina Web. 2. Executai clic pe File Convert 3.0 Browser Compatible.
Se afieaz caseta de dialog Convert to 3.0 Browser Compatible (vezi figura 6.43).
Figura 6.43 3. n fereastra Convert to 3.0 Browser Compatible n zona Convert, selectai butonul radio CSS Styles to HTML Markup, iar apoi executai clic pe butonul OK (figura 6.44).
Figura 6.45
253
Remarci: Noua pagin Web conine tag-uri <font> n loc de stiluri CSS. Evident c nu toate stilurile CSS pot fi convertite n tag-uri HTML. n acest caz, ele vor fi generate.
Figura 6.46 Folosii stilurile CSS pentru a elimina sublinierea hiperlegturilor (nu toi vizitatorii sunt de acord cu ... aceast aplicaie! Noi o folosim n scopuri didactice!). Iat care este procedura pe care trebuie s-o urmai: 1. n panoul CSS Styles redefinii tag-ul <a>. 2. n caseta de dialog Style definition, n categoria Text, alegei pentru parametrul Decoration, valoarea None. Utilizai stilul CSS Selector pentru a redefini grupul de tag-uri HTML: <h1>, ... ,<h6>. Modificai pentru toate cele 6 tag-uri de titlu, proprietatea de aliniere a textului (left) n (center). Iat care este procedura pe care trebuie s-o urmai: 1. n caseta Duplicate, introducei numele tag-urilor <h1> pn la <h6> separate prin virgul. 2. Modificai proprietatea de aliniere a textului la valoarea center.
254
Dreamweaver MX
workspace
Modificai link-urile cu selectorii CSS
Cu selectorii CSS putei modifica formatarea link-urilor pentru a mbunti prezentarea paginilor dumneavoastr Web. Aceti selectori (a: link; a: hover; a: active; a: visited) permit suprimarea sublinierilor. Iat cum folosim selectorul a: hover, tipul de link pe care dorim s-l personalizm. 1. Afiai caseta de dialog New CSS Style. 2. n caseta de dialog New CSS Style, executai urmtoarele aciuni (figura 6.47): n zona Type n zona Selector alegei Use CSS Selector; alegei a: hover; File; executai clic pe butonul OK.
n zona Define In activai butonul radio, New Style Sheet
Figura 6.47
3. n caseta de dialog CSS Style definition for, care se afieaz, n categoria Type, selectai o culoare green, dup care executai clic pe butonul OK.
255
4. Creai o hiperlegtur Bine ai venit! n pagina dumneavoastr Web. 5. Salvai pagina. 6. Analizai codul XHTML generat (figura 6.48).
Figura 6.48
7. Vizualizai pagina Web ntr-un browser i testai efectul a: hover (figura 6.49).
Figura 6.49
256
Dreamweaver 4
workspace
Creai i aplicai o foaie de stiluri extern
Putei crea foi de stiluri externe n acelai mod n care ai creat foile de stiluri interne. Singura deosebire este aceea c foile de stiluri externe trebuie s fie salvate ca un fiier text separat, cu extensia .css.
Remarc. Dreamweaver stabilete n mod automat link-ul ctre paginile Web crora dorii s le aplicai definiiile de stil.
Iat care este procedura pe care v invitm s-o urmai pentru a crea o foaie de stiluri extern n care definii stilul: .parag {font-family: Georgia, Times New Roman, Times, serif; font-size: 24 px; font-weight: bold; color: #00FF00}. 1. Creai fiierul stil.css. 1.1 Creai un nou document. 1.2 Afiai caseta de dialog New CSS Style. 1.3 n caseta de dialog New CSS Style, n zona: Name Type introducei numele stilului personalizat, .parag (vedei clasa .parag); activai butonul radio Make Custom Style (class); Define In activai butonul radio New Style Sheet File; 1.4 Executai clic pe butonul OK (fig. 6.50).
257
Figura 6.50
Remarc. Se deschide caseta de dialog Save Style Sheet File As.
1.5 n caseta de dialog Save Style Sheet File As n zona: Save File name URL selectai folder-ul foii de stiluri; introducei numele foii de stil, stil.css; indicai calea de acces (dac este cazul!);
Save as type alegei Style Sheet Files (*.css); Relative TO pstrai opiunea Document, activ. 1.6 n caseta de dialog Save Style Sheet File As, executai clic pe butonul Save. 1.7 n caseta de dialog CSS Style Definition for .parag in stil .css, zona Type (figura 6.51): indicai parametrii stilului; executai clic pe butonul OK.
258
Figura 6.51
Remarc. Noul stil apare n fereastra CSS Styles cu simbolul su particular ( indic un link, figura 6.52.
), care
Figura 6.52
259
Figura 6.53
Remarci: Executai clic pe F8 pentru a vizualiza fiierul stil.css. Citii Conversaia 6, paragraful HTML 4 Creai i aplicai o foaie de stiluri extern (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
3. Creai link-ul ctre foaia de stiluri extern. 3.1 Creai un nou document. 3.2 Executai clic pe Text CSS Styles Attach Style Sheet
(sau, n panoul CSS Styles, executai clic n meniul local i alegei Attach Style Sheet sau, n panoul CSS Styles, executai clic pe butonul (Attach Style Sheet)).
Remarc. Se deschide caseta de dialog Style Sheet File.
3.3 n caseta de dialog Style Sheet File, executai clic pe stil.css i apoi executai clic pe butonul Select.
Remarc. Toate stilurile din aceast foaie de stiluri apar n panoul CSS Styles.
260
Figura 6.54
5. Aplicai foaia de stiluri extern unei pagini (figura 6.55).
Figura 6.55
Figura 6.56
Remarc. Dreamweaver 4 workspace aplic foaia de stiluri extern paginii Web selectate.
261
Aplicaie Modificai fiierul stil.css (extern). Iat care este procedura pe care v invitm s-o aplicai. 1. Accesai un document Dreamweaver deschis i legat la foaia de stiluri extern. 2. Executai clic pe Text CSS Styles Edit Style Sheet.
3. n caseta de dialog Edit Style Sheet, care se afieaz: selectai stil.css (link); executai clic pe butonul Edit. 4. n caseta de dialog CSS Style Definition for .parag in stil .css, efectuai modificrile pe care le considerai necesare. 5. Salvai foaia de stiluri, dup care executai clic pe butonul Done.
Remarci: Toate tag-urile care utilizeaz acest stil sunt actualizate. Acionai tasta F8 iar apoi executai dublu clic pe icon-ul fiierului stil.css pentru a deschide foaia de stiluri.
262
Figura 6.58
Remarc. Dreamweaver aplic foaia de stiluri extern paginii Web selectate.
Aplicaie Creai i aplicai o foaie de stiluri extern stilh2.css n care definii stilul: h2 {font size: 18 pt; color: green}. Aplicai foaia de stiluri extern creat.
Dreamweaver MX
workspace
Creai i aplicai o foaie de stiluri extern
Pentru a utiliza aceleai stiluri n pagini diferite, va trebui s creai o foaie de stiluri extern, ntr-un fiier text separat, cu extensia .css. Pentru a crea o foaie de stiluri extern cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos:
Metoda 1 Meniul Text via CSS Styles via butonul via meniul local New CSS Style; (New CSS Style); New CSS Style;
Metoda 2 Panoul CSS Styles Metoda 3 Panoul CSS Styles Metoda 4 Meniul Text
via CSS Styles
Edit Style Sheet.
263
Iat cum procedai pentru a crea o foaie de stiluri extern n care vom defini clasa .parag, dup cum urmeaz: .parag {font-family: Georgia, Times New Roman, Times, serif; font-size: 24 px; font-weight: bold; color: #00FF00}. Vom aplica foaia de stiluri extern unei pagini.
Metoda 4
1. Creai un nou document. 2. Executai clic pe Text 6.59). CSS Styles Edit Style Sheet (figura
Figura 6.59
Remarc. Se deschide caseta de dialog Edit Style Sheet (figura 6.60).
3. n caseta de dialog Edit Style Sheet, executai clic (figura 6.60), pe butonul New.
264
Figura 6.60
Remarc. Cnd creai o nou foaie de stiluri, va trebui s creai un nou stil.
4. n caseta de dialog New CSS Style care se afieaz, executai urmtoarele aciuni (figura 6.61): n zona Name n zona Type introducei numele stilului; activai butonul radio Make Custom Style (class); n zona Define In activai butonul radio New Style Sheet File; executai clic pe butonul OK.
Figura 6.61
265
5. n caseta de dialog Save Style Sheet File As care se afieaz, executai urmtoarele aciuni (figura 6.62): n zona Save in n zona File name n zona URL n zona Relative To selectai folder-ul foii de stiluri; introducei stil2.css; indicai calea de acces (dac este cazul!); pstrai opiunea Document, activ; executai clic pe butonul Save.
n zona Save As Type alegei Style Sheet File (*.css);
Figura 6.62
6. n caseta de dialog CSS Styles Definition for .parag in stil2.css, n zona Type: indicai parametrii stilului; executai clic pe butonul OK.
266
7. Executai clic pe butonul Done din caseta de dialog Edit Style Sheet (figura 6.63).
Figura 6.63
Remarc. Atunci cnd utilizai o foaie de stiluri existent, modificai pasul 3, dup cum urmeaz: 3. n caseta de dialog Edit Style Sheet, executai urmtoarele aciuni (figura 6.64): executai clic pe butonul Link; n zona File/URL introducei calea de acces; executai clic pe butonul OK.
Figura 6.64
267
Figura 6.65
9. Creai link-ul ctre foaia de stiluri extern. 9.1 Creai un nou document. 9.2 Afiai caseta de dialog Link External Style Sheet cu una din metodele prezentate la punctul 3 (Creai link-ul ctre foaia de stiluri extern cu Dreamweaver 4 workspace). 9.3 n caseta de dialog Link External Style Sheet, executai urmtoarele aciuni (figura 6.66): n zona File/URL introducei calea de acces; activai butonul radio Link; executai clic pe butonul OK.
Figura 6.66
268
Figura 6.67
11. Aplicai foaia de stiluri extern unei pagini (figura 6.68).
Figura 6.68
269
Figura 6.69
Aplicaii Creai o foaie de stiluri extern direct, n cod HTML. Iat care este procedura pe care trebuie s-o aplicai. 1. Executai clic pe File New.
2. n caseta de dialog New Document, n subpanoul General, executai urmtoarele aciuni (figura 6.70): n categoria Base Page executai clic pe CSS;
executai clic pe butonul Create.
270
Figura 6.70 3. n fereastra <<CSS>> care se afieaz, introducei codul de descriere al stilurilor (figura 6.71).
Figura 6.71 4. Salvai fiierul cu extensia .css.

Remarc. Evident, putei realiza link-uri ctre paginile HTML dorite.
271
Folosii (dac suntei n criz de inspiraie) un model de foi de stiluri. Iat care este procedura pe care v invitm s-o aplicai. 1. Executai clic pe File New.
2. n caseta de dialog New Document, n subpanoul General executai urmtoarele aciuni (figura 6.72): n categoria CSS Styles Sheet alegei un model; executai clic pe butonul Create.
Figura 6.72 3. Salvai aceast foaie de stil n folder-ul site-ului dumneavoastr.
272
Dreamweaver MX
Testai-v cunotinele
Tem
1. Definii tipurile de stiluri CSS pe care le putei crea cu Dreamweaver MX. 2. Creai cu Dreamweaver 4 workspace urmtoarea clas: .parag{font-family: Times New Roman, Times, Serif; font-size:24 px; color:#00FF00}. 3. Suprimai stilul CSS personalizat .parag. 4. Creai cu Dreamweaver MX workspace stilul body{background-color: red}. 5. Creai o foaie de stiluri extern n care definii stilul: .parag{font-family: Times New Roman, Times, Serif; font-size:24 px; font-weight:bold; color:#0000FF}.
Vizitai site-urile
www.dhtmlzone.com www.cinemascope.com/photos
Conversaia 7
Inserai imagini cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Inserai o imagine Dreamweaver 4 workspace, MX workspace Aliniai orizontal o imagine Dreamweaver 4 workspace, MX workspace Aplicai o bordur unei imagini Dreamweaver 4 workspace, MX workspace Definii un text de nlocuire (substituie) pentru o imagine Dreamweaver 4 workspace, MX workspace Aliniai vertical o imagine n raport cu un text Dreamweaver MX workspace Inserai un spaiu rezervat pentru o imagine n construcie Dreamweaver MX workspace Plasai text n jurul unei imagini Dreamweaver 4 workspace, MX workspace Adugai mai multe spaii n jurul unei imagini Dreamweaver 4 workspace, MX workspace Aplicai o imagine de background Dreamweaver 4 workspace, MX workspace Convertii o imagine n legtur Dreamweaver 4 workspace, MX workspace Creai o imagine cu zone reactive Dreamweaver MX Tem
274
Dreamweaver 4
workspace
Inserai o imagine
Prima versiune HTML nu lua n considerare imaginile, obiectivul principal nefiind crearea unei pagini frumoase cu transferul rapid de informaie. La ora actual, Web-ul nu poate fi conceput fr imagine, sunet, video. Imaginile n format GIF, JPEG sau PNG pe care le inserai n paginile dumneavoastr Web pot avea mai multe finaliti: imagini de informare, imagini pentru crearea legturilor (link-urilor) hipertext etc. Pentru a insera o imagine cu Dreamweaver 4 workspace ntr-o pagin Web, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Image; Metoda 2 Panoul Insert. Iat cum inserai n pagina dumneavoastr Web, cu Dreamweaver 4 workspace imaginea Smokey Light, din folder-ul Site, n colul din stnga sus al paginii. Imaginea Smokey Light (Lumin mai puin blnd!) n format .JPEG (.JPG) se va afia ntr-o caset de 85 x 85 pixeli.
Metoda 1
Pentru inserarea i alinierea imaginii (Smokey Light) ntr-un frame cu dimensiunile 85 x85 pixeli, vom aplica Metoda 1 n mai multe etape, dup cum urmeaz: Etapa 1 Inserarea imaginii (800 x600 JPEG); Etapa 2 Parametrizarea imaginii (85 x 85 JPEG); Etapa 3 Alinierea (left) imaginii.
275
Etapa 1
1. Executai clic n locul n care dorii s se insereze imaginea (figura 7.1).
Figura 7.1
Image (figura 7.2).
Figura 7.2
Remarc. Se afieaz caseta de dialog Select Image Source (figura 7.3).
Figura 7.3
3. Executai clic pe Smokey Light.jpg (figura 7.4). 4. Analizai imaginea selectat (800 x 600 JPEG) n zona Image Preview (figura 7.4).
276
5. n meniul derulant Relative To: indicai calea de acces: Document (figura 7.4).
Figura 7.4
Remarci: Atunci cnd inserai o imagine, trebuie s precizai calea de acces la aceast imagine: absolut, relativ la document sau relativ la rdcina site-ului. Utilizai legturi absolute atunci cnd facei referiri la o surs care se gsete n afara folder-ului site-ului dumneavoastr.
Exemplu: <img src=http://www. ...> Exemplu: <img src=Follow.jpg>
Utilizai legturi relative la document atunci cnd nu este necesar s indicai URL-urile relative la protocol, site.
6. Executai clic pe butonul OK (figura 7.4).

Remarc. Imaginea este inserat n pagina Web (figura 7.5).
Figura 7.5
277
Figura 7.6
Remarci: Spaiile goale din interiorul denumirilor fiierelor sunt cauza apariiei caracterelor %20. Selectai tag-ul <IMG>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul Description pentru a vizualiza atributul src. Citii Conversaia 7, paragraful HTML4- Inserai o imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.7
Etapa 2
Iat cum parametrizm imaginea Smokey Light: lungimea 85 pixeli; limea 85 pixeli. 1. Selectai imaginea (inserat). Dimensiunile imaginii apar automat n panoul Properties. n zona Image, Dreamweaver afieaz dimensiunea imaginii (figura 7.8).
278
Figura 7.8
Remarc. n zona Image introducei numele imaginii n cazul n care dorii s fie apelat dintr-un script.
2. Introducei n zona width (W) valoarea 85 (pixeli), figura 7.9.

Figura 7.9
3. Introducei n zona height (H) valoarea 85 (pixeli), figura 7.10.

Figura 7.10
4. Acionai tasta Enter.

Remarc. Imaginea se afieaz la noii parametrii.
Figura 7.11
Figura 7.12
279
Remarci: Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributele width, height. Inserai icon-ul de conformitate .
Figura 7.13
Etapa 3
n sfrit, pentru a alinia la stnga imaginea inserat (Smokey Light) n pagina dumneavoastr Web respectai paii descrii n continuare. 1. Selectai imaginea. 2. n panoul Properties executai clic pe butonul 3. Analizai codul HTML generat. (Left).
Figura 7.14
280
Figura 7.15
Metoda 2
Se modific pasul 2 din Metoda 1, dup cum urmeaz: 2. Executai clic pe butonul (Insert Image) din panoul Insert,
categoria Common (figura 7.16).
Figura 7.16
Remarci: Calea de acces ctre imagine mai poate fi indicat tastnd calea (Smokey Light.jpg) n zona Src din panoul Properties (figura 7.17).
Figura 7.17
Putei modifica drumul de acces ctre imagine executnd clic pe icon-ul sau glisnd icon-ul (ctre imaginea de inserat) (figura 7.18).
Figura 7.18
281
Aplicaie Redimensionai imaginea sigla.jpg creat cu aplicaia Macromedia Fireworks. Dreamweaver permite redimensionarea unei imagini n trei moduri: indicnd dimensiunea n pixeli (1), n procente (2) sau modificnd pur i simplu imaginea glisnd unul din punctele ( ) de pe contur (3). Care este cea mai bun tehnic pentru redimensionarea unei imagini ntr-o pagin Web? Cel mai bine este s utilizm o aplicaie dedicat, ca de exemplu Fireworks. Atunci cnd redimensionai o imagine cu Dreamweaver, ea este mrit sau micorat n funcie de noile dimensiuni, dar fiierul imagine nu-i modific dimensiunile. n pagina Web noua imagine risc de a nu fi de aceeai calitate cu originalul. Procedura pe care v invitm s-o aplicai este descris n continuare. 1. Selectai imaginea. 2. Executai clic pe Commands Optimize Image in Fireworks
Remarc. Se afieaz caseta de dialog Find Source(figura 7.19).
Figura 7.19
Remarc. Dreamweaver v ntreab dac dorii s utilizai un document original pentru a efectua modificrile. Rspundei prin Da sau Nu.
3. Acionai butonul Yes pentru a gsi fiierul surs n format .png creat n Fireworks / acionai butonul No pentru a deschide fiierul n fereastra de optimizare a Fireworks-ului (figura 7.19).
282
4. Efectuai modificrile dorite (figura 7.20).
Figura 7.20 5. Executai clic pe Update (figura 7.20).

Remarc. Putei modifica o imagine utiliznd un editor extern, pe care l putei deschide acionnd butonul Edit din panoul Properties (figura 7.21).
Figura 7.21
Dreamweaver MX
workspace
Inserai o imagine
Pentru a insera o imagine cu Dreamweaver MX workspace ntr-o pagin Web, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Image; Metoda 2 Grupul de panouri Insert.
283
Iat cum inserai n pagina dumneavoastr Web, cu Dreamweaver MX workspace aceeai imagine (Smokey Light) pe care ai inserat-o cu Dreamweaver 4 workspace. Imaginea, n format .JPG se va afia ntr-o caset de 85 x 85 pixeli.
Metoda 2
1. Executai clic n locul n care dorii s se insereze imaginea. 2. n subpanoul Common din cadrul grupului de panouri Insert, executai clic pe butonul
Figura 7.22
(Image), figura 7.22.
3. n caseta de dialog Select Image Source (figura 7.23) executai urmtoarele aciuni: n zona Select File Name From lsai activat opiunea File System; Executai clic pe Smokey Light .JPG; n meniul derulant Relative to: indicai calea de acces: Document. Executai clic pe butonul OK;
284
Figura 7.23
Remarc. Parametrii imaginii apar n panoul Properties (figura 7.24).
Figura 7.24
4. n zona Image, introducei numele imaginii n cazul n care dorii ca aceasta s fie apelat dintr-un script. 5. n zonele W i H introducei valoarea 85 (pixeli).
Remarc. Pentru a reveni la valorile iniiale executai clic pe butonul (Reset Size).
285
6. n panoul Properties, executai clic pe butonul 7.25. (Left), figura
Figura 7.25
Figura 7.26 Remarc. Citii Conversaia 7, paragraful XHTML Inserai o imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.27
286
Dreamweaver 4
workspace
Aliniai orizontal o imagine
Cu Dreamweaver 4 workspace putei alinia orizontal (stnga, centru, dreapta) o imagine n pagina dumneavoastr Web. Iat cum procedai pentru a centra cu Dreamweaver 4 workspace sigla.jpg, sigla societii LUMIN BLND. 1. Selectai imaginea i analizai ce se ntmpl n panoul Properties (figura 7.28).
Figura 7.28
2. Acionai tasta
pentru a plasa punctul de inserie exact la
dreapta imaginii (figura 7.29).
Figura 7.29
3. Acionai tasta Enter pentru ca imaginea s se poziioneze pe propria linie. 4. Executai din nou clic pe imagine pentru a o selecta (figura 7.30).
Figura 7.30
287
5. Executai clic pe butonul center ( (figura 7.31). ) din panoul Properties
Figura 7.31
Remarc. Imaginea se afieaz centrat n cadrul paginii (figura 7.32).
Figura 7.32
Figura 7.33
Remarc. Putei de asemenea alinia la dreapta sigla.jpg executnd clic pe butonul (Right) din panoul Properties pasul 5.
Figura 7.34
288
Dreamweaver MX
workspace
Aliniai orizontal o imagine
Pentru a alinia orizontal o imagine n cadrul unei pagini Web, folosii panoul Properties i executai clic pe unul din cele trei butoane n funcie de tipul de aliniere dorit: left, center sau right. Iat cum procedai pentru a centra cu Dreamweaver MX workspace imaginea sigla.jpg, aceeai pe care ai aliniat-o i cu Dreamweaver 4 workspace. 1. Selectai imaginea i analizai ce se ntmpl n panoul Properties. 2. Executai clic pe butonul (figura 7.35). (Center) din panoul Properties
Figura 7.35
3. Analizai codul XHTML generat(figura 7.36).
Figura 7.36
289
Remarc. Citii Conversaia 7, paragraful XHTML Aliniai orizontal o imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.37
Dreamweaver 4
workspace
Aplicai o bordur unei imagini
Putei ncadra imaginea ntr-un chenar de orice culoare! Iat cum aplicai o bordur neagr de 13 pixeli imaginii sigla.jpg. 1. Selectai imaginea (figura 7.38).
Figura 7.38
2. n panoul Properties, zona Border, tastai valoarea 13 (pixeli) care reprezint limea bordurii (figura 7.39).
290
Figura 7.39

Remarc. n jurul imaginii se afieaz o bordur, de aceeai culoare (neagr) cu textul paginii (figura 7.40).
Figura 7.40
Figura 7.41
Remarci: Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul border. Citii Conversaia 7, paragraful HTML 4 Aplicai o bordur unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
291
Figura 7.42
Dreamweaver MX
workspace
Aplicai o bordur unei imagini
Pentru a pune n valoare imaginile dumneavoastr, adugai-le borduri folosind panoul Properties. Iat cum aplicai o bordur neagr de 13 pixeli, imaginii sigla.jpg. 1. Selectai imaginea. 2. n panoul Properties, zona Border, tastai valoarea 13 (pixeli). 3. Acionai tasta Enter. 4. Analizai codul XHTML generat (figura 7.43).
Figura 7.43
292
Remarc. Citii Conversaia 7, paragraful XHTML Aplicai o bordur unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Dreamweaver 4
workspace
Definii un text de nlocuire (substituie) pentru o imagine
Iat cum definim cu Dreamweaver 4 workspace textul alternativ Sigla LUMINA BLND.
Remarc. Textul de nlocuire (substituie) este folosit: n locul imaginii pentru navigatoarele n mod text; n mod temporar, n ateptarea ncrcrii complete a imaginii; atunci cnd legtura cu imaginea surs este ntrerupt; pentru a permite navigatoarelor cu sintez vocal de a citi textul alternativ.
1. Selectai imaginea creia i se va asocia un text de nlocuire (substituie), figura 7.44.
Figura 7.44
2. n panoul Properties, n zona Alt, introducei textul de substituie Sigla LUMINA BLND (figura 7.45).
Figura 7.45
293
Remarc. Zona Alt v permite s indicai un text de substituie al imaginii utilizat de Internet Explorer i de Netscape Navigator pentru a afia o bul Help atunci cnd pointer-ul este deasupra imaginii (figura 7.46).
Figura 7.46
3. Acionai tasta Enter. Dac imaginea nu se afieaz atunci cnd consultai pagina Web ntr-un browser, ea va fi nlocuit de textul de substituie Sigla LUMINA BLANDA (figura 7.47).
Figura 7.47
Figura 7.48
294
Remarci: Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul alt. . Inserai icon-ul de conformitate Citii Conversaia 7, paragraful HTML 4 Definii un text de nlocuire (substituie) pentru o imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.49
Dreamweaver MX
workspace
Definii un text de nlocuire (substituie) pentru o imagine
Dac un utilizator a configurat navigatorul su s nu afieze imaginile, este important de a numi fiecare imagine n parte. Iat cum definim cu Dreamweaver MX workspace textul de nlocuire Sigla LUMINA BLNDA pentru imaginea sigla.jpg. 1. Selectai imaginea sigla.jpg. 2. n panoul Properties, n zona Alt, introducei textul de substituie Sigla LUMINA BLNDA (figura 7.50).
Figura 7.50
295
Figura 7.51
Remarc. Citii Conversaia 7, paragraful XHTML Definii un text de nlocuire (substituie) pentru o imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.52
Dreamweaver 4
workspace
Aliniai vertical o imagine n raport cu un text
Iat cum aliniem vertical (top) imaginea sigla.jpg n raport cu textul LUMINA BLAND.
296
1. Selectai imaginea (figura 7.53).
Figura 7.53
2. Afiai meniul Align din panoul Properties (figura 7.54).
Figura 7.54
3. Executai clic pe tipul de aliniere dorit Top (figura 7.55).
Figura 7.55
Remarc. Imaginea este aliniat sus n raport cu textul LUMINA BLANDA (figura 7.56).
Figura 7.56
297
Figura 7.57
Remarci: Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul align cu valoarea top. Citii Conversaia 7, paragraful HTML 4 Aliniai vertical o imagine n raport cu un text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.58
Iat cum aliniem vertical (middle) imaginea sigla.jpg n raport cu textul LUMINA BLND. 1. Selectai imaginea. 2. Afiai meniul Align din panoul Properties. 3. Executai clic pe tipul de aliniere dorit middle (figura 7.59).
Figura 7.59
298
Remarc. Imaginea este aliniat la mijloc n raport cu textul LUMINA BLND (figura 7.60).
Figura 7.60
Figura 7.61
Remarc. Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul align cu valoarea middle.
Figura 7.62
Iat cum aliniem vertical (bottom) imaginea sigla.jpg n raport cu textul LUMINA BLND.
299
1. Selectai imaginea. 2. Afiai meniul Align din panoul Properties. 3. Executai clic pe tipul de aliniere dorit Bottom (figura 7.63).
Figura 7.63
Remarc. Imaginea este aliniat jos n raport cu textul LUMINA BLND (figura 7.64).
Figura 7.64
Figura 7.65
Remarc. Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul align cu valoarea bottom.
300
Figura 7.66 Aplicaie Aliniai vertical (Baseline, Text Top, Absolute Middle, Absolute Bottom) imaginea sigla.jpg n raport cu textul LUMINA BLND. Indicaie. Utilizai meniul derulant Align din panoul Properties.
Dreamweaver MX Aliniai vertical o imagine n raport

workspace
cu un text
Pentru a alinia vertical o imagine n raport cu un text, cu Dreamweaver MX workspace folosii panoul Properties. Iat cum aliniem vertical (top) imaginea sigla.jpg n raport cu textul LUMINA BLND. 1. Selectai imaginea. 2. n panoul Properties, n meniul derulant Align, executai clic pe Top. 3. Analizai codul XHTML generat (figura 7.67).
301
Figura 7.67
Remarc. Citii Conversaia 7, paragraful XHTML Aliniai vertical o imagine n raport cu un text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.68 Aplicaii Aliniai vertical (middle) imaginea sigla.jpg n raport cu textul LUMINA BLND. Indicaie. n panoul Properties, n meniul derulant Align, executai clic pe Middle. Aliniai vertical (bottom) imaginea sigla.jpg n raport cu textul LUMINA BLND. Indicaie. n panoul Properties, n meniul derulant Align, executai clic pe Bottom.
302
Dreamweaver MX Inserai un spaiu rezervat pentru

workspace
o imagine n construcie
Dreamweaver MX workspace v ajut s inserai un spaiu rezervat pentru o imagine pe care n-o avei n momentul n care dorii s formatai pagina dumneavoastr Web! n consecin, putei construi pagina respectnd dimensiunile i coordonatele de amplasare a imaginii. n momentul n care avei imaginea, totul este sub control! Folosii panoul Properties (zona Src). Pentru a insera un spaiu rezervat pentru o imagine cu Dreamweaver MX workspace , folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert; Metoda 2 Grupul de panouri Insert. Iat cum procedai pentru a insera un spaiu rezervat pentru imaginea Kepler (n construcie!).
Metoda 2
1. Executai clic n locul n care dorii s fie plasat imaginea. 2. n subpanoul Common din grupul de panouri Insert, executai clic pe butonul (Image Placeholder), figura 7.69.
Figura 7.69
Remarc. Se afieaz caseta de dialog Image Placeholder (figura 7.70).
3. n caseta de dialog Image Placeholder, introducei: nume, lungime, lime, culoare, textul alternativ n zonele corespunztoare (figura 7.70).
303
Figura 7.70
Figura 7.71
Figura 7.72
304
Dreamweaver 4
workspace
Plasai text n jurul unei imagini
Putei insera o imagine ntr-un text i apoi repartiza acest text n jurul imaginii. Imaginea (flotant) este plasat fie la stnga, fie la dreapta n cadrul paragrafului. Iat cum mbrcm cu acelai text (vezi Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003) colul drept al imaginii sigla.jpg. 1. Selectai imaginea. 2. Afiai meniul Align din panoul Properties. 3. Executai clic pe Left (tipul de aliniere dorit). Textul se repartizeaz n jurul imaginii (figura 7.73).
Figura 7.73
Figura 7.74
305
Remarc. Citii Conversaia 7, paragraful HTML 4 Plasai text n jurul unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.75 Aplicaii Deplasai imaginea sigla.jpg n cadrul paragrafului. mbrcai cu acelai paragraf (vezi HTML) colul stng al imaginii sigla.jpg. Plasai textul ZIUA N CARE VIN PETII ntre dou imagini follow.jpg. Indicaie. Folosii tehnica repartizrii unui text ZIUA N CARE VIN PETII n jurul unei imagini (follow.jpg) aliniere la stnga (mbrcarea colului stng al imaginii); aliniere la dreapta (mbrcarea colului drept al imaginii). Utilizai meniul Align din panoul Properties. ntrerupei mbrcarea cu text a unei imagini. Indicaie. Cu Dreamweaver putei ntrerupe mbrcarea cu text a unei reprezint ntotdeauna ceea ce v-ai dorit! n consecin, v recomandm s introducei codul surs HTML: <BR clear = all> care mut textul de dup ntreruperea de linie dincolo de imagine, pn cnd ambele margini sunt libere.
Remarc. Citii Conversaia 7, paragraful HTML 4 ntrerupei mbrcarea cu text a unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
imagini
tastnd Enter n locul n care dorii ntreruperea liniei de text, dar acest lucru nu
306
Dreamweaver MX
workspace
Plasai text n jurul unei imagini
Pentru a plasa text n jurul unei imagini (pentru a decora-o!) cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum mbrcm colul drept al imaginii sigla.jpg cu acelai text pe care l-am folosit cu Dreamweaver 4 workspace. 1. Selectai imaginea sigla.jpg. 2. n panoul Properties, n meniul derulant Align, executai clic pe Left. 3. Analizai codul XHTML generat (figura 7.76).
Figura 7.76
Remarc. Citii Conversaia 7, paragraful XHTML Plasai text n jurul unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.77
307
Dreamweaver 4
workspace
Adugai mai multe spaii n jurul unei imagini
Putei modifica cu Dreamweaver spaiul dintre imagine i text. Iat cum afiai decalat cu 20 de pixeli orizontal i vertical textul adiacent (acelai cu cel din HTML) imaginii sigla.jpg. 1. Selectai imaginea. 2. n panoul Properties, tastai valoarea 20 (pixeli) n zonele Vspace (Vertical Spacing in Pixels) i Hspace (Horizontal Spacing in Pixels), figura 7.78.
Figura 7.78
3. Acionai tasta Enter. 4. Analizai codul HTML generat (figura 7.79).

Remarc. Citii Conversaia 7, paragraful HTML 4 Adugai mai multe spaii n jurul unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.79
308
Figura 7.80
Dreamweaver MX
workspace
Adugai mai multe spaii n jurul unei imagini
Dac o imagine este nconjurat de un text, putei regla distana care le separ. Astfel, vei putea pune n valoare imaginile dumneavoastr. Pentru a detaa o imagine de text, cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum adugm 20 de pixeli n jurul imaginii sigla.jpg pentru a o detaa de acelai text pe care l-ai folosit cu Dreamweaver 4 workspace. 1. Selectai imaginea pe care dorii s o distanai de text. 2. n panoul Properties, n zonele VSpace i HSpace tastai valoarea 20 (pixeli). 3. Acionai tasta Enter. 4. Analizai codul XHTML generat (figura 7.81).
309
Figura 7.81
Figura 7.82
Dreamweaver 4
workspace
Aplicai o imagine de background
Putei aplica pe fundalul paginii dumneavoastr o imagine care se va repeta (n mozaic) de attea ori ct este necesar pentru a acoperi ntreaga fereastr a browser-ului. Iat cum inserai n Dreamweaver 4 workspace o imagine de background pentru pagina dumneavoastr Web. 1. Executai clic pe Modify Page Properties.
310
Remarc. Se afieaz caseta de dialog Page Properties.
2. n caseta de dialog Page Properties executai clic pe butonul Browse via Background Image (figura 7.83).
Figura 7.83
Remarc. Se afieaz caseta de dialog Select Image Source cu fiierele imagine disponibile (figura 7.84).
3. n caseta de dialog Select Image Source (figura 7.84) executai urmtoarele aciuni: Selectai imaginea pe care dorii s-o aplicai pe fundalul paginii; Executai clic pe butonul OK.
Figura 7.84
311
Numele fiierului selectat (Blue hills) se afieaz n zona Background Image din fereastra Page Properties (figura 7.85).
Figura 7.85

Remarc. Fundalul paginii este placat cu imaginea selectat. Dac este necesar, ea este repetat pe axa orizontal i vertical pentru a ocupa toat pagina.
5. Analizai codul HTML generat (figura 7.86). Nu v ngrijorai dac nu nelegei nimic! V rugm s ne psuii puin! n continuare vei gsi toate explicaiile!
Figura 7.86
Remarci: Selectai tag-ul <BODY>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul background. Citii Conversaia 7, paragraful HTML 4 Aplicai o imagine de background (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
312
Figura 7.87
Dreamweaver MX
workspace
O imagine de background permite acoperirea integral a ecranului. Ea rmne n spatele altor elemente. Dac imaginea pe care ai gsit-o este prea mic, ea este repetat n mozaic. Pentru a aplica o imagine de background cu Dreamweaver MX workspace, utilizai meniul Modify i nu panoul Properties. Iat cum procedm pentru a insera cu Dreamweaver MX workspace, aceeai imagine de background Blue hills.jpg, pe care ai inserat-o cu Dreamweaver 4 workspace. 1. Executai clic pe Modify Page Properties.
2. n caseta de dialog Page Properties, care se afieaz executai clic pe butonul Browse via Background Image.
313
3. n caseta de dialog Select Image Source (figura 7.88) executai urmtoarele aciuni: Selectai dosarul care conine imaginea Blue hills.jpg i apoi executai clic pe aceasta. Executai clic pe butonul OK.
Figura 7.88
Figura 7.89
Remarc. Citii Conversaia 7, paragraful XHTML Aplicai o imagine de background (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
314
Figura 7.90 Aplicaie Definii marginile paginii. Indicaie. Cu Dreamweaver MX avei posibilitatea de a indica n fereastra navigatorului, poziia (n pixeli) paginii cu ajutorul parametrilor Left Margin, Top Margin (recunoscute numai de Internet Explorer) i Margin Width, Margin Height (recunoscute numai de Netscape Navigator). Executai clic pe Modify Page Properties i introducei valorile dorite, n cele patru zone din caseta de dialog Page Properties, care se afieaz.
Dreamweaver 4
workspace
Convertii o imagine n legtur (link)
Iat cum crem cu Dreamweaver 4 workspace o legtur ctre sigla.jpg (versiunea original) pornind de la versiunea n miniatur siglamin.jpg a
315
acesteia. Cele dou imagini au fost create i comentate n aplicaiile precedente. 1. Selectai imaginea siglamin.jpg (figura 7.91).
Figura 7.91
2. Executai clic pe icon-ul Browse for File ( panoul Properties (figura 7.92).
), via Link, din
Figura 7.92
Remarc. Se afieaz caseta de dialog Select File (figura 7.93).
3. n caseta de dialog Select File (figura 7.93) executai urmtoarele aciuni: Executai clic pe fiierul ctre care se realizeaz legtura; Executai clic pe butonul OK.
316
Figura 7.93
Remarc. Imaginea este convertit n legtur hipertext (figura 7.94).
Figura 7.94
Remarc. Nu putei testa legturile n fereastra Document. Pentru verificarea legturii deschidei pagina ntr-un browser.
317
Figura 7.95
Remarc. Citii Conversaia 7, paragraful HTML 4 Convertii o imagine n legtur (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.96 Aplicaie ncrcai temporar versiunea n miniatur a imaginii follow.jpg de 15x15 pixeli. Iat cum procedai pentru a afia mai nti versiunea n miniatur followmin.jpg (de 15x15 pixeli) n ateptarea ncrcrii imaginii follow.jpg (283x212 pixeli) de nalt rezoluie. 1. Selectai imaginea principal follow.jpg de nalt rezoluie (283x212 pixeli), figura 7.97.
318
Figura 7.97 2. n panoul Properties, n zona Low Src executai clic pe Browse for File ( ) / Point to File ( ) pentru a identifica imaginea miniatur followmin.jpg de 15x15 pixeli.
Remarc. Se afieaz caseta de dialog Select Image Source.
3. n caseta de dialog Select Image Source (figura 7.98) executai clic pe followmin.jpg.
Figura 7.98
Remarc. Se afieaz imaginea de joas rezoluie follow.jpg (15x15 pixeli).
319
Figura 7.99
Remarc. Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul lowsrc.
Figura 7.100
Remarc. Atributul lowsrc nu este standard W3C.
320
Dreamweaver MX
workspace
Convertii o imagine n legtur (link)
Ca i textele, imaginile pot fi utilizate ca suporturi de legturi (link-uri). Iat cum convertim cu Dreamweaver MX workspace, imaginea siglamin.jpg ntr-o legtur (link) ctre sigla.jpg (versiunea original). 1. Selectai imaginea siglamin.jpg pe care urmeaz s o
transformm n legtur. 2. n panoul Properties, executai clic pe Link.

(Browse for file) via
3. n caseta de dialog Select File, selectai folder-ul care conine pagina ctre care se realizeaz legtura, iar apoi executai clic pe fiierul sigla.jpg ctre care se realizeaz legtura (figura 7.101).
Figura 7.101
321
Remarc. Spre deosebire de textele de legtur subliniate i colorate diferit, nimic nu deosebete o imagine de o legtur, cu excepia numelui zonei Link din panoul Properties.
Figura 7.102
Figura 7.103
322
Dreamweaver 4
workspace
Creai o imagine cu zone reactive
Putei diversifica site-ul dumneavoastr profitnd de instrumentul Map din Dreamweaver, asociind legturile diferitelor pri ale unei imagini. Image-map (n limba lui Shakespeare) sunt imagini pe care putei delimita zone reactive (cerc, dreptunghi, poligon), care constituie legturi hipertext. Iat cum crem cu Dreamweaver 4 workspace o imagine cu zone
reactive, aceeai pe care am creat-o n HTML (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). 1. Verificai dac zonele reactive ale image-map-ului sunt afiate: View Visual Aids Image Maps.
2. Executai clic (n documentul deschis) n locul n care dorii s inserai imaginea. 3. Inserai imaginea follow.jpg i apoi selectai-o (figura 7.104).
Figura 7.104
323
4. n panoul Properties, n zona Map introducei numele paginii imaginii map (peti). Este obligatoriu! (figura 7.105).
Figura 7.105
5. Alegei o form de zon reactiv -
(figura 7.106).
Figura 7.106
6. Cu instrumentul selectat, trasai o zon pe imagine care devine o legtur ctre fiierul specificat (figura 7.107).
Figura 7.107 Remarc. Pentru a modifica sau deplasa forma desenat utilizai instrumentul Pointer Hotspot Tool ( ).
7. n panoul Properties, n zona Link, tastai URL-ul fiierului ctre care se face legtura (figura 7.108).
324
Figura 7.108 Remarc. Putei utiliza de asemenea butonul Point to File ( ) pentru a selecta fereastra documentului deschis sau fiierul n folder-ul site-ului sau putei utiliza butonul Browse for File ( ) pentru a selecta fiierul ctre care se face legtura.
8. n meniul derulant Target indicai cadrul pe care dorii s-l utilizai (figura 7.109).
Figura 7.109
9. n zona Alt introducei textul care dorii s apar n bula de help galben sub pointer, atunci cnd utilizatorul poziioneaz pointer-ul pe zona reactiv (figura 7.110).
Figura 7.110
10. Repetai paii 5 9 pentru a asocia imaginii alte legturi. 11. Analizai codul HTML generat (figura 7.111).
325
Figura 7.111
Remarci: Selectai tag-urile <MAP>, <AREA>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 7, paragraful: Creai o imagine cu zone reactive (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.112
Dreamweaver MX
workspace
Creai o imagine cu zone reactive
Iat cum creai cu Dreamweaver MX workspace aceeai imagine follow.jpg cu zone reactive pe care ai creat-o cu Dreamweaver 4 workspace.
326
1. Executai clic n locul n care dorii s inserai imaginea. 2. Inserai imaginea follow.jpg i apoi selectai-o. 3. n panoul Properties, n zona Map, introducei numele paginii imaginii map (peti). Este obligatoriu! 4. n panoul Properties, alegei o form de zon reactiv (figura 7.113).
Figura 7.113
5. Cu instrumentul selectat, trasai o zon pe imagine. 6. n panoul Properties, n zona Link, tastai URL-ul fiierului ctre care se face legtura (figura 7.114).
Figura 7.114
7. n panoul Properties, n meniul derulant Target indicai cadrul pe care dorii s-l utilizai. 8. n panoul Properties, n zona Alt introducei textul care dorii s apar n bula de help galben, sub pointer, atunci cnd utilizatorul poziioneaz pointer-ul pe zona reactiv. 9. Repetai paii 5 8 pentru a asocia imaginii alte legturi. 10. Analizai codul XHTML generat (figura 7.115).
327
Figura 7.115
Remarc. Citii Conversaia 7, paragraful XHTML Creai o imagine cu zone reactive (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.116
328
Dreamweaver MX
Testai-v cunotinele
Tem
1. Prezentai pe scurt o metod de inserare a unei imagini cu Dreamweaver 4 workspace i Dreamweaver MX workspace. 2. Cum aliniai orizontal o imagine cu Dreamweaver MX workspace? 3. Care sunt situaiile n care folosii un text de nlocuire (substituie) pentru o imagine? 4. Descriei procedura Dreamweaver de aliniere vertical a unei imagini n raport cu un text. 5. Cum aplicai o imagine de background cu Dreamweaver? 6. Descriei pe scurt procedura Dreamweaver de creare a unei imagini cu zone reactive.
Vizitai site-urile
www.antville.com www.imageclub.com www.eyewire.com www.photodisc.com www.werehere.com www.wenpromotion.com www.corel.com www.debabelizer.com www.jasc.com
329
www.microfrontier.com www.microsoft.com/office/photodraw
Conversaia 8
Creai legturi cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext ctre o alt pagin Web Dreamweaver 4 workspace, MX workspace Creai legturi n aceeai pagin Web Dreamweaver 4 workspace, MX workspace Creai o legtur extern ctre un site Web, avnd ca suport o imagine Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext extern ctre un site Web Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext extern ctre o adres e-mail Dreamweaver 4 workspace, MX workspace Modificai culoarea legturilor hipertext Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr Dreamweaver MX Tem
Dreamweaver 4
workspace
Creai o legtur hipertext ctre o alt pagin Web
Putei crea legturi care faciliteaz deplasarea vizitatorilor n paginile site-ului dumneavoastr.
330
Pentru a crea o legtur hipertext ctre o pagin Web cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Inspectorul Properties; Metoda 2 Meniul Modify. Iat cum creai o legtur hipertext din pagina Untitled-2.htm ctre pagina b.htm. Creai mai nti cele dou pagini n folder-ul My Documents. Vom utiliza textul de legtur Ziua lung.
Metoda 1
1. Selectai textul de legtur (figura 8.1).
Figura 8.1
2. n inspectorul Properties, via Link, executai clic pe

Figura 8.2
3. n lista fiierelor care se afieaz n Select File executai clic pe b.html, iar apoi executai clic pe butonul OK (figura 8.3).
331
Figura 8.3
Remarci: Legtura se afieaz n zona Link din inspectorul Properties. Noua legtur se afieaz colorat n albastru i subliniat (figura 8.4).
Figura 8.4
Figura 8.5
Remarci: Selectai tag-ul <A>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul Descripton pentru a vizualiza atributul href. Citii Conversaia 8, paragraful HTML 4 Creai o legtur hipertext ctre o alt pagin Web (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
332
Figura 8.6
6. Testai legtura hipertext pe care ai creat-o: Executai clic pe Modify Open Linked Page;
sau,
Apsai tasta CTRL i apoi executai dublu clic pe legtur.
Aplicaie Suprimai legtura hipertext pe care ai creat-o. Iat care este procedura pe care v invitm s-o aplicai. 1. Selectai textul de legtur Ziua lung. 2. Executai clic pe Modify Remove Link (figura 8.7).
Figura 8.7
333
Remarc. Legtura Ziua lung este tears (figura 8.8).
Figura 8.8
Metoda 2
Se modific pasul 2 din Metoda 1 dup cum urmeaz: 2. Executai clic pe Modify Make Link.
Dreamweaver MX
workspace
Creai o legtur hipertext ctre o alt pagin Web
Pentru ca vizitatorii (utilizatorii) s se deplaseze cu uurin ntre paginile site-ului dumneavoastr, creai legturi hipertext. Pentru a crea o legtur hipertext ctre o alt pagin Web cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Panoul Properties; Metoda 2 Meniul Modify. Iat cum procedai pentru a crea o legtur hipertext din pagina test.html ctre pagina b.htm. Vom utiliza textul de legtur Ziua lung.
334
Metoda 1
1. Selectai textul ce urmeaz a fi convertit n legtur. 2. n panoul Properties, via Link, executai clic pe .
3. n lista fiierelor care se afieaz n caseta de dialog Select File, executai clic pe b.htm, apoi executai clic pe butonul OK (figura 8.9).
Figura 8.9
Remarc. Textul Ziua lung se transform n legtur. Textul se afieaz subliniat i cu o culoare diferit (figura 8.10).
Figura 8.10
335
Figura 8.11
Remarci: Citii Conversaia 8, paragraf paragraful XHTML 4 Creai o legtur hipertext ctre o alt pagin Web (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). Nu este posibil de a testa o legtur direct n Dreamweaver.
Figura 8.12
6. Testai legtura hipertext pe care ai creat-o: 6.1 Trecei cu mouse-ul peste legtur. Pointer-ul va lua forma . 6.2 Executai clic pe legtur pentru a schimba pagina.
336
Dreamweaver 4
workspace
Creai legturi n aceeai pagin Web
Pentru a crea legturi hipertext n cadrul aceleiai pagini, cu DREAMWEAVER 4 workspace trebuie s creai mai nti o ancor (n locul dorit!) i apoi o legtur (ctre aceasta) cu una din metodele: Metoda 1 Meniul Insert, via Invisible Tags Metoda 2 Panoul Insert. Vom utiliza textul cunoscut din aplicaiile precedente (figura 8.13) n care cuvntul Bine va fi convertit n legtur ctre cuvintele LUMINA BLND, care va deveni ancor numit. Named Anchor;
Figura 8.13
Iat cum crem cu Dreamweaver 4 ancora (numit) cu numele LUMINA BLANDA.
Metoda 1
1. Verificai dac opiunea Named Anchors este activat, via Edit Preferences Category Invisible Elements (figura 8.14).
337
Figura 8.14
2. Verificai dac opiunea Invisible Elements este activat, via View Visual Aids Invisible Elements (figura 8.15).
Figura 8.15
338
3. Executai clic naintea textului pe care dorii s-l marcai ca ancor (figura 8.16).
Figura 8.16
Named Anchor (figura 8.17).
Figura 8.17
Remarc. Se afieaz caseta de dialog Named Anchor.
5. n caseta de dialog Named Anchor, introducei n zona Anchor Name numele ancorei LUMINABLANDA iar apoi executai clic pe butonul OK (figura 8.18).
339
Figura 8.18
n fereastra Document se afieaz icon-ul de ancor (
), dar n
fereastra browser-ului ancora rmne n totalitate invizibil (figura 8.19).
Figura 8.19
Remarc. Pentru a modifica numele ancorei, executai clic pe elementul su invizibil i utilizai inspectorul Properties (figura 8.20).
Figura 8.20
Figura 8.21
340
Remarci: Selectai tag-ul <A>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul name. Citii Conversaia 8, paragraful HTML 4 Creai o legtur n aceeai pagin (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 8.22
Remarc. n navigator, ancora nu se afieaz.
Metoda 2
Se modific pasul 4 din Metoda 1, dup cum urmeaz: 4. n panoul Insert, categoria Common, executai clic pe butonul (Insert Named Anchor), figura 8.23.
Figura 8.23
341
Iat cum crem, n continuare legtura Bine ctre ancora (numit) LUMINABLANDA pe care am definit-o mai nainte. 1. Selectai textul de legtur (figura 8.24).
Figura 8.24
2. n inspectorul Properties, n zona Link, introducei numele ancorei LUMINABLANDA, precedat de simbolul diez (#) (figura 8.25).
Figura 8.25
Remarc. Putei folosi de asemenea butonul Point to File ( ).

Remarc. Legtura apare colorat (n albastru) i subliniat (figura 8.26).
Figura 8.26
342
Figura 8.27
Figura 8.28
6. Testai legtura creat: 6.1. Executai clic pe cuvntul Bine (figura 8.29).
Figura 8.29
Zona marcat cu ancora numit (LUMINA BLND) se afieaz la nceputul ferestrei browser-ului (figura 8.30).
343
Figura 8.30 Aplicaii Creai o legtur ctre o ancor situat n alt pagin. Indicaie. Respectai urmtoarea procedur: 1. Selectai textul de legtur. 2. n inspectorul Properties, n zona Link introducei legtura (link-ul) de maniera: ?#X, nlocuind semnul de ntrebare (?) cu adresa paginii i X-ul cu numele ancorei. n urmtorul text sunt descrise serviciile oferite de Societatea LUMINA BLND: 1. Servicii TURISM; 2. Servicii ACADEMICE; 3. Servicii INFORMATICE, detaliate dup cum urmeaz: Servicii TURISM: Valea Prahovei, Valea Oltului, Valea Domanului, Valea Arieului, Valea Cernei, Valea Loirei. Servicii ACADEMICE: Organizare expoziii, Organizare simpozioane naionale, Organizare simpozioane internaionale, Organizare trg de job-uri, Organizare work-shop-uri. Servicii INFORMATICE: Training, Service reele de calculatoare, Service Video Conferine, Pagini Web. Creai trei ancore: Seciune 1, Seciune 2, Seciune 3 ce corespund celor trei tipuri de servicii - TURISM, ACADEMICE, INFORMATICE. Creai legturi hipertext ctre ancorele numite, textele de legtur fiind denumirile serviciilor. Iat cum crem cu Dreamweaver 4 workspace ancorele (numite) i legturile corespunztoare.
344
1. Introducei textul aplicaiei. 2. Creai trei ancore numite: Seciune 1, Seciune 2, Seciune 3 ce corespund celor trei tipuri de servicii Servicii TURISM, Servicii ACADEMICE, Servicii INFORMATICE.
Metoda 1
2.1 Executai clic naintea textului Servicii TURISM pe care dorii s-l marcai ca ancor numit - Seciune1. Executai clic pe Insert Invisible Tags Named Anchor.
Introducei numele ancorei Seciune1 n zona Anchor Name (figura 8.31).
Figura 8.31 Executai clic pe butonul OK. 2.2 Executai clic naintea textului Servicii ACADEMICE pe care dorii s-l marcai ca ancor numit - Seciune2. Executai clic pe Insert Invisible Tags Named Anchor.
Figura 8.32 Executai clic pe butonul OK.
345
2.3 Executai clic naintea textului Servicii INFORMATICE pe care dorii s-l marcai ca ancor numit - Seciune3. Executai clic pe Insert Invisible Tags Named Anchor.
Figura 8.33 Executai clic pe butonul OK. 3. Creai la nceputul documentului ancora (numit) START (figura 8.34).
Figura 8.34 4. Creai la nceputul documentului un meniu (o list numerotat) pentru serviciile oferite de societatea LUMINA BLND (figura 8.35).
Figura 8.35
346
5. Organizai textul, pentru fiecare din cele trei servicii (TURISM, ACADEMICE, INFORMATICE) n liste cu simboluri. 6. Creai legturi ctre ancorele numite: Seciune1, Seciune2,
Seciune3. 6.1 Selectai textul de legtur Servicii TURISM. n inspectorul Properties, n zona Link, introducei numele ancorei, Seciune1, precedat de simbolul diez (#). Acionai tasta Enter. 6.2 Selectai textul de legtur Servicii ACADEMICE. n inspectorul Properties, n zona Link, introducei numele ancorei, Seciune2, precedat de simbolul diez (#). Acionai tasta Enter. 6.3 Selectai textul de legtur Servicii INFORMATICE. n inspectorul Properties, n zona Link, introducei numele ancorei, Seciune3, precedat de simbolul diez (#). Acionai tasta Enter. 7. Creai legturi din fiecare seciune ctre ancora (numit) START. Textul de legtur ctre ancora START este: Revenire START. Introducei la finele celor trei seciuni textul de legtur Revenire START. Selectai textul de legtur din cadrul fiecrei seciuni. n inspectorul Properties, n zona Link, introducei pentru fiecare din cele trei seciuni numele ancorei START, precedat de simbolul diez (#). Acionai de fiecare dat tasta Enter. 8. Analizai codul HTML generat (figura 8.36).
347
Figura 8.36
Remarc. Citii Conversaia 8, paragraful: HTML 4 Creai o legtur hipertext ctre o alt pagin Web. Aplicaii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
348
Figura 8.37 10. Verificai legturile hipertext create.
349
Dreamweaver MX
workspace
Creai legturi n aceeai pagin Web
Pentru a crea legturi hipertext n cadrul paginii curente, cu Dreamweaver MX workspace, creai mai nti o ancor i apoi o legtur ctre aceasta cu una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Named Anchor; Metoda 2 Grupul de panouri Insert.
Creai o ancor numit

Iat cum procedai pentru a crea cu Dreamweaver MX workspace ancora (numit) cu numele LUMINA BLND. Cuvntul Bine din paragraful Bine ai venit! va fi convertit n legtur ctre cuvintele LUMINA BLND, care vor deveni ancor numit, din paragraful LUMINA BLND este puternic i nu doar att!.
Metoda 2
1. Verificai dac opiunea Named Anchors este activat, via Edit Preferences Categoria Invisible Elements.
2. Verificai dac opiunea Invisible Elements este activat, via View Visual Aids Invisible Elements.
3. Executai clic naintea textului pe care dorii s-l marcai ca ancor: LUMINA BLND este puternic i nu doar att!. 4. n grupul de panouri Insert, subpanoul Common, executai clic pe butonul (Named Anchor), figura 8.38.
350
Figura 8.38
5. n caseta de dialog care se afieaz Named Anchor, n zona Anchor Name, introducei numele ancorei LUMINA BLANDA, iar apoi executai clic pe butonul OK (figura 8.39).
Figura 8.39
Remarc. Icon-ul se afieaz numai n fereastra Document (figura 8.40) nu i n fereastra browser-ului.
Figura 8.40
351
Figura 8.41

Remarc. Ancora nu se afieaz n navigator.
Creai o legtur ctre ancora numit

Iat cum crem legtura Bine ctre ancora numit LUMINA BLANDA cu Dreamweaver MX workspace. 1. Selectai textul de legtur. 2. n panoul Properties, n zona Link, introducei numele ancorei LUMINA BLANDA, precedat de simbolul diez (#). 3. Acionai tasta Enter. 4. Analizai codul XHTML generat (figura 8.42).
352
Figura 8.42
Figura 8.43
6. Testai legtura creat: executai clic pe cuvntul Bine (figura 8.44).
Figura 8.44
353
Aplicaie Creai cu Dreamweaver MX workspace pagina Web prezentat n figura 8.37. Indicaie. Folosii procedura descris pentru Dreamweaver 4 workspace.
Creai o legtur extern ctre un
Dreamweaver 4
workspace
site Web, avnd ca suport o imagine
Putei accesa o pagin Web folosind i o legtur imagine (executnd clic pe aceasta). Iat cum crem o legtur imagine, follow.jpg, ctre site-ul
www.upg-ploiesti.ro. 1. Inserai imaginea (follow.jpg) i apoi selectai-o (figura 8.45).
Figura 8.45
2. n inspectorul Properties, n zona Link, creai legtura ctre site-ul UPG din Ploieti (vezi creare legtur hipertext), figura 8.46.
Figura 8.46
Imaginea follow.jpg a fost convertit n legtur hipertext (vezi figura 8.47).
354
Figura 8.47
Figura 8.48 Remarc. Citii Conversaia 8, paragraful HTML 4 Creai o legtur imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 8.49
5. Testai legtura imagine pe care ai creat-o (figura 8.50).
355
Figura 8.50 Aplicaii Suprimai legtura imagine (n caz de eroare i nu numai!) pe care ai creat-o. Iat care este procedura pe care trebuie s-o urmai. 1. Selectai legtura imagine, executnd clic pe aceasta. 2. Executai clic pe Modify Remove Link (figura 8.51).
Figura 8.51 Creai o legtur hipertext ctre versiunea original a imaginii sigla.gif, pornind de la versiunea n miniatur siglamin.gif a acesteia.
356
Iat care este procedura pe care v invitm s o urmai. 1. Selectai siglamin.gif, versiunea n miniatur a imaginii originale (figura 8.52).
Figura 8.52 2. n inspectorul Properties, n zona Link creai legtura ctre poza.gif, creaia dumneavoastr (figura 8.53). Figura 8.53 3. Analizai codul HTML generat (figura 8.54).
Figura 8.55
357
5. Verificai legtura hipertext pe care ai creat-o. 5.1 Selectai legtura pe care dorii s-o verificai (figura 8.56).
Figura 8.56 5.2 Executai clic pe Modify Open Linked Page
sau,
5.3 Acionai tasta CTRL i apoi executai dublu clic pe legtur.
Dreamweaver MX
workspace
Creai o legtur extern ctre un site Web, avnd ca suport o imagine
Posibilitile de a crea legturi externe de tip imagine, cu Dreamweaver MX workspace sunt numeroase: butoane (simple), rollovere, imagini cu zone reactive (image map), bare de navigare etc. De menionat, c toate aceste imagini care v servesc ca legturi, trebuie mai nti s fie create! Iat cum folosim imaginea follow.jpg, ca suport de legtur extern ctre site-ul www.upg-ploieti.ro. 1. Inserai imaginea i apoi selectai-o. 2. n panoul Properties, n zona Link, creai legtura ctre site-ul Universitii Petrol-Gaze din Ploieti.
358
Figura 8.57
4. Vizualizai pagina Web ntr-un browser. 5. Testai legtura imagine pe care ai creat-o (figura 8.58).
Figura 8.58 Aplicaie Suprimai legtura imagine pe care ai creat-o. Indicaie. Folosii meniul Modify, via Remove Link.
359
Dreamweaver 4
workspace
Creai o legtur hipertext extern ctre un site Web
Iat cum creai cu Dreamweaver 4 workspace o legtur hipertext extern ctre site-ul Universitii Petrol-Gaze din Ploieti (http://www.upg-ploiesti.ro). Textul de legtur este: UPG din Ploieti. 1. Introducei i apoi selectai textul de legtur (figura 8.59).
Figura 8.59
Remarc. n mod implicit, pagina ctre care facei link-ul se deschide n fereastra browser-ului, dar, pentru a nu pierde legtura cu pagina dumneavoastr, putei cere ca aceast pagin (int) s se deschid ntr-o nou fereastr a browser-ului.
2. n inspectorul Properties, n zona Link, introducei URL-ul complet al site-ului Web ctre care creai legtura hipertext (figura 8.60).
Figura 8.60
3. Executai clic pe _blank n meniul derulant Target (figura 8.61).

Figura 8.61
Remarc. Legtura hipertext se afieaz colorat (n albastru) i subliniat (figura 8.62).
360
Figura 8.62
Remarc. Nu putei testa legturile n fereastra Document. Pentru a le testa vizualizai pagina Web ntr-un browser i executai clic pe textul de legtur.
Figura 8.63
Figura 8.64
361
6. Verificai legtura hipertext creat.
Remarc. Dreamweaver 4 workspace nu este n msur s verifice legturile ctre paginile Web ce aparin site-urilor exterioare.
Dreamweaver MX Creai o legtur hipertext extern

workspace
ctre un site Web
Iat cum procedai pentru a crea cu Dreamweaver MX workspace o legtur hipertext extern ctre site-ul Universitii Petrol Gaze din Ploieti. Textul de legtur este UPG din Ploieti. 1. Introducei textul de legtur i apoi selectai-l. 2. n panoul Properties, n zona Link introducei URL-ul complet al site-ului UPG (figura 8.65) i executai clic pe _blank n meniul derulant Target.
Figura 8.65
362
Figura 8.66
Figura 8.67
5. Testai legtura hipertext pe care ai creat-o.

Aplicaii Modificai culoarea legturii hipertext pe care ai creat-o. Indicaie. Folosii Modify Properties Link Color.
Creai o legtur ctre site-ul UPG din Ploieti avnd ca suport un text Flash: UNIVERSITATE. Iat care este procedura pe care trebuie s-o aplicai. 1. Executai clic n locul n care dorii s figureze textul Flash. 2. Executai clic pe Insert Interactiv Images Text Flash.
Remarc. Se afieaz caseta de dialog Insert Text Flash.
363
3. n caseta de dialog Insert Text Flash, n zona Text introducei UNIVERSITATE; n zona Link introducei adresa site-ului Universitii din Ploieti, iar n final, executai clic pe butonul OK (figura 8.68).
Figura 8.68 4. Acionai tasta F12. 5. Testai legtura pe care ai creat-o (figura 8.69).
Figura 8.69
364
Dreamweaver 4
workspace
Creai o legtur hipertext extern ctre o adres e-mail
Pentru a crea o legtur hipertext extern ctre o adres e-mail cu Dreamweaver 4, folosii una din metodele prezentate mai jos: Metoda 1 Metoda 2 Meniul Insert, via Email Link; Panoul Insert, via Email Link;
Metoda 2 modificat Panoul Insert, via Insert Email Link; Metoda 3 Inspectorul Properties.
Iat cum creai cu Dreamweaver 4 workspace, o legtur extern ctre o adres e-mail ldumitrascu@upg-ploiesti.ro. Textul legturii este Primii mesajul.
Metoda 1
1. Selectai textul/imaginea de legtur ctre adresa e-mail (figura 8.70).
Figura 8.70
Email Link (figura 8.71).
365
Figura 8.71
Remarc. Se afieaz caseta de dialog Email Link.
3. n caseta de dialog Email Link (figura 8.72), executai urmtoarele activiti: n zona E-Mail introducei adresa e-mail; executai clic pe butonul OK.
Figura 8.72
Remarc. Legtura hipertext apare colorat n albastru i subliniat (figura 8.73).
366
Figura 8.73
Figura 8.74
Remarc. Citii Conversaia 8, paragraful HTML 4 Creai o legtur extern ctre: o adres e-mail (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 8.75
6. Verificai legtura hipertext creat. Executai clic pe legtura hipertext creat: Primii mesajul. Se deschide fereastra New Message (figura 8.76). Profitai de aceast adres!
367
Figura 8.76
Remarc. Dreamweaver 4 workspace permite verificarea legturilor pe care le-ai creat detectnd totodat legturile ntrerupte. Procedura este urmtoarea: 1. Executai clic pe File Check Links. Dac legturile sunt ntrerupte, Dreamweaver le afieaz n caseta de dialog Check Links. Pentru a restabili legturile ntrerupte, procedura este urmtoarea: 1. Executai clic pe fiierul ctre care legtura este ntrerupt. 2. Indicai corect numele fiierului.
Metoda 2
1. Selectai textul/imaginea de legtur ctre adresa e-mail. 2. n panoul Insert, categoria Common executai clic pe butonul (Insert Email Link), figura 8.77.
Figura 8.77
368
3. n caseta de dialog Email Link (figura 8.78), executai urmtoarele activiti: n zona E-Mail introducei adresa e-mail; executai clic pe butonul OK.
Figura 8.78
Remarc. Legtura hipertext apare colorat n albastru i subliniat.
4. Analizai codul HTML generat. 5. Vizualizai pagina Web ntr-un browser. 6. Verificai legtura hipertext creat.
Metoda 2 modificat
1. n panoul Insert, categoria Common executai clic pe butonul (Insert Email Link).
2. n caseta de dialog Email Link (figura 8.79) executai urmtoarele aciuni: n zona Text introducei textul de legtur; n zona E-Mail introducei adresa e-mail; executai clic pe butonul OK.
Figura 8.79
369
Remarc. Textul de legtur se afieaz n fereastra Document iar n zona Link din inspectorul Properties adresa e-mail se afieaz cu sufixul mailto (figura 8.80).
Figura 8.80
3. Analizai codul HTML generat. 4. Vizualizai pagina Web ntr-un browser. 5. Verificai legtura hipertext.
Metoda 3
1. Selectai textul/imaginea de legtur ctre adresa e-mail. 2. Introducei direct n inspectorul Properties, zona Link adresa e-mail sub forma:
mailto:ldumitrascu@mail.upg-ploiesti.ro
(figura 8.81).
Figura 8.81
Remarc. Adresa e-mail pe care o tastai n zona Link are ca sufix, obligatoriu, mailto!
Legtura hipertext apare colorat n albastru i subliniat (figura 8.82).
Figura 8.82
370
3. Vizualizai pagina Web ntr-un browser. 4. Testai legtura hipertext creat.
Aplicaii Creai o legtur extern (hipertext) ctre un server FTP. Indicaie. Respectai urmtoarea procedur: 1. Selectai textul de legtur. 2. n inspectorul Properties, n zona Link introducei ftp://ftp.?, nlocuind semnul de ntrebare (?) cu calea de acces ctre site. Creai o legtur hipertext extern ctre un grup de discuii. Indicaie. Respectai urmtoarea procedur: 1. Selectai textul de legtur. 2. n inspectorul Properties, n zona Link introducei news://?, nlocuind semnul de ntrebare (?) cu adresa grupului de discuii.
Dreamweaver MX
workspace
Creai o legtur hipertext extern ctre o adres e-mail
Cu Dreamweaver putei crea n documentul dumneavoastr o legtur hipertext extern ctre o adres e-mail. Pentru a crea o legtur hipertext extern ctre o adres e-mail, cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert; Metoda 2 Grupul de panouri Insert; Metoda 3 Panoul Properties.
371
Iat cum procedai pentru a crea cu Dreamweaver MX workspace o legtur extern ctre adresa e-mail a autorului acestei lucrri: ldumitrascu@upg-ploiesti.ro. Textul legturii este: Primii mesajul.
Metoda 2
1. n grupul de panouri Insert, subpanoul Common, executai clic pe butonul (Insert Email Link), figura 8.83.
Figura 8.83
2. n caseta de dialog care se afieaz, Email Link, n zona Text, introducei textul de legtur Primii mesajul iar n zona Email introducei ldumitrascu@upg-ploiesti.ro (figura 8.84).
Figura 8.84

Remarc. Textul de legtur se afieaz n fereastra Document, iar n zona Link din panoul Properties adresa e-mail se afieaz cu sufixul mailto: (figura 8.85).
372
Figura 8.85 Aplicaii Creai o legtur hipertext extern ctre un server FTP. Creai o legtur hipertext extern ctre un grup de discuii.
Dreamweaver 4
workspace
Modificai culoarea legturilor hipertext
Putei schimba culoarea legturilor pentru a le armoniza cu stilul vizual al site-ului dumneavoastr. Iat cum afiai n alb legtura Primii mesajul ctre adresa e-mail ldumitrascu@upg-ploiesti.ro. 1. Executai clic pe Modify Page Properties.
Remarc. Se afieaz caseta de dialog Page Properties (figura 8.86).
373
Figura 8.86
2. n caseta de dialog Page Properties, n zona Links executai clic pe butonul .
3. n paleta care se afieaz, executai clic cu pipeta pe culoarea dorit (alb), figura 8.87.
Figura 8.87

Remarc. n browser, culoarea alb este aplicat legturii Primii mesajul (figura 8.88).
374
Figura 8.88
Figura 8.89
Remarc. Selectai tag-ul <BODY>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul link.
Figura 8.90
7. Testai legtura. Executai clic pe Primii mesajul.

Aplicaii Afiai cu verde culoarea legturilor hipertext vizitate, Visited Links.
375
Iat care este procedura pe care trebuie s-o parcurgei. 1. Executai clic pe Modify Page Properties .
2. n caseta de dialog Visited Links executai clic pe butonul
3. n paleta de culori care se afieaz, executai clic cu pipeta pe culoarea dorit (verde). 4. Executai clic pe butonul OK. 5. Analizai codul HTML generat (figura 8.91).
Figura 8.91
Remarc. Selectai tag-ul <BODY>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul vlink.
Figura 8.92 7. Testai culoarea legturilor vizitate. Schimbai culoarea legturilor hipertext active (nevizitate), Active Links.
376
Dreamweaver MX
workspace
Modificai culoarea legturilor hipertext
Dac culorile implicite ale link-urilor generate cu Dreamweaver fac not discordant cu paginile dumneavoastr Web, putei s le modificai. Iat cum procedai pentru a afia n alb, cu Dreamweaver MX (workspace) legtura hipertext extern Primii mesajul ctre adresa e-mail ldumitrascu@upg-ploiesti.ro. 1. Executai clic pe Modify Page Properties.
2. n caseta de dialog Page Properties, care se afieaz n zona Links, executai clic pe butonul .
3. Executai clic, cu pipeta pe culoarea alb (#FFFFFF) care se afieaz n paleta de culori. 4. Executai clic pe butonul OK. 5. Analizai codul XHTML generat (figura 8.93).
Figura 8.93
377
7. Testai legtura.
Aplicaii Schimbai culoarea legturilor hipertext vizitate (Visited Links). Schimbai culoarea legturilor hipertext active (Active Links).
Creai o legtur hipertext ctre o
Dreamweaver 4
workspace
pagin care se deschide n propria sa fereastr
Putei crea o legtur care deschide pagina int ntr-o nou fereastr a navigatorului. Iat cum creai cu Dreamweaver 4 workspace o legtur Fereastr proprie ctre pagina tabel16.htm care se va deschide ntr-o fereastr nou. 1. Selectai legtura (figura 8.94).
Figura 8.94
2. n inspectorul Properties afiai meniul Target (figura 8.95).

Figura 8.95
378
3. Executai clic pe _blank (figura 8.96).
Figura 8.96
Figura 8.97
Remarc. Selectai tag-ul <A>, deschidei panoul Reference, utilizai meniul Description i vizualizai atributul target.
Figura 8.98
6. Testai legtura: executai clic pe Fereastr proprie.

Remarc. Pagina int se afieaz ntr-o nou fereastr (figura 8.99).
379
Figura 8.99
Dreamweaver MX
workspace
Creai o legtur hipertext ctre o pagin care se deschide n propria sa fereastr
n mod implicit, legturile deschid paginile Web n aceeai fereastr. Pentru a conserva pagina principal care a fost afiat, deschidei legturile dumneavoastr ntr-o nou fereastr. Iat cum procedai pentru a crea cu Dreamweaver MX workspace o legtur hipertext Fereastr proprie ctre pagina tabel16.htm, care se va deschide ntr-o fereastr nou. 1. Selectai legtura. 2. n panoul Properties, n meniul Target, executai clic pe _blank. 3. Analizai codul XHTML generat (figura 8.100).
380
Figura 8.100
4. Vizualizai pagina Web ntr-un browser. 5. Executai clic pe Fereastr proprie (figura 8.101).
Figura 8.101
Remarc. Pagina int se afieaz ntr-o nou fereastr (figura 8.102).
Figura 8.102
381
Dreamweaver MX
Testai-v cunotinele
Tem
1. Descriei pe scurt o metod Dreamweaver MX workspace de creare a unei legturi hipertext ctre o alt pagin Web. 2. Descriei pe scurt o metod Dreamweaver 4 workspace de creare legturi hipertext n cadrul aceleiai pagini. 3. Creai o legtur hipertext extern ctre site-ul www.yahoo.com avnd ca suport imaginea sigla.jpg. 4. Creai o legtur hipertext extern ctre site-ul
www.macromedia.com, folosind textul de legtur Ploieti 2003. 5. Descriei pe scurt o metod Dreamweaver MX de creare a unei legturi hipertext extern ctre o adres e-mail. 6. Creai o legtur ctre site-ul www.multimania.fr avnd ca suport textul Flash: INDE PLOIETI.
Vizitai site-urile
www.echomedium.com www.opensurf.org www.flashkit.com www.werehere.com
Conversaia 9
Dreamweaver 4 workspace, MX workspace Creai un tabel Dreamweaver 4 workspace, MX workspace Aliniai un tabel Dreamweaver 4 workspace, MX workspace Atribuii un titlu tabelului Dreamweaver 4 workspace, MX workspace Aplicai o bordur tabelului Dreamweaver 4 workspace, MX workspace Aliniai orizontal datele unui tabel Dreamweaver 4 workspace, MX workspace Aliniai vertical datele unui tabel. Aplicaii Dreamweaver 4 workspace, MX workspace Modificai spaiul dintre celulele unui tabel Dreamweaver 4 workspace, MX workspace Modificai dimensiunile liniilor unui tabel Dreamweaver 4 workspace, MX workspace Modificai marginile interioare ale celulelor unui tabel Dreamweaver 4 workspace, MX workspace Extindei o celul pe mai multe coloane sau linii Dreamweaver 4 workspace, MX workspace Aplicai o culoare elementelor unui tabel Dreamweaver 4 workspace, MX workspace Aplicai o imagine de background unui tabel sau unei celule a tabelului Dreamweaver 4 workspace, MX workspace Utilizai un tabel ca un instrument de punere n pagin Dreamweaver 4 workspace, MX workspace Formatai un tabel utiliznd modele predefinite Dreamweaver 4 workspace, MX workspace Creai un tabel n modul Layout View Dreamweaver MX Tem
Creai tabele cu Dreamweaver MX
384
Dreamweaver 4
workspace
Creai un tabel
Pentru a crea un tabel cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, modul Standard; Metoda 2 Panoul Insert, modul Standard. Iat cum procedm pentru a crea cu Dreamweaver 4 workspace acelai tabel (cu patru linii i trei coloane) pe care l-am construit n HTML i XHTML (vezi Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Metoda 1
1. Executai clic acolo unde dorii s figureze tabelul (figura 9.1).
Figura 9.1
Table (figura 9.2).
Figura 9.2
385
Remarc. Se afieaz caseta de dialog Insert Table (figura 9.3).
Figura 9.3
3. Introducei n zona Rows numrul de linii (4), figura 9.4.
Figura 9.4
4. Introducei n zona Columns numrul de coloane (3), figura 9.5.

Figura 9.5
5. Introducei n zona Width lungimea tabelului, exprimat n pixeli (500) sau n procente (figura 9.6).
Figura 9.6
6. Introducei n zona Border limea bordurii, exprimat n pixeli (10), figura 9.7.
Figura 9.7
7. Executai clic pe butonul OK (figura 9.8).
Figura 9.8
386
Remarc. Dreamweaver 4 workspace insereaz un tabel vid, aliniat (n mod implicit) la stnga (figura 9.9).
Figura 9.9
Figura 9.10
Remarci: Selectai tag-urile <TABLE>, <TR>, <TD>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 9, paragraful HTML 4 Creai un tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
9. Executai clic pe oricare din celulele tabelului, iar apoi introducei datele din prima linie (capul de tabel) i din urmtoarele trei linii (de date) ale tabelului (figura 9.11)
Figura 9.11
387
Remarc. Dreamweaver 4 workspace adapteaz dimensiunea unei celule n funcie de coninutul acesteia.
Figura 9.12 Aplicaie Formatai (bold, centrat) prima linie (capul de tabel) a tabelului. Iat care este procedura pe care v invitm s-o aplicai. 1. Selectai prima linie. 2. n inspectorul Properties activai opiunea Header (figura 9.13).
Figura 9.13
388
Remarc. Celulele selectate din prima linie a tabelului se afieaz bolduit i centrat (figura 9.14).
Figura 9.15
Remarci: Selectai tag-ul <TH>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul Width. Citii Conversaia 9, paragraful HTML 4 Creai un tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
389
Figura 9.16
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz: 2. n panoul Insert, categoria Common, executai clic pe butonul (Table) figura 9.17.
Figura 9.17
390
Dreamweaver MX
workspace
Creai un tabel
Pentru a crea un tabel cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, modul Standard; Metoda 2 Grupul de panouri Insert. Iat cum procedm pentru a crea un tabel cu patru linii i trei coloane, acelai pe care l-ai creat cu Dreamweaver 4 workspace.
Metoda 2
1. Executai clic acolo unde dorii s figureze tabelul. 2. n grupul de panouri Insert, subpanoul Common, executai clic pe butonul (Table), figura 9.18.
Figura 9.18
Remarc. Se afieaz caseta de dialog Insert Table.
3. n caseta de dialog Insert table (figura 9.19) executai urmtoarele aciuni: n zonele Rows i Columns introducei numrul de linii (4)
391
respectiv numrul de coloane (3); n zona Width
introducei lungimea tabelului,

exprimat n pixeli (500) sau n procente;
n zona Border
introducei limea bordurii (10

pixeli); executai clic pe butonul OK.
Figura 9.19
Remarc. Dreamweaver MX workspace insereaz un tabel vid, aliniat la stnga (figura 9.20).
Figura 9.20
4. Afiai codul XHTML generat (figura 9.21).
392
Figura 9.21
Remarc. Citii Conversaia 9, paragraful XHTML Creai un tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
5. Executai clic pe oricare din celulele tabelului, iar apoi introducei datele din prima linie (capul de tabel) i din urmtoarele trei linii (de date) ale tabelului (figura 9.22).
Figura 9.22
393
Figura 9.23 Aplicaie Formatai (bold, centrat) prima linie (capul de tabel) a tabelului pe care l-ai creat anterior. Indicaie. n panoul Properties, activai opiunea Header. Citii Conversaia 9, paragraful XHTML Creai un tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Dreamweaver 4
workspace
Aliniai un tabel
Iat cum centrm cu Dreamweaver 4 workspace tabelul pe care l-ai creat n aplicaia precedent.
394
1. Selectai tabelul folosind una din cele trei metode prezentate n continuare.
Metoda 1
1.1 Executai clic pe oricare din celulele tabelului. 1.2 Executai clic pe tag-ul <table> via <body> <table> <tr> <td> (din selectorul de tag-uri) pentru a selecta tot tabelul (figura 9.24).
Figura 9.24
Metoda 2
1.1 Poziionai cursorul n apropierea uneia dintre marginile exterioare ale tabelului pn cnd acesta se transform ntr-un cursor n form de sgei ncruciate, iar apoi executai clic (figura 9.25).
Figura 9.25
395
Metoda 3
1.1 Executai clic n interiorul tabelului i apoi pe Modify Table Select Table.
Remarc. Pentru selectarea tabelului vom utiliza Metoda 1, figura 9.26.
Figura 9.26
2. Utilizai inspectorul Properties dup cum urmeaz: 2.1 Afiai meniul Align, figura 9.27.
Figura 9.27
2.2 Executai clic pe Center, figura 9.28.
Figura 9.28
Remarc. Tabelul se afieaz centrat (figura 9.29).
Figura 9.29
3 Analizai codul HTML generat (figura 9.30).
396
Figura 9.30
Remarci: Selectai tag-ul <TABLE>, deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul align. Citii Conversaia 9, paragraful HTML 4 Aliniai un tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
4 Vizualizai pagina Web ntr-un browser (figura 9.31).
Figura 9.31
Pentru a alinia la dreapta tabelul, nlocuii punctul 2.2 din procedura anterioar, dup cum urmeaz. 2.2 n inspectorul Properties, executai clic pe Right, figura 9.32.
Figura 9.32
Remarc. Tabelul se afieaz aliniat la dreapta.
397
Dreamweaver MX
workspace
Aliniai un tabel
Pentru a alinia un tabel cu Dreamweaver MX workspace, folosii panoul Properties. n meniul derulant Align alegei una din poziiile afiate: left, center, right. Iat cum centrm cu Dreamweaver MX workspace tabelul pe care l-ai creat n aplicaia precedent. 1. Selectai tabelul. 2. n panoul Properties, meniul derulant Align, executai clic pe Center (figura 9.33).
Figura 9.33
Remarc. Tabelul se afieaz centrat.
3. Analizai codul XHTML generat.

Remarc. Citii Conversaia 9, paragraful XHTML Aliniai un tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
398
Dreamweaver 4
workspace
Atribuii un titlu tabelului
Pentru a atribui un titlu/legend unui tabel cu Dreamweaver 4 workspace, utilizai un tabel cu dou celule pentru a plasa un titlu/legend deasupra, dedesubtul unui tabel/imagine. Iat cum afim cu Dreamweaver 4 workspace deasupra tabelului pe care l-ai creat, titlul LISTA CURSURILOR DE INFORMATIC. 1. Executai clic n locul n care dorii s figureze tabelul i titlul indicat. 2. Inserai un tabel fr bordur cu dou linii i o coloan (lungimea tabelului este 500 pixeli), figura 9.34.
Figura 9.34
3. Executai clic n linia inferioar a tabelului i inserai tabelul cruia dorii s-i aplicai titlul indicat (de exemplu, via Copy/Cut Paste), figura 9.35.
399
Figura 9.35
4. Executai clic n linia superioar a tabelului i introducei titlul tabelului: LISTA CURSURILOR DE INFORMATIC (figura 9.36).
Figura 9.36
5. Centrai i bolduii titlul tabelului (figura 9.37).
Figura 9.37
400
Figura 9.38
Remarc. Citii Conversaia 9, paragraful HTML 4 Atribuii un titlu tabelului (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.39
401
Remarc. Mai exist, evident, i alte metode pe care le putei folosi pentru a atribui un titlu/legend unui tabel sau unei imagini. Nu ezitai s le folosii.
Aplicaii Aliniai la dreapta titlul tabelului. Inserai titlul tabelului la baza acestuia, ca pe o legend. Iat care este procedura pe care trebuie s-o urmai. 1. n locul stabilit, inserai un tabel (fr bordur) cu dou linii i o coloan. 2. Inserai tabelul cu trei coloane i patru linii n linia superioar a tabelului cu dou linii i o coloan. 3. Executai clic n linia inferioar a tabelului i introducei numele indicat (legenda). 4. Centrai i bolduii titlul tabelului. 5. Analizai codul HTML generat. 6. Vizualizai pagina Web ntr-un browser. mbrcai tabelul cu urmtorul text: Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLND este puternic i nu doar att! Iat care este procedura pe care trebuie s-o urmai: 1. Selectai tabelul. 2. n inspectorul Properties, afiai meniul Align n care selectai Left/Right.
Remarc. Textul se afieaz n jurul tabelului (stnga/dreapta), figura 9.40.
402
Figura 9.40 3. Analizai codul HTML generat. 4. Vizualizai pagina Web ntr-un browser. Atribuii imaginii sigla.jpg, legenda LUMINA BLND. Iat care este procedura pe care v invitm s-o aplicai. 1. Inserai un tabel (fr bordur) cu dou linii i o coloan (figura 9.41).
Figura 9.41 2. Executai clic n linia superioar a tabelului i inserai imaginea sigla.jpg (figura 9.42).
403
Figura 9.42 3. Executai clic n linia inferioar a tabelului i introducei legenda (figura 9.43).
Figura 9.44
404
Figura 9.45 Plasai legenda alturi de imaginea sigla.jpg. Indicaie. Utilizai un tabel cu o singur linie i dou celule.
Dreamweaver MX
workspace
Atribuii un titlu tabelului
Pentru a atribui un titlu unui tabel cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Inserai un tabel (fr bordur) cu dou linii i o coloan; Metoda 2 Codul surs XHTML, via grupul de panouri Insert subpanoul Table; Metoda 3 Codul surs XHTML, via meniul Insert Insert TR, TH, TD. Iat cum atribuim cu Dreamweaver MX, un titlu, LISTA CURSURILOR DE INFORMATIC tabelului pe care l-ai creat anterior. Table
405
Metoda 2
1. Executai clic n interiorul tabelului. 2. Afiai codul surs XHTML (figura 9.46).
Figura 9.46
3. Executai clic n codul surs XHTML (figura 9.47) n locul n care urmeaz s inserai elementul <caption>.
Figura 9.47
406
4. n grupul de panouri Insert, n subpanoul Table, executai clic pe butonul cap (caption), figura 9.48.
Figura 9.48
Remarc. Semnificaia elementelor din subpanoul Table este urmtoarea: tabl, insereaz un tabel; tr, insereaz o linie; th, insereaz un antet; td, insereaz o linie; cap, insereaz un titlu.
n codul surs XHTML se insereaz elementul <caption> (figura 9.49).
Figura 9.49
407
5. ntre tag-urile elementului XHTML inserat <caption> introducei titlul tabelului (figura 9.50).
Figura 9.50
6. Acionai tasta F5 pentru a actualiza codul XHTML. 7. Analizai codul XHTML generat (figura 9.50).
Remarc. Citii Conversaia 9, paragraful XHTML Atribuii un titlu tabelului (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.51 Aplicaie Inserai titlul tabelului la baza acestuia, ca pe o legend.
408
Dreamweaver 4
workspace
Aplicai o bordur tabelului
Pentru a formata un tabel cu Dreamweaver 4 workspace, folosii inspectorul Properties. Iat cum aplicai o bordur de 10 pixeli tabelului (LISTA CURSURILOR DE INFORMATIC) pe care apoi l vom centra i dimensiona (400 x 200 pixeli). 1. Selectai tabelul. 2. n inspectorul Properties, n zonele W i H redefinii lungimea i limea tabelului, n pixeli sau procente (figura 9.52).
Figura 9.52
3. n zona Border introducei valoarea 10, care reprezint limea bordurii exterioare a tabelului (figura 9.53).
Figura 9.53
4. n meniul derulant Align selectai Center.

Remarc. Tabelul de dimensiuni 400*200 pixeli i cu o bordur de 10 pixeli se va afia centrat.
Figura 9.54
409
Remarci: Selectai tag-ul <TABLE> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul align. Citii Conversaia 9, paragraful HTML 4 Aplicai o bordur tabelului (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.55
Aplicaii Mascai toate bordurile exterioare ale tabelului. Indicaie. n zona Border introducei valoarea 0. Afiai numai bordura superioar a tabelului. Indicaie. Introducei n codul surs HTML: <TABLE border frame=above>. Mascai toate bordurile interioare ale tabelului. Indicaie. Introducei n codul surs HTML: <TABLE border rules=none>. Afiai numai bordurile interioare care separ liniile orizontale ale tabelului. Indicaie. Introducei n codul surs HTML: <TABLE border rules=rows>.
410
Dreamweaver MX Aplicai o bordur tabelului

workspace
Pentru a formata un tabel cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum procedai pentru a aplica o bordur (10 pixeli) tabelului creat, pe care apoi l vom centra, dimensiona (400*200 pixeli) cu Dreamweaver MX workspace. 1. Selectai tabelul. 2. n panoul Properties, n zonele W, H i Border introducei valorile: 400, 200 respectiv 10, iar n meniul derulant Align selectai Center (figura 9.56).
Figura 9.56
Figura 9.57
Remarc. Citii Conversaia 9, paragraful XHTML Aplicai o bordur (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
411
Dreamweaver 4
workspace
Aliniai orizontal datele unui tabel
Pentru a alinia orizontal datele unui tabel cu Dreamweaver 4 workspace, folosii inspectorul de proprieti. Iat cum aliniai (centrai) orizontal datele din toate celulele care aparin primei linii de date a tabelului. 1. Selectai toate celulele din prima linie de date a tabelului (figura 9.58).
Figura 9.58
2. n inspectorul Properties, indicai poziia orizontal center a coninutului celulelor din prima linie de date a tabelului, cu ajutorul meniului derulant Horz (figura 9.59).
Figura 9.59
3. Executai clic pe Center.
412
Remarc. Datele din prima linie de date a tabelului se afieaz centrat (figura 9.60).
Figura 9.60
Figura 9.61
Remarci: Selectai tag-ul <TR> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul align. Citii Conversaia 9, paragraful HTML 4 Aliniai orizontal datele unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
413
Figura 9.62 Aplicaie Aliniai la dreapta datele din celula de date UTILIZARE PC-uri care aparine primei linii de date. 1. Selectai celula de date. 1.1 inei apsat tasta CTRL i executai clic pe celula de date (figura 9.63).
Figura 9.63 2. n inspectorul Properties, indicai poziia orizontal Right a coninutului celulei de date a tabelului, cu ajutorul meniului derulant Horz. 3. Executai clic pe Right. 4. Analizai codul HTML generat (figura 9.64).
414
Figura 9.65
415
Dreamweaver MX
workspace
Aliniai orizontal datele unui tabel
Pentru a alinia orizontal coninutul celulelor unui tabel cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum aliniai (centrai) orizontal datele din toate celulele care aparin primei linii de date ale tabelului creat. 1. Selectai toate celulele din prima linie de date a tabelului. 2. n panoul Properies, n zona Horz selectai Center. 3. Executai clic pe Center. 4. Analizai codul XHTML generat (figura 9.66).
Figura 9.66
Remarc. Citii Conversaia 9, paragraful XHTML Aliniai orizontal datele unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
416
Dreamweaver 4
workspace
Aliniai vertical datele unui tabel
Pentru a alinia vertical datele unui tabel cu Dreamweaver 4 workspace, folosii inspectorul de proprieti. Iat cum aliniai vertical la baza celulelor (bottom), datele din toate celulele care aparin primei linii de date a tabelului. 1. Selectai toate celulele din prima linie de date a tabelului. 2. n inspectorul Properties, indicai poziia vertical Bottom a coninutului celulelor din prima linie de date a tabelului, cu ajutorul meniului derulant Vert (figura 9.67).
Figura 9.67
3. Executai clic pe Bottom. Datele din prima linie de date a tabelului se aliniaz vertical, la baza celulelor (figura 9.68).
Figura 9.68
417
Figura 9.69
Remarci: Selectai tag-ul <TR> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul valign. Citii Conversaia 9, paragraful HTML 4 Aliniai vertical datele unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.70
Aplicaii Aliniai vertical (middle) datele din toate celulele care aparin primei coloane a tabelului. Iat care este procedura pe care trebuie s-o urmai: 1. Selectai toate celulele din prima coloan a tabelului.
418
Figura 9.71 2. n inspectorul Properties, indicai poziia vertical Middle a coninutului celulelor din prima coloan a tabelului, cu ajutorul meniului derulant Vert. 3. Executai clic pe Middle. 4. Analizai codul HTML generat. 5. Vizualizai pagina Web ntr-un browser. Aliniai vertical (top) datele dintr-o singur celul de date: Autocad.
Dreamweaver MX
workspace
Aliniai vertical datele unui tabel
Pentru a alinia vertical datele unui tabel cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum procedai pentru a alinia vertical, la baza celulelor (bottom), datele din toate celulele care aparin primei linii de date a tabelului creat. 1. Selectai toate celulele din prima linie de date a tabelului. 2. n panoul Properties, n zona Vert, selectai Bottom.
419
3. Executai clic pe Bottom.
Remarc. Datele din prima linie de date a tabelului se aliniaz vertical, la baza celulelor.
Figura 9.72
Remarc. Citii Conversaia 9, paragraful XHTML Aliniai vertical datele unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.73
420
Dreamweaver 4
workspace
Modificai spaiul dintre celulele unui tabel
Putei modifica cu Dreamweaver 4 workspace spaiul dintre celulele unui tabel pentru a ajusta n mod corespunztor dimensiunea bordurilor. Iat cum modificm (10 pixeli) spaiul dintre celulele tabelului pe care l-ai creat anterior. 1. Selectai tabelul. 2. n inspectorul Properties, n zona Cell Space, introducei valoarea 10 (figura 9.74).
Figura 9.74

Remarc. Dreamweaver ajusteaz spaiul care separ celulele tabelului, cu valoarea indicat 10 pixeli (figura 9.75).
Figura 9.75
421
Figura 9.76
Remarci: Selectai tag-ul <TABLE> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul cellspacing. Citii Conversaia 9, paragraful HTML 4 Modificai spaiul dintre celulele unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.77
422
Dreamweaver MX
workspace
Modificai spaiul dintre celulele unui tabel
Pentru a modifica spaiul dintre celulele unui tabel cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum procedai pentru a modifica cu 10 pixeli spaiul dintre celulele tabelului pe care l-ai creat anterior. 1. Selectai tabelul. 2. n panoul Properties, n zona CellSpace, introducei valoarea 10 (figura 9.78).
Figura 9.78
Figura 9.79
423
Remarc. Citii Conversaia 9, paragraful XHTML Modificai spaiul dintre celulele unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.80
Dreamweaver 4
workspace
Modificai dimensiunile liniilor unui tabel
Cu Dreamweaver putei modifica dimensiunile elementelor unui tabel, fr stres. Iat cum modificm, cu 60 respectiv 120 de pixeli nlimea primelor dou linii ale tabelului. 1. Selectai prima linie a tabelului (figura 9.81).
424
Figura 9.81
2. n inspectorul Properties, n zona H, redefinii nlimea primei linii introducnd valoarea 60. 3. Acionai tasta Enter.
Remarc. Prima linie a tabelului se afieaz cu nlimea modificat (60 pixeli), figura 9.82.
Figura 9.82
4. Selectai cea de-a doua linie a tabelului. 5. n inspectorul Properties, n zona H, introducei valoarea 120 (pixeli). 6. Acionai tasta Enter. 7. Analizai codul HTML generat (figura 9.83).
425
Figura 9.83
Remarci: Selectai tag-ul <TD> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul height. Citii Conversaia 9, paragraful HTML 4 Modificai dimensiunile liniilor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.84
Pentru a modifica lungimea primei linii a tabelului (100 pixeli) respectai paii descrii n continuare. 1. Selectai tabelul.
426
2. n inspectorul Properties, n zona W, redefinii lungimea tabelului, introducnd valoarea 100 pixeli. 3. Acionai tasta Enter. 4. Analizai codul HTML generat (figura 9.85).
Figura 9.85
Remarc. Selectai tag-ul <TH> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul Width. Citii Conversaia 9, paragraful HTML 4 Modificai dimensiunile liniilor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.86 Aplicaii Redimensionai tabelul LISTA CURSURILOR DE INFORMATIC cu valorile 550 x 350 pixeli. Indicaie. n inspectorul Properties, n zonele W i H introducei valorile indicate.
427
Modificai lungimea primei coloane (Denumire curs) valoarea 130 pixeli. Indicaie. Executai paii listai n cele ce urmeaz. 1. Executai clic n celula Denumire curs. 2. n inspectorul Properties, n zona W, introducei valoarea 130 pixeli. 3. Acionai tasta Enter. Modificai nlimea primei celule (Denumire curs) a aceluiai tabel, cu valoarea 150 pixeli. Indicaie. Executai paii descrii n continuare. 1. Executai clic n celula Denumire curs. 2. n inspectorul Properties, n zona H, introducei valoarea 150 pixeli. 3. Acionai tasta Enter. Modificai lungimea celei de-a treia celule de date (50$) a aceluiai tabel, cu valoarea 120 pixeli. Modificai manual (cu ajutorul mouse-ului) dimensiunile aceluiai tabel cu 300 x 50 pixeli. Iat care este procedura de urmat. 1. Selectai tabelul. 2. Glisai cele trei puncte (de pe conturul tabelului) n direciile corespunztoare (figura 9.87). a aceluiai tabel, cu
428
Figura 9.87 Convertii lungimea (300 pixeli) tabelului n procente. Iat care sunt paii pe care trebuie s-i parcurgei. 1. Selectai tabelul. 2. n inspectorul Properties executai clic pe butonul Widths to Percent), figura 9.88. (Convert Table
Figura 9.88
sau,
2. Executai clic pe Modify Table Convert Widths to Percent.
Remarc. Folosii butonul (Convert Table Widths to Pixels) din inspectorul Properties pentru convertirea dimensiunii tabelului n pixeli.
tergei lungimea/limea celulelor unui tabel. Iat care este procedura pe care trebuie s-o urmai. 1. Selectai tabelul. 2. n inspectorul Properties Heights)/ executai clic pe butonul (Clear Row
(Clear Column Widths), figura 9.89.
429
Figura 9.89
sau,
2. Executai clic pe Modify Widths. Table Clear Row Heights/Clear Column
Dreamweaver MX
workspace
Modificai dimensiunile liniilor unui tabel
Pentru a modifica dimensiunile liniilor unui tabel cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum procedai pentru a modifica nlimea primelor dou linii ale tabelului creat, cu 60, respectiv 120 de pixeli. 1. Selectai prima linie a tabelului. 2. n panoul Properties, n zona H, introducei valoarea 60 (pixeli). 3. Acionai tasta Enter. 4. Selectai cea de-a doua linie a tabelului. 5. n panoul Properties, n zona H introducei valoarea 120 (pixeli). 6. Acionai tasta Enter. 7. Analizai codul XHTML generat (figura 9.90).
430
Figura 9.90
Figura 9.91
Iat cum procedai pentru a modifica lungimea primei linii a tabelului (100 pixeli). 1. Selectai tabelul. 2. n panoul Properties, n zona W introducei valoarea 100 (pixeli). 3. Acionai tasta Enter.
431
Figura 9.92
Remarc. Citii Conversaia 9, paragraful XHTML Modificai dimensiunile liniilor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Dreamweaver 4
workspace
Modificai marginile interioare ale celulelor unui tabel
Putei modifica cu Dreamweaver 4 workspace distana dintre coninutul i marginile interioare ale celulelor unui tabel. Iat cum modificm (15 pixeli) marginile interioare ale celulelor tabelului creat. 1. Selectai tabelul. 2. n inspectorul Properties, n zona CellPad, introducei valoarea 15 (figura 9.93).
Figura 9.93
432
Remarc. Dreamweaver 4 workspace ajusteaz marginile interioare ale celulelor tabelului cu valoarea indicat 15 pixeli (figura 9.94).
Figura 9.94
Figura 9.95
Remarci: Selectai tag-ul <TABLE> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul cellpadding. Citii Conversaia 9, paragraful HTML 4 Modificai interioare ale celulelor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
433
Figura 9.96
Dreamweaver MX Modificai marginile interioare ale

workspace
celulelor unui tabel
Pentru a modifica marginile interioare ale celulelor unui tabel cu Dreamweaver MX workspace, folosii panoul Properties. Iat cum procedai pentru a modifica (15 pixeli) marginile interioare ale celulelor tabelului LISTA CURSURILOR DE INFORMATIC. 1. Selectai tabelul. 2. n panoul Properties, n zona CellPad, introducei valoarea 15 (pixeli). 3. Acionai tasta Enter. 4. Analizai codul XHTML generat (figura 9.97).
434
Figura 9.97 Remarc. Citii Conversaia 9, paragraful XHTML Modificai marginile interioare ale celulelor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.98
Dreamweaver 4
workspace
Extindei o celul pe mai multe coloane sau linii
Fuziunea celulelor (orizontal sau vertical) cu Dreamweaver 4 workspace este o operaie deosebit de simpl.
435
Iat cum adugai n tabel o nou linie de antet: INFORMATICA, care se extinde pe toate cele trei coloane ale tabelului. 1. Adugai o linie vid deasupra liniei care conine capul de tabel, folosind una din cele trei metode prezentate n continuare.
Metoda 1
1.1 Executai clic n celula Denumire curs. 1.2 Executai clic pe Modify Table Insert Row.
Remarc. Dreamweaver 4 workspace insereaz o linie vid deasupra liniei care conine capul de tabel (figura 9.99).
Figura 9.99
Metoda 2
1.1 Executai clic n celula Denumire curs. 1.2 Executai clic pe Modify Columns.
Remarc. Se afieaz caseta de dialog Insert Rows or Columns.
Table
Insert Row or
1.3 n caseta de dialog Insert Rows or Columns, executai urmtoarele aciuni (figura 9.100): n zona Insert alegei opiunea Rows;
436
n zona Number of Rows alegei 1; n zona Where
alegei opiunea Above

the Selection.
executai clic pe butonul OK.
Figura 9.100
Metoda 3
1.1 Executai clic cu butonul din dreapta al mouse-ului n celula Denumire curs. Se afieaz meniul derulant Table, Paragraph Format, List . 1.2 Executai clic pe Table Insert Row.
Remarc. Pentru a aduga o nou linie la baza tabelului (Metoda 4), executai clic n ultima celul a tabelului i apoi acionai tasta sau n inspectorul Properties, n zona Rows mrii cu 1 valoarea iniial.
2. Selectai celulele adiacente care dorii s fuzioneze (figura 9.101).
Figura 9.101
437
3. Fuzionai celulele selecionate ntr-una singur, folosind una din cele dou metode prezentate n continuare.
Metoda 1
3.1 n inspectorul Properties, executai clic pe butonul (Merge Cells).
Figura 9.102
Remarc. Dreamweaver 4 workspace afieaz cele trei celule ale liniei ntr-una singur (figura 9.103).
Figura 9.103
Metoda 2
3.1 Executai clic pe Modify Table Merge Cells.
4. Introducei titlul noii linii de antet: INFORMATICA (figura 9.104).
Figura 9.104
438
Remarci: Pentru a mri dimensiunile unei celule fuzionate, executai clic n celula fuzionat, iar apoi executai clic pe Modify Table Increase Row Span. Pentru a micora dimensiunile unei celule fuzionate, executai clic n celula fuzionat, iar apoi executai clic pe Modify Table Decrease Row Span.
Figura 9.105
Remarci: Selectai tag-ul <TH> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul colspan. Citii Conversaia 9, paragraful HTML 4 Extindei o celul pe mai multe coloane sau linii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.106
Remarc. Numai celulele contigue pot fi reunite.
439
Pentru a extinde prima celul de date UTILIZARE PC-uri pe dou linii, parcurgei paii descrii n cele ce urmeaz: selectai celulele adiacente; fuzionai celulele selecionate ntr-una singur, aplicnd una din cele dou variante prezentate anterior; analizai codul vizualizai pagina Web ntr-un browser.
Remarci: Invers, putei fraciona celulele fuzionate (pentru a regsi numrul iniial de celule). Procedura de fracionare a celulelor fuzionate este urmtoarea: 1. Executai clic ntr-o celul fuzionat.
HTML generat;
Metoda 1:
2. Executai clic pe Modify Table Split Cell. Se afieaz caseta de dialog Split Cell (figura 9.107).
Figura 9.107 3. n funcie de fuziunea iniial, alegei Split Cell Into: Rows sau Split 4. Executai clic pe butonul OK. 5. Analizai codul HTML generat. 6. Vizualizai pagina Web ntr-un browser.
Cell Into: Columns apoi indicai Number of Columns.
Metoda 2:
Se modific punctul 2, Metoda 1, dup cum urmeaz: 2. n inspectorul Properties, executai clic pe butonul rows or columns). (Splits Cell into
Dreamweaver MX
workspace
Extindei o celul pe mai multe coloane sau linii
Pentru a fuziona celulele unui tabel cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Modify, via Table Metoda 2 Panoul Properties. Merge;
440
Iat cum procedai pentru a aduga n tabelul pe care l-ai creat cu Dreamweaver 4 workspace o nou linie de antet: INFORMATICA, care se extinde pe toate cele trei coloane ale tabelului. 1. Adugai o linie vid deasupra liniei care conine capul de tabel. 2. Selectai celulele adiacente care dorii s fuzioneze. 3. Fuzionai celulele selecionate.
Metoda 2
3.1 n panoul Properties, executai clic pe butonul Cells), figura 9.108. (Merge
Figura 9.108
Remarc. Dreamweaver MX workspace afieaz cele trei celule ale liniei ntr-una singur.
4. Introducei titlul noii linii de antet: INFORMATICA. 5. Analizai codul XHTML generat (figura 9.109).
Figura 9.109
441
Remarc. Citii Conversaia 9, paragraful XHTML Extindei o celul pe mai multe coloane sau linii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.110 Aplicaii Extindei prima celul de date UTILIZARE PC-uri pe dou linii. Fracionai celulele fuzionate. Indicaie. Pentru a fraciona celulele fuzionate cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Modify, via Table Metoda 2 Panoul Properties. Split Cells;
Dreamweaver 4
workspace
Aplicai o culoare elementelor unui tabel
Cu Dreamweaver 4 workspace putei aplica, fr a v stresa o culoare celulelor, liniilor sau coloanelor unui tabel. Iat cum aplicai o culoare (albastru deschis) primei linii a tabelului. 1. Selectai prima linie a tabelului.
442
2. n inspectorul Properties, executai clic pe butonul
Remarc. Se afieaz paleta de culori (figura 9.111).
(Bg).
Figura 9.111
3. Executai clic cu pipeta pe culoarea albastru deschis.

Dreamweaver 4 workspace afieaz prima linie a tabelului n albastru deschis (figura 9.112).
Figura 9.112
Figura 9.113
443
Remarci: Selectai tag-ul <TR> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul BGCOLOR. Citii Conversaia 9, paragraful HTML 4 Aplicai o culoare elementelor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.114
Iat cum aplicai aceeai culoare (albastru deschis) primei coloane a aceluiai tabel. 1. Selectai prima coloan a tabelului (figura 9.115).
Figura 9.115
2. n inspectorul Properties, executai clic pe butonul 3. Executai clic cu pipeta pe culoarea albastru deschis.
(Bg).
444
Figura 9.116
Figura 9.117
Dreamweaver MX Aplicai o culoare elementelor unui

workspace
tabel
Pentru a aplica o culoare celulelor, liniilor sau coloanelor unui tabel cu Dreamweaver MX workspace, folosii panoul Properties.
445
Iat cum aplicai o culoare (albastru deschis) primei linii a tabelului LISTA CURSURILOR DE INFORMATIC. 1. Selectai prima linie a tabelului. 2. n panoul Properties, executai clic pe butonul (Bg).
3. Executai clic cu pipeta pe culoarea albastru deschis. 4. Analizai codul XHTML generat (figura 9.118).
Figura 9.118
Remarc. Citii Conversaia 9, paragraful XHTML Aplicai o culoare elementelor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.119
446
Aplicaii Aplicai aceeai culoare (albastru deschis) primei coloane a aceluiai tabel. Colorai n cyan background-ul tabelului. Colorai n aqua linia de antet i n white a doua linie de date a aceluiai tabel. Colorai n galben bordura tabelului.
_________________________________________________________ ___________________________________________________________ ___________________________________________________________ ___________________________________________________________
Dreamweaver 4
workspace
unui tabel sau unei celule a tabelului
Iat cum plasai pe fundalul tabelului imaginea Blue hills.jpg. 1. Selectai tabelul. 2. n inspectorul Properties, n zona BgImage introducei adresa imaginii de background (figura 9.120).
Figura 9.120 Remarc. Putei selecta imaginea de background, utiliznd de asemenea icon-ul Browse for File ( ) din inspectorul Properties, via BgImage.
Dreamweaver 4 workspace aplic pe fundalul tabelului imaginea dorit (figura 9.121).
447
Figura 9.121
Figura 9.122
Remarci: Selectai tag-ul <TABLE> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul BACKGROUND. Citii Conversaia 9, paragraful HTML 4 Aplicai o imagine de background unui tabel sau unei celule a tabelului (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.123
448
Pentru a plasa aceeai imagine de background n prima celul de date (UTILIZARE PC-uri) a tabelului, respectai procedura descris n cele ce urmeaz. 1. Selectai celula de date UTILIZARE PC-uri (figura 9.124).
Figura 9.124
2. n inspectorul Properties, cu ajutorul icon-ului i Smokey Light.jpg celulei selectate (figura 9.125).
(Point to File)
(Background URL of cell) aplicai imaginea de background
Figura 9.125
Dreamweaver 4 workspace aplic pe fundalul tabelului imaginea dorit (figura 9.126).
Figura 9.126
449
Figura 9.127
Remarc. Selectai tag-ul <TD> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul BACKGROUND.
Figura 9.128
Dreamweaver MX
workspace
unui tabel sau unei celule a tabelului
Pentru a aplica o imagine de background unui tabel (celule) folosii panoul Properties.
450
Iat cum procedai pentru a plasa pe fundalul tabelului creat, imaginea Smokey Light.jpg. 1. Selectai tabelul. 2. n panoul Properties, n zona BgImage, introducei adresa imaginii de background. 3. Analizai codul XHTML generat (figura 9.129).
Figura 9.129
Figura 9.130
451
Aplicaie Plasai imaginea de background Smokey Light.jpg n prima celul de date a aceluiai tabel.
Dreamweaver 4
workspace
Utilizai un tabel ca un instrument de punere n pagin
Iat cum plasm imaginea Smokey Light.jpg n tabel (figura 9.131). 1. Creai cu Dreamweaver 4 workspace tabelul n care urmeaz s inserai imaginea (figura 9.131).
Figura 9.131
2. Plasai imaginea n celula din stnga tabelului (tabelul 9.132).
Figura 9.132
452
3. Afiai codul HTML generat (figura 9.133).
Figura 9.133
Remarci: Selectai tag-ul <TD> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul rowspan. Citii Conversaia 9, paragraful HTML 4 Utilizai un tabel ca un instrument de punere n pagin (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.134
Dreamweaver MX Utilizai un tabel ca un instrument

workspace
de punere n pagin
De ce s nu utilizm un tabel pentru a realiza punerea n pagin a site-ului dumneavoastr? Este o soluie agreat de un numr foarte mare de webmasters!
453
Iat cum procedm pentru a insera imaginea Smokey Light.jpg n celula din stnga a tabelului LISTA CURSURILOR DE INFORMATIC. 1. Creai cu Dreamweaver MX workspace tabelul LISTA
CURSURILOR DE INFORMATIC. 2. Plasai imaginea n celula din stnga tabelului. 3. Afiai codul XHTML generat (figura 9.135).
Figura 9.135
Remarc. Citii Conversaia 9, paragraful XHTML Utilizai un tabel ca un instrument de punere n pagin (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.136
454
Dreamweaver 4
workspace
Formatai un tabel utiliznd modele predefinite
Cu Dreamweaver putei s formatai propriul tabel utiliznd diverse modele predefinite. Iat cum utilizm modelul Dbl Rows: Orange pentru formatarea tabelului LISTA CURSURILOR DE INFORMATIC. 1. Selectai tabelul. 2. Executai clic pe Commands Format Table (figura 9.137).
Figura 9.137
Remarc. Se afieaz caseta de dialog Format Table (figura 9.138).
455
Figura 9.138
3. n lista derulant (situat n stnga) alegei modelul predefinit (Dbl Rows: Orange), figura 9.139.
Figura 9.139
4. n zona Row Colors indicai prima culoare (white) i a doua culoare (orange) tastnd codul/numele culorii n cele dou zone: First respectiv Second (figura 9.140).
Figura 9.140
5. n meniul derulant Alternate alegei Every Two Rows, pentru a aplica liniilor tabelului culorile definite anterior (figura 9.141).
Figura 9.141
456
6. n zona Top Row, care permite personalizarea primei linii a tabelului alegei Center pentru cmpul Align i Bold pentru cmpul Text Style (figura 9.142).
Remarc. Cei interesai pot completa i cmpurile Bg Color i Text Color cunoscute din HTML i Dreamweaver.
Figura 9.142
7. n zona Left Col, care permite formatarea primei coloane a tabelului, alegei Left pentru cmpul Align i Italic pentru cmpul Text Style (figura 9.143).
Figura 9.143
8. n zona Border introducei valoarea 1 (limea bordurii tabelului exprimat n pixeli), figura 9.144.
Figura 9.144
9. Activai n zona Options opiunea Apply All Attributes to TD Tags Instead of TR Tags pentru a aplica toate atributele de formatare (text, aliniere, culoare...) tag-urilor HTML <td> de formatare a celulelor i nu tag-urilor <tr> de formatare a liniilor (figura 9.145).
Figura 9.145

Remarc. Dreamweaver afieaz tabelul formatat cu modelul Dbl Rows: Orange (figura 9.146).
457
Figura 9.146
Figura 9.147
458
Figura 9.148 Aplicaii Sortai ascendent dup cmpul Denumire curs tabelul LISTA CURSURILOR DE INFORMATIC. Iat care este procedura pe care trebuie s-o urmai pentru sortarea tabelului, dup cheia de sortare indicat Denumire curs. 1. Executai clic n tabel. 2. Executai clic pe Commands Sort Table (figura 9.149).
Figura 9.149
Remarc. Se afieaz caseta de dialog Sort Table (figura 9.150).
459
Figura 9.150 3. n meniul derulant Sort By alegei Column 1, care reprezint coloana dup care se face sortarea (figura 9.151). Figura 9.151 4. n meniul derulant Order alegei tipul Alphabetically (ordine
alfabetic) i apoi Ascending (sortare ascendent), figura 9.152. Figura 9.152

Remarci: n meniul derulant Then By alegei n cazul dublrii primei coloane , a doua coloan de sortare, indicnd de asemenea tipul de sortare: alfabetic/numeric, ascendent/descendent. n Dreamweaver 4 workspace sunt admise una sau dou chei de sortare. Activai opiunea Sort Includes First Row dac prima linie a tabelului trebuie s fie inclus n sortare. n acest caz ea va fi deplasat. Activai opiunea Keep TR Attributes With Sorted Row pentru ca elementele de formatare ale primei linii s fie deplasate cu aceasta.

Remarc. Dreamweaver 4 workspace afieaz tabelul sortat dup prima coloan (figura 9.153).
460
Figura 9.155
461
Importai un tabel Excel. Pentru a importa un tabel creat ntr-o alt aplicaie (Excel, Acces etc.) respectai procedura descris n continuare. 1. Creai n Excel tabelul corespunztor (figura 9.156).
Figura 9.156
2. n panoul Insert, zona Common, executai clic pe butonul Tabular Data),figura 9.157.
(Insert
Figura 9.157
sau,
2. Executai clic pe File Import Import Tabular Data....
Remarc. Se afieaz caseta de dialog Insert Tabular Data (figura 9.158).
462
Figura 9.158 3. Indicai fiierul de date (extensia .txt) executnd clic pe butonul Browse... via Data File. 4. n meniul derulant Delimiter alegei delimitatorul de date (figura 9.159): 5. n zona Table Width activai opiunea Set pentru a preciza dumneavoastr niv lrgimea tabelului n procente sau pixeli (figura 9.159). 6. Utilizai meniul derulant Format Top Row pentru a aplica o formatare particular datelor din prima linie (figura 9.159).
Figura 9.159
463
7. Definii: marginea interioar a celulelor, spaiul dintre celule, bordura utiliznd cmpurile Cell Padding, Cell Spacing, Border din caseta de dialog Insert Tabular Data. 8. Executai clic pe butonul OK.
Remarc. Dreamweaver afieaz tabelul importat din Excel (figura 9.160).
464
Figura 9.162 Exportai n Word tabelul pe care l-ai creat cu Dreamweaver 4 workspace. Iat care este procedura pe care trebuie s-o urmai. 1. Executai clic n interiorul tabelului. 2. Executai clic pe File Export Table (figura 9.163).
Figura 9.163
Remarc. Se afieaz caseta de dialog Export Table.
465
3. n caseta de dialog Export Table (figura 9.164) realizai urmtoarele aciuni: n meniul derulant Delimiter alegei tipul de delimitator;
n meniul derulant Line Breaks alegei tipul de salt de linie; executai clic pe butonul Export.
Figura 9.164 4. Afiai n Word tabelul Dreamweaver exportat (figura 9.165).
Figura 9.165
466
Dreamweaver MX
workspace
Formatai un tabel utiliznd modele predefinite
Pentru a formata un tabel cu Dreamweaver MX workspace, folosii meniul Commands, via Format Table (vezi Dreamweaver 4 workspace). Iat cum formatm tabelul LISTA CURSURILOR DE INFORMATIC utiliznd modelul Dbl Rows: cyan. 1. Selectai tabelul. 2. Executai clic pe Commands Format Table.
3. n caseta de dialog Format Table care se afieaz (figura 9.166) executai urmtoarele aciuni: n lista derulant (situat n stnga casetei) alegei modelul predefinit Dbl Rows: cyan; n zona Row Colors tastai White (cmpul First) i cyan (cmpul Second); n meniul derulant Alternate alegei Every Other Row; n zona Top Row alegei Center n cmpul Align i Bold n cmpul Text Style; n zona Left Col alegei Left n cmpul Align i Regular n cmpul Text Style; n zona Border introducei valoarea 1; activai opiunea Apply All Attributes to TD Tags Instead of TR Tags pentru a plica toate atributele de formatare tag-urilor HTML <td> de formatare a celulelor; executai clic pe butonul OK.
467
Figura 9.166
Figura 9.167
468
Figura 9.168 Aplicaii Sortai ascendent, dup cmpul Denumire curs LISTA CURSURILOR DE INFORMATIC. Importai un tabel Excel. Indicaie. Folosii una din metodele prezentate mai jos: Metoda 1 Grupul de panouri Insert; Metoda 2 Meniul File, via Import Import Tabular Data.
Exportai n Word tabelul pe care l-ai creat cu aplicaia precedent. Indicaie. Folosii meniul File, via Export Table.
Dreamweaver 4
workspace
Creai un tabel n modul Layout View
Cu Dreamweaver 4 workspace putei crea un tabel n dou moduri: Standard View; Layout View. Pentru a activa modul Layout View cu Dreamweaver 4 workspace folosii una din metodele prezentate mai jos: Metoda 1 Meniul View, via Table View Metoda 2 Panoul Insert. Layout View;
469
Iat cum crem n modul Layout View tabelul LISTA CURSURILOR DE INFORMATIC pe care l-ai realizat n modul Standard View. Vom utiliza Metoda 2.
Metoda 2
1. n panoul Insert, categoria Common executai clic pe butonul (Layout View), figura 9.169.
Figura 9.169
Se afieaz caseta de dialog Getting Started in Layout View (figura 9.170).
Figura 9.170
470
Remarc. Putei, de asemenea, activa modul Layout View executnd clic pe View Table View Layout View (Metoda 1).
2. Executai clic pe butonul OK. 3. n panoul Insert, categoria Common - Layout View executai clic pe butonul (Draw Layout Table) pentru a trasa un tabel
n modul Layout View (figura 9.171).
Figura 9.171
4. Desenai o zon dreptunghiular care delimiteaz tabelul dumneavoastr, executnd clic n stnga sus a ferestrei document i apoi cu butonul stnga al mouse-ului apsat deplasndu-v n dreapta jos pentru a determina dimensiunile tabelului (figura 9.172).
Figura 9.172
471
5. Eliberai butonul din stnga al mouse-ului. Dreamweaver afieaz (n modul Layout View) tabelul n fereastra document (figura 9.173) indicnd lungimea tabelului exprimat n pixeli.
Figura 9.173
6. Ajustai dimensiunile tabelului acionnd asupra celor trei puncte de pe conturul tabelului sau utiliznd inspectorul Properties - zonele Width i Height (figura 9.174).
Putei indica, de asemenea, n inspectorul Properties: CellPad, CellSpace, Bg cu semnificaiile cunoscute. Coninutul tabelului nu poate fi editat nc ntruct acesta nu conine nici o celul!
7. Desenai celulele n tabelul creat (400 x 200 pixeli). 7.1 n panoul Insert, categoria Common Layout View executai clic pe butonul 9.175. (Draw Layout Cell),figura
472
Figura 9.175
7.2 Trasai prima celul a tabelului (figura 9.176).
Figura 9.176
7.3 Trasai celelalte celule ale tabelului (figura 9.177).

Remarc. Pentru a desena mai multe celule contigue meninei apsat tasta CTRL.
Figura 9.177
473
Remarci: Putei, de asemenea, desena direct prima celul, fr a desena nainte tabelul. Celula va fi inclus ntr-un tabel care va avea ca lungime dimensiunea ecranului dumneavoastr de lucru. Putei redimensiona celulele unui tabel fie manual, fie cu inspectorul Properties (zonele Width i Height). Putei terge o celul meninnd apsat tasta CTRL i executnd clic n celul i acionnd tasta Delete. Putei desena celulele dumneavoastr utiliznd dou moduri: absolut i relativ. Modul absolut v permite s indicai valorile n pixeli care sunt fixe; modul relativ v permite s indicai valorile n procente n raport cu dimensiunea ferestrei navigatorului. Este modul Autostretch. O singur coloan de celule poate fi Autostretch. Pentru a desena o coloan n mod relativ, respectai urmtoarea procedur: desenai tabelul cu instrumentul Draw Layout Table ( ), care n mod implicit este n mod Standard View. n inspectorul Properties executai clic pe opiunea Autostretch. Dreamweaver deseneaz tabelul n modul relativ; un simbol specific ( ) se afieaz n antet-ul tabelului (figura 9.178).
Figura 9.178 cu instrumentul Draw Layout Cell ( ) desenai prima celul: coloana corespunztoare este n mod relativ, cealalt coloan este n mod absolut (figura 9.179).
Figura 9.179 desenai celelalte celule.
474
Figura 9.180
9. Afiai tabelul n modul standard, folosind una din cele dou metode prezentate mai jos (figura 9.181).
Metoda 1
9.1. Executai clic pe View Table View Standard View.
Metoda 2
9.1. n panoul Insert, categoria Common, executai clic pe butonul (Standard View).
Figura 9.181
475
Figura 9.182
Dreamweaver MX
workspace
Creai un tabel n modul Layout View
Pentru a activa modul Layout View cu Dreamweaver MX workspace folosii una din metodele prezentate mai jos: Metoda 1 Meniul View, via Table View Metoda 2 Grupul de panouri Insert. Layout View;
Creai tabelul n modul Layout View

Iat cum crem n modul Layout View acelai tabel pe care l-ai creat cu Dreamweaver 4 workspace n modul Standard View.
Metoda 2
1. n grupul de panouri Insert, n subpanoul Layout, executai clic pe butonul Layout View (figura 9.183).
Figura 9.183
2. n subpanoul Layout View, executai clic pe butonul Layout Table).
(Draw
3. Desenai o zon dreptunghiular care delimiteaz tabelul dumneavoastr (figura 9.184).
476
Figura 9.184
Remarc. Dreamweaver afieaz tabelul n modul Layout View indicnd lungimea (n pixeli).
4. Ajustai dimensiunile tabelului (400 x 200 pixeli). Indicaie. Utilizai panoul Properties. Introducei valorile corespunztoare n zonele: Width (400), Height (200), CellPad (0), CellSpace (0).
Desenai celulele tabelului

1. n grupul de panouri Insert, n subpanoul Layout View, executai clic pe butonul
Figura 9.185
(Draw Layout Cell), figura 9.185.
2. Trasai prima celul a tabelului (figura 9.186).
Figura 9.186
3. Trasai celelalte celule ale tabelului.
477
4. Completai tabelul pe care l-ai creat. 5. Afiai tabelul n modul standard, folosind una din metodele prezentate n continuare. Metoda 1 Meniul View, via Table View Standard View;
Metoda 2 Grupul de panouri Insert, via subpanoul Layout View Standard View.
Figura 9.187
Figura 9.188
478
Dreamweaver MX
Testai-v cunotinele
Tem
1. Descriei pe scurt o metod Dreamweaver MX pentru: crearea unui tabel; alinierea unui tabel; atribuirea unui titlu tabelului; aplicarea unei borduri tabelului; alinierea orizontal/vertical a datelor unui tabel. 2. Cum extindei cu Dreamweaver MX o celul pe mai multe coloane/ linii? 3. Cum folosii inspectorul de proprieti (Panoul Properties) pentru a aplica o culoare celulelor, liniilor sau coloanelor unui tabel? 4. Putei utiliza un tabel pentru punerea n pagin a site-ului dumneavoastr? 5. Cum formatai un tabel utiliznd modelele predefinite?
Vizitai site-urile
www.balam.net www.modernmethod.com www.banja.com
Conversaia 10
Creai formulare cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Creai un formular Dreamweaver 4 workspace, MX workspace Creai un buton pentru expedierea (submit) unui formular Dreamweaver 4 workspace, MX workspace Creai un buton pentru resetarea (reset) unui formular Dreamweaver 4 workspace, MX workspace Inserai o zon simpl de text Dreamweaver 4 workspace, MX workspace Inserai o zon de text multilinie Dreamweaver 4 workspace, MX workspace Creai o caset de validare Dreamweaver 4 workspace, MX workspace Creai un buton radio Dreamweaver 4 workspace, MX workspace Creai un meniu derulant Dreamweaver MX Tem
Dreamweaver 4
workspace
Creai un formular
Cu Dreamweaver 4 workspace putei crea un formular adugnd apoi elementele (obiectele) care l compun. Pentru a crea un formular cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form; Metoda 2 Panoul Insert.
478
Inserai un formular
Iat cum procedai pentru a insera un formular n pagina dumneavoastr Web cu Dreamweaver 4 workspace.
Metoda 1
1. Executai clic pe Edit Preferences (figura 10.1).
Figura 10.1
Remarc. Se afieaz caseta de dialog Preferences (figura 10.2).
2. n caseta de dialog Preferences, n zona Category executai clic pe Invisible Elements (figura 10.2).
479
Figura 10.2 Remarc. Opiunea Form Delimiter trebuie s fie activat (figura 10.2).
3. Verificai dac elementele invizibile sunt afiate, via View Visual Aids Invisible Elements.
4. Executai clic n zona n care dorii s inserai formularul (figura 10.3).
Figura 10.3
Form (figura 10.4).
480
Figura 10.4
Remarc. Dreamweaver insereaz un dreptunghi discontinuu rou, care materializeaz limitele formularului (figura 10.5).
Figura 10.5
Figura 10.6
Remarci:
481
Selectai tag-ul <FORM>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 10, paragraful: HTML 4 Creai un formular (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.7
Metoda 2
Se modific pasul 5 (Metoda 1) dup cum urmeaz: 5. n panoul Insert, categoria Forms, executai clic pe butonul (Insert Form), figura 10.8.
Figura 10.8
Precizai metoda i script-ul utilizate

Unul din parametrii eseniali ai formularului este calea de acces la script-ul CGI utilizat. El este definit n inspectorul Properties.
482
Iat cum precizm metoda prin care datele sunt comunicate server-ului, precum i calea de acces la script-ul CGI. 1. n inspectorul Properties (figura 10.9), n zona: Form Name introducei numele formularului (formular); Action introducei calea de acces la script-ul CGI utilizat; Method alegei POST (purtai o discuie cu administratorul de reea) din meniul derulant.
Figura 10.9
Figura 10.10
Remarc. Selectai tag-ul <FORM>, deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul action. Citii Conversaia 10, paragraful HTML 4 Precizai metoda i script-ul utilizate (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.11
483
Dreamweaver MX
workspace
Creai un formular
Pentru a crea un formular cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form; Metoda 2 Grupul de panouri Insert.
Inserai un formular
Iat cum procedai pentru a insera cu Dreamweaver MX workspace un formular n pagina dumneavoastr Web.
Metoda 2
1. Executai clic n zona n care dorii s inserai formularul. 2. n grupul de panouri Insert, n subpanoul Form, executai clic pe butonul (Insert Form), figura 10.12.
Figura 10.12
Dreamweaver MX workspace insereaz un dreptunghi materializeaz limitele formularului (figura 10.13). discontinuu rou, care
Figura 10.13
484
Figura 10.14
Precizai metoda i script-ul utilizate

Pentru a expedia informaiile ce aparin formularului creat, folosii panoul Properties. Iat cum precizm metoda prin care informaiile sunt comunicate serverului. 1. n panoul Properties (figura 10.15), n zona: Form Name introducei numele formularului (formular); Action Method introducei adresa script-ului de prelucrare; alegei POST.
Figura 10.15

Remarc. Citii Conversaia 10, paragraful XHTML Precizai metoda i script-ul utilizate (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
485
Dreamweaver 4
workspace
Creai un buton pentru expedierea (submit) unui formular
Pentru a utiliza formularul trebuie s inserai dou butoane: submit, pentru expedierea formularului; reset, pentru resetarea formularului. Pentru inserarea unui buton de tip submit cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Iat cum procedm pentru a insera butonul de tip submit. Button;
Metoda 1
1. Executai clic n zona n care dorii s figureze butonul (figura 10.16).
Figura 10.16
Form Insert
Button.
Remarc. Dreamweaver 4 afieaz butonul Submit (figura 10.17).
486
Figura 10.17
Inspectorul Properties v permite parametrizarea acestui obiect, dup cum urmeaz: n zona Button Name, introducei, eventual, un nume pentru butonul de expediere a formularului (exp), figura 10.18.
Figura 10.18
n zona Label, introducei textul care va figura pe buton Expediati, figura 10.19.
Figura 10.19
n zona Action alegei Submit form, figura 10.20.

Figura 10.20
Figura 10.21
487
Remarci: Selectai tag-ul <INPUT>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributele: type, cu valoarea submit. Citii Conversaia 10, paragraful HTML 4 Creai un buton pentru expedierea (submit) unui formular (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.22
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul Insert Button.
Aplicaie Creai un buton imagine pentru expedierea unui formular. Putei nlocui butonul Submit form printr-o imagine. Iat care este procedura pe care v invitm s-o urmai. 1. Executai clic n zona dorit. 2. Executai clic pe Insert Form Insert Image Field.
sau,
2. n panoul Insert, categoria Forms executai clic pe butonul Image Field).
Remarc. Se afieaz caseta Select Image Source (figura 10.23).
(Insert
488
Figura 10.23 3. Selectai imaginea follow.jpg (figura 10.23). 4. n inspectorul Properties parametrizai imaginea ca pe o imagine clasic (figura 10.24). Figura 10.24 5. Analizai codul HTML generat (figura 10.25).
Figura 10.25
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul derulant Description pentru a vizualiza atributele: type, border, src, width, height. Citii Conversaia 10, paragraful HTML 4 Creai un buton pentru expedierea (submit) unui formular (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
489
Figura 10.26
Dreamweaver MX Creai un buton pentru expedierea

workspace
(submit) unui formular
Pentru ca informaiile din cadrul unui formular s fie transmise script-ului de prelucrare, trebuie s creai un buton submit n formularul dumneavoastr. Pentru inserarea unui buton de tip submit cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. Iat cum procedm pentru a insera n formularul dumneavoastr butonul de tip submit. Button;
Metoda 2
1. Executai clic n zona n care dorii s fie inserat butonul. 2. n grupul de panouri Insert, subpanoul Form, executai clic pe butonul (Button), figura 10.27.
Figura 10.27
490
3. n panoul Properties (figura 10.28), n zona: Button Name introducei exp; Label introducei Expediai; Action alegei Submit form.
Figura 10.28
Figura 10.29
Remarc. Citii Conversaia 10, paragraful XHTML 4 Creai un buton pentru expedierea (submit) unui formular (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.30 Aplicaie Creai un buton imagine pentru expedierea unui formular.
491
Indicaie. Folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Image Field; butonul
Metoda 2 Grupul de panouri Insert, via subpanoul Form (Image Field).
Dreamweaver 4
workspace
Creai un buton pentru resetarea (reset) unui formular
Pentru inserarea unui buton de tip reset cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Pentru a insera un buton de tip reset, respectai procedura descris n cele ce urmeaz. Button;
Metoda 1
1. Executai clic n zona n care dorii s figureze butonul. 2. Executai clic pe Insert Form Objects Button (figura 10.31).
Figura 10.31
492
Remarc. Se afieaz butonul Submit (figura 10.32).
Figura 10.32
3. Inspectorul Properties, v permite parametrizarea acestui obiect, dup cum urmeaz: n zona Button Name, introducei, eventual, un nume pentru butonul de resetare a formularului (reset), figura 10.33.
Figura 10.33
n zona Label, introducei textul care va figura pe buton tergei iar n zona Action alegei Reset form (figura 10.34).
Figura 10.34
Figura 10.35
493
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul derulant Description pentru a vizualiza atributul type cu valoarea reset. Citii Conversaia 10, paragraful HTML 4 Creai un buton pentru resetarea (reset) unui buton (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.36
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert Button), figura 10.37.
Figura 10.37
Dreamweaver MX
workspace
Creai un buton pentru resetarea (reset) unui formular
Pentru a insera un buton de tip reset cu Dreamweaver MX (workspace), folosii una din metodele prezentate mai jos:
494
Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. Iat cum procedm pentru a insera n formularul dumneavoastr butonul de tip reset. Button;
Metoda 2
1. Executai clic n zona n care dorii s fie inserat butonul. 2. n grupul de panouri Insert, subpanoul Form, executai clic pe butonul (Button).
3. n panoul Properties (figura 10.38), n zona: Button Name introducei reset; Label introducei tergei; Action alegei Reset Form.
Figura 10.38
Figura 10.39
495
Figura 10.40
Dreamweaver 4
workspace
Inserai o zon simpl de text
Putei insera o zon simpl de text n care s introducei puine caractere (nume, prenume etc.). Pentru inserarea unei zone simple de text cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Iat cum inserm n formular numele unui vizitator al site-ului dumneavoastr. Text Field;
Metoda 1
1. Executai clic n zona n care dorii s figureze zona simpl de text. 2. Executai clic pe Insert 10.41). Form Objects Text Field (figura
496
Figura 10.41
Remarc. Dreamweaver 4 workspace insereaz n formular un cmp de text (figura 10.42).
Figura 10.42
Inspectorul Properties v permite s parametrizai aceast zon (cmp) simpl de text. n mod implicit este activat butonul Single Line (figura 10.43). 3. n inspectorul Properties (figura 10.43), n zona: Text Field introducei nume; Type
Figura 10.43
alegei Single line.
497
4. Dup zona de text, introducei n continuare eticheta zonei de text: Nume (figura 10.44).
Figura 10.44
Figura 10.45
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul derulant Description pentru a vizualiza atributul type cu valoarea text. Citii Conversaia 10, paragraful HTML 4 Inserai o zon simpl de text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.46
498
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert Text Field).
Aplicaie Inserai, n continuare, n formular, cea de-a doua coordonat personal a unui vizitator: prenumele.
Definii mrimea unei zone simple de text

Iat cum definim mrimea celor dou zone de text: nume 30 caractere; prenume 20 caractere. 1. Selectai prima zon de text nume (figura 10.47).
Figura 10.47
2. n inspectorul de proprieti (figura 10.48), n zona: Char Width introducei valoarea 30; Maxchars introducei valoarea 40 (dac este nevoie!).
Figura 10.48
499
3. Selectai cea de-a doua zon de text prenume. 4. n inspectorul de proprieti (figura 10.49), n zona: Char Width introducei valoarea 20; Maxchars introducei, dac este nevoie (!) valoarea 30.
Figura 10.49
Remarci: Asigurai-v c n zona Type a fost selectat opiunea Single line. Putei tasta eventual, n zona InitVal o valoare iniial ce va apare n pagina Web (vizualizat ntr-un browser!).
Figura 10.50
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul derulant Description pentru a vizualiza atributele size i maxlength. Citii Conversaia 10, paragraful: HTML4 Definii mrimea unei zone de text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
6. Vizualizai pagina Web ntr-un browser(figura 10.51).
Figura 10.51
500
Dreamweaver MX
workspace
Inserai o zon simpl de text
Pentru inserarea unei zone simple de text cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. Iat cum procedai pentru a insera n formular cu Dreamweaver MX workspace ntr-o zon simpl de text, numele unui vizitator al site-ului dumneavoastr. Text Field;
Metoda 2
1. Executai clic n zona n care dorii s figureze zona simpl de text. 2. n grupul de panouri Insert, subpanoul Form, executai clic pe butonul (Text Field), figura 10.52.
Figura 10.52
3. n panoul Properties (figura 10.53), n zona: Text Field introducei nume; Type alegei Single Line.
Figura 10.53
4. Dup zona de text, introducei n continuare eticheta zonei de text: Nume (figura 10.54).
501
Figura 10.54
Figura 10.55
Remarc. Citii Conversaia 10, paragraful XHTML Inserai o zon simpl de text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.56
502
Aplicaie Inserai cea de-a doua coordonat a unui vizitator: prenume.
Definii mrimea unei zone simple de text

Iat cum definim cu Dreamweaver MX workspace mrimea celor dou zone de text: nume 30 caractere; prenume 20 caractere. 1. Selectai prima zon de text, nume. 2. n panoul Properties (figura 10.57), n zona: Char Width introducei valoarea 30; Max Chars introducei valoarea 40 (dac este nevoie!).
Figura 10.57
3. Selectai cea de-a doua zon de text, prenume. 4. n panoul Properties, n zona: Char Width introducei valoarea 20; Max Chars introducei valoarea 30 (dac este nevoie!).
Remarc. Asigurai-v c n zona Type a fost selectat opiunea Single Line.
Figura 10.58
503
Figura 10.59
Dreamweaver 4
workspace
Inserai o zon de text multilinie
Pentru inserarea unei zone de text multilinie cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Iat cum inserm cu Dreamweaver 4 workspace cea de-a treia coordonat personal a unui vizitator: adresa. Text Field;
Metoda 1
1. Executai clic n zona n care dorii s figureze zona de text multilinie. 2. Executai clic pe Insert Form Objects Text Field.
3. n inspectorul de proprieti (figura 10.60), n zona: Type alegei Multiline;
Text Field introducei adresa; Char Width introducei valoarea 30 (numrul de coloane);
504
Num Lines introducei valoarea 5 (numrul de linii); Wrap alegei Default (modul n care se va comporta textul n zona de date).
Figura 10.60
Remarc. Dreamweaver afieaz o zon de text multilinie (figura 10.61).
Figura 10.61
Remarci: Default Off Virtual Physical utilizeaz parametrii definii n mod implicit. liniile foarte lungi nu sunt tiate la dreapta; textul continu pe aceeai linie n zona de introducere date. liniile foarte lungi sunt tiate la dreapta; textul continu pe linia urmtoare n zona de introducere date. liniile foarte lungi sunt tiate la dreapta; textul continu pe linia urmtoare n zona de introducere date. Dar, n formular retururile de linie sunt inserate acolo unde grafic ele au fost inserate.
4. Dup zona de text multilinie introducei eticheta: Adresa (figura 10.62).
Figura 10.62
505
Figura 10.63
Remarc. Selectai tag-ul <TEXTAREA>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributele: cols i rows. Citii Conversaia 10, paragraful HTML 4 Inserai o zon de text multilinie (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.64
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert Text Fields).
506
Aplicaie Inserai n formular o zon de text pentru password (parol). Cu acest tip de cmp (password), vizitatorul nu va vedea caracterele pe care le introduce ci doar asteriscuri. Indicaie. Inserai o zon simpl de text de tip password (figura 10.65). Figura 10.65
Dreamweaver MX
workspace
Inserai o zon de text multilinie
Pentru inserarea unei zone de text multilinie cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. Iat cum procedai pentru a insera cu Dreamweaver MX workspace ntr-o zon de text multilinie cea de-a treia coordonat personal a unui vizitator adresa. Text Field;
Metoda 2
1. Executai clic n zona n care dorii s figureze zona de text multilinie. 2. n grupul de panouri Insert, subpanoul Forms, executai clic pe butonul (Text Field), figura 10.66.
Figura 10.66
3. n panoul Properties (figura 10.67), n zona:
507
Type alegei Multiline; Text Field introducei adresa; Char Width introducei valoarea 30 (numrul de coloane); Num Lines introducei valoarea 5 (numrul de linii exprimat n caractere); Wrap alegei Default.
Figura 10.67
4. Dup zona de text multilinie, introducei eticheta: Adresa (figura 10.68).
Figura 10.68
508
Figura 10.69
Remarc. Citii Conversaia 10, paragraful XHTML Inserai o zon de text multilinie (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.70
Dreamweaver 4
workspace
Creai o caset de validare
n interfaa grafic obinuit, casetele de validare sunt sinonime cu una
sau mai multe opiuni.
509
Pentru crearea unei casete de validare cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Iat cum crem ntr-un formular, patru casete de validare, cu numele a patru cursuri de programare: Java, Pascal, Basic, C++, pe care vizitatorii le pot urma la societatea LUMINA BLND. CheckBox;
Metoda 1
1. Executai clic n zona n care dorii s figureze prima caset de validare (figura 10.71).
Figura 10.71
2. Executai clic pe Insert 10.72).
Form Objects
Check Box (figura
Figura 10.72
510
Remarc. Se afieaz prima caset de validare (figura 10.73).
Figura 10.73
3. Repetai pasul 2 pentru celelalte trei casete de validare pe care urmeaz s le inserai. Dreamweaver 4 workspace afieaz celelalte trei casete de validare (figura 10.74).
Figura 10.74
Remarc. Inspectorul Properties v permite parametrizarea acestui obiect.
4. Executai clic pe prima caset de validare, figura 10.75.
Figura 10.75
511
5. n inspectorul de proprieti (figura 10.76), n zona: CheckBox introducei numele simbolic C1;
Checked Value introducei valoarea Java; Initial State

Figura 10.76
alegei opiunea Checked.
6. Executai clic pe a doua caset de validare (figura 10.77).
Figura 10.77
7. n inspectorul Properties (figura 10.78), n zona: CheckBox introducei numele simbolic C2;
Checked Value introducei valoarea Pascal; Initial State

Figura 10.78
alegei opiunea Unchecked.
8. Executai clic pe a treia caset de validare. 9. n inspectorul Properties, n zona: CheckBox introducei numele simbolic C3;
Checked Value introducei valoarea Basic; Initial State alegei opiunea Checked.
512
10. Executai clic pe a patra caset de validare. 11. n inspectorul Properties, n zona: CheckBox introducei numele simbolic C4;
Checked Value introducei valoarea C++; Initial State 12. Introducei dup alegei opiunea Unchecked. fiecare caset de validare etichetele
corespunztoare: Java, Pascal, Basic, C++ (figura 10.79).
Figura 10.79
Figura 10.80
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul derulant Description pentru a vizualiza atributele: type cu valoarea checkbox i checked. Citii Conversaia 10, paragraful HTML 4 Creai o caset de validare (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
513
Figura 10.81
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert CheckBox).
Dreamweaver MX
workspace
Creai o caset de validare
Pentru a crea o caset de validare cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. Iat cum procedm pentru a crea ntr-un formular, cu Dreamweaver MX workspace patru casete de validare, cu numele a patru cursuri de programare: Java, Pascal, Basic, C++ pe care vizitatorii site-ului dumneavoastr le pot urma la societatea LUMINA BLND. CheckBox;
Metoda 2
1. Executai clic n zona n care dorii s figureze prima caset de validare. 2. n grupul de panouri Insert, subpanoul Forms, executai clic pe butonul (CheckBok), figura 10.82.
514
Figura 10.82
Remarc. Se afieaz prima caset de validare (figura 10.83).
Figura 10.83
3. Repetai pasul 2 pentru celelalte trei casete de validare pe care urmeaz s le inserai. 4. Executai clic pe prima caset de validare (figura 10.84).
Figura 10.84
5. n panoul Properties, n zona CheckBox, introducei numele simbolic C1; n zona Checked Value, introducei valoarea Java; n zona Initial State alegei opiunea Checked (figura 10.85).
Figura 10.85
515
6. Executai clic pe a doua caset de validare. 7. n panoul Properties (figura 10.86), n zona: CheckBox Initial State introducei numele simbolic C2; alegei opiunea Unchecked.
Checked Value introducei valoarea Pascal;
Figura 10.86
8. Executai clic pe a treia caset de validare. 9. n panoul Properties, n zona: CheckBox Initial State introducei numele simbolic C3; alegei opiunea Checked.
Checked Value introducei valoarea Basic; 10. Executai clic pe a patra caset de validare. 11. n panoul Properties, n zona: CheckBox Initial State 12. Introducei dup introducei numele simbolic C4; alegei opiunea Unchecked. fiecare caset de validare etichetele
Checked Value introducei valoarea C++;
corespunztoare: Java, Pascal, Basic, C++ (figura 10.87).
Figura 10.87
516
Figura 10.88
Remarc. Citii Conversaia 10, paragraful XHTML Creai o caset de validare (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.89
Dreamweaver 4
workspace
Creai un buton radio
Adugai butoane radio n formularul dumneavoastr atunci cnd nu dorii s permitei vizitatorilor s aleag mai mult de o opiune dintre cele propuse.
517
Pentru crearea unui buton radio cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Iat cum definim ntr-un formular patru butoane radio Excelent, Foarte bine, Bine, Nesatisfctor (pentru vizitatorii care vor s acorde un calificativ site-ului pe care l-ai realizat) plus nc dou butoane radio pentru sex (masculin, feminin). Radio Button;
Metoda 1
1. Executai clic n zona n care dorii s figureze butonul radio, figura 10.90.
Figura 10.90
Form Objects
Radio Button (figura
518
Figura 10.91
Remarc. Se afieaz primul buton radio (figura 10.92).
Figura 10.92
3. Repetai pasul 2 pentru a insera celelalte trei butoane radio.

Remarc. Dreamweaver afieaz cele trei butoane radio pe care le-ai inserat (figura 10.93).
Figura 10.93
Remarc. Inspectorul Properties v permite parametrizarea acestui buton.
4. Executai clic pe primul buton radio (inserat).
519
5. n inspectorul Properties (figura 10.94), n zona: RadioButton introducei numele simbolic radio;
Checked Value introducei valoarea Excelent; Initial State

Figura 10.94
6. Executai clic pe cel de-al doilea buton radio (inserat). 7. n inspectorul Properties, n zona: RadioButton introducei numele simbolic radio;
Checked Value introducei valoarea Foarte bine; Initial State alegei opiunea Unchecked.
8. Executai clic pe cel de-al treilea buton radio. 9. n inspectorul Properties, n zona: RadioButton introducei acelai nume simbolic radio;
Checked Value introducei valoarea Bine; Initial State alegei opiunea Unchecked.
10. Executai clic pe cel de-al patrulea buton radio. 11. n inspectorul Properties, n zona: RadioButton introducei acelai nume simbolic radio;
Checked Value introducei valoarea Nesatisfctor; Initial State alegei opiunea Unchecked.
12. Introducei dup fiecare buton radio (inserat) etichetele corespunztoare: Excelent, Foarte Bine, Bine, Nesatisfctor (figura 10.95).
520
Figura 10.95
13. Inserai nc dou butoane radio (pentru sex!), figura 10.96.
Figura 10.96
14. Executai clic pe primul buton radio inserat (pentru sex!), figura 10.97.
Figura 10.97
15. n inspectorul Properties (figura 10.98), n zona: RadioButton introducei numele simbolic, sex;
Checked Value introducei valoarea masculin; Initial State

Figura 10.98
521
16. Executai clic pe cel de-al doilea buton radio inserat (pentru sex!). 17. n inspectorul Properties, n zona: RadioButton Initial State 18. Introducei introducei numele simbolic, sex; alegei opiunea Unchecked. cele dou butoane radio eticheta
Checked Value introducei valoarea feminin; dup
corespunztoare: Sex, figura 10.99.
Figura 10.99
Figura 10.100
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul derulant Description pentru a vizualiza atributul type cu valoarea radio. Citii Conversaia 10, paragraful HTML 4 Creai un buton radio (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
522
Figura 10.101
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert RadioButton).
Dreamweaver MX
workspace
Creai un buton radio
Pentru crearea unui buton radio cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. Iat cum procedm pentru a crea ntr-un formular, cu Dreamweaver MX workspace patru butoane radio: Excelent, Foarte bine, Bine, Nesatisfctor (pentru vizitatorii care vor s acorde un calificativ site-ului pe care l-ai realizat) plus nc dou butoane radio pentru sex (masculin, feminin). RadioButton;
523
Metoda 2
1. Executai clic n zona n care dorii s figureze butonul radio. 2. n grupul de panouri Insert, subpanoul Forms, executai clic pe butonul
Figura 10.102
(RadioButton), figura 10.102.
Se afieaz primul buton radio (figura 10.103).
Figura 10.103
3. Repetai pasul 2 pentru a insera celelalte trei butoane (figura 10.104).
Figura 10.104
524
4. Executai clic pe primul buton radio. 5. n panoul Properties, n zona: RadioButton introducei numele simbolic, radio;
Checked Value introducei valoarea Excelent; Initial State alegei opiunea Unchecked.
6. Executai clic pe cel de-al doilea buton radio. 7. n panoul Properties, n zona: RadioButton introducei numele simbolic radio;
Checked Value introducei valoarea Foarte bine; Initial State alegei opiunea Unchecked.
8. Executai clic pe cel de-al treilea buton radio. 9. n panoul Properties, n zona: RadioButton introducei numele simbolic radio;
Checked Value introducei valoarea Bine; Initial State alegei opiunea Unchecked.
10. Executai clic pe cel de-al patrulea buton radio. 11. n panoul Properties, n zona: RadioButton introducei numele simbolic radio;
Checked Value introducei valoarea Nesatisfctor; Initial State 12. Introducei dup alegei opiunea Unchecked. fiecare buton radio inserat etichetele
corespunztoare: Excelent, Foarte bine, Bine, Nesatisfctor (figura 10.105).
525
Figura 10.105
13. Inserai nc dou butoane radio (pentru sex!). 14. Executai clic pe primul buton radio inserat. 15. n panoul Properties, n zona: RadioButton Initial State introducei numele simbolic sex; alegei opiunea Unchecked.
Checked Value introducei valoarea masculin; 16. Executai clic pe cel de-al doilea buton radio inserat. 17. n panoul Properties, n zona: RadioButton Initial State 18. Introducei introducei numele simbolic sex; alegei opiunea Unchecked. cele dou butoane radio eticheta
Checked Value introducei valoarea feminin; dup
corespunztoare: sex (figura 10.106).
Figura 10.106
526
Figura 10.107 Remarc. Citii Conversaia 10, paragraful XHTML Creai un buton radio (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.108
Dreamweaver 4
workspace
Creai un meniu derulant
Un meniu derulant permite vizitatorului s aleag o singur opiune dintr-o list lung de opiuni.
527
Pentru crearea unui meniu derulant cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Panoul Insert. Iat cum crem un meniu derulant ce conine o list (simplificat) a profesiilor: economist, inginer, profesor universitar, profesor liceu, profesor coal general, avocat, contabil. List/Menu;
Metoda 1
1. Executai clic n zona n care dorii s figureze meniul (figura 10.109).
Figura 10.109
Form Objects
List/Menu (figura
Figura 10.110
528
Remarc. Dreamweaver 4 insereaz un meniu n formular (figura 10.111).
Figura 10.111
Remarc. Inspectorul Properties v permite s parametrizai acest obiect (figura 10.112).
3. n inspectorul Properties (figura 10.112), n zona: List/Menu introducei numele meniului derulant, profesie; Type
Figura 10.112
alegei Menu.
4. n inspectorul Properties, executai clic pe List Values pentru a introduce elementele listei.
Remarc. Se afieaz caseta de dialog List Values (figura 10.113).
Figura 10.113
5. Pentru fiecare element al meniului introducei o etichet (Item Label) i o valoare (figura 10.114).
529
Figura 10.114
Remarci: Item Label corespunde opiunii din meniul derulant. Pentru a trece rapid de la o zon la alta, utilizai tasta Tab (Tab ). Pentru a aduga sau terge un element, utilizai butoanele + - (figura 10.114).
6. Executai clic pe butonul OK. 7. n inspectorul Properties, n zona Initially Selected, alegei elementul care va fi selecionat n mod implicit (n momentul ncrcrii formularului, naintea interveniei utilizatorului) executnd clic pe acesta profesor universitar, figura 10.115.
Figura 10.115
8. Introducei o etichet care descrie meniul: Care este profesia dumneavoastr? (figura 10.116).
Figura 10.116
530
Figura 10.117
Remarci: Selectai tag-urile <SELECT> i <OPTION>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 10, paragraful: HTML 4 Creai un meniu derulant (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.118
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert List/Meniu).
Aplicaii Creai o list derulant (Transport) cu urmtoarele opiuni: Autobuz, Taxi, Tramvai, Metrou, Microbuz.
531
Iat care este procedura pe care v invitm s-o urmai pentru a crea lista derulant Transport. 1. Executai clic n zona n care dorii s figureze lista. 2. Inserai lista derulant (obiectul formularului) urmnd aceeai procedur (Metoda 1/Metoda 2).
Remarc. Inspectorul Properties v permite s parametrizai acest obiect.
3. n inspectorul Properties, n zona Type alegei List, figura 10.119. Figura 10.119 4. n zona Height indicai numrul de elemente (3) ale listei care vor fi vizibile, celelalte (2) nu vor fi vizibile dect utiliznd bara de defilare a acestei liste (trei elemente vor fi vizibile dintr-un total de 5), figura 10.120. Figura 10.120 5. n zona Selections activai opiunea Allow multiple dac dorii s oferii vizitatorului posibilitatea s selecteze mai multe elemente ale listei, figura 10.121. Figura 10.121 6. n inspectorul de proprieti, executai clic pe List Values....
Remarc. Se afieaz caseta de dialog List Values... (figura 10.122).
Figura 10.122
532
7. Pentru fiecare element al listei introducei o etichet (Item Label) i o valoare (figura 10.123).
Figura 10.123 8. Executai clic pe butonul OK. 9. n zona Initialy Selected alegei elementul (executnd clic pe acesta) care va fi selecionat n mod implicit, n momentul ncrcrii formularului, naintea interveniei utilizatorului. Utilizai tasta SHIFT/ CTRL pentru a face o preselecie multipl, figura 10.124.
Figura 10.124 10. Introducei eticheta care descrie lista derulant: Transport, figura 10.125.
533
Figura 10.127
Creai un cmp de fiier File Field. Iat care este procedura pe care v invitm s-o urmai pentru a crea o caset de dialog pentru expedierea unui fiier.
Metoda 1
1. Executai clic n zona n care dorii s figureze caseta de dialog de deschidere a unui fiier. 2. Executai clic pe Insert Form Objects File Field (figura 10.128).
534
Figura 10.128
Remarc. Dreamweaver 4 afieaz un cmp de text i un buton Browse n formular (figura 10.129).
Figura 10.129
Remarc. Inspectorul Properties v permite s parametrizai acest obiect.
3. n inspectorul Properties (figura 10.130), n zona: File Field Name introducei numele simbolic, fiier; Char Width introducei valoarea 40 (lungimea cmpului de text n care se va introduce calea de acces ctre fiier); Max Chars introducei numrul maxim de caractere.
535
Figura 10.130 4. Introducei eticheta care descrie cmpul inserat: Trimitei fiierul dumneavoastr: (figura 10.131).
Figura 10.133
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz:
536
2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert File Field), figura 10.134.
Figura 10.134
Inserai un cmp ascuns (mascat). Un cmp ascuns, dup cum spune i numele nu este vizibil n fereastra browser-ului atunci cnd vizitatorii consult site-ul dumneavoastr. Cmpurile ascunse pot fi utile pentru site-urile marilor magazine (pentru a cunoate n orice moment totalul vnzrilor), sau pentru construirea n mod automat a unei adrese e-mail prin concatenarea prenumelui i numelui persoanei care utilizeaz formularul. Iat care este procedura pe care trebuie s-o urmai pentru a crea un cmp ascuns ntr-un formular.
Metoda 1
1. Executai clic n zona n care dorii s figureze cmpul ascuns (mascat). 2. Executai clic pe Insert 10.135). Form Objects Hidden Field (figura
537
Figura 10.135
Remarc. Cmpul ascuns se afieaz n fereastra document sub forma unui icon (figura 10.136).
Figura 10.136
Remarc. Inspectorul Properties v permite parametrizarea acestui obiect.
3. n inspectorul Properties (figura 10.137), n zona: Hidden Field introducei cmpinvizibil, numele cmpului ascuns din formular; Value introducei o valoare corespunztoare cmpului ascuns. Figura 10.137
538
Remarci: De foarte multe ori cmpurile ascunse conin informaii de configurare pentru script. Cmpul ascuns nu apare n pagin dect sub forma unui element invizibil ). n momentul n care l selectai, n inspectorul Properties se afieaz ( toi parametrii acestuia.
Figura 10.139
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Forms, executai clic pe butonul (Insert Hidden Field), figura 10.140.
Figura 10.140
539
Creai un script simplu care permite generarea unui adrese e-mail prin concatenarea prenumelui i numelui introduse n formular de ctre utilizator. Iat care este procedura pe care trebuie s-o urmai pentru a crea script-ul de concatenare. 1. Definii variabilele script-ului: nume, prenume, e-mail. 2. n zona <head> ... </head> descriei script-ul (figura 10.141).
Figura 10.141
Remarci: Script-ul nu detecteaz dac cele dou cmpuri nume i prenume sunt efectiv introduse. n cmpul prenume, adugai codul <input type=text nume=prenume onBlur=creatmail()>. Cnd utilizatorul prsete acest cmp el declaneaz funcia creatmail() i concatenarea se realizeaz.
Dreamweaver MX
workspace
Creai un meniu derulant
Pentru a crea un meniu derulant cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Form Objects Metoda 2 Grupul de panouri Insert. List/Meniu;
540
Iat cum crem cu Dreamweaver MX workspace un meniu derulant ce conine o list (simplificat) a profesiilor: economist, inginer, profesor universitar, profesor liceu, profesor coal general, avocat, contabil.
Metoda 2
1. Executai clic n zona n care dorii s figureze meniul. 2. n grupul de panouri Insert, subpanoul Forms, executai clic pe butonul
Figura 10.142
(List/Meniu), figura 10.142.
Remarc. Dreamweaver MX workspace insereaz un meniu n formular (figura 10.143).
Figura 10.143
3. Executai clic pe butonul List/Meniu inserat. 4. n panoul Properties, n zona (figura 10.144): List/Meniu introducei profesie; Type alegei Menu.
Figura 10.144
5. n panoul Properties, executai clic pe List Values pentru a introduce elementele listei.
541
6. n caseta de dialog List Values care se afieaz, n zona Item Label, introducei elementul listei iar n zona Value, valoarea (figura 10.145).
Figura 10.145
7. Executai clic pe butonul OK. 8. n panoul Properties, n zona Initially Selected, alegei profesor universitar elementul care va fi selecionat n mod implicit. 9. Introducei eticheta care descrie meniul: Care este profesia dumneavoastr?. 10. Analizai codul XHTML generat (figura 10.146).
Figura 10.146
Remarc. Citii Conversaia 10, paragraful XHTML Creai un meniu derulant (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
542
Figura 10.147
543
Dreamweaver MX
Testai-v cunotinele
Tem
1. Descriei pe scurt una din metodele de creare a unui formular cu Dreamweaver MX. 2. Precizai care este codul surs XHTML pentru crearea unui buton de tip submit. 3. Descriei pe scurt metoda (Grupul de panouri Insert) Dreamweaver MX workspace de inserare a unei zone de text multilinie. 4. Cum creai un buton radio sau o caset de validare cu Dreamweaver 4 workspace? Descriei pe scurt una din metodele folosite. 5. Creai cu Dreamweaver 4 workspace un meniu derulant care conine o list (simplificat) a profesiilor: economist, inginer, profesor universitar, profesor liceu, profesor coala general, avocat, contabil.
Vizitai site-urile
www.fabric8.com www.pcwebopedia.com/TERM/C/CGI.html
Conversaia 11
Inserai obiecte cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Inserai animaii Flash i Shockwave Dreamweaver 4 workspace, MX workspace Inserai un text n format Flash Dreamweaver 4 workspace, MX workspace Creai un buton de navigare Flash Dreamweaver 4 workspace, MX workspace Inserai un obiect Fireworks i data zilei Dreamweaver 4 workspace, MX workspace Inserai un applet Java Dreamweaver 4 workspace, MX workspace Inserai obiecte care necesit un plugin Dreamweaver MX - Tem
Dreamweaver 4
workspace
Inserai animaii Flash i Shockwave
Macromedia Flash i Director reprezint, fr ndoial, standarde de referin pentru animaii Web. Macromedia Flash permite crearea de animaii vectoriale interactive.
544
Inserai o animaie Flash
Pentru a insera o animaie Flash cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Flash;
Metoda 2 Panoul Insert, categoria Media. Iat cum procedai pentru a insera n pagina dumneavoastr Web o animaie Flash, exemplu.swf.
Metoda 1
1. Executai clic n locul n care dorii s inserai animaia Flash. 2. Executai clic pe Insert Media Flash.
Remarc. Se afieaz caseta de dialog Select File.
3. n caseta de dialog Select File, executai urmtoarele aciuni: selectai fiierul exemplu.swf; executai clic pe butonul OK. 4. n inspectorul Properties, n zonele: Flash, W i H, File, Align, Bg, Reset Size, Play, V Space, H Space, Quality, Scale, Parameters, parametrizai animaia Flash ca n figura 11.1.
Figura 11.1
545
Figura 11.2
Remarc. Selectai tag-urile <OBJECT> (implementat n Internet Explorer) i <EMBED> (implementat n Netscape), deschidei panoul Reference i citii informaiile care se afieaz.
Figura 11.3
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Media, executai clic pe butonul (Flash), figura 11.4.
546
Figura 11.4
Inserai o animaie Shockwave

Pentru a insera o animaie Shockwave cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Metoda 2 Panoul Insert. Shockwave;
Metoda 1
1. Executai clic n locul n care dorii s inserai animaia Shockwave. 2. Executai clic pe Insert Media Shockwave.
3. n caseta de dialog Select File, executai urmtoarele aciuni: selectai fiierul lumina.dir; executai clic pe butonul OK. 4. n inspectorul Properties, n zonele: W i H; File; Align; Bg; Play; Parameters; V Space i H Space, parametrizai animaia Shockwave n aceeai manier cu parametrizarea animaiei Flash (figura 11.5).
547
Figura 11.5
Figura 11.6
Figura 11.7
548
Dreamweaver MX
workspace
Inserai animaii Flash i Shockwave
Inserai o animaie Flash

Pentru a insera n pagina dumneavoastr Web o animaie Flash cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Flash;
Metoda 2 Grupul de panouri Insert, via subpanoul Media. Iat cum inserm o animaie Flash, exemplu.swf, n pagina
dumneavoastr Web.
Metoda 2
1. Executai clic n locul n care dorii s inserai animaia Flash. 2. n grupul de panouri Insert, n subpanoul Media, executai clic pe butonul (Flash), figura 11.8.
Figura 11.8
549
3. n caseta de dialog Select File, executai urmtoarele aciuni: selectai fiierul exemplu.swf; executai clic pe butonul OK. 4. n panoul Properties, n zonele: Flash, W i H, File, Align, Bg, Reset Size, Play, V Space, H Space, Quality, Scale, Parameters, parametrizai animaia Flash pe care ai inserat-o (vezi Dreamweaver 4 workspace). 5. Analizai codul XHTML generat (figura 11.9).
Figura 11.9
Figura 11.10
550
Inserai o animaie Shockwave
Pentru a insera n pagina dumneavoastr Web o animaie Shockwave cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Shockwave;
Metoda 2 Grupul de panouri Insert, via Media, butonul (Shockwave).

Aplicaie Inserai n pagina dumneavoastr Web animaia Shockwave: lumina.dir.
Remarci: Citii paragraful: Dreamweaver 4 workspace Inserai o animaie Shockwave. Pentru a parametriza aceast animaie, utilizai panoul Properties n aceeai manier ca la animaia Flash.
Dreamweaver 4
workspace
Inserai un text n format Flash
Cu Dreamweaver putei insera direct un text n format Flash (.swf). Desigur, nu putei crea animaii la fel de puternice ca n Flash, dar putei defini animaii i butoane Flash rezonabile, rmnnd tot timpul n universul Dreamweaver! i nc ceva! Dreamweaver pune la dispoziia dumneavoastr o puternic bibliotec de obiecte Flash, ceea ce nu este deloc puin! Pentru a insera n pagina dumneavoastr Web un text n format Flash, cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Interactive Images Metoda 2 Meniul Insert, via Media. Flash Text;
551
Iat cum procedai pentru a insera textul LUMINA BLANDA 2003 n format Flash. Definii efectul de rollover.
Metoda 1
1. Salvai documentul (Dreamweaver) sub numele lumina.htm.
Remarc. Documentul trebuie s fie salvat nainte de a insera un obiect text n format Flash.
Interactive Images
Flash Text.
Remarc. Se afieaz caseta de dialog Insert Flash Text.
3. n caseta de dialog Insert Flash Text executai urmtoarele aciuni (figura 11.11):
n zona Font n zona Size selectai Arial Black, n meniul derulant; introducei valoarea 30; activai butonul selectai butonul n zona Color (Bold); (Center);
introducei valoarea green (#00FF00) pentru a defini culoarea inactiv a textului atunci cnd nu trecei cu mouse-ul peste text;
n zona Rollover Color
introducei valoarea blue (#0000FF) pentru a defini culoarea pe care o capt textul Flash atunci cnd trecei cu mouse-ul peste textul inserat;
n zona Text
introducei textul LUMINA BLANDA 2003; activai opiunea Show Font pentru a vizualiza textul pe care l-ai introdus;
n zona Link
introducei numele paginii (http://www.upg-ploieti.ro) pe care
552
dorii s-o apelai; n zona Target n zona BgColor n zona Save As selectai cadrul n care dorii s se afieze pagina (dac este cazul!); introducei valoarea #FFFFFF; introducei numele fiierului (cu extensia .swf), text.swf; executai clic pe butonul OK.
Figura 11.11
Figura 11.12
553
Figura 11.13
6. Verificai efectul Rollover i link-ul creat.
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Media, executai clic pe butonul (Flash Text), figura 11.14.
Figura 11.14
Dreamweaver MX
workspace
Inserai un text n format Flash
Pentru a insera n pagina dumneavoastr Web un text n format Flash, cu Dreamweaver MX workspace n format .swf, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Interactive Images Metoda 2 Grupul de panouri Insert, via media (Flash Text). Flash Text; butonul
554
Iat cum procedai pentru a insera n pagina dumneavoastr Web textul n format Flash: LUMINA BLANDA 2003. Utilizai efectul de rollover.
Metoda 2
1. Salvai documentul, n folder-ul Site, sub numele lumina.htm. 2. n grupul de panouri Insert, n subpanoul Media, executai clic pe butonul (Flash Text), figura 11.15.
Figura 11.15 Remarc. Se afieaz caseta de dialog Insert Flash Text.
3. n caseta de dialog Insert Flash Text executai aceleai aciuni pe care le-ai realizat cu Dreamweaver 4 workspace. 4. Analizai codul XHTML generat (figura 11.16).
Figura 11.16
555
Figura 11.17
6. Verificai efectul Rollover i link-ul creat.
Dreamweaver 4
workspace
Creai un buton de navigare Flash
Pentru a crea un buton de navigare Flash (format .swf) cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Interactive Images Button; Metoda 2 Panoul Insert, via Media. Creai butonul de navigare Flash: F.E.S.E (Free European School Economics din cadrul Universitii Petrol Gaze din Ploieti). Flash
Metoda 1
1. Salvai documentul (Dreamweaver) sub numele buton.htm. 2. Executai clic pe Insert Interactive Images Flash Button.
Remarc. Se afieaz caseta de dialog Insert Flash Button.
3. n caseta de dialog Insert Flash Button (figura 11.18), executai urmtoarele aciuni: n zona Style selectai tipul de buton pe care l preferai (Blue Warper) (atenie la zona Sample!);
556
n zona Button Text introducei textul care se va inscripiona pe buton (F.E.S.E.); n zona Size n zona Font n zona Link n zona BgColor introducei valoarea 12; introducei Verdana; introducei www.upg-ploiesti.ro; introducei #FFFFFF; executai clic pe butonul OK.
Figura 11.18
Remarc. Executai clic pe butonul Apply pentru a aplica efectul butonului n documentul dumneavoastr.
557
Figura 11.19
Figura 11.20
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz: 2. n panoul Insert, categoria Media, executai clic pe butonul (Flash Button), figura 11.21.
Figura 11.21
558
Dreamweaver MX
workspace
Creai un buton de navigare Flash
Pentru a crea un buton de navigare Flash (format.swf) cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Interactive Images Button; Metoda 2 Grupul de panouri Insert, via Media. Iat cum procedai pentru a crea butonul de navigare Flash: F.E.S.E. (Free European School Economics din cadrul Universitii Petrol Gaze din Ploieti). Flash
Metoda 2
1. Salvai documentul sub numele buton.html. 2. n grupul de panouri Insert, n subpanoul Media, executai clic pe butonul (Flash Button), figura 11.22.
Figura 11.22
Remarc. Se afieaz caseta de dialog Insert Flash Button.
3. n caseta de dialog Insert Flash Button (figura 11.23) executai aceleai aciuni pe care le-ai realizat cu Dreamweaver 4 workspace.
559
Figura 11.23
Figura 11.24
560
Figura 11.25
Dreamweaver 4
workspace
Inserai un obiect Fireworks i data zilei
Macromedia Fireworks permite inserarea i crearea n mod rapid i eficient a obiectelor vizuale (butoane, rollover-e etc.) pentru Web genernd cod HTML i Java Script.
Inserai un obiect Fireworks

Pentru a insera n pagina Web un obiect Fireworks, cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Interactive Images Metoda 2 Panoul Insert. Fireworks;
Metoda 1
Iat cum inserai n pagina dumneavoastr Web un obiect Fireworks, little.htm. 1. Executai clic n zona n care dorii s inserai obiectul Fireworks. 2. Executai clic pe Insert HTML. Interactive Images Fireworks
561
Remarc. Se afieaz caseta de dialog Insert Fireworks HTML.
3. n caseta de dialog Insert Fireworks HTML (figura 11.26), executai urmtoarele aciuni: n zona Fireworks HTML File introducei numele fiierului (eventual folosii butonul Browse); n zona Options activai opiunea Delete file after insertion (pentru a suprima fiierul generat cu Fireworks, dup inserarea acestuia); executai clic pe butonul OK.
Figura 11.26
Figura 11.27
562
Figura 11.28
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz: 2. n panoul Insert, categoria Common, executai clic pe butonul (Fireworks HTML), figura 11.29.
Figura 11.29
Inserai data zilei

Pentru a insera data curent cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Date; Metoda 2 Panoul Insert. Iat care este procedura de inserare a datei curente.
Metoda 1
1. Executai clic n zona n care dorii s fie inserat data curent.
563
2. Executai clic pe Insert Date.
Remarc. Se afieaz caseta de dialog Insert Date.
3. n caseta de dialog Insert Date, executai urmtoarele aciuni (figura 11.30): n fiecare meniu derulant alegei formatul dorit pentru zi, dat i or; activai caseta de validare Update Automatically on Save, dac dorii s actualizai data de fiecare dat cnd salvai documentul; executai clic pe butonul OK.
Figura 11.30
Figura 11.31
564
Figura 11.32
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz: 2. n panoul Insert, categoria Common, executai clic pe butonul (Date), figura 11.33.
Figura 11.33
Dreamweaver MX
workspace
Inserai un obiect Fireworks i data zilei
Inserai un obiect Fireworks

Pentru a insera n pagina Web un obiect Fireworks cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Interactive Images HTML; Metoda 2 Grupul de Panouri Insert, via subpanoul Common butonul (Fireworks HTML). Fireworks
565
Metoda 2
1. Executai clic n zona n care dorii s inserai obiectul Fireworks. 2. n grupul de panouri Insert, n subpanoul Common executai clic pe butonul (figura 11.34).
Figura 11.34
3. n caseta de dialog Insert Fireworks HTML, care se afieaz executai urmtoarele aciuni: n zona Fireworks HTML File introducei numele fiierului (sau folosii butonul Browse); n zona Options activai opiunea Delete for after insertion; executai clic pe butonul OK. 4. Analizai codul XHTML generat (figura 11.35).
Figura 11.35
566
Figura 11.36
Inserai data zilei

Pentru a insera n pagina Web data curent cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Date; Metoda 2 Grupul de panouri Insert. Iat cum procedai pentru a insera data curent.
Metoda 2
1. Executai clic n zona n care dorii s inserai data curent. 2. n grupul de panouri Insert, n subpanoul Common, executai clic pe butonul (Date).
3. n caseta de dialog Insert Date care se afieaz, completai informaiile din zonele: Day Format, Date Format, Time Format. 4. n caseta de dialog Insert Date, activai opiunea Update Automatically on Save, dup care executai clic pe butonul OK. 5. Analizai codul XHTML generat (figura 11.37).
567
Figura 11.37
Figura 11.38
Dreamweaver 4
workspace
Inserai un applet Java
Limbajul Java definit de Sun, permite crearea de aplicaii (applet, n limba englez; appliquettes, n limba francez) care pot fi inserate ntr-o pagin Web. Applet-ul Java este interpretat de Maina Virtual Java instalat pe aproape toate platformele microinformatice. Pentru a insera n pagina Web un applet Java cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Metoda 2 Panoul Insert. Applet;
568
Iat cum inserm n pagina Web, un applet Java care afieaz numrul de apsri ale unui buton.
Metoda 1
1. Executai clic n locul n care dorii s fie inserat applet-ul Java. 2. Executai clic pe Insert Media Applet.
3. n caseta de dialog Select File, executai urmtoarele aciuni (figura 11.39): selectai fiierul Test.class; executai clic pe butonul OK.
Figura 11.39
4. n inspectorul de proprieti (figura 11.40), n zona: Applet Name introducei numele applet-ului;
569
W i H Code Base Align introducei valorile 130 respectiv 50 pixeli; introducei numele fiierului surs; introducei fiierul care conine applet-ul; utilizai meniul derulant pentru a alinia applet-ul; Alt indicai o imagine ca alternativ atunci cnd browser-ul nu recunoate applet-ul Java; VSpace, HSpace definii spaiul (n pixeli) din jurul applet-ului.
Figura 11.40
Figura 11.41
Remarci: Selectai tag-ul <APPLET>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul Code. Citii Conversaia 11, paragraful HTML 4 Inserai un applet Java (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
570
Figura 11.42
7. Executai clic pe applet pentru a deschide mini-programul din spatele butonului.
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz: 2. n panoul Insert, categoria Media, executai clic pe butonul (Applet).
Figura 11.43
Dreamweaver MX
workspace
Inserai un applet Java
Pentru a insera (n pagina Web) un applet Java cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Applet;
Metoda 2 Grupul de panouri Insert, via subpanoul Media.
571
Iat cum inserm n pagina Web un applet Test.class, care afieaz numrul de apsri ale unui buton.
Metoda 2
1. Executai clic n locul n care dorii s fie inserat applet-ul Java. 2. n grupul de panouri Insert, n subpanoul Media, executai clic pe butonul (Applet), figura 11.44.
Figura 11.44
3. n caseta de dialog Select File executai urmtoarele aciuni: selectai fiierul Test.class; executai clic pe butonul OK. 4. n panoul Properties, n zonele: Applet, W i H, Code, Base, Align, Sec, VSpace i HSpace, parametrizai applet-ul pe care l-ai inserat (vezi Dreamweaver 4 workspace). 5. Analizai codul XHTML generat (figura 11.45).
Figura 11.45
572
Figura 11.46
Remarc. Executai clic pe applet.
Dreamweaver 4
workspace
Inserai obiecte care necesit un plugin
n afar de text i imagini, putei de asemenea insera n paginile dumneavoastr Web fiiere multimedia (sunet, video, animaie ). Nu uitai ns c browser-ul nu tie s interpreteze dect HTML i script-ul clientului, n rest totul i este necunoscut. Rezult c, pentru a exploata un obiect multimedia, utilizatorul trebuie s aib instalate pe calculatorul su programe speciale cunoscute sub numele de plugin.
Remarc. Dreamweaver 4 workspace conine obiecte multimedia(vezi panoul Insert) pe care le putei insera n paginile dumneavoastr Web. Nu uitai de site-ul Macromedia care dispune de obiecte multimedia suplimentare pe care le putei descrca i instala!
Inserai un fiier sunet

Pentru a insera un fiier sunet cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Plugin;
Metoda 2 Panoul Insert, categoria Media. Iat cum procedai pentru a insera n pagina dumneavoastr Web, un fiier sunet, tada.wav (calea C:\Windows\Media).
573
Metoda 1
1. Executai clic n zona n care dorii s fie inserat fiierul sunet. 2. Executai clic pe Insert Media Plugin (fiierul 11.47).
Figura 11.47 Remarc. Se afieaz caseta de dialog Select File.
3. n caseta de dialog Select File, executai urmtoarele aciuni (figura 11.48): selectai fiierul audio, tada.wav; executai clic pe butonul OK.
Figura 11.48
574
Remarc. Gsii i alte fiiere de sunet cu care s exersai! Succes!
4. n inspectorul Properties (figura 11.49), parametrizai fiierul, dup cum urmeaz: n zona Plugin n zonele W i H n zona Src n zona PlgURL introducei sunet; introducei valoarea 150; introducei calea de acces; indicai site-ul Web din care utilizatorii pot descrca plugin-ul; n zonele Align i VSpace, HSpace i Border formatai (dup caz!) obiectul plugin;
n zona Parameters introducei parametrii LOOP i PLAYCOUNT cu valoarea 5.
Figura 11.49
Remarci: Oferii vizitatorilor site-ului dumneavoastr controlul privind redarea sau nu a unui sunet. O pagin Web care conine un sunet ce nu poate fi oprit poate irita unele persoane! La ora actual exist numeroase tipuri de formate audio (Real Audio, Quick Time, Mp3 etc. ).
Figura 11.50
575
Remarci: Selectai tag-ul <EMBED>, deschidei panoul Reference i citii informaiile care se afieaz. Citii Conversaia 11, paragraful: HTML 4 Inserai un fiier sunet pentru Internet Explorer (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
6. Vizualizai pagina Web n Internet Explorer (figura 11.51). Ascultai sunetul muzicii!
Figura 11.51
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz: 2. n panoul Insert, categoria Media, executai clic pe butonul (Plugin), figura 11.52.
Figura 11.52
Inserai un fiier video

Pentru a insera un fiier video n pagina dumneavoastr Web cu
576
Dreamweaver 4 workspace, folosii una din metodele cu care ai inserat un fiier sunet. Iat cum procedai pentru a insera n pagina dumneavoastr Web, un fiier video, MrBean.avi.
Metoda 2
1. Executai clic n zona n care dorii s inserai fiierul video. 2. n panoul Insert, categoria Media executai clic pe butonul (Plugin), figura 11.53.
Figura 11.53 Remarc. Se afieaz caseta de dialog Select File.
3. n caseta de dialog Select File, executai urmtoarele aciuni: selectai fiierul video MrBean.avi; executai clic pe butonul OK. 4. n inspectorul Properties, parametrizai fiierul, ca n figura 11.54.
Figura 11.54
577
Figura 11.55
Remarc. Citii Conversaia 11, paragraful HTML 4 Inserai un fiier video (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
6. Vizualizai pagina Web ntr-un browser (figura 11.56). Cum v place?
Figura 11.56
Dreamweaver MX
workspace
Inserai obiecte care necesit un plugin
Inserai un fiier sunet

Pentru a insera un fiier sunet n pagina Web cu Dreamweaver MX,
578
folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Plugin;
Metoda 2 Grupul de panouri Insert, via subpanoul Media. Iat cum procedm pentru a insera n pagina Web un fiier sunet, tada.wav (acelai pe care l-ai inserat cu Dreamweaver 4 workspace) din folder-ul C:\Windows\Media.
Metoda 2
1. Executai clic n zona n care dorii s fie inserat fiierul sunet. 2. n grupul de panouri Insert, n subpanoul Media, executai clic pe butonul (Plugin).
Figura 11.57
3. n caseta de dialog Select File, selectai fiierul audio tada.wav,
dup care executai clic pe butonul OK. 4. n panoul Properties, parametrizai fiierul ca n figura 11.58.
Figura 11.58
579
Figura 11.59
6. Vizualizai pagina Web n Internet Explorer. Ascultai sunetul muzicii!
Figura 11.60
Inserai un fiier video

Pentru a insera n pagina Web un fiier video cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Media Plugin;
Metoda 2 Grupul de panouri Insert, via subpanoul Media.
Metoda 2
1. Executai clic n zona n care dorii s fie inserat fiierul video. 2. n grupul de panouri Insert, n subpanoul Media, executai clic
580
pe butonul (Plugin).
3. n caseta de dialog Select File selectai fiierul video MrBean.avi, dup care executai clic pe butonul OK. 4. n inspectorul Properties (vei regsi aceleai atribute ca i n cazul sunetelor!) completai zonele afiate (figura 11.61) dup modelul sunetelor.
Figura 11.61
Figura 11.62
581
6. n panoul Properties, executai clic pe butonul pentru a testa coninutul multimedia. 7. Vizualizai pagina Web ntr-un browser (figura 11.63). Cum v place?
Figura 11.63
Aplicaii Creai o legtur hipertext ctre fiierul sunet (audio) extern: tada.wav. Textul legturii este Ascultai sunetul muzicii! Iat care este procedura pe care v invitm s-o aplicai. 1. Selectai textul legturii. 2. n panoul Properties (figura 11.64), n zona: Link introducei calea de acces ctre fiierul sunet extern;
Target alegei n meniul derulant opiunea _blank.
582
Figura 11.64 3. Analizai codul XHTML generat (figura 11.65).
Figura 11.65 4. Vizualizai pagina Web ntr-un browser (figura 11.66). Ascultai sunetul muzicii! Cum v place?
Figura 11.66
Remarc. Executai clic pe textul legturii.
Creai o legtur hipertext ctre fiierul video extern: MrBean.avi. Textul legturii este: Vizionai secvena video.
583
Dreamweaver MX
Testai-v cunotinele
Tem
1. Cum inserai animaii Flash i Shockwave cu Dreamweaver? 2. Descriei o metod de inserare a unui text n format Flash cu Dreamweaver. 3. Cum inserai data zilei cu Dreamweaver? 4. Inserai un applet Java cu Dreamweaver. 5. Descriei pe scurt metodele de inserare a fiierelor sunet i video (obiecte care necesit un plugin) cu Dreamweaver MX workspace.
Vizitai site-urile
www.verisgn.com www.flashkit.com www.werehere.com
Conversaia 12
Creai cadre cu Dreamweaver MX

Dreamweaver MX Apreciai cadrele Dreamweaver Dreamweaver 4 workspace, MX workspace Creai cadre care se afieaz n coloane Dreamweaver 4 workspace, MX workspace Inserai o pagin (X)HTML ntr-un cadru Dreamweaver 4 workspace , MX workspace Creai cadre care se afieaz n linii Dreamweaver 4 workspace, MX workspace Salvai setul de cadre Dreamweaver 4 workspace, MX workspace Numii un cadru Dreamweaver 4 workspace , MX workspace Creai o legtur (link) ctre un cadru Dreamweaver 4 workspace , MX workspace Formatai bordurile cadrelor Dreamweaver 4 workspace , MX workspace Controlai prezena sau absena barelor de defilare ale cadrelor Dreamweaver MX Tem
Dreamweaver MX
(X)HTML.
Apreciai cadrele Dreamweaver
Cadrele Dreamweaver sunt mult mai uor de construit dect cadrele
586
Problema cea mai important (att pentru cadrele (X)HTML ct i pentru cadrele Dreamweaver) rmne incompatibilitatea acestora cu vechile navigatoare sau cu navigatoarele care nu afieaz dect text.
Aplicaie Accesai site-ul: www.ReelDirectory.com (figura 12.1)
Figura 12.1 Analizai modul de structurare al cadrelor i nu doar att!

Remarci: Nu utilizai cadre numai de plcerea de a utiliza cadre. Nu afiai bordurile cadrelor. Nu utilizai cadre atunci cnd tabelele sunt mai indicate. Nu folosii cadre imbricate (nested). Creai o alternativ pentru vizitatorii care posed un browser incapabil s afieze cadrele. Folosii mesajul Acest site utilizeaz cadre i necesit un navigator capabil s le afieze. Nu folosii cadrele atunci cnd creai link-uri ctre alte site-uri.
587
Dreamweaver 4
workspace
Dreamweaver permite
Creai cadre care se afieaz n coloane

crearea cadrelor prin divizarea ferestrei
navigatorului n ferestre de dimensiuni mai mici, n care se afieaz pagini Web individuale. Setul de cadre este un fiier HTML care conine informaiile necesare pentru construcia cadrelor. ntr-un cadru putei s ncrcai o pagin Web existent sau s creai o nou pagin Web. Putei diviza (fraciona) fereastra Document n dou pri: stngadreapta (vertical) sau sus-jos (orizontal), ntr-un mod destul de simplu. Pentru a crea cadre care se afieaz n coloane cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Modify, via Frameset; Metoda 2 Panoul Insert; Metoda 3 Meniul Insert, via Frames; Metoda 4 Meniul View, via Visual Aids Frame Borders.
Iat cum crem dou cadre: unul la stnga, cellalt la dreapta prin divizarea ferestrei unui navigator n coloane (cadre n coloan).
Metoda 1
1. Executai clic pe File New. FrameSet Split Frame Left (figura
2. Executai clic pe Modify 12.2).
588
Figura 12.2
Remarc. Comenzile Split Frame Left i Split Frame Right mpart pagina vertical, n dou cadre: unul la stnga i altul la dreapta (vezi figura 12.3).
Figura 12.3
Remarci: Coninutul paginii este deplasat (stnga/dreapta) n funcie de comanda aleas: Split Frame Left / Split Frame Right. Putei continua divizarea cadrelor via Modify Frame Set pentru a obine cadre imbricate. Putei continua prin a modifica proprietile cadrelor (bordura, dimensiune, opiuni de defilare i redimensionare etc.)
589
Dac ai parcurs aceste etape cu titlu de antrenament, nu salvai deocamdat setul de cadre pe care l-ai creat. Executai clic pe File Close iar atunci cnd Dreamweaver v ntreab dac dorii s salvai modificrile efectuate rspundei prin No.
Putei continua introducnd: text, imagini, tabele etc. n fiecare din cadrele pe care le-ai creat. Putei salva fiierul dumneavoastr.
3. Analizai codul surs HTML generat (figura 12.4).
Figura 12.4
Remarci: Selectai tag-urile <FRAMESET>, <FRAME>, <NOFRAMES>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul cols al tag-ului <FRAMESET>. Citii Conversaia 12, paragraful HTML4 Creai cadre care se afieaz n coloane (fixe, dinamice) (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.5
590
Metoda 2
1. Executai clic pe File New.
2. n panoul Insert, alegei categoria Frames (figura 12.6).
Figura 12.6
Remarc. Panoul Frames conine seturi de cadre predefinite pe care le putei insera n paginile dumneavoastr, adaptndu-le eventual printr-un reglaj fin.
3. Executai clic pe pictograma
(Right) sau tragei-o cu
mouse-ul n Document, pentru a o aplica (figura 12.7).
Figura 12.7
Remarci:
Toate seturile de cadre din panoul Frames au chenarele dezactivate. Cadrele au deja un nume, dar urmeaz s salvai fiecare fiier n parte (File Save Frameset).
Metoda 2 utilizeaz un set de cadre predefinit.
591
4. Analizai codul surs HTML generat. 5. Vizualizai pagina Web ntr-un browser; comentai rezultatul obinut.
Metoda 3
1. Executai clic pe File 2. Executai clic pe Insert New. Frames Right (figura 12.8).
Figura 12.8
3. Salvai setul de cadre (File
Save Frameset).
4. Analizai codul surs HTML generat. 5. Vizualizai pagina Web ntr-un browser.
Remarc. Metoda 3 utilizeaz un set de cadre predefinit.
592
Metoda 4
1. Vizualizai chenarele cadrelor via View Borders (figura 12.9). Visual Aids Frame
Figura 12.9
Remarc. n jurul paginii Web se afieaz un set de chenare (figura 12.10).
Figura 12.10
593
2. Tragei cu mouse-ul de chenarul cadrului din stnga pentru a crea cele dou cadre: unul la stnga, altul la dreapta (figura 12.11).
Figura 12.11
3. Salvai setul de cadre. 4. Analizai codul surs HTML generat. 5. Vizualizai pagina Web ntr-un browser.
Dreamweaver MX
workspace
Creai cadre care se afieaz n coloane
Pentru a crea cadre care se afieaz n coloane, cu Dreamweaver MX workspace , folosii una din metodele prezentate mai jos: Metoda 1 Meniul Modify, via Frameset; Metoda 2 Grupul de panouri Insert; Metoda 3 Meniul Insert, via Frames; Metoda 4 Meniul View, via Visual Aids Frame Borders.
594
Iat cum crem cu Dreamweaver MX workspace dou cadre care se afieaz n coloane (cadre n coloan).
Metoda 2
1. Executai clic pe File New.
2. n grupul de panouri Insert, subpanoul Frames, executai clic pe butonul setului de cadre predefinit 12.12. (Right Frame), figura
Figura 12.12
3. Analizai codul surs XHTML generat (figura 12.13).
Figura 12.13
Remarc. Citii Conversaia 12, paragraful XHTML Creai cadre care se afieaz n coloane (fixe, dinamice), (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
595
Figura 12.14
Dreamweaver 4
workspace
Inserai o pagin HTML ntr-un cadru
Putei introduce informaii ntr-un cadru deschiznd un document HTML existent. Dac dorii s introducei text direct de la tastatur, procedai ca n cazul paginilor tradiionale. Iat cum adugm n dou cadre (vezi paragraful Creai cadre n coloane) informaiile din paginile a.html i b.html (vezi aplicaia HTML Structurai site-ul cu ajutorul cadrelor), (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003). 1. Executai clic pe Window
Remarc. Se afieaz panoul Frames.
Others
Frames.
2. n panoul Frames care se afieaz, selectai cadrul din stnga paginii, executnd clic n interiorul acestuia (figura 12.15).
Figura 12.15
596
Remarc. Proprietile cadrului selectat sunt evideniate n inspectorul Properties.
3. n inspectorul Properties, executai clic pe pictograma Browse for File (

Figura 12.16
Remarc. Se afieaz caseta de dialog Select HTML File.
), figura 12.16.
4. n caseta Select HTML File, care se afieaz executai clic pe: a.htm; butonul OK.
Remarc. Dreamweaver afieaz documentul HTML (a.html) n cadrul din stnga paginii.
Figura 12.17
6. Selectai cel de-al doilea cadru (din dreapta paginii). 7. n inspectorul Properties, executai clic pe icon-ul for File). 8. n caseta de dialog Select File HTML, executai clic pe: b.htm; butonul OK.
Remarc. Dreamweaver 4 workspace afieaz documentul b.html n cadrul din dreapta paginii.
(Browse
597
Figura 12.18
Figura 12.19
Remarci: Folosii comanda Open in Frame (via File) pentru a deschide, n cadrul unde este localizat cursorul, o pagin Web existent. Atenie la ncrcarea ntr-un cadru a unei pagini Web care conine cadre! Exist riscul ca aceste cadre s apar prea mici!
Dreamweaver MX
workspace
Inserai o pagin XHTML ntr-un cadru
Iat cum inserm cu Dreamweaver MX workspace paginile a.html i b.html n dou cadre n coloan, aceleai pe care le-ai creat cu Dreamweaver 4 workspace.
598
1. Executai clic pe Window Others Frames (figura 12.20).
Figura 12.20
2. n panoul Frames care se afieaz, selectai cadrul din stnga paginii, executnd clic n interiorul acestuia (figura 12.21).
Figura 12.21
599
3. n panoul Properties, executai clic pe pictograma for File), figura 12.22. (Browse
Figura 12.22
4. n caseta de dialog Select HTML File, care se afieaz executai urmtoarele aciuni (figura 12.23): selectai folder-ul care conine fiierul a.htm; executai clic pe a.htm; executai clic pe butonul OK.
Figura 12.23
600
Remarc. Dreamweaver afieaz documentul HTML (a.html) n cadrul din stnga paginii (figura 12.24).
Figura 12.24
Figura 12.25
6. Selectai cel de-al doilea cadru (din dreapta paginii). 7. n inspectorul Properties, executai clic pe icon-ul for File). 8. n caseta de dialog Select File HTML, executai clic pe: b.htm; butonul OK. (Browse
601
Remarc. Dreamweaver MX workspace afieaz fiierul b.html n cadrul din dreapta paginii.
Figura 12.26
Figura 12.27
Dreamweaver 4
workspace
Creai cadre care se afieaz n linii
Putei de asemenea diviza orizontal fereastra Document pentru a crea dou cadre (n linii): unul sus i altul jos.
602
Vom folosi aceleai metode pe care le-am aplicat la crearea cadrelor coloan, dar cu modificrile prezentate mai jos: Metoda 1 Meniul Modify, via Frameset; Metoda 2 Panoul Insert; Metoda 3 Meniul Insert, via Frames; Metoda 4 Meniul View, via Visual Aids Frame Borders.
Iat cum procedai pentru a crea dou cadre: unul sus altul jos, ntr-o pagin Web vid.
Metoda 1
Se modific pasul 2 (Metoda 1 cadre coloan), dup cum urmeaz: 2. Executai clic pe Modify FrameSet Split Frame Up.
Metoda 2 Panoul Insert

Se modific pasul 3 (Metoda 2 cadre coloan), dup cum urmeaz: 3. Executai clic pe pictograma (Top) sau tragei-o cu
mouse-ul n Document, pentru a o aplica.
Metoda 3
Se modific pasul 2 (Metoda 3 cadre coloan), dup cum urmeaz: 2. Executai clic pe Insert Frames Top.
Metoda 4
Se modific pasul 2 (Metoda 4 cadre coloan), dup cum urmeaz: 2. Tragei cu mouse-ul de chenarul cadrului de sus pentru a crea cele dou cadre: unul sus, altul jos. n figura 12.28 se prezint cele dou cadre afiate: unul sus, altul jos.
603
Figura 12.28
Remarc. Diferena dintre Split Frame Left i Split Frame Right sau Split Frame Top i Split Frame Bottom nu apare pentru moment. n consecin, putei alege oricare din cele dou comenzi.
Dreamweaver MX Creai cadre care se afieaz n linii

workspace
Pentru a crea cadre care se afieaz n linii, cu Dreamweaver MX workspace, folosii una din metodele prezentate n cadrul paragrafului Dreamweaver 4 workspace Creai cadre care se afieaz n linii. Iat cum procedai pentru a crea cu Dreamweaver MX workspace dou cadre: unul sus altul jos, ntr-o pagin Web vid.
Metoda 1
1. Executai clic pe File New. FrameSet Split Frame Up (figura
2. Executai clic pe Modify 12.29).
604
Figura 12.29
Figura 12.30
605
Figura 12.31
Dreamweaver 4
workspace
Salvai setul de cadre
La primul antrenament cu cadre (vezi aplicaiile: Creai cadre care se afieaz n coloane i Creai cadre care se afieaz n linii) v-am cerut s nu salvai cele dou cadre (stnga/dreapta i sus/jos) i setul de cadre corespunztor. Iat care este procedura de salvare a celor trei fiiere HTML (vezi paragraful Creai cadre care se afieaz n coloane). 1. Executai clic pe File Save All (figura 12.32).
Figura 12.32
606
Remarci: Se afieaz caseta de dialog Save As. Este prima caset de dialog care se afieaz. Numrul total de casete de dialog depinde de numrul de cadre definite.
2. Dai un nume fiierului: set_de_cadre.htm (figura 12.33).
Figura 12.33
Remarci: Primul fiier pe care-l salvai reprezint fiierul frameset, adic fiierul care indic ierarhia cadrelor. Fiierul frameset trebuie s poarte un nume semnificativ (set_de_cadre sau s etc.) pentru a v reaminti ori de cte ori este nevoie c aceasta este pagina care conine setul de cadre.
3. Salvai fiierul n folder-ul Site.

Remarc. Fiierul set_de_cadre.html a fost salvat n folder-ul Site i o nou caset de dialog Save As se afieaz.
4. Dai un nume fiierului: stanga.htm. Acest fiier identific unul din cadrele (stnga) documentului
dumneavoastr. Putei uor s-l reperai ntruct Dreamweaver l selecteaz. 5. Executai clic pe Save. Fiierul cadru (stanga.html) este salvat i o nou caset de dialog se afieaz. 6. Dai un nume fiierului: dreapta.htm. 7. Executai clic pe Save.
Remarci: Nu uitai s privii documentul n vederea identificrii cadrului pe care Dreamweaver se pregtete s-l salveze. Conturul su este selectat. Odat cu salvarea n totalitate a cadrelor nici o caset de dialog Save As nu se va mai afia. Uneori, nu dorii s salvai toate fiierele o singur dat. Pentru a salva un singur cadru, poziionai cursorul n cadrul respectiv i executai clic pe File Save Frame As. Dreamweaver nu salveaz dect fiierul cadrului respectiv. Pentru a nu salva dect pagina care definete setul de cadre (pagina de cadre) selectai toate cadrele executnd clic pe una din borduri, apoi executai clic pe File Save all frames.
607
Nu uitai c pagina de cadre nu se afieaz n nici un cadru: ea se limiteaz la definirea zonei de afiaj a cadrelor, a poziiei i a dimensiunii acestora. Titlul pe care l vedei n bara de titlu a browser-ului este titlul din pagina care conine setul de cadre. Pentru a aduga un titlu selectai Page Properties (via Modify) n timp ce este selectat setul de cadre. Tastai un titlu n caseta de titlu.
Dreamweaver MX
workspace
Salvai setul de cadre
Iat cum procedai pentru a salva setul de cadre (fiierul frameset) i cele dou cadre coloan (stnga/dreapta) pe care le-ai creat n paragraful Dreamweaver MX workspace - Creai cadre care se afieaz n coloane. 1. Selectai setul de cadre. 2. Executai clic pe File Save All.
3. n caseta de dialog Save As, care se afieaz, executai urmtoarele aciuni (figura 12.34): selectai folder-ul (Site) n care urmeaz s salvai cele trei fiiere; n zona File name introducei set_de cadre.htm. executai clic pe butonul Save.
Figura 12.34
608
Remarc. Fiierul set_de_cadre.htm a fost salvat n folder-ul Site i o nou caset de dialog Save As se afieaz.
4. n caseta de dialog Save As executai urmtoarele aciuni: n zona File name introducei stanga.htm; executai clic pe butonul Save. Fiierul cadru (stanga.htm) este salvat i o nou caset de dialog Save As se afieaz. 5. n caseta de dialog Save As executai urmtoarele aciuni: n zona File name introducei dreapta.htm; executai clic pe butonul Save.
Dreamweaver 4
workspace
Numii un cadru
Dreamweaver numete n mod automat un cadru: leftFrame, topFrame, mainFrame. Putei, desigur, s pstrai acest nume. Dar, cum dumneavoastr avei personalitate, este bine s acionai n consecin! Iat cum procedm pentru a atribui un nume cadrelor. Vom utiliza fiierul set_de_cadre.htm, pe care l-am creat i salvat n aplicaia precedent. 1. Deschidei fiierul set_de_cadre.html (figura 12.35).
Figura 12.35
609
2. Afiai panoul Frames, via Window 12.36). Other Frames (figura
Figura 12.36
Remarc. Panoul Frames este o reprezentare n miniatur a paginii care conine cele dou cadre (verticale).
3. Asigurai-v c inspectorul Properties este deschis (via Window Properties). 4. Executai clic n interiorul cadrului din dreapta care urmeaz a fi numit (figura 12.37).
Figura 12.37
Remarci: Inspectorul Properties afieaz proprietile cadrului pe care l-ai selectat. Panoul Frames permite selectarea unui singur cadru sau a unui singur set de cadre o dat. Putei modifica numele cadrului (zona Frame Name) i schimba adresa URL (zona SRC). Putei configura totodat derularea cadrelor i atributele chenarelor.
5. n inspectorul Properties, n zona Frame Name, CadruDreapta (figura 12.38).

Figura 12.38
introducei:
610
6. Salvai fiecare fiier n parte. 7. Analizai codul surs HTML generat (figura 12.39).
Figura 12.39
Remarc. Putei salva fiecare fiier n parte sau tot setul de cadre.
Dreamweaver MX
workspace
Numii un cadru
Iat cum procedm pentru a atribui un nume cadrelor cu Dreamweaver MX workspace. Vom utiliza fiierul set_de_cadre.htm, pe care l-am creat i salvat n paragraful Dreamweaver MX workspace Salvai setul de cadre. 1. Executai clic pe Window Others Frames (figura 12.40).
Figura 12.40
611
2. Executai clic n interiorul cadrului din dreapta, care urmeaz a fi numit (figura 12.41).
Figura 12.41
3. n panoul Properties, n zona Frame Name, introducei: Cadru Dreapta (figura 12.42).
Figura 12.42

Remarc. Numele cadrului apare n panoul Frames.
Figura 12.43
612
Dreamweaver 4
workspace
Creai o legtur (link) ctre un cadru
n Dreamweaver este foarte simplu s creai o legtur ctre un alt cadru. Iat cum crem un link din cadrul din stnga (Pagina 1) ctre Pagina 4 (figura 12.44) care se va deschide n cadrul principal (Pagina 3).
Figura 12.44
Remarc. n cadrul din stnga am adugat text pentru legturile ctre Paginile 4, 5 i 6.
1. Selectai textul Pagina 4 care urmeaz a fi convertit n legtur (link) ctre Pagina4.html (figura 12.45).
Figura 12.45
613
2. n inspectorul Properties, executai clic pe pictograma n form de dosar, (Browse for File).
3. Executai dublu clic pe fiierul int: pagina4.html.

Remarc. Numele fiierului se afieaz n inspectorul Properties, n zona Link (figura 12.46).
Figura 12.46
4. n inspectorul Properties, n zona Target, n meniul derulant ( ), alegei mainFrame numele cadrului n care dorii s se afieze pagina4.html.
Remarci: Dreamweaver listeaz toate cadrele numite. Noi am ales mainFrame. Putei de asemenea consulta numele cadrelor n panoul Frames via Window Others Frames (figura 12.47).
Figura 12.47
Exist patru nume de int rezervate: _top (deschide documentul n ntreaga fereastr a browser-ului); _self (deschide documentul n aceeai fereastr sau n acelai cadru care conine legtur; aceasta este valoarea prestabilit); _parent (deschide documentul n setul de cadre printe); _blank (deschide documentul ntr-o nou fereastr a browser-ului). Lista de inte nu este activ dect dac selectai textul de legtur.
614
Figura 12.48
Remarc. Citii Conversaia 12, paragraful HTML4 Creai o legtur (link) ctre un cadru (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.49
Remarc. Dac executai clic pe textul de legtur Pagina 4, se afieaz n cadrul principal (mainFrame) al setului de cadre pagina HTML: Pagina 4.
615
Dreamweaver MX
workspace
Creai o legtur (link) ctre un cadru
Iat cum crem un link din cadrul din stnga (Pagina 1) ctre Pagina 4, care se va deschide n cadrul principal (Pagina 3). Vom utiliza setul de cadre din paragraful Dreamweaver 4 workspace Creai o legtur (link) ctre un cadru. 1. Selectai Pagina 4 textul care urmeaz a fi convertit n legtur ctre Pagina4.html. 2. n inspectorul Properties, executai clic pe (Browse for File).
3. n caseta de dialog Select File, care se afieaz, executai urmtoarele aciuni (figura 12.50): selectai folder-ul Site; executai clic pe fiierul int, pagina4.htm; executai clic pe butonul OK.
Figura 12.50
616
4. n panoul Properties, n zona Target, n meniul derulant alegei mainFrame, numele cadrului unde dorii s se afieze pagina4.html (figura 12.51).
Figura 12.51
Figura 12.52
Remarc. Citii Conversaia 12, paragraful XHTML Creai o legtur (link) ctre un cadru (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.53
617
Dreamweaver 4
workspace
Formatai bordurile cadrelor
Pentru a deveni performant n utilizarea cadrelor, va trebui s modificai, nu de puine ori, proprietile cadrelor dumneavoastr. n acest sens, vei configura atributele de derulare i redimensionare ale cadrelor, vei configura chenarele cadrelor, vei umbla la culoarea sau bordura unui cadru etc. Pentru accesarea tuturor acestor opiuni, utilizai panoul Frames via Window Frames.
Iat cum modificai grosimea i culoarea chenarului setului de cadre din aplicaia Creai cadre care se afieaz n coloane. 1. Executai clic pe bordura unui cadru pentru a selecta setul de cadre (figura 12.54).
Figura 12.54
Remarc. Cea mai simpl metod de a selecta setul de cadre afind atributele setului de cadre n inspectorul Properties este aceea de selectare a tag-ului <frameset> n selectorul de tag-uri. Selectorul de tag-uri afieaz tag-ul <frameset> atunci cnd este selectat un cadru din interiorul setului de cadre.
2. n inspectorul Properties (figura 12.55), n zona: Borders selectai Yes n meniul Borders;
618
Border width introducei valoarea 10 (grosimea bordurii); Border Color selectai culoarea Blue (#0000FF).
Figura 12.55
Remarc. n fereastra Document din Dreamweaver, putei vedea imediat modificrile efectuate.
Figura 12.56
Remarci: Selectai tag-ul <FRAMESET> i deschidei panoul Reference. Utilizai meniul derulant Description pentru a vizualiza atributul border. Citii Conversaia 12, paragraful HTML4 Formatai bordurile cadrelor (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.57 Aplicaie Suprimai bordura cadrelor. Iat care este procedura pe care trebuie s-o urmai.
619
n inspectorul Properties, n: meniul Borders (via Borders) selectai No. zona Border Width introducei valoarea 0 (zero).
Remarci: Dac nu dorii s se afieze chenarele, asigurai-v c acestora nu le este atribuit nici o valoare. Pentru a dezactiva un chenar, toate cadrele adiacente trebuie s aib, i ele, chenarele dezactivate.
Dreamweaver MX
workspace
Formatai bordurile cadrelor
Pentru a delimita ct mai bine cadrele, modificai dimensiunea i culoarea bordurilor. Iat cum procedai pentru a modifica grosimea (10 pixeli) i culoarea (blue) bordurii setului de cadre pe care l-ai creat n aplicaia Creai cadre care se afieaz n coloane (Paragraful Dreamweaver MX workspace Creai cadre care se afieaz n coloane). 1. Selectai setul de cadre. 2. n panoul Properties (figura 12.58), n zona: Borders executai clic pe i selectai Yes;
Border width introducei o valoarea 10 (grosimea chenarului); Border Color selectai culoarea Blue (#0000FF).
Figura 12.58
620
Figura 12.59
Remarc. Citii Conversaia 12, paragraful XHTML Formatai bordurile cadrelor (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.60
Dreamweaver 4
workspace
Controlai prezena sau absena barelor de defilare ale cadrelor
Cu Dreamweaver 4 workspace putei controla ntr-un mod simplu prezena/absena barelor de defilare (derulare) orizontale, verticale din cadrele dumneavoastr.
621
Iat cum configurai atributele de defilare ale cadrului Pagina 2 din aplicaia Creai cadre care se afieaz n coloane. 1. Selectai cadrul Pagina 2 (figura 12.61).
Figura 12.61
2. n inspectorul Properties, n zona Scroll, executai clic pe butonul i selectai Auto n meniul Scroll pentru a activa barele de defilare n cazul n care coninutul cadrului este mai mare dect ceea ce se vede n fereastra navigatorului (figura 12.62).
Figura 12.62
Remarci: Atunci cnd este selectat un cadru, inspectorul Properties afieaz patru opiuni: Yes, No, Auto, Default pentru barele de defilare. Yes activeaz barele de defilare (orizontale, verticale), indiferent de situaie. No dezactiveaz barele de defilare, indiferent de situaie. Auto activeaz numai barele de defilare (orizontale sau verticale) necesare.
Figura 12.63
622
Remarc. Citii Conversaia 12, paragraful HTML4 Controlai prezena sau absena barelor de defilare (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.64
Aplicaii mpiedicai redimensionarea unui cadru. Iat cum procedm pentru a modifica opiunea de redimensionare a unui cadru. 1. Selectai cadrul Pagina 2. 2. n inspectorul Properties, n zona No Resize (fr redimensionare) selectai caseta de validare (figura 12.65). Figura 12.65 3. Analizai codul surs HTML generat (figura 12.66).
623
Figura 12.67
Remarc. Utilizatorul nu poate glisa bordura cadrului Pagina 2.
Definii coordonatele spaiului dintre bordura cadrului i coninutul acestuia. Iat care este procedura pe care trebuie s-o urmai. 1. Asigurai-v c inspectorul Properties este deschis. 2. n inspectorul Properties, n zonele Margin Width i Margin Height introducei valoarea 2 pixeli (sugestia noastr!), figura 12.68.
Figura 12.68
Remarci: Cu ajutorul cadrelor putei controla n mod precis dimensiunile imaginii (spaiul dintre bordura i coninutul cadrului). Dac dorii s suprimai cele dou margini introducei valoarea 0 (zero) n cele dou zone (Marge Width i Marge Height).
Modificai dimensiunile cadrelor Iat care este procedura pe care trebuie s-o urmai. Vom apela la aplicaia Creai cadre n coloane. 1. Executai clic pe bordura unui cadru pentru a selecta setul de cadre (figura 12.69).
624
Figura 12.69 2. n inspectorul Properties (figura 12.70), n zona: RowCol Selection executai clic pe cadrul Pagina 2; Column via Value introducei valoarea 150; Units selectai Pixels.
Figura 12.70
Remarc. Inspectorul Properties afieaz n zona Units urmtoarele uniti: Pixels, Percent, Relative.
625
Figura 12.72
Remarc. Metoda cea mai simpl pentru modificarea dimensiunilor unui cadru este aceea de a selecta bordura cadrului i de a o glisa pn la dimensiunile dorite. Cu aceast metod putei i suprima un cadru, glisnd bordura pn la marginea ferestrei.
Folosii pentru modificarea dimensiunii cadrelor i celelalte uniti (zona Units din inspectorul Properties): Percent, Relative.
Dreamweaver MX
workspace
Controlai prezena sau absena barelor de defilare ale cadrelor
Iat cum activm barele de defilare (orizontale/verticale) ale cadrului Pagina 2, pe care l-ai creat n aplicaia Creai cadre care se afieaz n coloane (Paragraful Dreamweaver MX workspace Creai cadre care se afieaz n coloane). 1. Selectai cadrul Pagina 2. 2. n inspectorul Properties (figura 12.73), n: zona Scroll meniul Scroll executai clic pe butonul selectai Auto. ;
Figura 12.73
626
Figura 12.74 Remarc. Citii Conversaia 12, paragraful XHTML Controlai prezena sau absena barelor de defilare (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.75 Aplicaii Folosii un text de nlocuire (alternativ pentru cadre) Ne pare ru c trebuie s renunai la cadre! n situaia n care browser-ul dumneavoastr este incapabil s afieze cadrele! Iat care este procedura pe care trebuie s-o urmai. 1. Selectai setul de cadre. 2. Executai clic pe Modify Frameset Edit Noframes Content.
3. Introducei textul alternativ care urmeaz s se afieze n absena cadrelor (figura 12.76).
627
Figura 12.76 Modificai opiunea de redimensionare a unui cadru. Indicaie. n panoul Properties, n zona No Resize, selectai caseta de validare. Modificai coordonatele (2 pixeli!) spaiului dintre bordura cadrului i coninutul acestuia. Indicaie. n panoul Properties, n zonele Margin Width i Margin Height introducei valoarea 2. Modificai dimensiunile cadrelor (vezi aceeai aplicaie, paragraful:
Dreamweaver 4 workspace Controlai prezena sau absena barelor de defilare ale cadrelor).
628
Dreamweaver MX
Testai-v cunotinele
Tem
1. Prezentai pe scurt una din metodele Dreamweaver de creare cadre care se afieaz n coloane/linii. 2. Cum inserai o pagin HTML ntr-un cadru? 3. Descriei pe scurt procedura Dreamweaver de creare a unei legturi (link) ctre un cadru. 4. Prezentai pe scurt procedura Dreamweaver de formatare a bordurilor cadrelor. 5. Cum procedai n situaia n care browser-ul dumneavoastr este incapabil s afieze cadrele. 6. Cum modificai opiunea de redimensionare a unui cadru?
Vizitai site-urile
http://metabolicnutrition.com www.terespond.com www.economist.com www.macromedia.com/90/dreamweaver_tutorials
Conversaia 13
Creai straturi cu Dreamweaver MX

Dreamweaver 4 workspace, MX workspace Creai un strat (layer) Dreamweaver 4 workspace, MX workspace Modificai dimensiunile i poziia unui strat. Aplicaii Dreamweaver 4 workspace, MX workspace Modificai vizibilitatea i ordinea de suprapunere a straturilor. Aplicaii Dreamweaver 4 workspace, MX workspace Controlai coninutul unui strat Dreamweaver 4 workspace, MX workspace Creai straturi imbricate (nested) Dreamweaver MX Tem
Dreamweaver 4
workspace
Creai un strat (layer)
Dreamweaver permite crearea ntr-un mod simplu i direct a trei funcii DHTML puternice: straturi; comportamente; scenarii. Vom prezenta n cele ce urmeaz modul de lucru cu straturile.
630
Straturile (layers, n limba englez; calques, n limba francez) sunt foi de stiluri de poziionare a obiectelor ntr-o pagin Web (CSS-P pentru W3C; n prezent ele sunt integrate n CSS 2), care aparin marii familii CSS (foi de stiluri n cascad). Straturile permit suprapunerea elementelor unei pagini Web. Ele pot conine aceleai elemente ca i paginile Web: text, imagini, animaie Flash etc. ntruct straturile sunt transparente, elementele paginii rmn, n anumite limite, vizibile. Poziia straturilor este indicat n trei dimensiuni (3D): x, y, z (figura 13.1). marginea paginii x y
Stratul 3 Stratul 2 Stratul 1

Figura 13.1
unde,
x reprezint poziia orizontal fa de marginea din stnga a stratului; y reprezint poziia vertical fa de marginea de sus a stratului; z reprezint ordinea de suprapunere (stivuire) n raport cu alte straturi.
631
n Dreamweaver, straturile au o poziie absolut: stratul este plasat n raport cu marginile paginii i este poziionat deasupra coninutului paginii.
Remarci: Pentru a poziiona un strat, folosii dou tipuri de elemente HTML: elementul <div> recunoscut de browser-e i de standardul W3C; elementul <layer> specific navigatorului Netscape (recunoscut numai de ctre acesta). Pentru a parametriza elementul HTML <DIV>, utilizai Edit Preference categoria Layers (figura 13.2).
Figura 13.2
n meniul derulant Tag, alegei DIV. n zonele: Visibility, Width, Height, Background Color, Background Image i Nesting, nu modificai parametrii afiai. n zona Netscape 4 Compatibility, activai opiunea Add Resize Fix when Inserting Layer (pentru a optimiza paginile care conin straturi).
Pentru a crea un strat (layer) cu Dreamweaver 4 workspace , folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Layer; Metoda 2 Panoul Insert.
632
Inserai un strat
Iat cum procedai pentru a insera un strat peste coninutul paginii existente.
Metoda 1
1. Executai clic n locul n care dorii s fie inserat layer-ul. 2. Executai clic pe Insert Layer.
Remarc. Dreamweaver 4 workspace afieaz un layer deasupra tuturor informaiilor existente (figura 13.3).
Figura 13.3
3. Selectai stratul, executnd clic pe conturul acestuia (figura 13.4)
Figura 13.4
Remarci: Atunci cnd plasai mouse-ul pe conturul stratului, pointer-ul se transform ntr-o cruce cu patru sgei.
633
Cnd stratul a fost selectat, pe perimetrul acestuia apar opt ptrate negre (mnere).
4. Tragei de mnerele de redimensionare pentru a obine o dimensiune aproximativ a stratului. 5. Analizai codul surs HTML generat (figura 13.5).
Figura 13.5
Figura 13.6 Aplicaie Inserai n stratul pe care l-ai definit sigla societii LUMINA BLND.
634
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz: 2. n panoul Insert, categoria Common, executai clic pe butonul (Draw Layer) i tragei cursorul (pointer-ul) n form de cruce n pagina dumneavoastr pentru a aproxima dimensiunea dorit a stratului (figura 13.7).
Figura 13.7 Aplicaie Inserai un strat (layer) peste coninutul paginii existente n care urmeaz s introducei sigla societii LUMINA BLND.
Dreamweaver MX
workspace
Creai un strat (layer)
Pentru a crea un strat (layer) cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Layer; Metoda 2 Grupul de panouri Insert.
Inserai un strat
Iat cum procedai pentru a insera un strat (layer) peste coninutul paginii existente (figura 13.8).
635
Metoda 2
1. Executai clic n locul n care dorii s fie inserat layer-ul (figura 13.8).
Figura 13.8
2. n grupul de panouri Insert, subpanoul Common, executai clic pe butonul

Figura 13.9
(Draw Layer), figura 13.9.
3. Executai clic pe conturul stratului, pentru a-l selecta (figura 13.10).
Figura 13.10
636
Remarci: Un icon indic prezena unui strat (figura 13.10). Dac icon-ul nu se afieaz atunci, executai clic pe Edit Preference Categoria Invisible Elements i activai opiunea Anchor Points for Layers. Stratul este inserat n pagin peste celelalte elemente (figura 13.10).
4. Tragei de mnerele de redimensionare pentru a obine o dimensiune aproximativ a stratului. 5. Analizai codul XHTML generat (figura 13.11).
Figura 13.11
637
Inserai o imagine ntr-un strat
Iat care este procedura pe care v invitm s-o urmai pentru a insera imaginea ce reprezint sigla societii LUMINA BLND n stratul pe care l-ai creat. 1. Executai clic n interiorul stratului. 2. Executai clic pe Insert Image.
Remarc. Se afieaz caseta de dialog Select Image Source.
3. n caseta de dialog Select Image Source executai urmtoarele aciuni (figura 13.12): n zona LOOK in selectai folder-ul care conine imaginea; File Name introducei sigla.jpg; executai clic pe butonul OK.
Figura 13.12
638
Figura 13.13
Figura 13.14
Dreamweaver 4
workspace
Modificai dimensiunile i poziia unui strat
Putei redimensiona i repoziiona un strat dup bunul dumneavoastr plac. Iat cum modificm dimensiunile (Width, Height) stratului pe care l-am creat n aplicaia precedent (width=300; height=200 n loc de 200 respectiv 115 pixeli).
639
1. Selectai stratul pe care dorii s-l redimensionai.
Remarc. Exist mai multe variante de selectare a unui strat:
sau, sau,
1. executai clic pe elementul invizibil (
);
2. executai clic pe conturul stratului; 3. cnd punctul de inserie se afl n interiorul stratului, executai clic pe ptratul ( ) aflat n colul din stnga sus al stratului (figura 13.15).
Figura 13.15
sau, sau,
4. cnd stratul nu este activat, acionai i meninei apsat tasta Shift i executai clic oriunde n interiorul stratului. 5. n paleta Layers, via Window Layers, zona Name, executai clic pe numele stratului (pentru moment, Layer 1).
2. Afiai: panoul Layers, Window inspectorul Properties, (figura 13.16).
Others
Layers
Figura 13.16
640
3. n inspectorul Properties, executai urmtoarele aciuni (figura 13.17). n zona Layer ID introducei numele stratului, Demo; n zona L introducei valoarea 50, care reprezint distana n pixeli, msurat de la marginea din stnga a paginii la marginea din stnga a stratului; n zona T introducei valoarea 30, care reprezint distana n pixeli, msurat de la marginea de sus a paginii la marginea superioar a stratului; n zonele W i H introducei valoarea 300, respectiv 200 pixeli; n zona Z Index lsai 1, valoarea afiat care precizeaz c stratul se gsete dedesubtul celorlalte (stratul situat cel mai jos n stiva straturilor).
Figura 13.17
4. Schimbai poziia stratului executnd clic i apoi deplasnd ptratul din colul din stnga sus al stratului.
Remarc. Dreamweaver repoziioneaz stratul (figura 13.18).
641
Figura 13.18
Figura 13.19
Figura 13.20
642
Aplicaii Aliniai cele trei straturi din figura 13.21.a n raport cu stratul din mijloc (selectat) la marginea superioar (figura 13.21.b).
Figura 13.21 a
Figura 13.21 b
Indicaie. Alinierea se face n raport cu stratul (din mijloc) selectat. Executai clic pe Modify Align Left sau Right sau Top sau Bottom.
Remarc. Putei s v aliniai straturile utiliznd comenzile Grid (gril), via View Grid Show Grid i View Rulers Show. Putei modifica aspectul grilei utiliznd caseta de dialog Grid Settings.
Transformai straturile din figura 13.22 ntr-un tabel.
Figura 13.22
643
Iat care este procedura pe care v invitm s-o urmai. 1. Desenai straturile din figura 13.22. 2. Selectai toate straturile. 3. Executai clic pe Modify Convert Layers to Table (figura 13.23).
Figura 13.23
Se afieaz caseta de dialog Convert Layers to Table (figura 13.24) care conine seciunile: Table Layout (machetare tabel) i Layout Tools (instrumente).
Figura 13.24
644
4. n caseta de dialog Convert Layers to Table, activai butonul radio Most Accurate (figura 13.25). Figura 13.25
Remarci: Most Accurate (cel mai precis) permite convertirea fiecrui strat ntr-o celul de tabel, crend attea celule ct este necesar. Smallest: Collapse Empty Cells (cel mai mic: elimin celulele vide) elimin liniile sau coloanele vide dac acestea se gsesc la o distan egal cu un numr stabilit de pixeli n raport co o linie/coloan existent. Use Transparent GIFs (utilizeaz fiiere GIF transparente) completeaz ultimul rnd al tabelului cu imagini GIF transparente. Center on Page (centreaz n pagin) centreaz tabelul n pagina dumneavoastr.
5. Executai clic pe butonul OK. 6. Analizai codul surs HTML generat (figura 13.26).
645
Figura 13.27
Dreamweaver MX Modificai dimensiunile i poziia

workspace
unui strat
Iat cum modificm dimensiunile (300 * 200 pixeli n loc de 200 * 115 pixeli) i poziia stratului pe care l-ai creat n aplicaia precedent. 1. Selectai stratul pe care dorii s-l formatai (figura 13.28).
Remarci: Asigurai-v c elementele invizibile ale straturilor sunt activate. n pagin, elementele invizibile i bordurile straturilor trebuie s fie afiate. Pentru selectarea unui strat, folosii una din variantele prezentate (vezi Dreamweaver 4 workspace).
646
Figura 13.28
2. Afiai panoul Layers (figura 13.29), via Window Layer.
Other
Figura 13.29
3. n panoul Properties, parametrizai stratul ca n figura 13.30 (vezi Dreamweaver 4 workspace).
647
Figura 13.30
4. Schimbai poziia stratului, executnd clic i apoi deplasnd ptratul din colul din stnga sus al stratului.
Remarc. Dreamweaver MX workspace repoziioneaz stratului.
Figura 13.31
648
Figura 13.32
Dreamweaver 4
workspace
Modificai vizibilitatea i ordinea de suprapunere a straturilor
Putei configura (fr efort!) alte dou caracteristici puternice ale straturilor: suprapunerea i vizibilitatea. Iat care este procedura pe care trebuie s-o urmai pentru a configura suprapunerea (indicele z) i vizibilitatea a dou straturi: sigla (sigla societii LUMINA BLND un bec de 10 W!) i text (LUMINA BLND), figura 13.33.
Figura 13.33
LUMINA BLND
LUMINA BLND
1. Aranjai cele dou straturi (sigla i text) ntr-o poziie convenabil utiliznd tehnicile prezentate (figura 13.34).
649
Figura 13.34
2. Afiai panoul Layers, via Window 13.35).
Others
Layers (figura
Figura 13.35
Remarci: Panoul Layers afieaz toate straturile dintr-o pagin. Numele (name), vizibilitatea ( ) i indicele z (z) sunt uor accesibile n acest panou. Pentru a verifica vizibilitatea straturilor executai clic n coloana ( ). Pentru a modifica numele straturilor executai dublu clic pe numele acestuia n coloana Name. Pentru a modifica ordinea de suprapunere a straturilor, executai dublu clic pe valoarea corespunztoare n coloana z; putei de asemenea glisa (sus/jos) numele stratului n fereastra panoului Layers.
3. Schimbai ordinea de suprapunere a straturilor executnd clic pe numele stratului (text) n panoul Layers i apoi glisndu-l ctre nceputul sau sfritul listei (acolo unde dorii!) de nume (figura 13.36).
650
Figura 13.36
Dreamweaver 4 workspace modific ordinea de suprapunere a straturilor (figura 13.37).
Figura 13.37
Remarci: Panoul Layers afieaz indicele z n dreapta numelui stratului. Panoul Layers afieaz straturile dup valoarea indicelui z, stratul cel mai de sus avnd indicele z cel mai mare, iar stratul de jos avnd indicele z cel mai mic. Indicele z poate fi un numr pozitiv sau negativ. Putei configura indicele z n inspectorul Properties, n zona z-index. Putei schimba cu uurin ordinea de suprapunere a straturilor prin selectarea numelui stratului (n panoul Layers) urmat de tragerea acestuia ctre nceputul sau sfritul listei de nume.
651
4. Modificai pictograma 13.38). vizibilitatea stratului sigla, executnd clic pe (imaginea unui ochi) n panoul Layers (figura
Figura 13.38
Stratul sigla se afieaz ca n figura 13.39.
Figura 13.39
Remarci: Putei configura caracteristicile de vizibilitate ale unui strat [visible (vizibil); hidden (ascuns); inherit (motenire); default (prestabilit)], selectnd pictograma n form de ochi din stnga stratului sau utiliznd meniul derulant zona Vis. Vis, via inspectorul Properties n panoul Layers, ochiul plasat lng un strat este deschis atunci cnd stratul este vizibil i este nchis atunci cnd stratul este ascuns. Parametrul Inherit (motenire) nu are o reprezentare n form de ochi. Ochiul este un comutator care oscileaz ntre parametrii default, visible i hidden, dup care revine la valoarea prestabilit (vizibilitatea motenit n majoritatea browser-elor).
652
Figura 13.40
Figura 13.41 Aplicaie Mascai stratul sigla din aplicaia precedent. Utilizai inspectorul Properties, meniul derulant VIS, opiunea hidden.
Dreamweaver MX
workspace
Modificai vizibilitatea i ordinea de suprapunere a straturilor
Pentru a modifica ordinea de suprapunere i vizibilitatea straturilor, folosii una din metodele prezentate mai jos:
653
Metoda 1 Panoul Properties; Metoda 2 Meniul Window, via Others Layers. Iat cum procedai pentru a configura suprapunerea i vizibilitatea a dou straturi: sigla societii LUMINA BLND (un bec de 10 W!) i textul LUMINA BLND (vezi Dreamweaver 4 workspace).
Metoda 2
1. Aranjai cele dou straturi ntr-o poziie convenabil (figura 13.42).
Figura 13.42
2. Executai clic pe Window
Others
Layers (figura 13.43).
654
Figura 13.43
3. n panoul Layers, schimbai ordinea de suprapunere a straturilor executnd clic pe text (zona Name) i apoi glisndu-l ctre nceputul sau sfritul listei de nume (zona Name), figura 13.44.
Figura 13.44
655
4. Modificai pictograma vizibilitatea stratului sigla, executnd clic pe n panoul Layers (figura 13.45).
Figura 13.45 Remarc. Stratul sigla se afieaz ca n figura 13.45.
Figura 13.46 Aplicaii Aplicai o culoare de fond (background), albastr (blue), stratului pe care l-ai creat. Indicaie. Folosii zona BgColor din panoul Properties. Aplicai o imagine de fond (background) stratului pe care l-ai creat. Indicaie. Folosii zona BgImage din panoul Properties.
656
Dreamweaver 4
workspace
Controlai coninutul unui strat
Pentru a adapta dimensiunea unui strat la coninutul acestuia, Dreamweaver v propune mai multe soluii. n inspectorul Properties, n meniul derulant Overflow, alegei una din opiunile: visible permite mrirea dimensiunii stratului, astfel nct ntreg coninutul stratului s poat fi afiat; hidden permite mascarea coninutului stratului care debordeaz. auto pstreaz dimensiunea curent a stratului, astfel nct coninutul stratului s nu se poat afia dac este mai mare dect dimensiunea stratului; scroll permite afiarea barelor de defilare atunci cnd coninutul stratului este mai mic dect dimensiunea acestuia; Iat cum procedai pentru a controla coninutul unui strat folosind opiunea visible din meniul Overflow. 1. Selectai stratul. 2. n inspectorul de proprieti, n meniul derulant Overflow, alegei opiunea visible (figura 13.47).
Figura 13.47
657
Figura 13.48 Aplicaie Controlai coninutul stratului pe care l-ai creat, folosind opiunile: scroll, auto i hidden din meniul derulant Overflow (inspectorul Properties).
Remarc. n Netscape coninutul stratului nu poate fi dect decupat. Valorile de decupare sunt: T (top); L (left); R (right); B (bottom). Valorile pe care le introducei n inspectorul Properties, via clip definesc distana de la marginea stratului, i nu de la marginea paginii.
Dreamweaver MX
workspace
Controlai coninutul unui strat
Pentru a controla coninutul unui strat cu Dreamweaver MX, folosii una din opiunile: scroll, auto, visible, hidden care se afieaz n meniul derulant Overflow din panoul Properties. Iat cum procedai pentru a controla coninutul unui strat folosind opiunile din meniul Overflow.
Opiunea visible
1. Selectai stratul. 2. n panoul Properties, n meniul derulant Overflow, alegei opiunea visible (figura 13.49).
658
Figura 13.49
Figura 13.50
659
Figura 13.51
Opiunea hidden
1. Selectai stratul. 2. n panoul Properties, n meniul derulant Overflow, alegei opiunea hidden. 3. Analizai codul surs XHTML generat (figura 13.52).
Figura 13.52
660
Figura 13.53
Opiunea scroll
1. Selectai stratul. 2. n panoul Properties, n meniul derulant Overflow, alegei opiunea scroll. 3. Analizai codul surs XHTML generat (figura 13.54).
Figura 13.54
661
Figura 13.55
Opiunea auto
1. Selectai stratul. 2. n panoul Properties, n meniul derulant Overflow, alegei opiunea auto. 3. Analizai codul XHTML generat (figura 13.56).
Figura 13.56
662
Figura 13.57
Dreamweaver 4
workspace
Creai straturi imbricate (nested)
O alt metod de a plasa straturi pe suprafaa unei pagini este aceea de a le imbrica. Un strat imbricat (nested) este un strat plasat n interiorul unui alt strat, pstrnd relaia paternal. nelegei desigur (sperm) c primul strat devine tatl stratului imbricat (fiu). Stratul fiu utilizeaz colul superior din stnga al stratului printe ca punct de orientare pentru poziionare. Dac straturile se afl n zone diferite ale paginii, relaia cu stratul printe se pstreaz. Atunci cnd deplasai primul strat n pagin, stratul imbricat se deplaseaz de asemenea, exact ca n situaia n care stpnul i plimb cinele inut n les (cinele se deplaseaz independent de stpnul lui, dar ct l ine lesa!). Un strat poate conine alte straturi imbricate. Dac tergei stratul printe n mod automat se terg i straturile fiu. Pentru a crea straturi imbricate cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 n mod normal; Metoda 2 n mod automat. Iat cum crem manual dou straturi (tat i fiu) imbricate.
663
Metoda 1
1. Desenai primul strat pe care-l numii tata (figura 13.58). 2. Desenai cel de-al doilea strat n interiorul primului strat i numii-l fiu (figura 13.58).
Figura 13.58
3. Afiai panoul Layers via Window
Layers (figura 13.59).
Figura 13.59
Remarci: Nu este nevoie ca straturile imbricate s fie plasate n stratul printe. n panoul Layers identificai un strat imbricat prin indentarea stratului fiu n stratul tat i prin simbolul plasat naintea stratului tat. Acest simbol permite renchiderea indentrii.
664
Figura 13.60
Figura 13.61
Metoda 2
Iat cum crem n mod automat cele dou straturi (tat i fiu) imbricate. 1. Executai clic pe Edit Preferences.
Remarc. Se afieaz caseta de dialog Preferences.
2. n caseta de dialog Preferences, categoria Layers, executai urmtoarele aciuni (figura 13.62): n zona Nesting activai opiunea Nest When Created Within a Layer; executai clic pe butonul OK.
665
Figura 13.62
3. Desenai stratul tata. 4. n interiorul acestui strat, desenai stratul fiu. Stratul fiu este imbricat n stratul tata, n mod automat.
Remarc. Nu uitai s dezactivai opiunea Nest When Created Within a Layer.
5. Analizai codul surs HTML generat. 6. Vizualizai pagina Web ntr-un browser.
Dreamweaver MX
workspace
Creai straturi imbricate (nested)
Pentru a crea straturi imbricate cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 n mod manual; Metoda 2 n mod automat, via Edit Preferences.
666
Iat cum procedai pentru a crea manual dou straturi imbricate: tata i fiu.
Metoda 1
1. Desenai primul strat (numii-l tata!), figura 13.63.
Figura 13.63
2. Desenai cel de-al doilea strat n interiorul primului strat (numii-l fiu!), figura 13.64.
Figura 13.64
3. Afiai panoul Layers (figura 13.65).
667
Figura 13.65
Remarc. Identificai n panoul Layers stratul nested prin simbolul plasat naintea stratului tat.
Figura 13.66
Figura 13.67
668
Metoda 2
1. Executai clic pe Edit Preferences.
Remarc. Se afieaz caseta de dialog Preferences.
2. n caseta de dialog Preferences, categoria Layers, executai urmtoarele aciuni (figura 13.68): n zona Nesting activai opiunea Nest When Created Within a Layer; executai clic pe butonul OK.
Figura 13.68
3. Desenai stratul tata. 4. n interiorul stratului tata, desenai stratul fiu.

Remarci: Stratul fiu este imbricat n stratul tata, n mod automat. Nu uitai s dezactivai opiunea Nest When Created Within a Layer.
669
5. Analizai codul surs XHTML generat. 6. Vizualizai pagina Web ntr-un browser.
Dreamweaver MX
Testai-v cunotinele
Tem
1. Care este rolul straturilor ntr-o pagin Web? 2. Descriei pe scurt o metod de creare a unui strat cu Dreamweaver MX. 3. Descriei pe scurt procedura de modificare a dimensiunilor i a poziiei unui strat cu Dreamweaver MX. 4. Cum modificai vizibilitatea i ordinea de suprapunere a straturilor cu Dreamweaver MX? 5. Descriei pe scurt o metod de creare a dou straturi imbricate, cu Dreamweaver MX.
Vizitai site-urile
www.macromedia.com/fr/exchange/dreamweaver www.macromedia.com/exchange/dreamweaver
Conversaia 14
Creai biblioteci cu Dreamweaver MX

Dreamweaver MX Bibliotecile de obiecte Dreamweaver 4 workspace, MX workspace Creai un element de bibliotec Dreamweaver 4 workspace, MX workspace Inserai un element de bibliotec Dreamweaver 4 workspace, MX workspace Modificai un element de bibliotec. Aplicaii Dreamweaver 4 workspace, MX workspace Creai un model de pagin Dreamweaver 4 workspace, MX workspace Definii regiunile editabile ale unui model. Aplicaii Dreamweaver MX workspace Utilizai regiunile facultative ale unui model Dreamweaver MX workspace Definii regiunile repetabile ale unui model. Aplicaii Dreamweaver 4 workspace, MX workspace Exportai structuri de date n format XML Dreamweaver MX workspace Tem
Dreamweaver MX
Bibliotecile de obiecte
Panoul Assets, o super bibliotec

Dup cum ai putut constata, atunci cnd creai site-uri Web, diverse elemente revin cu regularitate: imagini, culori, animaii, URL-uri etc.
672
Pentru reutilizarea acestor elemente, putei utiliza, desigur, Copy/Paste, dar aceast operaie nu este deloc productiv! Utilizai mai degrab, bibliotecile de obiecte i modelele. Bibliotecile stocheaz acele elemente din pagina dumneavoastr Web: imagini, culori, animaii, URL-uri, texte, tabele, formulare ce urmeaz a fi refolosite n site-ul propriu. Atunci cnd dorii ca un numr mai mare de pagini s aib acelai aspect, fr a mai trebui s construii separat coninutul fiecreia de mai multe ori, utilizai modelele (abloanele).
Remarc. Elementele de bibliotec identific poriuni ale unei pagini, n timp ce un model reprezint o pagin ntreag. Bibliotecile i modelele sunt asemntoare ntruct ambele pot actualiza n mod automat paginile la care se leag.
Dreamweaver propune un panou, panoul Assets, care regrupeaz toate elementele de bibliotec i modelele paginilor.
Deschidei biblioteca de obiecte

Iat care este procedura de deschidere a bibliotecii de obiecte Dreamweaver MX, pe care v invitm s-o aplicai. 1. Executai clic pe Window Assets (figura 14.1).
673
Figura 14.1
Remarc. Se afieaz panoul Assets.
2. n panoul Assets executai clic pe
(Library), figura 14.2.
Figura 14.2
674
Remarc. Dreamweaver MX afieaz elementele bibliotecii (figura 14.3).
Figura 14.3
3. Executai clic pe
(Templates), figura 14.4.
Figura 14.4
Remarc. Dreamweaver MX afieaz modelele paginilor (figura 14.5).
Figura 14.5
675
4. Executai clic pe (Images), figura 14.6.
Figura 14.6 Remarc. Dreamweaver MX afieaz imaginile utilizate n site (figura 14.7).
Figura 14.7
Remarc. Celelalte butoane corespund altor tipuri de elemente utilizate n site: culori ( ); URL-uri ( ); Flash ( ); Shockwave ( );filme ( ); scripturi ( ).
Dreamweaver 4
workspace
Creai un element de bibliotec
Este bine ca toate elementele care se repet de mai multe ori ntr-un site Web copyright-ul, adresele, logo-urile, clauzele de garanie etc. s
676
fie integrate ntr-o bibliotec. Creai un element de bibliotec, salvai-l i apoi aplicai-l oricrei pagini din site-ul propriu. Pentru a crea un element de bibliotec cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Modify Library; Metoda 2 Meniul Window, via Assets. Iat cum procedm pentru a crea n pagina Web lumina.htm elementul de bibliotec 2003 LUMINA BLND. via Library Add Object to
Metoda 1
1. n pagina Web lumina.htm selectai textul 2003 LUMINA BLND, pe care urmeaz s-l definii ca element de bibliotec (figura 14.8).
Figura 14.8
Remarc. nainte de a crea un element de bibliotec trebuie s definii site-ul Web. Dreamweaver creeaz folder-ul Library n care stocheaz elementele de bibliotec.
2. Executai clic pe Modify (figura 14.9).
Library
Add Object to Library
677
Figura 14.9
Remarc. n panoul Assets, subpanoul Library, Dreamweaver creeaz un nou element de bibliotec fr nume (untitled), figura 14.10.
Figura 14.10
678
3. Atribuii elementului de bibliotec, un nume semnificativ: copyright (figura 14.11).
Figura 14.11

Remarc. Noul element de bibliotec, copyright este afiat n galben, numai n pagina Dreamweaver!
5. n pagina dumneavoastr, executai clic pe elementul de bibliotec i vizualizai informaiile n inspectorul de proprieti (figura 14.12).
Figura 14.12
Remarc. Src precizeaz calea de acces i numele elementului de bibliotec utilizat.
679
Figura 14.13
Figura 14.14
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz:
680
2.1 Executai clic pe Window 2.2 Executai clic pe butonul Assets; (Library);
2.3 n meniul local al panoului Assets, alegei opiunea New Library Item.
Dreamweaver MX
workspace
Creai un element de bibliotec
Crearea unui element de bibliotec se realizeaz ntr-o pagin standard. Pentru a crea un element de bibliotec cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Modify, via Library Metoda 2 Meniul Window, via Assets. Iat cum procedm pentru a crea elementul de bibliotec 2003 LUMINA BLND. Add Object to Library;
Metoda 2
1. Selectai n pagina Web (lumina.html) obiectul 2003 LUMINA BLND, pe care urmeaz s-l definii ca element de bibliotec (figura 14.15).
Figura 14.15
681
2. Executai clic pe Window 3. Executai clic pe butonul Assets. (Library), figura 14.16.
Remarc. n fereastra de jos a subpanoului Library se afieaz elementele bibliotecii.
Figura 14.16
4. Creai elementul de bibliotec (fr nume) folosind una din procedurile descrise mai jos: n meniul local al panoului Assets, subpanoul Library ( alegei opiunea New Library Item; executai clic pe butonul (New Library Item); ),
glisai obiectul selectat n fereastra bibliotecii. 5. Atribuii un nume semnificativ, copyright, elementului de bibliotec. 6. Activai tasta Enter. 7. nchidei subpanoul Library. 8. Executai clic n pagina dumneavoastr Web.
682
9. Vizualizai informaiile n panoul Properties (figura 14.17).
Figura 14.17
Remarc. Src indic numele elementului de bibliotec i calea de acces.
Dreamweaver 4
workspace
Inserai un element de bibliotec
n acest moment suntei n msur s inserai elementul de bibliotec pe care l-ai creat n pagina dumneavoastr Web. Iat cum procedai pentru a insera elementul de bibliotec copyright.lbi n pagina Web servicii.htm. 1. Executai clic n zona n care dorii s inserai elementul de bibliotec (figura 14.18).
Figura 14.18
2. n panoul Assets, butonul
(Library), selectai numele
elementului de bibliotec, copyright, pe care dorii s-l inserai.
683
3. Inserai elementul de bibliotec (copyright) folosind una din metodele prezentate mai jos: Metoda 1 n subpanoul Library, executai clic pe butonul Insert. Metoda 2 n meniul local al panoului Assets, subpanoul Library, alegei opiunea Insert; Metoda 3 glisai icon-ul obiectului selectat n document. 4. nchidei subpanoul Library. 5. Analizai codul HTML generat (figura 14.19).
Figura 14.19
Figura 14.20
684
Dreamweaver MX
workspace
Inserai un element de bibliotec
Iat cum procedai pentru a insera elementul de bibliotec copyright.lbi (elementele de bibliotec se creeaz cu extensia .lbi) n pagina dumneavoastr Web (servicii.html). 1. Executai clic n zona n care dorii s inserai elementul de bibliotec (figura 14.21).
Figura 14.21
2. n panoul Assets, butonul (figura 14.22).
(Library) selectai numele
elementului de bibliotec, copyright, pe care dorii s-l inserai
685
Figura 14.22
Remarc. Elementul de bibliotec copyright se afieaz n partea superioar a subpanoului Library.
3. Inserai elementul de bibliotec (copyright) folosind una din metodele prezentate mai jos (figura 14.23): executai clic pe butonul (Insert);
n meniul local al panoului Assets, subpanoul Library, alegei opiunea Insert; glisai icon-ul obiectului selectat n document.
686
Figura 14.23
4. nchidei subpanoul Library.

Remarc. Dreamweaver afieaz elementul de bibliotec n fereastra Document (figura 14.24).
Figura 14.24
687
Figura 14.25
Figura 14.26 Aplicaie Suprimai elementul de bibliotec (copyright) inserat. Iat care este procedura pe care v invitm s-o aplicai: 1. Selectai n pagina Web elementul pe care trebuie s-l suprimai. 2. Acionai tasta Delete.
Remarc. Elementul de bibliotec este eliminat, dar el rmne (totui) n bibliotec.
688
Dreamweaver 4
workspace
Modificai un element de bibliotec. Aplicaii
Interesul de a utiliza elemente de bibliotec const n dinamismul acestora n cazul modificrilor; dac modificai un element de bibliotec atunci toate apariiile acestuia n site sunt actualizate n mod automat. Iat cum procedai pentru a modifica elementul de bibliotec (copyright): 2003 LUMINA BLND n 2004 LUMINA BLND. 1. Activai tasta F8 pentru a afia catalogul site-ului. 2. Deschidei, dac este nevoie, folder-ul Library i apoi executai dublu clic pe fiierul copyright.lbi.
Remarc. Dreamweaver afieaz fereastra elementului de bibliotec, copyright.lbi (figura 14.27).
Figura 14.27
Remarc. Exist mai multe metode pentru afiarea ferestrei <<Library Item>> (copyright.lbi) (vezi Dreamweaver MX workspace).
3. n
fereastra
<<Library
Item>>
[copyright.lbi],
efectuai
modificrile necesare (figura 14.28).
Figura 14.28
689
4. Salvai documentul, via File Save. 5. n caseta de dialog Update Library Items, care se afieaz, Dreamweaver v ntreab: Update library items in these files?. Executai clic pe butonul Update.
Remarc. Dreamweaver afieaz rezultatul actualizrii (figura 14.29).
Figura 14.29 Aplicaii Detaai elementul de bibliotec copyright de original. Indicaie. Vedei paragraful Aplicaii Dreamweaver MX workspace. Redenumii elementul de bibliotec copyright n dreptautor. Indicaie. Vedei paragraful: Aplicai Dreamweaver MX workspace. tergei elementul de bibliotec dreptautor. Indicaie. Vedei paragraful: Aplicaii Dreamweaver MX workspace.
690
Dreamweaver MX
workspace
Modificai un element de bibliotec. Aplicaii
Iat cum procedai pentru a modifica elementul de bibliotec (copyright): 2003 LUMINA BLND n 2004 LUMINA BLND. 1. Activai tasta F8 pentru a afia catalogul site-ului. 2. Deschidei, dac este nevoie, folder-ul Library i apoi executai dublu clic pe fiierul copyright.lbi (figura 14.30).
Figura 14.30
3. Executai dublu clic pe fiierul elementului de bibliotec copyright.lbi.
sau,
3. Selectai elementul de bibliotec copyright.lbi n panoul Assets, categoria (Library), apoi executai clic pe butonul (Edit).
sau,
3. Deschidei meniul local al panoului Assets opiunea Edit. , apoi selectai
691
sau,
3. Selectai elementul de bibliotec (copyright.lbi) folosit n document, iar apoi n panoul Properties, executai clic pe butonul Open (figura 14.31).
Figura 14.31
Remarc. Dreamweaver deschide fereastra elementului de bibliotec. Atenie la bara de titlu!
4. n
fereastra
<<Library
Item>>
[copyright.lbi],
efectuai
modificrile necesare (figura 14.32).
Figura 14.32
5. Executai clic pe File
Save.
Remarc. Se afieaz caseta de dialog Update Library Items. Dreamweaver v ntreab dac dorii s actualizai fiierele care utilizeaz acest element de bibliotec (figura 14.33).
6. n caseta de dialog Update Library Items, executai clic pe butonul Update (figura 14.33).
Figura 14.33
692
Remarc. Dreamweaver afieaz rezultatul actualizrii n caseta de dialog ilustrat n figura 14.34.
Figura 14.34 Aplicaii Detaai un element de bibliotec copyright, de original. Iat care este procedura pe care v invitm s-o aplicai pentru a suprima legtura cu elementul de bibliotec (copyright). 1. Selectai elementul de bibliotec, copyright, care urmeaz a fi detaat de original. 2. n panoul Properties, executai clic pe butonul Detach from original (figura 14.35).
Figura 14.35
Remarc. Se afieaz caseta de dialog Macromedia Dreamweaver.
3. n caseta de dialog Macromedia Dreamweaver, executai clic pe butonul OK.

Remarc. Textul 2003 LUMINA BLND nu mai constituie un element de bibliotec, nu se mai afieaz n galben i este editabil.
693
4. Vizualizai pagina Web ntr-un browser. Actualizai paginile Web folosind elemente de bibliotec. Putei modifica elementul de bibliotec (copyright, n exemplul nostru) fr a fora actualizarea documentelor care conin acest element, dac executai clic pe butonul Dont Update cnd salvai modificrile. n acest caz, va trebui s actualizai singuri paginile care utilizeaz elementul de bibliotec. Iat care este procedura pe care v invitm s-o aplicai. 1. Deschidei o pagin care utilizeaz elementul de bibliotec. 2. Executai clic pe Modify Pages.
Remarc. Dreamweaver afieaz caseta de dialog Update Pages.
Library
Update Curent Page/ Update
3. n caseta de dialog Update Pages, n meniul derulant Look in, selectai (figura 14.36): Entire Site pentru a actualiza toate paginile site-ului dumneavoastr i toate elementele de bibliotec. Files That Use pentru a actualiza toate paginile site-ului dumneavoastr, care utilizeaz un element de bibliotec (se gsete n meniul derulant din dreapta).
Figura 14.36 4. n caseta de dialog Update Pages, lsai activate opiunile Library Items i Show Log. 5. n caseta de dialog Update Pages, executai clic pe butonul Start iar apoi pe butonul Close.
694
Redenumii elementul de bibliotec copyright n dreptautor. Iat care este procedura pe care v invitm s-o aplicai n cele ce urmeaz. 1. n panoul Assets, categoria Library, executai clic pe elementul pe care dorii s-l redenumii (copyright). 2. Deschidei meniul local ( ), apoi executai clic pe Rename.
sau,
2. Executai clic pe numele elementului (este selectat zona numelui). 3. Introducei noul nume, dreptautor, iar apoi acionai tasta Enter.
Remarc. Dreamweaver v ntreab: Update links in the following files?.
4. n caseta de dialog Update Files, executai clic pe Update sau pe Dont Update (figura 14.37).
Figura 14.37 tergei elementul de bibliotec dreptautor. 1. Selectai elementul de bibliotec dreptautor, n categoria Library din panoul Assets. 2. Deschidei meniul local , apoi executai clic pe Delete.
sau,
2. Executai clic pe butonul (Delete).
sau,
695
2. Executai un clic cu butonul dreapta al mouse-ului pe elementul de bibliotec dreptautor, apoi alegei Delete. 3. n caseta de dialog Macromedia Dreamweaver, executai clic pe butonul Yes pentru a confirma tergerea elementului de bibliotec (figura 14.38).
Figura 14.38 Recreai un element de bibliotec, dac din greeal l-ai ters. Iat care este procedura pe care v invitm s-o aplicai. 1. Selectai n documentul Dreamweaver elementul de bibliotec suprimat. 2. n panoul Properties, executai clic pe butonul Recreate (figura 14.39).
Figura 14.39
Remarc. n mod automat, elementul reprimete numele care i fusese atribuit i i reia locul n bibliotec.
Dreamweaver 4
workspace
Creai un model de pagin
Un model de pagin difer de un element de bibliotec prin aceea c modelul reprezint o ntreag pagin Web i nu doar o poriune a acesteia.
696
Putei defini o formatare aplicat unei pagini ntregi ca model pentru a ctiga timp n momentul crerii paginilor din site-ul propriu. Putei construi un model de la zero sau salva o pagin existent ca model. Modelul poate fi folosit i de alte persoane care lucreaz n aceeai echip cu dumneavoastr; de asemenea, dumneavoastr putei folosi modelele create de alii. Pentru a crea un model de pagin cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul File, via Save As Template; Metoda 2 Panoul Insert. Iat cum procedm pentru a crea modelul din figura 14.40 care conine elementul de bibliotec 2003 LUMINA BLND.
Figura 14.40
Metoda 1
1. Creai pagina Web care v va servi ca model (figura 14.40), sau deschidei o pagin deja creat care v va servi ca model. 2. Executai clic pe File Save As Template... (figura 14.41).
697
Figura 14.41
Remarc. Se deschide caseta de dialog Save As Template.
3. n caseta de dialog Save As Template (figura 14.42), executai urmtoarele aciuni: n zona Site selectai n meniul derulant, site-ul n care dorii s salvai modelul de pagin. n zona Save As introducei numele modelului, identitate; executai clic pe butonul Save.
698
Figura 14.42
Assets. (Templates).
5. n panoul Assets, executai clic pe butonul 6. Analizai codul HTML generat (figura 14.43).
Figura 14.43
Metoda 2
Se modific pasul 2 (Metoda 1) dup cum urmeaz.
699
2. n panoul Insert, subpanoul Templates, executai clic pe icon-ul (Make Template), figura 14.44.
Figura 14.44
Dreamweaver MX
workspace
Creai un model de pagin
Dac utilizai tot timpul acelai tip de pagin n site-ul dumneavoastr, ncepei prin a crea un model care va servi ca baz pentru noile pagini Web. Pentru a crea un model de pagin cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul File, via Save As Template; Metoda 2 Grupul de panouri Insert, via subpanoul Templates icon-ul (Make Template).
Iat cum procedm pentru a crea modelul de pagin din figura 14.45, care conine elementul de bibliotec 2003 LUMINA BLND.
700
Figura 14.45
Metoda 2
1. Creai pagina Web care v va servi ca model (figura 14.46), sau deschidei o pagin deja creat care v va servi ca model. 2. n grupul de panouri Insert, subpanoul Templates, executai clic pe icon-ul (Make Template), figura 14.46.
Figura 14.46
701
Remarc. Se deschide caseta de dialog Save As Template.
3. n caseta de dialog Save As Template, executai aciunile ilustrate n figura 14.47.
Figura 14.47
4. Afiai panoul Assets. 5. n panoul Assets, executai clic pe butonul figura 14.48. (Templates),
Figura 14.48
Remarci: Analizai cele dou ferestre ale subpanoului Templates. Reinei extensia .dwt (identitate.dwt) pentru Dreamweaver template.
702
Figura 14.49 Aplicaie Afiai folder-ul modelelor. Indicaie. Acionai tasta F8. Deschidei, dac este cazul folder-ul Templates, creat de Dreamweaver (figura 14.50).
Figura 14.50
703
Dreamweaver 4
workspace
Definii regiunile editabile ale unui model
n mod prestabilit, elementele unei pagini care se bazeaz pe un model (de pagin) nu sunt editabile. Dumneavoastr v revine sarcina de a defini regiunile (zonele) editabile, care variaz de la o pagin la alta. Pentru a crea regiunile editabile ale unui model, cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Template Objects Region; Metoda 2 Panoul Insert. Iat cum definim n modelul identitate.dwt, trei zone editabile: Nume, Prenume, Funcia. 1. n panoul Assets, executai clic pe categoria (Templates). Editable
2. Executai dublu clic pe identitate (numele modelului), pentru a-l deschide. 3. Selectai prima zon editabil: Nume. 4. Executai clic pe Insert (figura 14.51). Template Objects Editable Region
704
Figura 14.51
Remarc. Se afieaz caseta New Editable Region.
5. n caseta de dialog New Editable Region, n zona Name introducei numele primei zone editabile: Nume angajat, iar apoi executai clic pe butonul OK. 6. Repetai paii 3, 4, 5 pentru a defini celelalte regiuni editabile: Prenume angajat, Funcie angajat (figura 14.52).
Figura 14.52
7. Salvai modelul.
705
Figura 14.53
Figura 14.54
706
Metoda 2
Se modific pasul 4 (Metoda 1), dup cum urmeaz: 4. n panoul Insert, categoria Templates, executai clic pe icon-ul (Editable Region), figura 14.55.
Figura 14.55
Dreamweaver MX Definii regiunile editabile ale unui

workspace
model. Aplicaii
Pentru a crea regiunile editabile ale unui model, cu Dreamweaver MX workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Template Objects Region; Metoda 2 Grupul de panouri Insert, subpanoul Templates icon-ul (Editable Region). Editable
Iat cum definim n modelul identitate1.dwt, trei zone editabile: Nume, Prenume, Funcia.
Metoda 2
1. n panoul Assets, executai clic pe categoria (Templates).
707
2. n panoul Assets, categoria Templates, executai dublu clic pe identitate1 (numele modelului), pentru a-l deschide. 3. Selectai prima zon editabil: Nume (figura 14.56).
Figura 14.56
4. n grupul de panouri Insert, subpanoul Templates, executai clic pe icon-ul (Editable Region) (figura 14.57).
Figura 14.57
Remarc. Se afieaz caseta New Editable Region.
708
5. n caseta de dialog New Editable Region, executai urmtoarele aciuni (figura 14.58): n zona Name introducei numele primei zone editabile: Nume angajat; executai clic pe butonul OK.
Figura 14.58
Remarc. Dreamweaver MX workspace adaug modelului o regiune editabil. O caset bleu indic numele su Nume angajat (figura 14.59).
Figura 14.59
6. Repetai paii 3, 4, 5 pentru a defini celelalte regiuni editabile (figura 14.60).
709
Figura 14.60
7. Salvai modelul (CTRL+S sau, File
Save).
Figura 14.61
710
Figura 14.62 Aplicaii Suprimai o zon editabil (Nume). Indicaie. Utilizai meniul Modify, via Templates. Creai un document pornind de la un model (identitate1.dwt). Iat care este procedura pe care v invitm s-o aplicai. 1. Executai clic pe File New.
2. n subpanoul Templates, executai urmtoarele aciuni (figura 14.63): n zona Templates For: selectai site-ul care conine modelul identitate1.dwt;
activai opiunea Update Page when

Template Changes;
executai clic pe butonul Create.
711
Figura 14.63
Introducei documentului.
informaiile
corespunztoare
regiunile
editabile
ale
Pentru a introduce informaiile n regiunile editabile ale unui document, folosii una din metodele prezentate mai jos: Metoda 1 Selectai sau executai clic n zona editabil, apoi introducei informaiile respective (figura 14.64); Metoda 2 Executai clic pe numele regiunii editabile n meniul Modify Templates, apoi introducei informaiile respective.
Remarci: Dac ncercai s introducei text ntr-o zon non editabil, vei avea parte de un semnal sonor! Save). La finele aciunii, salvai documentul (File
712
Figura 14.64 Aplicai un model (identitate1.dwt) unei pagini Web. Iat care este procedura pe care v invitm s-o aplicai. 1. n subpanoul Assets, executai clic pe categoria figura 14.65. 2. n zona Name, n lista de modele afiat, selectai identitate1, apoi executai clic pe butonul Apply (figura 14.65). (Templates),
Figura 14.65
713
sau,
2. Deschidei meniul local , apoi alegei Apply;
sau,
2. Deplasai icon-ul modelului (identitate1) n pagina Web.
Remarc. Dac documentul nu este vid (gol!), Dreamweaver v ntreab unde s plaseze elementele prezentate (figura 14.66).
Figura 14.66 3. n lista regiunilor editabile, selectai-le pe cele corespunztoare, apoi executai clic pe butonul OK (figura 14.67).
Figura 14.67
714
Modificai modelul identitate1 dup cum urmeaz: adugai a patra zon editabil, E-MAIL. Iat care este procedura pe care v invitm s-o aplicai. 1. n subpanoul Templates, categoria (Templates), selectai modelul (Edit).
identitate1, apoi executai clic pe butonul
sau,
1. Deschidei meniul local ( ), apoi executai clic pe Edit;
sau,
1. Executai dublu clic pe icon-ul modelului identitate1;
sau,
1. Executai clic pe Window Site, deschidei folder-ul Templates i
executai dublu clic pe identitate1.dwt. 2. Adugai zona editabil E-Mail (figura 14.68).
Figura 14.68 3. Salvai fiierul (File Save).
Remarc. Dreamweaver v ntreab dac dorii s actualizai toate documentele care au la baz acest model (figura 14.69).
715
Figura 14.69 4. n caseta de dialog Update Template File executai clic pe butonul Update.
Remarc. Dreamweaver afieaz jurnalul rezultatelor (figura 14.70).
Figura 14.70
Dreamweaver MX
workspace
ntr-un model, o
Utilizai regiunile facultative ale unui model

regiune facultativ este regiunea pe care
dumneavoastr o putei programa astfel nct ea s apar sau nu ntr-un
716
document bazat pe acest model. Aceste criterii pot depinde de valoarea (true sau false) unei variabile booleene sau de valoarea variabilei language (f,a etc.). Pentru a crea regiunile facultative ntr-un model, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Template Objects Region; Metoda 2 Grupul de panouri Insert. Optional
Creai regiuni facultative

Iat cum procedai pentru a insera imaginea sigla.jpg, ntr-o regiune facultativ imagine, a modelului identitate1.dwt.
Metoda 2
1. n grupul de panouri Insert, subpanoul Templates, executai clic pe icon-ul
Figura 14.71
(Optional Region), figura 14.71.
Remarc. Dreamweaver afieaz caseta de dialog New Optional Region.
2. n caseta de dialog New Optional Region, categoria Basic, executai urmtoarele aciuni (figura 14.72): n zona Name introducei numele regiunii facultative, imagine. executai clic pe butonul OK.
717
Figura 14.72
Remarc. Dac alegei opiuni Show by Default, imaginea acestei regiuni facultative va fi afiat implicit n documentul creat avnd la baz acest model. n caz contrar, utilizatorul modelului va modifica parametrul (true, pentru a afia aceast regiune facultativ).
3. Inserai o imagine, sigla.jpg n aceast regiune editabil (figura 14.73).
Figura 14.73
718
4. Pentru a modifica parametrii regiunii facultative, selectai imaginea i utilizai butonul Edit din panoul Properties (figura 14.74).
Figura 14.74
Figura 14.75
Figura 14.76
719
Utilizai un model cu regiuni facultative
Iat care este procedura pe care v invitm s-o aplicai. 1. Executai clic pe File Site Web New Templates Templates For:
modelul identitate1.
2. Executai clic pe butonul Create.

Remarc. Dumneavoastr nu vedei imaginea n cazul n care nu ai activat opiunea Show by Default. Valoarea parametrului este deci false.
3. Afiai codul surs XHTML generat (figura 14.77).
Figura 14.77
Remarc. n codul surs XHTML, value=false.
4. Executai clic pe Modify
Template Properties.
Remarc. Se afieaz caseta de dialog Template Properties.
5. n caseta de dialog Template Properties, executai urmtoarele aciuni (figura 14.78): selectai linia care corespunde numelui regiunii facultative imagine (valoarea parametrului devine true); activai opiunea Show imagine; executai clic pe butonul OK.
720
Figura 14.78
6. Afiai codul surs XHTML generat (14.79).
Figura 14.79
Figura 14.80
721
Creai un model cu regiuni facultative multiple
Vom completa n cele ce urmeaz modelul Agenda.dwt (vezi paragraful: Dreamweaver MX workspace Exportai structuri de date n format XML). Iat cum procedai pentru a afia numele documentului: Address Book sau Carnet adressos, n funcie de parametrul limba: A (englez) sau E (spaniol). 1. Afiai codul surs al modelului. 2. n zona <head> a documentului, introducei codul parametrului <!TemplateParam name=limba type=text value=F-->. 3. n locul dorit n document, introducei codul listat mai jos (figura 14.81).
Figura 14.81
722
Remarc. Pentru fiecare limb (cond=limba==F) se indic textul care dorim s fie afiat, ntre TemplateBeginIfClause i TemplateEndIfClause.
4. Afiai pagina n mod Show Design View (figura 14.82).
Figura 14.82
5. Creai un nou document avnd la baz acest model.
Figura 14.83
6. Executai clic pe Modify
Template Properties.
7. n caseta de dialog Template Properties, executai urmtoarele aciuni (figura 14.84): pentru parametrul imagine alegei true sau false;
723
pentru parametrul limba, n cmpul language introducei A (una din valorile A/F); executai clic pe butonul OK.
Figura 14.84
Figura 14.85
724
Dreamweaver MX
workspace
Definii regiunile repetabile ale unui model. Aplicaii
Dac o regiune trebuie s fie repetat de mai multe ori n cadrul unei pagini care are la baz un model, va trebui s precizai acest lucru n zona de creare a modelului. Pentru a crea regiunile repetabile ale unui model, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Template Objects Region; Metoda 2 Grupul de panouri Insert, subpanoul Templates. Repeating
Creai o regiune repetabil, non editabil

Iat cum procedai pentru a crea n cadrul unui model, o regiune care se repet, non editabil, E-Mail.
Metoda 2
1. Deschidei modelul identitate1.dwt. 2. Selectai zona repetabil, E-Mail (figura 14.86).
Figura 14.86
725
3. n grupul de panouri Insert, subpanoul Templates, executai clic pe icon-ul (Repeating Region), figura 14.87.
Figura 14.87
Remarc. Se deschide caseta de dialog New Repeating Region.
4. n
caseta
de
dialog
New
Repeating
Region,
executai
urmtoarele aciuni (figura 14.88): n zona Name introducei numele regiunii repetabile, E-Mail angajat; executai clic pe butonul OK.
Figura 14.88
Remarc. Dreamweaver adaug modelului o regiune care se repet, Repeat: E-Mail angajat (figura 14.89).
Figura 14.89
5. Salvai documentul.
726
Creai o regiune repetabil, editabil
Iat cum procedai pentru a crea n cadrul unui model o regiune care se repet, editabil Funcia angajat.
Metoda 1
1. Executai clic pe subpanoul bleu, Funcie angajat (figura 14.90).
Figura 14.90
2. Executai clic pe Insert Region (figura 14.91).
Template Objects
Repeating
Figura 14.91
727
Remarc. Se deschide caseta de dialog New Repeating Region.
3. n
caseta
de
dialog
New
Repeating
Region,
executai
urmtoarele aciuni (figura 14.92): n zona Name introducei numele regiunii repetabile, Funcia angajat; executai clic pe butonul OK.
Figura 14.92
Remarc. Dreamweaver adaug modelului o regiune care se repet, Repeat: Funcia angajat care nglobeaz regiunea editabil Funcia (figura 14.93).
Figura 14.93
4. Salvai documentul.
Utilizai modelul
Iat cum procedai pentru a utiliza modelul pe care l-ai creat n aplicaia precedent. 1. Creai un nou document bazat pe acest model.
728
2. Introducei primele date (figura 14.94).
Figura 14.94
3. Utilizai butoanele regiunile:
pentru a aduga sau suprima i permit modificarea
(Butoanele
secvenei de introducere a datelor), figura 14.95.
Figura 14.95
729
Figura 14.96
Figura 14.97
730
Aplicaii Creai un tabel (figura 14.98) care se repet. CURSURI DE INFORMATIC Denumire curs Utilizare PC-uri Tehnologii Internet Figura 14.98 Autocad Durata (n ore) 50 60 50 Costuri (n $) 60 90 70
Iat care este procedura pe care v invitm s-o aplicai. 1. Creai un nou model. 2. Executai clic n locul n care dorii s figureze tabelul. 3. n grupul de panouri Insert, subpanoul Templates, executai clic pe icon-ul (Repeating Table), figura 14.99.
Figura 14.99
Remarc. Dreamweaver afieaz caseta de dialog Insert Repeating Table.
sau,
3. Executai clic pe meniul Insert Table. 4. n caseta de dialog Insert Repeating Table, executai urmtoarele aciuni (14.100): n zonele Rows, Columns introducei numrul de linii (4) i numrul de coloane (3); n zona width cmpul Ending Row n zona Region Name introducei valoarea 75%; introducei valorile 2 respectiv 3; introducei date; n zona Repeat rows of the table, n cmpul Starting Row i n Template Objects Repeating
731
Figura 14.100
Remarci: Primele opiuni sunt identice cu cele ale unui tabel clasic. Tabelul este inserat n model.
Utilizai modelul. Iat cum procedai pentru a utiliza modelul pe care l-ai creat n aplicaia precedent. 1. Creai un document bazat pe acest model. 2. Utilizai butoanele butoanele i i pentru a aduga sau suprima regiunile i
pentru a le sorta (vezi utilizarea acelorai butoane
pentru regiunile care se repet n cadrul unui model), figura 14.101.
Figura 14.101
732
Creai un model imbricat imbricai o regiune editabil (Autor) ntr-o regiune editabil existent (Titlu). Iat care este procedura pe care v invitm s-o aplicai. 1. Creai un document care are la baz un model (carte.dwt). 2. Selectai textul regiunii editabile (Titlu) i inserai o regiune editabil, numit Autor (figura 14.102).
Figura 14.102
Remarci: Regiunea editabil (Titlu) a modelului de baz este colorat n bleu. Putei crea mai multe modele imbricate pornind de la un model de baz.
Dreamweaver 4
workspace
Exportai structuri de date n format XML
ntruct n cadrul unui model, fiecare regiune editabil este unic i perfect identificat, putei utiliza numele acestor regiuni pentru a genera tag-uri XML (eXtensible Markup Language; vezi lucrarea L. Dumitracu, Limbajul XML, Editura Universitii din Ploieti, 2003) n vederea exportului (importului) de date structurate.
733
Iat cum procedm pentru a crea cu Dreamweaver 4 workspace un model Agenda.dwt pe care apoi l exportm n format XML. 1. Creai un nou document. 2. Inserai un tabel cu 5 linii i 4 coloane, n care prima linie conine numele cmpurilor: Titlu tiinific, Nume, Prenume, E-mail. 3. Salvai tabelul ca model, Agenda.dwt. 4. Creai regiuni editabile, cu urmtoarele denumiri: {t1}, {t4} pentru titlul tiinific; {n1}, , {n4} pentru nume; {p1}, , {p4} pentru prenume; {em1}, , {em4} pentru e-mail. 5. Salvai modelul. 6. Creai un nou document avnd la baz modelul creat, apoi introducei datele (figura 14.103).
Figura 14.103
7. Salvai documentul sub numele agendapers. 8. Executai clic pe File Export Template Data as XML.
734
9. n caseta de dialog Export Template Data as XML executai urmtoarele aciuni (figura 14.104): n zona Notation alegei opiunea Use Editable Region Names as XML tags (vezi modul de afiare al tag-urilor XML, n zona Sample). executai clic pe butonul OK.
Figura 14.104
10. Numii documentul XML agendapers, apoi deschidei acest document agendapers.xml. 11. Afiai codul surs XML generat (figura 14.105).
Figura 14.105
735
Dreamweaver MX
workspace
Exportai structuri de date n format XML
XML (eXtensible Markup Language) este cel mai nou limbaj dezvoltat de consoriul W3C. n viitor, XML-ul va reprezenta cu siguran instrumentul standard pentru descrierea, manipularea i transmisia datelor (vezi lucrarea L. Dumitracu, Limbajul XML, Editura Universitii din Ploieti, 2003). Iat cum procedm pentru a crea un model Agenda.dwt pe care apoi l exportm n format XML. 1. Creai un nou document. 2. Inserai un tabel cu 5 linii i 4 coloane; prima linie conine numele cmpurilor: Titlu tiinific, Nume, Prenume, E-mail (figura 14.106).
Figura 14.106
3. Salvai tabelul ca model, sub numele agenda.dwt.
736
4. Creai regiuni editabile, cu urmtoarele denumiri (figura 14.107): t pentru titlul tiinific; n pentru nume; p pentru prenume; em pentru e-mail.
Figura 14.107
5. Salvai modelul. 6. Creai un nou document avnd la baz modelul creat, iar apoi introducei datele (figura 14.108).
Figura 14.108
737
7. Salvai documentul sub numele agendapers. 8. Executai clic pe File 14.109). Export Template Data as XML (figura
Figura 14.109
Remarc. Se afieaz caseta de dialog Export Template Data as XML.
9. n caseta de dialog Export Template Data as XML, executai urmtoarele aciuni (figura 14.110): n zona Notation activai butonul radio Use Standard Dreamweaver XML tags (vezi modul de afiare al tag-urilor XML, n zona Sample); executai clic pe butonul OK.
738
Figura 14.110
Remarci: Prima opiune afieaz un tag sub forma: <item name=t1> - </item>. A doua opiune afieaz un tag sub forma: <t1> - </t1>.
10. n caseta de dialog Export Template Data as XML, numii documentul XML: agendapers iar apoi deschidei acest document agendapers.xml. 11. Afiai codul surs XML generat (figura 14.111).
Figura 14.111
739
Aplicaie Importai un document XML ntr-un model cu condiia ca ele s aib aceeai structur.
Remarc. Trebuie s existe o perfect concordan ntre numele tag-urilor XML i numrul de nregistrri, ceea ce limiteaz puin importurile.
740
Dreamweaver MX
Testai-v cunotinele
Tem
1. Precizai care este deosebirea dintre elementele de bibliotec i modele. 2. Care sunt butoanele din panoul Assets? 3. Descriei pe scurt o metod de creare a unui element de bibliotec cu Dreamweaver 4 workspace. 4. Descriei pe scurt o metod de creare a unui model de pagin, cu Dreamweaver MX. 5. Cum definii regiunile editabile ale unui model? 6. Descriei metodele de creare a regiunilor facultative ntr-un model, cu Dreamweaver MX workspace. 7. Cum procedai pentru a exporta structuri de date n format XML?
Vizitai site-urile
www.microsoft.com/FRANCE/ssafe www.ics.uci.edu/pub/ietf
Conversaia 15
Creai comportamente cu Dreamweaver MX

Dreamweaver MX workspace - Comportamente Dreamweaver Dreamweaver 4 workspace, MX workspace Creai comportamentul Open Browser Window Dreamweaver 4 workspace, MX workspace Creai comportamentul Swap Image Dreamweaver 4 workspace, MX workspace Creai comportamentul Set Text of Status Bar. Aplicaie Dreamweaver 4 workspace, MX workspace Creai comportamentul Validate Form. Aplicaii Dreamweaver 4 workspace, MX workspace Creai comportamentul Set Text of Layer. Aplicaii Dreamweaver 4 workspace, MX workspace Creai comportamentul Set Text of Frame Dreamweaver MX - Tem
Dreamweaver MX
workspace
Comportamente Dreamweaver
Creai un comportament
Inserarea unui comportament (behavior, n limba englez) n paginile dumneavoastr Web are ca efect creterea interactivitii cu vizitatorii.
742
Un comportament are ecuaia:
Comportament=eveniment + aciune.
n general, evenimentul reprezint o aciune a utilizatorului cu mouse-ul:
evenimentul onMouseOver se declaneaz atunci cnd vizitatorul plaseaz mouse-ul deasupra unui obiect; evenimentul onMouseDown se declaneaz atunci cnd vizitatorul apas pe butonul mouse-ului; evenimentul onMouseUp se declaneaz atunci cnd vizitatorul elibereaz butonul mouse-ului; evenimentul onClick se declaneaz atunci cnd vizitatorul execut clic cu mouse-ul; evenimentul onDblClick se declaneaz atunci cnd vizitatorul execut dublu clic.
Aciunea este generat de Java Script i permite o schimbare n pagina

dumneavoastr (substituirea unei imagini cu o alt imagine, afiarea unui mesaj n bara de stare a navigatorului, nlocuirea coninutului unui strat/cadru cu un text i cu o alt imagine) sau o aciune programat (verificarea unui calcul ntr-un cmp al formularului etc.). n concluzie, pentru a defini un comportament trebuie s precizai: obiectul din pagin, aciunea i evenimentul.
Remarci: De regul, interactivitatea necesit cunotine de programare n Java Script! Dac utilizai Dreamweaver, nu este nevoie de script-are pentru a folosi comportamentele! Dreamweaver genereaz, n locul dumneavoastr, liniile de program Java Script. Comportamentele Dreamweaver (Open Browser Window, Swap Image, Set Text of Status Bar, Set Text of Text Field, Set Text of Layer, Set Text of Frame, Validate Form etc.) funcioneaz att n Internet Explorer (versiunea 4.0 sau superior), ct i n Netscape.
743
Alegei navigatorul
Nu toate navigatoarele accept n totalitate comportamentele Dreamweaver. n consecin, este bine s precizai navigatorul pe care l vei utiliza pentru a limita lista comportamentelor disponibile. Iat care este procedura pe care v invitm s-o aplicai pentru a alege navigatorul corespunztor. 1. n panoul Behaviors, executai clic pe butonul Events For (figura 15.1). Show
Figura 15.1
2. Executai clic pe navigatorul cu care vei lucra (figura 15.2).
744
Figura 15.2
3. Alegei comportamentul corespunztor (figura 15.3).
Figura 15.3
Remarc. Am selectat comportamentul (aciunea) Open Browser Window.
4. Alegei evenimentul care declaneaz aciunea (figura 15.4).
745
Figura 15.4
Remarc. Am selectat evenimentul onClick.
Dreamweaver 4
workspace
Creai comportamentul Open Browser Window
Comportamentul Open Browser Window din Dreamweaver permite deschiderea unei pagini ntr-o fereastr pe care o putei personaliza. Acest comportament este ideal pentru activitatea de marketing, publicitate etc. Iat cum procedm pentru a crea comportamentul Open Browser Window, n care obiectul din pagin este imaginea sigla.jpg (figura 15.5), iar evenimentul care va declana aciunea (deschidei o pagin ntr-o nou fereastr a browser-ului) este onClick.
Remarc. Pentru a defini un comportament trebuie s precizai urmtoarele trei elemente: obiectul din pagin; aciunea de efectuat; evenimentul care va declana aciunea.
746
1. Selectai imaginea (figura 15.5), care reprezint obiectul din pagin.
Figura 15.5
2. Deschidei panoul Behaviors via Window
Behaviors;
sau,
2. Panoul Launcher clic pe butonul (Behaviors). Open
3. n panoul Behaviors, executai clic pe butonul Browser Window.
4. n caseta de dialog Open Browser Window completai zonele afiate, ca n figura 15.6.
Figura 15.6
747
5. n caseta de dialog Open Browser Window executai clic pe butonul OK. 6. n panoul Behaviors, n meniul derulant (Events), selectai evenimentul onClick.
Remarc. n panoul Behaviors, se afieaz evenimentul onClick i comportamentul Open Browser Window.
7. Analizai codul HTML (Java Script) generat. 8. Vizualizai pagina Web ntr-un browser (figura 15.7).
Figura 15.7
9. Testai comportamentul Open Browser Window (figura 15.8).
Figura 15.8
Remarc. Executai clic deasupra imaginii. Pagina servicii.htm se deschide ntr-o nou fereastr a browser-ului.
748
Dreamweaver MX
workspace
Creai comportamentul Open Browser Window
Iat cum procedm pentru a crea comportamentul Open Browser Window cu Dreamweaver MX workspace. Obiectul din pagin este sigla.jpg, iar evenimentul care va declana aciunea (deschide o fereastr a browser-ului) este onClick. 1. Selectai imaginea (figura 15.9).
Figura 15.9
Remarc. Pentru a ataa un comportament ntregii pagini, executai clic pe tag-ul <body> care se afieaz n colul din stnga al ferestrei Dreamweaver (vezi bara de stare).
Behaviors.
sau,
2. Panoul Launcher 15.10.
Remarc. Se afieaz panoul Behaviors.
clic pe butonul
(Behaviors), figura
749
Figura 15.10
3. n panoul Behaviors, executai clic pe butonul Browser Window (figura 15.11).
Open
Figura 15.11
Remarc. Dreamweaver MX workspace afieaz caseta de dialog Open Browser Window.
750
4. n caseta de dialog Open Browser Window, completai zonele: URL to Display, Window Width, Window Height, Window Name, activai opiunile (Meniu Bar, Status Bar) ca n figura 15.12.
Figura 15.12
5. n caseta de dialog Open Browser Window, executai clic pe butonul OK. 6. n panoul Behaviors, n meniul derulant Events ( evenimentul onClick (figura 15.13). ), selectai
Figura 15.13
751
Remarc. n panoul Behaviors, se afieaz evenimentul onClick i comportamentul Open Browser Window (figura 15.14).
Figura 15.14
7. Analizai codul XHTML (Java Script) generat (15.15).
Figura 15.15
Remarc. Este important s vizualizai codul Java Script pe care Dreamweaver MX workspace l-a generat. Dac nu cunoatei Java Script, acum avei ocazia s ncepei s nelegei . O lume ntreag nelegea .
752
8. Salvai documentul iar apoi afiai pagina ntr-un browser (figura 15.16).
Figura 15.16
9. Testai comportamentul (Open Browser Window) executnd clic deasupra imaginii (figura 15.17).
Figura 15.17
Remarc. Pagina servicii.htm se deschide ntr-o nou fereastr a browser-ului.
Dreamweaver 4
workspace
Creai comportamentul Swap Image
Comportamentul Swap Image din Dreamweaver v permite s nlocuii o imagine cu alt imagine, n timpul evenimentelor: onMouseOver, onClick etc.
753
Iat cum procedm pentru a crea comportamentul Swap Image, n care obiectul din pagin este imaginea autumn.jpg pe care o vom substitui cu imaginea azul.jpg, iar evenimentul care va declana aciunea (nlocuii o imagine cu alt imagine) este onMouseOver. 1. Inserai imaginea autumn.jpg n documentul Dreamweaver 4 workspace i selectai-o (figura 15.18).
Figura 15.18
2. n panoul Properties, introducei numele imaginii (buton2). 3. Deschidei panoul Behaviors. 4. n panoul Behaviors, executai clic pe butonul Image. 5. n caseta de dialog Swap Image, care se afieaz, executai urmtoarele aciuni: n zona Images selectai image buton2; Swap
n zona Set Source to introducei calea de acces a imaginii; activai opiunile Preload Images i Restore Images onMouseOut; executai clic pe butonul OK.
754
6. Analizai codul HTML (Java Script) generat (figura 15.19).
Figura 15.19
7. Vizualizai pagina Web ntr-un browser. 8. Testai rollover-ul, trecnd mouse-ul pe deasupra imaginii (figura 15.20).
755
Figura 15.20
Dreamweaver MX
workspace
Creai comportamentul Swap Image
Folosii Dreamweaver MX workspace pentru a crea comportamentul Swap Image. Iat cum procedm pentru a crea comportamentul Swap Image, n care obiectul din pagin este imaginea autumn.jpg pe care o vom nlocui cu imaginea azul.jpg, iar evenimentul care va declana aciunea (Swap Image) este onMouseOver. 1. Inserai imaginea autumn.jpg n documentul Dreamweaver MX workspace i selectai-o. 2. n panoul Properties, introducei numele imaginii, buton2, pentru a putea fi referit de ctre script-ul comportamentului (figura 15.21).
756
Figura 15.21
3. Deschidei panoul Behaviors. 4. n panoul Behaviors, executai clic pe butonul , iar n meniul
derulant, selectai comportamentul Swap Image (figura 15.22).
Figura 15.22
757
Remarc. Se afieaz caseta de dialog Swap Image.
5. n caseta de dialog Swap Image, care se afieaz, executai urmtoarele aciuni (figura 15.23): n zona Images selectai numele imaginii pe care dorii s-o substituii; n zona Set Source to introducei calea de acces a imaginii sau, executai clic pe butonul Browse i selectai imaginea de substituie azul.jpg; activai opiunile Preload Images i Restore Images onMouseOut; executai clic pe butonul OK.
Figura 15.23
6. Analizai codul HTML (Java Script) generat (figura 15.24).
758
Figura 15.24
7. Vizualizai pagina Web ntr-un browser. 8. Testai rollover-ul, trecnd mouse-ul pe deasupra imaginii (figura 15.25).
759
Figura 15.25
Dreamweaver 4
workspace
Creai comportamentul Set Text of Status Bar
Comportamentul Set Text of Status Bar din Dreamweaver v permite s afiai un mesaj (asociat unui element din pagina Web) n bara de stare a navigatorului, n timpul evenimentelor: onClick, onMouseOver etc. Iat cum procedm pentru a crea comportamentul Set Text of Status Bar, n care obiectul din pagin este imaginea autumn.jpg creia i atribuim onClick. 1. Selectai imaginea autumn.jpg. 2. n panoul Behaviors, selectai comportamentul Set Text of Status Bar, via Set Text. 3. n caseta de dialog Set Text of Status Bar, n zona Message, introducei mesajul nvai s privii dincolo de aparene, iar apoi executai clic pe butonul OK. mesajul nvai
s privii dincolo de aparene, iar
evenimentul care va declana aciunea (Set Text of Status Bar) este
760
4. Selectai evenimentul onClick. 5. Analizai codul HTML (Java Script) generat (figura 15.26).
Figura 15.26
6. Vizualizai pagina Web ntr-un browser. 7. Testai comportamentul (executai clic pe imagine!), figura 15.27.
Figura 15.27
Remarc. Mesajul se afieaz n bara de stare a navigatorului.
761
Dreamweaver MX Creai comportamentul Set Text of

workspace
Status Bar. Aplicaie
Folosii Dreamweaver MX workspace pentru a crea comportamentul Set Text of Status Bar. Iat cum procedm pentru a afia mesajul nvai s privii dincolo de
aparene n bara de stare a navigatorului. Asociai acest mesaj imaginii

autumn.jpg i folosii evenimentul onClick pentru a declana aciunea Set Text of Status Bar. 1. Selectai imaginea autumn.jpg, care trebuie s afieze mesajul n bara de stare. 2. n panoul Behaviors, executai clic pe butonul Set Text of Status Bar (figura 15.28). Set Text
Figura 15.28
762
Remarc. Se afieaz caseta de dialog Set Text of Status Bar.
3. n caseta de dialog Set Text of Status Bar, executai urmtoarele aciuni (figura 15.29): n zona Message introducei mesajul nvai s privii
dincolo de aparene
Figura 15.29
4. Selectai evenimentul onClick (figura 15.30).
Figura 15.30
Remarc. n mod implicit, textul este afiat n timpul evenimentului onMouseOver.
763
5. Analizai codul Java Script generat (figura 15.31).
Figura 15.31
Figura 15.32
764
7. Testai comportamentul (executai clic pe imagine!), figura 15.33.
Figura 15.33
Remarc. Mesajul se afieaz n bara de stare a navigatorului.
Aplicaie Creai comportamentul Popup Message (mesaj contextual), n care: autumn.jpg reprezint obiectul din pagin cruia i asociem mesajul nvai s privii dincolo de aparene; Popup Message reprezint aciunea din panoul Behaviors de executat, care afieaz mesajul ntr-o caset de dialog de avertizare; onClick reprezint evenimentul care va declana aciunea. Iat care este procedura pe care v invitm s-o aplicai.
1. Selectai imaginea autumn.jpg, care trebuie s afieze mesajul ntr-o

caset de dialog.
2. n panoul Behaviors, executai clic pe butonul

Message.
Remarc. Se afieaz caseta de dialog Popup Message.
, iar apoi pe Popup
765
3. n caseta de dialog Popup Message, executai urmtoarele aciuni
(figura 15.34): n zona Message introducei mesajul "nvai s privii dincolo
de aparene".
Figura 15.34
Remarc. n mod implicit, caseta de dialog este afiat atunci cnd asupra elementului se execut un clic (onClick).
4. Analizai codul XHTML (Java Script) generat. 5. Vizualizai pagina Web ntr-un browser (figura 15.35) iar apoi testai
comportamentul.
Figura 15.35
Remarc. Se afieaz o caset de avertizare, care afieaz mesajul. Executai clic pe butonul OK.
766
Dreamweaver 4
workspace
Creai comportamentul Validate Form
Folosii Dreamweaver 4 workspace pentru a valida un formular n momentul expedierii acestuia. Iat cum procedm pentru a valida cmpul E-MAIL al unui formular (figura 15.36) n momentul expedierii acestuia. Folosii evenimentul onSubmit pentru a declana aciunea Validate Form. 1. Selectai formularul (figura 15.36).
Figura 15.36
2. Afiai panoul Behaviors. 3. n panoul Behaviors, executai clic pe butonul Form. 4. n caseta de dialog Validate Form: n zona Named Fields, selectai cmpul text email in form formular; n zona Value, activai butonul radio Required; n zona Accept, activai butonul radio Email Address. Validate
767
5. n caseta de dialog Validate Form executai clic pe butonul OK. 6. Analizai codul HTML (Java Script) generat (figura 15.37).
Figura 15.37
7. Vizualizai pagina Web ntr-un browser. 8. Testai comportamentul (figura 15.38).
768
Figura 15.38
Dreamweaver MX
workspace
Creai comportamentul Validate Form
Cu Dreamweaver MX workspace putei efectua verificarea unui formular atunci cnd vizitatorul completeaz cmpurile unul dup altul sau cnd execut clic pe butonul de expediere (submit) al formularului. Iat cum procedm pentru a efectua validarea unui cmpul E-MAIL al formularului din figura 15.39 n momentul expedierii acestuia. Folosii evenimentul onSubmit pentru a declana aciunea Validate Form. 1. Selectai formularul (figura 15.39).
769
Figura 15.39
2. Afiai panoul Behaviors (comportamente). 3. n panoul Behaviors, executai clic pe butonul , iar apoi din
meniul derulant alegei comportamentul Validate Form.

Remarc. Se afieaz caseta de dialog Validate Form care repertoriaz toate cmpurile de tip text ale formularului.
4. n caseta de dialog Validate Form, executai urmtoarele aciuni (figura 15.40): n zona Named Fields selectai cmpul cruia urmeaz s i se aplice validarea text email in form formular; n zona Value activai caseta de validare Required pentru a interzice o zon vid n acest cmp; n zona Accept activai butonul radio Email Address; executai clic pe butonul OK.
770
Figura 15.40
Remarc. n panoul Behaviors s-a afiat evenimentul onSubmit. Putei alege, evident, i un alt eveniment (figura 15.41).
Figura 15.41
5. Analizai codul XHTML (Java Script) generat (figura 15.42).
771
Figura 15.42
6. Vizualizai pagina Web ntr-un browser. 7. Testai comportamentul (figura 15.43).
772
Figura 15.43
Remarc. n momentul expedierii formularului, dup ce ai introdus date incorecte (email greit), navigatorul afieaz un mesaj de eroare.
Aplicaii Vizualizai cmpurile Nume, Prenume care aparin aceluiai formular. Indicaie. Folosii evenimentul onBlur pentru a declana aciunea Validate Form. Transmitei un mesaj de mulumire vizitatorilor care au completat formularul cu impresiile acestora privind site-ul accesat. Indicaie. Folosii evenimentul OnMouseDown pentru a declana aciunea Set Text of Text Field.
Dreamweaver 4
workspace
Creai comportamentul Set Text of Layer
Comportamentul Set Text of Layer v permite s nlocuii coninutul i formatarea unui strat cu un coninut diferit i/sau atribute dedicate.
773
Iat cum procedm pentru a nlocui imaginea sigla.jpg din stratul sigla cu textul TOAMNA i o alt imagine autumn.jpg. Folosii evenimentul onMouseOver pentru a declana aciunea (Set Text of Layer). 1. Inserai imaginea sigla.jpg ntr-un strat (figura 15.44).
Figura 15.44
2. Deschidei panoul Behaviors. 3. n panoul Behaviors, executai clic pe butonul Set Text of Layer. 4. n caseta de dialog Set Text of Layer (figura 15.45) executai urmtoarele aciuni: n zona Layer alegei stratul int layer sigla al crui coninut va fi integral ters; .n zona New HTML tastai textul / codul HTML care trebuie s se afieze n cadru; executai clic pe butonul OK. Set Text
Figura 15.45
774
5. Analizai codul HTML generat (15.46).
Figura 15.46
Figura 15.47
775
7. Testai comportamentul (figura 15.48).
Figura 15.48

workspace
Layer
Cu Dreamweaver MX workspace putei schimba coninutul i formatarea unui strat, folosind comportamentul Set Text of Layer. Iat cum procedm pentru a nlocui coninutul unui strat, imaginea sigla.jpg cu un text, TOAMNA i o alt imagine, autumn.jpg. Folosii evenimentul onMouseOver pentru a declana aciunea Set Text of Layer. 1. Inserai imaginea sigla.jpg ntr-un strat. 2. Deschidei panoul Behaviors. 3. n panoul Behaviors, executai clic pe butonul Set Text of Layer (figura 15.49). Set Text
776
Figura 15.49
Remarc. Se afieaz caseta de dialog Set Text of Layer.
4. n caseta de dialog Set Text of Layer, executai urmtoarele aciuni (figura 15.50): n zona Layer alegei stratul int layer sigla al crui coninut va fi integral ters; .n zona New HTML tastai textul/codul HTML care trebuie s se afieze n cadru; executai clic pe butonul OK.
Figura 15.50
777
Remarc. n panoul Behaviors, Dreamweaver a completat evenimentul onMouseOver. Desigur, dumneavoastr putei alege un alt eveniment.
5. Analizai codul XHTML generat (15.51).
Figura 15.51
Figura 15.52
778
Figura 15.53
Remarc. Iniial, stratul coninea o imagine. n timpul evenimentului onMouseOver, coninutul su este nlocuit cu textul TOAMNA i o alt imagine (autumn.jpg).
Aplicaii Inserai un fiier sunet n pagina dumneavoastr Web, care va fi declanat executnd clic pe un buton-imagine sau trecnd cu mouse-ul peste acest buton. Indicaie. Inserai o imagine-buton pentru a declana sunetul. n panoul Behaviors alegei comportamentul Play Sound. Controlai o animaie Flash sau Shockwave cu ajutorul comportamentului Control Shockwave or Flash.
Dreamweaver 4
workspace
Creai comportamentul Set Text of Frame
Comportamentul Set Text of Frame v permite s nlocuii coninutul unui cadru cu un coninut diferit i/sau atribute dedicate.
779
Iat cum procedm pentru a nlocui imaginea sigla.jpg din cadrul sus cu textul TOAMNA i o alt imagine autumn.jpg. Folosii evenimentul onMouseOver pentru a declana aciunea (Set Text of Frame). 1. Inserai imaginea sigla.jpg ntr-un cadru (figura 15.54).
Figura 15.54
2. Deschidei panoul Behaviors. 3. n panoul Behaviors, executai clic pe butonul Set Text of Frame. 4. n caseta de dialog Set Text of Frame, executai urmtoarele aciuni: n zona Frame, alegei cadrul int frame sus al crui coninut va fi ters; n zona New HTML introducei textul care trebuie s se afieze n cadru sau codul HTML (figura 15.55). Set Text
Figura 15.55
780
5. Alegei evenimentul onMouseOver sau onClick. 6. Analizai codul XHTML generat (figura 15.56).
Figura 15.56
Figura 15.57
781
Figura 15.58

workspace
Frame
Cu Dreamweaver MX workspace putei schimba coninutul unui cadru, folosind comportamentul Set Text of Frame. Iat cum procedm pentru a nlocui coninutul unui cadru, imaginea sigla.jpg cu textul TOAMNA i o alt imagine autumn.jpg. Folosii evenimentul onMouseOver pentru a declana aciunea (Set Text of Frame). 1. Inserai imaginea sigla.jpg ntr-un cadru (figura 15.59).
782
Figura 15.59
2. Deschidei panoul Behaviors. 3. n panoul Behaviors, executai clic pe butonul Set Text of Frame (figura 15.60). Set Text
Figura 15.60
783
Remarc. Se afieaz caseta de dialog Set Text Frame.
4. n caseta de dialog Set Text of Frame (figura 15.61), executai urmtoarele aciuni: n zona Frame alegei cadrul int frame sus al crui coninut va fi integral ters; n zona New HTML introducei textul care trebuie s se afieze n cadru sau codul XHTML (exemplul nostru); activai opiunea Preserve Background Color; executai clic pe butonul OK.
Figura 15.61
5. Alegei evenimentul onMouseOver sau onClick. 6. Analizai codul XHTML generat (figura 15.62).
784
Figura 15.62
Figura 15.63
785
Figura 15.64
Remarc. Iniial, cadrul de sus coninea o imagine. n timpul evenimentului onMouseOver, coninutul su este nlocuit cu textul TOAMNA i o alt imagine, autumn.jpg.
786
Dreamweaver MX
Testai-v cunotinele
1. Care este ecuaia unui comportament?
Tem
2. Precizai care sunt cele trei elemente necesare pentru a defini un comportament. 3. Descriei pe scurt comportamentele: Open Browser Window Swap Image Set Text of Status Bar Validate Form Set Text of Layer Set Text of Frame.
Vizitai site-urile
www.macromedia.com/exchange/dreamweaver www.modernmethod.com
Conversaia 16
Creai scenarii cu Dreamweaver MX

Dreamweaver MX workspace Creai un scenariu Dreamweaver MX workspace Creai o animaie simpl Dreamweaver MX workspace Creai o animaie curb. Aplicaie Dreamweaver MX workspace Creai o animaie complex. Aplicaii Dreamweaver MX workspace Declanai sau oprii un scenariu cu ajutorul unui comportament Dreamweaver MX - Tem
Dreamweaver MX
workspace
Creai un scenariu
Puin DHTML
Pentru a da via paginilor dumneavoastr Web utilizai funciile interactive puse la dispoziie de HTML dinamic (DHTML). V asigur c DHTML este foarte excitant! DHTML utilizeaz tehnici de script-are avansate pentru poziionarea precis a elementelor i crearea unui coninut dinamic, lucru imposibil cu HTML standard.
788
Remarci: Pentru a crea animaii interactive putei alege i alte tehnologii: Java, Shockwave i Flash. DHTML permite crearea de animaii interactive direct n Dreamweaver, fr a fi nevoii s nvai manipularea unui alt program.
Trei sunt funciile puternice ale Dreamweaver-ului care permit crearea cu uurin a funciilor DHTML: straturile; comportamentele; scenariile.
Remarci: Pentru controlul riguros al poziiei elementelor unei pagini Web, DHTML utilizeaz straturile (vezi Conversaia 13). Comportamentele au fost prezentate n Conversaia 15, iar scenariile sunt prezentate n cadrul acestei conversaii.
Inspectorul de scenarii Timelines

Animnd straturile, aa cum vom proceda chiar n cadrul acestei conversaii, vei reui s evadai din lumea paginilor Web statice. Este doar o mic provocare! Funcia Dreamweaver numit scenariu permite crearea de animaii i modificarea dimensiunii, poziiei, vizibilitii straturilor i a coninutului acestora pentru o perioad de timp predeterminat. ntruct codul surs de creare a straturilor animate este foarte complicat, Dreamweaver l simplific prin interfaa sa prietenoas i intuitiv. n plus, scenariile sunt uor de integrat n comportamente, ceea ce nu este deloc puin! Pentru a crea scenarii cu Dreamweaver MX folosii inspectorul de scenarii Timelines.
789
Utilizai inspectorul de scenarii Timelines pentru a insera n straturile din paginile dumneavoastr, rapid, fr stres, animaiile preferate! Iat cum procedm pentru a afia cu Dreamweaver MX workspace inspectorul de scenarii, panoul Timelines. 1. Executai clic pe Window Others Timelines (figura 16.1).
Figura 16.1
Remarc. Dreamweaver MX workspace afieaz panoul Timelines (figura 16.2)
Figura 16.2
790
Remarci: Numele scenariului apare n meniul derulant Timeline 1 (linie de durat 1). Canalul B este destinat adugrii de comportamente animaiei dumneavoastr. Dreptunghiul rou i linia vertical asociat reprezint capul de citire; ele permit vizualizarea deplasrii stratului n pagin. FPS 15 indic numrul de imagini pe secund (15 imagini/secund reprezint standardul Web). Canalele de animaie (barele 1, 2, 3 ) permit nregistrarea fiecrei animaii. Putei avea mai multe animaii ntr-un scenariu. Cnd vei nregistra un traseu al stratului dumneavoastr, poziiile cheie de nceput i de sfrit vor fi vizibile datorit imaginilor cheie (cercurile albe) din canalul de animaie.
Dreamweaver MX
workspace
Creai o animaie simpl
Cu inspectorul de scenarii (Timelines) putei aduga rapid animaii simple n paginile dumneavoastr Web. Iat care este procedura de creare a unei animaii simple utiliznd imagini cheie (mici cercuri albe), pe care v invitm s-o aplicai. 1. Creai un strat, numii-l (strat) iar apoi umplei-l cu text sau cu o imagine, sigla.jpg (figura 16.3).
Figura 16.3
791
2. Plasai stratul n locul n care dorii s nceap secvena de animaie. 3. Executai clic pe Window Others Timelines.
4. Selectai stratul iar apoi n meniul local al panoului Timelines executai clic pe Add Object.
Remarc. Se afieaz bara de animaie Layer1 cu 15 imagini (figura 16.4).
Figura 16.4
5. Executai clic pe ultima imagine a animaiei (figura 16.5).
Figura 16.5
792
Remarci: Punctele scenariului simbolizeaz imaginile - cheie. Toate obiectele scenariului dispun de o imagine-cheie de nceput i de sfrit.
6. Deplasai stratul ntr-o nou poziie (figura 16.6).
Figura 16.6
Remarc. Linia din figura 16.6 corespunde traseului stratului.
7. Afiai codul Java Script generat (figura 16.7).
793
Figura 16.7
8. Executai clic n interiorul barei (1) pentru a putea urmri evoluia animaiei.
sau,
8. Utilizai butoanele i .
sau,
8. Deplasai capul de citire 1.
Remarc. Pentru a vedea desfurarea animaiei, n panoul Timelines executai clic pe butonul Play. inei apsat butonul Play pentru a putea vedea o micare mai lent.
794
9. Activai opiunea Autoplay (figura 16.8) pentru a demara animaia odat cu deschiderea paginii Web.
Figura 16.8
Figura 16.9
Remarc. Stratul se deplaseaz de la prima la ultima poziie.
795
Dreamweaver MX
workspace
Creai o animaie curb. Aplicaie
Adugnd imagini-cheie n mijlocul animaiei, putei defini alte poziii ale stratului n afara celor de nceput i de sfrit. Iat cum procedai pentru a realiza o animaie curb. 1. Realizai o animaie simpl. 2. n panoul Timelines activai opiunea Autoplay pentru a demara animaia odat cu deschiderea paginii Web. 3. Executai clic pe o imagine-cheie n interiorul barei de animaie. 4. n panoul Timelines, n meniul local executai clic pe Add Keyframe (figura 16.10).
796
Figura 16.10
Remarc. n bara de animaie se afieaz o nou imagine-cheie (figura 16.11).
Figura 16.11
5. Deplasai stratul ntr-o alt poziie (figura 16.12).
797
Figura 16.12
6. Analizai codul Java Script generat (figura 16.13).
Figura 16.13
Figura 16.14
798
Remarc. Stratul se deplaseaz de la prima la ultima poziie, trecnd prin poziia central, urmnd o curb.
Aplicaie nregistrai un traseu pentru o animaie. Iat care este procedura pe care v invitm s-o aplicai. 1. Selectai stratul. 2. Executai clic pe Modify Timeline Record Path of Layer pentru a
nregistra traseul (figura 16.15).
Figura 16.15
Remarc. Dreamweaver MX workspace afieaz panoul Timelines.
3. Desenai traseul.
Remarc. Pe msur ce deplasai stratul, o linie gri se va afia pe ecran. Urmrii cum se genereaz n mod automat noi imagini cheie reprezentate prin mici cerculee pe bara de animaie.
799
Dreamweaver MX
workspace
Creai o animaie complex. Aplicaii
Nu v mulumii numai cu o simpl traiectorie. Adugai noi bare de animaie pentru a deplasa stratul n mai multe poziii. Iat care este procedura pe care trebuie s-o urmai. 1. Realizai o animaie simpl. 2. n panoul Timelines, activai opiunea Autoplay. 3. Executai clic pe prima imagine-cheie vid dup ultima imagine-cheie (figura 16.16).
Figura 16.16
4. Selectai stratul. 5. n panoul Timelines, n meniul local, executai clic pe Add Object.
800
Remarc. Dreamweaver MX workspace afieaz o nou bar de animaie (figura 16.17).
Figura 16.17
6. Executai clic pe ultima imagine-cheie (figura 16.18).
Figura 16.18
7. Deplasai stratul n ultima sa poziie. 8. Repetai paii 3 la 7 pentru a aduga noi animaii (figura 16.19).
801
Figura 16.19
9. Analizai codul Java Script generat. 10. Acionai tasta F12 pentru a testa animaia n navigator (figura 16.20).
Figura 16.20 Aplicaii Adugai mai multe animaii n aceeai pagin. Iat cum procedai pentru a aduga mai multe animaii n interiorul aceleiai pagini. 1. Realizai o animaie simpl. 2. n panoul Timelines, activai opiunea Autoplay. 3. Inserai un strat (figura 16.21).
802
Figura 16.21 4. n Timelines, n linia 2, executai clic pe imaginea-cheie, unde trebuie s debuteze animaia. 5. Selectai stratul. 6. n panoul Timelines, n meniul local, executai clic pe Add Object (figura 16.22).
Remarc. Dreamweaver MX workspace afieaz o nou bar de animaie Layer2, sub Layer1.
Figura 16.22 7. Executai clic pe ultima imagine-cheie a animaiei din linia 2 (figura 16.23).
803
Figura 16.23 8. Deplasai stratul din stnga ctre cellalt strat. 9. Analizai codul Java Script generat. 10. Acionai tasta F12 pentru a testa animaia n browser (figura 16.24).
Figura 16.24
Remarc. Cele dou animaii funcioneaz simultan.
Modificai fluxul unei animaii. Indicaie. Viteza unei animaii este determinat de doi parametrii: numrul de imagini pe secund i numrul de imagini utilizate pentru a se deplasa de la un punct la altul. Mascai periodic un strat pentru a-l face s clipeasc. Iat care este procedura pe care v invitm s-o aplicai. 1. n panoul Timelines, activai opiunile Autoplay i Loop (figura 16.25).
804
Figura 16.25 2. Executai clic pe o imagine-cheie din cadrul barei (1) de animaie. 3. n meniul local, executai clic pe Add Keyframe. 4. Executai clic pe o imagine-cheie din cadrul barei (1) de animaie. 5. n panoul Properties, n meniul derulant, selectai hidden (figura 16.26).
Figura 16.26
Remarc. Stratul va fi mascat.
6. Executai clic pe prima imagine-cheie (bara 1). 7. Analizai codul Java Script generat. 8. Vizualizai pagina Web ntr-un browser (figura 16.27).
Figura 16.27
805
Remarc. ntruct atributul visible conine valoarea inherit, stratul va fi din nou afiat.
Dreamweaver MX
workspace
Declanai sau oprii un scenariu cu ajutorul unui comportament
Iat cum procedai pentru a declana o animaie cu ajutorul unui comportament. 1. Realizai o animaie simpl. 2. n panoul Timelines, dezactivai opiunea Autoplay. 3. Afiai panoul Behaviors. 4. Selectai elementul care urmeaz s declaneze animaia (figura 16.28).
Figura 16.28
5. n panoul Behaviors, executai clic pe butonul Play Timeline (figura 16.29).
Timeline
806
Figura 16.29
Remarc. Dreamweaver MX workspace afieaz caseta de dialog Play Timeline.
6. n caseta de dialog Play Timeline, executai urmtoarele aciuni (figura 16.30): n zona Play Timeline selectai scenariul Timeline 1 pe care urmeaz s-l declanai; executai clic pe butonul OK.
Figura 16.30
7. Afiai pagina Web ntr-un navigator (figura 16.31).
807
Figura 16.31
8. Executai clic pe elementul care declaneaz animaia (figura 16.32).
Figura 16.32
Remarc. Pentru a crea un element care stopeaz animaia, parcurgei etapele 1-7 i alegei n etapa 5, comanda Stop Timeline.
808
Dreamweaver MX
Testai-v cunotinele
1. Ce este un scenariu Dreamweaver?
Tem
2. Descriei pe scurt procedura de creare a unei animaii simple, curbe. 3. Cum creai cu Dreamweaver MX o animaie complex? 4. Descriei pe scurt procedura de declanare a unui scenariu cu ajutorul unui comportament.
Vizitai site-urile
www.dthmlzone.com www.Big-Wheel.com
BIBLIOGRAFIE
1. Cristophe Aubry, La collection Studio Factory, Editions ENI, 2002, Paris, France 2. Janine Warner, Ivonne Berkovitz, Dreamweaver MX pour les nuls, Editions First Interactive, 2002, Paris, France 3. Macromedia, Bien dmarrer avec Dreamweaver MX, Macromedia, 2002, Paris, France
808

Dreamweaver MX

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver MX

Uploaded by

Copyright:

Available Formats

DREAMWEAVER

Conversaia 2. Creai un site Web cu Dreamweaver MX .............. 29

Conversaia 3. Introducei i formatai caracterele cu Dreamweaver MX .................................................... 47

Conversaia 4. Creai i formatai paragrafele cu Dreamweaver MX .................................................... 137

Conversaia 5. Inserai i personalizai o linie orizontal cu Dreamweaver MX .................................................... 203

Conversaia 6. Creai i utilizai foi de stiluri n cascad cu Dreamweaver MX .................................................... 219

Conversaia 7. Inserai imagini cu Dreamweaver MX ................... 273

Conversaia 8. Creai legturi cu Dreamweaver MX ...................... 329

Conversaia 9. Creai tabele cu Dreamweaver MX ........................ 383

Conversaia 10. Creai formulare cu Dreamweaver MX ................ 477

Conversaia 11. Inserai obiecte cu Dreamweaver MX ................. 543

Conversaia 12. Creai cadre cu Dreamweaver MX ....................... 585

Conversaia 13. Creai straturi cu Dreamweaver MX .................... 629

Conversaia 14. Creai biblioteci cu Dreamweaver MX ................. 671

Conversaia 15.Creai comportamente cu Dreamweaver MX ....... 741

Conversaia 16. Creai scenarii cu Dreamweaver MX ................... 787

Bibliografie ....................................................................................... 807

Creai pagini Web cu Dreamweaver MX

Dreamweaver, un editor de tip WYSIWYG

Stabilii obiectivele site-ului dumneavoastr

Principalele componente Dreamweaver

Macromedia Dreamweaver MX) i analizai caseta de dialog care se

panourile flotante (Insert, inspectorul de proprieti,

), Show Server Behaviors ( ).

Revenii la vechea interfa

2. n caseta de dialog Preferences, n categoria General executai clic pe Change Workspace.

grupul de panouri Insert (figura 1.16).

bara de instrumente standard (figura 1.18).

3. Afiai cele dou ferestre n cascad, via Window (figura 1.23).

_________________________________________________________ ___________________________________________________________ ___________________________________________________________ ___________________________________________________________ ___________________________________________________________

Figura 1.28 2. Acionai tasta F4 pentru a afia din nou panourile.

2. n panoul Answers, executai clic pe butonul

Remarc. Panourile Answers i Files sunt regrupate (figura 1.32).

Remarc. Fiecare panou posed propriul su sub-panou.

n figura 1.33 Inspectorul de proprieti afieaz atributele tabelului HTML selectat.

2. Executai clic pe numele barei (Standard), figura 1.36.

Remarc. Putei schimba poziia barei de instrumente, glisnd bara

Creai un site Web cu Dreamweaver MX

Creai un site nou

i acum s trecem la treab!

Dreamweaver MX Definii local site-ul dumneavoastr

Utilizai categoria Local Info

Metoda elementar (BASIC)

metoda elementar pentru crearea site-ului dumneavoastr, cu

Remarc. Se deschide caseta de dialog Site Definition for (figura 2.1).

2. Activai zona Basic (figura 2.2).

4. Executai clic pe butonul Next (figura 2.4).

6. Executai clic pe butonul Next.

8. Executai clic pe (figura 2.7).

pentru a identifica folder-ul site-ului local

9. Selectai folder-ul local (figura 2.8) i executai clic pe butonul Select.

Remarc. Dac folder-ul nu exist, executai clic pe

pentru a-l crea.

12. Executai clic pe butonul Next.

5. n caseta Site Definition, executai clic pe butonul OK.

Definii local site-ul dumneavoastr

Utilizai categoria Local Info

Remarc. Se deschide caseta de dialog Site Definition (figura 2.17).

6. Activai opiunea Enable Cache (figura 2.24).

Introducei i formatai caracterele cu Dreamweaver MX

Metoda 2 Caseta de text Title de pe bara de instrumente.

3. Introducei de la tastatur, n fereastra Document, textul specificat (figura 3.6).

5. Salvai documentul n folder-ul rdcin local, via File (figura 3.13).

___________________________ _ _ _ _______________________________