FrontPage

1 Lansarea aplicaiei.......................................................................................................3 2 Meniurile File i Edit...................................................................................................6 3 Crearea unui site..........................................................................................................8 3.1 Crearea unui site..................................................................................................8 3.2 Vederile asociate unui site. Bara de instrumente View.....................................10 3.2.1 Vederea Page...............................................................................................11 3.2.2 Vederea Folders...........................................................................................13 3.2.3 Vederea Navigation.....................................................................................13 4 Structura de navigare a unui site...............................................................................15 4.1 Crearea structurii de navigare a unui site..........................................................15 4.2 Crearea unei bare de legturi.............................................................................24 4.2.1 Bare de legturi create pe baza structurii de navigare.................................24 4.2.2 Bare cu legturi napoi (back) i nainte (next)...........................................30 4.3 Regiuni partajate................................................................................................36 4.4 Vederea Reports................................................................................................42 5 Crearea unei pagini de Web......................................................................................44 5.1 Introducerea textului..........................................................................................44 5.1.1 Formatarea textului......................................................................................45 5.1.2 Introducerea caracterelor speciale...............................................................47 5.2 Liste...................................................................................................................48 5.2.1 Evidenierea elementelor listelor.................................................................49 5.2.2 Numerotarea listelor....................................................................................49 5.2.3 Crearea sublistelor.......................................................................................50 5.3 Introducerea tabelelor........................................................................................51 5.3.1 Introducerea unei tabel................................................................................51 5.3.2 Inserarea titlului unui tabel..........................................................................54 5.3.3 Selectarea, tergerea i inserarea de linii, coloane i celule n tabele.........55 5.3.4 Formatarea celulelor....................................................................................57 5.4 Inserarea unei fotografii....................................................................................59 5.5 Salvarea unei pagini de Web.............................................................................64 5.6 Inserarea unei legturi (hyperlink)....................................................................66 5.6.1 Inserarea unei legturi ctre un loc din aceeai pagin...............................67 5.6.2 Inserarea de legturi ctre alte pagini de Web din acelai site....................71 5.7 Adugarea unei teme.........................................................................................74 6 Utilizarea cadrelor (frames).......................................................................................76 6.1 Crearea unei pagini cu cadre............................................................................76 7 Construcia unui site pe baza unui ablon.................................................................86

1 Lansarea aplicaiei
Aplicaia FrontPage creaz pagini de Web i siteuri de Web. Un site este o colecie de pagini de Web cu legturi ntre ele. Paginile de Web sunt descrise n limbajul HTML. Cu aplicaia FrontPage definim grafic paginile de Web i aplicaia genereaz codul corespunztor paginilor n limbajul HTML. Fiierul generat are extensia htm. Lansarea aplicaiei FrontPage se face astfel: clic pe butonul Start, clic pe opiunile Programs Microsoft FrontPage.

Figura 1. Lansarea aplicaiei FrontPage.

Fereastra aplicaiei FrontPage este cea din Figura 2. Ea cuprinde: bara de meniu, bara de instrumente standard cu butoane corespunznd opiunilor diverselor meniuri, bara de formatare, ce cuprinde casete pentru alegerea tipului, stilului i dimensiunii fontului, pentru indentarea textului, culoarea fontului, etc. La plasarea cursorului pe un buton se afiaz un text cu funcia butonului, fereastra documentului cu barele de derulare, orizontal i vertical. In stnga barei de derulare orizontale exist butoanele: Design, cnd se afiaz doar pagina de Web n curs de proiectare, Code cnd se afiaz codul n limbaj HTML generat de aplicaia FrontPage, Split cnd fereastra documentului este mprit n dou i se afiaz simultan pagina proiectat i codul HTML generat, Preview ce prezint modul n care pagina din fereastr apare afiat n Internet Explorer. Implicit, n fereastra aplicaiei este afiat o nou pagin de Web cu numele new_page_1.htm. In partea de jos a ferestrei exist bara de desenare. Ea se poate afia / ascunde cu butonul sau cu clic pe meniul View Toolbars Drawing. 3

Figura 2. Fereastra aplicaiei FrontPage.

In partea dreapt a ferestrei se poate afia / ascunde fereastra Task Pane. In aceast fereastr se pot afia ferestrele din din lista Other Task Panes din Figura 3. Dintre acestea menionm: Clipboard, cu ultimele informaii copiate n Clipboard, Search Results, cu care se pot cuta n calculator sau pe Internet diverse informaii, New, cu opiunile creia se poate crea o nou pagin sau un site sau se poate deschide un site sau o pagin. Ferestrele se pot comuta ntre ele cu butoanele sau n lista Other Task Panes afiat cu butonul . Fereastra Task Pane se afiaz cu clic pe meniul View Task Pane i se nchide cu clic pe butonul .

Figura 3. Lista Other Task Pane.

2 Meniurile File i Edit

Meniurile File i Edit sunt artate n Tabelul 1.

a) meniul File

b) meniul Edit

Tabelul 1. Meniurile File i Edit.

Opiunile meniului File sunt: New afiaz fereastra New n fereastra Task Pane. In aceast fereastr putem crea un nou fiier sau un nou site, Open deschide un nou fiier, Close nchide fiierul deschis n fereastra documentului, Open Site deschide un site, Close Site nchide siteul current, Save salveaz fiierul deschis n fereastra documentului, Save As salveaz fiierul deschis n fereastra documentului sub un nume nou, Preview in Browser afiaz pagina cum apare n Internet Explorer, Page Setup prescribe dimensiunile paginii pentru tiprire, Print Preview afiaz pagina de tiprit n formatul n care apare tiprit, Print tiprete pagina selectat,

 Recent Files afiaz o list cu fiierele recente, din care se poate alege unul pentru a fi deschis, Recent Sites afiaz o list cu siteurele recente, din care se poate alege unul pentru a fi deschis, Exit nchide aplicaia. Opiunile meniului Edit sunt urmtoarele: Undo anuleaz comanda precedent, Redo execut comanda precedent, Cut mut textul selectat n Clipboard, Copy copiaz textul selectat n Clipboard, Paste copiaz textul din Clipboard n fiier, Delete terge textul selectat, Find caut un ir de caractere, Replace nlocuiete un text cu altul. O parte din opiunile meniurilor File i Edit se pot executa i cu butoanele barei de instrumente standard din Figura 4.

Figura 4. Bara de instrumente standard.

3 Crearea unui site

3.1 Crearea unui site
Crearea unui site se face n urmtorii pai: 1. dac este cazul se inchid toate paginile cu clic pe meniul File Close, 2. clic pe meniul File New; n fereastra Task Pane se afiaz fereastra New din Figura 5. In fereastra New seciunea New Web site clic pe One page Web site i se afiaz caseta Web Site Templates din Figura 6, 3. clic pe opiunea One Page Web Site, 4. se apas tasta Tab i controlul se deplaseaz la caseta Specify the location of the new Web site. In aceast caset exist un nume generat de aplicaia FrontPage, c:\Users\cautil\Documents\My Webs\mysite1, care poate fi schimbat dup dorin. Se poate naviga n arborele de directoare pentru a schimba directorul cu clic pe butonul Browse. Dup alegerea numelui i locaiei siteului clic pe OK.

Figura 5. Fereastra New.

Figura 6. Caseta Web Site Templates.

