Crearea unui site in Adobe Dreamweaver CS Frincu Mihaela Hanelore

01 Crearea 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:\Work\Ionescu Ion\” sau „H:\Work\Ionescu 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 WindowCSS 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).

4. Executaţi clic pe butonul . 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.

8. Executaţi clic pe butonul . 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-family: Verdana, Geneva, sans-serif; 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-family: Verdana, Geneva, sans-serif; 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

următoarele proprietăţi: Categoria Type:

o Font-family: Verdana, Geneva, sans-serif; o Font-size: 14px; o Font-style: italic; o Font-weight: bold; o Color: #00F.

EXERCIŢIU


Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.text2”, cu


o Font-family: Verdana, Geneva, sans-serif; o Font-size: 12px; o Font-style: italic; o Color: #00F.

EXERCIŢIU


Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.th1”, cu


o Font-family: Verdana, Geneva, sans-serif; o Font-size: 14px; o Font-style: italic; o Font-weight: bold; o Color: #00F.

11

Categoria Border: o Border-top-style: solid; o Border-top-width: 2px; o Border-top-color: #00F; o Border-bottom-style: solid; 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-family: Verdana, Geneva, sans-serif; o Font-size: 12px; o Font-style: italic; o Color: #00F.

Categoria Border: o Border-bottom-style: solid; o Border-bottom-width: 1px; o Border-bottom-color: #00F.


EXERCIŢIU


Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.tsub1”, cu


o Font-family: Verdana, Geneva, sans-serif; o Font-size: 12px; o Font-style: italic;

12

o Color: #00F. Categoria Border:

o Border-bottom-style: solid; 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ă

„.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: Categoria Background:

o Background-color:#00F.

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 InsertTable.

5. Inseraţi un tabel cu 2 linii, 3 coloane, Cell-spacing: 0.

6. Executaţi clic pe butonul .

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 InsertImage.

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 PropertiesTargeted Rule.

4. Introduceţi în coloana 2, linia 2, textul: Ionescu Ion.

5. Aplicaţi acestui text stilul .texttitlu2, via panoul PropertiesTargeted 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.



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.


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.


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 Frincu Mihaela Hanelore

Design

Transcript of Crearea unui site in Adobe Dreamweaver CS Frincu Mihaela Hanelore