Crearea unui site in Adobe Dreamweaver CS Patrascu Frincu Mihaela Hanelore

01Crearea structurii site-ului
Etapa 1. Crearea site-ului
EXERCIŢIU
CREAREA UNUI NOU SITE
Creaţi un site sub Dreamweaver cu acelaşi nume ca al dumneavoastră
(Ionescu Ion, de exemplu), în mod local cu metoda avansată
(Advanced).
MENIUL SITE, NEW SITE…
1. În meniul Site executaţi clic pe New Site….
Remarcă. Se afişează caseta de dialog Site Definition for....
2. În caseta de dialog Site Definition for... activaţi zona Advanced.

2
3. În categoria Local Info, tastaţi numele site-ului „Ionescu
Ion”(opţiunea Site name) şi locaţia unde doriţi să creaţi site-ul:
„D:WorkIonescu Ion” sau „H:WorkIonescu Ion”
(opţiunea Local root folder).
4. În categoria Remote Info, în meniul derulant din caseta de dialog
Access, alegeţi None.
5. Executaţi clic pe butonul .

3
Etapa 2. Organizarea site-ului: crearea folderelor
EXERCIŢIU
CREAREA FOLDERELOR
Creaţi folderele html, imagini şi stiluri.
PANOUL FILES, NEW FOLDER
1. În panoul Files, executaţi clic cu butonul din dreapta al mouse-ului pe
site-ul Ionescu Ion. În meniul contextual, executaţi clic pe New
Folder.
2. Înlocuiţi untitled cu „html”.
3. Repetaţi paşii 1 şi 2 pentru a crea folder-ul „imagini”.
4. Repetaţi paşii 1 şi 2 pentru a crea folder-ul „stiluri”.

4
Etapa 3. Organizarea site-ului: crearea fişierelor
EXERCIŢIU
CREAREA FIŞIERELOR UTILIZATE ÎN CADRUL SITE-LUI
Creaţi în folder-ul html, următoarele fişiere:
 index.html – pagina de index a site-ului;
 cv_tabel.html – crearea unui Curriculum Vitae (modelul comun
european) cu ajutorul tabelelor.
NEW FILE
1. Executaţi clic cu butonul din dreapta al mouse-ului pe folder-ul html, iar
apoi executaţi clic pe New file.

5
2. Tastaţi numele fişierului, „index.html”.
3. Repetaţi pasul 1 şi tastaţi numele fişierului „cv_tabel.html”.
Etapa 4. Crearea foilor de stiluri externe
EXERCIŢIU
CREAREA FOII DE STILURI EXTERNE STIL_CV.CSS
Creaţi foaia de stiluri externe stil_cv.css.
1. În meniul File executaţi clic pe New…, Blank Page, CSS.
2. Apăsaţi clic pe butonul .
3. Salvaţi foaia de stiluri cu numele „stil_cv.css” în folder-ul stiluri (File,
Save, Save in: stiluri, ).
EXERCIŢIU
CREAREA UNUI STIL CSS
Creaţi în fişierul extern de stiluri stil_cv.css stilul .texttitlu de tip clasă, cu
următoarele proprietăţi:

6
 Categoria Type:
o Font-family: Verdana, Geneva, sans-serif;
o Font-size: 36px;
o Font-weight: bolder;
o Color: #FFFFFF.
 Categoria Background:
o Background-color:#00F.
 Categoria Block:
o Text-align: center.
MENIUL WINDOW, CSS STYLES, BUTONUL
1. Executaţi clic pe WindowCSS Styles.
Remarcă. În partea dreaptă a ecranului se afişează panoul CSS Styles.
2. Executaţi clic pe butonul (New CSS Rule).

