Sunteți pe pagina 1din 6

Pregtirea noului sit

Macromedia Dreamweaver 8 este un editor HTML care ne permite crearea


paginilor i lucrul cu imagini sau elemente multimedia ntr-un mediu vizual i/sau al
codului. De asemenea, acesta ofer instrumente i pentru managementul i meninerea
siturilor web.
Una din cele mai mari provocri ale authoring-ului n HTML este creterea rapid
a fiierelor hipertext, imaginilor i celor multimedia. Caseta de dialog Site Definition din
Dreamweaver nu configureaz doar un sit pentru dezvoltare ci i activeaz facilitile de
management a fiierelor i chiar cele de publicare pe web.

Dreamweaver 8 permite, de asemenea, lucrul cu elementele dezvoltate n


Fireworks. HTML-ul Fireworks exportat anterior poate fi importat ntr-un document
Dreamweaver doar printr-un clic pe un buton.
Vom seta un sit n acord cu planul sitului i preferinele de authoring. Odat setat
acest sit, vom crea o pagin generic care o vom putea utiliza ca template pentru toate
paginile ulterioare.
Definirea unui sit static n Dreamweaver
Vom defini situl n Dreamweaver folosind Site Manager. Vom reconstrui ntregul
design pe baza slice-urilor exportate n Fireworks i vom crea paginile individuale pentru
situl Fruits Valley.
1. copiem toate fiierele necesare n /var/www/fruits_valley.
2. deschidem Dreamweaver. Din meniu alegem Site>Manage Sites

Caseta de dialog afieaz toate siturile definite mpreun cu o serie de opiuni.


Cnd definim un sit , Dreamweaver ine cont de directorul rdcin al sitului (directorul
care conine toate fiierele din sit) i definete fiecare element din sit. Putem crea, muta i
terge fiiere din managerul de situri Dreamweaver. Putem ulterior verifica dac
legturile ctre alte documente sunt actualizate corect i dac nu exist legturi moarte.
3. Clic pe New din caseta de dialog Manage Site i vom selecta Site din caseta
drop-down.
4. Clic pe tab-ul Advanced din caseta de dialog Site Definition.
5. n categoria Local Info a casetei de dialog Site Definition, numim situl
fruits_valley. n cmpul Local root folder ne deplasm pn la z:\var\www\fruits_valley\.
Navigm pn la subdirectorul cu imagini din directorul fruits_valley. Lsm celelalte
opiuni implicite.

Directorul rdcin este un concept important. Toate fiierele sitului sunt


localizate n acest director (posibil n subdirectoare) i sunt definite n relaie cu acest
director.
6. Selectm categoria Remote Info.

Putem specifica informaia pe care Dreamweaver o are nevoie pentru a accesa


situl de la distan din categoria Remote Info, care este serverul web pe care situl va fi
publicat. Alegem o metod de acces din meniul Drop-Down Access: reea, FTP, SFTP i
altele.

7. clic pe butonul OK
Printr-un clic pe butonul OK, Dreamweaver a creat un cache pentru situl nostru
(un fiier care conine informaii privitoare la numele i locaia fiierelor i directoarelor .
8. clic pe Done n caseta de dialog Manage Sites.
Site-ul este acum vizibil n panoul Files care poate fi accesat si din Window>Files.
9. studiai structura de directoare
Cnd ncepem un nou site trebuie s crem directoare pentru a stoca tipuri diferite
de coninut: imagini, CSS, Flash i alte componente. Pe lng directorul cu imagini va
exista i unul cu imaginile surs din Fireworks unde vom plasa fiierele PNG originale
(images_source). Directorul text_files va conine scripturile surs. Aceste fiiere text pot
fi scrise n orice procesor de texte i vor fi convertite n HTML, Flash sau alt format.
Directorul CSS este utilizat pentru stilurile sitului.
Definirea unei noi pagini HTML
1. File>New>Basic Page>HTML pentru a crea un nou document.
2. Verificm dac DTD-ul este XHTML 1.0 Transitional i clic pe create.

Putem crea pagini pe baza naturii paginii (de exemplu pagin static, pagin
dinamic, structur de cadre) sau pe baza template-urilor din alte situri.
XHTML (Extensible Hypertext Markup Language) este reformularea HTML
conform cu sintaxa XML. Utilizarea XHTML asigur compatibilitatea viitoare a
paginilor web. Spre deosebire de HTML, XHTML este puin mai mult structurat n
privina modului de scriere (de exemplu <P> i <p> sunt ambele acceptate n HTML dar
n XHTML este acceptat doar al doilea) i toate etichetele trebuie nchise .
Pentru a face un document HTML conform XHTML, vom apela la
File>Convert>XHTML.
3. explorai mediul Dreamweaver pentru a deveni familiar cu acesta (panouri,
inspectors, ferestre).
Insert bar butoane ptr introducere obiecte (imagini, tabele, layere). Fiecare
obiect este o pies din codul HTML care ne permite setarea diverselor atribute a
obiectului.
Document toolbar butoane cu opiuni de vizualizare a ferestrei document
(Design view, Code view i Split view).
Property Inspector vizualizare i schimbare proprieti ale obiectului selectat
Tag selector afieaz ierarhia etichetelor i permite selectarea etichetei i
coninutului.
Panel Groups cele din dreapta > panoul Files

Bara cu instrumente
a documentului

Ferestra
documentulu

Grup de
panouri
Bara Insert

Property
Inspector

Panou de
fiiere

Selector
de etichete

4. File>Open i deschidem template.htm. File>Save As i l numit


fruitsvalley_template. n bara cu instrumente a documentului redenumim titlul implicit al
documentului din template.gif n Fruits Valley Template.
Titlul apare n bara de titlu a ferestrei document din Dreamweaver i n bara de
titlu a browserului, dar i n pagina rezultat a motoarelor de cutare.

Titlul poate fi schimbat i din caseta de dialog Page Properties (Modify > Page
Properties).
5. comutm pe Code View din partea stng de barei cu instrumente a
documentului. Split View afieaz att codul ct i partea vizual.

6. ne deplasm la nceputul documentului, selectm i tergem linia de comentarii


(<!-- saved from url). Comentariile (<!-- comentariu -->) sunt utilizate de dezvoltatori
pentru a realiza comentarii n paginile lor pentru ai ajuta pe parcursul programrii.
7. alegem File>Convert> XHTML 1.0 Transitional
Va apare o caset de dialog care ne avertizeaz c dou imagini (logo i bara de
navigare) nu au atributele alt. Vom rezolva acest lucru imediat.

8. clic pe butonul Design View din bara cu instrumente document pentru a reveni
n modul proiectare. Clic pe logo-ul Fruits Valley i din Property Inspector specificm la
Alt : Fruits Valley Logo. Similar procedm i cu navbar.
9. salvm fruitsvalley_template.html.

Tem: consultai referinele HTML i XHTML de pe situl http://www.w3schools.com/ i


din suportul de laborator. n final cutai pe google dup:
HTML Quiz
XHTML Quiz
Dreamweaver Quiz
i verificai-v cunotinele acumulate. Acestea sunt necesare pentru layerele CSS,
stilurile i clasele CSS, tabele, elementelor de tip list i crearea template-urilor.