Orasul Baia de Aries [311251]

Lucrare pentru obtinere a calificativului de atestare

a [anonimizat]:[anonimizat]: [anonimizat] 2018

Cuprins:

Motivul alegerii temei

Aplicatii folosite

Structura si continutul proiectului

Bibliografia

1.[anonimizat], [anonimizat] s-a [anonimizat], vecini, relief , imprejurimi.

2 APLICATII FOLOSITE

Soft utilizat

Resurse de hard si soft

Limbajul HTML

Aplicatia principala folosita

Soft utilizat

Componenta software a unui calculator este un ansamblu de programe. [anonimizat] o [anonimizat]. Programul ( program ) este o [anonimizat]. Aceste comenzi se numesc instrucțiuni (instructions).

Ele sunt codificate în binar și sunt tratate de către unitatea de comanda și control. [anonimizat]. De exemplu, o instrucțiune care acționeaza asupra a doi operanzi conține următoarele informații:

– codul operației pe care trebuie să o execute unitatea aritmeticologică;

– adresa primului operand;

– adresa celui de al doilea operand;

– adresa locației de memorie în care se va depozita rezultatul.

Proiectul a fost realizat in Microsoft Frontpage. Totul se realizeaza din meniuri : inserarea hyperlinkurilor, a imaginilor , a chenarelor de text ; aranjarea in pagina a [anonimizat].

Testul a fost facut cu Internet Explorer 8 (pe scurt IE8) este cel mai nou browser web creat de Microsoft din seria Internet Explorer. Browserul a fost lansat la 19 martie 2009 [anonimizat] 2003, Windows Vista și Windows Server 2008. Ambele versiuni pe 32 și 64 de octeți sunt disponibile. Este succesorul lui Internet Explorer 7, lansat în 2006 și este browserul web prestabilit pentru Windows 7 și Windows Server 2008 R2.

Mic dictionar de termeni :

Hipertext (in engleza hypertext) este o scriere nesecventiala care contine elemente de referiri (hiperlegaturi- hyperlink) care la randul lor reprezinta o [anonimizat]-se conexiuni intre diverse documente si fisiere aflate in diverse locuri

Conceptul de hipertext a [anonimizat] a [anonimizat] (Conseil Europeen pour la Recherche Nucleaire) si care a dus la dezvoltarea retelei WWW (anul 1989).

Hipertextul a [anonimizat], [anonimizat]: [anonimizat], [anonimizat], sunete, animatie, etc.

Elaborarea (generarea) paginilor Web se face pe baza unui limbaj specific de descriere -inventat de Tim Berners-Lee- numit limbaj de marcare hipertext HTML (HyperText Markup Language)

Orice pagina Web trebuie sa reflecte scopul pentru care a fost creata.Textul, imaginile si sunetele trebuie sa comunice utilizarorului-client mesajul care se doreste a fi transmis. De aici, importanta conceperii paginilor Web pentru reteaua WWW ce poate fi accesata de orice utilizator-client.

Un document HTML este un fisier text (ASCII) scris in limbajul HTML si care contine diferite formatari de text. formatari de imagini, module pentru sunete, module pentru animatie, precum si hiperlegaturi pentru alte documente HTML.

Un document HTML ce descrie o pagina Web este compus din punct de vedre a structurii, din elemente ce reprezinta: titluri, subtitluri, paragrafe, liste, definitii, citate, tabele, imagini, secvente audio-video, frame-uri, animatie si nume de hiperlegaturi ce fac referiri la alte documente HTML.

Accesarea paginilor Web cu ajutorul unui browser se realizeaza prin intermediul protocolului http (HyperText Transfer Protocol) care este implementat pe diverse servere, numite servere http.Programul de navigare/explorare trimite mesaj catre serverul respectiv, prin care solicita ca anumite documente sau servicii sa fie puse la dispozitia utilizatorului care a cerut aceste documente sau servicii. La randul sau, serverul accesat, raspunde cererilor prin transmiterea inapoi –catre statia de lucru a utilizatorului- a documentului sau serviciului utilizand protocolul http, iar programul de navigare/explorare il receptioneaza, il interpreteaza, in scopul solicitarii cerute.Calea de comunicatie dintre browser (program de navigare/explorare) si un server din sistemul Internet care gazduieste pagini Web se numeste interfata CGI (Common Gatway Interface).