7
Remarcă. Se afişează caseta de dialog New CSS Style.
3. În caseta de dialog New CSS Rule efectuaţi următoarele operaţii:
3.1. În câmpul Selector Type: selectaţi Class.
3.2. În câmpul Selector Name introduceţi numele stilului: „.texttitlu”.
3.3. În zona Define in: selectaţi (This document only).
Remarcă. Se afişează caseta de dialog CSS Rule Definition for .texttitlu.
5. În caseta de dialog CSS Rule Definition for .texttitlu in stil_cv.css,
categoria Type, efectuaţi următoarele operaţii:
5.1. În câmpul Font selectaţi familia de fonturi Verdana, Geneva,
sans-serif.
5.2. În zona Font-size: selectaţi 36 px.
5.3. În zona Font-weight: selectaţi bolder.
5.4. În zona Color alegeţi culoarea albă (#FFF).
6. În categoria Background, în câmpul Background-color selectaţi
culoarea #00F.

8
7. În categoria Block, în câmpul Text-align selectaţi center.
Remarcă. În panoul CSS Styles este afişat stilul definit, împreună cu proprietăţile
sale.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css, stilul de tip clasă
„.texttitlu2” cu următoarele proprietăţi:
 Categoria Type:
o Font-size: 24px;
o Font-weight: bolder;
o Font-style: normal;
o Color: #FFF.
 Categoria Block:
o Text-align: right.

9
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css, stilul de tip clasă
„.texttitlu3” cu următoarele proprietăţi:
 Categoria Type:
o Font-size: 16px;
o Font-weight: bold;
o Font-style: normal;
o Color: #FFF.
 Categoria Border:
o Border-bottom-style: solid;
o Border-bottom-width: medium;
o Border-bottom-color: #FFF.
Atenţie: Deselectaţi opţiunea Same for all înainte de a completa
proprietăţile pentru Border.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul „.listas”. Stilul este
folosit pentru formatarea elementelor unei liste şi are următoarea
proprietate:
 Categoria List:
o List-style-type: square.

10
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.text1”, cu
 Categoria Type:
o Font-size: 14px;
o Font-style: italic;
o Color: #00F.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.text2”, cu
 Categoria Type:
o Font-size: 12px;
o Color: #00F.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.th1”, cu
 Categoria Type:
o Font-size: 14px;
o Color: #00F.

11
o Border-top-style: solid;
o Border-top-width: 2px;
o Border-top-color: #00F;
o Border-bottom-width: 2px;
o Border-bottom-color: #00F.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.trow1”,
cu următoarele proprietăţi:
 Categoria Type:
o Font-size: 12px;
o Color: #00F.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.tsub1”, cu
 Categoria Type:
o Font-size: 12px;

12
o Color: #00F.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă
„.dimensiunetabel”, cu următoarele proprietăţi:
 Categoria Box:
o Width: 100 %;
o Padding: 0 px;
o Margin: 0 px.
Atenţie: Selectaţi opţiunea Same for all înainte de a completa
proprietăţile pentru Padding şi Margin.
EXERCIŢIU
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.celula”,
cu următoarele proprietăţi:
Remarcă. În panoul CSS Styles sunt afişate stilurile definite, împreună cu
proprietăţile lor.

13
Remarcă. Salvaţi foaia de stiluri externă, via File, Save.

14
02
Crearea unui Curriculum Vitae
(modelul comun european de CV) cu
ajutorul tabelelor
Noua pagină, pe care vă invităm să o creaţi în acest studiu de caz conţine un
Curriculum Vitae (CV), modelul european, a cărui structură a fost publicată
în Monitorul Oficial al României, din 13 iulie 2004.

15
Etapa 1. Definirea parametrilor paginii
EXERCIŢIU
PARAMETRIZAREA PAGINII
Definiţi următorii parametrii ai paginii cv_tabel.htm:
 Title: Curriculum Vitae.
MENIUL MODIFY, PAGE PROPERTIES, CATEGORIA
TITLE/ENCODING
1. Deschideţi documentul cv_tabel.htm.
2. Definiţi parametrii paginii folosind categoria Title/Encoding.

16
EXERCIŢIU
ATAŞAREA FIŞIERULUI EXTERN DE STILURI
Ataşaţi fişierul extern de stiluri cvstil.css din folder-ul stiluri.
PANOUL CSS STYLES, BUTONUL ATTACH STYLE
SHEET ( )
1. Ataşaţi fişierul extern de stiluri stil_cv.css din folder-ul stiluri, via
butonul Attach Style Sheet ( ).
Remarcă. Se afişează caseta de dialog Attach External Style Sheet.
2. Selectaţi fişierul de stiluri stil_cv.css, via butonul , iar în
zona Add as: selectaţi Link.
3. Acţionaţi butonul pentru validare.

17
Etapa 3. Structurarea secţiunilor CV-ului într-un tabel
EXERCIŢIU
INSERAREA UNUI TABEL
Inseraţi un tabel cu următoarele proprietăţi: Rows: 7; Columns: 2; Cell
spacing: 0 în documentul cv_tabel.htm. Aplicaţi acestui tabel stilul
.dimensiunetabel.
MENIUL INSERT, TABLE
1. Selectaţi opţiunea Table, via meniul Insert.
Remarcă. Se afişează fereastra Table.

18
2. În câmpul Rows introduceţi valoarea 7.
3. În câmpul Columns introduceţi valoarea 2.
4. În câmpul Cell spacing introduceţi valoarea 0.
5. Apăsaţi clic pe butonul .
6. Aplicaţi acestui tabel stilul .dimensiunetabel, via panoul Properties, în
zona Class.
Etapa 4. Crearea secţiunii de titlu a CV-ului
EXERCIŢIU
PARAMETRIZAREA ŞI INSERAREA UNUI TABEL
Fuzionaţi celulele din prima linie a tabelului de structură a CV-ului, iar
apoi inseraţi un tabel cu următoarele proprietăţi:
 Rows: 2;
 Columns: 3;
 Cell-spacing: 0.
În tabelul inserat fuzionaţi celulele din coloanele 1 şi 3.
INSPECTORUL PROPERTIES; MENIUL INSERT, TABLE
1. Selectaţi prima linie a tabelului.
2. În panoul Properties, executaţi clic pe butonul (Merges selected
cells using span) pentru a transforma această linie într-o singură celulă.

19
3. Executaţi clic în interiorul celulei.
4. Afişaţi caseta de dialog Table, via InsertTable.
5. Inseraţi un tabel cu 2 linii, 3 coloane, Cell-spacing: 0.
7. Aplicaţi acestui tabel stilul .dimensiunetabel.
8. Fuzionaţi celulele din coloana 1 utilizând butonul (Merges selected
cells using span) din panoul Properties.
9. Aplicaţi celului fuzionate stilul .celula.
10. Fuzionaţi celulele din coloana 3 utilizând butonul (Merges selected
cells using span) din panoul Properties.
11. Aplicaţi celului fuzionate stilul .celula.
EXERCIŢIU
INSERAREA ŞI PARAMETRIZAREA UNUI IMAGINI
Inseraţi în prima coloană a tabelului imagininea ue.jpg din folder-ul
imagini. Stabiliţi dimensiunile imaginii.
MENIUL INSERT; INSPECTORUL PROPERTIES
1. Inseraţi în prima coloană a tabelului imaginea ue.jpg, via meniul
InsertImage.
2. Selectaţi din folder-ul imagini, imaginea ue.jpg.
3. Parametrizaţi imagine utilizând panoul Properties, via câmpurile W şi H.

20
EXERCIŢIU
INSERAREA ŞI PARAMETRIZAREA UNEI IMAGINI
Inseraţi în coloana a treia a tabelului din folder-ul imagini, imaginea
ionescu.gif. Stabiliţi dimensiunile imaginii.
EXERCIŢIU
INTRODUCERE ŞI FORMATARE TEXT
Introduceţi în coloana 2, linia 1 textul Curriculum Vitae şi aplicaţi acestui
text stilul .texttitlu.
Introduceţi în coloana 2, linia 2 textul Ionescu Ion şi aplicaţi acestui text
stilul .texttilu2.
1. Introduceţi în coloana 2, linia 1, textul: Curriculum Vitae.
2. În panoul Properties, selectaţi butonul .
3. Selectaţi textul şi aplicaţi acestui text stilul .texttitlu, via panoul
PropertiesTargeted Rule.
4. Introduceţi în coloana 2, linia 2, textul: Ionescu Ion.
5. Aplicaţi acestui text stilul .texttitlu2, via panoul PropertiesTargeted
Rule.
6. Vizualizaţi pagina Web într-un browser.

21
Etapa 5. Crearea secţiunii Informaţii Personale
EXERCIŢIU
Introduceţi în coloana din stânga tabelului, linia a doua, textul: Informaţii
Personale. Aplicaţi acestui text stilul .texttitlu3.
INSPECTORUL PROPERTIES
1. Executaţi clic în celula din stânga (linia a doua a tabelului).
2. Introduceţi textul: Informaţii Personale.
Rule.

22
EXERCIŢIU
INSERAREA ŞI FORMATAREA UNUI TABEL
Inseraţi în coloana din dreapta tabelului, a doua linie, următorul tabel:
MENIUL INSERT, TABLE; INSPECTORUL PROPERTIES
1. Inseraţi un tabel cu 7 linii şi 3 coloane.
2. Introduceţi titlurile categoriilor secţiunii în prima coloană şi informaţiile
corespunzătoare în cea de-a treia coloană.

23
3. Aplicaţi stilurile de formatare: .text1 pentru prima coloană, respectiv
.text2 pentru ce-a de-a treia coloană.
Etapa 6. Crearea secţiunii Experienţă Profesională
EXERCIŢIU
Introduceţi în coloana din stânga tabelului, linia trei, textul: Experienta
Profesionala.

24
1. Executaţi clic în celula din stânga (linia a treia a tabelului).
2. Introduceţi textul: Experienta Profesionala.
Rule.
EXERCIŢIU
Inseraţi în coloana din dreapta tabelului, linia trei, următorul tabel:
.
Aplicaţi stilurile: .th1 pentru celulele din linia de antet a tabelului, .tsub1
pentru celulele din ultima linie a tabelului şi .trow1 pentru celelalte linii
ale tabelului.
Etapa 7. Crearea secţiunii Educaţie şi Formare
EXERCIŢIU
Introduceţi în coloana din stânga tabelului, linia patru, textul: Educaţie şi
Formare. Aplicaţi acestui text stilul .texttitlu3.

25
1. Executaţi clic în celula din stânga (linia patru a tabelului).
2. Introduceţi textul: Educaţie şi Formare.
Rule.
EXERCIŢIU
Inseraţi în coloana din dreapta tabelului, linia patru, următorul tabel:
.
Aplicaţi stilurile: .th1 pentru celulele din linia de antet a tabelului, .tsub1
pentru celulele din ultima linie a tabelului şi .trow1 pentru celelalte linii
ale tabelului.
Etapa 8. Crearea secţiunii Aptitudini şi Competenţe
EXERCIŢIU
Introduceţi în coloana din stânga tabelului, linia cinci, textul: Aptitudini şi
Competente. Aplicaţi acestui text stilul .texttitlu3.

26
EXERCIŢIU
Inseraţi în coloana din dreapta tabelului, linia cinci, următorul tabel:
Aplicaţi stilurile: .text1 pentru coloana din stânga, respectiv .text2 pentru
coloana din dreapta tabelului. Pentru elementele listei folosiţi stilul .listas.
1. Inseraţi un tabel cu 7 linii, 3 coloane, Cell-spacing: 0. Aplicaţi acestui
tabel stilul .dimensiunetabel.
2. Introduceţi textul din coloana din stânga. Aplicaţi acestui text stilul
.text1.
3. Introduceţi textul din coloana din dreapta. Aplicaţi acestui text stilul
.text2.
4. Pentru realizarea unei liste, parcurgeţi următoarele etape:
4.1. În panoul Properties, apăsaţi clic pe butonul .
4.2. Pentru a crea o listă ordonată, apăsaţi clic pe butonul .
4.3. Introduceţi elementele listei.
4.4. Pentru identarea elementelor listei, folosiţi butonul .
4.5. Pentru a crea o listă neordonată, apăsaţi clic pe butonul .
5. Aplicaţi listei neordonate stilul .listas.

27
Etapa 9. Crearea secţiunii Informaţii Suplimentare
EXERCIŢIU
Introduceţi în coloana din stânga tabelului, linia şase, textul: Informaţii
Suplimentare. Aplicaţi acestui text stilul .texttitlu3.
EXERCIŢIU
Inseraţi în coloana din dreapta tabelului, linia şase, următorul tabel:
Aplicaţi stilurile: .th1 pentru prima linie, .tsub1 pentru ultima linie,
respectiv .trow1 pentru celelalte linii ale tabelului.
Etapa 10. Crearea secţiunii Anexe
EXERCIŢIU
Introduceţi în coloana din stânga tabelului, linia şapte, textul: Anexe.
Aplicaţi acestui text stilul .texttitlu3. Inseraţi în coloana din dreapta
tabelului textul:
Aplicaţi acestui text stilul .text1.

28
Etapa 11. Vizualizarea paginii Web într-un browser
EXERCIŢIU
AFIŞAREA PAGINII WEB ÎNTR-UN BROWSER
Vizualizaţi pagina Web într-un browser.
TASTA F12
În figura de mai jos se prezintă pagina Web afişată în Mozilla Firefox.

Crearea unui site in Adobe Dreamweaver CS Patrascu Frincu Mihaela Hanelore

Recomendados

Recomendados

Más contenido relacionado

Más de Marketing Communication Health &Medicine

Más de Marketing Communication Health &Medicine (20)

Crearea unui site in Adobe Dreamweaver CS Patrascu Frincu Mihaela Hanelore