You are on page 1of 11

Dreamweaver CS4 Lecia 1-a: Crearea primului site

1. Apsai Start - Programs - Adobe Dreamweaver CS4; n meniul Create New executai click pe HTML apoi pe Site i New Site. Se afieaz caseta de dialog Site Definition. 2. n caseta de dialog Site Definition activai zona Advanced; 3. n prima caset de sus, n care se afl deja nscris Unnamed Site 1 tastai numele site-ului <Numele dvs.> urmat de <1> (exemplu: <Ionescu1>); 4. Avansai de dou ori consecutiv Next>; 5. n noua fereastr verificai ca acelai nume de la pct.3 s fie nscris n caseta de la aceast pagin, pe ultima poziie (exemplu: C:\Documents and Settings\Ionescu\My Documents\Ionescu1; 6. Executai Next>; La ntrebarea How do you connect to your remote server? selectai rspunsul <None> i apoi apsai pe Next>; 7. Apsai pe <Done>. Crearea folderelor html i imagini 1. n panoul Files din dreapta, executai click cu butonul din dreapta mouse-ului pe site-ul creat. n meniul contextual care apare, executai click pe New Folder; 2. nlocuii untitled cu html; 3. Repetai paii 1 i 2 de mai sus i creai folder-ul imagini.

Crearea fiierului index.html i salvarea fiierului poza_reprezentativa.jpg i Ionescu.jpg n folderul imagini al siteului
1

1. Executai click cu butonul din dreapta al mouse-ului pe folder-ul html, apoi executai click pe New File; 2. Tastai numele fiierului index.html; 3. Prsii Dreamweaver. Activai Internet Explorer i cutai o poz reprezentativ pentru site-ul dumneavoastr i aducei-o pe desktop; 4. Cu browser-ul ncrcai poza n folderul imagini al site-ului creat anterior n directorul nscris la Local root (exemplu: C:\Documents and Settings\Ionescu\My Documents\Ionescu1\imagini se deschide i apoi se copiaz n el poza de pe desktop). 5. ncrcai poza dumneavoastr (Ionescu.jpg) pe desktop. Apoi copiai poza dumneavoastr n folderul imagini al site-ului, ca mai sus. Acum avei ambele imagini de care avei nevoie n folderul imagini al site-ului. Revenii n Dreamweaver. Parametrizarea paginii 1. Deschidei documentul index.html prin Window urmat de Files (sau dublu click pe fiierul index.html); 2. Executai click pe butonul Split; 3. Afiai caseta de dialog Page Properties apsnd butonul Page Properties...; 4. n aceast caset, alegei categoria Appearance i definii urmtorii parametri:

Page font: Arial, Helvetica, sans-serif Size: 24 pixels Background color: #FFFFF0

Apoi apsai OK. Atribuirea unui titlu paginii 1. n caseta de dialog Page Properties, executai click pe categoria Title/Encoding;
2

2. n zona Title introducei UPG Ploiesti; Sau Introducei n codul Ploiesti</title> . documentului, n zona <title>UPG

Introducerea planului paginii de index Vom introduce, sub form de tabel, planul paginii de index. 1. Deschidei documentul index.html. 2. Selectai Insert > Table. 3. n cutia de dialog Insert Table executai urmtoarele: - nscriei 3 la Rows; - nscriei 2 la Columns; - introducei 898 la Table Width; - introducei 0 la Border Thickness; - nscriei 0 la Cell Padding; - nscriei 0 la Cell Spacing. 4. Click O.K. Apare un tabel cu 3 rnduri i 2 coloane. Introducerea imaginii de baz a site-ului 1. Facem click n celula din prima linie/ prima coloan a tabelului. 2. Selectm Insert > Image. 3. n cutia de dialog care apare deschidem folderul imagini i apoi facem dublu click pe imaginea de baz a site-ului. Aceasta se aeaz n celula din prima linie/ prima coloan a tabelului. 4. Facem click n celula din prima linie/ a doua coloan a tabelului. 5. Repetm operaiile 2-3 de mai sus, selectnd poza Ionescu.jpg care se aeaz n cea de a doua celul din prima linie a tabelului. Cu
3

mouse-ul, ajustm dimensiunea pozei pentru a fi aliniat cu imaginea de baz a site-ului i a corespunde ca nlime cu aceasta. Acum avem partea de imagini a site-ului creat. Introducerea unui text n documentul index.html, introducem, n prima celul din rndul al doilea, textul : Scurt descriere a site-ului (titlu). Site-ul meu este creat cu aplicaia Adobe Dreamweaver CS4 i conine 7 pagini web care se regsesc n menuul alturat. 1. Executai click n fereastra Design a documentului index.html; 2. Introducei de la tastatur textul de mai sus, urmnd s-l formatai ulterior. Vizualizarea paginii Web ntr-un browser Acum putem vizualza pagina Web astfel construit ntr-un browser, de ex. n Internet Explorer: 1. Se apas pe File >Save; 2. Se activeaz File >Preview in Browser i se apas pe Iexplore sau Firefox; 3. Apar imaginile create i textul de mai sus n browser; Observaie: fiierul index.html aparine site-ului creat de noi i poate fi activat direct din browser (n afara Dreamweaver) prin dublu click. Inserarea textului cuprinsului S creem acum textul cuprinsului paginii de index, care va avea legturi la fiecare pagin web menionat n cuprins: 1. Facei click n a doua celul din rndul al doilea al tabelului; 2. nscriei urmtoarele cuvinte, desprite prin cte un blanc: CV Definitia culturii Schimburi interculturale Analiza Geert Hofstede
4

Modelarea UML Album foto Adresa contact. Nu apsai enter n timp ce tiprii! 3. Cu punctul de inserie nc n celul, facei click pe tag-ul td n tag selector situat n josul paginii. 4. n Inspectorul Property selectai Top din menuul Vert ceea ce va face ca textul introdus s se alinieze n vrful celulei. 5. Salvai pagina Web ca mai sus (File-Save). Inserarea legturilor hypertext Putei converti orice resurs ntr-un link, dar cel mai adesea se folosete textul. Pentru a crea legturi, va trebui s avem generate cte o pagin cu extensia .htm pentru fiecare din rubricile menuului. 1. n pagina index.html a site-ului, selectai cuvntul CV. 2. n Inspectorul Property facei click pe icon-ul folder care urmeaz dup cutia Link sau executati Insert >Hyperlink. 3. n caseta de dialog Select File care se deschide, navigai ctre fiierul CV.html i facei click pe OK. 4. Facei click pe pagin pentru a deselecta cuvntul CV. Acesta va deveni subliniat cu albastru, ceea ce indic efectuarea link-ului. 5. Repetai paii 1-4 de mai sus, pentru fiecare cuvnt sau grup de cuvinte din textul creat, care indic o rubric separat a menuului. Fiecare din aceste rubrici vor fi deveni subliniate cu albastru, indicnd efectuarea link-urilor. 6. Salvai pagina i probai efectuarea link-urilor cu ajutorul Preview in Browser. Revenii. Crearea unei foi de stil externe O foaie de stil extern are extensia .css i conine un ansamblu de stiluri care poate fi ataat oricrei pagini web.

Stilul este o regul de formatare care const din dou pri: selectorul (sau identificatorul) i declaraia. Exist urmtoarele tipuri de stiluri: Class permit aplicarea proprietilor unui stil tuturor elementelor unei pagini; HTML tag redefinete formatarea unui anume tag HTML (ex.h1). La modificarea stilului, ntregul text formatat cu acesta se modific. Advanced styles redefinete formatarea unei anumite combinaii de elemente (ex.td h2); De asemenea, se poate redefini formatarea tag-ului care conine un atribut id specific (ex.id=myStyle). Foile de stil externe sunt legate prin link (n seciunea head a documentului) la una sau mai multe pagini web ale site-ului. Foile de stil interne sunt colecii de reguli incluse ntr-un tag de stil direct n poriunea head a documentului HTML la care se aplic. Exemplu S creem o foaie de stil extern care conine o regul CSS pentru un paragraf de text. 1. Selectai File >New. 2. n cutia de dialog New Document, asigurai-v c avei Blank Page, selectai CSS din coloana Page Type i apoi facei click pe Create. Apare o foaie de stil alb (butoanele Design view i Code view sunt anulate). 3. Salvai pagina ca Ionescu.css n folderul rdcin html. 4. Tiprii urmtorul cod n foaia de stil: p{ font-family: Verdana, Sans-serif; font-size: 11 px; color: #000000; line-height: 18px;
6

padding: 3px; } Obsrvaie: Pe msur ce tiprii, Dreamweaver v sugereaz opiuni pentru completare. 5. Salvai foaia de stil. Ataarea unei foi de stil n acest scop : 1. n fereastra Document deschidei index.html. 2. n celula primei coloane din rndul al doilea se completeaz : Scurt descriere a site-ului <enter> Site-ul meu este creat cu aplicaia Adobe Dreamweaver CS4 i conine 7 pagini web care se regsesc n menuul alturat. <enter> 3. Selectai textul primului paragraf. V uitai n Inspectorul Property. Dac acesta spune none selectai Paragraph. Repetai acelai lucru pentru paragraful al doilea. 4. n panoul CSS styles click Attach Style Sheet (vezi semnul de ataare). 5. n cutia de dialog Attach External Style Sheet click browse i navigai ctre Ionescu.css pe care tocmai l-ai creat. 6. Click OK. Textul va fi formatat. Observaie: Putem aduce de oriunde cele dou paragrafe de text i apoi s le formatm urmnd procedura descris mai sus. Crearea unei noi reguli CSS 1. n panoul CSS Styles click New CSS Rule (n colul din dreapta jos al panoului, semnul +). 2. n cutia de dialog selectai Selector Type: class. 3. Introducei .bold n Name (atenie la punct). 4. Verificai c Ionescu.css este selectat.
7

5. Click OK. n cutia de dialog CSS Rule Definition care apare, se indic crearea unui stil clas numit .bold n fiierul Ionescu.css. 6. n cutia de dialog CSS Rule Definition nscriei urmtoarele: Font: Verdana, Sans-serif; Size: 11 i setai pixeli; Line Height: 18 i setai pixeli; Weight: selectai bold; Color: introducei #990000 7. Click OK 8. Dac facei click All n panoul CSS Styles, vei vedea noua regul .bold definit n foaia de stil extern. Aceasta apare i n menuul pop-up Style al Inspectorului Property. Aplicarea unui stil clas textului 1. n fereastra index.html selectai primul paragraf. 2. n Inspectorul Property, selectai bold n menuul Targeted Rule. Stilul clas bold va fi aplicat textului selectat. 3. Salvai pagina. Formatarea textului bar de navigaie Crearea unei noi reguli pentru navigare 1. Deschidei Ionescu.css. 2. Definii o nou regul, tiprind urmtorul cod, dup .bold: .navigation{ } Aceasta este o regul vid. 3. Salvai Ionescu.css
8

Acum vei utiliza panoul CSS Style pentru a aduga proprieti acestei reguli. 4. Open index.html 5. n panoul CSS Style selectai All (implicit). Selectai .navigation i click Edit Style (semnul cu creionul n jos) 6. n caseta de dialog CSS Rule Definition executai urmtoarele: Font: Verdana, sans-serif Size: 16 pixels Style: Normal Decoration: None Weight: bold Color: #FFFFFF 7. Click OK Acum adugm mai multe proprieti regulei .navigation 8. n panoul CSS Style, pentru regula .navigation selectat, click pe Show List View (butonul cu AZ sgeat). Se afieaz toate proprietile n ordine alfabetic. 9. Rulai n jos i facei click pe background-color n dreapta. Introducei #993300 i enter. 10. Locai proprietatea display (rulnd mai jos), facei click dreapta pe ea i apsai block Word-spacing: 8px Letter-spacing:normal Vertical-align:baseline Text-align:left Text-indent:3px White-space:normal Display:list-items

Aplicarea regulei, textului barde navigaie 1. Cu index.html deschis, click cuvntul CV (punctul de inserie n interiorul cuvntului) 2. n tag selector, click <a>. Aceasta selecteaz tot textul pentru tag-ul specificat, sau link. 3. n Inspectorul Property, selectai navigation din menuul pop-up Style. 4. n fereastra Document, forma textului CV se modific total. Textul este acum formatat ca buton al barei de navigaie, n acord cu proprietile regulei .navigation pe care ai definit-o. 5. Repetai paii 1-3 pentru fiecare din link-urile individuale din bara de navigaie. Cnd ai terminat, salvai pagina i apoi vizualizai n Preview in Browser. Putei proba link-urile. Crearea unei noi reguli CSS pentru Copyright 1. n panoul CSS Styles click New CSS Rule (n colul din dreapta jos al panoului, semnul +). 2. n cutia de dialog selectai Selector Type: class. 3. Introducei .copyright n Name (atenie la punct). 4. Verificai c Ionescu.css este selectat. 5. Click OK. n cutia de dialog CSS Rule Definition care apare, se indic crearea unui stil clas numit .copyright n fiierul Ionescu.css. 9. n cutia de dialog CSS Rule Definition nscriei urmtoarele: Font: Verdana, Sans-serif; Font-size: 14 i setai pixeli; Line-height: 18 i setai pixeli; Font-weight: selectai bold;
10

Color: introducei #990000 10. Click OK 11. Dac facei click All n panoul CSS Styles, vei vedea noua regul .copyright definit n foaia de stil extern. Aceasta apare i n menuul pop-up Style al Inspectorului Property. Aplicarea noului stil clas textului copyright 1. n fereastra index.html, n celula din rndul al treilea, prima coloan, a tabelului nscriei textul Copyright . 2. Selectai paragraful. 4. n Inspectorul Property, selectai copyright n menuul Targeted Rule. Stilul clas .copyright va fi aplicat textului selectat. 5. Salvai pagina.

11