Aplicaia FrontPage creaz un nou site care este un director cu numele specificat n locaia aleas. Numele ales pentru site este afiat n bara de titlu. Coninutul unui nou site este cel din Figura 7. FrontPage genereaz i dou directoare, _private i images i o pagin de Web cu numele index.htm. Menionm c orice site are o pagin de cas (home page) care este afiat iniial. Navigarea n celelalte pagini se face pornind de la pagina de cas. Pagina implicit de cas generat de FrontPage este index.htm.

Figura 7. Coninutul siteului generat de FrontPage.

Sub bara de formatare sunt afiate butoane corespunztoare componentelor siteului, iniial directorul Web Site i pagina index.htm. Sub aceste butoane se afl o bar cu semnificaia butonului activ. Caseta Web Site Templates din Figura 6 poate fi afiat i cu clic pe butonul New Page, , din bara de instrumente standard, ce afiaz lista New Page din Figura 8. In aceast list se alege opiunea Web Site.

Figura 8. Lista New Page.

3.2 Vederile asociate unui site. Bara de instrumente View

Un site poate conine multe directoare i fiiere, pagini de Web, imagini, fiiere text, etc., ntre care exist legturi. El poate fi vizualizat n mai multe feluri. Opiunile sunt: Page afiaz o pagin de Web pentru editare, Folders arat arborele directorului siteului cu subdirectoarele i fiierele respective, vezi Figura 13, Navigation arat reprezentarea grafic a structurii siteului, vezi Figura 14, Fiecare vedere din cele de mai sus poate avea la stnga fereastra Folder List cu arborele directorului siteului. Aceast fereastr se poate afia / ascunde cu clic pe View Folder List. In cazul vederii Page n stnga se poate afia i fereastra Navigation n care directorul siteului este afiat sub forma structurii de navigare, vezi paragrafele urmtoare. Celelalte opiuni sunt: Hyperlinks arat legturile ntre paginile siteului, Reports Tasks. Ele vor fi prezentate pe parcurs. Vederile siteului pot fi afiate cu: clic pe opiunile meniului View vezi Figura 9, clic pe butoanele barei de instrumente View afiat n partea de jos a paginii, vezi Figura 10.

10

Figura 9. Meniul View.

Figura 10. Bara de instrumente View.

3.2.1 Vederea Page Vederea Page afiaz pagina curent n editare, vezi Figura 12. In partea stng se poate afia directorul siteului n una din ferestrele: Folder List ce conine arborele siteului cu directoarele i fiierele lui (Folder List). In aceast fereastr se pot terge, copia, redenumi, importa fiiere, Navigation ce afiaz siteul sub forma structurii de navigare (Navigation). In aceast vedere se pot redenumi, terge i copia fiiere. Cele dou ferestre se comut cu butoanele Folder List i Navigation de la baza ferestrei. Ele sunt artate n Tabelul 2. Ele pot fi commutate i cu butonul Toggle Pane, , care afiaz lista Toggle Pane din Figura 11.

Figura 11. Lista Toggle Pane.

In Tabelul 3 sunt artate meniurile contextuale ale celor dou ferestre cu care se pot efectua operaiile de mai sus.

11

Figura 12. Vederea Page.

a) Folder List

b) Navigation

Tabelul 2. Ferestrele din stnga vederii Page.

12

a) Folder List

b) Navigation

Tabelul 3. Meniurile contextuale ale ferestrelor Folder List i Navigation.

3.2.2 Vederea Folders Vederea Folders din Figura 13 afiaz directoarele siteului. Aici se pot vedea detalii despre fiiere i directoare. In aceast vedere se pot copia, terge, redenumi fiiere.

Figura 13. Vederea Folders.

3.2.3 Vederea Navigation Vederea Navigation din Figura 14 arat reprezentarea grafic a structurii unui site. Vederea afiaz n partea de sus bara de instrumente Navigation ce va fi prezentat n paragraful urmtor. In partea de jos este afiat bara de instrumente Views.

13

Figura 14. Vederea Navigation.

14

4 Structura de navigare a unui site

4.1 Crearea structurii de navigare a unui site
Pentru a preciza ideile vom crea un site al Facultii de Inginerie Electric ce va avea trei pagini: Structur, Studii Studeni Structura siteului va fi cea din Figura 15. Pagina de cas index.htm va conine legturi ctre cele trei pagini i un clic pe o legtur va duce la afiarea unei pagini.

Figura 15. Structura siteului.

Structura siteului se creaz cu pagina index.htm afiat n vederea Navigation. Bara de instrumente a acestei vederi este cea din Figura 16.

Figura 16. Bara de instrumente Navigation.

Semnificaia butoanelor este cea din Tabelul 4. Buton Semnificaie Creaz o pagin nou Adaug o pagin existent Creaz o nou bar de navigare Pagina inclus n bara de navigare Afiaz doar un subarbore Afiaz portret / landscape
Tabelul 4. Butoanele barei de instrumente Navigation.

Lista din dreapta barei de navigare micoreaz / mrete imaginea structurii de navigare n pagin. Crearea structurii de navigare se face astfel: 1. se selecteaz pagina index.htm n vederea Navigation cu clic dublu, vezi Figura 17. In acest moment butonul din bara de navigare devine selectat, pagina index.htm este inclus n bara de navigare,

15

Figura 17. Pagina index.htm selectat.

2. clic pe butonul New Page,

, i FrontPage creaz o nou pagin cu numele

New Page 1, vezi Figura 18. Butonul din bara de navigare devine selectat, pagina creat este inclus n bara de navigare

Figura 18. Se creaz o nou pagin.

3. se apas tasta Tab i noua pagin este selectat. Se introduce numele paginii, n cazul nostru Structura, vezi Figura 19,

16

Figura 19. Se introduce numele noii pagini.

4. se creaz n acelai fel celelalte pagini: se selecteaz pagina index.htm i clic pe butonul New Page, , se selecteaz noua pagin cu tasta Tab i se introduce numele paginii, etc. Dup crearea ultimei pagini se apas tasta Enter. Structura de navigare a siteului este cea din Figura 20.

Figura 20. Structura de navigare a siteului.

Vom trece n vederea Folders. Siteul apare ca n Figura 21.

17

Figura 21. Directorul siteului n vederea Folders.

Structura de navigare a siteului este important deoarece aplicaia FrontPage poate genera automat bare de legturi pentru navigarea prin paginile siteului. Un alt mod de a crea pagini noi este urmtorul. In vederea Navigation se creaz noile pagini cu clic pe butonul New Page sau clic pe meniul File New Blank Page sau se apas tastele Ctrl + N. Se creaz trei noi pagini cu numele date de FrontPage, new_page_1, new_page_2, new_page_3, al cror nume se modific n Structura, Studii, Studenti. Structura siteului n aceat caz este cea din Figura 22.

Figura 22. Site cu trei pagini create.

Crearea structurii de navigare se face astfel: 1. se afiaz pagina de cas index.htm cu dublu clic,

18

2. se trece n vederea Navigation cu clic pe meniul View Navigation, 3. se trag cu mousul cele trei pagini Structura, Studii, Studenti. Ele sunt automat adugate paginii index.htm. Urmtoarea etap este crearea unei bare legturi ce va conine legturile ntre pagina de cas, index.htm i paginile siteului, Structura, Sectii, Studenti. Procedura sistematic de a crea bare de legturi va fi prezentat n paragraful urmtor. Acum vom prezenta dou procedure simple. In prima procedur se vor crea legturi ctre paginile nou create din pagina index.htm in felul urmtor: 1. se deschide pagina de cas index.htm n vederea Page cu clic dublu, 2. se selecteaz cu clic pagina structura.htm n arborele din fereastra Folder List din stnga ecranului i se trage cu mousul pe pagina index.htm, 3. se procedeaz la fel cu celelalte pagini.