Resurse de hard si soft

Fiind realizat in HTML, functionarea corecta depinde de foarte putini factori la nivel hardware.

Configuratia minima necesara :

-procesor la 133MHz

-min. 32 MB RAM (de preferat cel putin 64 MB)

-o placa vide care sa suporte mai mult de 256 de culori (optional pentru o afisare corecta a detaliilor).

Configuratia utilizata pentru realizarea atestatului:

-procesor Intel(R) Core 2, frecventa de 1,8Ghz

-memorie RAM :2 GB

-placa video ATI Radeon® Xpress 1100 + slot Pci-Express

La nivel de software este necesara o versiune a browser-ului care sa permita recunoasterea tuturor comenzilor.

Printre resursele software utilizate se numara, asa cum am precizat si anterior:

Microsoft FrontPage

Internet Explorer

Windows 7 Home Premium

Limbajul HTML

HTML (Hypertext Markup Language) este un limbaj creat în scopul de a descrie, în mod text, formatul paginilor Web; fisierele create în acest limbaj vor fi interpretate de navigatoare, care vor afisa paginile în forma doritã (cu texte formatate, liste, tabele, formule, imagini, hiperlegãturi, obiecte multimedia etc.). HTML a apãrut ca o aplicatie ISO standard (apartine standardului SGML – Standard Generalized Markup Language, specializat pentru hipertext si adaptat la Web).

Asa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale elementelor incluse prin procedee de marcare. Acestea pot fi asemãnate intuitiv cu marcajele folosite în tipografie pentru a indica scrierea unui text cu un anumit tip de caractere. Fiecare element va fi introdus între douã marcaje ("tags", în limba englezã) – de început si sfârsit – (uzual) de forma <marcaj> … </marcaj>. Caracterele speciale de delimitare a marcajelor "<", ">" permit deosebirea acestora de textul propriu-zis. De exemplu, pentru textele aldine (îngrosate), marcajul de început este <B> iar de sfârsit – </B>.

În informaticã, limbajele de marcare sunt foarte convenabile fiindcã comenzile lor pot fi interpretate simplu. LaTeX-ul, de exemplu, este tot un limbaj de marcare; prin interpretarea fisierelor .tex descrise în acest limbaj se va genera formatul dorit al documentelor pe diverse tipuri de sisteme de calcul (în cazul, LaTeX-ului, se obtine uzual format PostScript sau PDF). În schimb, procesoarele de documente uzuale nu au un limbaj de marcare standardizat, care sã ofere compatibilitate între diverse tipuri de calculatoare si sisteme de operare. Astfel, se poate spune cã avantajele aplicãrii limbajelor de marcare constau în portabilitate si flexibilitate: fisierele create cu ajutorul lor pot fi transferate pe orice tip de sistem, unde vor fi interpretate cu ajutorul unor programe specifice.

De fapt, procesoarele de texte uzuale folosesc adesea procedee de marcare pentru formatãri (de exemplu, formatãrile de tip caracter din Word); în acest caz însã, caracterele de control introduse sunt ascunse iar rezultatul editãrii este direct vizibil ("What You See Is What You Get"). În schimb, în limbajele de marcare – inclusiv HTML – marcajele sunt introduse în text, astfel încât acestea sunt exclusiv succesiuni de caractere (litere, cifre, caractere speciale) – fisiere de tip text.

Referitor la legãtura dintre procesoarele de documente uzuale si limbajul HTML, mai trebuie mentionat faptul cã ultimele versiuni ale editoarelor de documente oferã facilitãti de salvare în format HTML – de exemplu, Word, începând cu versiunea Microsoft Office '97. Mai mult, toate produsele incluse în aceastã gamã dedicatã biroticii (MS Office) oferã compatibilitate cu formatul HTML.

