TIC & Competenţe Digitale - Volumul 1

http://www.infobits.ro/Document descarcat de pe:

Carmen Popescu Vlad Tudor

Tehnologia Informaţiei şi a Comunicaţiilor Competenţe digitale

Volumul 1

Windows, Word, Paqini Web, Adobe Photoshop

Respectă programa şcolară aflată În vigoare. Conţinutul a fost aprobat de MECTS.

I L&S lnro-mdt I

Copyright 2011-2015 © L&S INFO-MAT Toate drepturile asupra acestei lucrări aparţin editurii L&S INFO-MAT. Reproducerea integrală sau parţială a textului din această carte este posibilă doar cu acordul în scris al editurii L&S INFO-MAT.

Descrierea CIP a Bibliotecii Naţionale a României POPESCU, CARMEN

Tehnologia informaţiei şi a comunicaţiilor & competenţe digitale I Carmen Popescu, Vlad Tudor. - Bucureşti: Editura L & S Info-Mat, 2011

2 vol. ISBN 978-973-7658-24-1 Voi. 1.: Windows, Word, Pagini Web, Adobe Photoshop. - 2011. -

ISBN 978-973-7658-25-8 I. Tudor, Vlad 004

Editura L&S Info-mat

Adresa: Str. Stânjeneilor nr. 6, bl. 30, sc. A, et. 1, apt. 11, sector 4, Bucureşti; Tel/Fax: 031-105.62.84; Mobil: 0722-57.37.01; 0749-99.77.07; E-mail: [email protected];

www.ls-infomat.ro www.competente-digitale.ro www.manuale-de-informatica.ro

Bibkoteca Digitală de Infarmatică 'Tudor Sorin" www.infobits.ro

Tehnologia Informaţiei şi a Comunicaţiilor Competenţe digitale

Volumul 1

Windows, Word, Paqini Web, Adobe Photoshop

[§fil infobits.ro

Materia le în format digital oferite g ratuit

Laboratorul virtual de Informatică şi TIC, lab.infobits.ro, care aparţine Bibliotecii Digitale de Informatică „Tudor Sorin", www. infobits.ro, găzduieşte noţiuni teoretice şi aplicaţii practice care sunt complementare materialelor tipărite de editura noastră.

Această carte şi materialele din cadrul laboratorului virtual de Informatică şi TIC respectă programa şcolară aflată în vigoare şi au fost aprobate de MECTS prin Ordinul nr. 4188/02.07.2004.

Puteţi accesa online următoarele materiale, structurate conform programei şcolare pentru examenul de Competenţe Digitale (proba practică D) din cadrul examenului de Bacalaureat:

)o> Concepte de bază ale Tehnologiei Informaţiei (IT) http://lab.infobits.ro/ competente-digitale/ concepte-it

1. Introducere 2. Monitorul 3. Unitatea centrală 4. Dispozitive de stocare a informaţiei 5. Tastatura şi mouse-ul 6. Imprimanta şi scanner-ul 7. Modemul 8. Alte dispozitive periferice 9. Hardware şi software 10. Software 11. Dreptul de autor pentru produse software 12. Ce sunt retelele de calculatoare ' 13. Drepturi de acces 14. Viruşi informatici şi antiviruşi 15. Protejaţi-vă sănătatea!

6 lehnologia Informaţiei şi a Comunicaţiilor

).- Informaţie şi comunicare http:/ /lab.infobits.ro/ competente-digitale/informatie-comunicare

1. Ce este Internet-ul? 2. Găzduirea web. HTML, HTTP, URI, URL şi DNS 3. DNS: aplicaţie practică 4. Browser-e web. Internet Explorer 8 5. Motoare de căutare 6. Poşta electronică (e-mail) 7. Compresia fişierelor 8. Transferul datelor prin FTP 9. Enumerarea serviciilor oferite de Internet 10. Utilizarea serviciului de conversaţie (chat) 11. Particularităţi ale comunicaţiei pe Internet

).- Teste grilă de evaluare a cunoştinţelor http:/ /lab.infobits.ro/ quickquiz/

).- Exemple, studii de caz, aplicaţii practice, software educaţional pentru elevii din ciclul primar şi gimnaziu http:/ /lab.infobits.ro/

).- Articole ştiinţifice şi cărţi în format digital http:/ /www.infobits.ro/

Aveţi o idee despre o anumită aplicaţie practică care poate fi utilă? Perfect! Trimiteţi un e-mail cu materialul dvs. În format .pdf (2-3 pagini) la adresa office@infobits. ro. Acest laborator virtual a fost creat pentru dvs. şi fiind uşor de actualizat, orice propunere sau sugestie este binevenită! Implicaţi-vă!

Cuprins

Capitolul 1 - Sistemul de operare Windows 15

1.1. Desktop-ul 15

1.2. Cum deschidem şi cum închidem calculatorul? 16

1.3. Explorarea calculatorului 17 • Vizualizarea informatiilor referitoare la resursele '

hardware şi software ale calculatorului 17 • Explorarea dispozitivelor de stocare a informaţiei 18 • Explorarea conţinutului unui dispozitiv de stocare a informaţiei 20 • Folder-e (dosare) 21 • Mai mult despre fişiere 22

1.4. Interfaţa program-utilizator 24 • Ferestre 24 • Unelte 26

1.5. Tehnici de informare a utilizatorului 33

1.6. Windows Explorer 35 • Structura folder-elor 36 • Navigarea cu Windows Explorer 36 • Modalităţi de vizualizare a folder-elor şi fişierelor 37

1.7. Operaţii cu fisiere/ folder-e 39 • Crearea unui folder 39 • Schimbarea numelui unui fişier/ folder 40 • Selectarea fişierelor/ folder-elor 40 • Copierea fişierelor/ folder-elor 41 • Mutarea fişierelor/ folder-elor 41 • Ştergerea fişierelor/ folder-elor 41

1.8. Crearea scurtăturilor (shortcut-urilor) 43

1.9. Taskbar-ul (bara cu task-uri) 45 • Ce este un task? 45 • Cum sunt afişate task-urile? 45 • Meniul ataşat butonului Start 47 • Personalizarea Taskbar-ului SO

8 lehnologia Informaţiei şi a Comunicaţiilor

• Adăugarea şi ştergerea unor programe din meniul Start • Lansarea rapidă în executare

1. 10. Introducerea textului (cu Notepad) • Generalităti •

•

•

•

•

' Prezentarea programului Introducerea textului Salvarea şi încărcarea textului Selectarea, copierea şi mutarea textului Identificarea cuvintelor

1. 1 1. Font-uri •

•

•

•

Ce sunt font-urile? Gestiunea fonturilor Caracteristicile fonturilor Cum stabilim font-ul în Notepad?

1. 12. Afişarea imaginilor • Imagini bitmap monocrome (alb/negru) • Codificarea culorilor • Imagini bitmap în culori • Parametri de afişare a imaginilor pe monitor • Setări privind afişarea pe monitor • Programe de protejare a monitorului şi de punere

a calculatorului în regim de economie a energiei

1. 13. Realizarea desenelor cu Paint •

•

•

•

•

•

•

•

Notiuni introductive ' Utilizarea culorilor Realizarea desenelor Selectarea unei porţiuni de desen Operaţii asupra porţiunilor selectate Modificarea culorilor din paletă Alte operaţii efectuate în Paint Alte formate grafice

1. 14. Personalizarea modului în care Windows răspunde comenzilor

52 53

54 54 54 55 56 57 57

58 58 59 59 60

61 61 61 62 64 65

67

69 69 70 70 73 73 75 76 78

date de utilizator 79 • Generali tăti ' • Modificarea asocierilor fişier-program

1. 15. Instalare şi dezinstalare • Instalarea şi dezinstalarea unor aplicaţii livrate

odată cu Windows-ul

79 82

85

85

Cuprins

•

•

•

Instalarea şi dezinstalarea diverselor aplicaţii Instalarea şi dezinstalarea font-urilor Instalarea driver-elor

1. 16. Cum utilizăm anumite aplicaţii livrate odată cu Windows-ul? • Suport pentru caracterele româneşti • Character Map • Disk Defragmenter • Disk Cleanup • Scheduled Tasks (programarea task-urilor)

1. 17. Utilizarea imprimantei

1. 18. Cum lucrăm în Windows fără mouse?

Capitolul 2 - Procesorul de texte MS Word

2. 1. Generalităti ' • Crearea unui document nou • Deschiderea unui document •

•

•

•

•

•

•

•

•

•

•

Salvarea unui document Selectarea textului Memoria clipboard. Operaţiile Copy, Cut şi Paste Ştergerea textului Anularea comenzii anterioare (Undo) Subscript şi superscript Dimensiunea de vizualizare a paginii (Zoom) Autodocumentarea / Ajutorul (Help) Închiderea unui document Alegerea unităţii de măsură Găsirea şi/ sau înlocuirea unor şiruri de caractere

2.2. Formatarea paginii • Alegerea formatului • Dimensionarea marginilor • Antetul (header-ul) şi subsolul (footer-ul)

2.3. Cum scriem în antet şi în subsol?

2.4. Nota de subsol

2.5. Numerotarea paginilor

2.6. Font-uri

9

86 87 88

89 89 91 92 92 94

95

96

98

98 99 99

100 101 101 102 102 102 102 103 103 103 104

105 105 106 106

107

108

109

109

1 0 lehnologia Informaţiei şi a Comunicaţiilor

2.7. Paragrafe • Alinierea •

•

•

•

•

•

Indentarea Marcarea sau numerotarea paragrafelor Stabilirea spaţiului care trebuie lăsat automat înainte şi după scrierea unui paragraf Spaţierea liniilor Paginarea Încadrarea paragrafelor în chenare

2.8. Tab-uri

2.9. Editarea formulelor

2. 1 O. Vizualizarea caracterelor de formatare a textului

2. 1 1. Şabloane şi stiluri

2. 12. Tipărirea documentului

2. 13. Cutii text (Text Box)

2. 14. Realizarea desenelor • Trasarea segmentelor de dreaptă (Line) • Trasarea săgeţilor (Arrow) • Trasarea dreptunghiurilor (Rectangle) • Modificarea parametrilor formelor • Efecte de umbrire •

•

•

•

Efecte tridimensionale Suprapunerea obiectelor Gruparea obiectelor Rotirea obiectelor

2. 15. Introducerea imaginilor • Inserarea imaginii dintr-un fişier • Inserarea unei selecţii prin comanda Paste • Inserarea unei imagini conţinute de Word • Callouts •

•

•

WordArt sau scrierea artistică Poziţionarea imaginilor Ajustarea imaginilor

2. 16. Scrierea textului în coloane

111 111 111 113

114 114 115 115

117

119

120

121

124

125

127 127 128 128 128 130 131 131 133 134

135 135 135 136 136 137 137 139

140

Cuprins

2. 17. Break-uri

2. 18. Sectiuni '

2. 19. Tabele •

•

•

•

•

•

•

•

•

•

•

•

•

•

•

Crearea unui tabel Scrierea continutului tabelului ' Aşezarea tabelului În pagină Ştergeri Mutarea tabelului prin drag-and-drop Inserări Selectări Înăltimea liniilor ' Lătimea coloanelor ' Formatarea celulelor Contopirea celulelor (optiunea Merge cells) Împărtirea unei celule (o�tiunea Split cells) Împăr�rea unui tabel (Spht table) Alte setări Crearea graficelor (Charts)

2.20. Word-ul şi Internet-ul

2.21. Corectura automată • Setarea limbii • Corectarea paragrafului

2.22. Câteva principii de formatare

Aplicaţii propuse

Capitolul 3 - Crearea paginilor web

3. 1. Primii paşi spre construcţia unui site • Introducere •

•

•

•

•

Site-uri web Cum scriem un fişier HTML? Comentarii în documentul HTML Editoare / validatoare HTML Web Content Management Systems (WCMS)

3.2. Limbajul HTML - primele noţiuni • Structura de bază a unui document HTML • Introducerea textelor

1 1

141

142

143 143 144 145 147 148 148 149 150 150 150 151 151 152 152 153

154

156 156 156

157

158

161

161 161 162 165 167 168 168

170 170 171


• Alte elemente care permit formatarea textului • Elementul <pre> • Elementele <nobr> şi <wbr>

3.3. Introducerea listelor 3.4. Introducerea imaginilor 3.5. Tabele

• Exercitii rezolvate '

3.6. Hyperlegături (link-uri, ancore) • Elementul <a> •

•

•

•

Legături către alte pagini web Operaţia de descărcare (download) Legături relative la document Trimiterea automată a unui e-mail

3. 7. Hărţi imagine • Introducere • Cum se introduce în HTML o hartă imagine? • Programul Map This!

3.8. Elementele <base>, <meta> şi <script>

3.9. Aşezarea implicită a diverselor elemente 3. 1 O. Caractere HTML Llmbajul HTML -probleme propuse

3. 1 1. Stiluri. Limbajul CSS • Notiuni introductive ' • Structura unui element HTML •

•

•

•

•

•

•

•

•

•

•

•

•

Atribute pentru font şi text Atribute de culoare şi fond Atribute pentru margini Atribute pentru padding Atribute pentru bordură Cum se creează un stil pentru un anumit element? Modalităţi de aşezare în pagină a elementelor Atributul display Aplicarea stilurilor prin fişiere CSS externe Aplicarea stilurilor inline Combinarea modurilor de utilizare a stilurilor Elementele generice <div> şi <span> Includerea animatiilor Flash '

173 177 177

178

181

184 190

193 193 193 194 194 195

196 196 197 199

202

204

205

207

209 209 210 212 216 218 219 219 220 221 224 225 226 227 228 229

Cuprins 13

3. 12. Aspecte generale ale proiectării interfeţelor web 230

Limbqjele HfML şi CSS -probleme propuse 233

Capitolul 4 - Bazele prelucrării imaginilor în Adobe Photoshop 234

4. 1. Introducere 234

4.2. Crearea, deschiderea, salvarea şi închiderea unui fişier imagine 236 • Formatul .psd 237 • Deschiderea simultană a mai multor fişiere 237

4.3. Selectări 238 •

•

•

•

Rectangular Marquee T ool Lasso Tool Magic Wand Tool Zoom Tool

4.4. Căi. Instrumentul Pen Tool • Instrumentul Path Selection Tool

4.5. Layer-e (straturi) • Generalităti ' • Instrumentul Move Tool • Opacitatea (transparenţa) layer-elor • Vizualizarea numai a unor layer-e • Ordinea layer-elor • Legarea layer-elor • Asigurarea layer-elor • Crearea şi ştergerea layer-elor • Adăugarea de text imaginilor

4.6. Filtre

4.7. Culori •

•

•

•

•

Modele de culoare Canale de culoare Histograma imaginilor Prelucrarea culorilor Stabilirea culorilor

4.8. Realizarea desenelor

4.9. Modalităţi de ştergere

238 241 243 244

245 248

249 249 250 252 253 254 256 257 257 258

259

260 260 261 262 264 268

270

272


4. 1 O. Desenarea figurilor geometrice

4. 1 1. Măşti rapide

4. 12. Decupări din imagine

4. 13. Gradient

4. 14. Alte instrumente specializate în prelucrarea imaginilor

4. 15. Preluarea culorilor dintr-o imagine

4. 16. Salvarea în formatul . jpg sau .png • Salvarea În formatul .jpg • Salvarea În formatul .png

Anexa 1 - Caractere HTML

274

275

276

277

278

281

282 282 283

284

CAPITOLUL 1

Sistemul de operare WINDOWS

1 . 1 . Desktop-ul

După ce am deschis calculatorul, monitorul afişează o unagme asemănătoare celei de mai jos (versiunea Windows 7):

Icon

Buton Start Taskbai: Suprafaţa Desktop System tray

Imaginea care a apărut se numeşte Desktop şi trebuie privită ca o "poartă" de intrare a oricărei activităţi pe care urmează să o desfăşurăm la calculator.

Pentru moment, ne limităm la a prezenta numele principalelor componente care alcătuiesc Desktop-ul. Citind paragrafele următoare veţi înţelege şi rolul lor.

a) Icon - se ma1 numeşte şi pictogramă. Desktop-ul conţine ma1 multe icon-uri (pictograme).

b) Taskbar - bara de activităţi. c) System tray - zona sistem.

1 6 Tehnologia Informaţiei şi a Comunicaţiilor

1 . 2 . Cum deschidem şi cum închidem calculatorul'?

Deschiderea calculatorului se face prin apăsarea butonului de pornire a acestuia. Vom aştepta să se Încarce sistemul de operare.

Închiderea calculatorului este la fel de importantă. Este o mare greşeală ca această operaţie să se facă numai prin scoaterea acestuia de sub tensiune, prin apăsarea butonului cu ajutorul căruia l-am pornit. Dacă am proceda aşa am avea următoarele dezavantaje:

� la pornire se pierde timp prin testele suplimentare care se fac înainte de a putea utiliza calculatorul;

� se pot pierde datele pe care le-am introdus cât timp am lucrat la calculator.

Închiderea calculatorului se realizează astfel:

1. Se aşează cursorul mouse-ului pe suprafaţa butonului Start. 2. Se apasă butonul stâng al mouse-ului, simulând astfel apăsarea

butonului. Apare un meniu ataşat butonului Start. De altfel, acest meniu se numeşte meniul Start:

(!!I Microsoft Office Word 2003

Notepad

Calculator

Paint

Getting Started

Windows Media (enter

SticlcyNot6

All Programs

lJiiarch programs and filos �

Windows 7

� My Recent Oocuments „

;!) My Pictures

_J MyMusic

,gi My Computer

My Network Places

(} Control Panel

'4J' ��=��ram Access and

� Printers and faxes

� Help and Support

;J search

Windows XP

Capitolul 1 - Sistemul de operare WINDOWS 1 7

3. Efectuaţi clic pe butonul Shut Down. De asemenea, aveţi posibilitatea de a selecta alte opţiuni dacă daţi clic pe săgeata din dreptul butonului Shut Down. Aceste opţiuni sunt (vers. Window Vista / 7):

Switch user - se comută controlul altui utilizator, aplicaţiile utilizatorului curent nu sunt Închise; Log off - utilizatorul curent se deconectează, aplicaţiile sale sunt închise automat, însă calculatorul rămâne pornit; Restart - reporneşte calculatorul (util după instalarea unor noi programe); Sleep - sesiunea curentă rămâne pornită, însă calculatorul este adus într-o stare în care se economiseşte energia; Hibernate - sesiunea curentă este salvată, calculatorul este oprit, iar la repornirea calculatorului, sesiunea este restaurată.

,/ În cazul sistemului de operare Windows XP, din meniul Start apelaţi comanda Turn off computer, apoi Turn off.

,/ La versiunile mai vechi, cum ar fi Windows 2000, la apăsarea butonului Shut Down apare caseta de dialog din figura alăturată. Opţiunea Shut Down este implicită, dar puteţi selecta din listă şi alte opţiuni. După selectarea opţiunii dorite se apasă butonul OK Dacă apăsăm Cancel operaţia se anulează.

1 .3. Explorarea calculatorului

hut Down Windows

What do you want the computer to do?

§ll'·Ni· Ends your session and shuts down Windows so that you can safely turn off power.

OK Cane el

Vizualizarea informaţ.iilor referitoare la resursele hardware şi software ale calculatorului

Priviţi icon-ul alăturat. Se găseşte pe Desktop. Cu ajutorul lui putem lansa în executare o aplicaţie care permite, printre multe altele, explorarea calculatorului pe care lucrăm.

,/ În cazul Windows XP, pictograma se numeşte My Computer.


Atunci când cursorul mouse-ului se găseşte deasupra sa, executaţi clic cu ajutorul butonului drept al acestuia. Va apărea un meniu flotant din care selectati Properties. Imediat veti obtine informatii despre versmnea de ' ' ' ' Windows, tipul procesorului şi memoria RAM pe care le aveţi instalate pe calculator:

Wi ndows edition

Windows 7 Ultimate

Processor: Pentium(R) Dual-Core CPU T4300 @ 2.lOGHz 2.10 GHz

Jnsta lled memory (RAM): 4.00 GB (2.99 GB usable)

System type: 32-bit Operating System

Pen and Touch: No Pen or Touch Input is available for this D isplay

Explorarea dispozitivelor de stocare a informaţiei

Pentru lansarea aplicaţiei (My) Computer, atunci când cursorul grafic se găseşte deasupra icon-ului, vom apăsa de două ori butonul stâng al mouse-ului. Va apărea o imagine asemănătoare cu cea de mai jos:

Organize .... System properti6 Uninstall or change a program Map network drive Open Control Plinei

* Favorftes

•Desktop

Downloads

Recent Places

librari�

[] Documents

Ji Music

� Pictures

8 Videos

4 Homegroup

C� Computer

Io local o;sk (C:) c... Date(D:l _ CARMEN (G:)

î'' Network

• Hard Disk Drives (2) local Disk (C:)

81.l GB free of 104 GB

• Devices with Removable Storage (3)

DVD RW Drive (E:}

134 GB free of 1.85 GB

• Other (1)

Nero Scout System Folder

POPICA-HOME Workgroup: WORKGROUP Memory. 4.00 GB

Processor: Pentium(R) Dual-Care ...

Oate(O:)

; ' BD-ROM Drive (F:)

./ O astfel de formă se numeşte fereastră. Ferestrele vor fi studiate în amănunt ulterior.

Observăm ce dispozitive de stocare a informaţiei se găsesc pe calculatorul la care lucrăm. Astfel, în acest caz există următoarele unităţi:

Capitolul 1 - Sistemul de operare WINDOWS

unitate hard-disc simbolizată prin C; unitate hard-disc simbolizată prin D; unitate DVD-RW (DVD Writer) simbolizată prin E; unitate blu-ray (BD-ROM) simbolizată prin F. unitate USB flash simbolizată prin G .

1 9

../ Bineînţeles, în funcţie de configuraţia fizică a sistemului dvs, pot exista şi alte unităţi conectate la calculator, cum ar fi unitatea floppy, simbolizată deobicei cu litera A.

Foarte important:

� Unităţile floppy pot fi simbolizate prin A sau B. Prin urmare, calculatorul poate fi dotat cel mult cu două unităţi floppy.

� Unităţile hard disc (sau partiţii ale acestora) pot fi simbolizate prm literele C, D, E, . . .

� Unitatea CD (Compact Disk) şi DVD (Digital Versatile Disk) este simbolizată prin prima literă disponibilă, în ordine alfabetică, după ultima literă de simbolizare a unitătii hard-disc. '

../ La calculatorul meu am două partiţii pe hard-disc simbolizate prin C şi D, şi o unitate DVD simbolizată prin E .

../ În loc să spunem hard-disc, spunem, pe scurt, hard .

../ Un hard fizic, poate fi partiţionat prin anumite programe În mai multe unităţi logice. De exemplu, poate exista un singur hard fizic partiţionat în 4 hard-uri logice C, D, E, F.

Aşa cum am învăţat, unităţile diferă şi prin capacitatea de memorare. Să analizăm hard-ul D. Executăm clic cu butonul stâng asupra icon-ului său. Apare o formă specifică pe care o vom numi meniu flotant. Selectăm opţiunea Properties.

Aflăm astfel că partiţia D are 361 Gb din care sunt ocupaţi aproximativ 64,1 GB. Restul, de aproximativ 297 GB sunt disponibili, adică pot fi folosiţi pentru memorarea altor fişiere (date şi programe).

Type: Local Disk

Rle system: NTFS

• Used space: • Free space:

Capacity:

68.887.564.288 bytes 319 .084 . 503.040 bytes

387,972,067,328 bytes

Drive D:

64.1 GB

297GB

361 GB

[ Disk Oeanup [

20 Tehnologia Informaţiei şi a Comunicaţiilor

./ Putem proceda la fel şi cupartiţia (C), cu unitaţile CD şi DVD (E) sau cu unitatea floppy .

./ Evident, unitatea floppy trebuie să conţină discheta, iar unitatea CD /DVD trebuie să con tină CD /DVD-ul. '

Explorarea conţinutului unui dispozitiv de stocare a informaţiei

Generalităti. Pe dischetă, pe hard-disc sau pe CD sunt memorate sub formă de fişiere (file) date şi programe.

� Prin fişier înţelegem o colecţie organizată de date aflată pe suport extern, identificabilă prin nume şi extensie.

Conţinutul fişierelor este extrem de variat. Iată câteva exemple: •

•

•

Un program este memorat ca fişier. Colecţia de date este alcătuită din codul maşină al instrucţiunilor (instrucţiuni ale microprocesorului).

Un text oarecare este memorat ca fişier. Colecţia este formată din caracterele care alcătuiesc textul.

O imagine care apare pe monitor este memorată ca fişier. Colecţia este alcătuită din informaţiile de culoare pentru fiecare pixel (punct) care este inclus în imagine.

Pe suport (hard, floppy, CD) fişierele sunt memorate prin respectarea unei structuri. Astfel, ele sunt grupate În folder-e (dosare). Un folder poate conţine mai multe fişiere şi alte folder-e.

� Un .folder special se numeşte rădăci nă şi este prezent pe orice suport. El are numele unităţii, urmat de caracterul\. De exemplu, folder-ul rădăcină de pe hard-ul D: se numeşte D: \. Structura generală a unui hard-disc este prezentată mai jos:

fisier

fisier

Capitolul 1 - Sistemul de operare WINDOWS 21

Date (0:)

Să analizăm, de exemplu, conţinutul partiţiei D, de pe calculatorul meu. Pentru aceasta se execută dublu clic asupra pictogramei sale. Va apărea o fereastră care conţine imaginea următoare:

ProDl_,e Save

� yahoo_ab.c Sug mii.do

SOI c

Scaner Se oala )

Uloactu 8.0.0.0

Imaginea conţine patru folder-e: "Probleme", "Save'', "Scaner", "Scoala" şi patru fişiere: "IX B.xls", "jawa. txt", "yahoo_ab.csv" şi "Sugestii.doc".

Folder-e (dosare)

Folder-ele pot fi recunoscute prin pictograme care simbolizează grafic un dosar şi au rolul de a grupa logic mai multe fişiere sau alte folder-e, astfel încât utilizatorul să regăsească cu uşurinţă informaţia.Pentru a vizualiza conţinutul unui folder se execută dublu clic asupra icon-ului său.

Pentru a vedea spaţiul ocupat de un folder, se execută clic cu butonul drept asupra icon-ului său, iar în meniul flotant care apare se selectează Properties.

Exemplu: în figura de mai JOS, folder-ul ocupă 1.60 Mb (Size) - pentru memorare se mai folosesc anumite informatii, aşa că, în total, sunt ocupati 1.67

A ' J Mb. In plus, putem vedea data şi ora la care a fost creat.

Type: File Folder

Location: D:\

Size: 1 .60 MB (1 ,682,432 bytes)

Size on disk: 1 .67 MB (1 ,753,088 bytes)

Contains: 1 O Files, O Folders

Created: \.v'ednesday, November 05, 2003, 11:14:33 AM


Tot în această fereastră obtinem informatii privitoare la numărul de ' ' subfolder-e şi numărul de fişiere conţinute. Atenţie! Sunt numărate şi fişierele din subfolder-e şi subfolder-ele din subfolder-e.

În ipoteza în care fereastra aplicaţiei (My) Computer afişează conţinutul umu folder si dorim să vizualizăm conţinutul folder-ului care îl include pe acesta, efectuăm clic pe numele folder-ului respectiv din bara de navigare aflată în partea de sus a ferestrei:

•

File Edit View lools Help Bum

Anexa2· Oavoltare

prof6iona1a.doc

i>arte.11_1,) .doc

Mai mult despre fişiere

Ncwfo1dtt

Aşa cum am menţionat anterior, datele şi programele sunt reţinute sub formă de fişiere, iar acestea se găsesc în folder-e.

A) Fişierele au un nume. Spre deosebire de alte sisteme de operare, în Windows numele poate fi alcătuit din mai mult de 8 caractere.

B) Opţional, fişierele au o extensie. După nume, se pune caracterul ''.", apoi extensia. Extensia poate avea unul sau mai multe caractere. Implicit, extensia nu este afişată, dar există posibilitatea să "comandăm" Windows-ului să o afişeze. Vedeţi, în acest capitol, "Personalizarea modului în ca-re Windows-ul răspunde comenzjlor date de utilizatori" .

Exemple:

"Capi.doc", "Capi" este numele, doc este extensia; "Figura.bmp", "Figura" este numele, "bmp" este extensia; "Verif. exe", ''Verif' este numele, "exe" este extensia.


C) Windows-ul afişează fişierele cu ajutorul unor icon-uri.

�I �1 Im! Veri

Priviţi cum sunt afişate fişierele din exemplul anterior.

23

� Fi§ierele cu aceea§i extensie au acela§i icon. În general, prin extensie se urmăreşte să se prezinte tipul fişierului. Exemple de extensii des utilizate şi icon-ul care li se ataşează:

liJ E:-:tension: BMP I Fişierele cu extensia .bmp reţin imagini (BitMaP).

1� Fişierele cu extensia .doc sau .docx Extension: DOC reţin documente Word (text + imagini).

ID Extension: EXE Fişierele cu extensia .exe reţin programe (se mai numesc şi executabile).

� Un dublu clic pe pictograma unui program are ca efect lansarea sa în executare!

,/ Nu toate programele au acest icon. Multe programe au un icon specific. Exemple de icon-uri ale altor programe:

Programul Paint pentru Windows (Mspaint.exe) .

'� Pmgramul Wmd (Winwonl,exe).

� Asocierea fi§ier date-program. De multe ori, executarea unui dublu clic asupra icon-ului unui fişier de date are ca efect lansarea În executare a unui anumit program, care încarcă fişierul. Acest mecanism se numeşte asociere între fişierul de date şi program.


Exemple de asocieri

•!• Executarea unui dublu clic asupra unui fişier cu extensia .doc are ca efect lansarea în executare a programului Word care, la rândul lui, Încarcă fişierul.

•!• Executarea unui dublu clic asupra unui fişier cu extensia .bmp are ca efect lansarea În executare a programului Paint care, la rândul lui, încarcă fişierul.

./ Observaţi că fişierele de date cu o anumită extensie şi programele care le prelucrează au acelaşi icon .

./ Nu toate extensiile sunt cunoscute de către Windows . ./ Asocierea fişier date - program va fi studiată în continuarea acestui curs.

Vedeţi, în acest capitol, "Personalizarea modului în care Windows-ul răspunde comenzjlor date de utilizatori" .

1 .4. Interfaţa program-util izator

Ferestre

Ne propunem să răspundem la întrebarea: cum interactionează A ,

programele cu utilizatorii? In general, programele interacţionează cu utilizatorii prin intermediul ferestrelor. De aici provine şi numele sistemului de operare (Windows) . În imaginea următoare puteţi observa o fereastră, unde putem distinge:

Icon-ul ferestrei Bara de titlu Butoane de comandă


./ Ca utilizatori, nu veţi întâlni o astfel de fereastră atât de simplă! Dar, tot ce se va prezenta despre ea, este valabil pentru majoritatea ferestrelor afişate de diverse programe!

Icon-ul ferestrei este ataşat pentru ca utilizatorul să recunoască cu uşurinţă aplicaţia căreia îi aparţine fereastra! Acelaşi icon este utilizat şi de fişierul care memorează programul.

• Executarea unui clic asupra icon-ului are ca efect apariţia meniului alăturat, care, însă, este dublat de butoanele de comandă, motiv pentru care nu-l prezentăm.

151 R 01,re Move âize

_ Minimize D MaJ!imize X�lose Alt+F4

Bara de titlu are rolul de a afişa titlul aplicaţiei. Acesta poate fi diferit de numele programului. De exemplu, Word afişează Microsoft Word pe bara de titlu, iar fişierul program se numeşte Winword.exe.

•

,/

Cu ajutorul ei se poate muta fereastra pe ecranul monitorului. Practic, se fixează cursorul grafic asupra ei, se apasă în mod continuu butonul stâng al mouse-ului, si se deplasează cursorul către poziţia dorită. Concomitent, se obţine şi deplasarea ferestrei.

Foarte important: acest procedeu, des Întâlnit În Windows, nu numai pentru mutarea ferestrelor, se numeşte Drag and Drop.

Butoanele de comandă sunt detaliate mai jos:

li=::J Apăsarea acestui buton conduce la aşezarea ferestrei pe taskbar (vezi � Desktop-ul) . Dacă se execută clic pe zona respectivă de pe taskbar, fereastra revine la dimensiunile anterioare.

Apăsarea acestui buton conduce la maximizarea ferestrei. După maximizare, fereastra va ocupa întregul ecran.

Ferestrele afişate pe ecran pot ocupa întreg ecranul sau pot avea o dimensiune medie. Dacă fereastra are dimensiune maximă, atunci

butonul anterior este înlocuit cu acesta. Apăsarea lui are ca efect aducerea ferestrei la dimensiunea medie.

Apăsarea lui conduce la închiderea ferestrei. Dacă este vorba de fereastra principală a unui program, efectul este de oprire a

executării programului.


Redimensionarea ferestrei. Dimensiunea medie a ferestrei poate fi a modificată de către utilizator. Se aşează cursorul grafic într-un colţ al ferestrei. După aceasta, "se trage" într-un sens sau altul, ţinând apăsat butonul stâng al mouse-ului.

U nelte

Programele pot fi comandate de către utilizator cu ajutorul aşa numitelor unelte. Să vedem în continuare care sunt acestea ...

1. Butoanele clasice se folosesc pentru ca utilizatorul să poată comanda programului o anumită operaţie. Pentru a comanda operaţia respectivă butonul trebuie apăsat. Apăsarea butonului se obţine prin executarea unui clic cu butonul stâng al mouse-ului, atunci când cursorul grafic se găseşte deasupra sa. Suprafaţa butoanelor poate conţine un text, o imagine sau şi text şi imagine:

ll1r„.„ ... A.p·a·sa .. „.„.11 I „ ...... ..........•............. , .,, 1fii; Procesor J I Buton cu text Buton cu imagine Buton cu text şi imagine

Există situatii când anumite comenzi nu trebuie date. În astfel de cazun, ' unealta prin care se dă comanda este dezactivată.

� În mod normal, la apăsare, un buton "se scufundă'', după care revine în poziţia iniţială. Există cazuri de butoane speciale, care la o apăsare rămân "scufundate", după care la a doua apăsare "revin" în poziţia iniţială. Pentru utilizator aceasta are următoarea semnificaţie: cât timp butonul este "scufundat" programul funcţionează într-un fel şi cât timp butonul este "nescufundat" programul funcţionează în alt fel:

Buton special I � În anumite cazuri butoanele se grupează. Astfel, dacă un buton din grup

este "scufundat'' celelalte rămân "nescufundate". I -I Butonul "scufundat'' revine în poziţie iniţială numai după A B �


ce a fost scufundat alt buton. Se utilizează în cazul în care programul trebuie să funcţioneze într-un anumit fel, cât timp un anumit buton este "scufundat". Există cazuri când toate butoanele din grup sunt "nescufundate" sau numai unul dintre ele este scufundat.

2. Butoanele de selectie sunt de două feluri:

a) butoane radio - utilizatorul poate selecta o singură opţiune dintre mai multe posibile;

b) butoane de selecţie multiplă (de marcare) - utilizatorul poate selecta una sau mai multe opţiuni (sau chiar O opţiuni).

Optiunea 1

ţ;: Optiunea 2

r Optiunea 3

I Ce-am selectat? I Mi xi

Optiunea 2

Ir::: OK ::::li

butoane radio

r Optl I Afiseaza I W!ll§M xi

opt 2 opt 3

butoane de selecţie multiplă

3. Meniurile sunt utilizate în vederea comandării anumitor operaţii şi sunt de două feluri:

a) Clasice. Sunt prezente în partea de sus a ferestrei şi se acţionează prin executarea unui clic cu butonul stâng al mouse-ului.

b) Flotante (popup ). Unele ferestre sunt înzestrate cu astfel de meniuri. Ele nu sunt vizibile implicit, dar pot fi vizualizate, dacă se execută clic cu butonul drept al mouse-ului, atunci când cursorul se află deasupra componentei care îl conţine.

În figurile următoare sunt prezentate cele două tipuri de meniuri:

wsNQrmal Alt+O

Meniul clasic Meniul flotant


Există meniuri ale căror opţiuni pot fi marcate întocmai ca şi butoanele de selecţie multiplă (marcare), aşa cum se poate observa în imaginea alăturată.

ft e_aste

�- �Standard � Formatting Auto Text

Ctrl+ V Anumite opţiuni ale meniurilor pot fi selectate cu ajutorul tastaturii, prin utilizarea unei combinaţii de taste. Acestea sunt aşa numitele shortcut-uri de meniu.

Select A[I Ctrl+ A

" E.ind„. Ctrl+F

4. Liste. Selectările se pot efectua cu ajutorul listelor, iar mai JOS sunt prezentate câteva variante.

Lista alăturată permite alegerea unei opţiuni dintre mai multe posibile. Nu toate opţiunile sunt vizualizate. Pentru a le vedea pe toate se parcurge lista cu ajutorul unei bare de defilare (scroll bar) .

O otiunea O • I Optiunea 2 Optiunea 3 --�

•

Alăturat sunt două liste de acelaşi tip. Una este "desfăşurată" - sunt vizibile toate opţiunile - cealaltă nu. Pentru a desfăşura o astfel de listă se execută clic asupra săgeţii.

,/ Listele de acest tip permit ca utilizatorul să poată scrie opţiunea sa, chiar dacă nu este trecută.

� � 8 10 12 14

24

110 3

I� afisez radacinile comglexe li Iată şi o listă care simulează butoanele de selecţie �1 1�-�-�ll�ll�ill�l�l�H�ll! �I �·�� multiplă. Putem alege o opţiune sau mai multe.

5. Bara de defilare (scroll). Uneori, suprafata de afişare este mai mică decât A '

obiectul care trebuie afişat. In astfel de cazuri se utilizează bara de scroll.

Cu ajutorul ei se poate vizualiza întreg obiectul.

101 Bara de scro ll


Exemplu: fotografia altă turată este mai mare decât suprafaţa care o afişează. Din acest motiv,

s-au utilizat două bare de scroll, una aşezată vertical şi cealaltă aşezată orizontal.

De retinut! '

29

./ Vizualizarea cu ajutorul barei, într-un sens sau altul, în paşi mici, se face prin executarea de clic-uri cu butonul stâng al mouse-ului pe săgeţile ataşate barei .

./ Vizualizarea rapidă cu ajutorul barei se face utilizând indicatorul de poziţie (acel pătrat din interiorul barei). Pentru aceasta se aşează cursorul grafic deasupra sa, se apasă butonul stâng şi se trage în sensul dorit, ţinând butonul apăsat.

6. Bara de progres este utilizată atunci când programul efectuează o operaţie consumatoare de timp. Cu ajutorul ei, utilizatorul este informat asupra timpului rămas pentru efectuarea operaţiei respective, în raport cu timpul scurs până în acel moment.

1111111111111111

7. Componente care permit editarea textelor. Acestea sunt de o mare diversitate şi sunt utilizate pentru a permite introducerea de la tastatură sau vizualizarea textelor. Pot ocupa o mică parte din suprafaţa unei ferestre sau aproape întreaga sa suprafaţă.

lntroduceti sirul:

"Labei" -permite doar afiş area unui text

_J

"Edit" -permite afişarea ş i introducerea textului

Componentele de tip RichEdit permit introducerea şi vizualizarea textelor. Mai mult, permit ca textele să fie farmatate (adică să fie scrise cu un anumit tip de literă, cu un anumit stil, etc).


Mama merge la phinberJ, 1

I ----------------------------------·--· _JJ

./ Formatarea textelor va fi tratată în amănunt. ./ Există componente care permit atât afişarea/introducerea textelor dar şi

a imaginilor.

8. Componente care permit afi!larea imaginilor (lmage). Astfel, pot fi afişate desene, fotografu, etc .

./ Toate acestea concură la a crea utilizatorului Windows o ambianţă de lucru plăcută.

9. Bara cu unelte (Toolbar) conţine mai multe unelte grupate. Priviţi bara de mai JOS:

' �] Arial_R „ 10 "' [le I :U:

7 buton listă

./ Uneori o astfel de bară poate fi mobilă. Ea poate fi mutată cu mouse-ul prin procedeul Drag and Drop. Mai jos, observaţi o bară alcătuită din două butoane şi aşezată În 4 poziţii:

B

10. Bara de stare (StatusBar) este aşezată în partea de jos a ferestrei şi are rolul de a afişa anumite informaţii necesare utilizatorului. Iată cum arată bara de stare în cazul programului MS Word 2007:

Page: 17 of 19 Words: 3,316 Roman ian �


11. Cutii de dialog. Acestea sunt ferestre speciale care se afişează la comanda utilizatorului (comanda poate fi dată cu ajutorul unui buton, a unui meniu etc.). Rolul lor este de a permite utilizatorului efectuarea unor operaţii şi pot conţine oricare din uneltele prezentate până acum.

Mula/ Copiaza fisierul Et Sursa

Destinatia

OK Cancel

•

•

Cutiile de dialog sunt astfel concepute încât dimensiunea lor nu poate fi modificată (de altfel nici n-are rost) şi, de cele mai multe ori, nu au decât butonul de închidere (acel x) .

Cutiile de dialog pot :fi afişate în două feluri modal şi nemoda!. Dacă o cutie este afişată modal atunci, până la închiderea ei, nu mai putem acţiona fereastra din care am apelat-o. Dacă cutia este afişată nemodal acest lucru este posibil.

,/ Există situaţii în care programul nu poate continua executarea instrucţiunilor până când nu cunoaşte anumite informaţii.

De exemplu, se solicită scrierea unui fişier pe hard şi trebuie cunoscut numele :fişierului. În aceste cazuri se utilizează afişarea modală a cutiei care interoghează utilizatorul asupra numelui :fişierului.

,/ În unele cazuri trebuie ca utilizatorul să aibă posibilitatea de a actiona fereastra din intermediul căreia s-a comandat afişarea cutiei. În astfel de cazuri cutia va fi afişată nemoda!.

De exemplu, se solicită căutarea într-un text a unui cuvânt. Căutarea se face în sensul modificării cuvântului căutat. Aceasta înseamnă că se caută, se înlocuieşte, iar se caută, iar se înlocuieşte. Dar pentru a înlocui, este necesar accesul la fereastra care con tine textul... '

Uneori, programele afişează anumite cutii de dialog standard, la care utilizatorul poate răspunde prin apăsarea unui buton (OK, Cancel) sau (Y es, No):

lnformalion El i O cutie de dialog generata cu MessageDlg

I:, ···········x····e···s·· · ··········1,1 r .ll ............................... , - - No


Astfel de cutii conţin şi o mică imagine cu rol de informare / avertizare a utilizatorului:

•

Confirmare Informare Atenţionare Eroare

Uneori, programele trebuie să deschidă anumite fişiere (Open) pentru a le prelucra sau trebuie să apeleze alte programe. În astfel de cazuri se utilizează anumite cutii de dialog ale Windows-ului, aşa cum este cea de mai jos. Aceasta este o cutie specială, întrucât permite vizualizarea dosarelor (foldere-lor) şi a fişierelor care au o anumită extensie.

numele falder-ului

conţinutul folder-ului CJ Caret

numele fişierului selectat

•

•

•

filtru " exe

Filtru - cutia afişează întotdeauna folder-ele şi numai fişierele care au o anumită extensie. În exemplu, cutia poate afişa ori fişierele cu extensia . exe (programele) ori pe cele cu extensia .doc (documente Word) . Selectarea fişierelor care vor fi afişate de cutie se realizează cu ajutorul unei liste, numită filtru. Selectarea fişierului se face fie prin scrierea în clar a numelui său în edit-ul File Name, fie prin executarea unui clic cu butonul stâng al mouse-ului. După selectare se apasă butonul Open .


• Dacă se doreşte să se renunţe la operaţie se apasă Cancel.

O cutie ca aceasta sau una asemănătoare se va întâlni la majoritatea programelor.

Există şi o cutie similară, pentru salvarea fişierelor (Save) după ce au fost prelucrate de program.

1 .5. Tehnici de informare a utilizatorului

Utilizatorul nu poate şti în întregime tot ce "poate" Windows-ul. Din această cauză, proiectantul a prevăzut sistemul de operare cu anumite posibilităţi de informare.

A) Sugestia. Atunci când cursorul grafic se găseşte asupra unei unelte (de exemplu un buton) şi staţionează, se afişează un mesaj prin care utilizatorul este informat asupra funcţiei componentei respective. Această formă de informare este utilizată şi de către anumite programe (mai complexe).

Exemplu:

Cursoru! grqftc staţionează asupra butonului Start

B) Sistemul Help. Este cel mai lmportant mijloc de informare pe care Windows-ul îl pune la dispoziţia utilizatorilor. Evident, textele sunt în limba engleză. Se porneşte din butonul Start, apoi Help and Support.

Windows Media Center

Sticky Notes

Remote Desktop Connection

� All Programs


Va apărea fereastra de mai jos (vers. Windows 7):

Windows Help and Support

u u [ lseorrh Help

P Find an answer quickly

Enter a few words in the search box above.

Not sure where to start?

• How to get started with your computer

• learn about Windows Basics

• Browse Help topics

More on the Windows website

Check aut the Windows website,. which has more

information, downloads, and i deas for getting the mast oul of your Windows 7 PC.

� More support options

I Offline Help T

În partea de sus a ferestrei apare caseta Search, in care se introduce un

cuvânt (în exemplu toolbar) . După apăsarea butonului Search (în formă de lupă) sunt afişate mai multe operaţii în care intervine termenul tastat.

Dacă efectuăm clic pe butonul Browse Help, aflat deasupra lii1l casetei Search, se afişează un cuprins. Executarea unui clic pe � opţiunea dorită conduce la afişarea altor subcapitole.

,/ În funcţie de versiunea sistemului de operare Windows, formatul grafic al acestui mijloc de informare diferă, însă principiul de utilizare este similar, accesul la informaţie fiind facilitat de o multitudine de opţiuni.


1 .6. Windows Explorer

Explorarea calculatorului se poate cu (My) Computer sau cu programul Windows Explorer. Pentru a-l apela pe acesta din urmă Oansa în executare) se apasă butonul Start apoi, Ali Programs, Accessories şi Windows Explorer, sau daţi clic pe drepta pe Start şi apoi clic pe Windows Explorer. Programul afişează o fereastră în care putem recunoaşte majoritatea uneltelor prezentate:

Meniu Bara de comenzi rapide

Organize • Include in library • Sharewith • Bum

OJI

PDFZilla B Perflogs addins AppCompa AppPatch assembly Boot

Program File• t totalcmd a User<

Windows

addins Branding csc Cursors debug diagnortics

AppCompat I � AppPatch

assembly Digitallock Downloade ehome en·US Font< er d Program

Boot Files Branding

) csc � Cursors Globalizatio Help !ME inf L2Schemas

debug

123 items

Bara de stare

,/ Aproape toate operaţiile pe care învăţăm să le efectuăm cu Windows Explorer le putem efectua şi cu (My) Computer.

Fereastra con tine două panouri: cel din stânga, afişează structura folder-elor, iar ' A cel din dreapta afişează conţinutul folder-ului selectat. In exemplu, este selectat folder-ul Windows.

,/ Pentru a putea vizualiza întreg conţinutul, fiecare panou are ataşate bare de scroll.


Structura folder-elor

Structura folder-elor este prezentată sub formă de listă arbo-rescentă.

Semnificaţia săgeţilor r> şi � din faţa numelor de foldere prezente în structură. Săgeata orizontală, cu vârful spre drepata ( r> ) are semnificaţia că folder-ul aflat pe linia sa, de exemplu BP, nu este expandat (adică nu are structura precizată). Dacă se execută clic cu butonul stâng al mouse-ului, acel folder va fi prezentat expandat. În exemplu, dacă executăm clic asupra săgeţii orizontale din dreptul directorului BP structura acelui folder apare expandată. În acest caz, pe linia acelui folder apare o săgeată plină cu vârful în partea dreaptă jos ( � ) .

• Local Disk (C:)

BP

DVDFabPortable

JPG2PDF

OJI

PDFZil la

PerfLogs

� Program Files

� totalcmd

BP neexpandat

Continutul ' folder-ului

Local Disk (C:)

• BP

BGI

BIN

DOC

EXAMPLES

PENWIN

U NITS

DVDFabPortable

JPG2PDF

BP expandat

Dacă se execută clic pe săgeata plină ( .III ) , efectul este invers, În listă nu se mai vede folder-ul expandat ( collapse).

Folder-ul selectat - selectarea unui folder se obţine prin executarea unui clic cu butonul stâng al mouse-ului în cadrul structurii folder-elor, pe numele său. În exemplu, este selectat folder-ul Windows. Conţinutul folder-ului selectat se poate observa în panoul din dreapta al ferestrei.

Navigarea cu Windows Explorer

a) Vizualizarea conţinutului unui folder cu iconul afişat în panoul din dreapta se face prin executarea unui dublu clic pe icon-ul său. După aceasta, acelaşi panou va afişa folder-ele şi fişierele pe care acesta le cantine. '


b) Vizualizarea conţinutului unui folder al cărui nume se găseşte în panoul din stânga se face prin executarea unui clic pe numele său.

c) Aşa cum am arătat, panoul din dreapta afişează conţinutul unui anumit folder. Dacă se doreşte vizualizarea În cadrul aceluiaşi panou a conţinutului folder-ului care îl include, se apasă pe numele directorului părinte din bara de adrese, aflată deasupra meniului.

Organize ... Include in library "" Share with ... Burn

Name

BDMV

CGP

Date modified T ype

11/9/2010 8:57 PM File fald"

11/9/2010 8:57 PM File folder

d) Butonul Back (înapoi), aflat în stânga barei de adrese, are ca efect vizualizarea folder-ului afişat În dreapta la pasul anterior.

e) Butonul Forward (înainte) are ca efect vizualizarea folder-ului care a fost vizualizat înainte de a aeriana butonul Back. În cazul în ' care Back nu a fost apăsat, Forward rămâne inactiv.

Modal ităţi de vizual izare a folder-elor ş.i fişierelor

Proiectantii Windows-ului au făcut tot ce este ' posibil pentru ca utilizatorul să lucreze într-un mediu plăcut. De exemplu, există posibilitatea ca aceştia să poată selecta modul în care se pot vizualiza continuturile folder-elor. '

În Windows 7 există 8 posibilităţi standard de vizualizare (vezi figura alăturată). Ele pot fi selectate din meniul View. Selectarea unei opţiuni are ca efect şi marcarea ei în cadrul meniului (opţiunile au comportamentul unor butoane radio).

Extra large icons

Large icons

Medi um i cons

Small icons

Li st � Detai ls

Ti les

Content

,/ Vizualizarea cu Details are ca efect faptul că se afişează ş1 extensia fişierelor şi spaţiul ocupat de acestea! Priviţi exemplele care sunt prezentate în continuare:

38

diagnostics

addins

AppCompat

h AppPatch

assembly

Boot

Tehnologia Informaţiei şi a Comunicaţiilor

Oigitallocker Downloaded Program Fi16

ehome

Large lcons

System32 TAPI Tasks

Îl!'mp tracing

twain_32

v„ W•b winsxs

0.J _default

re apptuntl.020.exe

r.j) ARJ O ativpsrm.bin

� bfsvc.exe

U bootstat.dat

addins File folder

Boot

File folder

debug File folder

ehome File folder

Help File folder

liveKernelReports

File folder

7118/2011 9'52 AM 7114/2009 7'46 AM 4127/2011 4'11 PM 7/18/2011 10-.21 AM 7118/2011 8:20 AM 8/5/2010 6:01 PM 7/14/2009 5:37 AM 7114/2009 7:52 AM 11/21/2010 4:19 PM 6/11/2009 12'42 AM 1/30/2006 lHXl AM 12/17/2010 6:56 AM 1/26/2010 12:41 PM 7/14/2009 4:14 AM 7/18/2011 9'47 AM

Details

Tiles

Content

addîn.s Boot

debug

ehome

Help

LiveKernelReports

Minidump

PCHEALTH Pu•yl)'aV3 resciche

security Shell New System32

File folder

File folder

File folder

Fill!'foldM File folder

File folder

File folder

File folder

File folder

AppCompat

Brandîng diagnostics en·US

!ME

log•

Modemlogs

Periormance

Prcfetch

Resources

SeMceProfiles

SoftwareDistribution

TAPI

Small lcons

Shortcut to MS·D ... 1 KB

Application 140 KB

Shortcut to MS-O.„ 1 KB

BIN File O KB

Applic:ation 64 KB

DAT File 66 KB

AppCompat File folder

Branding

File folder

diagnostics File folder

en·US

File folder

!ME File folder

Logs File folder

Date modif1ed: 7/14/1:<YY:J 7:52 AM

Date modified: 7/14/1:<YY:J 5:37 AM

Date modified: 7/14/1fl:I) 7:56 AM

Date modifil!d: 7 /6/2011 6:54 PM

Date modifil!d: 7/14/'1.0C/.J 7:52 AM


1 . 7. Operaţii cu fişiere I folder-e

Crearea unui folder

Un folder se poate crea cu multă uşurintă, fie pe desktop, fie în orice alt folder. În cel de-al doilea caz, se vizualizeazi mai întâi continutul folder-ului ' părinte. Evident, un folder nou creat are un conţinut vid.

a) Pentru a realiza operaţia se execută clic cu butonul drept al mouse-ului atunci când cursorul grafic se găseşte acolo unde se doreşte crearea folder-ului (practic, panou-ul din dreapta vizualizează conţinutul unui anumit folder).

Apare un meniu flotant, ca cel din figura de New, apoi Folder:

mai jos, din care se selectează

--------------. --� Folder

� Shortcut

:Iii: IrfanView BMP Fi le

� Contact

� Microsoft Word Document

View

Sort by

� Journal Document

� Microsoft Office Access Application

� Microsoft PowerPoint Presentation

� Microsoft Office Publisher Document

8 WinRAR archive

Ctrl+Z u Text Document

� Microsoft Excel Worlcsheet

q WinZip File

New Briefcase

Properties

b) Imediat apare un icon de folder, cu nume implicit, iar utilizatorul este invitat să introducă de la tastatură numele dorit:

c) Se şterge numele implicit (cu tasta Backspace) şi se scrie noul nume (în exemplu, "Folderul meu") şi se apasă tasta Enter.

rn 1 1�rmmnm I

Folderul meu


Schimbarea numelui unui folder sa u fişier

Atunci când cursorul grafic se găseşte asupra icon-ului său, se execută clic drepta. La apariţia meniului flotant, se apelează opţiunea Rename, după care utilizatorul este invitat să scrie noul nume, la fel ca atunci când a fost creat folder-ul:

Rename

Properties

Atenţie! Am văzut că, de cele mai multe ori, extensia unui fişier are rolul de a asocia fişierul unui anumit program. Din acest motiv, atunci când schimbăm numele unui fişier este bine să-i păstrăm extensia, contrar nu mai este apelat de respectivul program şi nu mai are icon-ul pe care-l avea!

Selectarea fişierelor/folder-elor

Un singur fişier sau un singur folder se selectează uşor, prin executarea unui clic cu butonul stâng al mouse-ului, atunci când cursorul grafic se găseşte asupra icon-ului său. Problema este cum se selectează mai multe?

a) O primă posibilitate constă în a Încadra icon-urile care fac obiectul selecţiei într-un dreptunghi. Practic, se apasă butonul stâng al mouse-ului şi, fără a-l elibera, se deplasează de aşa natură astfel încât dreptunghiul format să le încadreze.

• it•IGGD IDI I : .................................................................................................. :

b) În cazul în care acestea nu se pot încadra într-un dreptunghi, nefiind alăturate, se selectează pe rând, ţinând apăsată tasta Ctrl:

c) Dacă dorim sa selectăm întreg conţinutul unui folder, apelăm la meniul ferestrei: Edit şi Select All.


Copierea fiş.ierelor/folder-elor

Copierea fişierelor/ folder-elor este operaţia prin care acestea se memorează şi în alt loc, dar rămân memorate şi acolo de unde sunt preluate.

a) Mai întâi se selectează fişierele şi/ sau folder-ele care fac obiectul copierii.

b) Din meniu, se selectează Edit, apoi Copy.

c) În continuare se vizualizează conţinutul folder-ului în care se doreşte să se memoreze fişierele/ folder-ele care fac obiectul copierii.

d) Din meniu se selectează Edit şi Paste.

Edt I View Tools

U n d o Copy

Red o

Cut

C o py

Paste

Help

Ctrl+Z

Ctrl+ V

Ctrl+ X Ctrl+ C

Ctrl+ V

Caz particular: se selectează fişierul prin clic cu butonul stâng. Apoi, clic cu butonul drept şi din meniul flotant se alege Send To. Astfel, putem copia pe dischetă (se alege Floppy) sau pe stickul USB (se alege unitatea corespunzătoare acestui dispozitiv).

Mutarea fişierelor/folder-elor

Diferenţa faţă de copiere este dată de faptul că, după efectuarea ei, fişierele/ folder-ele nu se mai găsesc în folder-ul sursă. Se efectuează la fel ca şi copierea, diferenţa fiind la pasul b) unde se apelează Cut (în loc de Copy) .

Ştergerea fişierelor/folder-elor

a) Mai întâi se selectează fişierele/ folder-ele care fac obiectul ştergerii.

b) Se tastează Delete. Procedând astfel, s-a efectuat doar ştergerea logică. Practic, fişierele/folder-ele nu mai există în folder-ul gazdă, dar există, totuşi, memorate pe hard.

c) Accesul la ele se realizează cu ajutorul aplicaţiei Recycle Bin. Icon-ul acestei aplicaţii se găseşte pe Desktop.

Mai mult, există, de fapt două variante ale pictogramei:


Dacă nu avem fişiere şterse logic, icon-ul afişat este cel din stânga; în caz contrar, este afişat icon-ul din dreapta:

• • Se poate apela aplicaţia Recycle Bin prin dublu clic pe icon-ul său:

Fi le Edit View Tools Help

Organize T Empty the Recycle Bin

� Favorites

Desktop

Downloads

'!îl Recent Places

Libraries

[!l Documents

,JI Music

� Pictures

4 items

Restore all items

Folderul meu

New folder

New folder

New folder

Fereastra aplicaţiei afişează fişierele şi folder-ele şterse logic. Dacă se doreşte ştergerea fizică a tuturor (caz În care acestea sunt definitiv pierdute) se apelează File şi Empty Recycle Bin. Există şi posibilitatea să renunţăm la ştergerea logică şi fişierele să fie mutate acolo de unde au fost şterse: Edit şi Undo Dele te .

./ Se pot şterge fizic doar fişierele care au fost şterse logic. Pentru a realiza aceasta, fişierele care trebuie şterse se selectează, aşa cum am arătat şi se tastează Delete .

./ Tot aşa, se poate renunţa la ştergerea logică doar pentru anumite fişiere. Acestea se selectează şi apoi apelăm din meniu, File şi Undo Delete. După această operaţie veţi găsi fişierele "la locul lor", adică În acele foldere de unde au fost şterse.


./ Există posibilitatea de a şterge fizic fişere şi foldere, fără ca acestea să mai treacă prin Recycle Bin, dacă după selectarea acestora se apasă simultan tastele Shift şi Delete.

1 .8. Crearea scurtăturilor (shortcut-urilor)

Uneori se doreşte accesul rapid la un anumit fişier (de cele mai multe ori program) sau la continutul unui anumit folder. Înseamnă să evităm accesul, ' A uneori greoi, prin intermediul Explorer-ului sau My Computer. In astfel de cazuri se utilizează shortcut-urile.

Y Shortcut-urile au asociate icon-uri, ca şi folder-ele sau fişierele. Icon-urile prezintă un simbol specific, acea mică săgetuţă:

Shortcut către un program Shortcut către un .folder

Y Shortcut-urile au exact acelaşi efect ca icon-urile fişierelor sau folder-elor. Executarea unui dublu clic pe icon-ul unui shortcut către program are ca efect lansarea programului în executare, iar a unui dublu clic pe icon-ul unui shortcut către folder are ca efect vizualizarea continutului folder-ului. '

Y Un shorcut reţine numele si "calea" către un fişier sau .folder. Calea exprimă modul în care se poate ajunge la fişier sau folder.

Exemplu: pe C am un folder numit AlMeu (nu contează dacă scriem cu litere mari sau mici). Folder-ul AlMeu, conţine un alt folder care se numeşte Pretios. La rândul lui acesta conţine un program numit: pr.exe. Atunci:

- calea şi numele folder-ului Pretios este: C:\AlMeu\Pretios - calea către programul pr.exe este: C:\AlMeu\Pretios\pr.exe

Y Pentru a crea un shortcut către folder sau fişier se apelează la meniul flotant, clic cu butonul drept, atunci când cursorul grafic se găseşte În fereastra care va afişa shortcut-ul sau pe Desktop. Se selectează New şi Shortcut. Apare o cutie de dialog în care se introduce calea şi numele:


What item would you like to create a shortcut for?

This wizard helps you to create shortcuts to local or network programs, fi les, folders, computers, Internet addresses.

Type the location of the item:

C:\AIMeu\Pretios\pr.ex� Browse„.

Tot asa se procedează şi în cazul fişierelor, introducând, de această dată, calea şi numele fişierului.

Uneori se utilizează butonul Browse. La apăsarea lui se lansează o cutie de dialog de tip Open, prin care fişierul poate fi selectat. Selectarea fişierului se face prin executarea unui dublu clic pe icon-ul său. În acest caz, edit-ul de cale şi nume (Command line) va conţine automat calea şi numele fişierului (nu mai trebuie tastate).

De obicei, shorcut-urile se creează pe Desktop.

Copierea, mutarea, ştergerea unui shortcut lasă neafectat fişierul (folder-ul). Se copiază, mută, şterge doar ... shortcut-ul.

Există posibilitatea să creăm rapid un shortcut pe Desktop. Practic, se selectează fişierul (folder-ul) şi se execută clic cu butonul drept. Din meniul flotant care va apărea se selectează Create Shortcut. Exerciţiu!

Meniurile contm,· o categorie aparte de I Select A[I Ctrl+A shortcut-uri care permit selectarea unor .._ __________ _.

operaţii, mai uşor, cu ajutorul tastaturii, renunţând astfel la mouse. Dacă meniul conţine shortcut, chiar şi comanda poate fi dată printr-o combinatie de taste. '


1 .9. Taskbar-ul (bara cu task-uri)

Ce este un task'?

Pentru Windows, orice program qflat în timpul executării este un task În mod practic, pentru el, Windows-ul reţine amunite informaţii, cu ajutorul cărora gestionează executarea sa.

� În Windows se pot rula mai multe programe în acelaşi timp. Din acest motiv se zice că Winows-ul este multitasking.

Posibilitatea rulării mai multor programe în acelaşi timp are o mare importanţă. De exemplu, la un moment dat, pot imprima ceva (pentru aceasta se rulează un anumit program), pot asculta o melodie (alt program) şi pot accesa poşta electronică (al treilea program).

Cum este posibil să se ruleze mai multe programe în acelaşi timp? Viteza de calcul a microprocesorului este mare. De multe ori acesta este nevoit să aştepte până se efectuează o anumită operaţie. De exemplu, la tipărirea unui document, microprocesorul trebuie să aştepte până când imprimanta realizează operaţia respectivă. Acest timp poate fi folosit pentru ca microprocesorul să execute instrucţiunile altui program (task). Windows-ul conţine un mecanism care permite procesorului să fie dedicat unui task sau altuia. Pentru utilizator mecanismul este transparent, el are impresia că fiecare task este executat separat şi că toate se execută în acelaşi timp.

Cum sunt afişate task-urile'?

Am arătat faptul că, la un moment dat, se pot rula mai multe programe (task-uri). De regulă, fiecare program are asociată o anumită fereastră, numită

fenastră principală.

Dintre toate ferestrele principale ale task-urilor numai una este activă, adică acceptă comenzj de la utilizator, restul sunt inactive. Activana unei fenstn se face

prin executana unui clic pe suprqfaţa ei. Închiderea rapidă a ferestrei active se face cu Alt+F4 .

.,/ Nu confundaţi fereastra inactivă cu programul în aşteptare. Este posibil ca un program cu fereastră inactivă să execute o anumită operaţie la un


moment dat. De exemplu, ascult muzică şi în acelaşi timp scriu un text utilizând programului Word. Fereastra activă este cea a Word-ului pentru că asupra ei acţionez, programul care redă muzica are fereastra inactivă, dar execută ceva (redă muzica), deci nu este în aşteptare .

.,/ Există şi situaţii În care programul este În aşteptare, dar fereastra este activă. De exemplu, atunci când scriu în Word, fac o pauză. Fereastra rămâne activă, aşteaptă comenzile mele, dar programul este inactiv (aşteaptă o comandă).

Exemplu: priviţi imaginea următoare:

(/ , !� I • 2 I ) • ' ·, 4 · I • 5. I (, • ' • 7 I 8 • ! ' .' ' I • 1 0 • I • li • I • 12 • t • c::J_• 1 • 14 • ca un progum cu !Ueastci inactiti. si excrutc o llnwniti opcuţc la un moment du. De exemplu, 2scult mutici � în aed.a? timp scriu un rut utilizlÎ.nd programu1ui Word. Fercastn :a.etici este cei a Word-ulti pentru ci asup12 e acţionez, progc:unul Clle redi muzica arc fei:ea.SUlil. im.etici, du cxecuti c:en (rec:li muzica), dt:ci nu cs� în a�cpwc. I

1 . Sunt deschise trei aplicaţii. Fiecare dintre ele este privită de Windows ca un task. Prima dintre ele este Word-ul, cu ajutorul căreia scriu această carte. O a doua este MinGW Developer Studio şi o utilizez pentru scrierea unui program, iar a treia este o fereastră Windows Explorer. Toate aplicaţiile (task-urile) se găsesc reprezentate pe taskbar cu ajutorul iconurilor evidentiate. '

2. Aplicaţia activă este Word-ul (observaţi cursorul de editare prezent în fereastră). MinGW este inactivă, ca şi fereastra Windows Explorer.

:3 . Dintre cele trei aplicaţii, doar Windows Explorer este minimizată (adică nu se găseşte decât pe taskbar).


În concluzie, observăm că:

a) Toate aplicaţiile (task-urile) deschise la un moment dat sunt reprezentate pe taskbar, indiferent dacă sunt active sau nu.

b) O aplicaţie (task) poate fi minimizată, adică reprezentată grafic de Windows doar pe taskbar. Executarea unui clic pe reprezentarea grafică de pe taskbar are ca efect afişarea ferestrei aplicaţiei şi aceasta devine activă.

Meniul ataşat butonulu i Start

Prin executarea unui clic pe butonul Start, aflat pe taskbar, apare meniul alăturat:

Butonul Start

Se observă ca 111 panoul din stanga al meniului sunt afişate mai multe aplicatii şi anume aplicatiile ) A ' cel mai recent folosite. In dreptul acestora poate apare o mică săgeată, iar la deplasarea mouse-ului deasupra acesteia se va afişa o listă cu cele mat recente documente deschise sau editate cu ajutorul aplicaţiei respective:

Re<ent

l!!J Microsoft Office Word 2003

firefox.exe - Shortcut

Notepad

� Calculator

� Total Commander

� MinGW Developer Studio

�'" Paint

� Yahoo! Messenger

� Microsoft Office: P owerPoint 2003 t

<tJ> Winamp

� Ali Programs

I Seor<:h progroms ond files P I

<>plD.doc I!!) ., .do< � <•p0.4.doc � c•p0.3.doc

MlllGW Dtveloper Studio

I@ TABEL PAllTIUPANTJ PROL. li!) Johny T ommo.doc � ta•..9g.d0<


Shut Down - opţiunea a fost analizată.

Help - opţiunea a fost analizată.

Ali Programs - selectarea acestei opţiuni permite afişarea unei liste cu programele sau grupurile de programe (mai multe programe şi fişiere din aceeaşi sferă de activitate). Selectarea unuia dintre ele are ca efect lansarea lui în executare. Dacă este prezentă acea mică săgetuţă, înseamnă că avem un grup de programe. Alegerea unui nume de aici are ca efect afişarea programelor şi fişierelor din grup. Apoi, selectarea unui program din grup are ca efect lansarea lui în executare, iar selectarea unui fişier are ca efect lansarea în executare a programului asociat fişierului şi acesta, la rândul lui, încarcă fişierul.

Run - selectarea acestei opţiuni aflată în grupul de programe AH Programs � Accessories are ca efect lansarea cutiei de dialog de mai jos:

Type the name of a program, folder, document, or Internet resource, and Windows will open it for you.

Open: I c:\bp\bin\bp.exe ...I

OK J I Cancel J I Browse„.

Cu ajutoiul ei se poate lansa În executare orice program. Observati faptul că trebuie introdusă calea (în exemplu s-a introdus calea către un pr�gram). În cazul în care nu ştim unde se găseşte programul se apasă butonul Browse şi apare o cutie de dialog de tip Open cu ajutorul căreia se efectuează selectarea.

Caseta de căutare - aflată în partea de jos a meniului Start permite regăsirea automată a fişierelor sau folder-elor. Începeţi să tastaţi în caseta de căutare numele fişierului sau folderului pe care doriţi să-l căutaţi şi veţi vedea imediat o listă cu documente, imagini, muzică şi mesaje de poştă electronică relevante de pe computer. Rezultatele sunt grupate după categorie şi conţin cuvinte cheie şi fragmente de text evidenţiate, pentiu a fi mai uşor de observat.

În figura de mai jos vedeţi ce se afişează în cazul în care s-a introdus în caseta de căutare textul "win":


Programs (28) 1- Windows Explorer

igj Windows Media P layer

ii WinRAR

Control Panel (68)

-1/1 Windows Firewall

11111 Windows Defender

Windows C ardSpace

Documents (8)

� pfile.xml

� avi - 01 - genera l.xml

� metadata - asf.xml

Videos (1)

(i Wildl ife.wmv

P See more results

I winl X [ Shut d"-OWiiŢ)J

49

Dacă este apăsat linkul See more results se deschide o nouă fereastră cu rezultate mai detaliate ale căutării, aşa cum se vede în figura de mai jos:

View T ools Help

Organize ..., Save search

-tr Favorites

Desktop

Oownloads

i1l Recent Places

libraries

I] Documents

Jt Music

[i!!l Pictures

BJ Videos

4 Homegroup

Computer

I. local Disk (C:) r-� Date <O:l p 199 items

Bum

E

L'4"1 Windows Live Mail � C:\Users\Popica\Favorites Window... Size: 177 b�es

win32 C:\Users\Carmen\.ectipse\org.eclipse.platform_3.4.0_7097204 ...

s60_pop-up-wi dows.png Size: 28.7 KB

s60_pop-up-windowsl.png S�e: 27.4 KB

13i."i pop_up_windows.html � Pop-up '. 1 ows The S60 mobile Size: 1.24 KB phone use:s pop-up 1 ows in cl!!r.„

C:\Users\Carmen\.eclipse\org.ecfipse.platform_3.4.0_7097204 ...

nine_piece_call_handling_windows.html .„ 32 dlffert!!nt call handlmg "1 dows Size 1.90 KB for skins m categones hke, Confere ...

c:


./ Există posibilitatea să tinem minte doar o secventă de caractere care fac ' A ' parte din numele fişierului (folder-ului) căutat. In acest caz introducem secvenţa, iar aplicaţia va raporta toate fişierele (folder-ele) al căror nume include secvenţa respectivă. Există anumite convenţii de prescurtare.

Acestea sunt prezentate prin exemple:

• *·txt - caută toate fişierele cu extensia txt • m*.doc - caută toate fişierele care încep cu m şi au extensia doc • t??.ext - caută toate fişierele cu trei caractere, care încep cu t ş1 au

extensia ext

Căutarea după un anumit şir de caractere continut în fişier. Se vor afişa ' toate fişierele care conţin şirul respectiv. Şirul de caractere se va introduce în caseta de căutare din meniul Start. De exemplu, se pot căuta toate fişierele care conţin şirul Pascal.

Personal izarea taskbar-ului

Executaţi unu clic cu butonul drept al mouse-ului pe taskbar şi selectaţi opţiunea Properties din meniul flotant. Putem marca sau nu opţiunile următoare:

Taskbar and Start Menu Properti

Taskbar Start Menu Toolbars

T askbar appear ance

El Lock the taskbar

El Auto-hide the taskbar

El Use small icons

Taskbar location on screen: I Bottom • J Taskbar buttons: I Always combine, hide labels •I Notification area

Customize which icons and notifications appear in the I J notification area. Customize.„

Preview desktop with Aero Peek

Temporarily view the desktop when you move your mouse to the Show desktop button at end of the taskbar.

� Use Aero Peek to preview the desktop

How do I customize the taskbar>

OK I I Cancel J I Apply


Lock the taskbar - dacă această opţiune nu este marcată, utilizatorul poate muta sau redimensiona taskbarul. Dscă doriţi ca utilizatorul să nu poată muta sau redimensiona, eventual accidental taskbarul bifati această optiune. ' '

Auto hide the taskbar - dacă marcăm această opţiune, taskbar-ul dispare când nu-l utilizăm. Reapare când cursorul grafic se găseşte pe poziţia lui.

Use small icons - dacă opţiunea este bifată, iconurile afişate în taskbar vor fi afişate mai mici şi astfel taskbar-ul va fi mai îngust.

T askbar buttons - aveţi posibilitatea de a alege următoarele opţiuni:

•

•

•

Always combine, hide labels - pentru fiecare fereastră deschisă, Windows afişează în taskbar câte un icon evidentiat, ferestrele apartinând aceleiaşi aplicaţii fiind afişate într-o „stivă". În :xemplul de mai jo

's sunt

deschise trei ferestre, o fereastră a aplicaţiei Paint şi două ferestre ale aplicaţiei Word:

Combine when taskbar is foii - pentru fiecare fereastră deschisă este afişat un icon însoţit de o etichetă cu numele aplicaţiei şi/ sau al documentului deschis în fereastra respectivă. Ferestrele aceleiaşi aplicaţii nu sunt "stivuite" decât dacă sunt deschise prea multe ferestre ş1 nu există spaţiu suficient pentru a le afişa pe toate, una lângă alta:

N ever combine - seamănă cu modul de afişare de la cazul anterior, însă dacă se deschid prea multe ferestre acestea nu vor fi stivuite ci În partea dreaptă a taskbar-ului apare o bară de derulare care permite navigarea printre iconuri:

li . .

52 Tehnologia Informaţiei ş i a Comunicaţiilor

Adă ugarea �i �tergerea unor programe din meniu l Start

Până În prezent am învăţat modul în care putem apela un program:

identificarea lui cu (My) Computer sau Windows Explorer ş1 executarea unui dublu clic pe icon-ul său

crearea unm shortcut către el şi executarea unui dublu click asupra shortcut-ului

lansarea sa cu Start şi Run (prin precizarea căii către el)

lansarea sa cu Start şi AH Programs (asta dacă se găseşte acolo)

Întrebarea este următoarea: cum facem ca un program (sau folder care conţine mai multe programe sau fişiere) să poată fi apelat din Start şi AH Programs?

Vom răspunde printr-un exemplu. Presupunem că avem un program, numit Caret pe D:\Bp. Vrem ca el să poată fi apelat din Start -7 AH Programs -7 Accessories.

Apelăm Start, apoi cu butonul dreapta al mouse-ului executăm clic AH Programs şi alegem opţiunea Open sau Open AH din meniul flotant. Apare o fereastră de tip Windows Explorer în care este afişat conţinutul directorului care memorează shortcut-urile din meniul Start.

În această fereastră putem crea orice shortcut dorim, cum am învăţat anterior (File-7 New-? Shortcut) .

Atenţie! În mod implicit acest director este protejat ş1 nu veţi putea crea shortcut-uri dacă nu aveţi drepturi suficiente.

Dacă contul cu care sunteţi logat în Windows este un cont de administrator, puteţi schimba drepturile implicite pe care le aveţi asupra acestui director (în mod normal nu aveţi aceste drepturi, decât dacă este calculatorul vostru şi aveţi cont de administrator) . Pentru aceasta procedaţi astfel:

în fereastra care s-a deschis anterior (Start -7 clic drepta pe Ali Programs -7 Open) executaţi clic cu butonul drept al mouse-ului În panoul din drepta şi selectaţi opţiunea Customize this folder.


În fila Security actionati butonul Edit: ' '

Start Menu Properties

Group or user names: C:\Users\elev'W>µData\Roaming\Microsoft\Wlfld, SYSTEM i. Caimen (Popica·Home\Camien)

i. elev (Popica·Home\elev)

Adrnnstrators (Popica·Home\Adminstratoos)

To change perrnissions. click Edit.

Pemiissions !Of SYSTEM l'Jlow

Full control

Modify v Read & execute .,/

List folder contents .,/

Read .,/ Wrne

For special pennissions or advanced sett.ngs. click Advanced.

Leam about access control and oennissions

Edit ...

Deny

� Advanced

Gmup or user names:

SYSTEM i. Caimen (Popica·Home\Camien) i. elev (Popica·Home\elev)

AdrnnstratOfS (Popica-Home\Adrnnstrators)

Add ... l i Remove I Perrnissions for SYSTEM l'Jlow Deny

Ful control [i.] El Modify El B Read & execute [i.] El List folder contents � El Re ad [i.] El

53

OK 1 1 Cancel Apply Cancel I �,

În fereastra ce se deschide, selectaţi contul vostru şi dacă aveţi drepturi de administrator, ar trebui să puteţi să bifaţi opţiunea Full Control din coloana Allow.

Lansarea rapidă în executare

Uneori este de dorit ca anumite programe să fie lansate rapid şi comod în executare. Pentru aceasta taskbar-ul are o zonă în care se găsesc shortcut-urile programelor pe care dorim să le apelăm. Această zonă se numeşte Quick Launch.

În această zonă icon-urile se adaugă prin drag-and-drop (practic acestea se trag de pe Desktop în zona respectivă) sau folosind Windows Explorer, directorul unde sunt memorate de către Windows aceste shortcut-uri fiind:

Windows 7 C:\Users\(user-name)\AppData\Roaming\Microsoft\ Internet Explorer\ Quick Launch


Windows XP C: \ Documents and Settings \ (user-name) \ Application Data\ Microsoft\lnternet Explorer\ Quick Launch

Pentru a elimina un shortcut din Quick Launch, se dă clic cu butonul drept al mouse-ului pe icon-ul respectiv şi, din meniul flotant, alegem opţiunea:

Windows 7 U npin this program from taskbar

Windows XP Delete

1 . 1 O. Introducerea textelor (cu Notepad)

General ităţi

Pentru introducerea textelor se pot utiliza o mulţime de programe. Un program care permite introducerea textelor, salvarea lor pe hard sau dischetă sub formă de fişiere se numeşte editor de texte.

Există o mulţime de editoare de texte, dar, pentru început, vom folosi pe cel mai simplu dintre ele, numit Notepad, livrat odată cu Windows-ul. Poate fi apelat din meniul Start � Ali Programs � Accessories � Notepad.

Prezentarea programului

După apel, programul afişează fereastra din dreapta, unde se poate introduce textul, aşa cum se vede din figură:

,�··· Untitled - Notepad ll�l@ l�I Fi le Edit format Vi ew Help li

Ai ci se i nt r oduce t ext ul . . . "" Ir

�


Fereastra este înzestrată cu meniu ş1 componenta care permite introducerea textului. În stânga sus se poate observa icon-ul ferestrei program. După introducere, textul se poate salva pe hard sub formă de fişier. Extensia implicită a fişierului este . txt.

Introducerea textului

Cursorul de editare. În momentul introducerii textului se lucrează cu două cursoare. Unul este al mouse-ului şi anume cursorul grafic. Al doilea cursor, de editare, arată utilizatorului locul unde urmează să scrie. Fiecare caracter tastat apare în poziţia cursorului. Cursorul este o liniuţă verticală clipitoare ( I ) . După tastare, cursorul ocupă poziţia următoare literei tastate.

Cursorul de editare poate fi mutat în poziţia dorită (evident, pentru a scrie din acea poziţie) :

a) cu ajutorul tastelor săgeţi (�, t, �, ..!-); b) cu ajutorul mouse-ului - se execută click în poziţia dorită.

Există câteva taste cu rol special în introducerea textelor:

• Enter - determină cursorul să treac la rând nou.

• Delete (sau Del) - şterge caracterul care se află imediat după cursor.

• Backspace - are rolul de a şterge caracterul aflat înaintea poziţiei curente a cursorului.

• Caps Lock - dacă această tastă nu a fost apăsată, se scrie cu litere mici. În momentul apăsării tastei Caps Lock, se aprinde un beculeţ al tastaturii (indică faptul că aceasta a fost apăsată) şi până la o nouă apăsare, se scrie cu litere mari.

• Shift - se foloseşte împreună cu celelalte taste. Principiul este următorul: se apasă Shift, după care, neridicând degetul de pe ea, se apasă altă tastă. Dacă aceasta este literă, va apărea pe ecran ca literă mare, iar dacă este tastă bifuncţională (vezi rândul 2 al tastaturii) se tipăreşte ce este sus - caracterele speciale * ( & ) - etc. Toate acestea se Întâmplă în ipoteza în care Caps Lock nu a fost apăsată (beculeţul corespunzător este stins) . În cazul în care am apăsat-o (beculeţul corespunzător este aprins) la apăsarea cu Shift, va scrie cu litere mici. Tasta Caps Lock nu influenţează selectarea în cazul tastelor bifunctionale. '


Salvarea �i încărcarea textulu i

Salvarea este operaţia prin care textul este memorat sub formă de fişier (de obicei pe hard).

Pentru a salva textul introdus se apelează la meniu: File şi apoi Save As. Apare cutia de dialog corespunzătoare (vezi uneltele) . În edit-ul File Name trebuie scris numele fişierului. Extensia implicită este . txt.

File „ Edit 2earch New .Qpen. . . 2ave Save 8s . . .

,/ Este bine ca această operaţie să se facă de la început şi să s; repete din când în când. Pentru aceasta se apelează la File şi Save. In acest caz salvarea se face sub numele introdus atunci când am salvat cu Save As. Practic, se rescrie fişierul.

Dacă vi2ualizăm fişierul cu.

Wind".w� faplore• ob,crv�

I r1 I icon-ul din dreapta. Aceasta mseamna ca Wmdows-ul afişeaza -

fişierele cu extensia . txt cu acest icon (vezi asocierea , .�., ........ ,

fişier - program) . F.11r:n.1A

Presupunem că am scris textul, l-am salvat şi acum dorim să-l încărcăm din nou. Există două posibilităţi de a face acest lucru.

a) Apelăm, aşa cum am arătat, programul Notepad. Apoi, cu ajutorul meniului selectăm File şi Open. Se afişează cutia de dialog de tip Open.

Cu ajutorul ei identificăm fişierul pe suport, îl selectăm (clic pe icon-ul său) şi apăsăm butonul Open:

b) Localizăm fişierul cu Windows Explorer. Executăm dublu clic pe iconul său. Automat, se lansează în executare programul Notepad şi acesta încarcă fişierul. Din acest moment putem să-l vedem sau să-l modificăm.

,/ Dacă selectăm din meniu opţiunea New, atunci programul va afişa un text vid. Acesta urmează să fie scris şi apoi salvat.


Selectarea, copierea �i mutarea textelor

� O porţiune din textul introdus poate fi selectată. Selectarea se realizează ţinând apăsată tasta Shift şi deplasând cursorul cu ajutorul tastelor săgeţi:

A c e s t a e s t e un t e x t s e l e c t a t . A c e s t a e s t e un t e x t n e s e l e c t a t .

� Un text selectat poate fi copiat Într-o memorie specială numită Clipboard. Aceasta înseamnă că el rămâne în text. Pentru copiere se apelează Edit şi Copy.

� Un text selectat poate fi mutat în Clipboard. Aceasta înseamnă că el nu rămâne în text. Pentru mutare se apelează Edit şi Cut.

� Din Clipboard textul poate fi inserat în acelaşi document sau alt document deschis cu acelaşi editor de texte sau cu alt editor. Inserarea se realizează începând cu poziţia curentă a cursorului în acest document. Pentru inserare apelaţi Edit şi Paste.

Identificarea cuvintelor

De multe ori, este necesar să identificăm rapid anumite cuvinte care apar în text. Desigur, putem parcurge textul cu ajutorul barei de derulare. Există, însă şi o altă posibilitate de căutare, prin intermediul unei cutii de dialog afişată nemodal. Se apelează meniul Edit şi Find. Va apărea cutia de dialog:

Find what: Jmama

_J M atch �ase D irection----.

C !Jp <! Qown

Presupunem că dorim identificarea cuvântului "mama". Căutarea se face în două sensuri (sensul de căutare se stabileşte cu ajutorul a două butoane radio) În sus (Up), în ic:s (Down) . Punctul de start este dat de poziţia curentă a cursorului de editare. In sus înseamnă către începutul documentului, În jos înseamnă către sfârşitul lui.


Acesta este un text in care caut sirul ihibii. Cuvantul mama apare de doua ori. Dar textul cantine si cuvantul mamaia Mamaia de doua ori.

,/ Mai precis, căutarea se face prin identificarea unui şir de caractere, chiar dacă acesta este regăsit într-un cuvânt. De exemplu, şirul "mama" este regăsit în cuvântul "mamaia".

,/ Dacă opţiunea Match case este marcată, în căutare, se face distincţie între literele mari şi cele mici. De exemplu, se va identifica "mama" dar nu se va identifica "Mama".

,/ Motivul pentru care afişarea cutiei este nemodală este următorul: de multe ori căutarea se face în scopul modificării cuvântului găsit Această operaţie nu ar fi posibilă dacă afişarea cutiei ar fi modală . . .

,/ Opţiunile care privesc căutarea cuvintelor, salvarea fişierelor, încărcarea lor, copierea şi mutarea textelor sunt prezente în toate editoarele de texte şi nu numai. Din acest motiv, atunci când le vom mai întâlni la alte programe, le vom prezenta pe scurt sau . . . nu le vom prezenta.

1 . 1 1 . Font-uri

Ce sunt font-uri le'?

Ar fi monoton şi inestetic ca toate textele să fie scrise cu acelaşi tip de caractere. Prin urmare, în Windows se pot utiliza o mulţime de seturi de caractere (font-uri) .

� Prin font vom înţelege un set de caractere (litere, cifre, semne speciale) . Font-ul este identificabil prin nume.

Exemplu: un text scris cu font-uri diferite:

Azi cerul este sen i n . (Font: Arial) Azi c e rul e s te s enin . (Font: Courier New)


Azi cerul este sen i n . (Font: Tahoma) A� cerul- �l'l � (Font: Lucida HandWriting)

Gestiunea fonturilor

Font-urile sunt gestionate de Windows, nu de editorul de texte (acesta nu face decât să le folosească). Dacă într-o fereastră Windows Explorer deschideţi folder-ul Fonts, inclus În folderul Windows, fereastra se va modifica automat şi va arăta ca cea de mai jos:

File Edit View Tools

Control Panel Home

Font settings

Get more font information online

Adjust C learTypetext

Find a cha racter

Change font size

See a Iso

Text Services and Input Language

Personalization

� Fonts � • +t Seorch Fonts

Help

Preview, delete, or show and hide the fonts installed on your computer

Organize • � .

t... L

A b a Uq Abg AcadEref Regular AdriaDB Normal Agency FB

L L 325 items

c

Font-urile sunt retinute sub formă de fişiere. De regulă, font-urile sunt livrate odată cu Windo�s-ul. În această fereastră aveţi posibilitatea de a gestiona "colectia de fonturi". '

Caracteristicile font-urilor

• Mărime (Size) - textele pot fi reţinute cu litere mai mari sau mai mici . Exemple pentru Curier New:

abc ABC (Size 10 ) ab c AB C ( Size 12) abc ABC ( Size 1 4 )


• Stil (Style) - stabileşte modul În care apar literele scrise pe document . Există mai multe stiluri:

Regular: abc ABC I talie: abc ABC

Bold: abc ABC Bold Italic: abc ABC

Cum stabil im font-ul în Notepad?

Aşa cum am arătat, textele se introduc cu ajutorul unui editor de texte. Până în prezent, am studiat unul singur, cel mai primitiv dintre ele, numit Notepad.

)o> În Notepad, este obligatoriu ca întreg textul să fie scris cu unic font, cu o unică mărime (size) şi cu unic stil (style) .

Selectarea font-ului se face cu ajutorul unei cutii de dialog. Pentru apariţia cutiei, apelaţi la meniu: Edit � Set Font. După selectare, apăsaţi OK.

Iată cum apare textul:

JI Untitled - Notepad

Font

Font Aria!

A MG D T

ÂrgQ<ti"' 'lYB .;;i.;. S.;,i �.s;

Arial Rounded MT

Show more fonts

Fi le Edit Format View Help

Narrow Bold 10 o Nanow Bold Italic 11 8

'=$G !mlll e

a 14 Bold Italic 16 Black 18 Black Oblique � 20

Sample

AaBbYyZz

Script: Western

OK I l Cancel I

Acesta este un text scris cu Arial, Size 1 2, Bold.I „


1 . 1 2 . Afişarea imagini lor

Imagini bitmap monocrome (alb/negru)

În acest paragraf ne propunem să prezentăm modul imaginile. Orice imagine este formată dintr-o mulţime de diferite culori. Un astfel de punct se numeşte pixel.

61

în care se retin ' puncte care au

În cazul imaginilor monocrome un pixel poate fi alb sau negru. Facem convenţia următoare: dacă un pixel este negru atunci, pentru el, se reţine 1, iar dacă este alb se retine O. '

O imagine se reţine prin utilizarea unui tablou bidimensional (elementele sunt aranjate în linii şi coloane) şi fiecare element reţine O sau 1. Mai jos puteţi observa modul în care este reţinută o imagine în care pixelii sunt aranjaţi în 6 linii şi 10 coloane şi cum arată imaginea (este mult mărită) :

o o o o o o o o o o o o 1 o 1 1 1 o o o o o 1 o o 1 o o o o ---+ o o 1 o o 1 o o o o o o 1 o o 1 o o o o o o o o o o o o o o

./ Pe scurt, pixelii care alcătuiesc o unagme sunt notari sub forma ' coloane / linii. De exemplu, imaginea anterioară este alcătuită din 10 X 6 pixeli .

./ Aşa cum am arătat, bitul este unitatea elementară de măsură a memoriei. Un bit poate reţine O sau 1. Numele acestor tipuri de imagini, bitmap, este dat de faptul că sunt retinute ca o ''hartă a bitilor". ' '

./ Fişierele care reţin imagini bitmap au extensia .bmp.

Codificarea culorilor

Există mai multe sisteme de codificare a culorilor; vor fi prezentate În detaliu în cele ce urmează două dintre acestea.


Sistemul de codificare RGB. Se porneşte de la 3 culori fundamentale: roşu, verde şi albastru (Red, Green, Blue). Fiecare dintre culori este caracterizată de o anumită intensitate care se cuantifică printr-un număr natural între O şi 255. Orice altă culoare se obtine ca o combinatie a culorilor fundamentale, ' ' fiecare cu o anumită intensitate. Pentru a retine intensitatea unei culori ' fundamentale (adică un număr natural Între O şi 255) este necesar un octet (8 biţi). Aceasta Înseamnă că pentru a reţine codul oricărei culori sunt necesari 3 octeti. '

./ Prin utilizarea acestui sistem se pot codifica 256x256x256 culori.

16.777.216

În realitate, nu orice culoare poate fi obţinută prin acest procedeu. Cu toate acestea, culorile astfel obţinute sunt suficiente pentru a reda cu fidelitate

. . . once unagme.

Sistemul de codificare HLS: Hue (nuanţă), Luminosity (luminozitate) şi Saturation (saturaţie) . Cei trei parametri au următoarea semnificaţie:

- H ue (nuanţa) - cuantifică anumite proporţii de roşu, verde, albastru. Ia valori între O şi 239.

- Luminosity (luminozitatea) - măsoară strălucirea nuanţei. Ia valori între O şi 239. Valoarea O are semnificaţia de absenţă totală a strălucirii (se vede negru), iar la 239 luminozitatea este maximă (se vede alb).

- Saturation (saturaţia) - proporţia în care nuanţa este pură. Şi acest parametru ia valori de la O la 239. Valoarea O are semnificatia de absentă a nuantei, iar la ' ' ' 239 este pură. Nuanţele cu valori mici ale saturaţiei apar cu mult gri, iar cele cu valori mari ca "pure".

Imagini bitmap în culori

Imaginile monocrome nu mai sunt folosite astăzi. PC-ul dumneavoastră afişează imagini color.

În cazul imaginilor color, pentru fiecare pixel care intră în structura sa, se reţine codul culorii. De exemplu, dacă prin absurd, avem o imagine color de 10x6 pixeli şi codul culorii ocupă 3 octeţi, atunci sunt necesari 10x6x3 (3 octeţi pentru codul culorii), adică 180 octeţi.


Prin paleta de culori a calculatorului înţelegem mulţimea culorilor pe care acesta le poate afişa. Numărul de elemente al acestei mulţimi ţine de placa grafică şi de monitor (în mod curent, paleta are 16.777.216 culori) . Nu Întotdeauna este posibil ca monitorul să afişeze în acelaşi timp toate aceste culori.

Nu toate imaginile utilizează atât de multe culori. De exemplu, pentru multe imagini sunt necesare numai 16 culori, alteori 256. Apare, astfel, o întrebare: oare este posibil ca, dacă se utilizează mai puţine culori, să reducem spaţiul ocupat în memorie de o imagine bitmap? Răspunsul este afirmativ. Apare, astfel, o no�une nouă, numită paletă (a nu se confunda cu paleta calculatorului) .

Prin paletă înţelegem o submulţime a paletei de culori a calculatorului. Culorile din paletă sunt utilizate pentru afişarea imaginilor pe monitor. Astfel avem paletă de 16 culori, paletă de 256 culori, paletă de 65536 culori. Uneori paleta poate coincide cu paleta de culori a calculatorului.

În paleta calculatorului culorile se găsesc într-un tabel şi sunt ordonate după anumite criterii. Astfel, primele 16 culori (indispensabile) sunt primele în tabel, apoi urmează cele 256-16 culori care se adaugă în cazul în care paleta conţine 256 culori, ş.a.m.d. Fiecare culoare are, în tabel, un anumit indice cuprins Între O şi numărul total de culori (n), numit şi indice de intrare în tabelă:

Culoarea I Culoarea 2 1 . . . „ „ „ „ „ . . . . . . . . . . . . . . . „ . . . . , Culoarea n

O 1 n-1

O imagine bitmap va reţine pentru fiecare pixel indicele de intrare în tabelă pentru culoarea respectivă.

•

•

Dacă paleta are 16 culori, atunci pentru culoare se va re�ne un număr natural între O şi 15. Astfel, sunt suficien� 4 b* pentru un pixel. La o imagine de 10x6 pixeli sunt necesari 30 de octe�. Faţă de cei 180 . . .

Dacă paleta are 256 culori, atunci pentru culoare se va reţine un număr natural între O şi 256. Astfel, sunt suficien� 8 b* (un octet) pentru un pixel. La o imagine de 10x6 pixeli sunt necesari 60 de octeti. '


Parametrii de afiş.are a imaginilor pe monitor

Există doi parametri fundamentali de caracterizare a imaginilor afişate pe monitor.

Rezolutia. Este dată de numărul de pixeli care se afişează pe monitor. În functie de monitor se pot utiliza mai multe rezolutii. Exemple de rezolutii ' ' ' folosite: 640x480, 800x600, 1024x768, 1600x1200. Evident, cu cât rezolutia ' este mai ridicată, cu atât imaginea afişată este mai dară .

./ Totuşi, cu cât rezoluţia este mai ridicată icon-urile, cutiile de dialog, etc. sunt mai mici. Aceasta pentru că ele sunt, de fapt, bitmap-uri de o anumită dimensiune (de tip mxn pixeli) .

./ Rezoluţia maximă care poate fi afişată de monitor se găseşte pe oferta de vânzare a acestuia .

./ Monitoarele mai sunt caracterizate de un parametru, lungimea diagonalei. Ea se exprimă în inch (1 inch=2,54 cm). Exemple de lungime a diagonalei: 15" (adică 15 inch), 17'', 21", etc .

./ Prin faptul că nu toate monitoarele au aceeaşi dimensiune, rezoluţia pe care acestea o au nu este suficient de semnificativă. Din acest motiv, uneori, rezoluţia este dată în dpi ( dots per inch, puncte pe inch) .

Numărul de culori folosite. Imaginile pot fi afişate cu 16 culori (4 biţi), 256 culori (un octet) sau 65536 culori (High Color, 2 octeţi) sau 16. 777 .216 (f rue Color, 3 octeţi). Numărul de culori care pot fi folosite depinde şi el de monitor şi de placa grafică folosită .

./ Cu cât numărul de culori este mai mare, cu atât imaginea afişată este mai apropiată de realitate .

./ Există mai multe standarde de afişare a imaginilor, cel clasic, dar depăşit demult, fiind standardul VGA (Video Graphics Array). Sistemele dotate cu acest standard afişează imaginile cu rezoluţia 640x480 şi se utilizează 16 culori, sau rezoluţia 320x200 şi se utilizează 256 culori. Alt standard: SVGA (Super VGA). La el, paleta de culori a calculatorului are 16.777.216 culori, dar paleta cu număr maxim de culori poate avea, (uneori) mai puţine culori. Toate acestea ţin de capacitatea memoriei video a calculatorului.


,/ Memoria video se găseşte pe placa grafică. Practic, pe monitor se afişează conţinutul memoriei video. Memoria video poate fi de 256K (de mult depăşită), 1MB, iar plăcile video actuale pot avea şi peste 1GB . . .

,/ Dacă programatorul selectează rezoluţia maximă şi numărul maxim de culori, evident, toate acestea presupun un efort de memorare şi, în general, de calcul. Dacă nu sunt indispensabile (de exemplu în cazul editoarelor de texte), atunci acesta poate selecta valori inferioare. Astfel, creşte viteza de procesare . . .

Setări privind afişarea pe monitor

Diferitele setări privind afişarea pe monitor se fac cu ajutorul opţiunilor din grupul de comenzi Appearance and Personalization din Control Panel.

Pentru a ajunge la acest grup de comenzi selectaţi Control Panel din meniul Start şi apoi apăsaţi pe Appearance and Personalization. Se va deschide fereastra de mai jos:

Control Panel Home

System and Security

Network and Internet

Hardware and Sound

Programs

User Accounts and family Saf.ty

• AppearallCe and Personalization Clock, Language, and Region

Ease of Access

Personalization Change the the:me Change desktop background Change window glass colo�

Change sound �'cts Chang' srn!en save:r

Display Make text and other items larger or smaller Ad just ser''° resolution Conned to a projtctor

Connect to an v:ternal display

� Desktop Gadgets -.&. Add gadgets to the desktop Get more gadgets onhn' Unmstall a gadget

Rmore desktop gadgets installed with Windows

Taskbar and Start Menu Customizethe Start menu Customize 1cons on thetaskbar Change the p1cture on the Start menu

� Ease of Access Center � Accommodate low v1sion Use meen reader T um on ea� access keys Turn High Contrast on or off

el Folder Options J.: Specify single- or double-click to open Show hidden files and folders

Fonts Preview, delete., or show and hidefonts (hange Font Settmgs Adjust ClearTypet&t

Se pot face o mulţime de setări. Vom prezenta mai JOS doar o parte dintre acestea, restul încercaţi să le descoperiţi singuri!


Setarea rezolutiei. Executaţi clic asupra opţiunii Ajust screen resolution din grupul de comenzi Display. Veţi avea posibilitatea de a selecta rezoluţia dorită trăgând de acul indicator până obtineti setarea dorită.

' '

,/ Windows-ul detectează automat rezolutiile '

care pot fi folosite. Nu vă rămâne decât să folosiri rezolutia aleasă de Windows, care

' '

este probabil cea mai bună rezoluţie

Display: Ii. Mobile PC Display .... J Resolution: 1366 x 768 (recommended) „ I Orientation: High

O 1366 • 768 (recommended)

Connect to a prOJel

Make text and othe What display settm

800 X 60() low

suportată atât de placa grafică cât şi de monitorul dvs, sau puteţi selecta rezolutia dorită de dvs.

'

Temă. Fiecare utilizator are preferinţele sale în ceea ce priveşte modul în care vrea să arate fundalul desktop-ului, culorile folosite de ferestrele şi casetele de dialog ale Windows-ului, suneletele folosite de acesta, etc. - toate se pot modifica alegând una dintre temele instalate.

Pentru aceasta se alege opţiunea Change Theme din grupul de comenzi Personalization. Aici puteţi alege o temă instalată sau folosind opţiunile din partea de jos a ferestrei puteţi modifica doar background-ul (fundalul) desktop-ului, paleta de culori folosită, etc.

My îhemes (l)

Desktop Background

1mgll

Window Color

Sh1te Sounds

Landscape

Save the:me: Get more themes online

Screen Saver

None

Este reconfortant ca Desktop-ul să conţină o anumită imagine. Windows-ul furnizează o mulţime de imagini, dar se pot utiliza şi altele (o fotografie, un peisaj preluat de pe Internet, etc) . O imagine folosită pentru a fi afişată pe Desktop se mai numeşte şi WallPaper (hârtie de perete).


Pentru a încărca Wallpaper-ul, în fereastra anterioară selectăm opţiunea Desktop Background. Dacă dorim una furnizată de Windows, o selectăm din lista afişată sau, dacă dorim o alta, aflată undeva pe hard sau pe CD, apăsăm butonul Browse. Va apărea o cutie de dialog de tip Open, cu ajutorul căreia selectăm fişierul grafic dorit.

Choose your desktop background Click a picture to make it your desktop background, or select more than one picture to create a slide show.

Picture location: [Windows Desktop Backgrounds

• Architecture (6)

Picture position: Change picture every:

Fili • .

·I I �rowse„. I

c..:=-o�l� __ __,-1 130m;nutes � �hen using battery power, pause the slide show to save power

Save changes I �

Imaginea poate fi memorată ca fişier cu una din extensiile .bmp, .gif sau . jpeg. Imaginile memorate sub formă de fişiere cu aceste extensii vor fi tratate în alt paragraf.

Programe de protejare a monitorului şi de punere a calculatorului în regi m de economie a energ iei

Uneori calculatorul rămâne deschis, fără să mai lucrăm la el. Pentru ca monitorul să nu se uzeze în mod inutil, se poate determina ca, după un anumit timp, acesta să afişeze o anumită figură sau un anumit text. De fapt, putem selecta dintr-o listă un program care afişează acea figură sau text. Figura, textul sunt în permanentă mişcare (animate) . Mai mult, există posibilitatea ca după un interval de timp, monitorul, hard-ul sau sistemul în ansamblu să intre în regim de economie. În aceste cazuri, repornirea se face la prima comandă dată calculatorului - de exemplu, o simplă mişcare a mouse-ului. Pentru a obţine aceste efecte, în fereastra Appearance and Personalization se selectează Change Screen Saver.


1. Cum determinăm ca, după un timp dat, să apară o anumită imagine sau un anumit text?

Selectarea propriu-zisă se face cu ajuto1ul listei Screen saver, pe care o vedeţi desfăşurată În imaginea alăturată. Cu ajutorul edit-ului Wait se stabileşte timpul de inactivitate după care Începe afişarea figurii selectate, iar cu ajutorul butonului Settings se poate apela o altă cutie de dialog prin intermediul căreia este posibil, de exemplu, să se stabilească textul care apare pe monitor. Efectul selectării se

._ Scre�mSaver Settings -

�

kD o I

Scrttn �vr:r

l(Non<) - ·I Sett1n9s. Prrv-(Nonr:) .„ , me,. displlY logcn mttn

81„nk 1 Bubblts

My<tify nce: by "dJvsting displ"y Photos

Ribbons �h„ngi: ll:2W!:f ��mg�

� �

�

I ""''

poate observa pe loc, dacă apăsăm butonul Preview.

2. Cum determinăm ca, după un timp, monitorul, hard-ul sau sistemul în ansamblu să intre în regim de economie de energie?

În partea de jos a cutiei Screen Saver Settings se găseşte link-ul Change Power Settings. Apăsarea lui are ca efect apariţia unei alte cutii de dialog.

În această cutie se poate alege un plan de economisire sau selectând opţiunea Change when the computer sleeps din meniul din stânga al cutiei de dialog, se selectează timpul după care monitorul, sistemul intră în regim de economie. Chiar mai mult se pot face setări mai rafinate selectând opţiunea Change Advanced power settings:

# Plugged in ·I [5 minutes ·I ·I ltOminutes ·I ·I 130 minutes ·I

:9: o if �

� PowCf0ptions

1�-1 l<l<ct th• pow" pi'" thot y<>u w'"t to <u>tomU< ond then choose sdtings that rtflttt how you want your computer to man<Jge power.

Oitngr H1tin91 th1t arţ currţnt'Y unMilablr

8 Require 1 password on w1ket1p

On battey. Yts Plugged in; Ves III Harddisk

rlJ Desktop background stttings

Iii Wireless Adapter sntings

m Sletp

Iii US8 settings uttnn� An li

·I

Restoreplan defautts


1 . 1 3. Realizarea desenelor c u Panit

Noţiuni introductive

Paint este un program livrat odată cu sistemul de operare Windows şi se apelează ca mai jos:

Startt All Programs� Accessories� Paint

Paint-ul este utilizat pentru a realiza desene. Deşi simplu - poate fi utilizat şi de copiii de vârstă preşcolară - conţine câteva elemente importante ale graficii pe calculator. Mai jos, puteţi observa fereastra afişată de acest program:

J Paste '"

") -. Untitled· P1irrt

.

Home Vlew

i--i „ L __ J o;i Select -„

Jm 11t , /�

Panglica (meniul)

'NOD Outll'l' DL!.61',. · 0000 •

-''"

• • • • î"WI ' . � Edit

Componenta

care retine ' desenul

Bare de derulare

l ' rg 1404 X 682pJ( 100% 8 o�

Bara de stare

Fereastra anterioară, care apare atunci când se apelează programul, conţine:

• panglica (un tip mai special de meniu); • o bară de stare; • două bare de derulare (orizontală şi verticală) care se utilizează atunci

când desenul este mai mare decât fereastra de afişare; • o componentă care reţine desenul.

Programul utilitar Paint creează şi vizualizează fişiere de tip bitmap (.bmp), care reţin, după cum ştim, pentru fiecare bit culoarea pe care acesta o afişează.


Utilizarea culorilor

� În fila Home de pe panglică se află două căsuţe (Color 1 şi Color 2), fiecare cu o culoare. Prima dintre ele este aşa numita culoare din prim-plan, folosită, de regulă, pentru realizarea desenului propriu-zis, iar a doua este culoarea de fond. Pentru a selecta o anumită culoare pentru cele două casete, se dă clic pe caseta respectivă apoi se alege din paleta de culori, culoarea dorită. În figura de mai jos s-a desenat un dreptunghi având conturul albastru (culoarea mai Închisă) şi umplut cu galben (culoarea mai deschisă) :

o

+

) ..- Untrtl� · P•1nl

• '- A � .

- ·

100% e "O C:ti

� Putem oricând modifica aceste culori, însă schimbarea lor nu afectează desenul deja făcut, ci doar ceea ce urmează să desenăm.

� Paleta de culori care apare în momentul lansării aplicaţiei Paint se numeşte paletă implicită. Ea conţine 20 de culori, suficiente pentru majoritatea aplicaţiilor. După cum vom vedea, există posibilitatea schimbării culorilor din paletă.

Realizarea desenelor

Realizarea desenelor se face prin utilizarea instrumentelor (T ools) şi formelor (Shapes) din fila Home. Orice instrument se selectează prin executarea unui clic asupra lui. După aceasta Paint-ul va funcţiona într-un mod specific, determinat de instrument (unealtă) .

În continuare vom prezenta uneltele şi modul În care pot fi folosite.


'-.. f\/ 0 0 0 1 � O O O c:> < ZJ. � u � CJ(

--

Size

Creionul. Selectarea acestei unelte are ca efect faptul că putem desena întocmai ca şi cum am folosi un creion. Cu butonul stâng al mouse-ului se pot efectua desene cu ajutorul culorii de prim-plan - se ţine butonul stâng apăsat - sau cu ajutorul culorii din fond - se ţine butonul drept apăsat. Trasarea se face atât tim cât se tine a ăsat unul din butoanele mouse-ului. Guma. Selectarea uneltei alăturate are ca efect posibilitatea efectuării ştergerilor în desen. Ştergerea propriu-zisă se face ţinând apăsat butonul mouse-ului şi plimbând guma asupra porţiunii de desen pe care dorim s-o ştergem. � tergerea se face prin apariţia în zona

e unde am trecut a culorii de ond. Trasarea segmentelor de dreaptă se efectuează cu unealta alăturată. În punctul în care apăsăm butonul mouse-ului este o extremitate a segmentului, iar în punctul în care eliberăm acest buton este extremitatea cealaltă. Pensula. Există de fapt mai multe tipuri de "pensule": pensula propriu-zisă, sprayul, peniţa, etc., care pot fi selectate din lista alăturată.

Trasarea curbelor se face folosind unealta alăturată. Iniţial se trasează un segment de dreaptă. După aceea se aşează cursorul grafic într-un punct al segmentului. Urmează "tragerea" acestuia şi deformarea după dorintă.

Pentru trasarea segmentelor de dreaptă şi a curbelor se selectează din lista grafică alăturată grosimea liniei.

Colorarea suprafeţelor închise se efectuează cu unealta alăturată. După selectarea uneltei, un clic cu butonul stâng (drept) al mouse-ului, atunci când cursorul grafic se găseşte în interiorul suprafeţei închise, are ca efect colorarea ;uprafeţei folosind culoarea de prim-plan (de fond) . In cazul în care nu există suprafaţa închisă, se colorează întreg fondul desenului.

72

100 %

[� Fi11 ·i -- ·

fZl No fiii

lil Solid color

� Crayon

g Marker

� Oii

� Natural penei !

� Watercolor

[t\; Opaque

FAl Tra nsparent! Garamond ""'

12 • B I .!l al>c Font


Exemplu de colorare a unei suprafeţe închise:

Lupa. Se foloseşte atunci când dorim sa mărim/micşorăm tmagtnea, pentru a putea realiza anumite efecte. Practic, se selectează unealta ş1 desenul folosind butonul stâng al mouse-ului tmagmea este mărită, iar folosind butonul drept al mouse-ului imaginea este micşorată.

Pentru a reveru la dimensiunea normală (100%) folosim butonul alăturat, aflat în fila View. Trasarea poligoanelor se face cu ajutorul uneltei alăturate. După selectarea uneltei se fixează primul punct prin apăsarea butonului mouse-ului, ap01 al doilea etc. După fixarea a două puncte se trasează automat segmentul care le uneşte. Există ş1 posibilitatea ca fixarea unui punct să se facă ţinând apăsat butonul mouse-ului, caz în care se vizualizează se2."lllentul în timpul creării. În cazul figurilor geometrice modul de afişare al acestora se selectează din lista grafică alăturată. În primul caz se trasează doar figura geometrică, în al doilea se trasează figura în care marginile sunt trasate cu ajutorul culorii de prim-plan şi în interior figura are culoarea de fond, celelalte opţiuni oferă difete modalităţi de umplere a figurilor desenate.

Scrierea textelor. Se selectează unealta alăturată şi se selectează unul dintre cele două moduri de scriere:

- opac, se scrie într-un cadru care are culoarea de fond şi literele au culoarea de prim-plan;

- transparent, adică se scrie peste desenul continut în chenar, iar literele au culoarea de ' prim-plan.

Textul va fi scris în interiorul unui chenar trasat cu ajutorul mouse-ului. Din meniu se stabileşte font-ul, stilul şi mărimea literelor.


Instrumentul alăturat vă oferă posibilitatea să preluaţi culoarea pe care o are o anumită parte a unui desen, prin executarea unui clic asupra sa. Dacă clic-ul se execută cu butonul stâng, culoarea va deveni culoare de prim-plan, iar dacă se execută cu butonul drept, devine culoare de fond.

Selectarea unei porţiuni de desen

Pentru editarea unei anumite părţi a unui desen vom avea uneori nevoie să selectăm acea parte. Din meniul alăturat avem posibilitatea de a alege următoarele instrumente de selectare:

Selectare dreptunghiulară. Se ţine apăsat butonul stâng al mouse-ului. Prin deplasarea cursorului grafic se obţine un dreptunghi. Un colţ al său �ste punctul iniţial, cel opus este punctul final. In dreptunghiul creat, care marchează selectia, cele două colturi sunt diametral opuse. ' '

Sel ect

Seledion shapes [] .Bectangular selection

(\ free-form selection

Selection optioru

[ol Select i!ll

..,- jn ert select1on

"/( Qelete

Iransparent selection

Selectare oarecare (liberă). Se ţine apăsat butonul stâng al mouse-ului. De această dată cursorul grafic se deplasează în aşa fel încât să formeze o curbă închisă care cantine în interiorul ei portiunea de desen care ' ' dorim să fie selectată. La ridicarea butonului apare un dreptunghi care include selecţia. De fapt, În interiorul său se va găsi exact zona pe care am selectat-o.

Operaţii asupra porţiuni lor selectate �� Rotate •

�� Rotate right 90'

1. Rotaţii. Întreg desenul sau numai o porţiune selectată �... Rotate Jett90•

a acestuia pot fi rotite folosind meniul din imaginea S Roţate iso·

alăturată: ..:;: Flip �ertical

Porţiunea selectată

Flip OrÎZ(Jntal

Flip vertical

�� Flip !:!orizontal

Rotaţie cu

90 grade

74

2.


Deformatii/Înclinări. Dacă dati clic pe butonul alăturat se ' ' c:!;:J Resize va deschide o cutie de dialog, ca cea de mai jos, care conţine două grupări de obiecte. Prima dintre ele, Resize, permite să se modifice procentual lăţimea sau înălţimea zonei selectate (practic, imaginea se deformează). A doua, Skew, permite să efectuăm anumite înclinaţii date în grade, atât pe orizontală cât şi pe verticală.

Resize and Skew

Resize

By: 1� Percentage 5 Pixels ......... D Horizontal: 100

Dt Vertical: 100

� Maintain aspect ratio

Skew (Degrees)

.........

L7 Horizontal: o

�! Vertical: o

OK I I Cancel

Mai jos este prezentată o zonă selectată în poziţie normală, apoi înclinată faţă de verticală şi faţă de orizontală cu 25 de grade:

3. Mutarea zonei selectate în interiorul desenului. Dacă tinem butonul ' stâng al mouse-ului apăsat în timp ce cursorul grafic este În interiorul unei zone deja selectate, deplasarea cursorului are ca efect deplasarea întregii zone. În locul ocupat iniţial rămâne culoarea de fond curentă.


4. Copierea porţiunii selectate în Clipboard. Utilizaţi butonul [tfil Copy Copy. Zona selectată rămâne în desen, dar este şi copiată În Clipboard. Dacă se foloseşte Cut, atunci porţiunea este � Cut copiată În Clipboard, dar ea dispare din desen.

Conţinutul zonei Clipboard poate fi inserat cu butonul alăturat şi mutat acolo unde doreşte utilizatorul.

../ Conţinutul Clipboard-ului poate fi inserat şi în alte aplicaţii .

o Paste

../ Dacă tastaţi, indiferent de aplicaţia care se rulează la un moment dat, Print Screen, în Clipboard se va memora întreaga imagine afişată de ecran în acel moment. Efectuarea operaţiei Paste în Paint determină ca desenul să conţină această imagine. Imaginea astfel obţinută poate fi prelucrată, de exemplu, se poate reţine din ea doar o parte (care se selectează în prealabil) . Astfel se obţine ceea ce în mod curent se numeşte "captură de ecran" .

5. Ştergerea porţiunii selectate. După selectare tastaţi Del. În locul părţii şterse În desen rămâne culoarea de fond curentă.

Modificarea culorilor din paletă

Cum construim o nouă culoare? Cu ajutorul butonului alăturat apelăm cutia de dialog de mai jos, care ne permite construcţia noii culori:

�ustom colors:

r ehtu� I! OK

Cursor de culoare

r---- H �: j126 I atl194 ColorlSglid !. m I�

8dd o Custom Colors

Hue

Sat

Edit colors


În caseta Color I Solid vom găsi deja selectată culoarea pe care vrem s-o modificăm. Noua culoare se obţine, mai uşor, prin utilizarea sistemului HLS. Primii doi parametri (Hue şi Sat) se modifică prin deplasarea cursorului de culoare, aflat în matricea culorii, În plan orizontal şi vertical, iar al treilea (Lum), prin deplasarea cursorului în lista grafică din dreapta .

./ Noua culoare se poate obţine şi prin tastarea valorilor care o caracterizează, fie în sistemul RGB, fie în sistemul HLS.

În final apăsăm butoanele Add to Custom Colors şi OK

Alte operaţii efectuate în Paint

Fereastră nouă pentru desen. Din meniul ataşat butonului alăturat, I �Ci aflat în stânga filei Home, selectaţi opţiunea New.

Salvarea unui desen. Din acelaşi meniu selectaţi opţiunea Save. Dacă desenul nu a mai fost salvat apare o cutie de dialog prin care puteţi selecta folder-ul şi numele sub care va fi salvat fişierul. Extensia acestuia este bmp şi este pusă automat. Dacă doriţi ca salvarea să se facă cu alt nume, chiar dacă fişierul a fost salvat, utilizaţi opţiunea Save As„. Va apărea cutia de dialog descrisă anterior.

Încărcarea unui fişier care contine un desen ' (extensia bmp). Din meniul anterior selectaţi Open.

� �ave

� Save �s

Erint

Inserarea unui fişier - alegeţi opţiunea Paste from din meniul ataşat butonului Paste.

�aste Paste from


Selectarea întregului document - alegeţi opţiunea Select AH din meniul ataşat butonului Select:

�:_:] Select

Selectron shapes

(-·.„ ... '·--"'

[[j] Select .Q.1 1

Stabilirea lungimii şi înăltimii imaginii - selectati optiunea Properties din ' ' ' meniul aflat în stânga filei Home. Cu ajutorul unor butoane radio selectaţi unitatea de măsură - Units - (pixeli, inches, cm).

Image Preperties

File Attributes

Last Saved:

Size en disk:

Reselutien:

Units

e') !nches

(t) Centimeters

@ Eixels

J6'idth:

Net Available

Net Avai lable

96 DPI

Colors

� .!l.lack and white

@ Cejor

I !:ieight: 188 Qefault

OK 1 1 Cancel

I•

Stabilirea faptului dacă o imagine este în culori sau nu - din aceeaşi casetă de dialog, cu ajutorul a două butoane radio selectaţi, Black and white sau Colors.

Renuntarea la ultima actiune asupra 1magm11 Undo ;flat pe bara de titlu.

utilizati butonul '


Alte formate grafice

Studiul modului În care sunt reţinute imaginile bitmap a scos În evidenţă un dezavantaj major al acestui mod de memorare: în general, aceste imagini ocupă mult spaţiu de memorie. Problema care s-a pus a fost: cum se poate ca o imagine să ocupe mai puţin spaţiu? În acest fel au apărut alte formate grafice (moduri de memorare a unei imagini):

1. Formatul GIF (Graphics Interchange Format). Se presupune că orice imagine poate fi formată din cel mult 256 culori. Aceasta înseamnă că pentru fiecare pixel se reţine, de fapt, un indice de intrare într-o paletă de culori (indicele ocupă un octet). Apoi, dacă numerotăm pixelii, vom observa că vom întâlni secvente de mai multi pixeli în care toti au aceeaşi ' ' ' culoare. Astfel se poate reţine indicele pixelului care este începutul de secvenţă, cel care memorează sfârşitul secvenţei şi indicele culorii pixelilor din secvenţă. Faţă de un bitmap clasic, o imagine în format GIF ocupă, în medie, mai puţin de o treime din spaţiu. Fişierele care conţin imagini de acest tip au extensia .gif.

./ O imagine memorată în format GIF pierde din calitate în privinţa culorii (se zice că are o adâncime de culoare mai mică), dar respectă toate detaliile pe care le conţine imaginea .

./ Imaginile în format GIF sunt preferate pentru a reţine fişiere care prezintă secvenţe animate (în mişcare).

2. Formatul JPEG CToint Photographic Experts Group) comprimă imaginea prin procedee matematice complicate, care elimină anumite detalii privind imaginea, dar păstrează adâncimea de culoare dată. Şi această metodă oferă o rată bună de compresie, ajungând ca spaţiul ocupat de imagine să fie mai puţin de o treime din spaţiul iniţial. Fişierele care conţin imagini de acest tip au extensia . jpg (.jpeg) .

./ Există o mulţime de alte formate grafice (TIFF, PCX, WMF). Utilizatorii sunt mai putin interesati de modul în care sunt retinute ' ' ' imaginile în astfel de formate, ci mai degrabă de programele care le pot prelucra .

./ În Paint se pot încărca sau salva imagini în format GIF sau JPG. Vedeţi filtrul cutiilor de dialog Open /Save.


1 . 1 4. Personalizarea modului în care Windows

răspunde comenzilor date de utilizator

General ităţi

79

Există posibilitatea ca, într-o anumită măsură, să putem selecta modul în care Windows răspunde comenzilor noastre. Pentru aceasta vom utiliza meniul ataşat butonului Start, Control Panel, Appearance and Personalization şi apoi selectăm Folder Options:

[{;] Folder Options Specify single- or double-click to open Show hidden fi les and folders

Va apărea o cutie de dialog în care putem selecta una din cele trei pagini al căror nume este prezent în imaginea de mai jos:

fold er Options

General View

Browse folders

Search

� @ Open each folder in the same window

� O Open each folder in its own window

Pagina General conţine mai multe grupuri de opţiuni:

• Browser Folders Dacă selectaţi prima opţiune, când selectaţi pentru vizualizare conţinutul unui subfolder, conţinutul acestuia va fi vizualizat în aceeaşi fereastră, altfel se va utiliza o nouă fereastră.

• Click items as follows Pentru a lansa În executare un program sau a deschide o fereastră oarecare se poate executa doar un clic cu mouse-ul, dacă se selectează prima opţiune. De asemenea, titlul icon-ului poate fi subliniat în permanenţă sau numai când cursorul grafic staţionează asupra sa. Dacă selectăm a doua opţiune, atunci pentru lansarea în executare se foloseşte dublu clic (vezi figura de pe pagina următoare) .


Oick items as follows

I('.') Single-click to open an item (point to select)

Undertine icon titles consistent with my browser

@ Undertine icon titles only when I point at them

@ Double-click to open an item (single-click to select)

Pagina View conţine mai multe opţiuni, care se pot selecta prin intermediul unor butoane radio sau de marcare. Le vom trata pe cele mai importante.

Opţiuni asupra fişierelor şi folder-elor:

•

•

•

•

.A.dvanced settîngs :

Fîles and Folders

ICI AJways show îcons , never thuml:mails

� Always show menus

� Di�play file icon on thumbnaîls

� Di�play file sîze înformatîon în folder tîps

ICI Di�play the full path în the title bar (Oassic theme cm�·)

Always show icons, never thumbnails - folosirea miniaturilor (thumbnails) poate încetini mult afişarea conţinutului unui folder. De aceea aţi putea prefera să bifaţi această opţiune, pentru a se afişa iconite în loc de miniature. '

Always show menu. Dacă această opţiune este bifată, fereastra va afişa întotdeauna meniul.

Display the full path in the title bar. Dacă este marcată, atunci, bara de titlu a unei ferestre include şi calea.

Calea inclusă Calea neinclusă

Display file size information in folder tips. Dacă această opţiune este selectată, atunci când veţi ţine mouse-ul deasupra unui folder va apărea o mică fereastră care va afişa printre alte informaţii şi dimensiunea fişierelor din folder-ul respectiv:


OJI

- Date created: 5/24/2011 8:30 AM

- Size: 192 M B ·�----+---Folders:: ex, FP, MinGW5tudio

Fi les:: un ins:ta l l .exe

81

Înainte de a prezenta opţiunile următoare, prezentăm, pe scurt, atributele fişierelor.

Read-only - fişierul poate fi doar consultat. Dacă se încearcă ştergerea lui, apare un mesaj de avertizare. Dacă nu se ţine cont de el, fişierul poate fi şters. Tentativa de deschidere a unui astfel de fişier printr-un program care-l prelucrează în vederea actualizării este sortită eşecului. Hidden - fişier ascuns. Dacă această opţiune este prezentă, în afara unor opţiuni speciale, fişierul nu este afişat.

./ Fişierele copiate de pe CD sunt automat marcate cu Read-Only .

./ Puteţi vizualiza şi modifica atributele unui fişier prin apelarea meniului flotant ataşat icon-ului său şi selectarea opţiunii Properties.

Dacă în fereastra Properties selectaţi butonul Advanced, se va deschide o nouă cutie de dialog ca cea de mai jos:

Advanced Attributes

� Choose the settings you want for this folder .

File attributes

� File is ready for archiving

� Allow this file to have contents indexed in addition to file properties

Compress or Encrypt attributes

IC) Compress contents to save disk space

['.] Encrypt contents to serure data

Attributes: O Read-only O Hidden

[yetails=-1 OK 1 1 Cancel

I Advanced . . ]


Prima opţiune pe care o puteţi selecta, File is ready for archiving, este deobicei folosită de programele care realizează operatii de backup asupra fişierelor de pe hard. În mod obişnuit aceste progra�e vor face copii de siguranţă doar pentru fişierele având această opţiune bifată, apoi după realizarea operaţiei, deselectează opţiunea.

Cea de a doua opţiune este folosită de programele care indexează conţinutul fişierelor de pe hard-disk. Aceste indexări sunt apoi folosite atunci când căutaţi anumite informaţii/fişiere de pe hard-disk. Aceasta este o facilitate de selectare a fişierelor pe care doriţi să le includeţi În indexare, nouă în CaZ!fl versiunii Windows 7.

Continuăm prezentarea paginii View.

După cum observaţi, fişierele sistem şi cele ascunse pot fi vizualizate sau nu, în funcţie de ce stabiliţi în pagina View:

Hidden files anal folders O Donl show hidden files . folders. or drives @ Show hidden files . folders. and drives

� Hiate empty drives în the Computer folder ID Hide extensions for known file types

De asemenea, extensia fişierelor care au asociate programe care le tratează poate să nu fie afişată (folosind opţiunea Hide extensions for known file types) .

Modificarea asocierilor fişier-program

În funcţie de extensia pe care o are un fişier, Windows va şti cu ce program trebuie să-l deschidă În mod implicit, datorită asocierilor fişier/program pe care le memorează. Înainte de a prezenta modul în care se realizează această asociere vom studia modul în care functionează efectiv. '

1. Creaţi un fişier cu Notepad şi salvaţi-l. Închideţi aplicaţia Notepad şi vizualizaţi cu My Computer fişierul pe care l-aţi creat la pasul anterior. Executaţi dublu clic asupra icon-ului său. Automat, se va lansa programul Notepad, care va încărca fişierul.

De ce? Întrucât fişierul a fost creat cu Notepad, el are extensia .txt, iar fişierele cu această extensie sunt asociate cu programul Notepad.


2. Modificaţi extensia fişierului prin redenumirea lui. Să zicem că noua extensie este .rgp. Executaţi din nou dublu clic asupra icon-ului său. De această dată va apărea cutia de mai jos:

Windows

Windows can't open this file :

File : ex.rgp

To open this file, Windows needs to know what program you want to use to open it. Windows can go online to look it up automatically, or you can manually select from a list of programs that are installed on your computer .

What do you want to do?

�·I Use the Web service to find the correct program

O Select a program from a list of installed programs

Ce s-a Întâmplat?

OK ) [ Cancel

Windows a întâlnit extensia .rgp. Fişierele cu această extensie nu sunt asociate cu un anumit program. Prin urmare, prin această cutie suntem Întrebaţi prin care program trebuie deschis fişierul. Dacă alegem a doua opţiune şi apăsăm butonul OK, va apărea o cutie de dialog de tip Open prin care selectăm programul care va deschide fişierul. Dacă programul dorit nu este în listă, utilizaţi butonul Browse şi căutaţi pe hard-disk programul respective.

Înainte de a confirma alegerea făcută, prin apăsarea butonului OK, asiguraţi-vă că aţi bifat opţiunea "Always use the selected program to open this kind of file'', dacă doriţi ca de 0„„,,., fiecare dată când încercati să deschideri m Choose lheprogram youwanttouse to opefl thisfie:

�= �x.rgp ' ' un fişier cu extensia . rgp sa se folosească programul Notepad.

Dacă nu găsim nici un program sau nu ştim ce trebuie să alegem, putem folosi prima opţiune şi ni se va sugera un program potrivit -priviţi fereastra din imaginea alăturată.

� ��= e =:�CO'PO"a�

m :��= GJ ��a�

-�


3. Cum putem găsi asocierile existente între extensiile fişierelor şi programele care le tratează?

Din Control Panel selectaţi Programs şi apoi opţiunea Make a file type always open in a specific program, din grupul de comenzi Defaults Programs:

Default Programs Change default settings for media or devices Make a fi le type always open in a specific program

Set your default programs

Se va afişa o listă cu toate extensiile cunoscute (înregistrate) :

O•�« Default Programs

File Edit View Tools Help

Associate a file type or protocol with a specific program

Cl ick on an extension to view the program that currently opens it by defau lt. To change the defau lt program, click Change program.

No extension or protocol selected

Name Description

Extensi ons

[J .386 Virtual device driver � .3g2 3GPP2 Audio/Video

� .3gp 3GPP Audio/Video

� .3gp2 3GPP2 Audio/Video � .3000 3GPP Audio/Video < I "'

Change program ...

Current Default o

Unknown applicatior Windows Media Play Windows Media Play Windows Media Play Windows Media Plav .,.. .1 •

Identificăm în cadrul listei extensia . txt şi o selectăm. În coloana a treia a tabelului se poate observa programul care tratează fişierele cu această extensie (Notepad) :

.txt T e:xt Document Notepad

Să vedem în continuare cum putem instala şi dezjmtala programele livrate odată cu sistemul de operare Windows, precum şi diverse alte aplicaţii.


1 . 1 5. Instalare şi dezinstalare

Instalarea şi dezinstalarea unor aplicaţii l ivrate odată cu Windows-ul

85

Este posibil ca Windows-ul aflat pe calculatorul dvs. să nu conţină anumite aplicaţii care vă interesează şi se găsesc pe CD-ul ce conţine Windows-ul. De asemenea, este posibil ca anumite aplicaţii care se găsesc deja instalate să nu vă mai fie de folos, deci să doriţi să le dezinstalaţi, pentru a nu mai ocupa spaţiu pe hard. Cum instalăm aceste aplicaţii şi cum le dezinstalăm? Aceasta este întrebarea la care răspundem În acest paragraf.

Apelaţi Start, Control Panel, Programs şi apoi Turn Windows feature on or off Va apărea o cutia de dialog de mai jos:

GîJ Windows Featu res = @}.

Turn Windows featu res on or off To turn a feature on, select its check b ox. To turn a feature off, clear its c h eck b ox. A fiii ed b ox mea ns that on ly part of the feature is turn ed on.

l±l � !El �

l±l ICI !El

l±l � l±l [j] l±l !El l±l [j]

ICI �

Internet Explorer 8 Internet Information Servi ces

Internet Inform ation Servi ces H ostable Web C ore

M edi a Features

M i crosoft .NET Framework 3.5.1 M i eros.oft Mes.sage Queue (MSM Q) Server

Pri nt and Document Servi ces

RAS Connectio n Manager Ad ministrati on Kit (CMAK)

Remote D ifferentia l Compressi on

OK j [ Cancel

Fereastra Windows Features - Windows, versiunea 7

....

În listă puteţi selecta sau dimpotrivă, deselecta oricare dintre opţiuni. Pentru opţiunile selectate se vor citi de pe CD /DVD programele respective, care vor fi instalate, iar pentru cele deselectate, se vor dezinstala programele respective.


lnBtalarea şi dezinBtalarea diverBelor a plicaţii

Ce înseamnă instalarea unui program (aplicaţie) şi de ce nu este copiat pur şi simplu de pe unitatea externă?

O aplicaţie poate conţine mai multe programe şi mai multe fişiere de date. Fiecare dintre acestea trebuie să se găsească într-un anumit folder care trebuie creat.

Programele sunt scrise compresat (există anumiţi algoritmi care realizează aceasta şi anumite programe care le compresează sau, dimpotrivă, le decompresează).

O anumită aplicaţie este trecută în meniul Start şi/ sau se creează un shortcut pe Desktop către ea.

Windows-ul reţine anumite informaţii despre aplicaţie (de exemplu asociază programele cu fişierele aplicaţiei), informaţii pe care le utilizează în timpul exploatării ei .

./ De aici puteţi deduce şi faptul că instalarea/ dezjnstalarea nu înseamnă numai scrierea sau ştergerea unui program de pe suport.

De cele mai multe ori aplicatiile sunt livrate pe CD/DVD, iar continutul ' ' '

se numeşte kit de instalare. In aceste cazuri este suficient să apelaţi programul setup.exe sau install.exe aflat pe CD/DVD, iar instalarea se va face automat. Astfel de aplicaţii conţin şi un program care permite dezinstalarea lor.

Pentru dezjnstalare utilizaţi Start, Control Prog rams Panel şi apoi opţiunea Uninstall a programs Uni nstall a program din grupul de comenzi Programs. Va apărea o listă în care veţi selecta aplicaţia pe care doriţi să o ştergeţi şi apăsaţi Uninstall (sau daţi dublu clic pe aplicaţia respectivă) : -

. Organize ... Unin;;jl Change Repa ir

Name

PJI Adobe Reader 9.4.5 -eApple Ap plication Support

Publish er

Ado b e Systems Incorporated

App le Inc.


./ De regulă, la cumpărarea unei aplicaţii, pe lângă CD-ul (CD-urile) care o conţine se livrează şi un mic manual de utilizare. Pe lângă aceste informaţii, cartea conţine şi seria programului, serie care va fi cerută la instalare. Se încearcă să se limiteze pirateria. „

Instalarea şi dezinstalarea font-urilor

Am arătat faptul că Windows-ul este livrat cu un set de font-uri. Există posibilitatea ca utilizatorul să renunţe la unul sau mai multe font-uri sau să instaleze altele pe care le are, evident, sub formă de fişiere. Pentru a realiza o astfel de operaţie se procedează ca mai jos:

• Se selectează Start, Control Panel, Appearance and Personalization şi apoi selectaţi opţiunea Preview, delete, or show and hide fonts:

Fonts Preview, delete, or show and hide fonts Change Font Settings Adjust Clearîype text

O fereastră va vizualiza font-urile existente la acel moment în folder-ul Fonts. Fonturile pot fi grupate în familii de fonturi. O familie de fonturi este un grup de fonturi cu design similar. Unul din fonturile din grup poate fi mai gros, altul italic, etc. În fereastra ce s-a deschis familiile de fonturi sunt reprezentate cu un icon în forma mai multor pagini suprapuse (vezj. în figura de mai jos familia de fonturi AdriaDB Norma�. Dacă daţi dublu clic pe acest icon, se vor afişa fonturile din familia respectivă. Dacă daţi clic pe iconul unui font (nu al familiei) se pot vizualiza toate caracterele fontului respectiv.

•

AcadEref Regular AdriaDB Normal

Ab� Agency FB

Ştergerea unui font se face selectând iconul său şi apoi folosiţi butonul Delete din bara de mai jos:

Organ ize .,.. P review Del ete Hi de

88

•


Pentru a instala un nou font, localizaţi fişierul său pe hard-disk-ul sau CD-ul pe care îl aveti şi deschideri acest fişier (dublu clic pe icon-ul său) . . ' ' In fereastra de previzualizare a fontului selectaţi butonul lnstall:

P rint

Instalarea driver-elor

Aşa cum am învăţat, calculatorul are ataşate o mulţime de dispozitive periferice (hard-ul, tastatura, imprimanta, mouse-ul, unitatea CD-ROM, placa de sunet şi boxele, placa video, scanner-ul, etc). Nu toate perifericele au aceeaşi marcă. Din acest motiv, dincolo de cuplarea fizică, ataşarea lor la calculator comportă anumite operaţii.

=> Comunicarea între calculator şi dispozitivul periferic se realizează cu ajutorul unor programe speciale, numite driver-e. Acestea convertesc comenzile calculatorului către periferice (de exemplu, o comandă de tipărire pentru imprimantă) şi invers, transmit anumite informaţii de la periferic către calculator (de exemplu, imprimanta transmite calculatorului un mesaj prin care specifică faptul că nu mai are hârtie) .

=> Windows-ul este livrat Împreună cu o mulţime de driver-e, de toate tipurile. Atunci când este instalat, testează automat dispozitivele hard ataşate şi activează driver-ele de care are nevoie (de exemplu pentru tastatură, hard, etc.) .

=> Există cazuri când Windows-ul nu dispune de driver-ul necesar. pe exemplu, achiziţionăm o nouă placă de sunet, mai performantă. In astfel de cazuri dispozitivul respectiv este livrat cu un CD (sau DVD) care cantine driver-ul. Ce trebuie făcut? '

a) De la magazin am primit CD-ul ce conţine programele de instalare. În acest caz este suficient să-l folosim. Instalarea se va efectua automat pentru că CD-ul este înzestrat cu un program Setup care permite instalarea driver-ului.

b) Avem numai driver-ele pe CD. De exemplu, am instalat fizic o placă de sunet şi am pierdut kit-ul de instalare, dar l-am găsit la un prieten pe dischetă sau l-am găsit pe Internet. Accesez Start, Device and Printers şi apoi Add a device:


Add a device Add a printer

Windows-ul efectuează o căutare a dispozitivelor cuplate fizic (plug-and-play) la calculator şi semnalează dispozitivele pentru care nu dispune de driver-e. Avem astfel posibilitatea să instalăm noul driver, prin specificarea căii de acces la el.

1 . 1 6. Cum utilizăm anumite aplicaţii l ivrate

odată cu Windows-ul '?

Suport pentru caracterele româneşti

Cum tipărim caracterele româneşti (de exemplu, ş, Ş, ţ, Ţ, ă, Ă)? Evident, aceste caractere nu există în limba engleză. Windows-ul ţine cont de astfel de necesităţi. Pentru a putea beneficia de acest mecanism, trebuie să avem instalat suportul pentru tastatura românească. Instalarea se face într-un mod specific.

1. De unde ştim dacă tastatura românească este instalată? • Pe Taskbar, zona System Tray se vede imaginea alăturată (En) .

2. Ce setare efectuăm pentru ca să putem scrie cu caractere româneşti? Executarea unui clic cu butonul stâng conduce la apariţia unui meniu de selectare a limbii. Pentru caractere româneşti selectăm RO.

EN En g l ish (U n ited States)

ol RO Roman i a n (Rom an i a)

�how the Language bar

3. Cum tastăm ca să obţinem caractere româneşti? Tastatura clasică nu are taste care să conţină caracterele româneşti. Din acest motiv, pentru a obţine caracterele româneşti se apasă alte taste. Mai jos puteţi observa tastele care se apasă pentru obţinerea caracterelor:

ă [ î ] â \ ş t '

Ă { Î } Â I ş T " '

De exemplu, dacă se doreşte obţinerea caracterului ă, se apasă tasta [.


,/ Atenţie, nu toate font-urile pot afişa caractere româneşti! Exemple de font-uri care pot afişa caractere româneşti: Arial, Times New Roman, Courier New, T ahoma, Book Antiqua.

Exemple de font-uri care nu pot afişa caractere româneşti: Calisto MT, Lucida HandWriting.

,/ Pentru toate font-urile care conţin caractere româneşti, acestea se obţin la fel, fiecare la apăsarea unei anumite taste, aşa cum a fost arătat.

4. Dar dacă suportul pentru limba română nu este instalat, cum îl instalăm?

Se apasă Start, apoi se selectează Control Panel apoi comanda Change keyboard or other input methods din

Clock, Language, and Region Change keyboards or other input methods Change display lan g ua ge

grupul de comenzi Clock, Language and Region. Apoi din fila Keyboards and Languages se selectează Change keyboards.

În cutia de dialog care apare daţi clic pe butonul Add. Windows-ul afişează o listă, din care se va selecta Romanian:

...._ Text Services and Input L

.._ Add Input Language

Select the language to add sing the checkboxes below. Iţi·· Persian l±J Polish (Poland) $·· Portuguese (Brazil) $·· Portuguese (Portugal $· Punjabi (India) [ţl·· Quechua (Bolivia) l'ţl·· Quechua (Ecuador) $·· Quechua (Peru) El Romarnan (Romarna)

El· Keyboard ! !···�Romanian (Legacy) ! !····ICJRomanian (Programmers) � ! ! ·ICJRomanian (Standard) ! ! ···ICJUnited States·lnternational ! L.[Jshow More„ . B·· Other

L .. �orawing Pad [ţl·· Romansh (Switzerland)

III

LOK__] I Cancel J I Prev1ew„ . J


Character Map

Întrebările sunt următoarele: fiind dat un anumit font, care sunt caracterele care se pot afişa prin utilizarea lui şi cum trebuie procedat pentru a afişa un anumit caracter?

Pentru aceasta vom utiliza aplicaţia Character Map.

� Pentru a o utiliza: apăsăm Start, apoi selectăm: Start 7 Ali programs 7 Accessories 7 System Tools 7 Character Map. Apare cutia de dialog de mai jos:

1'• Character Map = @l�l li Eont : O Cardia New T I !jelp

71 $ % & . + o 2 3 4 ...

5 6 7 8 9 < > ? @ A B c D E F G H O I J K L M N o p Q R s T u V w x y z [ I l A a b c d e g h i k I m n o p Q r s u V w X y z } - c E a

':(. § .. © (( � ® ± ' J µ 11 » '!. 'I: li, (., A A Â Ă Ă A IE i;: E E E E

f) N 6 6 6 6 b X o y p r.. a â ll a a â <e <; e e e e Î o t'l o 6 o o o 0 (J u o o y p y I y z l I

Chg_racters to copy I :ielect 1 1 �opy I El Adl!_anced view I U+OOEE: latin Small letter I Wrth Orcumflex Keystroke: Alt-t-023&

În partea de sus există o listă prin care putem selecta font-ul care va fi afişat (în exemplu, Cordia New).

� Executarea unui dublu clic pe un caracter are ca efect introducerea sa în edit-ul Characters to copy, iar apăsarea butonului Select are ca efect memorarea caracterelor astfel introduse într-o memorie specială, numită Clipboard. Dacă într-un editor de texte utilizăm comanda Paste, atunci acele caractere sunt inserate în document.


Disk Defragmenter

Unitatea adresabilă pentru hard şi dischetă este sectorul. De obicei, un sector are 512 octeti. Hard-urile au o capacitate foarte mare de memorare. A ' Inseamnă că trebuie tinută evidenta unui număr foarte mare de sectoare. Din ' ' acest motiv, s-a introdus o nouă unitate de memorare, numită cluster. Fiecare cluster are capacitatea de 4 Kb sau 8 Kb. Fiecare fişier ocupă un număr de cluster-e. În timpul utilizării calculatorului, anumite fişiere sunt şterse, altele sunt adăugate. Din acest motiv, cluster-ele ocupate de un fişier nu sunt adiacente (unul după altu�.

Încercaţi să vă imaginaţi cum procedează Windows-ul pentru citirea unui fişier: citeşte un cluster, apoi pe următorul, etc. Deoarece acestea nu sunt adiacente se pierde timp la accesare, timp care afectează performanţa calculatorului dvs. Din acest motiv, este bine ca, din când în când, să apelaţi un program care reorganizează informaţia pe hard, astfel Încât cluster-ele ocupate de fiecare fişier să fie cât mai apropiate şi să influenţeze În bine performanţa calculatorului dvs. Acest program se numeşte Disk Defragmenter şi este livrat împreună cu Windows-ul.

Pentru apel utilizaţi: Start -7 Ali Programs -7 Accessories -7 System Tools -7 Disk Defragmenter. O listă vă va permite selectarea hard-ului (pot fi mai multe) care vreţi să fie defragmentat.

./ Defragmentarea este o operaţie consumatoare de timp. Din acest motiv o puteri efectua lăsând calculatorul să lucreze atunci când nu averi nevoie ' ' de el.

Disk Cleanup

Orice fişier poate fi şters în mod clasic. Totuşi, pentru anumite fişiere, această operaţie se poate efectua automat, prin utilizarea programului Disk Cleanup.

Pentru apel utilizaţi: Start -7 Ali Programs -7 Accessories -7 System T ools -7 Disk Cleanup. Programul afişează mai întâi o casetă de dialog din care puteţi selecta unitatea de disc, apoi apare o cutie de dialog care în se afişează, mai multe tipuri de fişiere care pot fi şterse automat. Fişierele temporare preluate de pe Internet (utilizate pentru accesarea rapidă a anumitor pagini), fişiere descărcate de pe Internet la cererea utilizatorului, fişiere şterse logic dar nu şi fizic (Recycle Bin) şi fişiere temporare create de anumite aplicaţii în uz:


1-;, Disk Cleanup for (C:)

Disk Oeanup �-------------------, � You can use Disk Oeanup to free up to 1 .28 G 8 of disk

space on (C:).

flles to delele:

� · Downloaded Program Rles 9 58 M 8 � @u T emporary Internet Rles

ICI @! Offline Webpages

ICI it Game Statistics Rles

ICI LJ Debug Dump Rles = "-

T oiai a mount of disk space you gain:

Description

32.7 MB � 1 .96 MB 1 1 .7 KB 188 MB ...

1 85 MB

Downloaded Program Rles are ActiveX controls and Java applets downloaded automatically from !he Internet when you view certain pages. They are temporarily stored in !he Downloaded Program Rles folder on your hard disk.

l$JOean up ID'51em flles Yiew Rles

How does Disk Oeanup work?

OK J [ Cancel

93

Utilizatorul va marca fişierele pe care doreşte sa le şteargă şi va apăsa butonul OK

Dacă acţionăm butonul Clean up system files

se va reqfişa aceeaşi fireastră cu o filă nouă, More options, care permite

apelul cutiei de dialogprin care putem dezjnstala anumite componente ale

Windows-ului sau anumite aplicaţii de care nu mai avem nevoie.

;� Disk Cleanup for (C:) Disk Oeanup More Options �--------�

Programs and Features

You can free more disk space by removing programs that you do not use.

Oean up ...

System Restore and Shadow Copies

You can free more disk space by removing al bui the most recent restore port.

ln some editions of Windows, the disk might nelude fde shadow copies and otder Windows Complete PC Backup images as part of restore points. This rlormation will also be deleted.

Oean up .. .

OK 1 1 Cancel I


Scheduled Tasks (programarea task-uri lor)

Cei care au proiectat Windows-ul au considerat că trebuie să pună la dispoziţia utilizatorilor posibilitatea ca unul sau mai multe programe să fie lansate automat În executare, la o anumită oră, dată, etc. Pentru aceasta, Windows-ul cantine o aplicatie numită Scheduled T asks. ' '

Lansaţi aplicaţia prin: Start -7 Ali Programs -7 Accessories -7 System Tools -7 Task Scheduler. Va apărea fereastra alăturată în care se execută clic asupra butonului Create Task din panoul Actions:

' G Task Scheduler ' l�I&�

File Action Vîew Help � + • l �I � � 1(3 T osk Scheduler (LocoQ J '1'" li!.., . „„„ . I!. "iilil"-�„ lll'"'I Actions

� � T osk Scheduler Libroty ...... � Task Scheduler (Local) ..., \ Overview of Task Scheduler S3 D Connect to Another Computer„.

I !J You can use Task Scheduler to create g � Create Basic Task ... and manage common taslcs that your ... Create Task ... computer will carry out automatically at the times you specîfy. To begin, click a Import Task.„ command in the Action menu. =

- � Display Ali Running T asks T ""�" ar• ctnr•rl În fnlrl•rc: in th• T ;odr { Task Status ·I � Enoble Ali T oslcs Hi>loty

AT Seivice Account Configuration

Status of tasks that hav„. I Last 24 hours TI � View � Summary. O total · O running, O succeeded, O stopp.„ lQ] Refresh

6 Help

Task Name Run Resuit I

�

Los! refreshed al B/13/2011 2:27:03 PM I Refresh I

Dorim ca programul xxx să fie lansat În executare la ora hh.mm. În fereastra ce se deschide completăm în pagina General numele task-ului şi eventual o descriere a lui, apoi în pagina Actions selectăm New pentru a căuta aplicaţia pe care dorim să o lansăm în execuţie la momentul respectiv (de ex., defrag.exe - Disk DefragmenteT) din directorul Windows/System32) .

În fila Triggers, acţionăm butonul New pentru a seta ora la care dorim să fie lansat în executare task-ul:


New Trigger

Begin the task: [�o_n_a_s_c_he_d_u_le ___________ �„] Settings

1 � One time Start 8/14/2011 0„ 9:36:39 PM � [J Synchronize across time zones

(C) Daily

O Weekly

O Monthly

Advanced settings

[J Delay task for up to (random delay): 11 hour „ I [] Repeat task every: �ll_h_o_u r ____ „�] for a duration of: �ll_d_ay ____ „�I

D 5 c - al! rur'l1ri� task� at end of ·epet1t1on durat1on

[] Stop task if it runs Ion ger than: 13 days rJ Expire: I 8/13/2012 1 1 2:36:39 PM �I � Enabled

D Synchron1ze across time zones

OK J I Cancel

95

./ Observaţi că putem selecta ca programul să fie rulat zilnic, săptămânal, lunar sau doar o singură dată.

1 . 1 7. Utilizarea imprimantei

Atunci când achiziţionăm o imprimantă, o instalăm utilizând CD-ul care conţine programul ei de instalare.

1. Pe un sistem se pot instala mai multe imprimante. Atunci când dorim să folosim o anumită imprimantă, ea trebuie cuplată la calculator. Dintre toate imprimantele care sunt instalate, una singură este implicită (Default) . Atunci când dintr-un program oarecare, dăm comanda de tipărire, fără altă operaţie de selectare a altei imprimante, se foloseşte imprimanta implicită. Desigur, dacă avem instalată o singură imprimantă, atunci ea este implicită.


În cazul în care avem instalate mai multe imprimante, pentru a seta imprimanta implicită, vom apela la meniul Start � Devices and Printers. În fereastra care apare se selectează imprimanta, se execută clic cu butonul drept al mouse-ului şi, în meniul flotant, se selectează Set as Default printer.

2. Atunci când dorim să tipărim un document, iniţial, în lista de selectare a imprimantei va fi selectată imprimanta implicită. Dar, putem selecta din listă o altă imprimantă:

rinter=======================-----:;l"-:=====I [iame:

Status: Type: Where: Comment:

Idle HP Laser Jet 1 1 00 LPTl :

EToperties

r Print to file

3. Atunci când tipărim, icon-ul imprimantei se găseşte în I[� 2:38 PM zona Tray. Dacă executăm un dublu clic asupra icon-ului se .... ______ __,

afişează o fereastră care prezintă date privitoare la procesul de tipărire. Putem selecta din meniu Document şi Cancel Printing (pentru a opri tipărirea) sau Pause Printing (pentru a opri temporar procesul de tipărire) .

Status Owner Pro ress Started At Printing Utzzu O of 30 pages 2 4148 PM 2117/04

1 . 1 8. Cum lucrăm în Windows fără mouse'?

În cazul în care nu detineţi un mouse sau s-a defectat, cursorul � se poate poziţiona şi cu ajutorul tastelor, dacă activăm aplicaţia � MouseKeys. Dacă această aplicaţie este activată, În zona Tray, se poate observa icon-ul alăturat. Activarea aplicaţiei se realizează În felul următor:

1. Din meniu, Start � Control Panel � Ease of Access şi apoi Change how your mouse works:

Ease of Access Center Let Windows sug gest settings Change how your mouse works

Optimize visu al display Replace sounds with visu al cues Change how your keyboard works


2. Bifaţi Turn on Mouse Keys, apăsaţi Set up Mouse Keys ş1 alegeţi viteza de deplasare şi accelerarea ei pentru cursorul grafic:

- Pointer speed

Top speed: Low � High

Acceler ation: Slow J Fast

Salvaţi modificările şi de acum puteţi lucra fără mouse!

Deplasarea cursorului. Apăsaţi tasta Num Lock (trebuie ca beculeţul corespunzător să fie aprins) . Cursorul se deplasează cu tastele numerice, aşa cum rezultă din imaginea alăturată .

./ Pentru a simula clic stânga utilizaţi tasta 5. După ce este selectat, un icon poate fi deplasat prin drag-and-drop. Operaţia poate fi simulată prin apăsarea tastei O .

./ Viteza de deplasare a cursorului creşte dacă ţinem apăsată tasta Ctrl.

pentru a simula clic dreapta, apăsaţi această tastă

pentru a apela direct meniul Start, apăsaţi această tastă

Nu uitaţi, tasta F1 deschide fereastra Help, în orice program .

./ Combinatia Alt+ F4 închide fereastra curentă. '

./ Combinaţia Alt+Esc activează fereastra următoare de pe taskbar .

./ Combinaţia Alt+ T ah comută între diferitele task-uri. Va apărea un

meniu care arată diversele task-uri între care se face comutarea.

CAPITOLUL 2

Procesorul de texte MS Word

2 . 1 . Generalităti '

Word este un program al pachetului Microsoft Office şi este specializat în introducerea textelor şi a obiectelor grafice. Cu ajutorul său, textele şi imaginile pot fi prelucrate astfel Încât să "arate bine".

Word poate lucra cu mai multe ferestre de introducere a datelor. Astfel, putem deschide mai multe ferestre simultan şi în fiecare să vizualizăm un anumit fişier. În linii mari, textele se introduc ca în WordPad, iar modul în care acestea sunt aranjate este prezentat în continuare.

Înainte de a prezenta operaţiile de bază ce se pot realiza În Word vom încerca o acomodare cu interfaţa specifică Office 2007. Spre deosebire de alte aplicaţii sau de variantele mai vechi ale pachetului Office, la deschiderea unei aplicaţii Office 2007 veţi remarca lipsa meniului şi înlocuirea acestuia cu Ribonul. Ribonul este compus din mai multe file (T ah-uri) În care sunt grupate operaţiile specifice aplicaţiei (Group-uri) , după funcţionalitatea lor.

(ci;;\ Q „ . ·� Home lnstrt

Tabs

/ Page Layout Rdtrtncts

Aria I B I

Font

Maillngs

4 I 3 • l Z • I I I •

Groups

capl.1.doc {Compat1bifrty Mode] - MKrosoft Word

aBbCcDc AaBb1 AaBbcc AaBbC tl Huding l tl Huding 2 li Heading 3

Stylu

În colţul stânga sus a aplicaţiei se găseşte butonul Office care înlocuieşte meniul File al versiunilor mai vechi de Office:

Butonul Office

Capitolul 2 - Procesorul de texte MS Word 99

În dreapta butonului Office se găseşte bara de comenzi rapide În care sunt afişate câteva comenzi utilizate foarte des. Această bară de acces rapid poate fi particularizată, adăugând alte comenzi sau eliminând unele dintre cele existente:

Bara de acces rapid

�� Home Insert Page Layc

=> Fişierele Word se numesc documente şi au, de regulă, extensia „.doc" sau „.docx" (specifică Word-ului 2007).

Crearea unui document nou

=> Un document nou poate fi creat apăsând butonul Office ş1 New, se alege Blank document şi se execută clic pe butonul Create.

Blank document

./ Rapid, un document nou se poate crea prin apăsarea combinaţiei de taste Ctrl şi N .

./ Un document nou se poate crea şi fără a se apela la programul Word. Cu My Computer sau Explorer se vizualizează conţinutul folder-ului care urmează să reţină documentul. Prin clic cu butonul drept al mouseului se apelează meniul contextual, se selectează New şi Microsoft Office Word Document şi se introduce apoi numele noului document.

Deschiderea unui document

Deschiderea unui document se poate face, fie din meniul butonului Office şi apoi Open, fie executând clic pe icon-ul fişierului (din My Computer sau Explorer) . În acest caz, întrucât Windows-ul are setată asocierea între fişiere cu extensia „.doc" şi programul Microsoft Word, se apelează programul şi acesta deschide fişierul.


./ La un moment dat pot fi deschise mai multe documente. Fiecare dintre ele este afişat într-o fereastră a Word-ului. Fereastra minimizată a fiecărui document deschis se găseşte pe taskbar. Selectarea ferestrei unui anumit document se poate face executând clic pe fereastra minimizată.

Salvarea unui document

=> Pe măsură ce scriem un document, acesta trebuie salvat. Salvarea unui document se face cu ajutorul meniului butonului Office şi Save sau CTRL+S, sau se apasă butonul din bara de acces rapid:

Save Home Insert

=> Un document poate fi salvat sub un nume diferit şi, eventual, în alt folder, unitate hard, floppy: butonul Office şi apoi opţiunea Save As. Va apărea o cutie de dialog în care:

• selectaţi folder-ul care va cantine fişierul:

I Save Ln: lL:J Ti2004

• scrieţi noul nume al fişierului:

File n.ame: jbllli!I f .....--��......,...� Save as type: Jword Document (*.doc) l"'

=> Un document poate fi creat Într-un fişier de un anumit tip. Practic, un document se reţine într-un fişier prin respectarea unor reguli, care ţin de tipul fişierului. Există mai multe tipuri de fişiere şi fiecare dintre ele are o extensie specifică.

Pentru a salva sub un tip anume, selecţia se face din lista Save as type:

I Word 97-2003 Document (* .doc)

Word Document ("' .docx) Word Macro-Enabled Document (*. docm)

IJU • I • • Word Template (*.dotx) Word Macro-Enabled Template (*.dotm) Word 97-2003 Te molate (*. dot) V

Capitolul 2 - Procesorul de texte MS Word 1 01

Vom da câteva exemple de extensii:

• Web page („.htm", „.html" sunt extensiile) - acestea sunt fişiere editate în HTML, limbaj prin care se descriu paginile web (vezi, Capitolu�.

• Rich Text Format - un format compatibil ("înţeles") şi de alte editoare de text şi imagini. Se salvează sub acest format dacă se doreşte ca, ulterior, prelucrarea acestor fişiere să se execute cu acele editoare.

• Text Only - salvarea doar a textului conţinut de document.

• Word 97-2003 - document care poate fi ulterior prelucrat cu o versiune mai veche a programului Microsoft Word. De regulă, orice nouă versiune poate deschide un document creat cu o versiune mai veche, dar invers, este necesar să se salveze într-un format corespunzător .

•

Selectarea textului

=> Puteţi selecta o parte din document procedând astfel:

1. Executaţi clic în locul de unde doriţi să Înceapă textul selectat ş1 "trageţi" cu mouse-ul, ţinând butonul stâng apăsat.

2. Executati clic în locul de unde doriţi să Înceapă textul selectat ş1 Încadraţi porţiunea selectată cu ajutorul tastelor săgeţi, ţinând apăsată tasta SHIFT.

=> Puteţi selecta întregul document apăsând combinaţia de tasta CTRL+ A.

Memoria clipboard. Operaţiile copy, cut şi paste

Windows-ul pune la dispoziţia utilizatorilor o memorie specială, numită clipboard, care permite memorarea datelor în vederea transferului lor de la o aplicaţie la alta - în cazul nostru, de la un document la altul.

Pentru a copia în clipboard porţiunea selectată se apasă I __ Copy

butonul Copy din grupul Clipbord al filei Home sau, .__-___ __,

rapid, folosind combinaţia de taste CTRL+C. Dacă datele sunt copiate în clipboard, înseamnă că ele rămân şi În documentul iniţial.


Pentru a muta în clipboard porţiunea selectată se apelează I " la opţiunea Cut, clin grupul Clipboard al filei Home sau,

Cut rapid, CTRL+ X. Dacă datele sunt mutate în clipboard, înseamnă că ele nu rămân şi în documentul iniţial.

Pentru a insera datele aflate în clipboard într-un document, se � execută clic în locul unde urmează să inserăm datele şi clin grupul Clipbord al filei Home selectăm butonul Paste sau, Paste

rapid, CTRL+V.

./ De aici rezultă posibilitatea transferului datelor între mai multe documente Word. Veţi avea deschise simultan documentele şi, prin Copy, Cut, Paste transferaţi datele între ele.

Ştergerea textului

=> Datele selectate pot fi şterse prin apăsarea tastei Delete.

Anularea comenzii anterioare (Undo)

Puteţi anula ultima operaţie efectuată asupra unui document fie apăsaţi butonul alăturat clin bara de acces rapid, fie folosind combinatia de taste CTRL+Z. '

Subscript �i superscript

=> În Word se pot scrie texte subscript. Exemplu: X,. Aici indicele 1 este scris subscript. Pentru aceasta se utilizează combinatia CTRL+'=', iar pentru a scrie, clin nou, normal se apasă aceeaşi combinaţie de taste.

=> Bineînţeles, se pot scrie texte şi superscnpt. Exemplu: X2• Aici puterea 2 este scrisă superscript. Pentru a scrie superscript se utilizează combinaţia CTRL+SHIFT+'=', iar pentru a scrie, clin nou, normal se apasă aceeaşi combinaţie de taste.

Dimensiunea de vizualizare a paginii (Zoom)

=> Word-ul poate vizualiza un document la mărimea reală (aşa cum arată tipărit), mărit sau micşorat. Utilizaţi bara glisantă de mai jos:

I 100% G--=-CD---=�@ I


Autodocumentarea I Ajutorul (Help)

De câte ori nu ştim Clllll se efectuează o anumită operaţie, putem � apela la Help apăsând butonul alăturat sau, rapid, prin F1. Va � apărea o casetă de dialog ca cea din imaginea de pe pagina următoare. În căsuţa de text aflată în partea de sus se introduce cuvântul (sau cuvintele) după care trebuie să se efectueze căutarea În baza de date şi se apasă Search. Se va afişa o listă de legături către diversele documente care contin informatii ce includ cuvintele cheie introduse. Apoi se execută clic ' ' pe legăturile către informaţiile dorite.

� Word Help

• + (il � � l@i N • � • P Search • I Word

Help and How to

Browse Word Help �� ·� �� Wha�s new Activating Word

Getting help Creating specific documents

Închiderea unui document

=> După ce am terminat lucrul cu un anumit document se salvează şi se închide fereastra asociată lui (sau din butonul Office, comanda Close). În cazul În care am uitat să salvăm, suntem întrebati dacă dorim să ' efectuăm această operaţie.

=> Atunci când se creează un nou doclllllent, apelând la opţiunea New din meniul butonului Office se pune problema următoare: unde este localizat, implicit, acel document? Selectaţi butonul Word Options din meniul butonului Office, fila Save, File Locations şi în caseta Default File Location introduceri calea dorită. '

Alegerea unităţ.ii de măsură

Pentru a stabili unitatea de măsură a lungimii 1 1 C . v 1 1 e nt1 m ete rs

pentru diversele setări care se fac în Word, inclusiv pentru riglele orizontală şi verticală, selectaţi butonul Word Options din meniul butonului Office, fila Advanced, şi în lista alăturată din grupul de opţiuni Display selectaţi unitatea de măsură dorită.


Găsirea !_?i/sau înlocuirea unor !_?Îruri de caractere

=> Puteri identifica în text anumite şiruri de caractere şi, eventual, le puteţi înlocui cu altele. Apelaţi la butoanele Find şi Replace, din grupul Editing al filei Home:

� Find ...

eac Rep lace

Se lect ...

Editing

Dacă doriţi ca, la căutare, să se facă distincţie Între literele mari şi cele mici apăsaţi mai întâi butonul More al casetei de dialog Find/Replace şi bifaţi Match case, iar dacă doriţi să găsească şirurile doar dacă sunt izolate (nu incluse într-un cuvânt) bifaţi Find whole words only:

IL:.· .. ·�.<��-�s.: ... 11 Search Options

Search;_ �I A_

ll __ _ 0 Matcb.case

O Find whole words onl1::

O l,.[se wildcards

O Sounds li!\e (English)

O Find all !!'lord forms (English)

Find

FQrmat ... ) I Sp�cial „ No Formatting

D Matcn case D Find whole words onl'.i.

Find 1n ...- Find Next

O Match prefil[

O Match suffix

Cancel

O Ignore punctuation character�

O Ignore white-spg_ce char acters

V


2 . 2 . Formatarea paginii

O pagină Word, este alcătuită din:

1. Antet - (opţional) acesta conţine anumite texte care apar pe fiecare pagină a docUlllentului, cum ar fi: numărul capitolului, autorul, numele firmei, etc.

2. Subsol - poate conţine anumite informaţii, cum ar fi: numărul paginii sau anlllllÎte comentarii. Informaţiile din subsolul unei pagini apar în toate paginile docUlllen tului.

3. Zona care conţine textul propriu-zis şi imaginile.

4. Marginile laterale separă toate aceste zone de marginea hârtiei .

./ Eventual, o pagină poate conţine o notă de subsol, în care se lămuresc anumiţi termeni care au fost utilizaţi în textul propriu-zis.

Alegerea formatului

=> Pentru a formata o pagină folosiţi grupul de comenzi Page Setup din fila Page Layout. Pentru setări mai avansate daţi clic pe săgeata din colţul dreapta-jos a acestui grup de comenzi şi vi se va deschide fereastra Page Setup:

I� i= •r;:i Breaks "

r � Lin e Numbers ... Margins Orientation S ize Co lumns b�- Hyphenatio n •

Page Setup

• De obicei se foloseşte formatul A4 - iată care sunt dimensiunile acestui format:

Pape[ size: IA4 210x297 mm vi lfiidth: 121 cm � I H�ight: 129. 7 cm �I


Dimensionarea margini lor

• Setarea marginilor se face în pagina Margins, aşa Clllll se poate vedea în imaginea de mai jos:

Margins Iop : ls cm �1 �ottom : 14,7 cm �1 !,.eft: 14 cm �1 8,_ight: 14 cm �1 �utter: Io cm �1 G\!_tter position: I Left vi

Parametrii sunt:

Top - distanţa de la marginea de sus a foii până în zona în care se afişează datele (include antetul);

Bottom - distanţa de la marginea de jos a foii până la zona în care se găseşte textul (include subsolul);

Left - distanţa de la marginea din stânga a foii până la zona În care se găseşte textul;

Right - distanţa de la marginea din dreapta a foii până la zona În care se găseşte textul.

În Page Setup, Margins, mai întâlniţi edit-ul Gutter. Acesta este folosit pentru a seta o anlllllită parte din lăţimea paginii care este folosită pentru prinderea ei în dosar. Testaţi!

Antetul (header-ul) şi subsolul (footer-ul)

• În pagina Layout a ferestrei Page Setup se pot seta următorii doi parametri:

Header - distanţa de la marginea de sus a foii la antet;

Footer - distanţa de la marginea de jos a foii la subsol.


În figura următoare este prezentată structura unui docutnent Word:

Top

Lef t

Bot torn

Antet

t. calâltM lll>�-2.. calâlt � �QOl;ia. �ni � llngi't liQMni.J i;PQ:t�, IJAIJ Jill.I

n1111mutiit ct11it� fn c11N;i;Q � ::c:f1i1; 1rl N c:a11 ot:i�1 1nt1iJJ . i1 c:lldN e:QOlJlll W: � lnowund ot:iGttgrd:::

OO!itbJ �lldht tl'mJIQ ::I .xfl•nl mill*"1. c.it.Jt.l'ld blb:lrul SPQ:l'!: h �lk! �nt :

Dil.i!it apikh b.lbniJ d:l:l"'"11! o lsoit a1/'Q �llR :o'i!Gtbvlill n'1I oolb' ---" �p.Jf dointlibtQ:

rnrru:lt rt:I unu dh� ntOO'il'ilQ �u. rat� 1t1 • I I c:m:opuidQ mo.iGu)JI dat, i:'illitt.h � c:liil "'" 11 - I c:cf}J[ d� ICli. MQ::ofl AQ �llQ � ��

, I, numiW dii 11n1 $1 dii: c:dMQ dii 1H.ljo;j,

" ' � 2. 6il Sti SCIQ bntiJa:

.ţ!(.r) ... c�). """"-'K• �. « •I :ld(J:) 1

P'1llJ\J �i'IQf'Ql �·'il � h1. ctl1itbJ :opr;rclt: dQ •P l'rllc•Q.

P11tw S(� dl�t PJ� "Jnt io::o� tl) s:a1 1m1;:1;: c:int � �. rn �ntiJ C:&:z SQ tao�l Ctr.L.·�tt• ' • ' , rn " ddlro:il CUJ..• '• "ln llnlbi:IQ C:GIJll, rQIQll!'Ql rn M)dlJ OC4'11l dQ llC:N liQ kCQ �n ac"11;1 C:OttHndQ dii !Uiil.

Header

Right

•--- Footer

Subsol Număr pagini

2.3. Cum scriem în antet şi în subsol?

1 07

::::> Pentru a scne În antet sau în subsol se apelează la grupul Header & Footer din fila Insert. Alegeţi una dintre opţiunile Header sau Footer şi apoi tipul de antet sau subsol dorit. Automat pagina va fi afişată într-un mod special, în care antetul şi subsolul sunt Încadrate de un chenar.


./ Mai jos puteţi observa cum se vizualizează antetul ş1 subsolul după comanda dată:

q[Type text]) l

Header-Sectoo

I-r------------------------------------------------------

antet (header)

( Foote• -Sectoo 1-J -------------------------------------------------------

subsol (footer)

./ Textele care se scriu în antet sau subsol apar pe toate paginile documentului. Ele pot conţine date referitoare la autor, data scrierii documentului, numele documentului (capitolului) etc .

./ Numărul paginii este inclus în subsol, dar numerotarea paginilor se va face utilizând altă comandă .

./ Concomitent, se afişează În Ribon o nouă filă, numită Header & Footer Tools, pe care vă invit să-l studiaţi. Fiecare buton este înzestrat cu sugestie, aşa că sarcina dvs. este foarte simplă.

2 .4. Nota de subsol 1

Nota de subsol se scrie în partea de jos a pagmn, m zona textului şi imaginilor şi nu în subsolul paginii. Se utilizează în situatia în care doriţi să explicaţi un anumit termen, fără a întrerupe cursivitatea textului. Practic, după ce ati scris în text termenul, apelati mecanismul de inserare a notei de subsol. ' ' Termenul va primi un număr, iar în partea de jos a paginii va :fi trecut automat. Dvs. urmează să scrieţi explicaţia pentru termenul respectiv.

=> Pentru a insera o notă de subsol apelaţi comanda Insert Footnote al grupului de comenzi Footnotes din fila References. Puteţi de asemenea da clic pe săgeata din colţul dreapta jos al acestui grup, moment în care

1 Aceasta este o notă de subsol.


se va deschide fereastra din figura de mai jos, în care puteţi face setări avansate în legătură cu notele de subsol:

Location

0[�?.?.ţ·��frS.J I Bottom of page v I Q !;_ndnotes:

i::;_onvert„ .

Format

�umber format: 11, 2, 3, vi C\,[stom mark: c::::::::J Sy_mbol„ . l 2,tart at: � Numbering: I Continuous vi

Apply changes

A�ly changes to: I Whole document vi !nsert ,] [ Cane el Apply

Exercitiu: ce este şi cum se creează nota de sfârşit de document?

2.5. Numerotarea paginilor

Apelaţi la opţiunea Page N umber a grupului de comenzi Header&Footer din fila Insert. Puteţi alege una dintre opţiunile predefinite în meniul derulant asociat acestei opţiuni sau puteţi selecta Format Page Number pentru a stabili numărul primei pagini din document, formatul în care se face numerotarea (cifre romane, arabe, etc.) .

2 .6. Font-uri

Font-urile au fost prezentate în această carte. Atunci când scnem În document, stabilim următoarele:

Numele font-ului - stabileşte setul de caractere care vor fi afişate, de exemplu: Arial. Mărimea - mărimea caracterului (în figură, 10) .

1 1 0 Tehnologia Informaţiei şi a Comunicaţiilor

Stil - Bold, Italic, Normal, subliniat sau oricare combinatie dintre acestea. '

Aria l • 10 • I K A· /� l B I l! • alMl x, x' Aa·J[·� • .a, ·I

Font

Formatarea caracterelor se face cu uneltele aflate în grupul de comenzi Font din fila Home.

=> Dacă doriţi să utilizaţi şi alte efecte de formatare, daţi clic pe săgeata din colţul dreapta-jos al acestui grup de comenzi.

A) Pagina Font - pe lângă setările anterioare se pot ob�e şi alte efecte. Pentru a le studia, scrieţi un text, selectaţi-l, apelaţi cutia şi bifaţi, pe rând, diversele opţiuni. Cutia va afişa în partea de jos textul cu efectul bifat:

Font �olor: !,!nderline style: I ' I ·c J __ Automatic=::::J j (none) =8 1 -=

Effects r Stri!iethrough r ShadOl:Y r Sm.all caps r Double strikethrough r Q.utline a!I caps r Su�erscript r [mboss r t::!idden r Sub.script r Engrave

Preview

Mama merge la plimbarel

, .

10 =-

B) Pagina Character Spacing - Textul selectat poate :fi mărit sau micşorat (Scale), poate ocupa mai mult sau mai pu� spaţiu pe lă�e prin reducerea spaţiului dintre caractere (Spacing) sau poate fi scris mai sus sau mai jos (Position, cu Raised sau Lowered):

Fon.t Chatacter Spacing J T e�t Effects

S�ale: ]100% El âţlacing: �densed El �: Jo.4 pt :E E_osition: jNormal El B:t.: :E

Capitolul 2 - Procesorul de texte MS Word 1 1 1

2 . 7. Paragrafe

Un document Word poate conţine mai multe paragrafe. Numim paragraf un şir de caractere terminat cu Enter. Paragrafele sunt caracterizate prin mai multe proprietăţi.

Alinierea

Există mai multe moduri prin care poate :fi aliniat un paragraf, care pot :fi selectate prin butoanele care se văd, aflate în :fila Home:

� i.::.:J

Aliniat la stânga-Lefi

Centrat - Center

Aliniat la dreapta-Right

Aliniat la stânga ş1 dreapta - Justify

Acesta este un paragraf pe care îl aliniem în toate modurile posibile.

Acesta este un paragrat pe care îl aliniem în

toate modurile posibile.

Acesta este un paragraf pe care îl al iniem în

toate modurile posibile.

Acesta este un paragraf pe care îl aliniem în toate modurile posibile .

./ Există posibilitatea să schimbăm alinierea, chiar după ce-am sens paragraful. Se plasează cursorul în interiorul său şi apăsăm butonul convenabil.

Indentarea

Identarea semnifică stabilirea distantelor fată de margini. Se pot efectua ' ' ' cu rigla din figura următoare, prezentă în fereastra Word. Intreaga suprafaţă pe care se poate scrie este marcată pe riglă cu alb. Distanţele faţă de marginile paragrafului pot fi stabilite cu ajutorul a trei mici săgeţi, care se pot deplasa În riglă cu ajutorul mouse-ului (se ţine butonul stâng apăsat şi se "trage").


• 2 • 1 • 3 • 1 • 4 • 1 • 5 • 1 • 6 • 1 • 7 • 1 • 8 • 1 • 9 • 1 • 10 • 1 • 11 • 6 • 12 • I •

Poziţia de început a liniilor cu excepţia primei linii a paragrafului.

Poziţia de început a primei linii a paragrafului

Poziţia de sfârşit a oricărei linii

a paragrafului

Atenţie! Dacă nu este afişată rigla în fereastra Word, puteţi face ca aceasta să fie afişată bifând check box-ul Ruler din fila View. Q Ruler

Identarea (ca şi alinierea) se poate seta dând clic pe să&eata din dreapta-jos a grupului de comenzi Paragraph din fila Home. In pagina ldents and Spacing a casetei de dialog care se deschide, putem preciza spaţiul lăsat în stânga şi în dreapta de toate liniile paragrafului:

!:_eft: 11 cm :fil BJght: 11 cm _:B)

t.1.9 r.c... ' Prt Bot r.n.c. �� - � - � �Jt.&a:rn. • 1nic-c dc11&1tu m_.a: [ltvtdcn rr. li:ucuu N.I U'llC rt l[1nm.a: , h [lll:•

"''

ruir.dr.il1:e11h, III 1:1 1rcrmb:t1t „ T VA l i. C U'll: â: 'ii ti frec� cu I Dl ut- , 1Qm1d. • 11. m.1: 111 , U' IU:c I L •LUCtUU dtQI CI', lllU.ru. ouz:n• llwc•ut „ tdlUI . � �. Sit.li lu PJr „ .,

./ Se poate stabili distanţa de început a primei linii faţă de verticală dată de alinierea Left:

âPecial: B�: J First line ::.::J I ... 1-. 3-c-m--:H-„ .... PfP lWl rLfat'11 1 '1n: m d �i1 IWI F'lr&D'lcih � IWI Fl.rl[n.[J "1:•111:.l.ll F"ln(r&[ ...

..ii. �1F'-tl ;, .,, 'lr"l 11:11.S rtl� Ctzt.arn 11: INCU' dtr111uc NUa: cnwdtn rr.mwmu N1 U.: Rl['u1u1:,

hc-11: m�rcnlc, III fi 1raub:crt L TVA IL nn:1: dt .... ti l'l'f:c[lrid cu I [11 l[(lo, ld1nd. • IL a&W'I, 11 IU::c l1. 11:�[11rn cln;llr1, III.bun. C'IZ"' llNN:1111: 1. cdlCU'I

u � lci ri[ U r(Vl.[I lu r � k.llrt 11c,.

PUI rcF'ln.f"t.r Ir:" rc�,t, r � !> 1,1111r � !> re -D'{-1'1 �

Tot aşa, se poate stabili distanţa de Început a liniilor, cu exceptia primei linii, fată de verticală dată de alinierea Left. '

âPecial: B:i,; JHanging EJ j.-1-.2-7-cm--i}....,.

· � "" Pi-t „, ..... �. Pw ...... �� Pr.:„, ...... � pw�, ..... � """' �.I Dl:2Za.a:n:L • IN[ll'C !kr.ARCC N„IE CJftWdi:n l'n ... CNU l'lU ..CR�c-, ll(IS• NCa:dr.1"<"1lc, IV "' 1rand.m:cR L TYA IL CLl"IZ di: ... � l'N:c[<&r.t cu I Dl �. Lco11cu& • IL --. V dt.m:c IL •r.rll[llRL rln:il.,,,., •1t.1RL �"' !lrcrc.1� L .„�

Plllllr.o. � ,, Pt.jl""-'"L>'IAL Pt.llu.r<�·Pt.llu. _ � llUI c......,._,,o.c.I". Pt.11- f"'tJ PI.I" ""'-


Marcarea sau numerotarea paragrafelor

Se apelează la butoanele din figura alăturată, aflate I E: ... �= ... \-:• l în grupul de comenzi Paragraph din fila Home. Din meniurile derulante ale acestor butoane alegem tipul de marcare sau numerotare dorită:

Bullet lîbrary

B C!J � 0 � [±J [8 0

Document Bullets

0 [9] � [] � 0 B 0

_ _,.. ange L 1t Le el

Q.efine New Bullet.„

Numbering library •

None 3 8 ci �--B B B b b-- b--88

Document Number formats

�:�== s (c) --

---- . _ 1. e L e er

Qefine Ntw Number Format...

Exemple: Define New Number Format CZJ�

O Un paragraf marcat;

� Un paragraf marcat;

(a) Un paragraf numerotat;

Dacă alegeţi opţiunea Define New Bullet sau respectiv Define New Number Format, puteţi

selecta caracterul care reprezintă buleta (Bullet) şi font-ul căruia îi aparţine caracterul (Font):

Number format �umber style: 11. 2, 3, Number fQ.rmat:

1�-Alignm,ent: lleft

Preview

1 .

2 .

3 .

u

.... 1 I Eont.„

I vi

oii ····· :1 I Cane el I


După scrierea paragrafului marcat (sau numerotat), adică după ce am tastat Enter, următorul paragraf este automat marcat la fel (sau numerotat cu valoarea următoare) .

După stabilirea unui tip de marcare, (numerotare) se poate � • - •

marca (numerota) sau se poate renunţa la marcare � � = : = (numerotare) prin utilizarea aceloraşi butoane din grupul Paragraph.

Stabilirea spaţiului care trebuie lăsat automat înainte şi după scrierea unui paragraf

Daţi clic pe săgeata din colţul dreapta-jos a grupului de comenzi Paragraph şi în prima pagina a casetei de dialog selectaţi spaţierea în listele Before şi After .

!;!efore:

Aft�:

1� ffl J12 pt ftll

./ Dacă am selectat că, înainte de scrierea unui paragraf, trebuie lăsat spaţiu, atunci, dacă paragraful este primul pe pagină, acest spaţiu este lăsat.

./ În cazul în care sunt selectate două valori, atunci între paragrafele de pe aceeaşi pagină se lasă spaţiul corespunzător sumei dintre cele două valori .

./ Uzual, înainte nu se lasă spaţiu, dar se poate fixa spaţiul care se lasă după scrierea paragrafului.

Spaţierea lini i lor

Un paragraf este format dintr-una sau mai multe linii. Acestea pot fi scrise una sub alta sau lăsând spatiu Între ele. În aceeaşi casetă de dialog Paragraph, utilizaţi lista din figura alăturată. Opţiunile sunt:

Single - între linii nu există spaţiu;

Lio_e spacing: lsingle , .... • 1 .5 lines

Double 1, At least

Exactly Multiple

B_t :

I

� ... 1.1:1111:111.•

„

1.5 lines - Între două linii se lasă jumătate din spaţiul necesar unei linii;

Double - între două linii se lasă spaţiul ocupat de o linie;

�

At least - pentru această opţiune se completează şi obiectul de editare alăturat. Valoarea introdusă are semnificatia de spatiu minim Între linii; ' '

Exactly - între linii este lăsată valoarea introdusă În obiectul de editare;

Multiple - Între linii se lasă spaţiu egal cu cel ocupat de mai multe linii, valoare care se trece în obiectul de editare alăturat.


Paginarea

În pagina Line and Page Breaks a casetei de dialog Paragraph pe care ati utilizat-o mai sus, veti întâlni mai multe butoane de marcare: ' '

Pagination

� l�â.�.?.0.i.?.i.P.h.�.�.·.·�.?.�fr?.i.1 D Keep with ne1S_t

D Keep lines together

D Page !2.reak before

Window Orphan/ Control - selectarea acestei opţiuni are ca efect faptul că nu este permis ca o linie a unui paragraf alcătuit din mai multe linii să fie singură pe o pagină.

Keep lines together - paragraful este pe o singură pagină.

Keep with next - paragraful curent împreună cu paragraful următor sunt pe aceeaşi pagină.

Page break before - paragraful curent începe la o pagină nouă. Este prioritară faţă de opţiunea anterioară.

Încadrarea paragrafelor în chenare

Există posibilitatea ca par��afele să �e încadrate Îi:tr-�n I FH ... ] , chenar care poate fi de o anurmta culoare ş1 cu un anurmt sul. · · · · · · ·

Selectaţi paragraful (paragrafele) pe care doriţi să-l formataţi prin utilizarea acestei opţiuni. Selectaţi apoi opţiunea Border and Shading din meniul derulant asociat butonului alăturat din grupul de comenzi Paragraph. Va apărea cutia de dialog de mai jos. Selectaţi pagina Borders.

Aveti următoarele elemente: '

Grupul Settings - ne permite să selectăm tipul de chenar (None - fără, Box - cutie, Shadow - umbră, 3-D sau Custom - personalizat) .


Grupul Style - ne permite să alegem tipul de linie care va alcătui chenarul.

Grupul Preview - ne permite sa selectăm locul unde se aplică linia care alcătuieşte chenarul.

Lista Color - ne permite să selectăm culoarea chenarului;

Lista Width - ne permite să selectăm grosimea liniei.

[i Ba�

� Shg_dow

[iJ 3-Q

� C�stom

[ tiorizontal Line„ .

----- 1 �1 _I --------------------

- - - - - - - - - - - - ·

- - - - - - - - - - - - · VI !:;alor :

Automatic

�dth:

'hpt

Prevlew

App[y to:

Click an diagram below or use buttons to apply borders

IParagraph

Qptions„ . J ...._�O�K�.,.ll [ Cancel

./ Cu ajutorul paguru Shading se poate stabili culoarea pe care o are paragraful (nu literele) . În aceeaşi pagină, prin utilizarea listei Style se poate determina ca în corpul paragrafului să existe puncte într-o anumită proporţie, selectată de utilizator .

./ Cu ajutorul acestei cutii se poate stabili un chenar şi pentru o pagmă a documentului (sau toate) . Vedeţi fila Page Border.

Exerciţiu: scrieţi un paragraf şi încadraţi-l ca cel din figura de mai jos:

- - - - - -1 Se real1zeaz:!i prin completarea fişei speclale. în cazul în care e)(pozantu l nu va expedia c:!itre Secretariatul Targului textul de prezerirare, organizatoru vor include tn cat<!llogul p21rticipnnţilor numai denumirea şi coordonatele expozantului. precizate tn contract Date le limlt! pentru primirea prezent�rilor sunt, pentru fiecare dintre targuri. urm�toarele: 24 februarie (Craiova). 24

I ��g'!!�iz!�1r�/ n� r�=��) d!1 e��nt�:1�11': n�c��ca��

uanţ�

u��

realitate şi 1nformatllle i:t"ezentate în catalog, cauzate de , �a gr � sau �şe1 d�tre e� _,


2 .8. Tab-uri

Uneori este necesar ca anumite numere sau şiruri de caractere să fie scrise în poziţie fixă, pe orizontală. Pentru aceasta se utilizează tab-urile. Ele marchează poziţiile fixe şi sunt vizibile pe rigla orizontală. Setarea tab-urilor se face fie cu ajutorul riglei orizontale, fie selectând opţiunea Tabs a casetei de dialog Paragraph, folosită anterior. Pentru a ajunge la următorul tab se apasă tasta Tab.

Există mai multe tipuri de tab-uri:

tab-uri care se găsesc în partea stângă a datelor introduse;

tab-uri care se găsesc în partea dreaptă a datelor introduse;

tab-uri care se găsesc în centrul datelor introduse;

tab-uri care marchează pozitia punctului zecimal;

tab-uri care determină apariţia în text a unei bare verticale.

În continuare, puteţi observa modul În care apar pe riglă aceste tab-uri şi efectele pe care le au.

. L ' I ' 2 ' I ' 3 ' I ' 4 . I ' � ' I ' b ' I ' 7 . '.1: 8 ' I ' 9 . I ' 10 ' .J: ' 11 ' I ' 12 ' I ' q '

sir1 alinat s

sir2 aliniat d

şir3 aliniat c

22.36 -234. 123

Setarea tab-urilor se poate face din meniu, Format şi Tabs. Grupul Alignment permite, prin intermediul unor butoane radio, selectarea tipului de tab dorit. Poziţia tab-ului fată de marginea stângă a paginii se scrie în edit-ul T ah stop position:

1 1 8

2 cm

Alignment

@ �eft O �ecimal

Leader

@ !. None O i _


O �enter O �ar

o � „ „ „ .

Tab stops to be cleared:

Q e,;ght

O â -------

:î_et J I Cl!l_ar J I Clear 811

OK 1J I Cancel

Grupul Leader ne permite să selectăm un tip de linie care să unească tab-ul cu cel anterior. În imaginea de mai jos al doilea tab este setat la Leader cu butonul radio marcat cu 2:

l' I ' 2 ' I • 3 ' I ' 4 ' I ' 5 ' I • _§

capitolul 1 _ . _ _ _ _ . . . . . _ . _ _ . _ . 3 capitolul 2 _ . _ _ _ _ . . _ . . _ . _ _ . 56

Tab-urile se pot seta fără a apela la opţiunile din ribon, prin clic pe riglă. Alegerea tipului de tab se face executând clic aşa cum este arătat mai jos:

De asemenea, tab-urile se pot muta pe riglă prin tragere (drag-and-drop) .

./ Chiar dacă rigla nu conţine nici un tab, dacă se apasă tasta T ah, cursorul sare o anumită distanţă. Distanţa poate fi setată din caseta de dialog Tabs scriind valoarea În edit-ul Default tab stops.


2 .9. Editarea formulelor

Uneori trebuie inserat în text un obiect grafic, numit incorect "ecuaţie". Renunţând la terminologia folosită, putem insera în text anumite obiecte matematice care necesită o scriere specială.

I

Apelaţi Insert Object din lista derulantă a butonului alăturat aflat în fila Insert, grupul de comenzi Text şi I �� Object ... alegeţi apoi Microsoft Equation 3.0. Va apărea o bară mobilă obiect dreptunghiular în care se va insera "ecuaţia". Iată bara:

ş1 un

E quation la � :z :::::: � a.]i · . . 1{ i li I ± • 0 -H:� .j, : . 'V 3 I 11: n c I a oo e Jt w 8 A O ® C) H [ .JIT 11: IL'"' L'"' I'"' f'"' I I (I Q .... I . . � +...-- DDD ....

... ... ... ... . ... .. . - - - . ...

Orice buton al barei permite afişarea unei liste. Selectia oricărui element de pe listă are ca efect apariţia sa În obiectul care se creează. Există două tipuri de obiecte:

1. Obiecte de tip semn 2. Obiecte compuse - acestea prezintă pe lângă semnul specific, unul

sau mai multe obiecte în care se poate scrie la fel ca în obiectul iniţial. În cadrul acestuia se poate insera un alt obiect grafic.

Exemplul 1. Dorim să reprezentăm o matrice cu două linii şi trei coloane. Vreau ca matricea să fie încadrată în paranteze drepte. Pentru aceasta folosim un obiect compus, care conţine un obiect încadrat între paranteze drepte. Acesta este:

Obiectul încadrat trebuie să conţină matricea. Căutând butonul specific în cutie găsim:

.... ODO ::::

Dacă apăsăm butonul obtinem o listă care permite selectarea mai multor tipuri de matrice:

1 20

DO o o

ODO o o o . DDDD . . .

o ... o � li

Da DO

ODO ODO ODO

DDDD aaaa DDDD DDDD �::·� o .. :o


Întrucât ruc1 unul dintre modelele "gata fabricate" nu corespunde modelului dorit, selectăm pe cel aflat În colţul dreapta jos. Acesta ne permite să introducem numărul de linii şi de coloane ale matricei.

Exemplul 2. Să se scrie formula:

t (x) = cos(x) g . ( ) ' Slll X

1[ X -:F kff +-, k E Z

2

După apelul editorului de ecuaţii, scriem 'tg(x)='.

Pentru scrierea fracţiei apelăm la obiectul specific de tip fracţie.

De asemenea, editorul dispune de semne speciale, cum este 1t (pi) .

2 . 1 O. Vizual izarea caracterelor de formatare a textului

Astfel de caractere se vizualizează în scopul uşurării operaţiei de formatare a documentului. Pentru a le vizualiza, selectaţi butonul alăturat din fila Home sau din meniul butonului Office, alegeţi Word Options, iar in fila Display se marchează tipul de caractere care vor fi vizualizate pe monitor (aceste caractere nu se tipăresc) .

1. Spaces (spaţiile) se pot observa mai jos:

2. T ah characters

� 1 ' I ' 2 ' I • iJ ' I ' 4 ' I ' 5 ' I ' 6 ' I ' l ' I ' 8

-+ un exempl u -+ alt exemplu


3. Paragraph marks - un paragraf se încheie, aşa cum am Învătat, printr-un Enter. Mai jos puteţi observa 3 paragrafe, unul vid şi două care ocupă câte un rând.

, un pa ra gram U n at pa rag ram

4. Hidden text (text ascuns). Dacă un text este ascuns, el poate fi vizualizat ca ma1 JOS:

� !! . . . t�_;.;t . . -�� c;;� f)Ş ! .! ./ Pentru a ascunde un text, selectati-1, dati clic pe săgeata din coltul ' ' '

grupului de comenzi Font din fila Home şi bifaţi butonul Hidden.

2 . 1 1 . Şabloane şi sti luri

Până în prezent am Învătat să alegem font-urile, să stabilim dimensiunea şi stilul lor de scriere, să formatăm paragrafe. Problema care se pune în acest moment este următoarea: cum facem ca un document să arate ca un tot unitar, adică întodeauna titlurile să arate într-un anumit fi4 para grafi le într-un anumit fii . . . ? Desigur, le putem formata de fiecare dată la fel, dar trebuie să fim consecvenţi.

Mai există o posibilitate de lucru şi anume aceea de a utiliza stilurile. Mai precis, putem stabili de la început cum vor arăta elementele care alcătuiesc documentul (care este stilul lor) . Acestea vor alcătui şablonul documentului (template), pe care îl vom salva ca fişier separat .

./ Şablonul poate fi folosit şi pentru a crea ma1 multe documente de acelaşi tip.

Pentru a crea un şablon vom proceda astfel:

1. Din meniul butonului Office, apelaţi New, My Create New �-=====�

Templates şi în caseta ce va apărea aveti grijă să Q.ocument fie selectat Blank Document. Bifaţi T emplate. """"'"""'"""'"""'"""'"""'"""'"""'"""'"""'"'"'

2. Daţi clic pe săgeata din colţul grupului de comenzi Styles al filei Home. Din fereastra de mai jos se poate selecta un stil deja definit pe care dorim să-l aplicăm unei părţi din documentul nostru:


Pentru a particulariza aceste stiluri selectaţi butonul Manage Styles (al treilea buton din partea de jos a ferestrei alăturate) .

Styles

Clear All

7pt

After: 2 pt

After: 4 pt

After : 5 pt

After : 6 pt After: 9 pt

Ari al

Arial, 1 pt, Bold

Arial, 12 pt

.., X

�I

Arial, 12 pt, Bold , Centered

�Arial, 13 pt, Bold, Centered v

Options„ .

Observaţi faptul că paragrafele au deja creat un stil: utilizează font-ul Times New Roman, aliniere la stânga şi la dreapta, ş.a.m.d. Vom modifica acest stil, astfel ca font-ul să fie Arial, mărimea 11.

Select a style to edit

Normal '11' Normal (Web) '11' Normal Indent � Note Heading

a Page Number � Plain Text � Salutation � Signature

a Strong � Subtitle

Preview of Normal:

Times New Roman 10 I 11odify„.

Font: (Default) Times New Roman, Justified, Line spacing: single, Widow/Orphan control, Style: Quick Style

�I

Delete

Apăsăm butonul Modify„. ş1, m noua cutie de dialog apăsăm Format. Vom observa o listă care ne permite să formatăm font-urile, paragrafele, tab-urile, ş.a.m.d. Selectăm Font. Va apărea pagina Font (deja studiată) în care selectăm font-ul cerut cu mărimea cerută.

FQ.rmat • I E.ont „ . e.aragraph . . . Iabs„ . t[order . . . !,,.anguage . . . Fram.e „ . f::!umbering . . .


Apoi vom cere ca paragrafele să fie aliniate J ustified şi prima linie să înceapă mai în dreapta cu 1 cm.

3. Acum dorim să creăm un nou stil, numit Titlu, pentru scnerea titlurilor. Pentru acesta vom utiliza Arial, 18, Bold, iar paragraful va fi aliniat În centru. Vom apăsa butonul New Style, apoi Format, şi apelăm pe rând, Font şi Paragraph selectând cerinţele de mai sus.

4. Salvăm şablonul ca pe Stil_Propriu. Fişierul care (Stil_Propriu. dot) .

orice alt document (Save as), cu numele reţine şablonul va avea extensia . dot

5. De acum putem folosi şablonul astfel creat. Atunci când creăm un nou document (New din meniul butonului Office, My templates) selectăm noul şablon. De acum Word-ul va putea scrie automat paragrafele şi titlurile aşa cum a fost setat. Pentru a selecta un stil (în exemplu, Normal sau Titlu), vom utiliza lista de stiluri aflată pe toolbar .

./ După cum observaţi, un nou stil se poate obţine prin actualizarea unuia deja existent (în exemplu Norma� sau poate fi creat în întregime (în exemplu, Stil_Propriu) .

./ Word-ul este înzestrat cu mai multe şabloane pentru fax-uri, pentru scrisori, pentru pagini web, pentru un e-mail etc. Sau puteţi selecta un şablon pe care Word îl va descărca direct de pe Internet. Dacă doriţi să creaţi un document pornind de la un anumit stil, fie el instalat pe calculatorul dvs, fie preluat de pe Internet, selectaţi-l În prealabil (în cutia care apare dacă se selectează New din meniul butonului Office) .

---�-------- --- ------ - --- -- -- · · ---- -New Oocumenl

�tes �� ls,.mti , l crornft01hu 0nJ1n t tor a templi!tt l�and rtct nt

Jnstalltd Templ atts :::J I lnstall� Templates My ttmplatts„.

New !rom txisting ... Microsoft Offkt Online Futurtd

Agtndas

Award ctrti1icatl!s

Brochuru

Busintss cards

Calendars

Contracts

Envelopu

Faxrs

Forms

J�"' g� �"' I � .� --Ntw Blog Post Equityfax Equity ldttr Equity Mtrge Fax

g � � ]j Equity Mtrgr lttttr Equity Report Equity Ruumt Mtdi,m Fax


./ Un şablon poate conţine şi text gata introdus. Testaţi! Aceasta foloseşte pentru crearea unor formulare tip. Astfel, orice document deschis după acel şablon conţine textul din şablon .

./ Şablonul Normal, livrat odată cu Word-ul, conţine definite mai multe stiluri. Fiecare dintre acestea poate fi aplicat în documentul dvs. sau poate fi modificat după dorinţă.

2 . 1 2 . Tipărirea documentului

Apelaţi comanda Print din meniul butonului Office şi alegeţi 1� I Print, apoi selectaţi imprimanta pe care doriţi să o folosiţi (dacă aveţi instalate mai multe imprimante) . Aveţi posibilitatea să tipăriţi tot documentul (Ali), pagina curentă, adică cea în care se află cursorul de editare (Current Page) sau puteţi selecta paginile, aşa cum rezultă din figura de mai jos (Pages) :

Curr�nt page Selectron

Î Pag_es : J,... --------__,.,

Enter page numbers andf or page r anges separated by commas. For example, 1,3,5-12

Atenţie! Pentru a putea tipări trebuie să aveţi instalată imprimanta!

./ Puteri să stabiliri numărul de Copies-------------1 ' ' exemplare (Number of copies) în Number of �opies: m::: ::B care se va tipări documentul:

./ Este bine ca, atunci când aţi scris o pagină, înainte de a o tipări, să vedeţi cum arată în ansamblu. Apelaţi Print din meniul butonului Office şi Print preview:

Preview and print the document frint S elect a printer, n u m b er of cop i es, a nd

other pri nting opti ons before printin g . Quick Print Send the document directly to the defa u lt printer with o ut m a kin g chang es. Print Preyiew Preview a n d m ake ch a nges to p a g e s before

printin g .


2 . 1 3. Cutii text (Text Box)

Cutiile de text au o formă dreptunghiulară şi conţin texte. Acestea prezintă avantajul că pot fi aşezate oriunde în pagină sau pot fi grupate alături de alte desene. Pentru crearea unui Text Box apăsaţi butonul din fila Insert

A � Sign

� Date WordArt Drop

Box • Parts • Cap • �� Obje

Text

Text Box

Insert preformatted text boxes .

şi trasaţi-l în pagină de la colţul din stânga sus către cel din dreapta jos. Apoi executati un clic în interiorul său şi tastati textul cu formatarea dorită: ' '

I Un exemplu de Text Box

:::::> Puteţi seta mai mulţi parametri dacă, după selectarea Text Box-ului, folosiţi opţiunile din fila Format sau daţi clic dreapta şi din meniul contextual alegeţi Format Text Box. Va apărea o cutie de dialog cu mai multe pagini.

A) Color and lines - puteţi alege culoarea din interiorul cutiei (grupul Fili, Color), să fie intensă sau transparentă (Transparency), culoarea chenarului (grupul Line, Color), tipul de linie utilizat pentru chenar (Dashed), stilul (Style) şi grosimea ei (Weight) :

f'<?.i?.f.� �� (i�i.�J I Size li Layout I Picture I Text Box ]I Alt Text I Fili

�olar: vi [ E_ill Effects „ . I Ir ansparency: i_.� -1_1 Io % �JI

Line

Cg_lor: vJI :2_tyle: vi Q.ashed: "JI �eight: 10.75 pt � 1


./ Puteri renunta la chenar dacă selectati No Line pentru Line Color. ' ' ' B) Size - puteţi selecta dimensiunile cu mouse-ul, dar şi cu ajutorul celor două edit-uri:

Height

0 Absolut!2. 11 .06 cm � 1 Relative I

Width

0 Ag_solute 16.35 cm � 1 Relative I

C) Text Box - puteţi selecta distanţa la care se va găsi textul faţă de oricare din laturile dreptunghiului care marchează Text Box-ul

Colors and Lines li Internai margin

!,_eft: lo .25 cm

BJght: lo .25 cm

Vertical alignment

Size li �-1 -��I

Layout I Picture rc.t.�.�f �·�·;.J l ÎQP: 10 . 13 cm � 1 §.ottom: 10 . 13 cm _:_1

ÎOl:l_ !::enter Bottom

precum şi alinierea textului pe verticală rv ertical alignment): sus (Top), centrat (Center) sau jos (Bottom).

D) Layout - conţine mai mulţi parametri, prezentăm doar pe cei care stabilesc alinierea orizontală a Text Box-ului:

Horizontal alignment ,.......,.......,.......,.......,.......,.......,.......,.......,.......,.......,.......,.......,.......� G !:_eft ! !::_enter c BJght (.' Q.ther


2 . 1 4. Realizarea desenelor

Cu ajutorul opţiunii Shapes din fila Insert, se pot realiza desene:

El � Page reak

Tab le

Tab I es

Picture Cl ip Chart Art

III u strati o ns

1 27

Daţi clic pe săgeata aflată în partea de jos a acestui buton şi alegeţi forma pe care doriri să o desenati. ' '

De exemplu, obiectul de mai JOS se poate introduce din categoria Basic Shapes, opţiunea Oval:

./ Cu mouse-ul puteţi modifica dimensiunea oricărui desen. Selectaţi-l (executaţi clic asupra sa) şi acţionaţi asupra celor 8 puncte pentru a-i modifica dimensiunile .

./ Pentru a roti obiectul, se poziţionează cursorul pe punctul de culoare verde şi ţinând apăsat pe el, se trage cu mouse-ul în stânga sau în dreapta.

lrasarea segmentelor de dreaptă (Line)

Apăsaţi Line din cadrul categoriei Lines:

li nes


Pentru a trasa linia în pagină, fixaţi o extremitate a segmentului prin executarea unui clic în locul dorit. Apoi, ţinând butonul stâng apăsat, deplasaţi cursorul grafic acolo unde doriţi să fie cealaltă extremitate a segmentului.

Trasarea săgeţ.ilor (Arrow)

La fel ca la trasarea segmentelor, doar că se apasă butonul Arrow. Sensul de trasare este de la punctul iniţial la punctul final:

După Clllll observaţi, există şi alte tipuri de linii, care pot fi introduse în cadrul doclllllentului, modul de trasare fiind similar.

Trasarea dreptunghiurilor (Rectangle)

Se apasă butonul Rectangle din categoria Basic Shapes:

� ��ov <> o © 6 � o o o O El r5'.l lDI D © @ @ � Q � · :9· cr \ c J {} o c J { }

Se fixează un colţ al dreptunghiului, de exemplu cel din stânga sus şi se trage, până în punctul în care se doreşte să fie colţul din dreapta jos. Când cursorul grafic ajunge în acel punct se eliberează butonul mouse-ului .

./ Pentru trasarea elipselor se alege butonul Oval. Cercul este un caz particular al elipsei, deci pentru trasarea lui se foloseşte acelaşi buton.

Modificarea parametrilor formelor

După desenarea formei dorite puteţi modifica parametrii acesteia. Observaţi faptul că dacă forma este selectată, apare fila Format, de unde puteţi alege, spre exemplu, forma conturului (Shape Outline) .


� Shape Fi l i •

� Shape Outline • Theme Colors

Standard Gol'ors

• • • • • • • No Outline

'\!) .More Outl in e Co lors„ .

Weight �

Da,ş_hes � - � >-- ,...rro s .......

P�ttem„.

Optiunea Weight se foloseşte pentru a stabili grosimea liniilor pentru I I ori�are dintre figurile obţinute anterior. Selectăm obiectul căruia dorim -să-i modificăm grosimea liniei (clic asupra lui) şi selectăm această opţiune. Dintr-o listă grafică selectăm grosimea dorită.

D D Opţiunea Dash Style se foloseşte pentru a stabili tipul de linie pentru I ".".':." I oricare din figurile obţinute anterior. Selectăm obiectul căruia dorim să-i modificăm tipul de linie (clic asupra lui) şi selectăm această opţiune. Dintr-o listă grafică selectăm tipul de linie.

D r -1

- -

Optiunea Arrow Style stabileşte tipul de săgeată. Se selectează obiectul, > se alege opţiunea şi se selectează tipul de săgeată.

o--......... o


Culoarea liniilor se realizează selectând obiectul şi alegând culoarea dorită din meniul ataşat butonului Shape Outline.

Tot din fila Format se pot modifica şi altr, · parametri ai I A-.. Vf Shape Fili ... formei. Selectaţi obiectul, apoi apăsaţi săgetuţa din partea .... ______ _,

dreaptă a butonului Shape Fill din fila Format şi selectaţi culoarea de umplere:

-� C] Efecte de umbrire

Folosind grupul de comenzi Shadow Effects din fila Format se poate aplica formei un artificiu prin care acesta va avea "umbră". Executaţi un clic asupra desenului (selectaţi-l), apăsaţi butonul corespunzător şi alegeţi din lista grafică afişată tipul de "umbră".

Exemplu: mai jos puteţi observa o elipsă fără şi cu "umbră":

o !

3.0 Effects •

0 0 0 0 o Perspective Shadow

D O D O D O D O

Additional Shadow Styles

0 0 0 0 O O GJ

� Shadow �olor


Efecte tridimensionale

3-D Effects - oricărui desen, (Text Box, etc.) i se poate aplica un artificiu prin care acesta poate fi văzut În 3 dimensiuni (în spaţiu) .

Executaţi un clic asupra desenului (selectaţi-l), apăsaţi butonul corespunzător şi alegeţi din lista grafică afişată tipul de "vedere în spaţiu".

Exemplu: mai jos puteţi observa o elipsă În plan şi În 3D:

� �

l

Suprapunerea obiectelor

3-D Effects �

No 3-D Effect

Parallel

Perspective

Rotate în Perspective

� 3-D S:olor

Y; Qepth

•i:J Direction

Î' 1ighting

ti'J �urface

Există mai multe opţiuni în grupul Arrange din fila Format:

Position

Brin g to Front ... I� Al ign ... � Send to Baci< ... !e:i Group ...

Text Wrapp in g ... �� Rotate ...

Arrange

1 31

� � Sendto

Bringto

Pos�ion � Text Wra

A) Comenzile Bring Front, Send to Back şi Bring Forward, Send Backward selectabile din meniurile ataşate butoanelor alăturate se utilizează în cazul suprapunerii unor obiecte.


Exemplu: mai jos avem trei obiecte: o căsuţă de text, o elipsă şi un segment de dreaptă:

Acesta este un Text Box.

Tragem deasupra Text Box-ului elipsa ş1 ap01, deasupra ansamblului astfel format segmentul de dreaptă:

un Text

Obţinem astfel 3 niveluri. Nivelul 1 (superior), cel pe care se află segmentul, nivelul 2, cel pe care se află elipsa şi nivelul 3, cel pe care se află Text Box-ul (nivelul inferior) .

Întrebarea este: putem aşeza fiecare obiect pe nivelul pe care îl dorim? Răspunsul este afirmativ. Selectăm un obiect şi alegem una dintre comenzile de mai jos:

• Bring to Front - aduce obiectul selectat pe nivelul superior. Exemplu: selectez Text Box-ul şi aleg această comandă. Iată efectul:


• Send to Back - aduce obiectul selectat pe nivelul inferior. Exemplu: selectez segmentul şi aleg această comandă. Iată efectul:

u n Text u n Text


• Bring Forward - aduce obiectul selectat cu un nivel mai în fată. Exemplu: selectez Text Box-ul şi aleg această comandă. Iată efectul:


• Send Backward - aduce obiectul selectat cu un nivel mai în spate. Exemplu: selectez elipsa şi aleg această comandă. Iată efectul:

Acesta u n Text

Acesta este u n Text Box.

Gruparea obiectelor

Un grup se comportă ca un singur obiect. Aceasta înseamnă că îl puteri A '

muta, roti, etc. In vederea grupării, toate obiectele se selectează. Obiectele se selectează pe rând (clic cu mouse-ul), dar se ţine apăsată tasta SHIFT. După selectarea multiplă, se apelează comanda Group din fila Format, grupul de comenzi Arrange:

1=[!J1 Brin g to Front T I� P. · n T

� Send to Back T [B!l Group TJ Pos ition

Text Wrapping T .S Rotate T

Arrange

Mai jos puteţi observa mai multe obiecte selectate:

./ Se pot grupa şi un grup cu alte obiecte sau două sau mai multe grupuri .

./ Comanda U ngroup este operaţia inversă a grupării. În urma ei, obiectele se eliberează.


Rotirea obiectelor

Op�unile din meniul ataşat butonului Rotate se utilizează pentru a roti anumite obiecte (Text Box-urile sau grupurile care le con� nu pot fi rotite) sau pentru a crea imagini simetrice ale lor .

.Sr.. Rotate TI �".; l,o/ cm

.s„ Rotate Big ht 90 , .

. e Rotate j,eft 90' -I

Fl ip Yerti cal ....

J Fl ip tlorizontal

,More Rotation Options„ .

Pentru a roti un obiect acesta trebuie mai întâi selectat!

• Rotate Left - roteşte la stânga cu 90 de grade:

�-Ll • Rotate Right - roteşte la dreapta cu 90 de grade:

• Flip Horizontal - creează imaginea simetrică faţă de axa OY:

• Flip Vertical - creează imaginea simetrică faţă de axa OX:


2 . 1 5. Introducerea imagini lor

Un document poate reţine şi imagini (cu extensia .bmp, . jpg, etc.) . Există mai multe metode de inserare a unei imagini într-un document.

Inserarea imaginii dintr-un fişier

Apelaţi Picture din fila Insert:

§ � Page

reak

Page Layout Re

II

Va apărea o cutie de dialog de tip Open care permite încărcarea fişierului. În acelaşi timp, cutia permite şi vizualizarea imaginii memorate în fişierul selectat.

Inserarea unei selecţii prin comanda Paste

Copierea unei imagini (sau a unei selecţii din ea) dintr-un editor de imagini, de exemplu, Paint şi inserarea ei în documentul Word cu Paste.

Exemplu: în aplicaţia Paint am Încărcat o imagine:

Selectăm zona care ne interesează şi, din meniu, Edit şi Copy. Apoi, în Word, Paste din fila Home. Imaginea va apărea în document.


./ Dacă apăsaţi tasta Print Screen, imaginea afişată de monitor va fi copiată automat în Clipboard. Apoi ea poate fi inserată în Paint (Edit şi Paste) şi se poate selecta o parte a ei sau poate fi inserată direct în Word (fila Home, Paste). Am obţinut o aşa numită " captură de ecran".

Inserarea unei imagini conţinute de Word

Programul Word conţine o serie de imagini care se regăsesc în . [ii Clip Art. O astfel de imagine se inserează astfel: din fila Insert ;::'.:[]

selectaţi butonul Clip Art. Mai jos, puteţi observa o astfel de imagine: Cl ip Art

Callouts

Obiectele Callouts sunt asemănătoare Text Box-urilor. Acestea diferă doar prin forma geometrică afişată. Puteţi alege dintr-o listă de mai jos (apelaţi fila Insert, apoi grupul Shapes) :

Callouts Q CJ 0 0 _o ,,[] r0 Q=J J:::J ,X:J rL! c!:::J _L) /::J rL! cl_:::J JO ,,JO rlO c!O

Puteţi insera o mulţime de alte forme, aşa cum puteţi observa În figura de mai sus. De exemplu, mai jos aveţi o imagine la care am ataşat un Callout:

o

./ Pentru a dirija acea "săgeată simbolică" în locul dorit, trebuie să "trageţi" în poziţia dorită acel mic dreptunghi galben care apare atunci când Callout-ul este selectat.


WordArt sau scrierea artistică

Apăsaţi butonul alăturat, din fila Insert. Se va deschide un meniu din care puteţi alege stilul de scriere. După alegere, va apărea o fereastră în care introduceri textul. '

Un exemplu Stilul Textul Efectul

Poziţionarea imaginilor

1 37

Pentru a putea prelucra cu uşurinţă imaginile, Word-ul dispune de o filă cu unelte specializate în acest scop - Format - care este vizibilă doar după selectarea obiectului grafic. Să analizăm, pe rând, principalele comenzi.

A) Text Wrapping - la apăsarea butonului de mai jos

Text Wrapp ing • I după selectarea imaginii, va apărea un meniu din care putem selecta una dintre comenzile următoare:

•

•

Square imaginea va apărea înconjurată de text în cele 4 părţi.

Edit wrap points - uneori dorim ca textul să apară pe o parte din imagine, dar pe alta nu. Prin utilizarea acestei

en;

Vo lkswagen; Volkswa ge n ;

Vo lkswa en;

Volks Volks Volks Volks Volks

Volkswa en;

comenzi putem trasa un poligon care să includă imaginea care nu trebuie acoperită de text. Iniţial, poligonul de protecţie include întreaga imagine. Apoi, cu mouse-ul, putem modifica poziţia celor 4 puncte (prin tragere) . Orice clic pe linia care alcătuieşte poligonul are ca efect crearea unui alt punct, care la rândul lui poate fi mutat.

1 38

•

•


Înainte de comandă Poligonul iniţial Poligon final

Rezultatul prelucrării. Observaţi modul În care textul acoperă doar porţiunea de imagine lăsată în afara poligonului de protecţie:

Behind Text - textul acoperă imaginea:

Top and Bottom - textul se află deasupra şi sub imagine:

Volks"Wage n; Volks"Wagen;

./ Există şi alte comenzi, dar cele mai importante au fost prezentate.


Ajustarea imaginilor

Cu ajutorul comenzilor din grupul de comenzi Adjust al filei Format puteţi regla calitatea şi modul de vizualizare a imaginii:

•

•

•

� Brightness ... );( Compres s Pictures

Contrast ... � Reset Picture

� Reco lor ... j I � � utomatic ... 81 �raysca le

1� �lack and \!\"hit.: � id Washout j Black and White I � âet Transparent Co lor ..... . . . .

-

Recolor - o imagine poate fi afişată în culori, dacă aşa a fost încărcată (Automatic), cu diverse nuanţe de gri (Gray Scale), doar alb-negru, (Black and White) şi "în ceaţă, apă", Washout.

,/ Nu uitaţi, pentru a utiliza acest buton, mai întâi, selectaţi imaginea.

Contrast - se utilizează pentru a mări sau micşora contrastul .

Brightness - se utilizează pentru a mări sau rmcşora luminozitatea llllagmn.

Tot În fila Format se găseşte grupul de comenzi Size cu ajutorul căreia puteţi redimensiona imaginea precizând dimensiunile În centimetri sau puteţi să decupaţi o parte din imagine (comanda Crop):

�::o Height: 0,53 cm

Crop � Wi dth : 0,71 cm : 1 Size r;;


2 . 1 6. Scrierea textului în coloane

Pentru a scrie un text în coloane introduceţi textul (pe o singură coloană) după care se selectează textul care urmează să apară scris în coloane şi se apelează la butonul Column din fila Page Layout. Se selectează numărul de coloane dorite sau se alege opţiunea More columns. În acest ultim caz, va apărea cutia de dialog următoare:

unde:

C;u-m-ns____ l1JL8J Presets

Qne T�o Ihree

Mumber of columns: CJ Width and spacing �ol #: .--W '�:dt_h: _ __,.,, :îPacing:

[D l1 3 cm �I I D I l :==I ==: D l 1 �1-�

[ylply to: I Whole document v j

�eft Bight

Preview

',,-

OK j [ Cancel

Number of columns - numărul de coloane, se scrie în edit-ul corespunzător sau se incrementează (decrementează) până se ajunge la numărul dorit;

Width - lătimea unei coloane; '

Spacing - spaţiul care separă coloanele;

Line between - dacă este marcat coloanele sunt separate prin linii;

Left - dacă există numai două coloane, coloana din stânga este mai îngustă;

Right - dacă există numai două coloane, coloana din dreapta este mai îngustă .

./ În continuare, observaţi un paragraf sens pe trei coloane. Se poate modifica spaţiul între coloane şi lăţimea coloanelor prin tragerea cu mouse-ul pe riglă:


1 . Sistemul de

codificare RGB . Se

porneste de la 3 culori fundame ntale roşu, verde şi albastru ( Red, Green , Bl.ue). Fiecare di ntre ele

2 . 1 7. Break-uri

este caracterizată de o a numită intensitate care se cua ntifică printr-u n număr natura I între o şi

255. Orice altă

culoare se o bţine ca o com binaţie a culori lor

fundamentale, fiecare cu o anumită intensitate. Pentru a reţine intensitatea unei �ulori fundamentale (adică un număr natural între o şi 255)

este necesar un

1 41

Break-ul are semnificaţia de întrerupere. Există mai multe tipuri de întreruperi şi acestea vor fi tratate separat. Pentru a crea o întrerupere se apelează la meniul ataşat butonului Breaks din fila Page Layout:

El •c;;i Bre aks T Inde

Page Breaks LJ fage

• - Mark the point at which one page ends and the next page begins.

!;;olumn

Indicate that the text followin g the column break wil l begin in the nex! column.

Iext Wrapping

Separate text around obj ects on web pages, such as capti o n text from body text.

Section Breaks

�ext Page

Insert a s ectio n break and start the n ew section on the n ex! pag e.

CQntinuous

Insert a sectio n break and start the new section on the same page.

!,ven Page

Insert a sectio n break and start the n ew section on the n ext even-numb ered page.

OJ!d Page

Insert a s ectio n break and start the n ew section on the n ext odd-numbered pag e.


A. Page break - salt pe pagina următoare. Se poziţionează cursorul grafic înaintea cuvântului care doriţi să fie scris pe pagina următoare şi se selectează Page Break

Dacă doriţi să vizualizaţi acest break, apăsaţi butonul alăturat aflat 11 � J I în grupul de comenzi Paragraph al filei Home. Un astfel de break arată ca În imaginea de mai jos:

......... page Break ....

./ Dacă doriţi să ştergeţi un astfel de break, aşezaţi cursorul pe linia de break şi tastaţi Delete.

B. Text wrapping break - se utilizează atunci când se doreşte ca, Începând de la un anumit cuvânt, să se treacă la linie nouă, fără a apăsa ENTER (nou paragraf).

Pentru a realiza această operaţie, se poziţionează cursorul grafic înaintea cuvântului care trebuie să apară pe linia următoare şi se selectează Text wrapping break. Acelaşi efect are loc dacă se tastează SHIFT+ ENTER.

Exemplu: acesta este un singur paragraf aliniat stânga. Totuşi, am vrut ca începând de la acest cuvânt să se scrie pe linie nouă.

C. Column break - comandă rar folosită. Are ca efect terminarea textului scris într-o coloană şi aşezarea lui În coloana următoare.

D. Section breaks - vezi în continuare.

2 . 1 8. Sectiuni '

Un document poate fi împărtit În sectiuni. La rândul ei, fiecare sectiune poate fi formatată. Începeţi o nouă secţiune' prin Insert, Break şi selecta� una din opţiunile din meniul ataşat butonului Breaks din fila Page Layout:

1. Next page - secţiunea începe la pagina următoare. 2. Continuous - sectiunea este în continuare.

' 3. Even page - secţiunea începe pe prima pagină pară. 4. Odd page - secţiunea începe pe prima pagină impară.


./ Implicit, întreg documentul este alcătuit dintr-o singură secţiune .

1 43

./ Orice secţiune trebuie să conţină cel puţin un paragraf. Dacă se face separarea unei noi secţiuni În interiorul unui paragraf, atunci noua secţiune va conţine un paragraf nou, formatat la fel ca şi cel care a fost divizat.

Fiind dat un document care este alcătuit din mai multe sectiuni, atunci: '

putem numerota paginile începând de la o anumită secţiune (fila intert Insert butonul Page Numbers) .

putem seta marginile pentru acea secţiune. Alăturat puteri observa o sectiune care are ' ' marginile laterale mai mari decât ale celorlalte.

Alăturat puteri observa o sectiune în care textul ' ' este scris pe două coloane. De această dată, nu a mai fost nevoie ca, în prealabil, să selectăm textul. Ani apelat Format, Columns şi formatarea s-a făcut la nivelul întregii secţiuni.

2 . 1 9. Tabele

- � - - - jlf. - -jlf. � $$1$- 1$Sl$- fll. - #fifll. l1:1t -' M � M 'tl!M l't � � m: � - AA -

.

În Word avem posibilitatea să creăm cu uşurinţă tabele. După crearea unui tabel, dacă vă aflaţi într-o celulă a acestuia sau selectaţi o parte din tabel, Word-ul va afişa două noi file Design şi Layout cu o mulţime de opţiuni. La intersecţia unei linii cu o coloană avem o celulă a tabelului. O celulă poate conţine text, imagini, etc.

Crearea unui tabel

Folosiţi butonul Table din fila Insert şi selectaţi numărul de linii şi de coloane dorite sau selectaţi opţiunea Insert Table. Va apărea cutia de dialog de pe pagina următoare. Astfel:

• putem selecta numărul de coloane şi numărul de linii ale tabelului;

1 44

•


Insert Table L1J[g] Table size

Number of !;_olumns: ls �1 Number of [OWS: 12 �1

Autofit behavior 0 Fixed column �idth: !Auto �I O AutoEit to contents

O AutoFit to wingow

D Remember dimen�Jons for new tables

IL OK 1] [ Cancel

putem selecta ca toate coloanele să aibă aceeaşi lă�me (Fixed column width) şi lăţimea lor, sau putem cere ca lă�mea coloanelor să fie determinată de textul introdus (AutoFit to contents) sau ca tabelul să ocupe, pe lăţime, toată pagina (AutoFit to Window) .

Scrierea conţinutului tabelului

Se pot introduce texte, imagini, etc. în fiecare celulă a tabelului prin aşezarea cursorului grafic în celula respectivă şi executarea unui clic, în urma căruia se obtine cursorul de editare.

./

' De exemplu, am completat tabelul de mai jos:

Trim1 Trim 2 Trim 3 Trim 4 100 20 70 40 15 33 124 200

Cu ajutorul uneltelor din fila Home se pot selecta, pentru fiecare � celulă, font-ul, mărimea stilul şi alinierea textului. Se poate stabili � de asemenea o culoare de fundal pentru fiecare celulă sau pentru întregul tabel, folosind butonul alăturat.

Există posibilitatea să formatăm un tabel folosind un şablon pus la dispoz*e de Word. Selecta� întregul tabel şi alege� şablonul dorit din fila Design (pentru mai multe şabloane da� clic pe săgeata aflată în dreapta grupului de comenzi Table Style) .


� -b- - --c::::::

� Shad ing T :::;::; Borders T

Table Styles

Exemplu: creăm un tabel cu 4 linii şi 7 coloane folosind unul dintre stilurile predefinite (vezi figura următoare) :

-------- ------- ------- ------

Aşezarea tabelului în pagină

Presupunem că tabelul a fost creat. Este momentul să-l aşezăm în pagină într-o poziţie convenabilă. Pentru a efectua această operaţie,

Properties cursorul trebuie să se găsească într-o celulă a tabelului. Apelăm opţiunea Properties din fila Layout. Va apărea o cutie de dialog cu mai multe pagini. Acum vom folosi pagina Table:

Table Properties 11JL8] LÎ�ble 11 B.ow li Col!,[mn li c�ll I

Size D Preferred �idth: �lo_cm ___ ��I Measure in: Cent1meters

Alignment

beft <;;enter Text wr apping

!'!_one /\_round

Rig!JJ

Indent from left: lo cm : I

Pos1t1oning . „

[ e_orders and Shading „ . ] Qptions„.

OK li [ Cancel


a) Alignment - alinierea pe orizontală. Tabelul poate fi aliniat la stânga (Left), în centru (Center), la dreapta (Right) .

./ Dacă tabelul este aliniat la stânga, putem utiliza edit-ul ldent from left pentru a seta distanţa faţă de marginea din stânga.

b) Text wrapping - indiferent de aliniere, un tabel poate fi înconjurat sau nu de text. Dacă selectăm None, tabelul nu va fi înconjurat de text, iar Around cere ca tabelul să aibă text În jurul lui.

=> Dacă tabelul este Înconjurat de text (Around), se poate apăsa butonul Positioning pentru a seta alţi parametri.

Parametrii cei mai importanţi se referă la distanţa ia can tnbuie să se găsească textul faţă de tabel Top (faţă de marginea de sus), Bottom (faţă de marginea de jos), Left (faţă de marginea din stânga) şi Right (faţă de marginea din dreapta) :

Table Positio ning 11](8] Horizontal

Po�ition: Relati�e to: l�ter vi lcolumn vi Vertical

Pos[tion: R�lative to: Io cm vi I Paragraph vi Distance from surrounding text

Iop : Jo cm �1 b.eft: Jo,32 cm � 1 �ottom: Jo cm �1 e,ight: Jo,32 cm � 1

Options

� (1ove with text D a11ow overlap

OK I [ Cancel


Ştergeri

Atunci când cursorul se găseşte într-o celulă a tabelului, apelaţi Delete din fila Layout. Puteţi selecta:

a) Delete Table - ştergerea întregului tabel;

b) Delete Columns - ştergerea coloanei care conţine celula selectată, dacă sunt selectate mai multe celule, se vor şterge coloanele care conţin celule selectate:

1 47

Delete Insert Insert Above Below

� Qelete Cel ls„ ,

''Jl' Delete �olumns

� Delete B,ows

� Delete Table

c) Delete Rows - ştergerea liniilor care conţine celulele selectate:

d) Delete Cells - ştergerea unei celule. Va apărea o nouă cutie de dialog în care se poate selecta modul în care se face ştergerea:

- Shift cells Left - celulele se deplasează către stânga;

- Shift cells up - celulele se deplasează În sus;

I ! I � I � 1-.1 ! 1 5 I � I


Mutarea tabelului prin drag-and-drop

Executaţi clic asupra tabelului. Mutaţi cursorul grafic asupra semnului care apare în stânga sus. Acum puteţi muta tabelul ţinând butonul stâng apăsat.

------. � .-------.---1 � I 5---.-----.1 � I D

Inserări

Fiind dat un tabel şi o celulă a sa selectată se pot insera linii, coloane, celule sau se poate insera un alt tabel în acea celulă. Utilizaţi butoanele de mai jos, aflate în fila Layout:

Insert Insert Insert Insert Above Be low Left Right

Vom prezenta, pe rând, posibilităţile de inserare.

a) Insert Left - inserează o coloană la stânga coloanei curente:

b) Insert Right - inserează o coloană la dreapta coloanei curente:

c) Insert Above - inserează o linie deasupra liniei curente:

d) Insert Below - inserează o linie dedesubtul liniei curente:


e) Cells - (inserarea unei celule) . Dacă daţi clic pe butonul aflat în dreapta grupului de comenzi Rows & Columns din fila Layout, va apărea o nouă cutie de dialog (ca cea a!ăturatâJ .

r Shift Cells R!ght

r- [Ş�ift ��ilS. ��:! r Insert entire r.ow r Insert entire !;_Olumn

1 49

După caz, se va alege între: OK cancn - Shift Cells Right (deplasarea celulelor către dreapta) :

- Shift cells Down (deplasarea celulelor în jos):

../ Există posibilitatea de a insera În celula selectată un alt tabel, folosind butonul Table din fila Insert:

Selectări

1 2 3 EEE 4 5 5

Fiind dat un tabel şi o celulă a sa în care se găseşte cursorul de editare, se pot face diverse selectări. Pentru aceasta apelaţi la meniul ataşat butonului Select aflat În fila Layout.

Puteţi opta Între: selectarea Întregului tabel (Select Table), a coloanei în care se găseşte celula (Select Column) a liniei În care se găseşte celula (Select Row) şi a celulei (Select Cell).

llil ! P�p•rt ,.

S e�;ct 'I Gridl ines

llll Seject Cel l

li Seleft Column

III Select Bow

IW Seleq Table

Selectările se pot face şi fără meniu. Selectaţi o linie prin executarea unui clic în afara tabelului, dar în stânga. Selectaţi o coloană prin aşezarea cursorului grafic pe linia de sus. Cursorul va lua forma unei săgeţi orientate în jos. Selectaţi întreg tabelul prin executarea unui clic pe acel semn din stânga sus cu ajutorul căruia putem să-l mutăm.


Înălţimea l ini i lor

Selectaţi o linie, mai multe sau întreg tabelul, apoi din fila Layout selectari butonul Properties şi Row. Puteri specifica înăltimea În două situarii: ' ' ' ' At least (dacă e cazul, prin natura datelor memorate, înălţimea se modifică automat) sau Exactly (indiferent de datele memorate înălţimea rămâne aceeaşi) :

Size ·,....-------------------- • Row 1 : P' 2,pecify height:

./ Dacă doriri ca toate liniile să aibă aceeaşi înăltime, selectari-le, de la ' ' ' început, pe toate.

Lăţimea coloanelor

Din fila Layout selectaţi butonul Properties şi Column. De asemenea, selectari o coloană, mai multe, sau întreg tabelul. Puteri specifica lătimea ' ' ' coloanei (coloanelor) fie în cm, fie În procent faţă de lăţimea totală a tabelului (Percent) :

Size ================-- 1 Column 1 : P Preferred \:Yidth J 1lcm îfj M_easure in: jcentimeterlEJ

./ Puteri modifica înăltimea liniilor direct cu mouse-ul. Aşezari cursorul pe ' ' ' o linie orizontală a tabelului. Atunci el va lua o formă specifică. Tineri ' ' butonul apăsat şi trageţi în direcţia dorită. Procedaţi În mod analog pentru modificarea înălţimii coloanelor.

Formatarea celulelor

Operaţia se referă la modul În care apare sens textul În celule. Apelaţi butonul Properties din fila Layout şi apoi Cell.

A) Alinierea textului pe verticală. Textul poate fi scris În partea de sus a celulei (Top), în centru (Center) sau jos (Bottom) .


Vertical alignment

ÎOll_ �enter �ottom

B) Distanţa textului faţă de margm1. Apăsaţi butonul Options şi stabiliţi distantele! '

Iop: Jo cml fi3 b._eft: Jo, 19 cm ffi �ottom: J ..... o

-cm-

-=ffj=' BJght: Jo, 19 cm ffJ

./ Alinierea pe orizontală se poate face în mod clasic:

Contopirea celulelor (opţiunea Merge cells)

Există posibilitatea să contopim mai multe celule. Un motiv este dat de necesitatea scrierii cu uşurinţă a unui cap de tabel; altul, de posibilitatea creării unor Merge Split Sp l it

tabele ceva mai complexe. Practic, se selectează celulele Ce l ls Cel ls Table

care urmează a fi contopite şi se apelează Merge Merge

cells din fila Layout. De acum putem scrie, cu alinierea dorită, În celula astfel obţinută:

I Cap de tabel

Împărţirea unei celule (opţiunea Split cells)

Există posibilitatea ca o celulă să poată fi împărţită în altele. Operaţia se realizează în scopul creării unor tabele complexe. Apelaţi Split Cells din fila Layout. La aparţia cutiei de dialog alăturate, scrieti numărul de linii şi cel de coloane în care doriti ' ' să fie Împărţită celula.

Number of !;_olumns:

Number of r.ows:


Împărţ.irea unui tabel (Split table)

Operaţia de împărţire a unui tabel În alte două tabele. Operaţia este utilă atunci când un tabel nu încape în întregime în pagină. Se aşează cursorul de editare într-o celulă a unei linii şi se dă clic pe butonul Split Table din aceeaşi filă Layout. Începând cu acea linie şi până la sfârşitul tabelului se formează un alt tabel, separat de prima parte:

I I I I I ~

Alte setări

Dacă vă aflati cu cursorul într-o celulă a unui tabel, puteti folosi alte ' A ' câteva instrumentele din fila Design. In continuare, vom prezenta câteva dintre uneltele pe care le găsiţi în această filă.

a) Eraser - şterge liniile care alcătuiesc tabelul. Atunci când cursorul grafic se găseşte asupra liniei pe care doriţi să o ştergeţi, executaţi clic asupra ei.

b) Pen color - cu ajutorul său se poate stabili culoarea liniilor. I ,-? ;;;;;., Pen Color ...

La execuarea unui clic asupra butonului va apărea o tabelă a -· -----�

culorilor din care selectati culoarea dorită. Toate bordurile setate/modificate ' din acest moment vor avea culoarea respectivă.

c) Shading - culoarea de umplere. Selectaţi o celulă sau mai I .A"' S h d . ... ul A u • u • 1 . 1 d . V D

� a i n g m te. pasaţi sagetuţa ş1 a egeţ:i cu oarea anta. e acum celula (celulele) selectată va avea culoarea de fond cea aleasă de dvs.

d) Line Style - apăsaţi acea săgetuţă din dreapta şi selectaţi tipul de linie dorit.

e) Line Weight - apăsaţi acea segetuţă din dreapta ş1 selectaţi grosimea liniei.

„ 1


f) Borders - se utilizează pentru a seta bordurile tabelului aplicând setările setările de la d) şi e). Selectaţi celula (celulele) căreia îi vor fi aplicate stilul de linie şi grosimea ei. La apăsarea acelei mici săgetuţe apare o listă grafică, cu ajutorul căreia stabiliţi căror linii li se aplică setările .

Exemplu: realizăm conversia de mai jos:

selectăm prima linie a tabelului:

ştergem liniile vechi prin selectarea No Border;

stabilim stilul liniei şi grosimea ei;

aplicăm noul stil prin selectarea opţiunii Ali Borders. În final, contopim celulele (Merge Cells) şi scriem titlul. Rezultatul este prezentat mai jos:

I I I I I 1�----+

Titlul tabelului

Crearea graficelor (Charts)

În Word se pot obţine reprezentări grafice cu multă uşurinţă. Fie situaţia de mai jos, a rezultatelor obţinute la un examen de elevii din 4 judeţe:

J u d elu i Judetul 1 Judetul 2 Judetul 3 Judetul 4

Ad misi --

Respinsi 50f--= 35 ----82 90

Se cere ca aceste rezultate să fie afişate sub formă grafică.

20 34 16 45

Selectăm tabelul şi, din fila Insert selectăm Chart. Se fac modificările dorite asupra graficului şi se dă apoi clic În afara graficului, pentru a reveni la pagina de Word .

./ Dacă dorim, putem sa deplasăm graficul cu ajutorul operaţiei drag-and-drop.


1 00 �---------�

80 -1----------1 60 +-------I 40 20

o Judelui Judelui Judelui Judelui

1 2 3 4

o Admisi • Resp insi

./ Mai mult, dacă se schimbă datele din tabel, se modifică şi reprezentarea grafică.

2 . 2 0. Word-ul şi Internet-u l

Orice document Word poate fi salvat c a document HTML (HTML-ul este un limbaj care permite descrierea paginilor Web) . După crearea documentului, apelaţi Save as din meniul butonului Office şi În lista Save as type selectaţi Web Pages:

I File o.ame: I Capitolul 2 . htm Save as type: I Web Page (* .htm; * .html)

Page title: Capitolul 2

Automat, se va crea un fişier cu extensia .htm (sau .html) . Acest fişier descrie o pagină Web. Puteţi verifica modul în care arată fişierul ca pagină Web. Executaţi dublu clic pe icon-ul său şi, cum aceste extensii sunt asociate Internet Explorer-ului, se va lansa acest program (browser) şi el va vizualiza pagina creată .

./ Procedeul este mai rar folosit. Creatorii de pagini Web preferă să creeze aceste pagini direct cu ajutorul limbajului HTML sau cu ajutorul unor programe specializate.


O pagină Web poate fi vizualizată în mai multe feluri (din meniu, View) :

a) Normal - se vede mărită şi fără imagini ataşate. Se foloseşte, rar, pentru a verifica modul în care au fost introduse textele.

b) Web Layout - cum arată ca pagină web.

c) Print Layout - cum arată pagina tipărită.

Un document creat poate fi trimis ca e-mail. Apelaţi opţiunea Send din meniul butonului Office şi Email. Documentul va fi ataşat e-mail-ului.

Dacă doriţi ca un documentul Word să fie trimis în corpul mesajului email trebuie să adăugaţi comanda Send to Mail Recipient la bara de acces rapid:

•

•

•

alegeţi Word Options din meniul butonului Office;

selectaţi Customize şi apoi în lista Choose commands from list daţi clic pe Ali Commands;

selectaţi Send to Mail Recipient şi apoi Add .

Observaţi că a fost adăugat un nou buton în bara de acces rapid:

./ Procedeul este foarte rar folosit. Pentru trimiterea mesajelor se folosesc programe specializate, de exemplu Outlook Express (sau Windows Mail). La un e-mail se poate ataşa un document Word (eventual compresat şi parolai) .

./ Se pot trimite sau recepţiona fax-uri pnn cablul telefonic. Dacă aţi achiziţionat un Fax Modem, aveţi pe CD şi programul de instalare a Fax-ului. Un document poate fi trimis ca Fax prin opţiunea Fax Recipient. Evident trebuie să ne putem cupla la Internet. Şi această soluţie este rar folosită, În practică se preferă achiziţionarea unm telefon fax.


2 . 2 1 . Corectura automată

În documentele Word se pot corecta automat textele introduse. Dacă aveţi o versiune care conţine şi dicţionar În Limba Română atunci corectura poate fi folosită şi pentru aceste texte, altfel se poate efectua corectura doar pentru texte în Engleză (Spaniolă, Franceză, în funcţie de dicţionarele existente) .

Setarea l imbii

Din fila Review, butonul Set Language ş1 se alege liniba în care se efectuează corectura:

Set La n g u a g e

Corectarea paragrafului

Din fila Review, butonul Spelling and Grammar (pentru Română Ortografie şi gramatică) . Va apărea o cutie de dialog care afişează textul şi evidenţiază prima eroare găsită. Aveţi posibilitatea de a o ignora sau de a o corecta:

- --------

Spelling and Grammar: Romanian l1](8] Not in Dictionary � Pentru a "'-idenţi:i e<ocle din înt<eg docu:mentul >elect:iţi !!!, Tools, Options �i bifaţi Ch<>ck spelling as you typ<>.

Ignore Once

Ignore Ali

[ [idd to Dictionary v, .

Suggestioo.s:

(No Spelling Suggestions) Change

Change Ali

AutoCorrect

Q.ictionary language: l._R_o_m_a_ni_an __________ --'-----'v I Qptions„ . Undo Cancel


Pentru a evidenţia erorile din întreg documentul selectaţi Word Options din meniul butonului Office, Proofing, bifati optiunea Check spelling as you type. În acest fel cuvintele introduse greşit ;au c�re nu sunt în dicţionar, vor fi subliniate cu o linie roşie în zigzag .

./ Prin executarea unui clic cu butonul drept asupra unui cuvânt eronat puteţi selecta înlocuirea lui cu un altul sugerat de către Word.

2 . 2 2 . Câteva principii de formatare

•

•

•

•

•

•

•

•

•

•

Nu scrieţi rânduri prea lungi, dacă pagina cere ca rândurile să fie lungi, utilizati scrierea în coloane! '

Lăsaţi spaţii între paragrafe, mai ales dacă este un text ştiinţific!

Lăsaţi marginile laterale suficient de mari!

Încercaţi ca un paragraf să nu aibă ultima linie pe pagina următoare!

Evitaţi, pe cât posibil, ca un rând să conţină doar un cuvânt format din 2-3 litere!

Folosiri putine font-uri în document! ' '

Nu folosiri multe stiluri! '

Nu ataşaţi imagini, efecte artistice inutile, doar ca să arataţi că ştiţi să le introduceri! '

De regulă, definiţiile se scriu italic, titlurile bold .

Capitolele încep pe pagină nouă .


Aplicaţii propuse 1. Creati un document Word nou si salvati-1, cu numele "Test.docx", într-un ' :r ' folder ales de dvs.

2. Numerotaţi paginile fişierului începând de la pagina 3. Numerele de pagină se vor găsi în partea de sus a paginilor, În centru.

3. Pentru documentul creat anterior scrieţi În antet numele dvs., iar în subsol inserati data curentă. '

4. Realizaţi notele de subsol de mai jos:

Word1 este un program care se găseşte î n pachetul Micro soft Off i c e 2.

Editor de texte 2 Produs co m plex realizat de firma Mi crosoft

5. Scrieri formulele următoare: '

. 2 2 1 Slll X + COS X = , \Ix E 91;

{x + l, f(x) = 31o& x , X S 10; altfel

Ck ck ck-1 n = n-1 + n-1 ' k s n,

n 2::>2 i=l

n(n + l)(n + 2) 6

6. Marcaţi un paragraf aşa cum este cel de mai jos (săgeata este la 1 cm de marginea stângă a paginii, iar textul este la 2 cm):

=> Un paragraf marcat.

7. Marcaţi un paragraf aşa cum cel de mai jos (săgeata este la 2 cm de marginea stângă a paginii, iar textul este la 3 cm):

� Un alt paragraf marcat.


8. Desenaţi graful de mai jos:

9. Cum putem scrie peste o imagine?

10. Atunci când se iniţiază în programarea calculatoarelor, începătorii folosesc scheme logice, prin care se descriu algoritmii. De exemplu, mai jos aveţi schema logică a algoritmului prin care se citesc 2 numere şi se afişează cel mai mare dintre ele:

Start

Nu Da

Stop

Puteţi desena această schemă logică În Word?

11. Cum trebuie procedat ca prima linie a fiecărui paragraf să înceapă la 1.5 cm faţă de celelalte, iar paragrafele să fie separate prin 6 pt2?

2 Unitate de măsură a distanţei dintre linii (puncte).


12. Cum facem să scriem un paragraf astfel încât între două linii să se lase ca spaţiu jumătate din spaţiul necesar scrierii unei linii?

13. Uneori, în cărţi sau reviste veţi Întâlni titluri aşa cum este cel de mai jos:

Folosind Word.Art, realizati un titlu asemănător! '

14. Uneori, când scrieri, de exemplu, un referat, puteti ataşa tot felul de imagini sugestive. În fapt, ima�ea se găseşte În Clip Art, d;r dvs. trebuie să-i adăugaţi anumite elemente care o personalizează (în exemplu, comentariul "Recursiv"). Puteţi crea această imagine?

Recursiv

15. Realizati un tabel ca următorul: '

Situatia la învătătură , ,

Nume elev Matematica

Ionescu Eugen 7 Pascu Marius 10 Dianu Ramona 10

16. Creaţi un şablon pentru a scrie o felicitare.

17. Cum se poate scrie o listă ca următoarea?

Produsul 1 Produsul 2 Produsul 3

1 60000 lei 8000 lei

1 5000 lei

Informatica

8 10 10

Engleza

10 6 10

CAPITOLUL 3 Crearea pag i n ilor web

3 . 1 . Primii paş.i spre construcţia unui site

Introducere

Înainte de a prezenta modul prin care putem crea un site web cu ajutorul limbajului HTML, considerăm că este necesară înţelegerea funcţionării reţelei Internet, formată din totalitatea calculatoarelor, oriunde aflate în lume, care comunică între ele. Spunem că două calculatoare comunică între ele dacă Între ele are loc un schimb de date. Convenim să numim host (în română, gazdă) un calculator care participă la acest schimb de date.

Reteaua Internet cantine calculatoare de mare viteză, care comunica ' ' prin fibră optică şi/ sau prin satelit şi au rolul de a transmite rapid informaţia, oriunde În lume. Anumite firme, numite ISP (Internet Service Provider, pe

" 'd '') di d 1 ul c . " " scurt prov1 er , spun e ca c atoare penormante, nurmte server -e, legate la unul dintre calculatoarele cu rol de transmitere a informaţiei.

Pentru a accesa Internet-ul de la un oarecare calculator, acesta trebuie să fie conectat la server-ul unui provider. Există mai multe variante de conectare, care diferă prin tehnologica folosită şi rata (viteza) de transfer ("Transfer Rate'') care este În continuă creştere.

În linii mari, putem considera că Internet-ul oferă următoarele servicii: world wide web (www) - putem crea şi vizita diverse pagini web; e-mail - serviciu de poştă electronică; chat - modalitate prin care doi sau mai mulţi utilizatori pot discuta în acelaşi timp; e-commerce (comerţ pe Internet), e-banking (management financiar, plăţi on-line), diverse tipuri de liste de discuţii (forum, newsgroup), etc.

Provider-ul oferă, contra cost sau din alte raţiuni, diverşilor clienţi posibilitatea cuplării propriilor PC-uri la server, adică accesul la Internet. Provider-ul oferă şi alte servicii, cum ar fi "webhosting"-ul (spaţiu pe hard pentru găzduirea paginilor web, conturi pentru e-mail, precum şi software specializat pentru manipularea acestora).


Pentru materiale suplimentare gratuite în format digital, accesaţi:

http:/ /lab.infobits.ro Laborator virtual de Informatică Biblioteca digitală de informatică "Tudor Sorin"

Sectiunea "lnformatie şi comunicare" ' ,

Online veţi găsi informaţii detaliate despre arhitectura reţelei Internet, principalele tipuri de conexiuni la Internet, protocoalele TCP /IP, FTP, HTTP, notiunile de URI, URL, DNS, browser-e web, motoare de căutare, ' poşta electronică, compresia fişierelor, transferul datelor şi multe altele.

Site-uri web

Dacă o persoană (sau societate comercială), care are acces la Internet, doreşte să aibă un site, va apela la serviciile unei firme specializate (numită "provider") . Provider-ul dispune (sau a închiriat la rândul lui) de unul sau mai multe calculatoare extrem de performante, cuplate la Internet prin linii care permit transferul rapid al datelor şi care rulează programe specializate, numite "server"-e şi pune la dispoziţie serviciul de găzduire web:

• spaţiu pe hard-disc-ul server-ului; • o adresă de Internet (de exemplu, www. adresa.ro1).

În spaţiul rezervat, persoana (firma) pune mai multe fişiere care conţin, de regulă, fişiere HTML (Hyper Text Markup Language), dar şi alte fişiere (gif, jpeg, doc) . Prin aceste fişiere se poate descrie activitatea firmei, se poate face comerţ electronic, se poate prezenta o anumită temă, etc.).

Pentru a putea vizita o pagină, este necesar un program specializat, numit generic "browser".Acesta trebuie să se găsească pe calculatorul celui care doreşte să viziteze pagina respectivă şi, În linii mari, are funcţiile:

• permite utilizatorului să introducă adresa URL a paginii respective şi transmite cererea către server, pentru ca acesta să-i fumizeze fişierul HTML care conţine codul respectivei pagini, dar şi fişierele care reţin imaginile din pagină (cu extensia jpeg, gif, etc).

• după ce primeşte codul HTML al paginii respective, interpretează comenzile pe care le conţine şi îl afişează.

1 Aveţi posibilitatea ca site-ul să aibă asociată o adresa URL oferită gratuit de provider sau să cumpăraţi o astfel de adresă.

Capitolul 3 - Crearea paginilor web 1 63

Evident, conţinutul site-ului poate fi accesat de pe once alt calculator conectat la Internet.

Terminologie. Calculatorul pe care se găseşte site-ul se numeşte, aşa cum am precizat, "server", iar calculatoarele care accesează conţinutul site-ului se numesc, În acest caz, "client". Un astfel de model de transmisie a datelor poartă denumirea de "client-server":

Cerere Răs puns

Client 3 Client 1

Client 2

Exemplu de model de tip client-server

Întrebările fireşti în acest moment sunt: ce software este necesar să existe pe calculatorul client şi ce software trebuie să existe pe server?

Software-ul necesar pentru calculatorul "client"

Orice calculator client trebuie să dispună de un browser, cu ajutorul căruia să se poată vizualiza fişierele HTML. Există mai multe programe de tip browser, cum ar fi: Internet Explorer, Firefox, Mozilla, Opera, Google Chrome, fiecare dintre acestea având mai multe versiuni. Din păcate, între acestea există anumite diferenţe atunci când afişează fişierele HTML. Evident, există multe puncte comune. Este recomandabil, ca atunci când scriem codul necesar unei pagini web, să utilizăm specificaţiile de HTML standard şi, mai ales, să testăm pagina utilizând cât mai multe tipuri de browser-e.


Pentru a gestiona un site web, aflat evident pe server, utilizatorul are nevoie de un program FTP prin care să poată efectua mai multe operaţii asupra spaţiului rezervat pe server: transfer sau ştergere de fişiere şi creare, modificare sau ştergere de folder-e.

Să presupunem că am obţinut un anumit spaţiu pe un server, avem o adresă URL pentru site şi acum vrem să-l construim şi să-l putem întreţine. Problema care se pune în continuare este transferul fişierelor de pe calculatorul personal (client) către server şi invers. În această carte vom utiliza un program care lucrează sub protocolul FTP ş1 anume ''WS_FTP95". Acest program poate fi descărcat de pe pagina web

"www.uottawa.ca/ help/ ws _ftpe. html",

iar dacă această adresă nu mai este actuală, identificaţi o nouă locaţie de unde poate fi download-at (cu Google, textul "ws_ftp95 download").

� Modalitatea de instalare şi utilizare a acestui program FTP este detaliată pe site-ul www.infobits.ro, secţiunea Programare web.

Software-ul necesar pentru calculatorul "server''

În primul rând, pe server trebuie să se găsească un program care răspunde cererilor browser-ului aflat, aşa cum s-a spus, pe calculatorul client. Un astfel de program se numeşte program de tip server.

Atunci când, de exemplu, dorim să vizualizăm o anumită pagină, tastăm adresa URL în edit-ul browser-ului şi apăsăm tasta Enter sau efectuăm clic pe butonul GO. Browser-ul emite o cerere către server pentru ca acesta să-i trimită fişierul respectv. Evident, dacă este posibil, server-ul va furniza browser-ului fişierul solicitat. Cererea efectuată de browser şi răspunsul server-ului se fac prin respectarea unui anumit protocol. Acest protocol se numeşte HTTP (Hyper Text Transfer Protocol) . Prin urmare, un program de tip server răspunde cererilor care se conformează protocolului HTTP.

Există mai multe programe de tip server, cel mai popular fiind Apache, care lucrează pe server-e cu sistemul de operare Linux, dar şi pentru cele cu sistemul de operare Windows. El este dezvoltat de Apache Software Foundation şi este de tip "open source"1• Un alt program de tip server este Microsoft IIS (Microsoft Internet Information Services), destinat sistemelor de operare de tip Windows.

1 Termenul descrie accesul gratuit la codul sursă al unui produs software, care este disponibil spre a fi copiat, modificat şi personalizat de către oricine, fără a fi impuse drepturi intelectuale

restrictive asupra programului.


Facultativ, pe server se găsesc programele PHP şi MySQL. Bineînţeles, închirierea unui spaţiu pe un server care deţine aceste programe este mai scumpă. PHP-ul permite ca paginile web sa fie personalizate, iar cu ajutorul MySQL-ului se pot crea baze de date pe Internet. De asemenea, cu ajutorul PHP-ului se pot da comenzi MySQL-ului pentru crearea şi actualizarea bazelor de date.

Observaţie. Puteţi să obţineţi gratuit spaţiu pe server şi adresa URL pentru site-ul dvs., pentru că există firme care oferă aceasta utilizatorilor. Căutaţi cu Google! Din păcate, este puţin probabil să găsiţi gratuit un server care are PHP şi MySQL. Oricum, chiar şi în aceste condiţii, se pot crea site-uri reuşite utilizând doar limbajul HTML. Dacă doriţi un site care să conţină PHP şi MySQL, atunci trebuie să plătiţi acest serviciu suplimentar.

� Modalitatea de instalare a programelor Apache, PHP şi MySQL este detaliată pe site-ul www.infobits.ro, secţiunea Programare web.

Cum scriem un fişier HTM L?

Presupunem că avem un site web şi putem să transferăm fişiere de la calculatorul nostru către el şi invers. Ştim că, pentru a scrie o pagină web, trebuie să cunoaştem limbajul HTML (HyperText Markup Language). Acesta este prezentat detaliat în acest capitoL

Întrebarea la care răspundem în acest moment este următoarea: cum se scrie codul HTML?

=> Browser-ul poate afişa un fişier HTML aflat pe calculatorul nostru. Un astfel de fişier are una dintre extensiile: .htm sau .html. Puteţi căuta cu Find un astfel de fişier şi executaţi dublu clic pe icon-ul său. Imediat va fi apelat browser-ul implicit, iar acesta va afişa fişierul.

Să vedem modul în care vom scrie astfel de fişiere:

a) Vizualizăm cu (My) Computer folder-ul unde dorim sa se găsească fişierul care va reţine pagina web.

b) Apelăm la meniul flotant (clic cu butonul drept al mouse-ului) şi alegem New şi Text Document. Windows va crea un fişier fără conţinut, cu extensia . txt.


c) Modificăm numele şi extensia fişierului. La fel, atunci când cursorul grafic se găseşte deasupra icon-ului său, apăsăm butonul drept al mouse-ului şi alegem Rename. Vom scrie un nume dorit de noi, iar extensia va fi .html. Fie numele său "Primul.html". Întrucât extensia .html este asociată browser-ului (Internet Explorer 9, la noi), fişierul va avea de această dată icon-ul browser-ului:

d) Executarea unui dublu clic asupra icon-ului are ca efect lansarea browser-ului care va afişa fişierul. Evident, în această fază, conţinutul său este vid (clic dreapta şi din meniul flotant apelaţi View source) :

ID fi le:///C:/lnvatam%20HTMILJ P rimul. html - Original Source

În cazul versiunii 9 a browser-ului Internet Explorer, codul sursă poate fi doar vizualizat prin această comandă, nefiind permisă modificarea sa.

e) Pentru a edita acest fişier, se selectează pictograma sa din folder-un în care se găseşte, iar cu clic dreapta se apelează la meniul flotant şi se alege comanda Open with --7 Notepad:

Sean Primul.html

Open With Firefox

� y;;;; Internet Exp lorer

..J Notepad


f) Se va deschide programul Notepad şi scneţi un text la alegerea dvs. Exemplu: "Acesta este primul text". Salvaţi-l!

g) În fereastra browser-ului apăsaţi butonul Refresh (rapid, tasta F5) . Prin această operaţie am comandat reîncărcarea fişierului, Întrucât i-am schimbat conţinutul. Textul va fi afişat de browser:

Acesta este primul text

Observatii '

./ Procedând astfel, putem scne uşor cod HTML. Din când în când, vizualizăm efectul modificărilor şi identificăm eventualele erori.

,/ După cum vă puteţi da seama, operaţia de scriere a codului nu presupune accesul la Internet!

Comentari i în documentul HTM L

Un document HTML poate conţine comentarii. Un comentariu arată ca mai jos şi poate fi aşezat oriunde în document. Evident, comentariile nu sunt afişate de către browser.

Exemple de comentarii:

< ! -- Un comentariu -->

< ! -- Un comentariu pe mai multe linii -->

,/ În cazul unor pagini complexe, cu multe elemente, comentariile sunt extrem de utile pentru realizatorul site-ului. Indicând printr-un comentariu o anumită porţiune din fişier, el va şti mult mai uşor locaţia codului respectiv pentru a efectua modificarea.


Editoare I val idatoare HTM L

Am văzut cum se scrie, în mod clasic, codul HTML. Dacă dorim, în scrierea codului se pot utiliza diverse editoare specializate (de validare) HTML.

Care este rostul lor?

• Editoarele HTML lucrează la fel de uşor ca Notepad-ul. Ele scriu direct fişiere cu una din extensiile . htm sau . html.

• Apăsarea unui buton are ca efect lansarea browser-ului care afişează fişierul (procedând astfel, lucrăm mai eficient) .

• Putem valida fişierele HTML (adică verificăm corectitudinea din punct de vedere sintactic - la identificarea unei erori, ne este indicată locaţia sa) .

De ce este utilă operaţia de validare a fişierelor HTML?

Trebuie urmărit modul în care procedează browser-ul atunci când codul HTML nu este corect. Browser-ul va afişa ceea ce "distinge" din cod şi nu va semnala întotdeauna eroarea. Uneori, o eroare poate trece neobservată deoarece browser-ul de care dispunem trece peste ea. Dar, cum nu există un singur program de tip browser, un alt tip ar putea afişa informaţia incorect.

,/ Un exemplu de astfel de program gratuit este CSE HTML Validator Lite, care poate fi descărcat de pe pagina:

"www. htmlvalidator. corn/ li te".

,/ Nimeni nu vă opreşte să căutaţi şi alte editoare HTML. Folosiţi motorul de căutare Google! Exemple: Notepad++, SciTE, GNU Emacs, etc.

Web Content Management Systems (WCMS)

Aplicaţiile web devin din ce în ce mai complexe, de la o zi la alta, fiind tot mai greu să implementezi un site "de la zero", cu ajutorul anumitor limbaje de progamare, cum ar fi HTML şi PHP. Astfel, pentru a se uşura munca programatorilor au fost dezvoltate sisteme de management a conţinutului (în engleză, Content Management Systems - CMS) pentru web (WCMS), ce oferă o serie de unelte care facilitează dezvoltarea aplicaţiilor pe Internet.


Un sistem WCMS controlează automat totalitatea materialelor aflate pe server (fişiere html, imagini, baza de date, filme, animaţii, etc.), într-un mod dinamic şi cât mai simplu. Astfel, fără a cunoaşte programarea web, orice persoană poate administra şi modifica conţinutul site-ului prin simple comenzi oferite de sistemul WCMS. Mentionăm cele mai importante facilitări: ' '

•

•

•

•

•

panou de administrare - o serie de pagini web cu ajutorul cărora se poate gestiona Întregul site web; şabloane automate - dintr-o pagină de administrare a site-ului se poate alege unul dintre şabloanele predefinite ale aplicaţiei, permiţând astfel ca întregul conţinut să fie modificat ca aranjare în pagină rapid, dintr-un singur loc; controlul accesului la materialele online este gestionat pe grupuri, care au diverse restricţii, în funcţie de categorie; editare facilă a conţinutului prin unelte de tip WYSIWYG1; utilizarea diverselor extensii (forum, wiki, blog, galerie foto, etc.) care sunt numite module, widgets, add-ons, etc. - se pot introduce şi gestiona uşor din panoul de administrare al site-ului;

Exemple de sisteme WCMS gratuite: Drupal, Joomla şi Wordpress. Căutaţi paginile oficiale pe Internet, cu ajutorul unui motor de căutare!

,/ Instalarea pe server a unei aplicaţii WCMS necesită respectarea strictă a instrucţiunilor care sunt oferite gratuit odată cu pachetul descărcat. Totuşi, compania care vă găzduieşte site-ul poate oferi la rândul ei un CMS de administrare (de exemplu, cPane� ce permite instalarea facilă a unui sistem WCMS.

1 What You See Is What You Get (WYSIWYG) este denumirea dată uneltelor de editare a

conţinutului care este afişat în formă finală exact cum este editat:

B I !! � I :::::: :::::: :::::: I Format • Font family • Font size

X � � /:. • � • I E î:=: I �� " I � � I � �.� l!i � ;:J HTmL

v. I !!:! � I 3"' 3"" � I 2m m11 if' I El I x' I n © � B - a QJ

Cata log ul on -line a l editurii l&S I NFOMAT poate fi vizua li zat la adr-es.a \!'t\!'1w. m a nua le-de-i nformatica . ro .

Pagini web ale autor"ilor

Prof. Doru Popescu Anastasiu - ww\r1.dopopan.ro Prof. Carmen Po pescu - www.oe-info.ro

Secţiunea Legături utile de pe site-ul www.ls-infOmat.ro în pagina de administrare a paginii, conţinutul fiind editat cu ajutorul unei unelte de tip WYSIWYG.


3 . 2 . Limbajul HTM L - primele noţiuni

În cele ce urmează vom învăţa să creăm pagini web utilizând limbajul HTML (Hyper Text Markup Language) . Editarea fişierelor cu extensia html va fi realizată cu ajutorul editorului de text Notepad.

Structura de bază a unui document HTM L

Mai jos, puteţi observa o pagină aşa cum este scrisă în Notepad şi aşa cum este afişată de browser-ul Internet Explorer 9:

... .I :JI Structura .htm l - Notepad l'= I @) I m I

.Ei le _Edit FQrmat �iew .tielp

<html > 6 <he ad> f<t i t. l e>Exempl u l 1</t. i t. l e> </he ad> <body> Acest.a est.e pr i mu l exempl u de pagi na. </bodb: </ht.rn >

,...

� I m I �

-�

x Go gle i .... 1 � Căutaţi T · I Acesta este primu] exemplu de pagina.

Din analiza exemplului de mai sus, observăm că o pagină începe cu tag1-ul <html> şi se termină cu tag-ul </html>.

1 Termenul tag provine din limba engleză şi semnifică "etichetă". În acest manual vom folosi

ambii termeni: element s1 tag.


Pagina conţine un antet (head) şi coipul propriu-zis (body):

•

• antetul este cuprins între etichetele <head> şi </head>; coipul este conţinut între etichetele <body> şi </body> .

./ Opţional, antetul poate conţine titlul paginii cuprins Între tag-urile <title> şi </title>. Titlul apare pe bara de titlu a ferestrei afişată de Internet Explorer (pentru noi, acesta este "Exemplul 1") .

./ Conform noilor standarde HTML, toate etichetele se scriu cu litere mici!

Introducerea textelor

În exemplul anterior, textul era alcătuit dintr-un singur paragraf, dar, în general, textele conţinute de o pagină se pot găsi În mai multe paragrafe.

Exemplu: mai jos, putem observa o pagină care conţine mai multe paragrafe:

file ,Edit FQrmat :\liew .t!elp

<html > <he ad> <ti tl e>Par agr afe</t i t l e> </he ad> <body> <p>Acesta este pr i mul par agr af . un par agr af poate conti ne text.ul pe mai mul t.e r andur i . </p> <p>Observam al doi l ea par agr af . </p� <p>Iata si al t r ei l ea par ag r af . . . </p> </body> </ht ml >

Aşadar, elementul <p> are rolul de a permite introducerea unui paragraf. Pentru a-l folosi, utilizăm tag-urile:

, - IID c�\Invatam HTML\ p .

<p atribute> conţinut </p>

Atunci când sunt afişate, paragrafele sunt despărţite printr-o linie vidă.

Deşi nerecomandat, eticheta </p> poate sa lipsească. Un nou paragraf poate fi depistat printr-o nouă etichetă <p>.

X Go gle i · I � Căutaţi T

... Acesta este primul paragraf Un

paragraf poate contine textul pe

mai multe randmi

Observam al doilea paragraf

lata si al treilea paragraf ...

....


./ În Notepad, Word.Fad sau Word, paragrafele se separă prin tastarea unui Enter. În schimb, în HTML Enter-ul nu are nici un efect. Vederi ' în exemplul anterior, al doilea paragraf (aşa cum a fost tastat în Notepad) . El conţine un Enter (de fapt, în Notepad, sunt două paragrafe) . Acesta a fost ignorat de Internet Explorer .

./ Fără o altă comandă, un rând al unui paragraf are lăţimea ferestrei afişată de browser. De exemplu, dacă micşorăm fereastra browser-ului, acelaşi paragraf va ocupa mai multe rânduri .

./ Dacă două cuvinte ale unui paragraf sunt separate prin mai multe spaţii, browser-ul afişează doar un singur spaţiu.

Atributul align Paragrafele se aliniază implicit la stânga şi se redimensionează În funcţie de mărimea ferestrei. Atributul align controlează alinierea acestuia şi poate lua una dintre valorile:

•

•

•

•

center - paragraful este aliniat în centru; left - paragraful este aliniat la stânga; right - paragraful este aliniat la dreapta; justify - paragraful este aliniat la ambele margini .

Exemplu: mai jos, puteţi observa modul În care am aliniat mai multe paragrafe, precum şi efectul alinierii, adică felul în care le afişează browser-ul:

file !;dit F.Qrmat Y'.iew !:ielp

<html > <he ad> <t: i t: 1 e>A1 i ni er ea par agr af e</t: i t: 1 e> </he ad> <body> <p al i gn="cent:er " >C e nt:r at: ' </p> <p al i gn="r i ght: " >La dr eapt:a ! </p> <p al i gn=" l eft: ">La st:an ga ! </p> <p al i gn=" j u st:i fy " >Par agr af u l est:e �l i ni at: l a ambel e margi ni ! </p> </body> </ ht: ml >

• I III

Elementul

Centrat! La dreapta!

La stanga! Paragraful este aliniat la ambele margini!

Câteodată, avem nevoie să prevenim trecerea unui cuvânt pe linia următoare. Folosim elementul pentru a evita acest lucru, prin scrierea sa înaintea cuvântului de interes. În cazul în care nu încape pe linie, se coboară şi cuvântul precedent pe linia următoare.


Exemplu: testaţi forma de mai jos:

<p>Acest paragraf a fost afisat de Internet&nbsp ;Explorer . </p>

În figura de mai jos se observă faptul că browser-ul a fost forţat să treacă cuvântul "Internet" pe rândul următor:

Acest paragraf a fost afisat de

Internet Explorer .

./ Observaţi faptul că elementul introduce un spaţiu. Cu ajutorul său puteţi introduce mai multe spaţii succesive între două cuvinte! Testaţi următorul cod HTML:

<p>Invat&nbsp ; &nbsp ; &nbsp ; HTML</p>

Alte elemente care permit formatarea textului

Elementul <br> are ca efect forţarea afişării a ceea ce urmează pe rândul următor. Pentru a-l utiliza, se foloseşte un singur tag: <br>.

Exemplu: paragraful următor este afişat pe două rânduri: Mama merge

la piata <p>Mama merge <br>la piata</p>

1 1� My Computer � Tag-ul <br> nu creează un alt paragraf. �

Nu uitaţi, între două paragrafe se lasă o linie vidă. În cazul etichetei <br>, rândul următor nu este separat de rândul curent prin linie vidă.

Elementul <b> are rolul de a determina browser-ul să afişeze îngroşat (bold) textul cuprins între cele două tag-uri ale sale: <b> şi </b>.

Exemplu: cuvintele "trebuie" şi "ai" sunt afişate îngroşat:

<p> Ceea ce-ti <b>trebuie</b> vei gasi in ceea ce <b>ai</b> ! </p>

Ceea ce-ti trebuie vei gasi in ceea ce ai!

Iii Dane 11 n1 11� My Computer


Elementul <i> are rolul de a determina browser-ul să afişeze Înclinat (italic) textul cuprins între cele două tag-uri ale sale: <i> şi </i>.

Exemplu: cuvintele "trebuie" şi "ai" sunt afişate Înclinat:

<p> Ceea ce-ti <i>trebuie</i> vei gasi in ceea ce <i>ai</i> ! </p>

Ceea ce-ti trebuie vei gasi in ceea ce ai !

Done n n L � My Computer

Elementul <u> are rolul de a determina browser-ul să afişeze subliniat textul cuprins între cele două tag-uri ale sale: <u> şi </u>.

Exemplu: cuvintele "trebuie" şi "ai" sunt afişate subliniat:

<p> Ceea ce-ti <u>trebuie</u> vei gasi in ceea ce <u>ai</u> ! </p>

Ceea ce-ti trebuie vei gasi in ceea ce �!

Do ne n n r- 1� My Computer

•

Elementul <s> are rolul de a determina browser-ul sa afişeze tăiat textul cuprins între cele două tag-uri ale sale: <s> şi </ s>.

Exemplu: cuvintele "trebuie" şi "ai" sunt afişate tăiat:

<p> Ceea ce-ti <s>trebuie</s> vei gasi in ceea ce <s>ai</s> ! </p>

Ceea ce-ti trebuie vei gasi in ceea ce ai l

Done L l. L � My Computer

•

Elementul <tt> are rolul de a comanda browser-ului ca textul cuprins între tag-urile <tt> şi </ tt> să fie scris monospaţiat (adică toate caracterele ocupă aceeaşi lungime de spaţiu, precum font-ul "Courier New").

Exercitiu: textul "elementul TT" este scris monospatiat - testati! ' ' '

<p>un paragraf care foloseste <tt>elementul tt</tt> ! </p>


Elementul <sup> are rolul de a comanda browser-ului ca textul cuprins între tag-urile <sup> şi </ sup> să fie scris mai sus (ca o putere, exponent) .

Exemplu: textul "x*ln(x)" este scris ca o putere:

<p> 3<sup>x*ln (x) </sup> </p> le My computer

Elementul <sub> are rolul de a comanda browser-ului ca textul cuprins între tag-urile <sub> şi </ sub> să fie scris mai jos (ca un indice) .

Exemplu: textul "i,j" este scris ca un indice:

<p> a<sub>i , j</ sub> </p>

Elementele <hl>, <h2>, „ ., <h6>

a . . 1,J

I� My Computer

Pentru scrierea titlurilor se utilizează elementele <hl>, <h2>, . . . , <h6>. Fiecare titlu este scris între tag-urile:

<hl> </hl>, <h2> </h2>, ... , <h6> </h6>.

Mărimea diferă: pentru <hl> titlul este scris utilizând font-ul de dimensiune maximă, iar pentru <h6> dimensiunea este minimă.

Exemplul mai jos, observaţi cum este scris un titlu:

<hl>Despre lenesi . . . </hl> <p> Lenesul gaseste in orice sarbatoare un prilej sa nu munceasca </p>

Atentie! '

Despre lenesi . . . Lene sul gaseste in orice sarbatoare un prilej sa nu munceasca !

D n n t I� My Computer

../ Titlurile trebuie să fie folosite în ordine ierarhică .

../ În general, un document HTML trebuie să aibă exact un element <hl>, pentru a indica titlul principal al paginii .

../ Motoarele de căutare pot utiliza informaţiile din aceste titluri, deci ele trebuie să sintetizeze cât mai bine continutul textului. '


Elementul <font> permite stabilirea font-ului pentru afişarea documentului. Textul este inclus între tag-urile <font atribute> şi </font>.

Atributele sunt următoarele:

• face - indică font-ul - se pot specifica font-uri alternative, separate cu virgulă. Browser-ul va utiliza primul font din listă, instalat pe calculatorul utilizatorului. Dacă nu este găsit nici unul, browser-ul va folosi font-ul implict (default) .

•

• size - indică mărimea (între 1 şi 7). Implicit, are valoarea 3 . color - indică culoarea .

Exemnlu: analizati următoarea secventă de cod HTML: T ' '

<font face="Verdana , Calibri , Arial " size=" l " Mari mea l . </font><br>

<font face="Verdana , Calibri , Arial " size=" 2 " > Marimea 2 . </font><br>

<font face="Verdana , Calibri , Arial " size=" 3 " > Mari mea 3 . </font><br>


<font face="Verdana , Calibri , Arial " size=" S " > Mari mea 5 . </font><br>


<font face="Verdana , Calibri , Arial " size=" 7 " > Mari mea 7 . </font>

color="red">

Atenţie! Este posibil ca pe calculatorul la care persoana accesează pagina respectivă să nu existe font-ul respectiv. Folosiri mai multe font-uri alternative,

(� ' __ • I� C:\Invatam HTML\ P ... C X I�

' aşa cum am precizat mai sus.

,/ Pentru început, puteţi specifica culoarea prin numele acesteia, de exemplu: color=" red" sau direct în sistem RGB:

color = rgb (255 , 0 , 0 )

X Go gle i ...

Mari m ea 1. Marimea 2 . Marimea 3 . M a ri mea 4 . Mari mea 5 . M a ri mea 6 . M a ri m ea 7 .


Elementul < pre>

Elementul <pre> este utilizat În cazul în care vrem să includem un text, exact aşa cum îl scriem, în sursa HTML. Spre deosebire de alte elemente, textul cuprins Între <pre> şi </pre> va fi afişat cu toate liniile şi spaţiile introduse În fişier.

Textul în interiorul lui <pre> va fi afişat cu un font monospaţial şi nu se pot seta În interiorul său proprietăţi referitoare la font:

Exemplu:

<html> <body> <pre width="80"> Acest paragraf

a fost afisat de Internet Explorer .

</pre> </body> </html>

Ace s t paragraf a fost af i sat de

Int e rne t E xpl o r e r .

Atributul opţional width = "n" poate fi folosit pentru a indica lăţimea textului. Din păcate, acest atribut nu este general acceptat de browser-e.

Atentie! '

./ Elementele la nivel de text ( <b>, <i>, etc.) se pot folosi În interiorul etichetei <pre>, dar nu absolut toate sunt suportate. Verificaţi!

./ Deoarece elementul <pre> permite folosirea tag-urilor în interiorul său, trebuie avută o mare atentie la introducerea textului. Trebuie convertite ' toate caracterele speciale, de tipul &, < sau > În entităţi. (a se vedea subcapitolul 3.10)

Elementele < nobr> şi <wbr>

Aceste două elemente sunt foarte importante în manipularea textului şi sunt asemănătoare lui <br>.

Elementul <nobr> - textul cuprins între <nobr> şi </ nobr> are dezactivat modul automat de trecere pe linia următoare, chiar dacă textul are lăţimea mai mare decât cea a ferestrei (în acest caz, apare o bară de scroll orizontală) .


Exemplu:

<html> <body> <pre> <nobr> Acest paragraf

a fost afisat de Internet Explorer .

</nobr> </pre> </body> </html>

Ac e s t t e x t p r e f o rmat; a f o s t af i s at de

Interne t E x p l o : �

Elementul <wbr> pennite browser-ului să insereze o linie nouă, exact de la poziţia sa, <wbr>, chiar dacă se află în interiorul lui <nobr>.

Exemplu:

<html> <body> <p> <nobr> Acest text preformatat <wbr>a fost afisat de Internet Explorer . </nobr> </p> </body> </html>

3.3. Introducerea listelor

Ace st text preformatat a fost afisat de Internet Expl<

În HTML, există posibilitatea ca anumite enunţuri să fie numerotate sau marcate într-un anumit fel. O astfel de organizare poartă denumirea de listă.

Astfel, în HTML se pot descrie trei tipuri de liste:

•:• liste ordonate, în care elementele sunt numerotate;

•:• liste neordonate, în care elementele sunt marcate de aşa natură Încât nu se sugerează o anumită ordine a lor;

•:• liste de tip defini/ie.


În continuare, puteţi observa un exemplu pentru fiecare tip de listă:

1 . Bloc • Bloc Bloc 2. Vila • Vila Multe etaje, zeci de famil i i 3. Casa • Casa Vila

\ \ Unu sau doua etaje, cel mult 5 famil i i

Casa 'N-are etaje, o familie

Listă ordonată Listă neordonată Listă de tip dejimfie

Pentru a forma astfel de liste, avem nevoie de câteva elemente HTML care vor fi detaliate în cele ce urmează.

Elementul <ol> (ordered lists) creează o listă ordonată. Elementele listei sunt trecu te între tag-urile <ol> şi </ol>.

Elementul <li> (list item) descrie un element al listei. Tag-ul obligatoriu este cel de Început <li>, cel de sfârşit fiind facultativ: </li>.

Exemplu: priviţi lista ordonată de mai jos:

<p>Cine nu . . . nu castiga ! </p> <ol>

<li> pierde <li> risca <li> ajunge

</ol>

Cine nu . . . nu castiga!

1 . pierde 2. nsca

3. ajunge

1 iCE!f My Computer L. Elementul <ol> are atributul "type". Valorile L E i ..a pe care le poate lua acest atribut, precum şi modul în care arată lista, se pot observa în continuare:

a. pierde I. pierde 1 . pierde

b. ns ca 11. ns ca 2. nsca

c. ajunge 111. ajunge 3 . ajunge

<ol tyle= " a " > <ol tyle=" i " > <ol tyle=" l " >

A pierde I. pierde

B. ns ca II. ns ca

C. ajunge III. ajunge

<ol tyle="A" > <ol tyle=" I " >


Elementul <ul> (unordered lists) descrie o listă neordonată. Elementele listei sunt cuprinse între tag-urile <ul> şi </ul>.

Exemplu: priviţi lista neordonată de mai jos:

<p>Periferice esentiale : </p> <ul>

<li> monitor <li> tastatura <li> mouse

</ul>

Elementul UL are atributul type. Valorile pe care le poate lua acest atribut, precum şi modul în care arată lista se observă În continuare:

o monitor • morutor

o tastatura • tastatura

o mouse • mouse

Periferice esentiale:

• monitor

• tastatura

• mouse

1 1� My Computer

• monitor

• tastatura

• mouse

<ul type=" circle" > <ul type=" square"> <ul type="disc ">

Observatii! '

./ Desigur, putem construi liste imbricate, aşa cum se poate observa cu uşurinţă din exemplul următor:

Exemplu: analizaţi lista de mai jos:

<p><u>Echipa castigatoare : </u></p> <ul type=" square">

<li>Jucatori : <ol type=" l " >

<li> George <li> Lavinia <li> Mihai

</ol> <li>Rezerve : <ol type=" l " >

<li> Cristian <li> Flavius

</ol> </ul>

Echipa castigatoare:

• Jucatori:

1 . George

Lavlnia

lv.fihai

2. 3 .

• Rezerve:

1 . Cristian

2. Flavius

./ Pentru a lăsa un rând liber, putem marca un paragraf prin <p> şi </p> sau . . . numai prin <p>.


Elementul <dl> (definition lists) are rolul de a descrie o listă de definiţii, delimitată de tag-urile <dl> şi </dl>.

Elementul <dt> (definition term) defineşte termenul din listă care trebuie descris. Se utilizează tag-ul <dt>.

Elementul <dd> (definition description) are rolul de a reţine descrierea termenului. Se utilizează tag-ul <dd>.

Exemplu: priviţi lista de definiţii de mai jos:

<dl> <dt>to elapse <dd>a trece , a se scurge <dt>I ' ve never seen <dd> n-am (mai) vazut (niciodata)

</dl>

L to elapse

a trece, a se scurge

I've never se en

n-am (mai) vazut (niciodata)

3.4. Introducerea imaginilor

Ce farmec are o pagină dacă nu conţine una sau mai multe imagini?

Elementul <img> se utilizează pentru a ataşa unei pagini o imagine. Forma generală a acestui element este:

<IMG a tribute>

Atributele lui sunt:

• src identifică fişierul care conţine imaginea respectivă (poate fi de tipul: jpg, gif, etc.) .

Observaţie ! În această etapă învăţăm să creăm paginile pe propriul calculator, fără a fi conectaţi la Internet. Prin urmare, fişierul care conţine imaginea se va găsi într-un folder oarecare (în exemplul următor, el se găseşte în acelaşi folder în care găsim şi fişierul cu extensia .html - cel care conţine pagina) . Din acest motiv, sursa nu conţine şi calea, dar, dacă este cazul, calea poate fi introdusă.

1 82

•


alt="nume" - există posibilitatea ca irriaginea să nu se poată încărca . Pentru astfel de situatii este folosit parametrul alt, unde nume con tine un ' ' text (alternativ) care va fi afişat În locul irriaginii.

Exemplu: fie tag-ul <img> următor:

<img src=" C : /Eric . jpg" , alt=" Eric" >

Dacă irriaginea este găsită, se face afişarea ca în figura din dreapta, altfel se afişează ce se vede mai jos:

• align - alinierea, reţine una dintre valorile de mai JOS şi specifică browser-ului modul în care va alinia irriaginea În raport cu textul:

right, left, top, middle, bottom

Exerciţiu: testaţi aceste valori ale atributului align cu ajutorul codului HTML de mai jos (aveţi nevoie de o irriagine - "poza_dvs.jpg"):

<p>Un paragraf asezat inaintea imaginii</p> <p> <img src="poza_ dvs . jpg'' align="right"> Acum scriu un text asa . . . ca sa fie ! Importanta este Alinierea , nu-i asa? </p> <p>Observati cum se aliniaza al doilea paragraf ! </p>

Un paragraf asezat inaintea imaginii

Acum scriu un text asa .. ca safie� Importanta este alinierea, nu-i asa?

Observati cum se aliniaza al doilea paragraf!

• height="numar pixel.i" - specifică înălţimea irriaginii.

• width="numar pixeli" - specifică lăţimea irriaginii.


Observatie. În cazul în care înăltimea şi lătimea nu coincid cu cele ale imaginii, ' ' ' " aceasta din urmă este deformată, pentru a ajunge la dimensiunile dorite. In absenţa acestor parametri, imaginea este afişată la dimensiunile pe care le are.

•

•

•

Evident, o imagine mărită se vede mai puţin clar.

border ="nr_pixeli" - opţional, imaginea poate fi înconjurată de un chenar:

<irng src=" C . jpg" > <irng src=" C . jpg" border="5">

hspace="nr_pixeli" - determină distanţa minimă care separă imaginea de celelalte obiecte pe orizontală.

vspace="nr_pixeli" - determină distanţa minimă care separă imaginea de celelalte obiecte pe verticală.

Exemplu: în imaginile de mai jos, puteţi observa efectul distanţei pe orizontală:

Este interesant nu?

<IMG src=" cainil . jpg" align=" left ">

Este interesant nu?

<IMG src=" cainil . jpg" align=" left" hspace= " 2 0 " >

În continuare vor fi prezentate modalităţile de introducere şi formatare a tabelelor, extrem de utzle în cazul arat!f ării în pagină a documentului HTML


3.5. Tabele

În cadrul unei pagini web se pot introduce şi tabele, extrem de utile pentru evidenţierea unor date sau, pur şi simplu, pentru a delimita spaţiul paginii. Desigur, tabelul rezultat poate fi privit în mod clasic, cu linii şi coloane, aşa cum suntem obişnuiţi, dar poate fi folosit şi în alte scopuri, cum ar fi: aliniarea imaginilor (elemente de tip <img> în raport cu textul) sau scrierea În coloane. Din acest motiv, În sens larg, prin tabel vom înţelege o grupare în linii şi coloane a mai multor elemente HTML.

Elementul <table> descrie un tabel, utilizând etichetele <table> şi </table>.

Elementul <TR> descrie o linie a tabelului, care începe cu <tr> şi se termină atunci când este întâlnit un nou <tr>. Opţional, se poate folosi şi tag-ul </ tr> pentru a închide linia curentă.

Elemenul <td> descrie o celulă a tabelului. Se utilizează tag-urile <td> ş1, opţional, </td>.

Exemplu: mai jos, puteţi observa un prim tabel, cu două linii, aşa cum este descris şi aşa cum apare afişat:

<table border=" 5 " > <tr>

<td>Un text</td> <td>Un text cu mult mai lung ! </td>

</tr> <tr>

<td>Text</td> <td>Text</td>

</tr> </table>

lu n text lu n text cu mult mai lung!

!Text !Text

În continuare, prezentăm câteva atribute ale elementului <table>.

I

:::::;. border defineşte grosimea liniilor (în pixeli) care înconjoară tabelul. Pe pagina următoare puteţi observa cum arată acelaşi tabel, în care atributul border lipseşte. Simpla trecere a acestui atribut, fără a preciza numărul de pixeli, are ca efect crearea unui chenar standard.


Iată tabelul, fără atributu! border!

Un text Un text cu mult mai lung! Text Text

Observatii ! '

În absenta altor formatări, toate celulele unei ' coloane au lăţimea impusă de cel mai lung continut al uneia dintre ele! '

În situatia în care reducem dimensiunile ferestrei ' browser-ului, textul va fi dispus modificat, pentru ca tabelul să încapă În totalitate. Dincolo de această limită, fereastra nu mai poate fi micşorată.

Eftau! redimensionării ferestrei browser-ului

Un text Un cu text mult mai

lung!

[Te;rt fTuxt

1 85

� În cazul În care o linie conţine mai multe celule decât restul liniilor, automat toate liniile vor avea acelaşi număr maxim de celule:


<td>O noua celula</td> <td>Un text</td> <td>Un text cu mult mai lung ! </td>

</tr> <tr>

<td>Text</td> <td>Text</td>

</tr> </table>

Un tabel poate conţine şi una sau mai multe imagini, aşa cum se vede alăturat, unde imaginea este continută de o celulă a tabelului. '

O noua

celula

-ITe-xt-[fixt '

Un text _cu mult mai lung!

Un text cu mult mai lung!


Codul sursă HTML pentru exemplul anterior este:


<td><img src="bpl . jpg" X/td> <td>Un text cu mult mai lung ! </td>

</tr> <tr>

<td>Text</td> <td>Txt</td>

</tr> </table>

=> cellspacing determină spaţiul, în pixeli, dintre celule.

Exemplu: în figura alăturată este prezentat un tabel cu cellspacing=" 10" . [f ext I [ţJn text!

l [fxt

=> cellpadding determină, În pixeli, spaţiul lăsat În fiecare celulă a tabelului între text (imagine) şi marginile celulei.

Exemplu: acelaşi tabel, din exemplul anterior, I cu cellpadding = " 15" . � IT cext I LUn text!

Atenţie! Pentru ultimele două atribute, se poate alege o valoare procentuală, astfel încât marginile să aibă dimensiunea procentual, în raport cu dimensiunea disponibilă totală �ăţime şi înălţime).

::::> rules defineşte modul în care vor fi trasate liniile care separă celulele tabelului. Poate lua valorile:

Text Un text! I TextTxt

none

[Text Un text!1 JTextTxt

rows

�� tr ext l!xt _J

cols all


=> frame defineşte părţile care vor fi trasate din chenarul care înconjoară tabelul. Atributul poate lua valorile:

Text'[Un text! Text Iun text! Textl� Text \Txt

above below

[TextjUn text! I \'!ext tun text! \Textl\Txt I \Textl\Txt

vsides lhs

Iată şi câteva atribute ale elementului <td>:

TextllQ!i text! Textl@

hsides

Text tun text! I Textl \Txt I rhs

=> colspan=" nr" inserează în dreapta celulei, nr-1 celule al căror conţinut este vid, dar pot fi folosite pentru afişarea valorii reţinute de celula care are acest parametru.

Eftct secundar. pentru păstrarea formei dreptunghiulare, toate celelalte linii vor avea, în dreapta, câte o celulă al cărei conţinut este vid.

Exemplu: considerăm tabelul de mai jos:

<table border=" 5 " > <tr> <td> Tll</td> <td> T12 </td>

<td> T13</td> </tr> <tr> <td> T21</td> <td> T22 </td>

<td> T23</td> </tr> <tr> <td> T31</td> <td> T32 </td>

<td> T33</td> </tr> </table>

Modificăm codul HTML: a doua celulă din linia 1 va conţine parametrul colspan:

<td colspan=" 2 " > T12 </td>.

În figura alăturată, puteţi observa efectul!

IT1 1 IT12 IT13 IT2 1 [T22[T23 fr311T32 frn

..:.I Ta belul iniţial

.!J I IT1 1 IT12 IT13 I

IT2 1 llT22 IT23 I I IT3 1 ,T32 ,T33 I I ..:.I

Eftctul obţinut


Pentru a evita o astfel de situaţie neplăcută, linia respectivă va conţine o celulă în minus, ca În exemplul următor. In plus, textul conţinut de celula cu acest parametru va fi aliniat în centru, pentru a vedea cum se poate folosi spatiul astfel obtinut: ' '

<table border=" 5 " > <tr> <td> Tll</td>

<td colspan=" 2 " align=" center" >T12 </td></tr>

<tr> <td> T21</td> <td> T22 </td> <td> T23</td></tr>

<tr> <td> T31</td> <td> T32 </td> <td> T33</td></tr>

</table> Ajustarea tabelului

� rowspan="nr" inserează pe următoarele nr-1 linii, în aceeaşi coloană, câte o celulă al cărei conţinut este vid. Efect secundar: pentru păstrarea formei dreptunghiulare, toate liniile vor conţine câte o celulă în plus.

Exemplu: considerăm tabelul de mai jos:

<table border=" 5 " > <tr> <td> Tll </td>

<td rowspan=" 2 " T12 </td>

<td> T13 </td> <tr> <td> T21 </td>

<td> T23 </td> <tr> <td> T31 </td>

<td> T33 </td> </table>

align=" center" >

</tr> <td> T22 </td> </tr> <td> T32 </td> </tr>

..:.J Exemplu de tabel

Pentru a corecta acest dezavantaj, următoarele nr-1 linii vor conţine câte o celulă mai puţin. Reluăm exemplul:

<table border=" S " > ..!J <tr> <td>Tll</td> <td rowspan=" 2 " align=" center" > rmr1m T12</td> T12 <td> T13 </td> </tr> IT2 1 IT22

<tr> <td> T21 </td> <td> T22 </td> </tr> IT3 1 IT32 [T33 <tr> <td> T31 </td> <td> T32 </td> <td> T33 </td> </tr> �

</table>

Ajustarea tabelului


Exemplu: vom extinde celula T12 şi în dreapta şi în jos (cei doi parametri pot fi folosiţi şi simultan). Textul va fi scris în centrul pătratului astfel format:


<td>Tll</td> <td rowspan=" 2 " colspan=" 2 "

valign=" middle" align=" center" > T12</td>

</tr> <tr>

<td>T21</td> </tr> <tr>

<td>T31</td> <td>T32</td> <td>T33</td>

</tr> </table>

..:..I Extinde-rea unei celule

Elementul <CAPTION> are rolul de a permite scrierea titlului unui tabel. Titlul se scrie Între cele două tag-uri, <caption> şi </ caption>. Cele două etichete trebuie să se găsească imediat după <table>.

Exemplu: mai jos am introdus un titlu pentru un tabel oarecare:

<table> <caption> Un titlu </caption>

� Elementul <caption> are atributul align. Cele patru valori pe care le poate lua şi efectul lor, le puteţi observa mai jos:

Un titlu Un titlu Un titlu

[A1 1llA12l IA1 1llA12I [A1 1llA12l [A21l[A22l IA21l[A22I IA21llA22l

Un titlu

top bottom left right


Exerciţii rezolvate

1. Să se realizeze un caz clasic de tabel, ca cel de mai jos:

C�\lnvatam HTML\ Tabel.html

x Go gle i Nume tip � umar octeti

•I B Căutaţi T · I Valoare

float 4 3.4* 1 0 -38 si 3 .4* 1 0 3s.

double 8 I t _ 7* 1 0 -308 si l _ 7* 1 0 3os.

lrong double �I --1-0-- 13-4. i o-4932 si 3 .4* 1 04932

ReZP!vare. Mai jos este prezentat codul sursă:

<table border=" 5 " > <tr align=" center" bgcolor=11 yellow11 >

<td> <b>Nume tip</b> </td> <td> <b>Numar octeti</b> </td> <td> <b>Valoare</b> </td>

</tr> <tr align=" center" >

<td> <b>float</b> </td> <td> 4 </td> <td> 3 _ 4 *10 <sup>-38</sup> si 3 _ 4 *10 <sup> 38</sup></td>


<td> <b>double</b> </td> <td> 8 </td> <td> 1 - 7*10 <sup>-308</sup> si 1 - 7*10 <sup>308</sup></td>


<td> <b>long double</b> </td> <td> 10 </td> <td> 3 _ 4 *10<sup>-4 932</sup> si 3 _ 4 *10<sup>4 932</sup></td>

</tr> </table>

Capitolul 3 - Crearea paginilor web 1 9 1

Observaţi faptul că am folosit atributul bgcolor pentru a impune culoarea galbenă ("yellow'') ca fundal pentru prima linie a tabelului, iar pentru toate liniile, atributul align care centrează textul din cadrul celulelor ("center") .

,/ Nu am prezentat în această carte toate atributele . . . sunt foarte multe, însă puteţi căuta şi dvs. pe Internet! Experimentaţi şi testaţi!

2. Formaţi o pagină web care să conţină un text oarecare, scris în stânga unei lffiag1m:

ID (,\Jnvatam HTML\ P • C X \I! C:\Jnvatam HTML\T

un text; un text; un text; un text; un text; un text; un text; un text; un text; un text; un text; un text; un text; un text; un text;

Rezg!vare. Aparent, ar fi o problemă de aliniere în dreapta a unei lffiag1m. În realitate, mascat, avem un tabel cu o singură linie şi două coloane.

În prima se găseşte un text, iar în a doua o imagine. Evident, dacă se inversează conţinutul celor două coloane, obţinem efectul alinierii la stânga a imaginii.

<html> <head> </head> <body> <table> <tr>

<td> <p>un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ; un text ;

</p> </td> <td> <img src=" Imagine . jpg" , alt=" Imagine" > </td>

</tr> </table> </body> </html>


3. Se cere să se scrie un text în două coloane, precutn în imaginea de mai jos:

x Go gle i I Mai multe » ....., Conectaţi-vă � •

Scrierea pe coloane

Un text scris pe dona coloane_

F armam un tabel cu o singura linie si

doua cehile de date.

Trebuie sa ne asiguram ca textul

este impartit de asa natura astfel

incat sa ocupe aproximativ acelasi

spatin in cele dona coloane.

Rezolvare. În fapt, vom construi un tabel cu două linii şi două coloane. Cele două elemente de pe prima linie sunt unite şi conţin titlul. În cele două coloane se scriu mai multe paragrafe. După cum ştiţi deja, lăţimea coloanelor �epinde de mărimea ferestrei browser-ului, dar, mai ales, de conţinutul lor. In rest, analizaţi modul În care s-a realizat pagina respectivă:

<html> <head> </head> <body> <table cellspacing=" l O " >

<tr align=" center" > <td colspan=" 2 " ><h2>Scrierea pe coloane</h2></td></tr>

<tr> <td width="50% ">

<p>Un text scris pe doua coloane . </p> <p>Formam un tabel cu o singura linie si doua

celule de date . </p></td> <td width="50% ">

<p>Trebuie sa ne asiguram ca textul este impartit de asa natura astfel incat sa ocupe aproximativ acelasi spatiu in cele doua coloane . </td></tr>

</table> </body> </html>

Observaţi că am impus procentual, prin atributul width, ca cele două coloane să ocupe fiecare jumătate din spaţiul disponibil afişat de browser.


3.6. Hyperlegături (l ink-uri, ancore)

Elementul <a>

Începutul unei ancore este marcat prin <a>, iar sfârşitul său prin </a>. O ancoră conţine adresa URL a unei resurse oarecare aflată pe un server şi un text lămuritor (sau o imagine) asupra legăturii. Practic, se afişează, subliniat, doar textul lămuritor.

Ideea de bază este următoarea: dacă se execută clic pe acest text lămuritor, resursa indicată este adusă pe calculatorul vizitatorului, opţional sau nu şi este lansat programul care prelucrează resursa respectivă.

=> Cel mai important atribut al unei ancore este href (calea către legătură, referinţa) . Numeroasele exemple care vor fi date în această secţiune vă vor lămuri asupra modului de utilizare a acestui atribut.

Legături către alte pagin i web

O legătură către un fişier HTML este afişată de browser cu o altă culoare şi este subliniată. Când este deasupra ei, cursorul grafic ia forma unei mâini, indicându-ne astfel că este o legătură pe care o putem utiliza.

Exemplu. Mai jos, puteţi observa modul În care am scris un paragraf care conţine o legătură. Dacă se execută dublu-clic asupra ei, de pe server este adus fişierul index care va fi afişat de browser.

<p>Pentru mai multe informatii , <br> <a href=11 http : //www . nasa . gov11 > vizitati site-ul NASA</a> ! </p>

Pentru mai multe informatii, vizitati site-ul NASA !

./ De asemenea, o legătură poate fi creată şi cu ajutorul unei imagini (nu numai cu ajutorul unui text) .

Exemplu. Analizaţi codul de mai jos:

<a href=11 http : //www . nasa . gov11 > <img src=11 rachetal .bmp11 ></a>

1 Denumirea atributului este un acronim pentru Hypertext REFerence.


Operaţia de descărcare (download)

Uneori, este necesar ca utilizatorul paginii noastre să poată descărca, dacă doreşte, anumite fişiere. Descărcarea fişierelor poartă numele de download, termen care provine din limba engleză.

Exemplu. Considerăm o pagină care va conţine legătura către fişierul care trebuie descărcat ("programa2011.zip") . Iată cum am construit ancora:

<a href=" http : //www . unsite . ro/personal/programa2011 . zip "> Programa la informatica </a>

După ce vizitatorul execută un clic pe legătură, va apărea o cutie de dialog unde vizitatorul poate comanda ca după descărcare, fişierul să fie automat deschis (Open) cu un program care are asociată respectiva extensie sau să fie salvat pe hard, urmând a fi utilizat mai târziu, prin comanda Save.

Legături relative la document

Uneori, documentele HTML sunt lungi şi pot fi greu parcurse de vizitator. Desigur, utilizatorul le poate parcurge cu ajutorul barelor de defilare. Există posibilitatea ca, în anumite cazuri, să-l scutim de acest efort. Pentru aceasta, vom proceda astfel:

=> În punctele de unde dorim să fie vizualizat documentul, creăm ancore cu nume. Numele unei ancore îl vom da prin atributul id.

Exemple:

<a id=" sus" ></a> <a id=11 mij loc11 ></a>

( CC " A d d 1 ") am aşezat-o m partea e sus a ocumentu u1 . (am "aşezat-o" la mijlocul documentului) .

=> În punctele de unde dorim ca utilizatorul să poată vizualiza imediat documentul începând de la o anumită ancoră definită anterior creăm, tot cu ajutorul unei ancore, o hiperlegătură.

Exemple:

<a href=" #sus" > sus </a> (salt în partea de sus a documentului) . <a href=11 #mij loc11 > la mij loc </a> (salt la mijlocul documentului) .


,/ Pentru a vedea "pe viu" CUlll funcţionează acest mecanism, este necesar ca fişierul să fie suficient de mare, astfel încât zona care conţine ancora destinatie să nu fie vizibilă în momentul "trimiterii".

' Există posibilitatea ca alte pagini către care se face trimitere să fie

vizualizate începând dintr-un anumit punct, care conţine o anume ancoră.

Exemplu: un alt fişier HTML conţine o ancoră către fişierul anterior (numit "lung.html"):

<a href=11 c : \lung . html#mij loc11 > Salt la fisierul HTML " lung . html " , la mij loc </a>

....

Salt la fisierul HTivIL "lung.html", la mijloc

Exemplu de hiperlegatură spre o pagină cu ancoră relativă

Observatie! Există cărti sau documentatii scrise utilizând HTML-ul. În loc să ' ' ' avem un cost ridicat al tipăririi ei pe hârtie, se preferă scrierea ei în format HTML şi livrarea ei către cititor pe un CD. Acesta va citi cartea direct pe calculator. Vă dati seama că în astfel de cazuri referintele relative la document

' ' devin extrem de importante. Acest procedeu este des utilizat şi în cazul docUlllentaţiilor online, oferite pe Internet.

Trimiterea automată a unui e-mail

Dorim ca o persoană să ne poată trimite un e-mail, direct din pagina noastră. Ea nu va avea decât să execute un clic pe respectiva legătură şi, imediat, se va lansa programul implicit de trimitere a e-mail-ului, iar adresa noastră va fi trecută automat în câmpul destinatarului (To) .

Exemplu: pentru a obţine acest efect, pentru atributul href se va completa "mailto'', urmat de ":" şi de adresa de e-mail:

<address><a href=11 mailto : eu@unsite . ro11 > Puteti sa-mi scrieti </a></address> - Puteti sa-mi scrieti

Observaţie! În ultimul timp, acest procedeu este mai puţin folosit. Anumite motoare de căutare, identifică cuvântul cheie "mailto" şi extrag adresa de e-mail. Ulterior, această adresă este utilizată pentru a trimite mesaje publicitare nedorite (spam) . Din acest motiv, este bine să scrieţi adresa fără acest atribut, iar cei interesaţi, cu un efort suplimentar, o copiază şi vă trimit e-mailul.


3 . 7. Hărţi imagine

Introducere

Poate aţi întâlnit pe anumite site-uri o hartă. Dacă se execută clic pe o anumită regiune a ei, se afişează anumite informaţii, specifice regiunii respectve, dacă se execută clic pe altă portiune se afişează alte informatii, ş.a.m.d. A ' ' In acest caz s-a folosit procedeul hartă-imagine. Un alt exemplu de folosire a aceluiaşi procedeu: a pagină web în care se prezintă un anumit tip de mobilă. Dacă se dă clic pe imaginea ce reprezintă un scaun, se afişează preţul scaunului, dacă se dă clic pe imaginea ce reprezintă masa se afişează preţiul mesei, etc. Cum s-au obtinut aceste efecte? '

Problema este următoarea: se dă o imagine şi se cere ca, prin executarea unui clic asupra unei anumite parţi a ei, să se efectueze una dintre operaţiile prezentate în paragraful anterior, prin executarea unui clic În altă parte a ei, să se efectueze o altă operaţie de acelaşi tip, ş.a.m.d. Cu alte cuvinte, trebuie să se creeze un meniu care să se prezinte sub formă de imagine.

Priviţi imaginea de mai jos:

Ea cuprinde 4 regiuni marcate. Una sub formă de dreptunghi, alta sub formă de cerc şi două sub formă de poligoane. Dorim ca atunci când executăm clic pe una din aceste regiuni, să se execute o anumită operaţie.


Browser-ul va afişa poza fără a evidenţia aceste zone, dar atunci când cursorul grafic trece deasupra unei astfel de zone, el va lua forma unei mâini şi, aşa cum am spus, executarea unui clic determină efectuarea unei operaţii specifice zonei, de exemplu vizualizarea unei pagini.

Cum se introduce în HTM L o hartă i magine?

Mai jos puteţi observa modul în care au fost scrise zonele din imaginea anterioară (câinele) :

<html> <he ad> <title>Exemplu de harta imagine</title> </head> <body> <img src=" c : /web/caini3 . jpg" usemap=11 #caine11 > <map name=" caine"> <area shape=11 rect11 coords=11 25 , 14 , 90 , 44 11 href=11patrat . htm11 > <area shape=" circle" coords=11 36 , 70 , 23 11 href=11 cerc . htm11 > <area shape="poly" coords=11 185 , 39 , 1 93 , 37 , 204 , 36 , 221 , 34 , 244 , 4 7 , 24 6 , 4 7 , 24 7 , 50 , 248 , 57 , 257 , 62 , 262 , 64 , 269 , 67 , 264 , 73 , 259 , 81 , 249 , 82 , 232 , 78 , 230 , 79 , 223 , 87 , 212 , 87 , 184 , 80 , 183 , 66 , 184 , 57 , 185 , 41 , 186 , 35 " href=11 cap . htm11 > <area shape="poly" coords=11 11 6 , 106 , 112 , 11 6 , 110 , 121 , 110 , 126 , 107 , 128 , 104 , 132 , 104 , 141 , 104 , 14 7 , 104 , 152 , 99 , 156 , 95 , 1 63 , 97 , 1 65 , 99 , 1 65 , 99 , 1 69 , 99 , 180 , 97 , 188 , 97 , 193 , 103 , 1 92 , 111 , 1 90 , 11 6 , 1 92 , 11 9 , 1 92 , 11 9 , 184 , 123 , 1 74 , 123 , 1 66 , 126 , 156 , 128 , 153 , 131 , 148 , 132 , 144 , 132 , 142 , 132 , 139 , 134 , 138 , 138 , 135 , 138 , 128 , 143 , 125 , 150 , 121 , 150 , 1 17 , 150 , 115 , 152 , 11 3 , 152 , 110 , 11 6 , 106 11 href=11picior . htm11 > </map> </body> </html>

Din analiza exemplului de mal sus, observăm că trebuie să utilizăm următoarele elemente:

Elementul <map> - cu acesta descriem o hartă, utilizând două tag-uri: <map> şi </map>. Între ele se găseşte descrierea diverselor zone care alcătuiesc harta. Elementul are următorul atribut:

=> name - numele hărţii. El trebuie trecut în atributul usemap al elementului <img> care descrie imaginea folosită ca o hartă:

<img src=" c : /web/caini3 . jpg" usemap=11 #caine11 >


Elementul <area> are rolul de a descrie o zonă din hartă pentru care, la executarea unui clic, se produce un amunit efect. Acest element utilizează tag-ul <area atribute>. Principalele atribute ale elementului <area> sunt:

=> shape - descrie tipul regiunii respective;

=> href - adresa fişierului html sau a unei alte resurse Oa fel ca la ancore) .

După cum ştim, fiecare imagine este alcătuită din pixeli. Fiecare pixel este caracterizat de două coordonate (x,y), în sistemul de axe de mai jos:

0 , 0 X

, . y

Sistemul de coordonate asociat unei imagini

Atributul shape poate lua valorile:

• rect coords="X1,Y1,X2,Y2" - dreptunghi, unde X1,Y1 reprezintă coordonatele colţului din stânga-sus şi X2,Y2 sunt coordonatele colţului din dreapta-jos.

• circle coords="X1,Y1,R" - cerc, unde X1,Y1 reprezintă coordonatele centrului, iar R raza cercului.

• poly coords="X1,Y1, X2,Y2, . . . , Xn,Yn" - poligon, unde X1,Y1, X2,Y2, „. reprezintă coordonatele vârfurilor.

x2 , y2 x1 , y1

I I x1 , y1

x2 , y2 xn , yn

RECT CIRCLE POLY

Coordonatele celor trei farme ale atributului shape


Totuşi, cum au fost obţinute coordonatele punctelor? Dacă pentru dreptunghi sau cerc aceste coordonate pot fi găsite relativ uşor (de exemplu, Paint-ul afişează coordonatele cursorului), în cazul poligoanelor închise, problema devine serioasă! Din acest motiv, s-au realizat mai multe programe prin care coordonatele se obţin automat.

Programul Map This!

Programul Map This! este destinat obţinerii automate a coordonatelor punctelor care definesc regiunile, pentru o imagine cu extensia .gif sau . jpeg. Practic, se încarcă o imagine într-unul dintre formatele enumerate anterior şi se trasează, cu mouse-ul, regiunile pe ea. Imaginea arată precum cea alăturată (câinele) . După ce regiunile au fost trasate, se salvează sub formă de fişier HTML coordonatele astfel obtinute. '

./ Programul este freeware (gratuit) şi poate fi obţinut de pe Internet. Căutaţi-l cu Google!

./ El "ştie" mai multe decât ce este prezentat în acesată secţiune, dar noi ne vom limita doar la ceea ce este strict necesar!

Mod de utilizare

1) După apelul programului, se încarcă imaginea. Apelaţi File şi New. Va apărea o cutie de tip Open, cu ajutorul căreia puteţi selecta fişierul dorit (. jpeg sau .gi�.

2) Pentru a putea lucra uşor cu imaginea, puteţi folosi Zoom in (măreşte imaginea) sau Zoom out (o micşorează) .

3)

Butoane de marire şi . .

micşorare a zmagznzz

Zoom in Zoom out

Pentru a trasa un dreptunghi, selectaţi butonul alăturat. Apoi, selectaţi dreptunghiul dorit (ca în Paint), de la colţul din stângasus, către colţul din dreapta-jos.


În exemplu, am selectat un dreptunghi care include cuvântul PETS.

4)

Selectarea unei .forme dreptunghiulare

Pentru a trasa un cerc, apăsaţi butonul alăturat. Apoi, selectaţi f •"=] cercul dorit.

În exemplu, încadrăm în cercuri capetele celor doi:

Trasarea unor .forme circulare

5) Pentru a trasa un poligon oarecare, apăsaţi butonul alăturat şi r;='l trasaţi poligonul. Executaţi un clic în punctul de unde doriţi să !..:J începeţi trasarea. Apoi deplasaţi cursorul pe prima latură, apoi executaţi un clic, deplasati cursorul pe a doua latură, executati un clic, ş.a.m.d. A ' ' In final, executaţi un dublu clic şi figura se va închide.

În exemplu, am încadrat în poligon căţelul. Atenţie: Pentru a obtine o cât mai fină încadrare, trasati laturi mici ' ' pentru poligon.

Trasarea unei .forme poligonale

După ce am încadrat toate regiunile care ne interesează, putem trece la scrierea referinţei (link-ului) pentru fiecare dintre ele. Din meniu, apelaţi View şi Area List. Va apărea o listă, aşa cum este cea de mai jos. Întrucât am selectat 4 regiuni, lista are 4 elemente. Selectarea unui element al ei (în exemplul 1) are ca efect faptul că zona care îi corespunde va apărea în imagine cu o culoare diferită, pentru a le putea distinge. ListaArea List

Un dublu-clic în listă, pe reprezentarea unei anumite regiuni, are ca efect scrierea link-ului respectiv.


În exemplul următor, comandăm browser-ului încărcarea unUl anumit fişier HTML (o pagină). Procedaţi la fel pentru fiecare regiune în parte. După ce aţi terminat această operaţie, treceţi la pasul următor. Spre exemplu, pentru zona 3 (Area #3), avem:

7)

��

A.re a. #3 S etti n g s

Typ e: p o ly Positi o n : (32, 6 2 ) - (89, 9 3)

D i m e n s i o n s : p o i nts = 5 7

U RL t o activa.te w h e n t h i s a.rea i s cl i cked: (re q u i re d)

fi s 1 . htm

Urmează salvarea hărtn, · · . Apelau, · File şi Save As. Selectati � ' C. CŞIM CSIM. Salvaţi sub formă de fişier HTML.

Există posibilitatea să salvaţi Într-un fişier HTML deja scris (acesta va conţine src-ul cu imaginea) . Dacă salvaţi într-un fişier diferit, puteţi apoi să-l deschideţi, să selectaţi descrierea (între <map> şi </map>) şi să o includeţi în fişierul dvs. De acum, puteţi folosi fără probleme hărţi imagine.

În final, câteva amănunte "de lucru":

Ştergerea unei regiuni. Apăsaţi butonul alăturat şi aşezaţi cursorul � grafic deasupra ei. Apoi, apăsaţi butonul drept al mouse-ului. Din L_ici meniul flotant care va apărea, selectaţi Delete Area.

Ştergerea unui punct al liniei poligonale. Atunci când cursorul grafic staţionează asupra sa, cursorul ia formă de cruce. Dacă se apasă butonul drept şi se selectează Delete Point, punctul va fi şters şi, deci, ignorat pentru poligon.

punct şters . ... .

• • • I � e

, .. . . · · · .. '\

Exerciţiu de tip referat! Întocniţi un referat despre programul Map This! sau un altul cu acelaşi rol. Este foarte important să Învăţaţi să vă autoducumentaţi. Nu întotdeauna, pentru orice temă, veţi găsi o carte care s-o trateze!


3.8. Elementele <base>, <meta> �i <script>

Vom prezenta în continuare câteva elemente esenţiale care pot fi scrise în cadrul antetului (head), extrem de utile în foarte multe situaţii.

Elementul <base> are forma generală <base href=" adresa" > şi are rolul de a preciza o adresă de bază pentru resurse, iar celelalte adrese se obţin adăugând după adresa de bază o adresă specifică. Tag-ul <base> se va scrie în antetul paginii, adică în interiorul lui <head>.

Exemplu: pe calculatorul meu, am câteva imagini în folder-ul "C: \LaMare" (1. jpg, 2. jpg, etc.) . Valoarea folder-ului va fi trecută în <base> (cu href) . De acum, pot scrie adresa pe scurt ("1.jpg") .

<he ad> <base href=11 C : /LaMare/ 11 >

<body>

<img src=11 l . jpg11 >

Observatii! '

./ Practic, se formează 11 C : /LaMare/1 . jpg" .

./ Vă daţi seama că În acest mod pot scrie şi o adresă de internet:

<base href = " http : //www . paginamea . ro/ 11 >, etc.

Elementul <meta> este folosit pentru a fumiza informaţii motoarelor de căutare. Unele dintre ele vizitează doar antetul pentru a obţine informaţii. Informaţiile conţinute de acest element nu sunt afişate de browser, dar este important să-l folosim pentru ca informaţiile conţinute în site-ul nostru să fie accesibile. Tag-ul <meta> se găseşte în antet (<head>).

Observaţie! În antet se pot găsi mai multe elemente <meta>.

Atributele elementului <meta> sunt:

::::> Atributul name - pentru el se pot utiliza câteva cuvinte cheie care vor fi prezentate în cele ce urmează.

::::> Atributul content - are un continut variabil în functie de valoarea ' ' trecută pentru name.


Cum utilizăm cele două atribute ?

• Pentru a specifica autorul unui document:

<meta narne=" author" content=" Mihai Popescu" >

• Pentru a specifica titlul unui document:

<meta name=" title" content=" Cresterea albinelor" >

203

• Pentru a specifica cuvintele cheie după care să fie regăsit site-ul dvs. Vă dati seama de importanta acestora . . . ' '

<meta name=" keywords" content=" albine , matca , trantor , stup , polen , miere">

Important! Trebuie să treceţi forma scurtă a unui cuvânt. De exemplu, dacă trec " stup", motoarele vor furniza adresa site-ului, chiar dacă o persoană caută după cuvântul cheie " stupi" .

• Pentru a specifica limba în care este scris site-ul (este utilă în cazul căutărilor avansate) . În exemplu, site-ul este scris în limba română:

<meta name=" language" content=" ro ">

• Pentru a specifica textul pe care îl va afişa un motor de căutare, la listarea paginilor. Dacă acesta nu este trecut, motorul va afişa primele linii din pagină, ceea ce nu e foarte relevant.

<meta name=" description" content="Acest site este dedicat modalitatilor de crestere a albinelor" >

Observaţii importante !

./ Există şi alte atribute ale elementului <meta>, dar aceştia doi sunt suficienţi. Majoritatea motoarelor de căutare se bazează în principal pe aceştia: Description şi Keywords .

./ Optimizarea site-urilor pentru motoarele de căutare (SEO - Search Engine Optimization) reprezintă o unealtă indispensabilă pentru a fi eficient pe Internet. Există firme specializate care se ocupă strict de această problemă, iar preţurile sunt mari . . .


./ La Început, cei care au realizat motoarele de căutare au vrut să ajute programatorii web prin utilizarea tag-urilor <meta>, pentru a evidenţia mai uşor şi mai bine conţinutul paginilor. Apoi, anumite persoane au folosit acest lucru pentru a obţine un avantaj şi au introdus cuvinte care nu aveau nici o legătură directă cu paginile respective, ci doar pentru a fi listaţi "mai bine''. Aşadar, tag-urile <meta> nu mai erau utile, ci doar o unealtă pentru spam (informaţie nedorită) . De aceea, unele motoare au renunţat definitiv la ele, iar altele, dimpotrivă, pun paginile la sfârşitul listei dacă elementele cheie din <meta> nu se regăsesc în conţinutul paginii.

În concluzie, retineri: ' '

FolosiJi tag-urile <meta> cu grijă şi nu introduceJi cuvinte ce nu sunt incluse şi în fişierul HTML!

Elementul <script> este folosit pentru introducerea anumitor secvenţe de program în cadrul paginilor web. Există mai multe limbaje (numite de scriptare) care permit scrierea acestor secvenţe, cum ar fi JavaScript sau VBScript. Programa nu include studiul acestor limbaje.

3.9. Aşezarea impl icită a diverselor elemente

O întrebare foarte importantă: cum aranjează browser-ul în pagină diversele elemente (imagini, paragrafe, tabele, etc.)? Vă daţi seama de importanţa ei: orice creator de pagini web doreşte să amplaseze elementele care alcătuiesc o pagina într-un anumit fel. . .

În HTML, există două tipuri de elemente: elemente la nivel de bloc şi elemente la nivel de text (inline).

A) Elementele la nivel de bloc sunt aşezate pe rând nou. Exemple de elemente la nivel de bloc: p (paragraf), table (tabel), tr (linie de tabel) h1. . . h6, ol, li, ul (liste), dl, dt, dd (itemi din liste) .

B) Elemente la nivel de text (inline) . Acestea se scriu pe linia curentă, în continuare. Exemple de elemente la nivel de text: b (bold), i (italic), img (imagini), etc.

Exemplu: analizaţi codul sursă următor:


<html> <he ad> </head> <body> <p> Acest paragraf este scris pentru a verifica modul de aliniere pe orizontala in cazul unui element IMG , care este de tip INLINE <img src="Eric . jpg" , alt=" Eric " > , deci se insereaza exact ca un cuvant intr-un paragraf</p> <p> Paragraful este un element de tip BLOC , asa ca se insereaza pe o linie noua ! </p> </body> </html>

Acest paragraf este scris p entru a verifica modul de aliniere

pe orizontala in cazul unui element W G, care este de tip

rnLil.ffi , deci s e insereaza exact ca un cuvant intr-un paragraf

Paragraful este un element de tip BLOC, asa ca se

insereaza pe o linie noua!

Pagina web obţinută

205

În această carte sunt prezentate foile de stiluri (vezj subcapitolul 3.11) şi cu qjutorul acestora se poate modifica modul de aşezare în pagina a elementelor.

3 . 1 O. Caractere HTM L

În HTML există posibilitatea de introducere a caracterelor prin codul lor. Astfel, putem folosi şi caractere care nu se obţin direct de la tastatură, cum ar fi: semne matematice, litere greceşti, litere specifice limbii române, etc.


Exemplu: pentru texte în limba română, putem introduce diacritice:

"Mama merge la piaţă" --7 Mama merge la pia&#355 ; &#259 ; "Ţara mea este România" --7 &#354 ; ara mea este Rom&#226 ; nia "O şopârlă" --7 o &#351 ; op&#226 ; rl&#259 ;

Exemplu: pentru texte (formule) "matematice":

"Aria cercului este nR2" --7 Aria cercului este &#960R ;<SUP>2</SUP> "sin(cot) " --7 sin ( &#969 ; t)

Exemplu: pentru semne speciale (se pot lăsa mai multe spaţii între cuvinte) :

"© Nu mai copiaţi. . . " --7 &#169 ; Nu mai copia&#355 ; i . . . "Mama merge!" --7 mama&#1 60 ; &#160 ; &#160 ;merge

Observaţie! Prin folosirea spaţiului, browser-ul nu va pune cele două cuvinte pe linii diferite !

Exemplul evitarea confuziei de caractere pe care o poate face browser-ul (caracterul "<" are un anumit sens în HTML) .

Se afişează într-un paragraf, " m<v" : <p> m&#60 ;V </p>.

Mai multe caractere puteţi găsi la adresa

http://www. info bi ts. ro/ tabel-diacri tice-html-romanes ti. php

Aplicaţie. Realizaţi pagina web de mai jos:

"Şi plângând înfrână calul,

Calul ei cel alb ca neaua,

Îi netează mândra coamă,

Şi plângând îi pune şeaua"

. . . din "Făt-Frumos din tei" de J:.Jihai Eminescu

Pagină web cu caractere româneşti (diacritice)

Capitolul 3 - Crearea paginilor web 207

Limbajul HTML - probleme propuse

1. Realizaţi o pagină web similară cu cea de mai jos:

Cuprinsul cursului I. Tehnici de programare

o Backtracking o Greedy o Divide et impera o Programare dinamica o Branch and Bound

II. Metode de sortare o Sortarea prin selectarea minimului (maximului) o Sortarea prin interschimbare o Sortarea prin insertie

2. Scrieţi codul HTML pentru a crea tabelul de mai jos:

li Tipuri reale in C++ I I l�me tipl[Numar octeti1[ Valoare I

li 11 'I 3 .4* 1 0 -33 si 3 .4*10 3 8 I float 4

li I[ 'I i . 7* 1 0 -3 08 si 1 . 7* 1 0 3 08 I double 8 l�g doublelL 1 0 '13 .4*10 -4932 si 3 .4*10 4932'

4. Presupunem că doriţi să prezentaţi un calculator. Pagina va cuprinde atât fotografia calculatorului cât şi un nume pentru el (vezj figura alăturatd'j .

C:\Users\Vlad\Desktop\link.html

Atunci când vizitatorul execută clic, fie pe imagine, fie pe text, trebuie ca browser-ul să afişeze o altă pagină cu detalii tehnice şi explicaţii suplimentare.

X Go gle

Laptopul dorit!


5. Puneţi pe pagină o astfel de imagine (din Yahoo) şi un mesaj. Dacă vizitatorul paginii execută clic, fie pe mesaj, fie pe imagine, va fi apelat programul de e-mail şi va putea sa vă scrie, fără să mai completeze adresa!

Exemplu Scrie-mi!

6. Doriţi ca vizitatorii site-ului dvs. să poată descărca o documentaţie pe care o aveţi acolo sub forma unui fişier word (extensia .doc) . Cum trebuie să procedaţi?

7. Presupunem că trebuie să realizaţi o prezentare a animalelor domestice:

Pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica pisica Continuare

Cainele . . . . . . . . . . . .

crune came crune crune came crune came crune came crune crune crune . . . . . . . . . . . . crune came crune crune crune crune came crune came crune crune crune caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine caine Continuare

Pagina principală a prezentării

Un alt fişier HTML (să-l numim "lung.html") va reţine, unul după altul, textele despre fiecare animal În parte. Se cere ca, atunci când vizitatorul execută clic pe "Continuare", pentru un anumit animal, să apară direct textul corespunzător în fereastra care afişează textele. Mai jos, puteţi observa ce se afişează atunci când acesta execută clic pe "Continuare" la descrierea câinelui:

Cainele

cainele cainele cainele ca.inele ca.inele cainele ca.inele cainele cainele cainele cainele ca.inele cainele ca.inele caine

cainele cainele cainele cainele cainele cainele cainele cainele cainele cainele cainele cainele cainele cainele caine

ca.inele cainele ca.inele ca.inele ca.inele ca.inele cainele ca.inele cainele cainele ca.inele cainele cainele cainele caine


cainele cainele cainele ca.inele cainele cainele cainele cainele cainele cainele ca.inele cainele cainele ca.inele caine

cainele cainele cainele ca.inele cainele cainele cainele cainele cainele cainele cainele cainele cainele ca.inele caine


Descrierea câinelui din pagina "lung.html"

Capitolul 3 - Crearea paginilor web 209

3 . 1 1 . Sti luri . Limbajul CSS

Noţiuni introductive

Noţiunea de stil este, pentru un document HTML, asemănătoare cu formatarea documentului, de exemplu, pentru un document Word. Există o mulţime de atribute prin care se pot stabili font-urile, caracteristicele de aliniere a textului, forma elementului, culorile de fond şi ale literelor, marginile, poziţia elementelor, etc.

Consorţiul web W3C pune la dispoziţia creatorilor de pagini web un

limbaj prin care se pot realiza toate acestea. Este cunoscut sub denumirea CSS (Cascading Style Sheets). Legătura între HTML şi CSS se realizează prin elementul <style> care utilizează tag-urile <style> şi </ style>. Cele două tag-uri vor fi aşezate Între <head> şi </head> .

.,/ Un stil se aplică unor elemente de acelaşi tip. Tipul lor este numele elementului din HTML. De exemplu, p va însemna paragraf, img o imagine, table un tabel, etc.

Exemplu: stabilim modul în care trebuie să arate un paragraf (observaţi acel p). Orice paragraf vom scrie va arăta aşa cum am stabilit stilul.

<html> <head> <style> p { font-size : 20pt ; color : red; text-indent : lcm;

background: yellow ; font-family : cursive ; font-style : italic ; font-weight :bold; text-decoration : underline }

</style> </head> <body> <p> Stiluri , stiluri . . . <p> Este un exemplu de formatare pentru paragrafe </body> </html>

L C:\Users\Vlad\O� op\ P „

X Go gleL Stiluri, stiluri ...

C:\Users\Vlad\Deslctop\link . . . X

Este un exemplu de formatare pentru paragrafe

2 1 O Tehnologia Informaţiei şi a Comunicaţiilor

./ Prin CSS apar posibilităţi noi de formatare pentru toate elementele!

Structura unui element HTML

În general, un element HTML este alcătuit sub forma unei cutii (box) cu structura următoare:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ,

I Conţinut I Ţesătură (pa.ddinq)

Bordură (boroer) Margine (marqi n)

... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . „

� Marginea (margin) - nu este vizibilă de vizitatorul paginii. Rostul ei este de a păstra distanţa dintre cutie şi celelalte elemente.

� Bordura (border) - În cazul în care creatorul paginii doreşte, aceasta poate fi făcută vizibilă (de exemplu i se stabileşte o altă culoare) .

� "Ţesătura" (padding) poate fi dimensionată, dar nu poate fi făcută vizibilă printr-o culoare distinctă. Vom prefera termenul de padding.

� Conţinutul este dat de text şi/ sau imagine .

..( În ansamblu, părţile unor elemente de acelaşi tip pot fi dimensionate. Vedeţi paragrafele următoare!

..( În general, pentru majoritatea elementelor se poate trece spatiul ocupat de acestea: lăţimea (width) şi înălţimea (height) . În�lţimea

' şi lăţimea

cutiei include bordura, dar nu include marginile. In cazul în care conţinutul nu încape în cutie, nu se respectă înălţimea şi lăţimea dată de aceste atribute.


În continuare, vom da exemple de elemente pentru care a fost scris un stil. În acest mod, vă puteţi face de la început o idee despre puterea limbajului CSS. De multe ori, putem face ca un element să arate cu totul altfel decât arată în forma implicită. In paragrafele următoare vor fi prezentate toate atributele, dar acum, vă prezentăm câteva elemente HTML cu înfăţişare "neobişnuită".

Exemplul 1. Am creat un stil pentru un element <h1>. Bordura are culoare distinctă, iar textul este aliniat la stânga. Faptul că există un spaţiu între bordură şi text confirmă existenţa padding-ului (de 0.5 cm).

hl {border : solid lOpx red; background-color : green ; padding : O . Scm O . Sem O . Sem O . Sem; text-align : left ; width : 3cm; }

<hl>Un element Hl</hl>

Exemplul 2. Am creat un stil pentru paragrafe. În acest caz, bordura are o formă specială. Fontul utilizat este din famila "Arial", scris îngroşat (bold) şi înclinat (italic) . Textul este aliniat la centru (center) :

p {border : groove lcm red; background-color : yellow ; padding : lcm lcm lcm lcm; width : Scm; height : Scm; text-align : right ; font-family : arial ; font-weight :bold; font-style : italic ; }

<p> Un exemplu de paragraf </p>

Un clement Hl

Exemplul 3. O listă pentru care s-a stabilit dimensiunea font-ului, culoarea de fond, culoarea, etc. :

ol { font-size : 20px ; font-weight :bold; color :black ; background-color :blue ; }

<ol> <li> masina <li> bicicleta

</ol>

1. 2 . 111 J� My Computer


Atribute pentru font ş.i text

În continuare vor fi prezentate principalele atribute CSS care pot fi utilizate, în cadrul unui stil, pentru a personaliza fontul cu care se va afişa textul.

A) font-style - poate lua valorile:

Un exemplu . . . Un exemplu . . . normal italic

B) font-variant - poate lua valorile:

Un exemplu . . . UN EXEMPLU . . . normal small-caps

C) font-weight - poate lua valorile:

Un exemplu„ . Un exemplu .. . normal bold

Un exemplu . . . Un exemplu ... 100 900

D) font-size - mărimea. Există mai multe modalităţi de a indica dimensiunea font-ului. Cea mai simplă este de a o indica în pixeli (px) :

Un exemplu . . .

lOpx

Un exemplu . . . 15px

Un exemplu . . . 20px

E) font - grupează primele patru atribute, deci dacă îl folosim putem renunţa la acestea. Nu contează ordinea în care sunt scrise . . .

Exemplu: în continuare am descris un stil pentru paragrafe care are ca rezultat pagina din figura următoare::


<html> <head> <style> p { font : italic bold 15px ; } </style> </head> <body> <p>Un exemplu . . . </p> </body> </html>

Un exemplu.. ..

I� My Computer

2 1 3

.!.I I I �

F) font-family - are rolul de a stabili o familie de font-uri cu care vor fi afişate textele. Vă daţi seama că nu se poate şti dacă cel care vizitează pagina are pe calculatorul său instalat sau nu un anumit font. Din acest motiv se trec, în ordine, familiile de font-uri care vor fi utilizate.

La vizualizarea documentului, se verifică dacă există un font din prima familie. În caz afirmativ, se afişează textul cu un font din prima familie. Dacă un astfel de font nu există, se caută dacă există un font din a doua familie, ş.a.m.d.

Exemple de valori: times, courier, arial, etc.

Este recomandabil ca ultima valoare din listă să fie una dintre valorile de mai jos. Ele nu specifică o familie de font-uri, ci mai degrabă un stil de scriere. El va fi folosit atunci când nici una din familiile de font-uri nu a fost găsită, caz în care browser-ul caută un font apropiat de ultima valoare.

Exemple:

Un exemplu serif

Un exem plu cursive

Exemplu: analizaţi stilul de mai jos:

p { font-size : 20px ; font-family : courier , monospace ;

}

Un exempl u sans-serif

u n e xempl u monospace


Limbajul CSS permite stilizarea la nivel de text prin intermediul unor atribute care sunt detaliate în cele ce urmează.

A) text-decoration - poate lua valorile: underline (cu o linie sub el), overline (cu o linie peste el), line-through (taiat în interior) şi none (fără nicio linie, clasic):

Un exemplu de text Un exemplu de text underline overline

Utt c:x:Cfflf'lu clc tc:xt Un exemplu de text line-through none

Exemplu: putem să folosim şi combinaţii între aceste variante, precum cea de mai jos. Efectul poate fi observat în figura de mai jos:

<html> <head> <style> p { text-decoration :

underline overline ; } </style> </head> <body> <p>Un exemplu . . . </p> </body> </html>

I Un exemplu . „

[� My Computer

B) text-align - alinierea textului - poate lua valorile de mai jos:

� & -Acest text a fost scris Acest text a fost scris

pentru a exemplifica pentru a exemplifica

aliniere a la stanga. aliniere a la dreapta.

.=.] .=.] left right

� � Acest text a fost scris Acest text a fost scris pentru

pentru a exemplifica a exemplifica alinierea la

aliniere a la centru. stanga si la dreapta.

.=.] .=.] center justify

d ..:J


C) text-indent este folosit pentru indentarea textelor. Primul rând al textului va începe mai în dreapta cu o valoare precizată.

Exemplu: pentru a obţine indentarea din figura alăturată, am folosit stilul de mai jos:

p { text-indent : lcm; }

Acest paragraf a fost scris pentru a exemplifica indentarea.

1111� My Computer

� I I I

r::J

D) line-height - înăl�mea liniei - atributul este folosit pentru a stabili distanţa dintre rândurile unui paragraf.

Exemplu: am format două stiluri pentru cele două paragrafe:

<html> <head> <style> #unu { font-size : 15px ; line-height : O . Sem; } #doi { font-size : 15px ; line-height : lcm; } </style> </head> <body> <p id="unu " >Acest text a fost scris pentru a exemplifica spatierea intre randuri . </p> <p id="doi " >Acest text a fost scris pentru a exemplifica Spatierea intre randuri . </p> </body> </html>

L Acest text a fost scris pentru a exemplifica

spatierea intre randuri.

Acest text a fost scris pentru a exemplifica

spatierea intre randuri.

Observati faptul că am denumit cele două paragrafe "unu" şi "doi" şi le-am creat cât� un stil diferit. În acest caz, la crearea stilului unui element, numele acestuia este precedat de caracterul diez ("#").


Atribute de culoare �i fond

În general, o culoare poate fi recunoscută prin numele ei (" red" , "green", "gray", . . . ) sau prin valorile RGB (Red, Green, Blue). Puteţi alege culoarea în Paint (opţiunea Edit Colors), după care treceţi valorile în HTML. Este de preferat a doua variantă, pentru că prima este depreciată conform noilor standarde HTML.

A) color - specifică culoarea textului.

Exemplu: mai jos, am setat o culoare pentru textul paragrafelor:

p { font-size : 40px ; color : rgb (12 , 56 , 23) ;

}

Observaţie! Background-ul acoperă suprafaţa conţinutului şi a padding-ului.

B) background-image - pentru fundal se poate folosi chiar şi o imagine. Dacă imaginea este mai mică decât suprafaţa care trebuie afişată, atunci ea este multiplicată astfel încât să acopere întreaga suprafaţă.

Exemplu: se stabileşte imaginea ca fundal pentru întreg documentul (body) . De asemenea, paragrafele vor avea textul de culoare albă, de 40 de pixeli:

<html> <he ad> <style> p { font-size : 40px ; color : rgb (255 , 255 , 255) ; } body {background-image : url ( c : \catelus\l . jpg) ; } </style> </head> <body> <p> Un exemplu de catelus </p> </body> </html>

C) background-color - stabileşte culoarea fundalului. Uneori este trecut şi în cazul în care pe fundal avem o imagine, pentru că este posibil ca, dintr-un motiv sau altul, imaginea să nu apară.

Exemplu: paragrafele se scriu cu alb, pe fond roşu:


p { font-size : 12px ; color : rgb (255 , 255 , 255) ; background-color : rgb (255 , 0 , 0 ) ;

}

sau

p { font-size : 12px ; color : white ; background-color : red;

}

2 1 7

n exemplu . . .

1 1� My Computer

Exemplu: pentru <body> se alege o imagine pentru fundal, iar dacă aceasta nu apare, ca măsură de siguranţă, s-a ales culoarea neagră:

body {background-image : url ( c : \Catelus\1 . jpg) ; background-color :black ;

}

D) background-repeat - am văzut faptul că, dacă o imagine este mai mică decât spaţiul necesar pentru un element, atunci aceasta se repetă atât pe orizontală cât şi pe verticală până când se umple acest spaţiu.

Există posibilitatea să controlăm această repetare prin valorile pe care le ataşăm acestui atribut:

•!• repeat - repetarea se face atât pe orizontală cât şi pe verticală; •!• repeat-x - repetarea se face numai pe orizontală; •!• repeat-y - repetarea se face numai pe verticală; •!• no-repeat - imaginea nu se repetă.

E) background-attachment - poate lua două valori: fixed şi scroll (valoare implicită) . În cazul în care pe fundal se găseşte o imagine, efectul este deosebit. Dacă valoarea este fixed, atunci defilează numai obiectele care se găsesc pe fundal (imaginea rămânând fixă), iar dacă valoarea este scroll, atunci defilează ş1 1maginea.

F) background-position - dacă pe fundal se afişează o imagine, atunci i se poate preciza poziţia în raport cu fereastra. Există mai multe posibilităţi de precizare a poziţiei:

•!• procentual: de exemplu, 33% 50% (la 1/ 3 de partea stângă a ferestrei şi la 1/2 din înălţimea ei);

•!• în valori absolute: de exemplu, 2cm 3cm (la 2 cm de partea stângă a ferestrei şi la 3 cm de partea de sus);


•!• mixt: de exemplu, 2cm 50% Oa 2 cm de partea stângă a ferestrei şi la jumătate raportat la înălţime);

•!• numai o valoare - caz în care se referă numai la alinierea pe orizontală în raport cu marginea din stânga a ferestrei;

•!• prin cuvinte cheie: left (stânga), right (dreapta), top (sus) şi bottom (jos) - de exemplu:

body { background-position : left bottorn;

} (în stângajos)

Exemplu: mai jos a fost creat un stil care defineşte o singură imagine pe fundal, la mijlocul ferestrei, care nu defilează (rămâne fixă):

body {background-irnage : url ( c : \Catelus\l . jpg) ; background-repeat : no-repeat ; background-position : 50% 50% ; background-attachrnent : fixed;

}

G) background - o singură caracteristică pentru toate celelalte. Se trec, în ordine, toate valorile pentru background-image, background-repeat, . . .

Atribute pentru margin i

Fiecare element poate avea margini. Rolul lor este de a o separa de alte elemente. Iată cum se pot stabili marginile:

• margin-left - mărimea marginii din stânga; • margin-right - mărimea marginii din dreapta; • margin-top - mărimea marginii de deasupra; • margin-bottom - mărimea marginii de dedesupt; • margin - toate marginile în ordinea: sus, drepta, jos şi stânga.

Exemplu: pentru elementele de tip paragraf, a fost realizat un stil care defineşte marginile acestuia (fereastra este micşrată, pentru a eviden�a marginile) :

•• top

1 r . Acest text a fost sens � �pentru a exemplifica 1111

P { font-size : 15px ; rnargin-left : lcrn; rnargin-right : 2crn; rnargin-top : 3crn;

}

left right marginile.


Atribute pentru padding

Padding-ul poate fi doar dimensionat, dar nu i se poate aplica o culoare distinctă: padding-top - partea de sus; padding-left - partea din stânga; padding-bottom - partea de jos; padding-right - partea din dreapta; padding - toate marginile, în ordinea: sus, dreapta, jos şi stânga.

Atribute pentru bordură

Mai întâi putem stabili dimensiunile bordurii: border-top-width - partea de sus, border-left-width - partea din stânga, border-bottom-width - partea de jos şi border-right-width - partea din dreapta.

border-width - le înlocuieşte pe primele 4. Se trec valorile în ordinea: sus, dreapta, jos şi stânga. Dacă se trece o singură valoare, aceasta va fi ataşată tuturor marginilor.

Observaţie! Pentru grosimea bordurii se mai pot folosi valorile: thin (subţire), medium (medie) sau thick (groasă).

border-color - culoarea bordurii. Se pot folosi maximum 4 culori, în ordinea: sus, dreapta, jos şi stânga. Dacă se trece o singură culoare, aceasta va fi ataşată tuturor marginilor.

border-style - se trece în mod obligatoriu. Contrar, bordura nu este vizibilă. Valorile mai importante pe care le poate lua acest parametru se pot observa în figura de mai jos:

solid double groove

ridge inset outset

Diverse tipuri de borduri

2 2 0 Tehnologia Informaţiei ş i a Comunicaţiilor

Se poate impune un stil de bordură pentru toate cele patru laturi:

• border-top-style - stilul bordurii în partea de sus; • border-right-style - stilul bordurii în partea dreaptă; • border-bottom-style - stilul bordurii în partea de jos; • border-left-style - stilul bordurii în partea stângă.

Cum se creează un stil pentru un anumit element?

Elementului i se asociază un nume prin atributul id=" nume" . În loc să scriem stilul pentru un element (de exemplu p), scriem pent:tu "#nume".

Exemplu: avem două paragrafe şi pentru primul am creat un stil (am stabilit culoarea de fond). Al doilea se afişează fără stil:

<html> <he ad> <style> #pl { background-color : green ; </style> </head> <body> <p id="pl " > Un text oarecare <p> Alt text oarecare </p> </body> </html>

Alt text o are care

</p>

De asemenea, prin CSS se pot defini clase de elemente. Descriem un stil de afişare prin " .nume { }" şi o vom apela, de câte ori avem nevoie prin class=" nume" .

Exemplu: descriem un stil printr-o clasă şi apoi o utilizăm apoi pentru diferite tipuri de elemente:

<html> <he ad> <style> . stil {background-color :black ;

color : yellow ; font-size : 12 ; } </style> </head> <body> <p class=" stil " > un paragraf . </p>

-

Un cuvant D .

11rt1GGHI

<p> un cuvant <b class=" stil" >stilat</b> . </p> <a class=" stil" href=" . . . " >link cu stil</a> </body> </html>


Observatii '

� Pentru a obţine rezultatul exemplului anterior, se poate folosi şi varianta cu atributul id, rezultatul fiind identic.

� Dacă se doreşte o clasă pentru un anume tip de element (să zicem, un paragraf), stilul se defineşte astfel:

p . Stil { background-color :black } ;

Dacă efectuăm această modificare în exemplu, link-ul şi cuvântul scris cu bold nu vor mai avea nici un stil, deoarece nu sunt de tipul P.

Un cuvant stilat.

Link cu stil

Modal ităţi de aşezare în pag ină a elementelor

În CSS există posibilitatea să se aşeze elementele în poziţiile dorite (alta decât cea în cazul fluxului normal) . Această posibilitate este dorită de mult timp de către creatorii de pagini web. O astfel de aşezare se poate face prin utilizarea atributului position, care poate lua mai multe valori:

•!• static - implicit - aşezarea se face în flux normal;

•!• absolute - aşezare În poziţii absolute - există, totuşi, anumite nuanţe, motiv pentru care vom da mai multe exemple pentru a vă lămuri.

Exemplu: un paragraf şi un tabel sunt aşezate în flux Un text oarecare normal. O celulă a tabelului conţine o imagine:

<p> Un text oarecare <table border=" 3 " > <tr>

<td> All </td> <td id=" tata ">

<img src=" c : \poze\cladire . jpg" ></td></tr> <tr> <td> A21 </td> <td> A22 </td></tr> </table>

Adăugăm componentei <img> un stil, prin care-i precizăm poziţia. Poziţia este dată în pixeli prin atributele top şi left. In acest caz, deplasarea este dată faţă de colţul din stânga-sus al ferestrei:


<style> img {position : absolute ; left : 30px ; top : 50px ; } </style>

Un text oarecare

<p> Un text oarecare <table border=3>

<tr> <td>All</td> <td id=11 tata11 >

<img src=11 c : \poze\cladire . jpg11 ></td></tr> <tr>

<td>A21</td> <td>A22</td></tr> </table>

Pare simplu, nu-i aşa? În realitate, lucrurile sunt puţin mai complicate. Aceasta se întâmplă atunci când elementul părinte este poziţionat în flux normal.

Exemplu: elementul părinte al lui <img> este elementul <td> (nu <table>). Poziţionăm absolut şi elementul <td>. Observăm că, în acest caz, elementul apare În afara tabelului, iar <img> este poziţionat relativ faţă de <td> (vezj figura alăturată).

Un text oarecare

<style> img { position : absolute ;

left : 30px ; top : 50px ; #parinte_td { position : absolute ;

top : lOOpx ; left : lOOpx ; </style>

<p> Un text oarecare <table border=" 3 " > <tr>

<td> All </td> <td id=11parinte_td11 >

G\11J ��

<img src=" c : \poze\cladire . jpg" > a21 </td> </tr> <tr>

<td>A21</td> <td>A22</td> </tr> </table>

�21]

Ideea de bază este următoarea: dacă un element este poziţionat absolut şi dacă părintele său, părintele părintelui, . . . . sunt poziţionate în flux normal, atunci elementul este poziţionat în raport de colţul din stânga-sus al ferestrei. Dacă parintele este poziţionat absolut, atunci elementul este poziţionat relativ faţă de părinte.


Exemplu: de această dată, poziţionăm absolut tabelul şi imaginea. Aşa cum era de aşteptat, unagmea se aliniază în raport de colţul tabelului.

<style> img { position : absolute ;

left : 30px ; top : SOpx ; table { position : absolute ;

top : lOOpx ; left : lOOpx ; </style> </head> <body> <p> Un text oarecare <table border=3>

2 2 3

Un text oarecare

Observaţie ! Pentru pozjţionarea absolută, orice element pozjţionat în flux normal se consideră că se află la coordonatele (O,O)Jaţă de părintele său. Cu această constatare, un element este poziţionat, de fapt, relativ faţă de părinte.

Valoarea relative - spre deosebire de poziţionarea absolută, în cazul poziţionării relative, un element este poziţionat În raport de elementul părinte, chiar şi în cazul în care acesta din urmă este pozionat în flux normal.

Exemplu: mai jos, elementul <img> este poziţionat Un text oarecare relativ faţă de elementul părinte (<td>):

<html> <head> <style> img { position : relative ;

left : 30px ; top : SOpx ; </style> </head> <body> <p> Un text oarecare <table border=" 3 " >

<tr> <td>All</td> <td id="parinte_td" >

A1 1

<img src=" c : \poze\cladire . jpg" > a21 </td> </tr> <tr> <td>A21</td> <td>A22</td> </tr>

</table> </body> </html>

Observaţie! Atributele pot lua şi valori negative.


Atributul display

Am învăţat faptul că în HTML există elemente de tip bloc (block), care se afişează la început de rând şi singure pe linie şi elemente de tip text (inline) care se afişează în continuarea rândului curent.

Există posibilitatea de a schimba modul implicit de afişare, prin utilizarea atributului diplay. Acesta poate lua următoarele valori:

•!• block- elementele se afişează la început de rând.

Exemplu: un element de tip bold va fi afişat block, deşi, implicit, se afişează inline:

<html> <he ad> <style> b { display :block ; } </style> </head> <body> <p> Un <b>text</b> oarecare</p> </body> </html>

Un teii: oarecare

•!• lnline - elementele se afişează în continuarea rândului curent.

Exemplu: implicit, paragrafele se afişează la început de rând (block). De această dată, se afişează inline:

<html> <he ad> <style> p { display : inline ; } </style> </head> <body> <p> Un text oarecare </p> <p> Alt text oarecare </p> </body> </html>

Un text oarecare JJt text oarecare

•!• none - elementul (elementele) nu se va afişa.

� I I ..:J


Aplicarea sti lurilor prin fi�iere CSS externe

Până acum am învăţat cum să aplicăm anumite stiluri pentru o pagma web. Ce se întâmplă dacă ne dorim ca un anumit stil să :fie aplicat pentru toate paginile HTML aflate pe serverul nostru? O primă soluţie ar fi să copiem de :fiecare dată codul corespunzător în interiorul elementului <style>. Dar, dacă am vrea să facem o mică modificare, ar trebui să o efectuăm pentru :fiecare fişier în parte, operaţie extrem de neplăcută. Există totuşi o soluţie mult mai elegantă: scriem toate stilurile necesare într-un fişier pe care-l salvăm cu extensia .css.

=> importăm apoi acest fişier în :fiecare document HTML prm scrierea următorului cod între tag-urile <head> şi </head>:

<link rel=" stylesheet" type=" text/css" href=" stil . css" >

Elementul <link> reprezintă modalitatea prin care definim legătura între cele două :fişiere (css şi htm�. Acesta are următorii parametri:

rel - defineşte tipul de fişier css; type - indică browser-ului în ce limbaj este scris codul;

href - se specifică locaţia :fişierului (dacă fişierul css nu se găseşte în aceiaşi locaţie cu cel html, se scrie adresa completă a sa) .

Pentru a înţelege mai uşor, vom prezenta această tehnică printr-un exemplu.

Exemplu: În primul rând, trebuie să definim toate stilurile pe care dorim să le utilizăm pentru site-ul nostru. După ce am ales cam tot ce ne trebuie pentru a avea un design interesant, trecem la crearea :fişierului CSS. Deschidem aşadar programul Notepad şi scriem într-un fişier nou codul dorit. Apoi, îl salvăm, de exemplu, " stil.css" :

JJ stil.css - Notepad

Fi le Edit Format View Help #pl { t ext -decor at i on : un:der l i ne ; } #p2 { font -wei ght : bol d ; f ont -farni l y : cal i br i ; }

De acum, putem să aplicăm acest stil oricărui fişier HTML, introducând la <head> codul prezentat anterior. Pagina următoare va utiliza acest stil:


<html> <he ad> <link rel=11 stylesheet11 type=11 text/css11 href=11 stil . css11 > </head> <body> <p id=11pl 11 > Exemplu de cod html <p id="p2 " > Stilul este aplicat printr-un fisier extern </body> </html>

L � r, I� C:\Users\Vlad\Desktop\test.html

X Go gle i Exemplu de cod html Stilul este aplicat printr-un fisier extern

P • c x l le c,,

Se observă faptul că pagina obţinută se comportă identic cu cea În care am fi introdus direct stilul la tag-ul <style>. Modificând un singur fişier (cel cu extensia .css), putem să dăm o nouă înfăţişare întregului site !

Aplicarea sti luri lor inl ine

Aşa cum aţi Învăţat, un stil poate fi înglobat în pagina web utilizând eticheta <style> sau cu ajutorul unui fişier extern, care trebuie legat cu ajutorul tag-ului <link>. Există însă şi o a treia modalitate de a stabili un stil şi anume inline, direct în interiorul elementului căruia dorim să-i aplicăm stilul, folosind atributul style=" stil'.

Exemplu: priviţi codul HTML de mai jos:

<html> <he ad> </head> <body> <p style=" font-family : tahoma ; font-size : 1 6px ; " > Acesta este un paragraf stilizat inline </p> </body> </html>

Pentru elementul p a fost stabilit un stil cu ajutorul atributului style.


Combinarea modurilor de util izare a stilurilor

Putem acum să definim noţiunea completă a foilor de stil şi anume, foi de stil în cascadă (Cascading Style Sheet) . După cum am prezentat, există 3 metode prin care se poate specifica un stil: înglobat în fişierul HTML (cu <style>), prin fişier extern (cu <link>) sau inline (cu atributul style) . În anumite situaţii, nu este suficientă o singură metodă, iar combinarea acestora este interpretată de browser-ul web astfel:

•

•

•

foile de stil externe Oegate) sunt aplicate global; un stil înglobat anulează efectul celui extern Oegat); stilul inline anulează ambele stiluri: extern şi înglobat.

Astfel, spunem că pagina web este stilizată "în cascadă".

Exemplu: analizaţi codul de mai jos - observaţi faptul că al doilea paragraf a fost stilizat inhne, ceea ce anulează stilul generic pentru paragrafe, impus prin modul înglobat:

<html> <he ad> <style> p { text-decoration : underline ; } </style> </head> <body> <p> Paragraf stilizat in mod inglobat . </p> <p style=11 text-decoration : none ; 11 > Stilizat inline </p> </body> </html>

L Paragraf stilizat in mod înglobat_

Stilizat :iriline


Elementele generice <div> şi <span>

Aceste două elemente, împreună cu atributele id şi class, oferă un mecanism prin care putem implementa structuri de tip inline (<span>) sau bloc (<div>) . Foarte important este că, spre deosebire de un element ca <p> (paragraf), acestea două nu impun nici un fel de stil pentru conţinut. De aceea, se utilizează împreună cu limbajul CSS pentru a le modifica în funcţie de necesitate. Pentru a fi mai uşor de înţeles, analizaţi următorul fişier HTML:

<html> <he ad> </head> <body> Text inainte de DIV <div> Text in interiorul lui DIV <p>Un paragraf in DIV</p> Text in interiorul lui DIV </div> Un element dupa DIV

Text inainte de DIV

Text in interiorul lui DIV

Un paragrafin DIV

Text in interiorul lui DIV

Un element clupa DIV Text inline cu SP AN

<span>Text inline cu SPAN</span> </body> </html>

Observatii '

v' Elementul <div> nu are câte un rând de spaţiu înainte şi după el.

v' Dacă introducem un paragraf În interiorul lui <div>, acesta lasă câte un rând ca spaţiu, deci se comportă normal.

v' Conţinutul elementului <span> se scrie În continuarea textului de după <div>. De altfel, el este cel mai des utilizat pentru a seta un anumit stil pentru o porţiune de text. De exemplu:

<STYLE> . stil {

font-family : Arial ; </STYLE>

<P>Un text care are un

Un text care are un cuvant cu stil.

<SPAN class=" stil" >cuvant</SPAN> cu stil . </P>

v' În concluzie, dacă dorim să avem un control deplin asupra modului de afişare a textului sau a unor elemente, putem utiliza <div> şi <span> împreună cu limbajul CSS.


Includerea animaţ.iilor Flash

În general, browser-ele au anumite mecanisme specifice pentru a afişa diferite tipuri de date, cum ar fi: text, imagini (.gif, .jpg), culori, fonturi, etc. Pentru a afişa animaţiile (fişiere cu extensia .swf) dezvoltate cu programul Adobe Flash, trebuie instalată aplicaţia Adobe Flash Player.

Să presupunem că avem fişierul "animatie.swf' şi dorim să-l introducem într-o pagină web. Vom utiliza codul de mai jos:

<object type=" application/x-shockwave-flash" data=" animatie . swf" width=11 300 11 height=11 200 11 > <param name=" movie" value=" animatie . swf ">

</object>

,/ Nu este singura variantă existentă, însă codul de mai sus poate fi vizualizat corect pe orice browser web.

,/ Modificaţi valorile parametrilor elementului <object> în funcţie de fişierul pe care doriţi să-l afişaţi.

Exemplu: pentru a putea maipula uşor elementul <object>, este recomandat ca acesta să fie Încadrat de un element <div> - permite o poziţionare facilă În cadrul documentului HMTL:

<div style="margin : lOpx ; "> <object

type=" application/x-shockwave-flash" data=" animatie . swf" width=" 300" height=11 200 11 > <param name=" wmode" value="transparent"> <param name=" movie" value=" animatie . swf ">

</object> </div>

,/ Observaţi apariţia unui nou parametru ş1 anume wmode, care pentru valoarea transparent impune ca fundalul obiectului flash să fie transparent, comportându-se similar unui fişier . png.


3 . 1 2 . Aspecte generale ale proiectării

interfeţelor web

Problema la care încercăm să răspundem în acest paragraf este următoarea: cum este bine să arate o pagină web? Vă daţi seama că, la această întrebare, nu se poate da un răspuns precis, dar se pot prezenta anumite reguli de care este bine să ţineţi cont. Cel mai important este conţinutu/paginii, care trebuie să fie actualizat frecvent - el este cel care determină ca respectiva pagină să fie vizitată!

Haideţi să pornim de la un exemplu simplu: ştim noţiunile de bază ale limbajului HTML şi un fotograf profesionist apelează la noi pentru un site care să-i descrie simplu şi la obiect activitatea. Deoarece "clientul" nostru nu este şi nici nu este necesar să fie familiarizat cu elementele tehnice, trebuie să-l întrebăm ce informaţii doreşte să fie incluse pe site. În mod evident, acesta ne va spune că doreşte să-şi prezinte lucrările anterioare (portofoliul), datele de contact, eventual o scurtă descriere a sa şi a echipamentului pe care-l utilizează şi onorariul pentru diversele servicii pe care le oferă. Reţinem toate informaţiile amintite anterior şi îi cerem, de asemenea, o serie de fotografii pe care le consideră reprezentative.

Să trecem la treabă! În primul rând, informaţiile trebuie să fie bine structurate, pentru ca vizitatorul să nu piardă timp la identificarea acestora. Din prima discutie cu "clientul", am obtinut structura site-ului - ne trebuie o ' ' pagină separată pentru fiecare categorie:

1. descrierea fotografului şi a activităţii pe care o profesează;

2. portofoliul care cuprinde o serie de fotografii de la diverse evenimente;

3. datele tehnice privitoare la dispozitivele fotografice, la studio, etc.;

4. preturile în functie de serviciile oferite; ' '

5. datele de contact (telefon fix, mobil, e-mail, adresa studioului, etc.);

Pentru a nu plictisi potenţialii vizitatori, pe pagina principală a site-ului (index-ul) vom introduce prima categorie de informaţii, care vor oferi o prezentare generală a activităţii "clientului". De asemenea, accesul la celelalte pagini trebuie să fie facil, de unde rezultă necesitatea unui meniu format din hiperlegături către acestea.


Site-ul web trebuie s ă urmărească un anumit tipar, pentru a oferi unitate ş1 continuitate interfeţei. Rezultă că toate paginile trebuie să aibă părţi comune, cum ar fi un antet, aceeaşi culoare de fond, acelaşi font, etc., iar meniul menţionat anterior trebuie să fie prezent pe fiecare pagină. Multe ar putea fi spuse aici . . . de exemplu, aveţi grijă să:

• evitaţi culorile stridente sau nepotrivite, animaţiile în exces şi mesajele prin care i se explică vizitatorului că, apelând la serviciile oferite, "a dat norocul peste el";

• verificaţi din când în când dacă link-urile externe (care sunt binevenite) spre paginile web indicate de acestea mai există sau nu;

• nu utilizaţi diverse efecte vizuale sau sonore, doar pentru a arăta vizitatorlui ce grozavă este echipa care a creat site-ul - important este ca ele să aibă sens în contextul paginii.

Ar fi dificil de prezentat modul de implementare complet al unui site web pentru că necesită o multitudine de linii de cod şi ferestre. Pur didactic, prezentăm o variantă mult simplificată a site-ului (pagina de contact), în figura de mai jos:

� Bine ati venit! - Microsoft Internet Explorer

J File Edit View Favorites Tools Help

J +o Back " -t " @ @'] � I �Search

J Address I l.€!1E:tmttmm1 :::J �Go

� � -'1 Home Portofoliu Date telurice Preturi Contact U �. Telefon fix: 021-„

T elefon mobil: 0723-. .

E-mail: <lan andone@fotoando ro

A1h·esa stmlio: Str. M. Kogalniceanu nr . . . „ Bucurest:i

IID Dane 111 1@ My Computer

Exemplu simplu de site web


Titlul "Daniel Andone - fotograf profesionist" (element <h2>), poza din colţul din dreapta-sus, meniul (tabel cu cinci coloane), culoarea de fond şi zona de text (în figură, un tabel cu patru linii) se repetă pe fiecare pagină a site-ului, pentru a oferi continuitate navigării. Practic, putem avea patru pagini aproape identice, singura diferenţă fiind textul din zona de culoare albă.

Bineînteles, acest exemplu este rudimentar şi trebuie luat ca atare. Dvs. puteţi realiza pagini mult mai complexe . . .

Un ultim pas, foarte important, pe care-l aveţi de făcut este testarea cu atenţie a documentului realizat. Nimic nu este mai deranjant decât o pagină care nu poate fi deschisă sau o imagine care nu poate fi afişată - denotă lipsă de profesionalism din partea realizatorului. Bineînţeles, nimeni nu este prefect!

Testaţi site-ul pe o varietate cât mai mare de browser-e: Internet Explorer (versiunile 7, 8 şi 9), Mozilla Firefox, Google Chrome, etc.

Codul sursă pe care l-aţi implementat trebuie să fie bogat În comentarii cât mai sugestive, pentru că, de cele mai multe ori, persoana care realizează site-ul web nu este si cel care-l "întretine" În mod curent. Vă dati seama cât de :r ' ' dificil ar fi să caute prin sute de linii de cod sau să incerce să înţeleagă mecanismul dezvoltat de dvs . . . .

Se pot realiza "minuni" prin utilizarea programelor profesioniste de prelucrare a imaginilor, cum ar fi Adobe Photoshop. De asemenea, o animaţie haioasă dezvoltată cu programul Adobe Flash poate să capteze atenţia vizitatorilor În mod favorabil. Merită măcar o Încercare . . .

Poţi fi un excelent programator web, dar dacă nu ai o anumită înclinaţie artistică, nu vor ieşi "din mâinile tale" pagini frumoase. Apelează, dacă este cazul, la persoane care au această înclinaţie artistică.

Pentru materiale suplimentare gratuite în format digital, accesaţi:

http:/ /lab.infobits.ro Laborator virtual de Informatică Biblioteca digitală de informatică "Tudor Sorin"


Limbajele HTML şi CSS - probleme propuse

Proiect - lucru în echipă. Prin utilizarea cunoştinţelor dobândite până în acest moment, realizaţi un site pe o temă la alegere. Formaţi grupe de 2-4 elevi care să-şi împartă atribuţiile: un elev să se ocupe cu design-ul site-ului şi unul, doi sau trei elevi să caute documentaţie despre tema propusă (text, imagini sugestive, etc.) . Unul dintre elevi, pe lângă atribuţiile sale, va avea rolul de coordonator al proiectului, iar un altul, se va ocupa la final de testarea site-ului realizat.

Posibile teme (interdiscip/ina-re ):

•!• "Sistemul nostru solar": descrierea :fiecărei planete, elemente de teorie din astronomie, etc.

•!• "Echipa de fotbal favorită": informaţii despre fiecare jucător, o listă cu titlurile câştigate, meciuri importante, etc.

•!• "Clasa noastră". Adunaţi câteva informaţii despre fiecare elev ş1 realizaţi un site despre clasa voastră. Fiţi inventivi! Se pot realiza clasamente după o mulţime de criterii sau puteţi descrie anumite evenimente amuzante care s-au petrecut în trecutul vostru.

•!• "Ştiinţa înainte de toate!". Prezentaţi un om de ştiinţă important: biografia sa, poze, lucrări importante şi citate (de exemplu, puteţi alege dintre: Albert Einstein, Gregar Mendel, Marie Curie, etc.).

•!• "Istorie". Realizaţi o pagină web despre ziua În care România a devenit un stat independent, în urma bătăliei de la Plevna.

•!• "Geografie". Prezentaţi în detaliu, sub forma unui site web, grupările muntoase din ţara noastră, specificând informaţii semnificative despre fiecare în parte.

•!• "Biologie". Creaţi un site care sa prezinte într-o formă amuzantă evoluţia omului pe Pământ!

CAPITOLU L 4

Bazele prelucrării imag i nilor În

Adobe Photoshop

4. 1 . Introducere

Adobe Photoshop este un program deosebit de util pentru realizarea şi editarea imaginilor şi cu ajutorul său se pot crea efecte deosebite. Imaginile astfel obţinute pot fi utilizate pentru crearea paginilor web sau în alte scopuri: cărţi, reviste, etc.

Fereastra principală a programului Adobe Photoshop CS4 Extended (versiunea 1 1.0.2) este prezentată În cele ce urmează:

Meniul principal Bara cu opţiuni Paletele

100% . • Q. �

Bara cu instrnmente Imaginea (spaţiul de lucru)

Capitolul 4 - Bazele prelucrării imaginilor în Adobe Photoshop 2 3 5

Cel care prelucrează imaginile poate comanda programul prin:

•

•

•

•

meniul principal - conţine toate comenzile programului;

bara cu instrumente - ideea este de a selecta un anumit instrument cu ajutorul căruia se pot efectua prelucrările dorite la un moment dat (în figura anterioară este selectată unealta Move T ool).

,/ În majoritatea cazurilor, un instrument are asociată o listă de instrumente. Din ea se selectează cu ajutorul meniului flotant (clic dreapta) ataşat butonului:

� I E11 1ipse T ool (U) I ro Q Rectangle Tool U

•

O Rounded Rectangle T ool U

Ellipse Tool

Polygon T ool

" Line Tool

Custom Shape T ool

u u u u

,/ Litera trecută în paranteze, după numele instrumentului, trebuie tastată, dacă dorim ca selectarea instrumentului să se facă fără utilizarea mouse-ului.

bara de opţiuni - în general, un instrument are o mulţime de opţiuni prin care putem selecta un anumit mod de utilizare a lui. Toate acestea sunt prezente pe bara de opţiuni. Ea se află afişată sub meniu şi conţinutul ei este specific instrumentului. Iată, de exemplu, cum arată bara de opţiuni pentru instrumentul Rectangular Marquee Tool:

I Style: l.._N_o_rm_a_l __ ....;..=v__,J paletele - reprezintă o altă modalitate de a comanda Photoshop-ul (pe pagina următoare puteţi observa paleta culorilor) . Cu ajutorul lor puteţi obţine anumite efecte în prelucrarea imaginilor. Nu toate paletele sunt vizibile la un moment dat. Pentru a vizualiza (sau ascunde) o anumită paletă, utilizaţi submeniul Window şi bifaţi sau debifaţi corespunzător.


COLOR SWATCHES STYLES •5

� : 6� 6�

B 6�

./ Paleta culorilor Color va avea opţiunile disponibile În funcţie de modul de culoare ales pentru imaginea curentă . . . în exemplul de mai sus, sistemul de culori este RGB.

4. 2 . Crearea, deschiderea, salvarea

şi închiderea unui fişier imagine

Pentru a crea o imagine nouă, se alege comanda New din meniul File, care va afişa fereastra de mai jos:

Name: I Untitled-1 OK

Preset: I Clipboard vi Cancel

Size: 1 Save Preset„ .

Width: 598 pixels vi Delete Preset„ .

Height: 35 pixels vi [ Device Central „ . Resolution: 72 pixels/inch vi

Color Mode: Grayscale V 8 bit vi Background Contents: White vi Image Size:

@ Advanced 20.4K

Implicit, imaginea va avea culoarea de fond alb (Background Contents) - după aceasta puteţi să-i adăugaţi ce elemente doriţi. De asemenea, se poate specifica un nume (Name) pentru fişier, înălţimea (Height), lăţimea (Width), rezoluţia (Resolution) şi sistemul de culori ales (Color Mode) .


De la bun început trebuie s ă menţionăm faptul c ă programul Photoshop este unul complex, nefiind posibilă descrierea tuturor opţiunilor în cadrul acestui material. Rămâne ca dvs. să testati si să încercati toate optiunile oferite ' :r ' ' de program .

.,/ Observaţi faptul că dimensiunile implicite ale unei noi imagini, în cazul opţiunii Clipboard din câmpul Preset, sunt cele ale imaginii reţinute de memoria Clipboard, în cazul nostru . . . chiar figura anterioară, care a fost introdusă în această carte. © Pentru a deschide o imagine aflată pe disc, din meniul File apelaţi Open,

apoi selectaţi fişierul care o conţine. După aceasta, puteţi începe să o prelucraţi.

Puteţi salva o imagine în formatul dorit: .bmp, . jpg, .gif, etc., prin apelul meniului File şi apoi comanda Save As.

Formatul .psd

În Photoshop există un format special: .psd. Salvarea unei imagini cu acest format oferă posibilitatea de a salva şi anumite prelucrări speciale, care pot fi continuate la o reîncărcare a imaginii. Un exemplu în acest sens îl reprezintă conservarea straturilor Oayer-elor), care vor fi detaliate ulterior. Evident, salvarea cu acest format necesită mai mult spaţiu pe hard .

.,/ De regulă, o imagine nefinalizată din punct de vedere al prelucrării se salvează sub format . psd. Dacă este finalizată, o salvăm în formatul dorit: .bmp, .gif, .jpg, .png, etc.

Deschiderea simultană a mai multor fişiere

Aşa cum puteţi observa mai jos, programul Photoshop permite manipularea simultană a mai multor fişiere, fiecare fund afişată ca cea curentă printr-un clic pe bara sa de titlu:

File Edit Image 3D View Window Help


În exemplul anterior sunt deschise două fişiere: Imagine! psd şi Imagine2.psd, ultimul fund cel care este editat în mod curent (bara de titlu este mai deschisă la culoare) .

Pentru a închide fişierul curent, din meniul File se alege comanda Close. Pentru a le închide pe toate, se alege comanda Close AH. În cazul în care unul sau mai multe fişiere necesită salvarea modificărilor, veti fi avertizati în acest sens.

4.3. Selectări

, ,

În vederea prelucrării, copierii şi mutării, există posibilitatea de a selecta una sau mai multe porţiuni dintr-o imagine. În acest scop, bara cu instrumente este înzestrată cu anumite unelte care sunt prezentate În continuare.

Rectangular Marquee Tool

Rectangular Marquee T ool dreptunghiulare din imagine:

permite selectarea unor porţiuni

Rectangular Marquee T ool (M)

Executarea unui clic cu butonul drept al mouse-ului asupra butonului are ca efect afişarea unui meniu cu ajutorul căruia selectăm şi alte forme.

r - � • r- � Rectangular Marquee T ool M L - .J L - .J

Ele pot fi de forma:

„-,, Elliptical Marquee Tool ,_, "'"" Single Row Marquee Tool

Single Column Marquee T ool

• dreptunghi (Rectangular Marquee T ool); • elipsă (Elliptical Marquee Tool);

M

• o linie de pixeli (Single Row Marquee Too�; • o coloană de pixeli (Single Column Marquee T ool);

Capitolul 4 - Bazele prelucrării imaginilor în Adobe Photoshop

Opţiunile sunt prezente pe bara de opţiuni. Să le analizăm:

• Modul în care este tratată o nouă selectie:

New se!ection Intersect with se!ection

Add to S e!ection S ubstract from se!ection

2 3 9

New selection - dacă este apăsat acest buton, nu este permisă decât o singură selecţie, indiferent de tipul ei. Dacă încercaţi o nouă selecţie, vechea selecţie, dacă există, este anulată.

Add to selection - este permisă selectarea multiplă. În cazul în care două selectări au o suprafaţă comună, se obţine selectarea reuniune. Alăturat observaţi o selectare multiplă care cuprinde un cerc şi reuniunea unui dreptunghi cu un cerc

Subtract from selection - dacă asupra unei selecţii se efectuează o altă selecţie, rămâne selectată prima selecţie, dar din suprafaţa sa dispare selecţia comună. Alăturat, iniţial, a fost selectat un dreptunghi, dar din suprafaţa sa a fost extrasă intersecţia dreptunghiului cu o elipsă.

lntersect with selection - În final, rămâne selectată numai intersectia mai multor suprafete selectate. , , Alăturat, zona selectată a fost obţinută din intersecţia a două elipse.

Feather - zona selectată poate fi înconjurată de o suprafaţă specificată în acest edit ca număr întreg de pixeli:

I Feather: I 10 px 1 I Atunci când se copiază imaginea selectată şi, apoi, se insereaza m altă

parte, suprafaţa specificată este prelucrată din punct de vedere al culorii. Astfel, se obţine o trecere treptată de la culoarea background-ului la cea a imaginii proprm-z1se.


Exemplu: mai JOS, în stânga, puteţi observa cum arată un dreptunghi selectat (cu Feather 10px), iar în dreapta imaginea încadrată într-o nouă fereastră:

zona selectată zona inserată

Anti-alias - marcarea este activă în cazul în care se selectează elipsa. Dacă butonul este bifat, se aplică un algoritm prin care se netezesc marginile zimţate care apar fără voinţa dvs.

0 Anth�lias

Exemplu: mai jos, sunt prezentate două imagini selectate sub formă de cerc, inserate În două ferestre şi mărite. În primul caz nu s-a bifat butonul, iar în al doilea acesta a fost bifat:

nu s-a bifat anti-alias s-a bifat anti-alias

Foarte important: pentru a avea efect, opţiunile Anti-alias şi Feather se marchează înainte de selectarea propriu-zisă.

• Style se referă la modul În care se selectează zonele din imagine. Poate lua valorile care se văd în lista de mai jos:

h Refine Edge. „

Normal - selectarea se efectuează aşa cum suntem obişnuiţi (de exemplu, în cadrul programului utilitar Paint).


Fixed Ratio - dreptunghiul care apare atunci când se efectuează selectarea (sau cel care încadrează elipsa) are lăţimea şi înălţimea într-un anumit raport, dat de valorile trecute în edit-urile width şi height. De exemplu, dacă width reţine 2 şi height 1, lăţimea este de două ori mai mare decât înăltimea. '

I Width: 1�2-� -4!° Height: �I 1_�1 I Fixed Size - dreptunghiul care apare atunci când se efectuează selectarea are dimensiuni fixe, trecute în pixeli în edit-urile Width şi Height, Opţiunea se utilizează atunci când se doreşte obţinerea unei subimagini de anumite dimensiuni .

./ Anularea tuturor selec�lor făcute asupra unei imagini se face din meniu (Select, apoi Deselect - mai rapid, prin combinaţia de taste Ctrl + D) sau cu ajutorul meniului flotant al imaginii, opţiunea Deselect.

Lasso Tool

Lasso tool se utilizează pentru a selecta din imagine obiecte de once formă. Astfel, putem "decupa" dintr-o imagine numai ce ne interesează.

- . ,-------------. p Lasso Tool [ � -><- 'l'--'1 Polygonal Lasso Tool

.,_ y �. -.-·-� __ M_

a_gn_

e_

ti_

c_

L_as_so_To

_o_

1 __ �

Dacă, atunci când cursorul grafic se găseşte pe suprafaţa butonului, se execută un clic cu butonul drept al mouse-ului putem selecta unealta potrivită din meniu flotant:

• Lasso Tool • Poligonal Las so T ool • Magnetic Las so T ool

Lasso T ool. Mai jos puteţi observa modul în care am "decupat" capul câinelui dintr-o imagine şi cum arată inserat într-o fereastră:


Pentru această unealtă, toate opţiunile au fost deja prezentate:

p • j [Q)� [f' � I Feather : I O px 0 Anti-alias

Exemplu: mai jos puteţi observa efectul obţinut pentru aceeaşi operaţie dacă în edit-ul Feather se trece 10px:

Poligonal Lasso Tool. Folosiţi această unealtă pentru a încadra figura selectată într-un poligon oarecare. Vârfurile poligonului se numesc puncte de ancorare. Un segment al poligonului începe după executarea unui clic cu mouse-ul şi se încheie la executarea altui clic. Figura se consideră trasată fie când s-a ajuns în punctul iniţial, fie când se execută un dublu clic, caz în care se trasează automat un segment între punctul în care s-a executat dublu clic şi cel iniţial. Opţiunile sunt aceleaşi ca la Las so T ool.

Magnetic Lasso T ool este o unealtă care ne ajută într-o mare măsură să putem selecta o anumită porţiune dintr-o imagine, porţiune caracterizată printr-un anumit contur. Evident, nimeni nu ne opreşte s-o înconjurăm cu atentie, dar se încearcă o anumită asistentă la această operatie. ' ' '

Mai jos puteţi observa bara de opţiuni. Vom prezenta numai opţiunile noi, specifice acestei unelte:

\fJ • j [5jU" � I Feather: � �Anti-alias I Width: � Contrast : � Frequency: 0

• Width ia valori de la 1 la 40. Se încearcă determinarea automată a conturului imaginii. Detectarea are loc numai pentru zona aflată la mai puţin de x pixeli (x valoarea trecută în edit-ul Width) de cursorul grafic.

•

•

Contrast - ia valori între 1% şi 100% se referă la contrastul de culoare pe care trebuie să-l aibă suprafaţa pe care o selectăm pentru a fi încadrată automat.

Frequency - Ia valori între 1 şi 100. Punctele de ancorare pot fi create printr-un clic, dar pot fi create şi automat. O valoare ridicată reţinută de acest câmp permite crearea automată a multor puncte de ancorare.


Exemplu: cu ajutorul acestei unelte selectăm floarea din stânga. Am folosit: Width: 20, Contrast: 30% şi Frequency: 100%:

Magic Wand Tool

Magic Wand Tool este un instrument minunat pentru a efectua -*selectări de calitate. În mod practic, la executarea unui clic pe imagine ., se selectează pixelii care au aceeaşi culoare sau culori apropiate. Opţiunile sunt următoarele:

•

•

-�, • ] [Qlc:::i !f' � I Tolerance: � D Anti-alias D Contiguous

T olerance, ia valori între O şi 255 şi exprimă diferenţele de culoare permise pentru ca pixelii să fie selectaţi. O valoare mică Înseamnă selectarea doar a pixelilor care au aceeaşi culoare sau cu culori foarte apropiate, iar o toleranţă mare înseamnă selectarea pixehlor de culori diferite.

Contiguous - dacă bifăm acest buton de marcare, se selectează doar pixelii adiacenţi de culori apropiate, contrar se selectează şi pixeli de culori apropiate, dar care nu sunt adiacenţi.

Exemplu: din imaginea din stânga, dorim să selectăm o floare, apoi pe ambele. Pentru selectarea unei flori, încercăm mai multe valori pentru T olerance şi efectul a fost obţinut pentru valoarea 70. Pentru selectarea unei flori bifăm Contiguous, iar pentru selectarea ambelor, nu.

•• •• Contiguous - bifat Contiguous - nebifat


Zoom Tool

Această unealtă ne pemnte să mărim imaginea în diverse scopuri. f'nl Unul dintre scopuri este acela de a permite selectarea cu uşurinţă a � anumitor subimagini din cadrul ei. Se selectează unealta şi se execută clic pe suprafaţa imaginii. Imaginea se măreşte. Se poate executa, din nou, clic, etc.

Exemplu: Figura a) conţine imaginea iniţială. Dorim să copiem doar laleaua. Pentru aceasta vom mări imaginea (Zoom Tool), vom selecta laleaua (b) cu ajutorul uneltei Magnetic Lasso şi o inserăm în altă fereastră (c) :

a) b) c)

Mentionăm unele dintre optiunile uneltei Zoom: ' '

O Resize Windows To Fit O Zoom All Windows [ Actual Pixels [ Fit Screen

o Resize Windows To Fit - măreşte fereastra astfel încât să încapă În ea întreaga figură mărită. Dacă fereastra nu încape pe ecran, ferestrei i se adaugă barele de defilare.

o Zoom AH Windows - măreşte toate ferestrele deschise În acel moment.

o Actual Pixels - dacă apăsăm acest buton, fereastra curentă ajunge la dimensiunile initiale. '

o Fit Screen - măreste sau micşorează nnagmea astfel încât aceasta să încapă în fereastră.


Butonul cu + semnifică mărirea imaginii, iar butonul cu -, micşorarea ei:

-------;.-cc--� -/ Putem folosi ş1 un meniu flotant (clic cu butonul drept asupra imaginii) . Zoom ln are ca efect mărirea imaginii, iar Zoom Out, micşorarea ei.

4.4. Căi. Instrumentul Pen Tool

Fit on Screen Actual Pixels Print Size

Zoom In Zoom Out

O cale este alcătuită din mai multe segmente sau linii curbe. Căile pot fi transformate în selecţii, dar calitatea acestora este cu mult mai bună. Pentru trasarea căilor se utilizează Pen T ool. ITT•o îool

Ţ �-·'Freeform Pen T ool

� • �!ţ+ Add Anchor Point T ool

o- oelete Anchor Point Tool

I' Convert Point T ool

p

p

În bara de opţiuni selectaţi Create new work path:

Dacă utilizăm meniul flotant, observăm că "în spatele" acestui mstrument se găsesc, de fapt, mai multe instrumente. Toate acestea sunt prezentate În această secţiune. Atunci când realizăm căi utilizăm Întregul ansamblu.

•

Pen T ool - functionarea este detaliată în continuare: '

Trasarea segmentelor. Se execută clic în locul în care dorim să fie prima ancoră. Apoi, clic în locul în care dorim să fie a doua ancoră, etc. De fiecare dată când se creează o nouă ancoră este trasat automat un segment între ancora anterioară şi cea actuală. Dacă executăm clic pe prima ancoră figura se Închide şi ancorele nu mai sunt vizibile .

•


,/ Ancora activă (cea afişată cu un pătrăţel plin) poate fi mutată în poziţia dorită aşa cum suntem obişnuiţi (CTRL+ săgeată) . Odată cu ea este mutat şi segmentul care o uneşte cu ancora anterioară.

,/ Oprirea procesului de trasare a căii se face atunci când figura este închisă sau când se execută clic pe unealtă (în bara de unelte) .

Definiţie. Se numeşte punct neted o ancoră în care cele două curbe (una care o precede şi una care urmează) admit o unică tangentă. Pentru un punct neted cele două linii de direcţie sunt În prelungire .

.-------- Punct neted

Definiţie. Se numeşte punct colţ o ancoră în care curba care o precede admite o tangentă şi cea care urmează admite o altă tangentă.

Punct colţ

=> Convert Point T ool - este o unealtă utilizată În modificarea (ajustarea) căilor obţinute cu Pen Tool. De multe ori putem crea cu Pen Tool o figură aproximativă alcătuită din segmente, după care acţionăm cu acest instrument pentru a aduce calea la forma dorită. Mai întâi se selectează instrumentul, după care se execută clic asupra căii. Astfel, toate ancorele devin vizibile:

Executarea unui clic pe o ancoră care este punct rotund are ca efect crearea unui punct colţ şi invers. Dacă, după efectuarea clic-ului tragem într-o anumită direcţie, fără a elibera butonul, se creează un punct rotund


şi apar cele două linii de direcţie în prelungire (vezi mai jos, stânga). Dacă eliberăm butonul şi executăm un clic pe unul din punctele de direcţie, atunci se modifică o singură linie de direcţie, deci avem un punct colţ (vezi, mai jos, dreapta) .

=> Add Anchor Point T ool - dacă selectăm acest instrument, avem posibilitatea de a adăuga o ancoră la o anumită cale în punctul în care executăm clic. Dacă ţinem butonul apăsat şi tragem, apar două linii de direcţie (punct rotund) cu ajutorul cărora putem modela curba pe care am adăugat ancora .

./ Dacă dorim să convertim această ancoră în punct colţ putem să utilizăm Covert Point T ool.

Delete Anchor Point T ool - dacă selectăm acest instrument şi executăm clic pe o ancoră, aceasta este ştearsă, iar ancorele rămase definesc calea.

=> Freeform Pen Tool - permite ca trasarea căii să se efectueze ca şi cum desenăm cu un creion. Practic, se selectează instrumentul şi, ţinând butonul stâng apăsat, se urmează drumul dorit. Ancorele sunt adăugate automat.

Cele mai importante opţiuni ale uneltei Pen sunt:

• Auto Add/Delete - dacă acest buton este bifat, putem şterge o ancoră, mai puţin ultima creată, prin executarea unui clic asupra ei sau putem adăuga o ancoră prin executarea unui clic asupra unui segment sau asupra unei linii din cale.

248

•


Rubber Band - înainte de a crea o ancoră este vizualizat segmentul (curba) care va fi trasat. Este bine ca acest buton să fie bifat pentru că, astfel, trasarea este mai precisă.

U l i � Auto Add/belete I � [[" fEJ � X

Instrumentul Path Selection Tool

Pentru ajustarea căilor (aducerea lor la forma dorită) se utilizează şi instrumentul Path Selection T ool. Cu ajutorul meniului flotant ataşat, observăm că, de fapt, avem două instrumente, cel menţionat anterior şi Direct Selection T ool.

• Dt- Path Selection Tool A

tt- Direct Selection T ool A

::::> Path Component Selection T ool permite selectarea căii în ansamblul ei şi, după fixarea cursorului grafic în orice punct al căii, deplasarea căii în direcţia dorită prin drag-and-drop.

=> Direct Selection T ool permite selectarea căii în ansamblul ei. Fixarea cursorului grafic într-o ancoră permite deplasarea exclusivă a ancorei, aducând astfel calea la forma dorită. De asemenea, executarea unui clic pe o ancoră are ca efect faptul că putem modifica tangentele la curbă .

./ Pentru a obţine o cale de calitate (de formă dorită) se poate trasa calea aproximativă, de exemplu cu Freeform Pen Tool şi ajustarea ei cu Direct Selection T ool.

./ O cale selectată poate fi transformată în selecţie cu ajutorul meniului flotant. Atunci când cursorul grafic se găseşte deasupra ferestrei, se execută clic cu butonul stâng şi se alege Make Selection.


4.5. Layer-e (straturi)

General ităţi

Priviţi imaginea alăturată!

Printr-un procedeu oarecare selectăm maşina şi o copiem în clipboard (din meniu, Edit şi Copy).

Priviţi acum şi a doua imagine!

Vrem să realizăm o nouă imagine, trucată, în care maşina să "zboare". Cele două avioane nu se vor observa în noua imagine.

Pentru a obtine acest efect ' inserăm conţinutul clipboard-ului peste imagine. Efectul se poate observa alăturat. Maşina este "printre nori", iar avioanele nu mai sunt vizibile. Cum a fost posibilă această operaţie?

249

În Photoshop se lucrează cu straturi (layer-e) . Vom prefera denumirea din engleză, "layer".

,/ Există un layer de bază numit Background. Deasupra se pot aşeza, pe rând, alte layer-e .

..r În exemplul dat, Background-ul este imaginea care prezintă în zbor cele două avioane. Peste Background am aşezat layer-ul care reprezintă maşma.


,/ Pentru a putea lucra cu layer-e se foloseşte paleta de mai jos:

LAVERS CHANNELS PATHS •=

I Normal v I Opacity: I 100% > I

Dacă nu este deja afişată, se apelează din meniul Window comanda Layers.

,/ Observaţi faptul că se afişează informaţii despre layer-e (în exemplu: unul numit Layer 1, maşina inserată şi Background-ul).

Instrumentul Move Tool

Revenim la exemplul precedent. După ce inserăm maşina în noua imagine trebuie s-o aşezăm În poziţia dorită. Pentru aceasta selectăm Move Tool.

=> Move Tool se utilizează pentru a aşeza layer-ul în poziţia dorită.

•

•

Practic, se execută clic cu butonul stâng, iar poziţia se obţine prin drag-and-drop (deplasăm cursorul grafic ţinând butonul apăsat). De asemenea, prin utilizarea acestei unelte se pot face redimensionări, rotiri şi deformări ale imaginii. Opţiunile sunt:

+ • I O Auto-Select: ._I L_

a_ye_

r _ _._v_,,I 0 Show Transform Controls

Auto Select: Layer - aşa cum am arătat, o imagine poate conţine mai multe straturi. Dacă această opţiune nu este bifată, atunci putem muta numai layer-ul pe care l-am introdus ultima dată. Nu contează locul unde se găseşte cursorul grafic, layer-ul se mută dacă se ţine butonul stâng apăsat şi se trage. Contrar, se poate muta oricare alt layer, dacă suprafaţa sa este accesibilă.

Show Transform Controls - dacă acest buton este bifat, atunci layer-ul apare încadrat într-o cutie cu ajutorul căreia putem mări, micşora, roti sau deforma imaginea reţinută de el. Schimbarea dimensiunilor se poate


face aşa cum suntem obişnuiţi. Aşezăm cursorul într-unul din pătrăţelele care încadrează cutia şi tragem în sensul dorit. Observaţi faptul ca tn

centrul cutiei apare un semn grafic. Acesta indică centrul de ( rotaţie. El poate fi mutat prin drag-and-drop În poziţia dorită. Pentru a roti layer-ul se aşează cursorul grafic în afara unui colţ. Acesta va lua forma grafică alăturată. Apoi, fără a elibera butonul, se trage în direcţia dorită.

Imediat ce începem prelucrarea layer-ului se afişează opţiunile de mai jos:

8 X: J 324.5 px J 6 Y: J 2so.o px 1 1 W: J 100.0% I � H: I 100.0% 1 1 ....:. �0 I H: �0 V: �0

a) Centrul de rotaţie se stabileşte cu ajutorul butonului alăturat. El este � dat de pătrăţelul negru. Putem executa click pe orice alt pătrăţel, caz în OOă care acesta devine centru de rotaţie. Pătrăţelul din mijloc poate fi deplasat prin drag-and-drop oriunde se doreşte (are o facilitate în plus).

b) X, Y - coordonatele punctului în jurul căruia se efectuează rotaţia. Modificarea acestor coordonate conduce la modificarea poziţiei layer-ului.

c) W, H - se utilizează pentru a modifica lătimea, respectiv înăltimea cutiei care afişează layer-ul. În cele două edit-uri se �rec valorile procen�ale faţă de lătimea şi înăltimea initială. , ' '

d) Rotaţia - în grade. Putem roti cutia în jurul punctului stabilit L. [o.o doar trecând o valoare între -180 grade şi 180 grade. Valorile pozitive corespund sensului acelor de ceasornic (invers trigonometric) .

e) H, V - oblicitate. Imaginea reţinută de un layer poate fi deformată. Aceasta se realizează prin încadrarea imaginii într-un paralelogram. Semnificaţia valorilor care trebuie reţinute de H şi V rezultă din figura de mai jos:


Opacitatea (traneparenţa) layer-elor

Priviţi cele două imagini de mai jos:

.':_ � � � ' .

„ -� :.• � �

Urmărim să creăm o nouă imagine (vezi alăturat) în care se lasă impresia că o parte din a doua imagine se află pe desktop-ul. Pentru aceasta vom proceda astfel:

1. Selectăm din a doua imagine partea pe care dorim s-o inserăm pe desktop ş1 o copiem în clipboard (Edit şi Copy).

2. Inserăm imaginea copiată (conţinutul clipboard-ului) pe imaginea care conţine calculatorul (Edit şi Paste), după ce fereastra care cantine calculatorul devine ' activă. Astfel am creat un layer.

3. Cu Move Tool aşezăm layer-ul în poziţia dorită şi îi schimbăm dimensiunea astfel încât să apară exact pe desktop.

4. Problema este dată de faptul că imaginea introdusă acoperă în Întregime ecranul şi, de fapt, dorim ca icon-urile să fie vizibile. Acesta este momentul în care trebuie modificată opacitatea l�er-ului, care trebuie să devină semitransparent.


5 . Apelăm paleta Layers (din meniu, Window şi Show Layers) . Executăm clic pe Layer 1 (cel care conţine imaginea adăugată) . Observaţi lista grafică Opacity:

LAYERS CHANNELS PATHS •§ I Normal v I Opacity: 32% >

-J1-----

Bdckgrovnd

.,/ Opacitatea ia valori între 0% şi 100%. (total transparent şi opac) . Prin drag-and-drop asupra acului indicator stabilim valoarea dorită. În timp ce stabilim valoarea, se poate observa efectul asupra imaginii .

.,/ Observatie: orice layer (în afară de Backgroundj poate avea opacitatea pe care o doriţi.

Vizualizarea numai a unor layer-e

Aşa cum am arătat, o imagine poate fi alcătuită din mai multe layer-e. Există posibilitatea de a vizualiza numai unul dintre ele sau numai a unora. Din acest punct de vedere, Background-ul se comportă ca oricare alt layer. Paleta layer-elor ne permite să le vizualizăm selectiv. Executaţi clic pe oricare din indicatoarele de vizibilitate ale unui layer şi acesta nu va mai fi vizibil. Dacă executaţi din nou clic în acelaşi loc, va deveni din nou vizibil.

Vizjbilitate Layer 1

Vizjbilitate Background

Exemplu: pentru aplicaţia anterioară dorim să vizualizăm exclusiv layer-ul 1. Mai jos puteţi observa efectul obţinut şi paleta layer-elor. Nu uitaţi ca layer-ul 1 este parţial transparent. Aceasta explică imaginea mai puţin clară, acoperită, parcă, de o "tablă de şah".


LAVERS CHANNELS PATHS ... =

I Norm.al v I Opacity: � > ] Lock: O ,d + fi Fili: i 100% >

v" Vă întrebaţi probabil: ce semnificaţie are acea "tablă de şah", prezentă În imagine?

Răspuns. semnifică zona în care layer-ul este transparent. Întrucât, în exemplu, imaginea este semitransparentă, ea este vizibilă chiar şi în imagine. Mai mult, acest exemplu ne învaţă faptul că layer-ul ocupă întreaga suprafaţă a imaginii, nu numai o anumită porţiune a ei. Faptul că, uneori, îl vedem numai într-o parte a imagum, nu înseamnă altceva decât faptul că în rest este transparent!

Ordinea layer-elor

Dispunem de imaginile de mai jos:

De asemenea, prin File şi New creăm o fereastră în care vom construi noua imagine care va conţine cele două maşini. Pentru aceasta, selectăm, pe rând, printr-un procedeu oarecare, din primele imagini cele două maşini (Edit, Copy) şi le inserăm în noua imagine (Edit, Paste) .

v" Desigur, am fi putut selecta doar o maşină pe care am fi inserat-o În imaginea care conţine cealaltă maşină, dar am procedat aşa din considerente didactice.

Inserarea se face în ordinea: maşina din stânga, apoi cea din dreapta. După aşezarea celor două layer-e aşa cum dorim (cu instrumentul Move Too�, imaginea obţinută se poate observa în imaginea următoare:


Să vedem acum paleta layer-elor. Background-ul are culoarea alb, pentru că layer-ele au fost aşezate într-o fereastră nouă. Urmează layer-ul corespunzător primei maşini inserate (Layer 1) şi cel corespunzător celei de-a doua maşini inserate (Layer 2) :

� � Layer 1

=> Putem inversa ordinea celor două layer-e prin drag-and-drop. Astfel, în paletă, fixăm cursorul grafic pe Layer 1 şi, ţinând butonul stâng apăsat, tragem către suprafaţa celui de-al doilea layer (mai jos puteţi observa efectu! obţinu� :

Aşa arată conţinutul paletei layer-elor după modificarea făcută:

,/ Layer-ele sunt reţinute în paletă într-o structură de tip stivă. Dacă primul layer (cel aflat in vârful stivei) ar fi opac pe toată suprafaţa sa, nu l-am observa decât pe acesta. Dacă există, background, ca în exemplul nostru, atunci acesta este la baza stivei. Nu este posibil, în absenţa altor operaţii (vom vedea imediat cum se pot face acestea) să inversăm poziţia În stivă a background-ului cu un alt layer.


,/ Se poate transforma background-ul în layer, cu toate consecinţele ce decurg de aici. Executaţi un dublu clic pe cuvântul background. Va apărea o cutie de dialog în care Name: I :l1miJ puteţi introduce numele layer-ului astfel format.

,/ Există şi posibilitatea transformării unui layer în background. Din meniu: Layer, New şi Background from Layer.

Legarea layer-elor

Revenim la imaginea din paragraful anterior. Avem 3 layer-e dintre care doar unul are culoarea alb:

LAVERS CHANNELS PATHS •§ I Normal V I Opacity: i 100% >

Lock: O ,!/ + � Fili : �> J j9i � Layer 2 19' j9i � Layer O

Fără a schimba ordinea layer-elor, putem cu Move Tool să schimbăm poziţia relativă a lor, aşa cum a fost arătat.

În scopul manipulării simultane a două sau mai multe layer-e, acestea pot fi legate. Se selectează două sau mai multe layer-e şi din meniul Layer se alege comanda Link Layers. Mai rapid, se apelează la meniul flotant asociat unuia dintre straturile care participă la legare:

I Select Link.ed Layers Link Layers

Straturile vor păstra această legătură până când operaţia inversă se realizează (prin comanda Unlink Layers din meniul Layer) .


./ Faptul că două layer-e sunt legate nu influenţează În nici un fel ordinea lor (ne referim la afişarea pe verticală) .

./ De acum putem muta în plan orizontal ansamblul celor două layer-e fără a schimba poziţia relativă a imaginilor pe care le conţin .

./ De altfel, puteţi selecta rapid două sau mai multe straturi fără a le lega, ci doar prin selectarea acestora din panoul Layers.

Asigurarea layer-elor

În procesul de prelucrare a unei imagini apare necesitatea ca, odată ce am

rezolvat anumite probleme, să asigurăm munca făcută, astfel încât, din greşeală să nu facem anumite modificări. Astfel există posibilitatea de a asigura unul sau mai multe layer-e! Paleta layer-elor afişează următoarele butoane de validare, pentru layer-ul activ (clic pe numele său) .

Pixelii transparenţi Pixelii care reţin imaginea

Fili: i 100%

Mutarea în plan orii!Jntal Toate la un loc

./ Protecţia pixelilor se referă la o eventuală tentativă de desenare!

./ Dacă bifăm butonul care protejează pixelii netransparenţi, se bifează, automat şi primul buton (pixelii transparenţi).

Crearea şi ştergerea layer-elor

În partea de jos paleta Layer conţine două butoane care permit crearea unui nou layer (cel din stânga) şi ştergerea layer-ului selectat (cel din dreapta) .

Create a new layer Delete layer


De asemenea, puteţi apela la comenzile din cadrul meniului Layer:

View Window Help [!!] Layer, , , Sh1ft+Ctrl+N Background From Layer

( _______________ .-� Group . . .

Adă ugarea de text imagin i lor

Pentru a adăuga text imaginilor se foloseşte instrumentul Type T ool:

T •

� . . --

Ţ Horizontal Type Tool

lT Vertical Type Tool

'):C Horizontal Type Mask Tool

i'):C Vertical Type Mask Tool

T

T

T

T

=> Atunci când selectăm Type Tool spre a scrie şi executăm clic în poziţia dorită, se creează, implicit, un nou layer care va conţine textul. De aici decurg toate facilităţile de lucru cu layer-ele!

,/ Putem scrie pe orizontală (Horizontal Type Tool) sau pe verticală (Vertical Type To ol) .

Opţiunile sunt următoarele:

T I !! I �i c_ali_br_i ---==--v�J I Regular Vi I rr�l 1_2 p_t __ v�i aalsharp Vi I Cil � � I • După cum observaţi, este prezentă o listă de fonturi, o listă de unde puteţi selecta stilul (regular, italic, bold, bold italic), o listă cu mărimea fontului, o listă cu diverse opţiuni pentru grosimea copului de literă, precum şi butoane de aliniere a textului.

• Pe bara de opţiuni veţi găsi şi un buton pentru culoarea font-ului . Dacă executaţi clic asupra lui, va apărea o cutie de dialog prin intermediul căreia veţi putea selecta culoarea dorită.

Pentru a introduce text pe o imagine vom proceda astfel:

1. Se deschide :fişierul care conţine imaginea şi se selectează Type T ool!


2 . Continuăm prin a crea dreptunghiul care va încadra textul. Selectăm font-ul, mărimea, stilul, culoarea. Apoi scriem aşa cum suntem obişnuiţi.

3. După ce am introdus textul, validăm operaţia prin apăsarea butonului corespunzător:

4. Cu ajutorul lui Move T ool, mutăm textul în poziţia dorită, îl rotim pentru a-l aşeza într-o poziţie convenabilă, până când obţinem efectul scontat.

./ Dacă dorim să avem la dispoziţie mai multe posibilităţi de lucru cu textele pe care le introducem, putem apela din meniu paleta caracterelor şi cea a paragrafelor (Window şi Character şi/sau Paragraph) .

4.6. Fi ltre

Filtrele reprezintă un instrument extrem de puternic pentru obţinerea anumitor efecte asupra imaginilor. Ele se pot apela din meniu (submeniul Filter) . În Photoshop CS4 există 14 grupe de filtre. Fiecare grupă conţine, la rândul ei, mai multe filtre. Este greu, dacă nu imposibil, să fie descrise în cuvinte toate filtrele care pot fi aplicate.

Vom prezenta efectul obţinut de câteva filtre care aparţin mai multor grupe asupra unei imagini iniţiale. Desigur, dvs. puteţi Încerca şi alte filtre pentru a le aplica dacă aveţi nevoie de ele.

Imaginea iniţială

Menţionăm faptul că, la aplicarea unor filtre, trebuie precizate valorile unor parametri specifici. Puteţi determina valorile acestor parametri prin încercări succesive.


1. Artistic

Waterco!or Plastic Wrap

2. Distort

Ripp!e G!ass

4.7. Culori

Modele de culoare

O problemă aparte a graficii pe calculator este dată de modul de codificare a culorilor. O modalitate de codificare a culorilor se numeşte model de culoare. În Photoshop se pot folosi mai multe modele de culoare.

A) RGB (Red, Green, Blue). Culorile rezultă dintr-o combinaţie între trei culori fundamentale: roşu, verde, albastru, unde fiecare culoare are o anumită intensitate cuprinsă Între O şi 255. Pentru a preciza culoarea unui pixel sunt necesari 3 octeti. '

B) HSL (Hue, Saturation, Lightness) este un alt model de culoare.

•

•

•

Hue - nuanţa, cuantifică culoarea;

Saturation - reprezintă proporţia în care nuanţa este pură. La valori mici o anumită culoare tinde să se vadă spre gri, iar la valori mari, culoarea apare pură.

Lightness - strălucirea. La valori mici culoarea tinde să se vadă în negru, iar la valori mari, În alb.


C) LAB (Lightness, a, b). Avem:

• Lightness - strălucirea, ca la modelul antrerior; • a - culorile de la verde la magenta; • b - culorile de la albastru la galben.

2 6 1

D) CMYK - fiecare culoare se obţine ca un amestec de Cyan, Magenta, Y ellow şi Black Pentru fiecare culoare se dă un procent între 0% şi 100%. Acest mod se foloseşte în special în cazul în care tipărim imaginea pentru tipografie. Cu ajutorul acestui mod se realizează, de exemplu, coperţile cărţilor "în 4 culori".

E) Grayscale - pentru a reda imagini în tonuri de gri.

,/ Nu ne-am propus aici să prezentăm teoria obţinerii culorilor. Ne mărginim să prezentăm doar cele mai importante aspecte din punct de vedere practic.

,/ Nu orice culoare se poate obţine într-un model, aşa cum s-a crezut o vreme. Totuşi, într-un anumit model de culoare se poate obţine o nuanţă suficient de apropiată faţă de nuanţa dorită.

Canale de culoare

În paragraful anterior am studiat modelele de culoare. Am văzut faptul că fiecare model poate fi descompus în anumite componente. Astfel, modelul RGB poate fi descompus în Red, Green şi Blue. Aceasta conduce la ideea: fiind dată o anumită imagine reţinută într-un anumit model de culoare să se reţină separat informaţii despre fiecare componentă a modului. InformaJiile despre o anumită componentă a modelului de culoare poartă numele de canal de culoare.

Exemplu: o imagine reţinută în modelul de culoare RGB are 4 canale: unul pentru Red, unul pentru Green, unul pentru Blue şi unul pentru ansamblul lor. Canalele de culoare -�---l, === sunt afişate de paleta canalelor (din � memu Window şi Channels). _ __....,._._ Alăturat puteţi observa paleta canalelor pentru o imagine în modelul RGB.


./ Dacă executaţi clic în prima coloană a paletei, canalul respectiv dispare (inclusiv canalul care reţine informaţii de ansamblu) şi imaginea va fi schimbată, deci se obtine un anumit efect. '

./ Fiecare layer are propriile canale de culoare. Prin combinarea canalelor de culoare ale diverselor layer-e se pot obţine efecte deosebite.

Modelul de culoare al unei imagini poate fi schimbat cu uşurinţă. Din meniu, lmage, Mode şi modelul dorit. Imediat ce modelul de culoare a fost schimbat, paleta canalelor afişează canalele corespunzătoare noului model.

Exemplu: imaginea a fost trecută În modelul de culoare CMYK. Mai )OS observaţi ce afişează paleta canalelor de culoare pentru acest model:

Image Layer Select Filter Analysis 30 View W

Mode � 1

Adjustments

Auto Tone Auto Contrast Auto Color

Shift+Ctrl+L Alt+Shift+Ctrl+L

Shift+Ctrl+B

Histograma imagini lor

Bitmap Grayscale Duotone Indexed Color RGB Color

..; CMYK Color

Se dă o imagine într-un anumit model de culoare. Să presupunem, deşi acest aspect nu este esenţial, că modelul de culoare este RGB. Imaginii date i se poate asocia o histogramă. Pentru a vizualiza histograma imaginii apelati la meniu: lmage şi Histogram. Înainte de a prezenta semnificaţia histogra�ei priviţi imaginea şi histograma:


NAVIGATOR HISTOGRAM INFO ------Channel: J Colors

Source : J Entire Image

Mean: 188.39 Levei:

Std Dev: 63.82 Count:

Median: 206 Percentile:

Pixels: 153600 Cache Levei: 1

În partea superioară a cutiei există o listă numită Channel. Alăturat o puteţi observa desfăşurată. Mai precis, pentru fiecare canal există asociată o histogramă. Pentru a o vizualiza este suficient să selectăm în listă canalul respectiv.

Colors

CMYK

Cyan

Magenta

Yellow

Care este semnificatia ei? ' Black Luminosity

Fiind dat un anumit pixel dintr-un canal (de exemplu, Colors

V

Red) el este caracterizat, aşa cum ştim, de o anumită intensitate a culorii (număr natural Între O şi 255). Vom numi nivel (leve� o anumită intensitate a culorii. Astfel avem un nivel O, un nivel 1, . . . şi un nivel 255. Histograma exprimă grafic numărul de pixeli de fiecare nivel (intensitate) .

� Un punct cu nivel scăzut (absenţa culorii) se vede negru, iar unul cu nivel ridicat se vede exact de culoarea respectivă (roşu, în exemplu) .

� După cum aţi observat, se afişează şi o histogramă a luminozităţii de la negru către alb prin tonuri de gri.

,/ Prima treime dintre niveluri (intensităţi) este alcătuită din pixeli cu intensitate scăzută a culorii (întunecaţi) numiţi shadows. Ei se află în stânga histogramei.

,/ A doua treime de niveluri este alcătuită din pixeli cu intensităţi medii ale culorii, numiţi midtones. Ei se găsesc În mijlocul histogramei.

,/ Ultima treime este alcătuită din pixeli cu înaltă intensitate a culorii, numiţi highlights şi se găsesc În dreapta histogramei.

Histograma afişează şi alte date. Mai importante sunt:

264

•

•

•

•

•

•


Mean - media intensităţilor pixelilor care alcătuiesc imaginea;

Standard Deviation (Std Dev) - dispersia - abaterea valorii intensitării pixelilor fată de medie; ' ' Median - valoarea de mijloc a intensităţii pixelilor;

Pixels - numărul total de pixeli ai imaginii;

Level - nivelul indicat de cursorul grafic;

Count - numărul total de pixeli care au intensitatea pixelului indicat de cursor.

Prelucrarea culorilor

Fiind dată o imagine se cere să se prelucreze culorile din care este alcătuită astfel încât în final să arate cât mai aproape de dorinţa noastră. Desigur, enunţul este vag, dar posibilitatea prelucrării culorilor unei lffiagtm este atât de variată încât ne putem lămuri doar pe parcurs.

Dacă din meniu, apelăm lmage şi Adjustments, putem utiliza mai multe procedee de prelucrare a culorilor.

=:} Comanda Levels - va afişa cutia de dialog alăturată. Cutia afişează, după cum am selectat din lista aflată în partea de sus, fie canalul RGB fie canalele care îl alcătuiesc (Red, Green, Blue).

Indiferent de canal, cutia afişează două rigle: Input Lavels şi Output Lavels. Fiecare riglă reprezintă cele 256 de niveluri. Nivelul O este în stânga, iar nivelul 255 în dreapta.

Levels � Presat: §t V -- !;:. c:::::L:J

Chn>el' � � Irp..rt: Leve!s: �

� �

Iii / / / I a � Preview

. .------ --------,, Li � §] OJtput Levels: . " Li §]

A) Input Levels este înzestrat cu 3 glisoare care pot fi "trase" pnn drag- and-drop. Acestea sunt:

• Triunghiul negru (în stânga) pentru tonuri închise la culoare. Se poate trage către dreapta. Semnificaţia: pixelii care au niveluri între O şi locul unde a fost "tras" vor fi toţi negri (deci toţi vor avea nivelul O). Pentru toţi ceilalţi pixeli nivelul se modifică proporţional. Efectul: imaginea se Închide la culoare.


• Triunghiul alb (în dreapta) pentru tonuri deschise la culoare Se poate trage către stânga. Semnificaţia: pixelii care au niveluri între 255 şi locul unde a fost "tras" vor fi toţi albi (deci toţi vor avea nivelul 255) . Pentru toţi ceilalţi pixeli nivelul se modifică proporţional. Efectul: imaginea se deschide la culoare.

• Triunghiul gri (în centru) pentru tonuri medii. Se poate trage către stânga sau către dreapta. Dacă se trage către dreapta, pixelii care se găsesc Între mijloc şi noua poziţie vor avea intensităţi sub medie (evident, proporţional). Prin urmare imaginea se întunecă. Invers, dacă se trage către stânga, pixelii care aveau intensităţi Între mijloc şi noua poziţie vor avea intensităţi deasupra intensităţii medii, deci imaginea se va lumina.

Exemplu: puteţi observa o imagine, inainte de prelucrare şi histograma ei (cea care se afişează atunci când se dă comanda Leve�. Cele două glisoare, triunghiul negru şi cel alb, se trag către centru ca în figura de mai jos, dreapta.

Channe l: RGB

tnput Levels: � JiDD �

Acum puteţi observa efectul precum şi noua histogramă. Aceasta din urmă se afişează atunci când se dă din nou comanda Levels:

Levels

Channel: I RGB ::::=:J �----:! Input Levels: � J1D'D' J2SS'

r I ... „„„„.111111111lllllllll llll�llllll llllllllll�ll llllllll�1111111111n111111111m111111111i. .. „„„„ ... � Foarte important: prin acest procedeu spunem că am mărit contrastul

imaginii. Ce s-a intâmplat? Prin deplasarea celor două glisoare către centrul riglei am comandat ca nivelurile dintre poziţia lor iniţială şi actuala poziţie să fie !ntunecate, pentru triunghiul negru şi luminoase, pentru triunghiul alb. In acest fel, există mai puţine intensităţi diferite pe


o scară de la O la 255. Aceasta Înseamnă că la o nouă vizualizare a histogramei vor exista niveluri pentru care nu există pixeli cu intensitatea corespunzătoare, deci va conţine linii verticale albe. De aici rezultă că există diferenţe mai mari de intensitate Între pixeli, ceea ce are ca efect faptul că detaliile devin mai vizibile.

,/ Cutia este înzestrată cu 3 edit-uri, care memoreză câte o valoare rezultată în urma poziţiilor celor 3 glisoare. Prima, de la stânga la dreapta, pentru triunghiul negru, a doua pentru cel gri, şi ultima pentrui triunghiul negru.

,/ Dacă histograma nu ocupă toată lăţimea riglei, ca în exemplul anterior, atunci se pot obţine substanţiale îmbunătăţiri ale imaginii din punct de vedere al contrastului, mutând glisoarele în locurile de început ale histogramei.

B) Output Levels este a doua riglă - există două glisoare, triunghiul negru şi cel alb. Mutarea lor are alt efect comparativ cu prima riglă.

• Mutarea către dreapta a triunghiului negru are ca efect eliminarea tonurilor întunecate aflate între cele două poziţii. Toţi pixelii cu aceste intensităţi vor avea intensitatea cea mai ridicată, deci imaginea se va lumina.

• Mutarea către stânga a triunghiului alb are ca efect eliminarea tonurilor luminoase aflate între cele două poziţii. Toţi pixelii (cu aceste intensităţi) vor avea intensitatea cea mai scăzută, deci imaginea se va întuneca. Testaţi!

=> Auto Tone. Auto Color şi Auto Contrast permit îmbunătăţirea automată a calităţii imaginii:

Image Layer Select Filter Anali,.

Mode

Adjustments

Auto Tone Shift+Ctrl+L Auto Contrast Alt+Shift+Ctrl+L Auto Color Shift+Ctrl+B

=> Curves afişează o cutie de dialog prin intermediul careia se poate îmbunătăţi calitatea imaginii. Aşa cum am văzut, fiecare punct se


presupune a fi caracterizat de o anumită intensitate a culorii. În modelul RGB intensitatea ia valori între O şi 255. Punctele de intensitate O sunt cele foarte închise, iar cele de intensitate 255 sunt cele deschise la culoare.

Cur-ros � Preset: I 0etaUt crara�[R=OO======v[��

[(3 .J'

În graficul afişat de cutie, pe orizontală se găsesc punctele iniţiale ale imaginii, iar pe verticală cele finale (după transformare) . Grqficul exprimă transformarea ce are loc asupra imaginii.

OUtput: 197

. Input: � 49

A Iniţial el este reprezentat de prima bisectoare.

Inseamnă că un punct de intensitate O la intrare va avea intensitate O la ieşire, iar un punct de intensitate 1 la intrare va avea intensitate 1 la ieşire, ş.a.m.d. Înseamnă că n-a avut loc nici o transformare asupra imaginii. Putem modifica graficul astfel încât intensitatea la intrare să fie diferită de intensitatea la

o OShow °"'"'

� Preview

ieşire. Practic se execută clic pe curbă şi se trage în directia dorită. În punctul astfel obtinut s-a creat o • a

' ' ancoră. Ancora reprezintă un punct al acestui grafic care va rămâne fix. Graficul se "mulează" automat după ancore, dar va trece Întotdeauna prin punctele fixe, reprezentate de ele!

=> Brightness/ Contrast - Puteţi stabili rapid, dar nu cu prec1z1e foarte mare strălucirea şi contrastul imaginii. Reglarea se face prin deplasarea celor două glisoare.

=> Prin comanda Hue/Saturation putem schimba canalele modelului de culoare HSL. De altfel, acest model nu este disponibil pentru a converti imaginea în el, dar după cum vedeţi putem să-i modificăm canalele, indiferent de modelul de culoare în care se găseşte imaginea.

=> Desaturate transformă imaginea color într-una alb-negru. Totuşi, modelul de culoare se păstrează. Dacă imaginea era, de exemplu, în RGB, rămâne tot în RGB.


Stabil irea culorilor

Presupunem că dorim să desenăm. Există o unealtă care permite selectarea culorii pe care o folosim la desen. Simultan, se lucrează, aşa cum suntem obişnuiţi din Paint, cu două culori: culoarea de prim plan (foreground color) şi culoarea de fond (background color)

Foreground color

� Culori implicite/ (negru şi alb)

inversarea culorilor Foreground - Background

Background color

� Pentru realizarea desenelor există unelte specializate. Deocamdată prezentăm modul în care selectăm culorile.

Cutia Color Picker. Executaţi dublu clic, fie pe culoarea de fond, fie pe cea de prim plan. Va apărea cutia de dialog alăturată, în care puteţi stabili culoarea, aşa cum sunteţi obişnuiţi din Paint. Din acest motiv nu vom insista asupra modului în care

Color Picker (Foreground Color) �

formari culoarea. '

Dacă deschideri o nouă ' fereastră pentru a desena D Only Web Cobs

aveţi grijă să nu fie în modelul

0 H' EJ • os, El% o., El% o., [!] O G' Ej

O <JQ B, El • [§:@

Car.:el

[ Arjj To Swatches I I coo Lb..,, I

Grayscale, caz în care nu aveţi cum să fixaţi o culoare care nu aparţine acestui model.

� Observaţi faptul că o culoare poate fi selectată fie cu cele două glisoare, fie prin trecerea valorilor în edit-urile unui model de culoare. Mai mult, se pot trece parametrii în modelul de culoare dorit!

B) Din meniul Window apelaţi comanda Color apoi stabilirea culorii cu ajutorul celor 3 glisoare care se regăsesc pe paleta Color:


COLOR I SWATCHES I STYLES I •§

. -- c.

269

C) Din meniul Window � Swatches şi selectaţi culoarea din paleta de mai jos:

Dacă ducem cursorul În zona în care nu mai avem culori, el va lua forma alăturată. Executarea unui clic are ca efect apariţia cutiei de mai jos:

��

Co Io r Swatc h Name [8J OK

Cancel

Culoarea care va fi adăugată la paletă este cea de prllll plan (Foreground) .

./ Pentru a şterge o culoare din paleta Swatches, se trage cu mouse-ul căsuţa asociată peste butonul de ştergere, care are forma unei cutii de gunoi:


4.8. Realizarea desenelor

Paintbrush T ool se utilizează pentru a trasa pe o imagine anumite urme, la fel ca o pensulă din viaţa de toate zilele. Culoarea se stabileşte aşa cum am învăţat în paragraful anterior.

Mai jos puteţi observa bara de opţiuni ale acestui instrument:

lZJI

,/ • I Brush: � • I Mode: l._N_

o_rm_

a_

l _===---v .... J Opacity: � „ J I • Brush - mărimea pensulei, se selectează dintr-o listă grafică:

Master Diameter 1 13 px

Hardness: I 0%

• • .,

� 3 5 9

• •

• • •

_ 13__19 __ 1 V

• Mode specifică modul în care apare culoarea pe imagine. Există 3 culori despre care se discută: culoarea imaginii, culoarea care este aplicată şi culoarea reZ!fltată. Mode exprimă modul în care apare culoarea rezultată. Iată căteva valori posibile pentru Mode:

1 . Normal este valoarea implicită - culoarea rezultată este cea care este aplicată.

2. Dissolve - la fel ca mai sus, doar că marginile lăsate sunt neregulate.

111111•


•

3. Multiply - culoarea rezultată se obţine printr-un algoritm specific, numit Multiply. Astfel, prin acest algoritm, dacă una din culori este negru (cea de colorare sau cea de pe imagine), rezultatul este negru, dacă una din culori este alb, rezultatul este alb, iar în celelalte cazuri se obtine o culoare

A , închisă. In acest fel se lasă impresia că sunt vizibile culorile de dedesupt.

4. Soft Light - dacă culoarea utilizată pentru "vopsire" are mai puţin de 50% gri, efectul este de a lumina zona vopsită, contrar de a o întuneca. Testaj aceasta pe o imagine la care utilizaţi la început alb şi apoi negru. In continuare testaţi cu alte culori şi veţi observa şi faptul că partea luminată (întunecată) are la bază culoarea utilizată.

5. Hard Light - la fel ca mai sus, dar efectele sunt mai puternice.

Testati celelalte valori pe care le întâlniri în lista Mode! , ,

Pencil Tool - diferă de Paintbrush Tool prin faptul că marginile lăsate nu au o culoare de trecere treptată la culoarea de desen. Acest efect poate fi observat pentru valori mari pentru Brush. Priviţi imaginea alăturată: pentru aceeaşi valoare a lui Brush (70) în stânga vedeţi urma lăsată de Pencil şi în dreapta cea lăsată de Paintbrush.

Selectarea uneltei se face prin meniul care 7J Paintbrush Tool B poate fi apelat dacă se execută clic cu (l_ b ul d 1 1 · . A d • Pencil T ool B

uton rept a mouse-u u1 atunci can ·----------- -

cursorul grafic se găseşte deasupra butonului Paintbrush.

Opţiunea Airbrush - permite să fie aplicată culoarea ca şi cum am ;;;t.. utiliza un spray.

Opţiunea Flow ne permite să stabilim de la Început răspândirea culorii Ia valori între 1% şi 100%. Mai jos puteţi observa urmele pentru 50% şi 100%:


4.9. Modalităţi de �tergere

Există 3 instrUlllente care pot fi utilizate pentru ştergere. Oricare dintre ele poate fi selectat prin meniul ataşat butonului Eraser Tool:

E � Background Er aser T ool E

E

=> Eraser T ool. Efectul de ştergere constă în faptul că pe unde trece gUllla apare culoarea de fond (background) .

Mai jos puteţi observa bara de opţiuni. Vom prezenta doar opţiunile care nu au mai fost Întâlnite:

B ... I Brush: � ... I Mode: �' B_ru_s_h_�v�I Opacity: I 100% > I Flow: I 100% / J J;t-• Mode poate lua valorile: Brush, Pencil şi Block. În ultimul caz

cursorul are o formă dreptunghiulară.

• Erase to History - dacă bifăm acest buton ş1 revenim În zonele şterse, atunci se anulează efectul ştergerii. Este normal să existe o astfel de modalitate de lucru, deoarece se poate uşor greşi la ştergere.

=> Background Eraser T ool - Şterge zona complet. În urma ştergerii, layer-ul devine transparent. În imaginea alăturată puteţi observa acea "tablă de şah" care indică faptul că În acea zonă layer-ul este transparent.

Opţiunile sunt:

� ... j Brush: � ... I lei @" � I Limits: lcontiguous v 1 I Tolerance: I so% > J • Brush - mărimea şi forma cursorului care indică porţiunea supusă

ştergerii. Tentativa de ştergere are loc pe întreaga sa suprafaţă pornind din centrul său luat ca reper.


• T olerance - indică diferenta de culoare fată de culoarea aflată în ' ' centrul cursorului până la care se face ştergerea. Este vorba numai de pixelii aflaţi pe suprafaţa cursorului. Ia valori între 1% şi 100%. La o toleranţa mai mare se şterge mai mult.

• Limits - poate lua valorile: Contiguous - se sterg numai pixelii aflaţi pe suprafaţa cursorului a căror culoare îndeplineşte condiţia de toleranţă, dar nu sunt separaţi de cei care nu îndeplinesc această condiţie. Discontiguous - se sterg toţi pixelii aflaţi pe suprafaţa cursorului care îndeplinesc condiţia de toleranţă, chiar dacă sunt separaţi de cei care nu îndeplinesc această condiţie. Find Edges - la fel ca la Contiguous - este o condiţie mai tare.

Exemplu: imaginea iniţială. Cursorul are o suprafaţă mare şi este aşezat pe geamul lateral din dreptul şoferului.

Să ştergem în primul caz cu Contiguous (a), în al doilea cu Discontiguos (b). Observaţi "tabla de şah":

a) b)

=> Magic Eraser T ool - ştergerea nu se face pe suprafaţa cursorului ci se sterge culoarea până la transparenţă a tuturor pixelilor a căror culoare îndeplineşte condiţiile de toleranţă şi continuitate.

Exemplu: din două clic-uri din imaginea din stânga a rămas numai maşina!


4. 1 O. Desenarea figurilor geometrice

Pentru a desena figuri geometrice se foloseşte Rectangle T ool. De altfel, acest instrument are în spatele lui multe instrumente pentru desenarea dreptelor, elipselor, poligoanelor cu un număr specificat de laturi şi a modelelor după preferinţă.

u O Rounded Rectangle T ool U

Ellipse Tool U

Polygon T ool U

'- Line T ool U

Custom Shape T ool U

Bara de opţiuni se poate observa în continuare. În func�e de modelul selectat se afişează anumite op�uni specifice. De exemplu, pentru un poligon op�unea principală este dată de numărul de laturi.

o " • I l [gl� Ir' � .::!J I � Style: lSi. • Color: .

Foarte important:

1. Figurile geometrice se desenează pe un layer aparte, numit, implicit, Shape 1. Pentru a vă convinge de acest fapt, vizualiza� paleta layer-elor:

LAYERS CHANNELS PATHS T=

I Normal v I Opacity: �>-J Lock: O .!/ + ii Fili: �>-]

Bod<ground

Pentru a crea imaginea de mai sus am deschis o fereastră în care nu aveam nimic (era albă) . Imediat ce am apelat unealta care ne permite desenarea modelelor s-a creat, automat, un layer.


2 . Toate figurile geometrice dintr-un anumit layer au o anumită culoare. Dacă se doreşte crearea unor figuri geometrice de altă culoare, atunci trebuie să se creeze alt layer (din paleta layer-elor butonul Create a new layer, aflat în partea inferioară a cutiei) .

3. Figurile geometrice şi straturile care conţin text sunt speciale (obiecte vectoriale1) şi nu se pot aplica unelte precum cele de desenare (Paintbrush Too� sau ştergere (Eraser Too� . Pentru a le converti în obiecte grafice obişnuite (obiecte rastel, bitmap), apelaţi la meniul flotant al stratului şi alegeţi comanda Restarize Layer:

Rasterize Layer

4. 1 1 . Măşti rapide

/ Iii D Background

Măstile rapide, Quick Mask, sunt utile în cazul În care se doreşte obtinerea unor selectări de calitate, altfel decât suntem obişnuiri. , ,

Ideea de lucru este următoarea:

1. Se porneşte de la o selecţie iniţială obţinută cu o unealtă (sau mai multe) deja prezentată. Apoi se apasă butonul Edit in Quick Mask Mode:

g

2. Automat, zona neselectată se acoperă cu o culoare cararmz1e. Spunem că zona neselectată este mascată. De asemenea, Photoshop-ul trece în modul de

1 Obiectele grafice vectoriale sunt reprezentate prin primitive geometrice, cum ar fi: puncte, linii, curbe şi poligoane, bazate pe ecuaţii matematice.

2 Obiectele grafice de tip raster sau bitmap sunt reprezentate sub fo1ma unei matrice de

puncte, aşa cum aţi învăţat.


lucru negru/ alb (culorile de prim plan şi de fond) . De acum putem folosi unelte de desenare, de exemplu Pencil T ool. A desena cu negru înseamnă a extinde zona mascată, iar a desena cu alb înseamnă a şterge zona mascată.

Practic, folosim alb sau negru pentru ca zona neselectată să cuprindă exact ceea ce dorim să selectăm .

./ Putem folosi Zoom şi "pensule" de dimensiuni convenabile. În acest fel se obţin selecţii de mare precizie.

3. În final, se poate trece la imaginea normală. Pentru aceasta se apasă butonul Edit in Standard Mode:

Fereastra va afişa, de această dată, noua selectare, mai precisă. Apoi putem folosi rezultatul aşa cum dorim. În exemplu, zona selectată a fost copiată şi introdusă în altă fereastră.

4. 1 2 . Decupări din imagine

Există cazuri când nu ne interesează toată imaginea, ci numai o parte a ei, pe care dorim s-o obţinem ca fotogarafie distinctă. În astfel 1zţ de cazuri utilizăm unealta Crop.

Exemplu de utilizare:

1. Aceasta este imaginea iniţială. Se selectează instrumentul Crop.

2. Se formează un dreptunghi, prin drag-and-drop. Restul imaginii apare automat întunecată.

Dreptunghiul se poate roti aşa cum suntem obişnuiţi, de exemplu ca la casetele care includ texte.


3. Atunci când cursorul grafic este deasupra imaginii, se apasă butonul drept al mouse-ului. Din meniu se poate alege Crop, caz în care se formează noua imagine (cea din stânga) sau Cancel, caz în care se revine la imaginea iniţială. Apoi, dacă se doreşte, imaginea poate fi rotită (vezi imaginea din dreapta) din meniu: lmage, Rotate Canvas. Se validează operaţia:

2 7 7

Dacă nu mai este necesară nicio operaţie, imaginea se salvează În formatul dorit prin File şi Save As.

4. 1 3. Gradient

Pentru a obţine anumite efecte luminoase se poate utiliza unealta numită Gradient.

Exemplu: mai jos aveţi imaginea iniţială şi imaginea obţinută după aplicarea unui gradient. Desigur, imaginea nefiind color, anumite efecte se pierd . . .

Dacă vrem să aplicăm un anumit model tragem cu mouse-ul un segment de dreaptă pe imagine. Modelul se aplică ţinând cont de direcţia segmentului şi de sensul În care a fost trasat.


Opţiuni:

� c:J D I Mode: ILN_o_rm_a_I __ __:::::v:::.il Opacity: I 100% > I o Modelul de gradient conţine o listă

grafică din care putem selecta modelul. Unele modele utilizează culorile de prim plan şi de fond, altele utilizează culori proprii.

o Modul de aplicare a gradientului - după cum observaţi, pe bara de opţiuni, există 5 butoane prin care putem selecta aceasta. Astfel, avem următoarele tipuri de gradient: Linear, Radial, Angle, Reflected şi Diamond.

o Mode - modul de aplicare a gradient-ului. Studiaţi "pe viu" efectele aplicării unui mod sau altul.

o Opacity - opacitatea culorilor aplicate pentru gradient. Ia valori, selectabile dintr-o listă grafică, între 1% şi 100%.

4. 1 4. Alte instrumente specializate în prelucrarea imagini lor

Următoarele trei unelte ajută În prelucrarea imaginilor. selectează o "pensulă" potrivită. Aceasta din urmă se plimbă asupra imaginii, În locurile care necesită prelucrare! Mai jos puteţi observa o imagine iniţială şi prelucrarea ei cu fiecare din cele 3 unelte. Fiecare prelucrare cu un anumit instrument a pornit de la imaginea iniţială!

Pentru toate se

Blur Tool

Blur Tool face marginile mai puţin distincte Oe "înceţoşează"). În exemplu, am prelucrat roţile maşinii!

• Sharpen Tool face marginile mai vizibile. In exemplu, am prelucrat rotile maşinii! S�udge Tool amestecă culorile. În exemplul de pe pagina următoare am prelucrat cerul! Observaţi faptul că norii aproape au dispărut!

Există posibilitatea prelucrării layer-ului curent sau a tuturor layer-elor!


Iniţial Blur Tool

Shmpen Tool Smudge Tool

Un alt grup de unelte ne ajută să prelucrăm imaginile astfel încât anumite părţi ale lor să fie mai luminoase sau mai Întunecoase. Şi pentru aceste instrumente se poate selecta "peniţa" dintr-o listă grafică.

o . Dodge Tool O

� Burn Tool

Sponge Tool

o o

T ........ ��

::::> Dodge T ool permite ca anumite părţi ale imaginilor să fie mai luminoase. Prin utilizarea acestei unelte am "luminat" anumite părţi ale helicopterului.

::::> Burn Tool permite ca anumite părţi ale imaginilor să fie mai întunecate. Prin utilizarea acestei unelte am "întunecat" anumite părţi ale cerului.


---+

./ Intensitatea efectului aplicat poate fi stabilită la ambele unelte pnn valorile unei liste numita range. Valorile sunt: Shadow, Midtones şi Highlights.

./

Sponge T ool. Şi pentru această unealtă se alege o anumită "pensulă". Unealta are rolul de a mări saturaţia culorilor pe unde trece peniţa (saturate) sau de a o micşora (desaturate) .

Saturaţie înseamnă puritatea culorii. La valori scăzute culorile se văd spre gri, iar la valori mari, "pure".

Clone Stamp permite să copiem rapid o mică porţiune dintr-o imagine

� . Clone St.amp Tool s s

si s-o inserăm în altă parte. Imaginea care se copiază este inclusă în peniţa aleasă. Pentru copiere se ţine apăsată tasta Alt şi se execută clic. Apoi, la

}lf � P.attern St.amp Tool

· · -.....-=-=-=-=-=-=-=-=-=-=-==..! un nou click imaginea este inserată acolo unde dorim

Inserarea se face fără a crea un nou layer.

o Opţiunea Aligned - dacă este bifat butonul corespunzător este permisă o inserare, contar putem insera de câte ori dorim.

:::? Pattern Stamp T ool permite aplicarea unui model (unealta poate fi selectată apelând la meniul ataşat uneltei de mai sus) . Modelul se alege din lista Pattern. Mai jos, puteţi observa lista grafică din care se selectează modelul (stânga) şi un model aplicat (dreapta) :


4. 1 5. Preluarea culorilor dintr-o imagine

Există două unelte care ne ajută în acest sens. Ambele se găsesc în meniul ataşat pentru butonul Eyedropper T ool:

• ;I Eyedropper Tool

� Color Sampler Tool

O> Ruler T ool

� Note Tool

123 count Tool

-z_ -=======================.U

=> Eyedropper T ool - permite preluarea unei anumite culori dintr-o imagine. Pentru aceasta, după selectarea uneltei, se aşează cursorul pe punctul a cărui culoare dorim s-o preluăm şi se execută un clic. Imediat, respectiva culoare devine culoare de prim plan (Foreground) .

Mai mult, dacă se execută un clic în paleta Swatches În primul loc rămas liber, respectiva culoare este memorată. Astfel, putem să "culegem" mal multe culori dintr-o imagine şi să le folosim ulterior:

=> Color Sampler T ool ne permite să aflăm parametrii culorii selectate. Evident, aceasta tine de modelul de culoare în care este , memorată imaginea.

De exemplu, dacă modelul este RGB se dau valorile pentru R, G şi B, precum şi alte informaţii utile. Dacă, după selectarea uneltei, executăm un clic pe imagine apare o formă precum cea alăturată. Concomitent, paleta Info afişează valorile respective.

NAYIGAT� HISTOGRAd INFO L._:=. R : 217 C : 8! )! G : o }! M : 100! B : o I Y : 100!

K : 2! 8-bit 8-bit

+. X : 3.35 I W : G.24 • Y : 2.29 W H : 3.10

#IR : 217

)! G : o • B : o

Click image to place new color sampler. Use Ctrl for additional options.


4. 1 6. Salvarea în formatul Jpg sau .png

În paragrafal 4.2 aţi învăţat cum se poate manipula un fişier grafic şi, aşa cum am precizat, în Photoshop există un format special: . psd, care oferă posibilitatea de a salva şi anumite prelucrări speciale, care pot fi continuate la o reîncărcare a imaginii. În Capitolul 3 a fost prezentat limbajul HTML cu ajutorul căruia puteţi crea pagini web. Să vedem în continuare cum putem salva imaginile create în programul Photoshop astfel încât acestea să poată fi afişate optim în cadrul paginilor în format HTML.

Salvarea în formatul .jpg

Pentru a reţine pe disc o imagine În format .jpg, din meniul File alegeţi comanda Save As. Se va deschide cutia de dialog deja cunoscută, unde introduceţi numele dorit în câmpul Name şi apăsaţi butonul OK. Apoi, va apărea cutia de dialog de mai jos, unde trebuie să decideţi calitatea imaginii:

JPEG Optio ns l8] Matte: l\lone

Image Options -------....,

Quality : I 16 1 1 Maximum

small file large file

��-� Format Options ----------,.

0 Baseline CStandard»)

0 Baseline Optimized

O Progressive

Scans: 3

OK _J) Cancel

� Preview

23.3K Dimensiunea fişiernlui

Valoarea parametrului Quality poate lua valori între 1 şi 12 şi atenţie, cu cât calitatea imaginii este mai mare, cu atât creşte dimensiunea fişierului! Ca alternative, puteţi selecta calitatea din listă sau utilizaţi glisorul pentru a alege dimensiunea fişierului - între small file (fişier mic) şi large file (fişier mare) .


Salvarea în formatul .png

În anumite situatii avem nevoie de imaoini care să cantină anumite ' b-- ' por�uni transparente, spre exemplu, pentru a ob�e efecte deosebite în cadrul paginilor web. Vom utiliza formatul .png - analiza� exemplul următor.

Exemplu: Imaginea de mai jos este formată din două dreptunghiuri, care sunt re�nute de două straturi, Shape 1 şi Shape 2:

Shape 1

Shape 2

Există şi un al treilea strat, Background-ul, care are culoarea albă şi are rolul de fundal. În paleta Layers a fost ascuns acest strat:

LA VERS

Imaginea a fost re�nută pe disc sub forma unui fişier în format .png, numit "transparenta. png".

Exercitiu. Crea� şi dvs. o imagine cu fundal transparent şi testa�-o ap01 cu ajutorul unui fişier HTML care va avea fundalul de culoare roşie!

x Go gleL

Anexa 1 - Caractere HTM L Înainte de prezentarea tabelelor, inserăm textul de mai jos, pentru că au

fost folosite normele W3C ("http:/ /www.w3.org"):

" Portions © International Organization for Standardization 1 9 8 6

Perrnission t o copy i n any form is granted for use with conforrning

SGML systems and applications as defined in ISO 8 8 7 9 , provided this

notice is included in all copies . "

Caractere ISO 8859- 1

&#161 j &#191 ;. &#162 t &#192 A &#163 :t &#193 A &#164 a &#194 A

&#165 � &#195 Ă &#166 I &#196 Ă &#167 ş &#197 A &#168

.. &#198 JE

&#169 © &#199 <; &#170

a &#200 :E

&#171 « &#201 :E &#172 � &#202 E &#173 despărţire în silabe &#203 E &#174 ® &#204 I

&#175 &#205 î &#176 o &#206 Î &#177 ± &#207 I &#178 2 &#208 D

&#179 3 &#209 N &#180

' &#210 c)

&#181 µ &#211 6 &#182 , &#212 6 &#183 &#213 6 &#184 &#214 o &#185 1 &#215 X

&#186 o

&#216 0

&#187 » &#217 u &#188 V. &#218 (J &#189 Vi &#219 u

&#190 o/. &#220 u &#221 y &#238 î

&#222 I> &#239 î

&#223 n &#240 ()

Anexa 1 - Caractere HTML 285

&#224 a &#241 îi

&#225 a &#242 o

&#226 â &#243 o

&#227 y &#244 o &#228 li &#245 o &#229 a &#246 o

&#230 � &#247

&#231 c &#248 0

&#232 e &#249 u

&#233 e &#250 u &#234 e &#251 fi &#235 e &#252 ii

&#236 i &#253 y &#237 i &#254 b &#160 spaţiu incorporat &#255 y &#258 Ă &#259 ă &#350 s &#351 s

&#354 Ţ &#355 ţ

Litere greceşti şi semne matematice

&#913 A &#923 A

&#914 B &#924 M

&#915 r &#925 N

&#916 A &#926 .::. &#917 E &#927 o

&#918 z &#928 II

&#919 H &#929 p

&#920 0 &#931 I &#921 I &#932 T

&#922 K &#933 y

&#934 <I> &#8230 . . . &#935 X &#8242 , &#936 'I' &#8243 „

&#937 !! &#8254 -

&#945 (l &#8260 I

&#946 I} &#8482 TM

&#947 y &#8592 <----

&#948 () &#8593 ţ &#949 E &#8594 -->

&#950 � &#8595 l &#951 li &#8596 -<---*

&#952 0 &#8706 o

&#953 l &#8719 n &#954 K &#8721 L:


&#955 J.. &#8722 -&#956 µ &#8730 '.j &#957 V &#8734 00

&#958 � &#8745 n

&#959 o &#8747 r &#960 1t &#8776 ;:::; &#961 p &#8800 * &#962 � &#8801 -&#963 (J &#8804 ::; &#964 Ţ &#8805 :::: &#965 u &#9674 o &#966 <P &#9824 � &#967 "t. &#9827 +

&#968 "' &#9829 • &#969 ro &#9830 •

&#8226 .

Semne speciale

&#34 " &#8211 -&#38 & &#8212 -&#60 < &#8216 ' &#62 > &#8217 '

&#338 CE &#8218 ' &#339 re &#8220 "

&#352 s &#8221 "

&#353 s &#8222 " &#376 y &#8224 t &#710

A &#8225 :l:

&#732 -

&#8240 %o

&#8204 &#8249 <

&#8205 &#8250 >

&#8206 &#8364 € &#8207