Figura 23. Pagina de cas cu legturi ctre celelalte pagini.

In a doua procedur se vor crea legturi ctre paginile nou create din pagina index.htm in felul urmtor: 1. se trece n vederea Navigation cu clic pe meniul View Navigation sau pe butonul Navigation din bara de instrumente View, 2. se selecteaz pagina index.htm cu dublu clic; ea va aprea n ferestra documentului din dreapta, 3. n bara de instrumente Navigation clic pe butonul Insert Hyperlink, , 4. se afiaz caseta Insert Hyperlink din Figura 24. Clic pe pagina Structura i apoi OK.

19

Figura 24. Caseta Insert Hyperlink.

5. se apas tasta Tab care selecteaz pagina adugat i se introduce numele ei, Structura,

Figura 25. Pagina Structura adugat paginii de cas.

Se procedeaz ca mai sus cu toate paginile i se obine structura din Figura 26.

20

Figura 26. Paginile ataate.

Vom introduce cteva informaii n cele trei pagini. In vederea Page ele apar ca n Figura 27, Figura 28, Figura 29.

Figura 27. Pagina Structura.

21

Figura 28. Pagina Studii

Figura 29. Pagina Studenti.

Pentru a vedea siteul realizat se ncarc pagina index.htm n Intrenet Explorer cu clic pe meniul File Preview in Browser i se navigheaz ntre pagini cu Ctrl + clic pe legturi.

22

Figura 30. Pagina index.htm n Internet Explorer.

Stergerea unei pagini din structura de navigare se face prin selectarea paginii cu clic cu butonul drept pe icoana paginii. In meniul contextual afiat vezi, Figura 31, clic pe opiunea Delete.

Figura 31. Meniu contextual al paginii.

Se afiaz caseta Delete Page din Figura 32 n care se alege opiunea Remove page from the navigation structure, apoi clic pe OK.

23

Figura 32. Caseta Delete Page.

Exerciiu. S se creeze structura de site din Figura 33.

Figura 33. Structur de site.

Atunci cnd se creaz o nou pagin fr ca alt pagin s fie selectat, se creaz o pagin de tip Top Page. Paginile Page 6 i Page 7 din figur se creaz cu pagina Page 3 selectat.

4.2 Crearea unei bare de legturi

La crearea unui site trebuie s crem o structur logic de navigare ce va asigura c vizitatorii vor gsi rapid i n mod logic informaiile dorite. Vizitatorii trebuie s tie n orice moment unde sunt n site i s poat naviga spre paginile dorite. O bar de legturi (de navigare) este o mulime de legturi (hyperlinks) care permit vizitatorilor s navigheze ntre paginile unui site. Barele de navigare trebuie plasate n fiecare pagin astfel nct s permit navigarea ctre paginile destinate. Bara de legturi poate fi creat pe baza structurii de navigare a siteului sau specificat de utilizator. Bara de legturi poate fi plasat n pagin orizontal sau vertical i poate utiliza pentru legturi text sau butoane. O pagin poate conine mai multe bare de navigare. 4.2.1 Bare de legturi create pe baza structurii de navigare Un site are o structur ierarhic i logic reprezentat de structura de navigare. Din aceast structur rezult legturile ce vor fi introduse n bara de navigare i etichetele acestor legturi. In general un site are o structur de arbore, ca cea din Figura 33. Pagina de cas este prima pagin adugat siteului i ea are numele index.htm. Paginile la nivel global sunt paginile la acelai nivel cu pagina de cas, (fr pagina de cas), n Figura 33 pagina Top Page 1. Arborele conine pagini printe i pagini copil. Paginile copil la acelai nivel n arbore i care au acelai printe se numesc pagini la acelai nivel. Fie structura de navigare a unui site din Figura 34. 24

Figura 34. Structur de navigare.

Vom crea o bar de legturi bazat pe aceast structur. Vor exista legturi din pagina index.htm ctre paginile Structura, Studii i Studenti i din pagina Studii ctre paginile Master i Doctorat. Procedura de creare a barelor de legturi este urmtoarea: 1. se deschide siteul n vederea Page cu clic pe meniul View Page, vezi Figura 35. Se are grij ca pagina n care se insereaz bara de legturi s fie selectat n fereastra documentului. In cazul nostru aceast pagin este index.htm i ea este afiat n partea dreapt,

Figura 35. Site n vederea Page.

2. clic pe meniul Insert Navigation. Se afiaz caseta Insert Web Component, pasul I, vezi Figura 36,

25

Figura 36. Caseta Insert Web Component. Pasul I: alegerea tipului barei de legturi.

3. clic pe Link Bars n lista Component type, 4. clic pe Bar based on navigation structure n lista Choose a bar type; clic Next, 5. se afiaz caseta Insert Web Component, pasul II, vezi Figura 37, clic pe stilul dorit pentru bara de legturi, clic Next,

Figura 37. Caseta Insert Web Component. Pasul II: alegerea stilului barei de legturi.

26

6. se afiaz caseta Insert Web Component, pasul III, vezi Figura 38; clic pe orientarea dorit, orizontal sau vertical; clic Finish,

Figura 38. Caseta Insert Web Component. Pasul III: alegerea orientrii dorite.

7. se afiaz caseta Link Bar Properties din Figura 39 se alege opiunea Child pages under Home deoarece ntroducem bara de lagturi n pagina de cas. Clic OK.

27

Figura 39. Caseta Link Bar Properties.

Caseta Link Bar Properties arat pagina n care va aprea bara de legturi i paginile ce vor fi legate. Aplicaia FrontPage crez bara de legturi din Figura 40 n pagina index.htm.

Figura 40. Bara de legturi pentru pagina index.htm.

Se adaug acum o bar de legturi paginii Studii. Se selecteaz pagina Studii cu dublu clic i se repet procedura de mai sus. La pasul 6 alegem ca orientarea barei de legturi s fie vertical. La pasul 7 alegem proprietatea Child level, vezi Figura 41. Acesta este tipul de bar de legturi ce trebuie creat de la pagina Studii la paginile Master i Doctorat.

28

Figura 41. Caseta Link Bar Properties.

Aplicaia FrontPage crez bara de legturi din Figura 42.

Figura 42. Bara de legturi pentru pagina Studii.

Vom trece n vederea Hyperlinks pentru a vedea legturile ntre pagini cu clic pe meniul View Hyperlinks sau pe butonul Hyperlinks al barei Views. Un clic pe o pagin duce la afiarea legturilor ca n Figura 43 i Figura 44.

29

Figura 43. Legturile paginii index.htm.

Figura 44. Lagturile paginii studii.htm.

4.2.2 Bare cu legturi napoi (back) i nainte (next) Fie un site cu structura de navigare din Figura 45. Din pagina de cas putem s ne deplasm n pagina Structura cu un buton Next. Vrem ca navigarea ntre paginile Structura, Studii, Studenti s se fac cu butoane Next i Back cu care s ne deplasm de la o pagin la alta. In plus, din fiecare pagin trebuie s ne putem deplasa ctre

30

pagina de cas index.htm cu un buton Home. Aceast structur este reprezentat n Figura 46.

Figura 45. Structura de navigare.

Figura 46. Legturile ntre pagini.