Procesele de standardizare si de includere a comenzilor de marcare în fisierele HTML permit navigatoarelor sã citeascã si sã formateze paginile Web, lucru foarte important în conditiile în care ele contin nu numai texte alb-negru, ci si culori, imagini, hiperlegãturi, diverse obiecte. Practic, marcajele HTML asigurã controlul asupra modului de afisare a obiectelor corespunzãtoare în cadrul programelor de vizualizare a documentelor HTML – navigatoarele.

Limbajul HTML a evoluat în versiuni succesive, odatã cu evolutia protocolului HTTP si a programelor de navigare. Astfel, HTML 1.0 era compatibil cu Mosaic, primul program de navigare, dar dupã aparitia unor navigatoare noi, a fost necesarã introducerea unui standard oficial Internet pentru construirea paginilor (HTML 2.0) si extinderea sa cu noi facilitãti: formule matematice, tabele, moduri avansate de descriere a organizãrii paginilor (începând cu HTML 3.0).

Standardizarea oficialã a limbajului HTML a fost realizatã de consortiul WWW si dezvoltatã de diversi producãtori de soft (unii dintre acestia urmãresc chiar promovarea navigatoarelor proprii prin introducerea unor particularitãti în formatele oficiale).

Paginile HTML se pot crea cu orice editor de texte de cãtre utilizatorii care cunosc limbajul HTML sau, mai simplu, se pot utiliza editoare speciale, în care obiectele se introduc interactiv iar codul HTML se genereazã automat. Având în vedere cã si în acest caz este utilã cunoasterea marcajelor generate pentru corectarea eventualelor erori (mai ales în cazul link-urilor), vom prezenta în continuare entitãtile care se pot introduce în paginile HTML si marcajele caracteristice acestora.

Elementele limbajului HTML

Toate obiectele HTML sunt introduse între marcaje care le definesc; majoritatea acestora sunt de forma <tip_obiect> (la început) si </tip_obiect> (la sfârsit). Tipul standard al obiectului poate fi specificat cu majuscule sau minuscule; totusi, se recomandã utilizarea majusculelor fiindcã astfel marcajele ies în evidentã.

Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursã HTML (forma pe care o interpreteazã pentru afisarea paginii). La interpretare, programele de navigare ignorã spatiile si <Enter>-urile, aplicând formatarea specificatã.

Existã însã si marcaje cu parametri; acestea au forma <tip_obiect param1=valoare1 param2=valoare2 …>. De exemplu, obiectele de tip imagine sunt introduse cu delimitatorul <IMG>, care are diversi parametri. Pentru definirea hiperlegãturilor se foloseste marcajul <A>, care are de asemenea parametri proprii.
Codurile de marcare HTML pot fi clasificate în urmãtoarele categorii:

marcaje de bazã – cele care delimiteazã pagina / documentul HTML, titlul acesteia si corpul paginii;

marcaje pentru structurarea documentului – care permit introducerea de subtitluri, paragrafe, linii de delimitare;

marcaje pentru formatarea textului si crearea listelor;

marcaje pentru crearea hiperlegãturilor (hyperlinks);

marcaje pentru introducerea de obiecte – tabele, formule, imagini sau obiecte multimedia preluate din fisiere, formulare.

Vom descrie în paragrafele urmãtoare, elementele caracteristice fiecãreia din aceste categorii.

Pentru structurarea si organizarea informatiilor din paginile web se pot utiliza frame-uri (marcajul <FRAME>), prin care la un moment dat se afiseazã mai multe ferestre continând fiecare câte o paginã. Introducerea si gestiunea frame-urilor se realizeazã foarte convenabil folosind editoarele HTML.

Mai mentionãm faptul cã în ultimele versiuni ale limbajului HTML si ale browser-elor s-a introdus posibilitatea integrãrii, respectiv lansãrii în executie prin navigator, a unor aplicatii. Acestea sunt scrise în limbajul Java, un limbaj cu caracteristici distribuite si obiectuale, adaptat programãrii în Web; ele se numesc "applet"-uri si se introduc în sursele HTML cu marcajul <APP> sau <APPLET> . Ultimele versiuni de editoare HTML permit introducerea interactivã a applet-urilor Java.

