Pregătirea 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 menţinerea siturilor web. Una din cele mai mari provocări ale authoring-ului în HTML este creşterea rapidă a fişierelor hipertext, imaginilor şi celor multimedia. Caseta de dialog Site Definition din Dreamweaver nu configurează doar un sit pentru dezvoltare ci şi activează facilităţile de management a fişierelor ş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 preferinţele 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 fişierele necesare în /var/www/fruits_valley. 2. deschidem Dreamweaver. Din meniu alegem Site>Manage Sites

Caseta de dialog afişează toate siturile definite împreună cu o serie de opţiuni. Când definim un sit , Dreamweaver ţine cont de directorul rădăcină al sitului (directorul care conţine toate fişierele din sit) şi defineşte fiecare element din sit. Putem crea, muta şi şterge fişiere din managerul de situri Dreamweaver. Putem ulterior verifica dacă legăturile către alte documente sunt actualizate corect şi dacă nu există legături 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 câmpul Local root folder ne deplasăm până la z:\var\www\fruits_valley\. Navigăm până la subdirectorul cu imagini din directorul fruits_valley. Lăsăm celelalte opţiuni implicite.

Directorul rădăcină este un concept important. Toate fişierele sitului sunt localizate în acest director (posibil în subdirectoare) şi sunt definite în relaţie cu acest director. 6. Selectăm categoria Remote Info.

Putem specifica informaţia 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: reţea, FTP, SFTP şi altele.

7. clic pe butonul OK Printr-un clic pe butonul OK, Dreamweaver a creat un cache pentru situl nostru (un fişier care conţine informaţii privitoare la numele şi locaţia fişierelor ş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. studiaţi structura de directoare Când începem un nou site trebuie să creăm directoare pentru a stoca tipuri diferite de conţinut: imagini, CSS, Flash şi alte componente. Pe lângă directorul cu imagini va exista şi unul cu imaginile sursă din Fireworks unde vom plasa fişierele PNG originale (images_source). Directorul text_files va conţine scripturile sursă. Aceste fişiere 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. Verificăm 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 puţin mai mult structurat în privinţa 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. exploraţi 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 opţiuni de vizualizare a ferestrei document (Design view, Code view şi Split view). Property Inspector – vizualizare şi schimbare proprietăţi ale obiectului selectat Tag selector – afişează ierarhia etichetelor şi permite selectarea etichetei şi conţinutului. Panel Groups – cele din dreapta > panoul Files

Bara cu instrumente a documentului

Ferestra documentulu

Grup de panouri

Bara Insert

Panou de fişiereProperty

Inspector

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 căutare.

Titlul poate fi schimbat şi din caseta de dialog Page Properties (Modify > Page Properties). 5. comutăm pe Code View din partea stângă de barei cu instrumente a documentului. Split View afişează atât codul cât şi partea vizuală.

6. ne deplasăm la începutul documentului, selectăm ş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 programării. 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 specificăm la Alt : Fruits Valley Logo. Similar procedăm şi cu navbar. 9. salvăm fruitsvalley_template.html. Temă: consultaţi referinţele HTML şi XHTML de pe situl http://www.w3schools.com/ şi din suportul de laborator. În final căutaţi pe google după: HTML Quiz XHTML Quiz Dreamweaver Quiz şi verificaţi-vă cunoştinţele acumulate. Acestea sunt necesare pentru layerele CSS, stilurile şi clasele CSS, tabele, elementelor de tip listă şi crearea template-urilor.