Vom utiliza bare cu legturi back (napoi) i next (nainte). Butoanele din pagini vor fi urmtoarele: bara din pagina Structura va conine butoanele Home, Next, bara din pagina Studii va conine butoanele Back, Home, Next, bara din pagina Studenti va conine butoanele Back, Home, bara din pagina Index va conine butonul Next. Butonul Home afiaz pagina de cas. Butoanele Next i Back afiaz pagina urmtoare respectiv precedent. Procedura de creare a unei asemenea bare este urmtoarea: 1. se afiaz pagina Index cu dublu clic, 2. clic pe meniul Insert Navigation; se afiaz caseta Insert Web Component, pasul I din Figura 47; clic pe Bar with back and next links, clic pe Next,

31

Figura 47. Caseta Insert Web Component, pasul I.

3. n caseta Insert Web Component, pasul II din Figura 48 se alege stilul barei; vezi i Figura 37; clic pe Next,

Figura 48. Caseta Insert Web Component, pasul II.

4. n caseta Insert Web Component, pasul II din Figura 48 se alege orientarea barei; vezi i Figura 38; clic pe Finish,

32

Figura 49. . Caseta Insert Web Component, pasul III.

Dup acesta se afiaz caseta Link Bar Properties din Figura 50. In lista Links se introduce toare paginile ntre care dorim legturi de tipul back, next. Pentru aceasta se utilizeaz butoanele Add link, Remove link i Modify link. Paginile trebuie aranjate n ordinea n care ne deplasm cu butonul next. Ordinea paginilor se poate modifica cu butoanele Move up i Move down. Putem introduce n pagin o bar de legturi existent sau putem cea una nou cu butonul Create new. Putem insera legturi adiionale; pagina de cas cu butonul Home page, pagina printe cu butonul Parent page. Pentru pagina index.htm vom crea o bar cu numele Index Link Bar.

33

Figura 50. Caseta Link Bar Properties. Bara Index Link Bar.

Vom crea n continuare o bar de legturi pentru celelalte trei pagini cu numele BackNext Link Bar. Ea va conine i o legtur ctre pagina de cas. Bara este cea din Figura 51.

34

Figura 51. Caseta Link Bar Properties. Bara BackNext Link Bar.

Paginile de Web cu butoanele de navigare sunt cele din Tabelul 5

Tabelul 5. Paginile de Web cu butoanele de navigare.

35

Structura de navigare i barele de legturi sunt cele din Figura 52.

Figura 52. Structura de navigare i barele de legturi.

Legturile ntre apgini n vederea Hyperlinks sunt cele din Figura 53.

Figura 53. Legturile ntre pagini n vederea Hyperlinks.

4.3 Regiuni partajate

Regiunile partajate sunt zone din pagini care sunt rezervate unor elemente ce vor aprea n paginile de Web, de exemplu bare de legturi. Pentru exemplificare vom crea zone pe structura de navigare din Figura 54.

36

Figura 54. Structur de navigare a unui site.

Procedura de creare a regiunilor partajate este urmtoarea: 1. se afiaz siteul n vederea Navigation cu clic pe meniul View Navigation sau pe bara de instrumente View, 2. clic pe meniul View Folder List pentru a ascunde fereastra Folder List, 3. clic pe meniul Format Shared Borders; se afiaz caseta Shared Borders din Figura 55,

Figura 55. Caseta Shared Borders.

4. se marcheaz opiunea All pages, 5. se marcheaz opiunile Top i Include navigation buttons, 6. se marcheaz opiunile Left i Include navigation buttons, 7. clic OK. Dac opiunea Shared Borders nu este activ, trebuie marcat opiunea Shared Borders n caseta Page Options afiat cu clic pe meniul Tools Page Options Authoring. Cu opiunile alese, Top i Left, aplicaia FrontPage genereaz bare de legturi n toate paginile, n partea de sus i n stnga pe baza structurii de navigare. In partea stng sunt generate bare de legturi ctre paginile copil. In partea de sus sunt generate bare de legturi ctre paginile printe i de acelai nivel. Paginile cu bare de legturi generate sunt artate n Figura 56 pagina de cas, n Figura 57 pagin de acelai nivel

37

fr pagini copil, n Figura 58 pagin de acelai nivel cu pagini copil, n Figura 59 pagin de acelai nivel fr pagini copil. Stergerea regiunilor partajate se face astfel: se afiaz caseta Shared Borders i se deselecteaz toate opiunile Top, Left, etc.

Figura 56. Barele de legturi din regiunile partajate, pagina de cas.

38

Figura 57. Barele de legturi din regiunile partajate, pagini la acelai nivel fr pagini copil.

Figura 58. Barele de legturi din regiunile partajate, pagini la acelai nivel cu pagini copil.

39

Figura 59. Barele de legturi din regiunile partajate, pagini la acelai nivel fr pagini copil.

Barele de legturi se pot testa n felul urmtor: 1. se trece n vederea Page, 2. se afiaz pagina de cas, 3. se navigheaz cu Ctrl + clic pe legturi. Deoarece n partea de sus a paginilor apare o bar de legturi ctre paginile de acelai nivel, n cazul paginii de cas nu exist generat nicio bar de legturi, vezi Figura 56. Vom modifica aceast bar de legturi pentru a afi legturile ctre celelalte pagini. Procedura este urmtoarea: 1. se afiaz pagina index.htm, 2. dublu clic pe textul [Edit the properties for this link bar to display hyperlinks here]; se afiaz caseta Link Bar Properties din Figura 60, 3. se selecteaz opiunea Child level i se deselecteaz toate celelalte opiuni, 4. clic OK, 5. clic Home pentru a deselecta bara de legturi..

40

Figura 60. Caseta Link Bar Properties.

Pagina index.htm devine cea din Figura 61.

Figura 61. Pagina index.htm.

41

Acum pagina index.htm conine dou bare cu legturi identice. Vom terge bara din partea stng. Procedura este urmtoarea: 1. dublu clic pe bara de legturi, 2. n caseta Link Bar Properties se selecteaz opiunea Same level i se marcheaz opiunea Home page, 3. clic OK. Bara de legturi este nocuit cu textul [Edit the properties for this link bar to display hyperlinks here]. Acest text este afiat doar n vederea Page. Pagina index.htm rezultat este cea din Figura 62.

Figura 62. Pagina index.htm.

4.4 Vederea Reports

Vederea Reports permite s generm rapoarte despre site. Categoriile de rapoarte ce se pot genera sunt cele din Figura 63. Site Summary genereaz un raport cu toate fiierele siteului i coninutul lor, legturile ntre pagini, etc., Files genereaz rapoarte despre fiiere: toate fiierele, fiierele recent adugate, recent modificate, Shared Content genereaz rapoarte despre temele utilizate n pagini, regiunile partajate, Problems genereaz rapoarte despre fiierele nelegate, legturi, Usage genereaz rapoarte de analiz despre utilizarea siteului, numrul de pagini vizitate, (sptmnal, lunar, zilnic), sistemele de operare, browsere, etc.

42

Figura 63. Categorii de rapoarte despre site.

Un exemplu se sumar al siteului este cel din Figura 64.

Figura 64. Sumarul siteului.

Menionm c sub bara cu butoanele corespunztoare paginilor exist lista cu categoriile de rapoarte din Figura 63. In acest fel se poate trece rapid de la un raport la altul.

43

5 Crearea unei pagini de Web