Marcaje pentru introducerea de obiecte

Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a informatiilor formatate. Asemenea obiecte trebuiau create formatat si introduse ca obiect deja formatat, cu marcajele <PRE>, </PRE>. Aceste marcaje indicau navigatorului cã textul inclus trebuia afisat caracter cu caracter, fãrã vreo interventie de formatare. În versiunile ulterioare ale limbajului HTML, s-au introdus însã facilitãti elegante de formatare, de includere a tabelelor si a altor obiecte.

În HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale si coloane verticale la a cãror intersectie se formeazã celulele. Acestea pot contine intrãri diverse: texte, figuri sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu, pentru titluri mai lungi). Atributele de formatare a tabelului (aliniere, stilul chenarului si marginilor etc.) se definesc în proiectarea paginii dar modul lor de afisare va depinde si de programul de navigare.

Tabelele se introduc între marcajele <TABLE> … </TABLE>, cãrora li se pot atasa (optional) parametrii BORDER si RULES. Un titlu pentru tabel se poate introduce cu marcajul <CAPTION>. Fiecare coloanã se defineste cu marcajul <COL>, având ca parametru ALIGN – modul de aliniere a informatiilor din acea coloanã (LEFT, CENTER, RIGHT).

Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table Header"), pentru trecerea la o linie nouã se utilizeazã marcajul <TR> ("Table Row") iar celulele individuale se marcheazã cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se mai pot specifica alinieri orizontale sau verticale ale celulelor, grupãri de celule etc. Aceste marcaje permit navigatorului sã afiseze diferentiat informatiile din tabel.

Prezentãm în continuare un exemplu simplu de tabel.

<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231 milioane lei</TD>
</TABLE>
</BODY>
</HTML>

Exemplu de tabel într-o paginã HTML

Mãrimea liniilor si a coloanelor poate fi controlatã suplimentar prin marcajele <ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare indicând mãrimea în "celule normale". În plus, se poate indica trasarea unei margini pentru tabel, prin marcajul <TABLE BORDER>.

Includerea imaginilor se face folosind marcajul <IMG>, care are parametri specifici:

SRC indicã (dupã semnul '=') URL-ul imaginii, respectiv calea fisierului dacã acesta este local; uzual, se acceptã fisiere în format GIF sau JPEG;

ALLIGN controleazã alinierea imaginii fatã de limita inferioarã a textului (TOP, MIDDLE sau BOTTOM); este un parametru optional;

ALT furnizeazã textul afisat în locul imaginii dacã utilizatorul dezactiveazã optiunea de afisare a imaginilor (parametru optional);

ISMAP este un indicator optional pentru imaginile care sunt hãrti selectabile.

Astfel, introducerea simplã a unei imagini se poate realiza cu <IMG SRC="specificare-imagine">. Un exemplu de imagine inseratã într-o paginã HTML este prezentat în figura de mai sus.
Remarcãm faptul cã, utilizând parametri specifici, marcajul <IMG> se poate folosi si pentru inserarea unor fisiere multimedia, cum ar fi secventele video. Având în vedere cã aceste operatii se realizeazã mai usor folsind un editor HTML.

Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor de la furnizori cãtre utilizatori, transferul în sens invers fiind foarte dificil. Odatã cu dezvoltarea Web-ului si mai ales cu utilizarea sa în scopuri comerciale si în diverse alte domenii, s-a fãcut simtitã necesitatea comunicãrii în dublu sens pentru preluãri de comenzi, completarea unor fise de înregistrare, distribuirea de produse soft, administrarea de chestionar, transmiterea unor informatii personale etc. Acestea au fost motivatiile introducerii formularelor în HTML 2.0.

Formularele contin obiecte de control care permit utilizatorilor introducerea de informatii prin completarea unor câmpuri specifice (casete de text), prin selectarea sau activarea unor optiuni (comutatoare, grupuri sau liste de optiuni). Aceste informatii vor fi transmise, dupã activarea butonului SUBMIT (echivalentã cu tastarea lui <Enter>) proprietarului paginii, introduse în baze de date dedicate si prelucrate cu aplicatii specifice.

