Post on 06-Aug-2015
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
CREAREA UNUI STIL CSS
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 Background: o Background-color:#00F.
Categoria Block: o Text-align: right.
9
EXERCIŢIU
CREAREA UNUI STIL CSS
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 Background: o Background-color:#00F.
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
CREAREA UNUI STIL CSS
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
CREAREA UNUI STIL CSS
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
CREAREA UNUI STIL CSS
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.text2”, 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.
EXERCIŢIU
CREAREA UNUI STIL CSS
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.th1”, 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.
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.
Atenţie: Deselectaţi opţiunea Same for all înainte de a completa proprietăţile pentru Border.
EXERCIŢIU
CREAREA UNUI STIL CSS
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.
Atenţie: Deselectaţi opţiunea Same for all înainte de a completa proprietăţile pentru Border.
EXERCIŢIU
CREAREA UNUI STIL CSS
Creaţi în fişierul extern de stiluri stil_cv.css stilul de tip clasă „.tsub1”, cu
următoarele proprietăţi: Categoria Type:
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.
Atenţie: Deselectaţi opţiunea Same for all înainte de a completa proprietăţile pentru Border.
EXERCIŢIU
CREAREA UNUI STIL CSS
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
CREAREA UNUI STIL CSS
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
INTRODUCERE ŞI FORMATARE TEXT
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.
3. Aplicaţi acestui text stilul .texttitlu3, via panoul PropertiesTargeted Rule.
4. Vizualizaţi pagina Web într-un browser.
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ă.
4. Vizualizaţi pagina Web într-un browser.
Etapa 6. Crearea secţiunii Experienţă Profesională
EXERCIŢIU
INTRODUCERE ŞI FORMATARE TEXT
Introduceţi în coloana din stânga tabelului, linia trei, textul: Experienta
Profesionala.
24
INSPECTORUL PROPERTIES
1. Executaţi clic în celula din stânga (linia a treia a tabelului).
2. Introduceţi textul: Experienta Profesionala.
3. Aplicaţi acestui text stilul .texttitlu3, via panoul PropertiesTargeted Rule.
EXERCIŢIU
INSERAREA ŞI FORMATAREA UNUI TABEL
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
INTRODUCERE ŞI FORMATARE TEXT
Introduceţi în coloana din stânga tabelului, linia patru, textul: Educaţie şi
Formare. Aplicaţi acestui text stilul .texttitlu3.
25
INSPECTORUL PROPERTIES
1. Executaţi clic în celula din stânga (linia patru a tabelului).
2. Introduceţi textul: Educaţie şi Formare.
3. Aplicaţi acestui text stilul .texttitlu3, via panoul PropertiesTargeted Rule.
EXERCIŢIU
INSERAREA ŞI FORMATAREA UNUI TABEL
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
INTRODUCERE ŞI FORMATARE TEXT
Introduceţi în coloana din stânga tabelului, linia cinci, textul: Aptitudini şi
Competente. Aplicaţi acestui text stilul .texttitlu3.
26
EXERCIŢIU
INSERAREA ŞI FORMATAREA UNUI TABEL
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.
INSPECTORUL PROPERTIES
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
INTRODUCERE ŞI FORMATARE TEXT
Introduceţi în coloana din stânga tabelului, linia şase, textul: Informaţii
Suplimentare. Aplicaţi acestui text stilul .texttitlu3.
EXERCIŢIU
INSERAREA ŞI FORMATAREA UNUI TABEL
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
INTRODUCERE ŞI FORMATARE TEXT
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.