Crearea unei pagini de Web vide se face astfel: 1. se afiaz fereastra New n dreapta ecranului cu clic pe meniul File New Page, dac aceasta nu este afiat, 2. n fereastra New, n seciunea New Page clic pe opiunea Blank Page. Alternativ, clic pe butonul New page, , din bara de instrumente. Implicit, la lansarea aplicaiei este afiat a nou pagin goal cu numele new_page_1.htm, vezi Figura 2. O pagin de Web conine text, figuri, legturi ctre alte pagini de Web i controale, butoane , etc. Textul poate fi mprit n paragrafe, poate conine tabele sau liste i poate fi formatat dup dorin.

5.1 Introducerea textului

Vrem ca pagina noastr de Web s aibe titlul Pagina personala i s conin rubricile Nume: Prenume: Faculatatea: Specialitatea: Pagina de Web cu textul introdus este cea din Figura 65.

Figura 65. Pagin de Web.

La apsarea tastei Enter cursorul se mut n jos cu dou spaii.

44

5.1.1 Formatarea textului Vom formata textul astfel: titlul va avea fontul cu stilul ngroat, iar fiecare rubric va avea un font diferit i o culoare diferit. Formatarea textului se face astfel: 1. se selecteaz textul ce se va formata, 2. se afiaz caseta Font cu clic pe meniul Format Font, vezi Figura 67 i Figura 68. Alternativ se pot utiliza butoanele barei de formatare a textului din Figura 66.
Figura 66. Bara de formatare a textului.

Opiunile necesare se aleg din seciunile casetei Font.

Figura 67. Caseta Font, seciunea Font.

In seciunea Font a casetei Font se pot modifica tipul, stilul, dimensiunea, culoarea i efectele (subliniere, indici, etc.) fontului,

45

Figura 68. Caseta Font, seciunea Character Spacing.

Culoarea textului selectat se alege din caseta Font Color, vezi Figura 69. Ea se afiaz cu clic pe butonul al barei de instrumente sau cu clic pe sgeata zona Color a seciunii Font din Figura 67. a listei din

Figura 69. Caseta Font Color.

Pagina formatat cu stilul ngroat pentru titlu i culoarea albastru pentru datele personale este cea din Figura 70.

46

Figura 70. Pagina de Web formatat.

5.1.2 Introducerea caracterelor speciale Caracterele speciale se introduce n text astfel: clic pe meniul Insert Symbol; se afiaz caseta Symbol din Figura 71, se introduce caracterul dorit apoi clic pe Insert, Close.

47

Figura 71. Caseta Symbol.

Un exemplu de pagin cu formule cu caractere speciale este cel din Figura 72.

Figura 72. Introducerea de caractere speciale.

5.2 Liste
Exist liste ale cror elemente sunt numerotate, cnd ordinea elementelor este important i liste evideniate cnd ordinea elementelor nu este important. Pentru

48

formatarea listelor se utilizeaz butoanele barei de formatare sau opiunile meniului Format. 5.2.1 Evidenierea elementelor listelor Pentru a crea o list se procedeaz astfel: 1. se introduc toate elementele listei, fiecare element pe o nou linie, 2. se selecteaz toate elementele listei, 3. clic pe butonul Bullets, . Alternativ, dup selectarea elementelor listei se procedeaz astfel: 1. se afiaz caseta List Properties seciunea Plain Bullets cu clic pe meniul Format Bullets and Numbering, vezi din Figura 73, 2. se alege tipul de marcaj dorit, 3. clic pe OK.

Figura 73. Caseta List Properties, seciunea Plain Bullets.

Menionm c butonul Bullets utilizeaz stilul curent de evideniere. La utilizarea casetei List Properties se poate alege stilul dorit de evideniere sau se poate schimba stilul existent. 5.2.2 Numerotarea listelor Elementele listelor se pot numerota n felul urmtor: 1. se introduc toate elementele listei, fiecare element pe o nou linie, 2. se selecteaz toate elementele listei, 3. clic pe butonul Numbering, . 49 .

Figura 74. Caseta Bullets and Numbering. seciunea Numbers.

Alternativ, dup selectarea elementelor listei se procedeaz astfel: 1. se afiaz caseta List Properties seciunea Numbers, cu clic pe meniul Format Bullets and Numbering, din Figura 74, 2. se alege tipul de numerotare dorit, 3. clic pe OK. Menionm c butonul Numbering utilizeaz stilul curent de numerotare. La utilizarea casetei List Properties se poate alege stilul dorit de numerotare sau se poate schimba stilul existent i se poate alege de unde ncepe numrtoarea. 5.2.3 Crearea sublistelor Menionm c putem crea liste cu subliste. Pentru a crea o sublist corespunztoare unui element din list clic pe butonul Increase Indent, . Dup terminarea elementelor sublistei clic pe butonul Decrease Indent, . O list cu subliste este cea din Figura 75. Dup introducerea primului element din list, Inginerie Elctric, la apsarea tastei Enter apare numrul 2 pentru urmtorul element. Pentru a crea primul element din sublist clic pe butonul Increase Indent, , apoi pe butonul Bullets, i se creaz primul element din sublist. Textul elementelor listei se poate formata dup cum s-a artat mai nainte. In cazul nostru titlurile sublistelor au fost formatate cu fontul 14 i stilul ngroat. Titlul listei a fost formatat cu dimensiunea fontului 15 i stilul ngroat.

50

Figura 75. Lista cu subliste.

5.3 Introducerea tabelelor

Tabelele permit organizarea datelor pe linii i pe coloane. Tabelele constau din linii i coloane de celule. Celulele pot conine date, figuri, liste, butoane sau alte tabele. Operaiile asupra tabelelor i celulelor, inserare, tergere, reuniunea sau divizarea celulelor, etc., se fac cu opiunile meniului Table din Figura 76. 5.3.1 Introducerea unei tabel Introducerea unei tabel se face astfel:

51

Figura 76. Meniul Table.

1. clic pe meniul Table Insert Table din Figura 76; se afiaz caseta Insert Table din Figura 77,

52

Figura 77. Caseta Insert Table.

2. n caseta Insert Table din Figura 77 se aleg: a. numrul de linii n caseta Rows, b. numrul de coloane n caseta Columns, n zona Size, c. dimensiunea marginii n caseta Border Size, n zona Borders, d. spaierea celulelor n caseta Cell Spacing, e. spaierea textului n celule n caseta Cell Padding, f. alinierea tabelei n pagin n caseta Alignment, g. limea tablei se alege n pixeli sau procente din limea paginii n zona Layout. Aceste proprieti pot fi modificate dup crearea tabelului n caseta Table Properties ce are aceleai opiuni cu caseta Insert Table. Caseta Table Properties este afiat cu clic pe meniul Table Table Properties sau cu clic pe opiunea Table Properties a meniului contextual al tabelei. Un exemplu de tabel este cel din Figura 78 cu datele contabile ale unei ntreprinderi. Tabelul a fost formatat cu proprietile: dimensiunea marginii 2 pixeli, spaierea celulelor 3 pixeli i 2 pixeli. Datele din tabele se pot formata cu opiunile meniului Format sau ale barei de formatare din Figura 66. Celulele se pot formata dup cum se va arta mai jos. 53

Figura 78. Tabel cu venituri i cheltuieli.