Formularele se introduc prin marcajelele <FORM> … </FORM> , cãrora li se ataseazã parametri specifici care definesc metodele de transmitere si tratare a datelor. Un formular poate contine obiecte de control de diverse tipuri, definite cu marcajul <INPUT> si o varietate de parametri care stabilesc, pentru obiectul definit, tipul, dimensiunea si modul lui de afisare. Astfel, se pot crea câmpuri de text (care vor fi completate cu texte de cãtre utilizator), liste de alternative, comutatoare, grupuri de optiuni, butoane, hãrti active etc.

Datele preluate prin intermediul formularelor se trateazã conform standardului CGI (Common Gateway Interface) prin intermediul unor programe sau script-uri CGI. În plus, un asemenea script poate interactiona cu baza de date creatã pentru realizarea unor actiuni specifice (de exemplu, hãrtile active folosesc script-uri CGI pentru a executa diferite actiuni, în functie de zona selectatã de utilizator).

Script-urile CGI pot executa si alte operatii decât prelucrarea formularelor, producând iesiri convenabile. Dacã o hiperlegãturã indicã spre un script CGI, la selectarea legãturii se va executa script-ul (cu anumite variabile de context care retin diverse informatii de stare). Script-ul va produce un fisier, de exemplu o paginã web, care va fi interpretat(ã) de navigator. Acest mecanism permite script-urilor sã genereze, aproape instantaneu, pagini web care sã satisfacã diverse cerinte ale utilizatorilor, furnizând anumite rãspunsuri asteptate în urma unor actiuni.

Crearea interactivã a formularelor, folosind produse soft specializate în realizarea de pagini Web este relativ accesibilã pentru utilizatorii familiarizati cu caracteristicile obiectelor de control specifice aplicatiilor soft dar tratarea ulterioarã a informatiilor transmise necesitã cunostinte de specialitate.

Numele, simbolurile si procedura de introducere interactivã dintr-un editor HTML (de exemplu, Microsoft Front Page) a obiectelor de control sunt extrem de apropiate de cele asociate obiectelor similare din formularele sau rapoartele Microsoft Access. Pentru utilizatorii mai putin avizati însã, crearea, chiar interactivã, a formularelor este mai dificilã.

Aplicatia principala folosita:Microsoft FrontPage

Lansarea aplicației

Meniurile File și Edit

Crearea unui site

Structura de navigare a unui site

Crearea unei pagini de Web

Utilizarea cadrelor (frames)

Lansarea aplicatiei

Aplicația FrontPage crează pagini de Web și siteuri de Web. Un site este o colecție de pagini de Web cu legături între ele. Paginile de Web sunt descrise în limbajul HTML.

Cu aplicația FrontPage definim grafic paginile de Web și aplicația generează codul corespunzător paginilor în limbajul HTML. Fișierul generat are extensia htm.

Lansarea aplicației FrontPage se face astfel:

clic pe butonul Start,

clic pe opțiunile Programs Microsoft FrontPage.

Figura 1. Lansarea aplicației FrontPage.

Fereastra aplicației FrontPage este cea din Error: Reference source not found. Ea cuprinde:

bara de meniu,

bara de instrumente standard cu butoane corespunzând opțiunilor 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 afișază un text cu funcția butonului,

fereastra documentului cu barele de derulare, orizontală și verticală.

2. Meniurile File si Edit

Meniurile File și Edit sunt arătate în Tabelul 1.

Tabelul 1. Meniurile File și Edit.

Opțiunile meniului File sunt:

New afișază fereastra New în fereastra Task Pane. In această fereastră putem crea un nou fișier sau un nou site,

Open deschide un nou fișier,

Close închide fișierul deschis în fereastra documentului,

Open Site deschide un site,

Close Site închide siteul current,

Save salvează fișierul deschis în fereastra documentului,

Save As salvează fișierul deschis în fereastra documentului sub un nume nou,

Preview in Browser afișază pagina cum apare în Internet Explorer,

Page Setup prescribe dimensiunile paginii pentru tipărire,

Print Preview afișază pagina de tipărit în formatul în care apare tipărită,

Print tipărește pagina selectată,

Recent Files afișază o listă cu fișierele recente, din care se poate alege unul pentru a fi deschis,

Recent Sites afișază o listă cu siteurele recente, din care se poate alege unul pentru a fi deschis,

Exit închide aplicația.

Opțiunile meniului Edit sunt următoarele:

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 fișier,

Delete șterge textul selectat,

Find caută un șir de caractere,

Replace înlocuiește un text cu altul.

O parte din opțiunile meniurilor File și Edit se pot executa și cu butoanele barei de instrumente standard din Figura 2.

Figura 2. Bara de instrumente standard.

3.Crearea unui site

Crearea unui site se face în următorii pași:

dacă este cazul se inchid toate paginile cu clic pe meniul File Close,

clic pe meniul File New; în fereastra Task Pane se afișază fereastra New din Figura 3. In fereastra New secțiunea New Web site clic pe One page Web site și se afișază caseta Web Site Templates din Figura 4,

clic pe opțiunea One Page Web Site,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 aplicația 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 locației siteului clic pe OK

Figura 3. Fereastra New. Figura 4. Caseta Web Site Templates.

Aplicația FrontPage crează un nou site care este un director cu numele specificat în locația aleasă. Numele ales pentru site este afișat în bara de titlu. Conținutul unui nou site este cel din Figura 5. FrontPage generează și două directoare, _private și images și o pagină de Web cu numele index.htm. Menționăm că orice site are o pagină de casă (home page) care este afișată inițial. Navigarea în celelalte pagini se face pornind de la pagina de casă. Pagina implicită de casă generată de FrontPage este index.htm.

Figura 5. Conținutul siteului generat de FrontPage.

Sub bara de formatare sunt afișate butoane corespunzătoare componentelor siteului, inițial directorul Web Site și pagina index.htm. Sub aceste butoane se află o bară cu semnificația butonului activ.

Caseta Web Site Templates din Figura 4 poate fi afișată și cu clic pe butonul New Page, , din bara de instrumente standard, ce afișază lista New Page din Figura 6. In această listă se alege opțiunea Web Site.

Figura 6. Lista New Page.

4.Structura de navigare a unui site

Crearea structurii de navigare a unui site

Crearea structurii de navigare se face astfel:

se selectează pagina index.htm în vederea Navigation cu clic dublu, vezi Figura 7. In acest moment butonul din bara de navigare devine selectat, pagina index.htm este inclusă în bara de navigare,

Figura 7. Pagina index.htm selectată.

clic pe butonul New Page, , și FrontPage crează o nouă pagină cu numele New Page 1, vezi Figura 8. Butonul din bara de navigare devine selectat, pagina creată este inclusă în bara de navigare

Figura 8. Se crează o nouă pagină.

se apasă tasta Tab și noua pagină este selectată. Se introduce numele paginii, în cazul nostru Structura, vezi Figura 9,

Figura 9. Se introduce numele noii pagini.

se crează în același 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.

Crearea unei bare de legături

La crearea unui site trebuie să creăm o structură logică de navigare ce va asigura că vizitatorii vor găsi rapid și în mod logic informațiile dorite. Vizitatorii trebuie să știe în orice moment unde sunt în site și să poată naviga spre paginile dorite.

O bară de legături (de navigare) este o mulțime de legături (hyperlinks) care permit vizitatorilor să navigheze între paginile unui site. Barele de navigare trebuie plasate în fiecare pagină astfel încât să permită navigarea către paginile destinate. Bara de legături poate fi creată pe baza structurii de navigare a siteului sau specificată de utilizator. Bara de legături poate fi plasată în pagină orizontal sau vertical și poate utiliza pentru legături text sau butoane. O pagină poate conține mai multe bare de navigare.

Regiuni partajate

Regiunile partajate sunt zone din pagini care sunt rezervate unor elemente ce vor apărea în paginile de Web, de exemplu bare de legături.

Pentru exemplificare vom crea zone pe structura de navigare din Figura 10.

Figura 10. Structură de navigare a unui site.

Procedura de creare a regiunilor partajate este următoarea:

se afișază siteul în vederea Navigation cu clic pe meniul View Navigation sau pe bara de instrumente View,

clic pe meniul View Folder List pentru a ascunde fereastra Folder List,

clic pe meniul Format Shared Borders; se afișază caseta Shared Borders din Figura 11,

Figura 11. Caseta Shared Borders.

se marchează opțiunea All pages,

se marchează opțiunile Top și Include navigation buttons,

se marchează opțiunile Left și Include navigation buttons,

clic OK.

Dacă opțiunea Shared Borders nu este activă, trebuie marcată opțiunea Shared Borders în caseta Page Options afișată cu clic pe meniul Tools Page Options Authoring.

Cu opțiunile alese, Top și Left, aplicația FrontPage generează bare de legături în toate paginile, în partea de sus și în stânga pe baza structurii de navigare. In partea stângă sunt generate bare de legături către paginile copil. In partea de sus sunt generate bare de legături către paginile părinte și de același nivel.

5.Crearea unei pagini de Web

Crearea unei pagini de Web vide se face astfel:

se afișază fereastra New în dreapta ecranului cu clic pe meniul File New Page, dacă aceasta nu este afișată,

în fereastra New, în secțiunea New Page clic pe opțiunea Blank Page. Alternativ, clic pe butonul New page, , din bara de instrumente.

Implicit, la lansarea aplicației este afișată a nouă pagină goală cu numele new_page_1.htm, vezi Error: Reference source not found.

O pagină de Web conține text, figuri, legături către alte pagini de Web și controale, butoane , etc. Textul poate fi împărțit în paragrafe, poate conține tabele sau liste și poate fi formatat după dorință.

6. Utilizarea cadrelor (frames)

Cadrele impart o pagină de Web în mai multe secțiuni. In acest fel ele ne permit să afișăm mai multe pagini de Web pe ecran în același timp. Pagina principală se numește pagină părinte. Ea conține instrucțiuni ce descriu forma și localizarea cadrelor în pagină. Fiecare cadru are o pagină sursă ce conține text și grafică. In consecință, pagina afișată conține pagina părinte și paginile corespunzătoare cadrelor. Atunci când salvăm o pagină cu cadre vom salva fiecare din aceste pagini.

Vom exemplifica utilizarea cadrelor prin construcția unui site al facultății. Pagina va avea trei cadre în care se vor afișa informații despre structura facultății, direcțiile de studiu și studenți.

Crearea unei pagini cu cadre

Crerea unei pagini cu cadre se face astfel:

clic pe butonul New Page, , și apoi în lista New Page afișată clic pe opțiunea Page,

Figura 12. Lista New Page. Figura 13. Caseta Page Templates.

se afișază caseta Page Templates din Figura 13. In secțiunea Frames Pages clic pe tipul dorit, de exemplu Banners and Contents. Putem vedea împărțirea unei pagini în cadre cu clic pe o icoană. In zona Preview se afișază cadrele din pagină,

clic pe OK.

Figura 14. Pagină cu cadre.

Fiecare cadru conține două butoane: Set Initial Page și New Page. Executăm clic pe Set Initial Page dacă pagina pe care vrem să o afișăm în cadru există și ea va fi selectată într-o casetă de dialog. Executăm clic pe New Page dacă pagina ce trebuie afișată în cadru nu există și se afișază o pagină nouă în care vom crea textul și grafica ce vor fi afișate în cadru,

se salvează pagina cu clic pe meniul File Save As. Se salvează pagina principală urmată de paginile sursă ale fiecărui cadru. Salvarea paginii principale este afișată în Figura 15. In caseta File name introducem numele dorit, homepage.

Figura 15. Se salvează pagina principală.

Proprietățile unui cadru sunt cele din caseta Frame Properties din Error: Reference source not found. In casetă putem prescrie numele cadrului în caseta Name, adresa paginii afișată inițial în caseta Initial Page, dimensiunile cadrului în secțiunea Frame Size, etc.

3.Structura si continutul proiectului

Legaturi:

Home