5.3.2 Inserarea titlului unui tabel Inserarea titlului deasupra tabelului se face cu clic pe meniul Table Insert Caption, vezi Figura 76. Inserarea titlului sub tabel se face astfel: 1. se insereaz titlul deasupra tabelului, 2. se afiaz meniul contextual din Tabelul 6a cu clic cu butonul drept pe titlul tabelului; 3. clic pe Caption Properties. In caseta Caption Properties din Tabelul 6b clic pe Bottom of table i apoi pe OK.

a) meniu contextual Alinierea titlului tabelului se face astfel: 1. se selecteaz titlul tabelului,

b) caseta Caption Properties

Tabelul 6. Meniu contextual i tabela Caption Properties.

54

2. n bara de formatare clic pe butoanele barei de formatare, clic pe aliniere la stnga, pe pentru aliniere n centru i dreapta. Un exemplu de tabel cu titlu este cel din Figura 79.

pentru

pentru aliniere la

Figura 79. Tabel cu titlu.

5.3.3 Selectarea, tergerea i inserarea de linii, coloane i celule n

tabele
Selectarea unei tabele, linii, coloane sau celule se face astfel: 1. clic pe tabel, celul din linia sau coloana ce va fi selectat, 2. clic pe meniul Table Select, vezi Figura 80, 3. clic pe una din opiunile Table, Column, Row, Cell, corespunznd elementului ce trebuie selectat.

Figura 80. Selectarea unui tabel, linie, coloan, celul.

Stergerea unui tabel, linie, coloan, celul se face astfel: 1. se selecteaz elementul ce trebuie ters ca mai sus, 2. se afiaz meniul contextual cu clic cu butonul drept pe tabel,

55

3. se excut clic pe Delete Cells. Meniurile contextuale ale unei tabele, linii, coloane celule sunt diferite. Meniul contextual din Figura 81 este cel al unei tabele.

Figura 81. Meniu contextual la selectarea unei tabele.

Pentru a terge titlul unui tabel se selecteaz titlul i se apas tasta Delete. Inserarea unei linii sau coloane se face astfel: 1. se selecteaz o celul lng linia sau coloana ce trebuie introdus, 2. clic pe meniul Table Insert Rows or Columns, vezi Figura 82; se afiaz caseta Insert Rows or Columns din Figura 83,

Figura 82. Inserarea unei linii sau coloane ntr-un tabel.

3. se alege dac se insereaz linii sau coloane, locaia deasupra / sub sau la stnga / dreapta celulei selectate i numrul de linii sau coloane ce se vor insera.

56

Figura 83. caseta Insert Rows or Columns.

Pentru a insera o celul: 1. se selecteaz celula ce va fi deplasat la dreapta, 2. clic pe meniul Table Insert Cell. 5.3.4 Formatarea celulelor Celulele unei tabele se pot formata pentru a alege modul de aranjare, culoarea marginilor i a fondului, etc. Pentru a formata o celul se procedeaz astfel: 1. clic pe celul cu butonul drept; se afiaz meniul contextual din Figura 84, 2. clic pe Cell Properties; se afiaz caseta Cell Properties din Figura 85.

Figura 84. Meniu contextual a unei tabele.

57

Figura 85. Caseta Cell Properties.

Pentru a alege culoarea marginilor se procedeaz astfel: pentru ca marginile celulei s aibe aceeai culoare se afiaz lista Color din seciunea Borders i se alege culoarea dorit, vezi celulele primei linii ale tabelului din Figura 86, pentru ca marginile celulei s aib dou culori se afiaz listele Light Border i Dark Border i se aleg culorile dorite, vezi celulele liniei a treia ale tabelului din Figura 86.

Figura 86. Tabel cu marginile celuleor colorate.

Coloarea fundalului unei celule se alege din lista Color a seciunii Background. Un exemplu de alegere a culorilor este artat n Figura 86. Pentru a reuni celule dintr-o linie sau coloan se selecteaz aceste celule i se reunesc cu clic pe meniul Table Merge Cells sau cu clic pe opiunea Merge Cells a meniului contextual al tabelei. Pentru a diviza celule se selecteaz celulele i clic pe meniul Table Split Cells sau pe opiunea Split Cells a meniului contextual al tabelei. Se afiaz caseta Split Cells din Tabelul 7 n care se alege numrul de coloane sau de linii n care s se divid o celul.

58

a) n coloane
Tabelul 7. Divizarea celulelor.

b) n linii

5.4 Inserarea unei fotografii

Inserarea unei fotografii se face astfel: 1. clic pe meniul Insert Picture From File, vezi Figura 87,

Figura 87. Meniul Insert. Inserarea unei fotografii.

2. se afiaz caseta de dialog Picture din Figura 88 n care se alege fiierul dorit. In caseta Picture se poate naviga pn la directorul ce conine imaginea de inserat n lista Look in, 3. clic pe butonul Insert.

59

Figura 88. Caseta de dialog Picture.

O pagin cu trei fotografii inserate ntr-o tabel este cea din Figura 89.

60

Figura 89. Pagin de Web cu figuri.

Dup inserarea n pagin fotografia poate fi formatat. La un clic cu butonul stng pe fotografie, aceasta este selectat. La coluri i n mijlocul laturilor apar opt marcaje. La plasarea mousului pe un marcaj cursorul ia forma unei sgei cu dublu sens i fotografia poate fi mrit sau micorat prin tragere. Pentru a modifica proprietile fotografiei se afiaz caseta Picture Properties din Figura 90. In aceast caset se pot modifica poziia fotografiei, dimensiunile ei i modul de aranjare a textului.

61

Dimensiunile fotografiei se modific n seciunea Size: limea ( Width) i nlimea (Height), n pixeli sai n procent din limea paginii. Se poate pstra raportul iniial lime / nlime dac se marcheaz caseta Keep aspect ratio. Aranjarea fotografiei n pagin se alege n seciunea Layout. Poziia fotografiei se alege n lista Alignment, Center Centru), Left (Stnga), Right (Dreapta). etc. Stilul textului relative la fotografie se alege n seciunea Wrapping Style. In cazul opiunii None textul nu apare n rnd cu fotografia. In cazul opiunilor Left i Right textul nconjoar fotografia dup cum se arat n Figura 90.

Figura 90. Caseta Picture Properties.

In cazul nostru dimensiunile fotografiilor au fost alese 256 x 192 pixeli. S-a meninut constant raportul lime / nlime. Poziionarea fotografiilor s-a fcut cu opiunile din seciunea Wrapping style. Pentru salvarea paginii clic pe meniul File Save sau pe butonul Save al barei de instrumente. La salvarea paginii se afiaz caseta Save Embedded Files cu care se salveaz copii ale fotografiilor. In aceast caset se poate allege directorl n care s se salveze fotografiile. Exist posibilitatea de a afia doar icoane (thumbnails) pentru fotografii. In acest fel vizitatorul unui site poate descrca doar fotografiile de interes i s reduc timpul de ncrcare a paginii. Pentru a crea icoane (thumbnails) ale fotografiilor se procedeaz astfel: 1. se insereaz fotografiile n pagin ca mai nainte, 2. se selecteaz o fotografie cu clic, 3. se afiaz meniul contextual al unei fotografii din Figura 91 cu clic cu butonul drept,

62

4. clic pe opiunea Auto Thumbnail i fotografia se transform ntr-o icoan nconjurat de un chenar albastru, 5. se procedeaz la fel pentru toate fotografiile. Se obine o pagin ca cea din Figura 92.

Figura 91. Meniul contextual al unei fotografii.

Figura 92. Pagin cu fotografii transformate n icoane.