Aceasta este pagina principala unde putem gasi cateva informatii despre orasul Baia de Aries

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Relieful.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="Relieful3.gif" width="132" height="65"></a></p>

Asezare Geografica

Aceasta pagina ne prezinta informatii din punct de vedere geografic

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Relieful.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="Relieful3.gif" width="132" height="65"></a></p>

Relieful

Aceasta pagina ne detaliaza relieful orasului.

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Istorie.gif" id="fpAnimswapImgFP8" name="fpAnimswapImgFP8" dynamicanimation="fpAnimswapImgFP8" lowsrc="Istorie3.gif" width="132" height="65"></a><p>

Solul si subsolul

Aceasta pagina ne prezinta informatii despre solul orasului.

Secventa de cod in HTML pentru butoane:

<img border="0" src="Puncte%20geografice%20de%20reper.gif" id="fpAnimswapImgFP7" name="fpAnimswapImgFP7" dynamicanimation="fpAnimswapImgFP7" lowsrc="Puncte%20geografice%20de%20reper3.gif" width="132" height="65"></a></p>

<img border="0" src="Istorie.gif" id="fpAnimswapImgFP8" name="fpAnimswapImgFP8" dynamicanimation="fpAnimswapImgFP8" lowsrc="Istorie3.gif" width="132" height="65"></a><p>

Reteaua hidrografica

Aceasta pagina ne prezinta informatii despre reteaua hidrografica.

Secventa de cod in HTML pentru butoane:

<img border="0" src="Puncte%20geografice%20de%20reper.gif" id="fpAnimswapImgFP7" name="fpAnimswapImgFP7" dynamicanimation="fpAnimswapImgFP7" lowsrc="Puncte%20geografice%20de%20reper3.gif" width="132" height="65"></a></p>

<img border="0" src="Istorie.gif" id="fpAnimswapImgFP8" name="fpAnimswapImgFP8" dynamicanimation="fpAnimswapImgFP8" lowsrc="Istorie3.gif" width="132" height="65"></a><p>

Clima si vegetatia

Aceasta pagina ne prezinta informatii despre clima orasului

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Relieful.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="Relieful3.gif" width="132" height="65"></a></p>

<img border="0" src="Solul%20si%20subsolul.gif" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="Solul%20si%20subsolul3.gif" width="132" height="65"></a></p>

Intindere, suprafata, vecini

Aceasta pagina ne prezinta informatii despre suprafata si vecinii orasului

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Relieful.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="Relieful3.gif" width="132" height="65"></a></p>

<img border="0" src="Solul%20si%20subsolul.gif" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="Solul%20si%20subsolul3.gif" width="132" height="65"></a></p>

<img border="0" src="Reteaua%20hidrografica.gif" id="fpAnimswapImgFP4" name="fpAnimswapImgFP4" dynamicanimation="fpAnimswapImgFP4" lowsrc="Reteaua%20hidrografica3.gif" width="132" height="65"></a></p>

Puncte geografice de reper

Aceasta pagina ne prezinta informatii despre punctele geografice de reper ale orasului

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Relieful.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="Relieful3.gif" width="132" height="65"></a></p>

<img border="0" src="Solul%20si%20subsolul.gif" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="Solul%20si%20subsolul3.gif" width="132" height="65"></a></p>

Istorie

Aceasta pagina ne prezinta informatii despre istoria orasului

Secventa de cod in HTML pentru butoane:

<img border="0" src="Asezare%20geografica.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="Asezare%20geografica3.gif" width="132" height="65">

<img border="0" src="Secolul%20XIV.gif" id="fpAnimswapImgFP8" name="fpAnimswapImgFP8" dynamicanimation="fpAnimswapImgFP8" lowsrc="Secolul%20XIV2.gif" width="191" height="65">

<img border="0" src="Secolul%20XVI.gif" id="fpAnimswapImgFP10" name="fpAnimswapImgFP10" dynamicanimation="fpAnimswapImgFP10" lowsrc="Secolul%20XVI2.gif" width="191" height="65"></a></p>

4.Bibliografie

http://baiadearies.ro/

https://ro.wikipedia.org/wiki/Pagina_principal%C4%83

Similar Posts