La salvarea paginii cu clic pe meniul File Save sau pe butonul Save se afiaz caseta Save Embedded Files, ca mai nainte. De aceast dat se salveaz i icoanele create. Aceste icoane au numele fiierului la care se adaug sufixul _small. Proprietile icoanelor (thumbnails) se pot prescribe cu clic pe meniul Tools Page Options Auto Thumbnail.

63

Putem aranja icoanele fotografiilor dup dorin. Ne putem deplasa cu cursorul printre icoane la fel ca prin text cu tastele i . Putem insera spaii cu tastele Space sau Tab, putem terge spaii cu tasta Delete. Putem insera caracterul CR cu tasta Return. Pentru a aranja icoanele pe dou rnduri procedm n felul urmtor: 1. clic pe prima icoan, apoi se apas tasta Home i cursorul se mut la stnga icoanei, 2. se apas tasta pentru a muta cursorul la urmtoarea icoan; se apas tasta Tab i se creaz spaiu ntre icoane, 3. se mut cursorul la a treia icoan cu tasta ; clic pe tasta Enter mut icoanele rmase pe rndul urmtor, 4. se apas tasta i cursorul se mut la urmtoarea icoan; se apas tasta Tab i se creaz spaiu ntre icoane. Se obine pagina din Figura 93.

Figura 93. Pagin cu fotografii transformate n icoane.

5.5 Salvarea unei pagini de Web

Vom salva pagina din Figura 89. Pentru salvarea paginii de Web create clic pe meniul File Save As. Se afiaz caseta Save As din Figura 94 n care se poate alege siteul n care se va salva pagina n lista Save in i numele pagini n caseta File_name. Clic pe OK. In cazul nostru salvm pagina pe siteul My Web Sites. Menionm c icoana arat c este vorba de un site. Numele fiierelor nu trebuie s includ caractere speciale i spaii. Unele dintre aceste caractere au semnificaie special pentru servere. Se recomand ca numele fiierelor s aibe semnificaie i s fie specifice. Ele trebuie utilizate pentru a descrie coninutul fiierului. Dei se pot salva toate paginile n directorul rdcin, se recomand organizarea paginilor n directoare.

64

 Se recomand organizarea directoarelor pe categorii, fiecare categorie are propriul director. Fiecare director al unei categorii poate conine subdirectoare. Se recomand gruparea fiierelor cu acelai coninut. De exemplu, siteul are un director pentru imagini. Se recomand plasarea tuturor imaginilor n acest director pentru a putea fi regsite rapid. Dac exist multe imagini se recomand crearea unui director care s conin imagini n fiecare seciune a siteului.

Figura 94. Caseta Save As.

Odat cu pagina de Web trebuie salvate i fiierele cu imagini din pagin. Dup nchiderea casetei Save As se afiaz caseta Save Embedded Files din Figura 95 n care se poate alege locul n care se vor salva fiierele cu imagini din pagin. Clic pe OK.

65

Figura 95. Caseta Save Embedded Files.

Coninutul directorului cu pagina de Web salvat i fiierele incluse este cel din Figura 96.

Figura 96. Pagina de Web cu fiierele coninute.

5.6 Inserarea unei legturi (hyperlink)

O pagin de Web poate conine legturi (hyperlink) ctre ctre alte situri, ctre alte pagini de Web din acelai site, ctre diverse locuri din pagin.

66

5.6.1 Inserarea unei legturi ctre un loc din aceeai pagin Fie o pagin de Web cu informaii despre anii de studii I, II, III i IV. Informaiile despre un an se afl sub titlul respectiv, Anul I, Anul II, Anul III, Anul IV n zona Informaii. Pentru o navigare rapid n pagin, n partea de sus sunt patru rubrici Anul I, Anul II, Anul III, Anul IV i la clic pe Ctrl + an cursorul trebuie mutat la rubrica cu informaii despre anul respectiv. Pagina respectiv trebuie s arate ca n Figura 97.

Figura 97. Pagin de Web n care se vor crea legturi.

Inserarea unei legturi n acelai document se face astfel: 1. clic cu cursorul poziionat n punctul unde vrem s navigm, n cazul nostru Anul I sub Informaii, 2. clic pe meniul Insert Bookmark, vezi Figura 98; se afiaz caseta Bookmark din Figura 99,

67

Figura 98. Meniul Insert.

3. n caseta de text Bookmark name se introduce numele dorit, n cazul nostru anulI. Clic pe OK. In punctul unde a fost poziionat cursorul apare un stegule, , vezi Figura 100.

Figura 99. Caseta Bookmark.

68

Figura 100. Pagina de Web cu bookmark pentru Anul I.

4. se selecteaz textul sau figura de unde vrem s mavigm. In cazul nostru selectm textul Anul I din partea de sus a paginii, 5. clic pe butonul Insert Hyperlink, , al barei de instrumente i se afiaz caseta Insert Hyperlink din Figura 101.

69

Figura 101. Caseta Insert Hyperlink

6. clic pe butonul Place in This Document din partea stng i pe bookmarkul anulI din lista Select a place in this document. Clic pe OK. Textul selectat este legat acum de bookmark. Se apas tasta Ctrl i clic pe an i cursorul se mut la titlul respectiv n zona Informaii. Pagina complet este artat n Figura 102.

70

Figura 102. Pagina de Web cu legturi create.

5.6.2 Inserarea de legturi ctre alte pagini de Web din acelai site Fie un site cu informaii pentru studeni. El are o pagina de Web cu titlul Informaii pentru studeni i dou pagini Orar anul I i Orar anul II cu orarele respective. Pagina Informaii pentru studeni trebuie s aib legturi spre cele dou pagini, Orar anul I i Orar anul II. Paginile respective sunt cele din Figura 103, Figura 104 i Figura 105.

71

Figura 103. Pagina Informatii pentru studenti.

Figura 104. Pagina Orar anul I.

72

Figura 105. Pagina Orar anul II.

Pentru a crea legturi de la pagina Informaii pentru studeni la celelalte dou pagini se procedeaz astfel: 1. se creaz cele trei pagini, 2. n pagina Informaii pentru studenti se selecteaz textul Orar anul I, 3. clic pe butonul Insert Hyperlink, , al barei de instrumente i se afiaz caseta Insert Hyperlink din Figura 106, 4. clic pe butonul Existing File or Web Page din stnga casetei. In lista Look in se selecteaz directorul unde se gsete siteul, n cazul nostru My Web Sites, apoi subdirectorul corespunztor, n cazul nostru directorul curent, 5. se selecteaz pagina destinaie OrarAnulI i clic pe OK. n caseta Address apare adresa paginii, aici OrarAnulI.htm, 6. se procedeaz la fel pentru a crea o legtur spre pagina OrarAnulII.

73

Figura 106. Caseta Edit Hyperlink.

5.7 Adugarea unei teme

Aplicaia FrontPage are teme predefinite ce pot fi aplicate paginilor. Pentru a aplica o tem se procedeaz astfel: 1. se selecteaz o pagin cu dublu clic, 2. clic pe meniul Format Theme; n fereastra Task Pane se afiaz fereastra Theme cu toate temene existente, vezi Figura 107, 3. se selecteaz tema dorit.

Figura 107. Aplicarea unei teme.

O tem se poate aplica tuturor paginilor sau doar unor pagini. Imaginea unei teme este cea din Tabelul 8a. Un clic pe butonul din dreapta imaginii afiaz caseta din Tabelul

74

8b. Opiunea Apply as default theme aplic tema aleas tuturor paginilor siteului. Opiunea Apply to selected page(s) aplic tema paginii (paginilor) selectate. Selectarea mai multor pagini se face astfel: 1. clic pe meniul View Folders, 2. n seciunea Folder List se selecteaz paginile dorite cu clic innd tasta Ctrl apsat.

a) imaginea unei teme

b) opiuni de aplicare

Tabelul 8. Aplicarea unei teme.

Un exemplu de tem aplicat unei pagini este cel din Figura 108.

Figura 108. Tem aplicat unei pagini.

75

6 Utilizarea cadrelor (frames)

Cadrele impart o pagin de Web n mai multe seciuni. In acest fel ele ne permit s afim mai multe pagini de Web pe ecran n acelai timp. Pagina principal se numete pagin printe. Ea conine instruciuni ce descriu forma i localizarea cadrelor n pagin. Fiecare cadru are o pagin surs ce conine text i grafic. In consecin, pagina afiat conine pagina printe i paginile corespunztoare cadrelor. Atunci cnd salvm o pagin cu cadre vom salva fiecare din aceste pagini. Vom exemplifica utilizarea cadrelor prin construcia unui site al facultii. Pagina va avea trei cadre n care se vor afia informaii despre structura facultii, direciile de studiu i studeni.

6.1 Crearea unei pagini cu cadre

Crerea unei pagini cu cadre se face astfel: 1. clic pe butonul New Page, opiunea Page, , i apoi n lista New Page afiat clic pe

Figura 109. Lista New Page.

2. se afiaz caseta Page Templates din Figura 110. In seciunea Frames Pages clic pe tipul dorit, de exemplu Banners and Contents. Putem vedea mprirea unei pagini n cadre cu clic pe o icoan. In zona Preview se afiaz cadrele din pagin,

76

Figura 110. Caseta Page Templates.

3. clic pe OK i se creaz pagina din Figura 111.

Figura 111. Pagin cu cadre.

77

4. Fiecare cadru conine dou butoane: Set Initial Page i New Page. Executm clic pe Set Initial Page dac pagina pe care vrem s o afim n cadru exist i ea va fi selectat ntr-o caset de dialog. Executm clic pe New Page dac pagina ce trebuie afiat n cadru nu exist i se afiaz o pagin nou n care vom crea textul i grafica ce vor fi afiate n cadru, 5. se salveaz pagina cu clic pe meniul File Save As. Se salveaz pagina principal urmat de paginile surs ale fiecrui cadru. Salvarea paginii principale este afiat n Figura 112. In caseta File name introducem numele dorit, homepage.

Figura 112. Se salveaz pagina principal.

Proprietile unui cadru sunt cele din caseta Frame Properties din Figura 113. In caset putem prescrie numele cadrului n caseta Name, adresa paginii afiat iniial n caseta Initial Page, dimensiunile cadrului n seciunea Frame Size, etc.

78

Figura 113. Caseta Frame Properties.

Vrem ca n cadrul din partea de sus s fie afiat numele facultii. Clic pe cadru i se afiaz o pagin de Web goal n care introducem informaia, Facultatea de Inginerie electrica. Salvm pagina sub numele frame titlu, vezi Figura 114.

Figura 114. Pagina frame titlu.

79

Crem alte trei pagini de Web n care introducem informaiile despre structura facultii, direciile de studiu i studeni. Vom denumi aceste pagini Structura, Studii i respective Studenti.

Figura 115. Pagina Structura.

Figura 116. Pagina Studii.

80

Figura 117. Pagina Studenti.

Vom introduce acum n cadrul din stnga adesele celor trei pagini. Se procedeaz astfel: 1. clic pe butonul New Page; se afiaz o nou pagin de Web, 2. clic pe locul unde se va introduce prima legtur, 3. clic pe butonul Insert Hyperlink, , din bara de instrumente. Se afiaz caseta Insert Hyperlink din Figura 118; clic pe pagina de Web structura i numele ei apare n caseta Address. In caseta Text to display se introduce numele legturii, n cazul nostru Structura,

Figura 118. Caseta Insert Hyperlink.

81

4. clic pe butonul Target Frame; se afiaz caseta Target Frame din Figura 119. Dorim ca pagina Structura s se afieze n cadrul din dreapta. Aceasta este opiunea implicit page Default (main). Clic pe OK.

Figura 119. Caseta Target Frame.

Se insereaz la fel adresele celorlalte dou pagini. Pagina proiectat este cea din

Figura 120. Pagina de Web a facultii.

82

Vom salva pagina proiectat cu clic pe meniul File Save As.

Figura 121. Salvarea paginii de Web.

Se afiaz apoi caseta Save As pentru cele trei pagini surs pentru cadre, dtructura, studii, studenti. Pagina creat afiat n Internet Explorer este cea din

Figura 122. Pagina de Web a facultii afiat in Internet Explorer.

Operaiile cu cadre se pot efectua i cu opiunile meniului Frames din Figura 123.

83

Figura 123. Meniul Frames.

Opiunile Save Page i Save Page As salveaz pagina surs cadrului selectat. Exerciiu. S se creeze pagina de Web din Figura 124. Cadrul din partea de sus a paginii va conine titlul titlul Afisarea unor pagini de Web. In cadrul din stnga se vor introduce adresele a dou servere, www.google.com i www.yahoo.com . La un clic pe o adres vrem ca n cadrul principal s se afieze pagina de cas a serverului.

Figura 124. Pagina de Web.

Pagina de Web ncrcat n Internet Explorer este afiat ca n Figura 125. Un clic pe adresa serverului Google duce la afiarea paginii de cas din Figura 126.

84

Figura 125. Pagina de Web n Internet Explorer.

Figura 126. Pagina de cas a serverului Google.

85

7 Construcia unui site pe baza unui ablon

Vom prezenta crearea automat a unui site bazat pe configuraiile existente n aplicaia FrontPage. Pentru a vedea configuraiile existente clic pe meniul File New care afiaz fereastra de aplicaii New din Figura 5. Un clic pe oricare din opiunile din zona New Web site duce la afiarea casetei de dialog Web Site Templates din Figura 127. Seciunea General conine abloane de site de Web disponibile. Vom crea un site pentru discuii. Se alege ablonul necesar, n cazul nostru Discussion Web Site Wizard, se apas tasta Tab i controlul se deplaseaz la caseta Specify the location of the new Web site. In aceast caset exist un nume generat de aplicaia FrontPage, c:\Users\cautil\Documents\My Webs\mysite1, care poate fi schimbat dup dorin. Se poate naviga n arborele de directoare pentru a schimba directorul cu clic pe butonul Browse. Dup alegerea numelui i locaiei siteului clic pe OK.

Figura 127. Caseta Web Site Templates. Sabloane de site de Web disponibile.

Dup alegerea unui ablon se lanseaz o aplicaie vrjitor care personalizeaz siteul. In cazul siteului de discuii primii pai ai aplicaiei vrjitor sunt artai mai jos n Figura 128 i Figura 129.

86

Figura 128. Discussion Web Site Wizzard, pasul I.

Figura 129. Discussion Web Site Wizzard, pasul II.

Siteul generat de vrjitor este cel din Figura 130.

87

Figura 130. Siteul generat de aplicaia vrjitor.

Intrarea n site se face prin ncrcarea n Internet Explorer a fiierului index.htm. Pagina de start a siteului este artat n Figura 131.

Figura 131. Pagina de start a siteului generat.

88