Documente online.
Username / Parola inexistente
  Zona de administrare documente. Fisierele tale  
Am uitat parola x Creaza cont nou
  Home Exploreaza
Upload




























Crearea de situri Web cu FrontPage

Informatica




Lectia 7



 
Crearea de situri Web cu FrontPage

La terminarea acestei lectii veti sti:

Sa utilizati FrontPage pentru a automatiza crearea de pagini Web.

Sa proiectati subpagini pornind de la un sablon standard, sa inserati tabele si sa adaugati butoane de navigare si subsoluri de pagina.

Sa definiti foi stil cascada (CSS) pentru a formata pagini Web.

Sa creati imagini-harta si formulare astfel īncāt situl sa devina mai interactiv.

Sa utilizati FrontPage pentru a construi o pagina Web.

Editoarele HTML avansate, precum FrontPage, prezinta cāteva avantaje. Mai exact, aceste editoare simplifica crearea de pagini si situri Web si permit cursantilor sa profite de codarea complicata HTML si scriptarea Web.

 
Cānd vizionati stirile 10510q1618k la televizor, singurul "echipament" de care aveti nevoie este televizorul si un loc unde sa stati. Dar ce se īntāmpla atunci cānd īnchiriati un film care este plin de efecte speciale fantastice si are o coloana sonora extraordinara? Īn loc sa apelati la vechiul televizor portabil al bunicii, veti prefera probabil cel mai performant sistem audio-video de folosit acasa: Desigur, este vorba despre acea configuratie electronica deosebita, care poate fi controlata usor, cu ajutorul unei singure telecomenzi si care are un televizor extrem de clar, cu diagonala mare si cu ecran plat cu cristale lichide, cablu digital, sunet Dolby stereo si componente de surround, toate acestea combinate si plasate strategic pentru o vizionare īn conditii optime, stānd relaxat pe o canapea comoda din piele. Desigur, aceste "suplimente" nu sunt neaparat necesare, cu siguranta uneori diferenta obtinuta este deosebita. Acelasi lucru se īntāmpla cu editoarele HTML. Notepad (un editor text de baza) se aseamana optiunii "televizor, loc si telecomanda" īn crearea paginilor Web, īn timp ce FrontPage se apropie de luxul sistemului de home entertainment īn ceea ce priveste dezvoltarea unui sit Web. Īn aceasta lectie vom discuta despre "suplimente".

Pentru a crea paginile Web descrise īn aceasta lectie, aveti nevoie de urmatoarele elemente:

O versiune de Microsoft FrontPage (de preferat versiunea 2002).

38 de fisiere de lucru, care pot fi gasite īn folderul Lectia07 din folderul Practica Web Design - Notiuni de baza de pe discul fix. Aceste fisiere sunt marte.doc, multumim.htm, si 36 de fisiere de grafica pe care le veti utiliza la crearea sitului Web cu FrontPage

Pentru a va pregati pentru activitatile acestei lectii urmati acesti pasi:

Creati un folder denumit "cer" pe discul fix al computerului. (Pentru simplificare, īn aceasta lectie vom folosi pentru discul fix denumirea de C:\.

2 Copiati fisierele marte.doc si multumesc.htm din folderul Lectia 07, aflat īn folderul Practica Web Design Notiuni de baza, īn folderul "cer" creat pe C:\.

3 Creati un folder pentru imagini īn C:\cer si copiati īn el urmatoarele fisiere grafice (aflate īn folderul Lectia07 din folderul Practica Web Design - Notiuni de baza de pe discul fix):

b_aboutus.gif

bg.gif

mars.jpg

b_aboutus2.gif

bigdip1.gif

neptune.jpg

b_contact.gif

bigdip2.gif

saturn.jpg

b_contact2.gif

bigdip3.gif

solarsystem.gif

b_gallery.gif

bigdip4.gif

t_aboutus.gif

b_gallery2.gif

bigdip5.gif

t_contact.gif

b_links.gif

bullet_star.gif

t_gallery.gif

b_links2.gif

corner_botm_left.gif

t_links.gif

b_meetings.gif

corner_botm_right.gif

t_meetings.gif

b_meetings2.gif

corner_top_left.gif

t_skyguide.gif

b_skyguide.gif

corner_top_right.gif

titlebar-home.gif

b_skyguide2.gif

logo.gif

titlebar.gif

Planificarea sitului Web FrontPage

Atunci cānd a fost planificat situl proiect al acestei lectii, s-a intentionat crearea paginii unei echipe reprezentānd o echipa fictiva de softball. Din pacate, nu a fost posibil sa-i convingem pe toti prietenii nostri sa pozeze pentru fotografia de echipa, asa ca am optat pentru crearea unui sit Web pentru un club de astronomie. Īn final am īncorporat multe din functionalitatile planificate initial pentru situl de softball, īn situl de astronomie. De exemplu, īn loc sa realizam o imagine harta din fotografia de echipa, īn care ati fi avut posibilitatea sa faceti clic pe capul fiecarei persoane pentru a accesa o statistica sau o pagina personala, am utilizat o imagine reprezentānd sistemul solar īn care faceti clic pe fiecare planeta pentru a accesa o pagina de informatii despre planeta respectiva. Speram ca, pe masura ce veti exersa tehnicile pe care le prezentam īn cadrul acestui proiect, veti īncepe sa va gānditi cum se pot diversifica pentru a crea situri Web particularizate.

Dupa ce am hotarāt ca un sit destinat unui club de astronomie este nimerit pentru scopul nostru, am decis ca situl respectiv ar trebui sa contina un sistem particularizat de legaturi pe pagina de pornire legāndu-se la subpagini īn format standard. Pagina de pornire non-standard este o tehnica obisnuita de proiectare a siturilor Web, utilizata pentru a scoate īn evidenta pagina de pornire īn comparatie cu subpaginile. Deoarece FrontPage furnizeaza optiuni multiple, am considerat ca prezentarea unei pagini de pornire non-standard reprezinta un model bun de proiectare si face posibila demonstrarea unor caracteristici suplimentare ale programului FrontPage. Pentru a vedea procesul de proiectare, priviti Figurile de la 7-3 la 7-5. Figura 7-3 prezinta o schita pentru proiectarea Carului Mare, pe care am executat-o pentru pagina de pornire. Figura 7-4 prezinta schita pentru aspectul subpaginii standard. Īn sfārsit, Figura 7-5 prezinta un rezumat pentru situl clubului de astronomie.

Figura 7-3.

O schita a paginii de pornire a clubului de astronomie prezinta Carul Mare care contine legaturi catre subpaginile principale ale sitului.

Figura 7-4.

O schita a unei pagini de pornire tipice a unui club de astronomie arata ca subpaginile sunt structurate diferit fata de pagina de pornire.

Figura 7-5.

Schitarea unui rezumat pentru situl Web al clubului de astronomie clarifica ierarhia sitului Web.

Datorita relativei sale complexitati, pagina de pornire va fi ultima creata. Īn acest proiect veti īncepe procesul de proiectare prin solidificarea aspectului standard pentru subpagini al sitului, creānd un document subpagina.htm ce va servi drept sablon pentru a crea paginile sitului. Īnsa, īnainte de a īncepe sa construiti pagini Web, este necesar sa anuntati programul FrontPage ca doriti sa creati un sit Web nou.

Crearea unui sit Web nou

Īn FrontPage, un sit Web este numit "Web".

 
Dupa cum am mentionat, primul pas īn proiectarea unui sit Web este de a anunta programul FrontPage intentia construirii paginii Web prin crearea unui Web nou. Pentru a face acest lucru, urmati acesti pasi:

Asigurati-va ca ati creat un folder denumit C:\cer\imagini īn care ati copiat imaginile existente īn folderul Lectia07, aflat īn folderul Practica Web Design - Notiuni de baza de pe discul fix. Verificati ca ati copiat documentele marte.doc si multumiri.htm, din folderul Lectia 07 īn folderul C:\cer.

2 Deschideti FrontPage si īnchideti documentul necompletat, daca este afisat un document necompletat.

3 Daca panoul de activitate Page sau Web nu este afisat, deschideti meniul File, selectati New, apoi faceti clic pe Page sau Web.

4 Īn sectiunea New, faceti clic pe optiunea Empty Web si se va deschide caseta de dialog Web Site Templates. Faceti clic īn caseta text Specify The Location Of The New Web, evidentiati textul existent, tastati C:\cer sau faceti clic pe Browse si deplasati-va la C:\cer, apoi faceti clic pe OK. Dupa o scurta procesare, īn timpul careia FrontPage adauga Extensiile de server FrontPage la folderul Web (C:\cer), veti observa ca bara de titlu FrontPage se schimba īn Microsoft FrontPage - C:\cer, ceea ce īnseamna ca sunteti gata sa treceti la actiune.

Īn bara Views, de-a lungul laturii din stānga a ferestrei FrontPage, faceti clic pe pictograma Reports. Va aparea un rezumat al sitului. Acest raport este afisat deoarece ati stocat imagini īn C:\cer\imagini, iar marte.doc si multumiri.htm se afla īn C:\cer.

Nota

Desi strāngerea la un loc a imaginilor care vor fi folosite la construirea sitului este binevenita, acest pas nu este necesar. Īnsa, deoarece imaginile pentru clubul de astronomie sunt deja disponibile (asta pentru ca acest curs este despre crearea paginilor Web, nu a fisierelor grafice Web), aveti posibilitatea sa simplificati crearea Web-ului pentru acest proiect (sau a oricarui alt proiect) gestionānd imaginile pentru sit īnainte de a-l crea.

6 Faceti clic pe pictograma Page din bara Views si faceti clic pe butonul Create A New Normal Page, īn bara de instrumente Standard, pentru a deschide o pagina necompletata (observati ca textul din bara de instrumente din FrontPage se modifica īn Microsoft FrontPage-C:\cer\new_page_1.

Acum sunteti gata sa creati o subpagina standard pe care sa o utilizati ca sablon pentru situl Web al clubului de astronomie.

Crearea aspectului de subpagina

Folosirea unui sablon pentru crearea de subpagini ajuta la mentinerea unitatii īntregului sit din punct de vedere al codarii, al aspectului grafic si al designului.

 
Īn aceasta sectiune veti crea un aspect de subpagina standard pe care veti avea posibilitatea sa-l copiati si sa-l utilizati pentru a crea pagini de baza pentru fiecare subpagina a sitului. Īnainte de toate, veti stabili proprietatile pentru pagina subpaginii.

Stabilirea proprietatilor paginii

Pentru īnceput, asigurati-va ca īn FrontPage este afisat un spatiu de lucru necompletat. Daca ati urmat pasii din sectiunea anterioara, setarile ar trebuie sa fie facute. Va prezentam pasii pentru a crea o subpagina de baza:

1 Faceti clic cu butonul din dreapta pe o zona necompletata din pagina si selectati Page Properties. Se va deschide caseta de dialog Page Properties.

2 Īn caseta de text Title, aflata īn fila General, tastati Clubul Astronomilor, dupa cum se arata īn Figura 7-6.

Figura 7-6.

Introduceti titlul īn caseta de dialog Page Properties.

3 Faceti clic pe fila Background, bifati caseta de selectare Background Picture pentru a specifica ca doriti ca pagina sa utilizeze o imagine ca fundal, apoi faceti clic pe Browse.

Pentru a vedea o miniatura a imaginii selectate īn caseta de dialog Select Background Picture, faceti clic pe sageata din lista verticala Views din bara de instrumente a casetei de dialog si selectati Preview.

 
4 Īn caseta de dialog Select Background Picture, faceti dublu-clic pe folderul imagini din C:\cer, apoi faceti clic pe bg.gif, asa cum se arata īn Figura 7-7.

5 Faceti clic pe Open pentru a selecta imaginea, apoi reveniti la caseta de dialog Page Properties.

Figura 7-7.

Un buton de suprapunere (rollover) este un tip de buton care se modifica atunci cānd se trece cu mausul pe deasupra lui. Efectele de suprapunere folosite mai des īn cazul butoanelor sunt schimbarile de culoare, folosite cel mai adesea cu scopul de a face butonul respectiv sa straluceasca.

 
Pentru a atribui o imagine de fundal paginii Web, selectati bg. gif īn caseta de dialog Select Background Picture.

6 Continuati īn fila Background, faceti clic pe caseta de selectare Enable Hyperlink Rollover Effects, apoi faceti clic pe butonul Rollover Style. Se va deschide caseta de dialog Font. Īn zona Font, retineti selectia (Default Font), iar īn caseta text Font Style selectati Normal.

Pentru text si culoarea fondului este de dorit sa alegeti culori contrastante. De multe ori, designerii proiecteaza īn alb si negru si coloreaza textul mai tārziu.

 
Faceti clic pe caseta verticala Color, faceti clic pe patratul corespunzator culorii rosii (culoarea implicita este rosu) si faceti clic pe OK. Aceasta setare specifica afisarea legaturilor text īn rosu, ori de cāte ori cursorul de maus al unui utilizator trece peste legatura text.

Īnainte pe fila Background, faceti clic pe sageata verticala Background si faceti clic pe caseta de culoare neagra; apoi faceti clic pe sageata verticala Text si faceti clic pe caseta de culoare neagra.

Limbaj. Prin hyperlink activ se īntelege un hyperlink īn curs de accesare. Daca se seteaza culoarea rosie pentru hyperlinkul activ, acesta se va afisa īn rosu cānd utilizatorul va face clic pe legatura respectiva.

 
Nota

Pasul 8 nu contine nici o greseala - trebuie sa setati culoarea neagra atāt pentru fundal, cāt si pentru text. Pentru acest proiect, cea mai mare parte a textului pe care īl introduceti va fi afisat īn celule de tabel albe, asa ca pentru a salva timp trebuie sa setati culoarea implicita a textului īn negru īnca de acum, chiar daca fundalul este setat de asemenea īn negru.

Faceti clic pe sageata verticala Hyperlink si faceti clic pe caseta de culoare albastra; faceti clic pe sageata verticala Visited Hyperlink si faceti clic pe caseta de culoare violeta; apoi faceti clic pe sageata verticala Active Hyperlink si faceti clic pe caseta de culoare rosie. Fila Background trebuie sa arate acum la fel ca cea din Figura 7-8.

Figura 7-8.

Fila Background terminata afiseaza culorile implicite pe care le-ati selectat pentru pagina Web curenta.

Chiar daca proiectul utilizeaza culorile de hyperlink implicite, faceti clic pe caseta de culoare a fiecarui component pentru a īnlocui setarea de culoare "automat" pentru fiecare element. Daca nu īnlocuiti culorile automate cu culorile specificate, este posibil ca unele browsere sa introduca pentru hyperlink culori particularizate care nu functioneaza la fel de bine ca situl - de exemplu, daca hyperlink-urile "vizitate" ale unui utilizator sunt setate pe negru, legaturile vor disparea īn fundalul negru dupa ce utilizatorul face clic pe ele.

10 Faceti clic pe OK pentru a implementa setarile din Page Property si pentru a īnchide caseta de dialog Page Property.

Salvarea lucrarii

Īnainte de a ajunge foarte departe, este necesar sa salvati lucrarea. Aveti posibilitatea sa utilizati aceleasi setari de baza pentru toate subpaginile, asa ca veti salva pagina la care lucrati īn mod curent ca un sablon generic pe care īl veti copia pentru a crea toate subpaginile sitului. Pentru a salva fisierul curent, urmati acesti pasi:

1 Īn meniul File faceti clic pe Save.

2 Īn caseta de dialog Save as, faceti clic pe butonul Change Title (amplasat īn partea de dreapta jos a casetei de dialog), pentru a deschide caseta de dialog Set Page Title si a modifica textul īn Clubul Astronomilor: Pagina generica, asa cum se arata īn Figura 7-9. Faceti clic apoi pe OK.

Figura 7-9.

Configurati caseta de dialog Set Page Title pentru a modifica textul titlului unei pagini.

3 Īn caseta text File Name tastati subpagina, apoi faceti clic pe Save.

Adaugarea siglei si a imaginii titlu

Īn aceasta sectiune veti continua configurarea sablonului de subpagina prin introducerea siglei clubului de astronomie si a imaginii de titlu, care apare de-a lungul marginii de sus a fiecarei pagini:

1 Īn documentul c:\cer\subpagina.htm (care este deja deschis īn FrontPage īn cazul īn care continuati proiectul de la sectiunea anterioara), faceti clic pe meniul Insert, indicati spre Picture, apoi alegeti From File.

Sfat

Daca ati īnchis subpagina.htm, aveti posibilitatea sa redeschideti documentul: deschideti FrontPage, faceti clic pe pictograma Open (sau faceti clic pe Open din meniul File), deplasati-va la C:\cer īn caseta de dialog Open si faceti dublu clic pe subpagina.htm.

2 Īn caseta de dialog Picture, afisati continutul folderului de imagini din C:\cer\imagini si selectati fisierul logo.gif si faceti clic pe Insert (sau pur si simplu faceti dublu-clic pe fisierul logo.gif) Sigla, (reprezentānd planeta Saturn īmpreuna cu alti cātiva sateliti) va fi afisata pe pagina.

3 Pe bara de instrumente Standard faceti clic pe butonul Insert Picture From File si faceti dublu-clic pe fisierul titlebar.gif. Imaginea pentru bara de titlu va fi introdusa alaturi de sigla.

4 Faceti clic cu butonul din dreapta pe imaginea logo.gif (imaginea cu Saturn), selectati Picture Properties, faceti clic pe fila General, faceti clic īn caseta Text din sectiunea Alternative Representations, tastati Sigla Clubului Astronomilor, apoi faceti clic pe OK.

5 Faceti clic cu butonul din dreapta pe imaginea titlebar.gif, selectati Picture Properties, faceti clic pe fila General, faceti clic īn caseta Text din sectiunea Alternative Representations, tastati Clubul Astronomilor, apoi faceti clic pe OK.

6 Faceti din nou clic cu butonul din dreapta pe imaginea siglei, selectati Hyperlink, tastati index.htm īn caseta text Address, apoi faceti clic pe OK.

Īn acest moment, sigla este legata la (viitoarea) pagina de pornire, si amāndoua imaginile vor fi introduse si aliniate la stānga īn mod implicit. Pentru cele mai multe browsere, alinierea la stānga permite pastrarea imaginilor una lānga alta, īnsa, deoarece doua imagini se īntind peste partea de sus a paginii, este posibil ca la unele browsere bara de titlu sa treaca pe linia urmatoare, daca utilizatorii redimensioneaza fereastra browserului la o dimensiune mult mai mica (caz īn care sigla va fi afisata pe linia de sus, iar bara de titlu va fi afisata īn partea din stānga, sub imaginea siglei - un efect nedorit pentru acest sit Web). Pentru siguranta, se pot adauga etichetele HTML "fara īntreruperi" (<NOBR></NOBR>) la codul sursa al paginii pentru a specifica faptul ca cele doua imagini trebuie pastrate īmpreuna indiferent de marimea ferestrei browserului.

Īn FrontPage, faceti clic pe optiunea de vizualizare HTML. Codul sursa HTML va fi afisat īn fereastra de lucru a FrontPage.

Īnainte de a adauga etichetele <NOBR></NOBR> vom face mai usor lucrul īn FrontPage prin activarea optiunii de īncadrare a textului cod.

8 Faceti clic pe Tools, faceti clic pe Page Options si afisati fila HTML Source.

9 Īn sectiunea General, faceti clic pe Reformat Using the Rules Below, selectati caseta de selectare Allow Line Breaks Within Tags din sectiunea Format si faceti clic pe OK.

Acum aveti posibilitatea sa vizualizati codul HTML fara sa fie necesar sa defilati prea mult la stānga si la dreapta, ceea ce īnseamna ca sunteti pregatiti sa adaugati etichetele <NOBR></NOBR>

Īn codul sursa, faceti clic dupa deschiderea etichetei de paragraf (<p>), tastati <NOBR>, faceti clic īnainte sa īnchideti eticheta paragraf (</p>) si tastati <NOBR> Īn Figura 7-10 veti observa cele mai noi etichete HTML pe care le-ati adaugat (cele colorate īn portocaliu) si care vor permite afisarea alaturata a celor doua imagini.

Indiferent de cāt de mult vor micsora utilizatorii dimensiunea ferestrei browserului, etichetele <NOBR> <NOBR> vor mentine sigla si imaginea alaturate.

 

Figura 7-10.

Adaugarea etichetelor <NOBR> si </NOBR> la codul sursa al unei pagini asigura faptul ca spatiul unei linii nu va separa elementele distincte.

11 Faceti clic pe Salvare (codul īn majuscule se va modifica automat īn cod īn litere mici) si faceti clic pe fila de vizualizare Normal pentru a reafisa reprezentarea grafica a paginii subpagina.htm īn zona de lucru. Pagina trebuie sa fie afisata asa cum arata Figura 7-11

Figura 7-11.

Īn acest punct, subpagina.htm include imaginea fundalului, a siglei si a barei de titlu.

Introducerea unui tabel

Acest proiect de sit Web foloseste un tabel pentru a controla elementele din pagina, asa cum situl despre muzica folosea tabele pentru a controla structura paginii.

 
Īn aceasta sectiune veti crea tabelul de baza utilizat pentru a contine corpul de text al fiecarei subpagini a sitului Web al clubului de astronomie. Analizati cu atentie urmatorii pasi - este mai simplu sa configurati corect tabelul de prima data, decāt sa īncercati sa descoperiti mai tārziu o setare eronata. Mai mult, desi aceasta sectiune pare sa includa probabil prea multi pasi, pasii īn general se repeta, deci procesul nu este foarte complex.

(Cu alte cuvinte, nu va lasati coplesiti de numarul de pasi.)

Cānd creati propriile tabele va trebui sa exersati cāteva setari īnainte de a realiza tabelul īn mod corect - asta este exact ce facem si noi. Pentru a crea tabelul pentru acest proiect, urmati acesti pasi:

1 Apasati o data tasta sageata īn jos pentru a pozitiona cursorul sub imagini si apasati Shift+Enter pentru a pozitiona cursorul īn locul īn care doriti sa introduceti tabelul.

2 Īn bara de instrumente Standard, faceti clic pe butonul Table, glisati pentru a selecta īn fereastra pop-up doua rānduri si cinci coloane de casete, apoi eliberati pentru a introduce tabelul īn pagina. Figura 7-12 ilustreaza procesul crearii unui tabel. Dupa cum se observa, bordurile tabelului sunt afisate atunci cānd introduceti prima data un tabel. Bordurile tabelului sunt setate sa se afiseze cu o latime de 1 pixel. Mai tārziu, dupa ce veti umple tabelul cu continut, veti modifica setarile pentru bordurile tabelului la 0, pentru a ascunde liniile tabelului.

Figura 7-12.

In mod implicit, FrontPage creeaza tabele cu bordura de 1 pixel.

3 Faceti clic cu butonul din dreapta al mausului oriunde īn tabel, alegeti Tabel Properties, asigurati-va ca optiunea Cell Padding este setata la zero, ca si optiunea Cell Spacing. De asemenea, verificati ca optiunea Specify Width este setata la 100% si setarea Size under Borders are valoarea 1, apoi faceti clic pe OK.

4 Faceti clic cu butonul din dreapta al mausului pe celula din rāndul 1, coloana 1. Din meniul de comenzi rapide, selectati Cell Properties.

Īn caseta de dialog Cell Properties, setati optiunea Horizontal Alignment ca fiind Center, setati Vertical Alignment ca fiind Top, asigurati-va ca este selectata caseta Specify Width, introduceti 130 īn caseta text Specify Width si selectati optiunea In Pixels, dupa cum arata Figura 7-13.

Figura 7-13.

Utilizati caseta de dialog Cell Properties pentru a configura o celula din tabel.

6 Faceti clic pe OK pentru a activa setarile.

7 Faceti clic cu butonul din dreapta al mausului pe celula din rāndul 2, coloana 1. Din meniul de comenzi rapide, selectati Cell Properties.

Īn caseta de dialog Cell Properties, setati optiunea Horizontal Alignment ca fiind Center, Vertical Alignment ca fiind Bottom, Specify Width ca fiind 130 pixeli, selectati caseta Specify Height, setati Specify Height ca fiind 15 pixeli, apoi faceti clic pe OK.

9 Faceti clic cu butonul din dreapta pe celula din rāndul 1, coloana 2. Selectati Cell Properties. Setati optiunea Horizontal Alignment ca fiind Left, setati Vertical Alignment ca fiind Top, setati Specify Width ca fiind 1 pixel, apoi faceti clic pe OK (nu va īngrijorati daca nu vedeti īnca nici o modificare īn tabel - celula se va redimensiona dupa formatarea celulei de dedesubt).

10 Faceti clic cu butonul din dreapta pe celula din rāndul 2, coloana 2. Selectati Cell Properties. Setati optiunea Horizontal Alignment ca fiind Left, setati Vertical Alignment ca fiind Bottom, setati Specify Width ca fiind 1 pixel, selectati caseta Specify Height, setati Specify Height ca fiind 15 pixeli, apoi faceti clic pe OK. (Acum cea de-a doua coloana din tabel ar trebui sa fie lata de un pixel.)

Faceti clic cu butonul din dreapta pe celula din rāndul 1, coloana 3. Īn meniul de comenzi rapide, selectati Cell Properties, setati Horizontal Alignment ca fiind Left, setati Vertical Alignment ca fiind Top, setati Specify Width la 15 pixeli, specificati culoarea alba ca fiind culoare de fundal (Background Color), apoi faceti clic pe OK.

12 Faceti clic cu butonul din dreapta pe celula din rāndul 2, coloana 3. Īn meniul de comenzi rapide, selectati Cell Properties, setati Horizontal Alignment ca fiind Left, setati Vertical Alignment ca fiind Bottom, setati Specify Width ca fiind 15 pixeli, faceti clic pe caseta de selectare Specify Height, setati Specify Height ca fiind 15 pixeli, specificati culoarea alba ca fiind culoare de fundal (Background Color), apoi faceti clic pe OK

13 Faceti clic cu butonul din dreapta pe celula din rāndul 1, coloana 4. Īn meniul de comenzi rapide, selectati Cell Properties, setati Horizontal Alignment ca fiind Left, setati Vertical Alignment ca fiind Top, deselectati caseta Specify Width (nu setati latimea pentru aceasta coloana deoarece doriti ca ea sa se redimensioneze pentru a īncapea īn fereastra browser-ului fiecarui utilizator), specificati culoarea alba ca fiind culoare de fundal (Background Color), apoi faceti clic pe OK.

14 Faceti clic cu butonul din dreapta pe celula din rāndul 2, coloana 4. Īn meniul de comenzi rapide, selectati Cell Properties, setati Horizontal Alignment ca fiind Left, setati Vertical Alignment ca fiind Bottom, debifati caseta de selectare Specify Width, bifati caseta de selectare Specify Height, setati Specify Height ca fiind 15 pixeli, specificati culoarea alba ca fiind culoare de fundal (Background Color), apoi faceti clic pe OK.

15 Faceti clic cu butonul din dreapta pe celula din rāndul 1, coloana 5. Īn meniul de comenzi rapide, selectati Cell Properties, setati Horizontal Alignment ca fiind Right, setati Vertical Alignment ca fiind Top, setati Specify Width la 15 pixeli, specificati culoarea alba ca fiind culoare de fundal (Background Color), apoi faceti clic pe OK.

16 Faceti clic cu butonul din dreapta pe celula din rāndul 2, coloana 5. Īn meniul de comenzi rapide, selectati Cell Properties, setati Horizontal Alignment ca fiind Right, setati Vertical Alignment ca fiind Bottom, setati Specify Width ca fiind 15 pixeli, setati Specify Height ca fiind 15 pixeli, specificati culoarea alba ca fiind culoare de fundal (Background Color), apoi faceti clic pe OK Tabelul trebuie sa fie afisat dupa cum arata Figura 7-14.

Figura 7-14.

Aveti posibilitatea sa modificati aspectul interior al tabelului prin reglarea proprietatilor celulei.

Observati īn Figura 7-14 ca setul de celule din partea dreapta a tabelului este afisata ca o arie dreptunghiulara de culoare alba. Acum veti adauga imagini mici īn celulele din coltul zonei albe, pentru a crea iluzia ca tabelul are colturi rotunjite:

17 Faceti clic īn celula din rāndul 1, coloana 3. Īn meniul Insert, indicati spre Picture si alegeti From File. Selectati imaginea corner_top_left.gif din folderul C:\cer\imagini, apoi faceti clic pe OK.

Sfat

Pentru a va face o idee despre cum functioneaza fisierele grafice din colturi, vizualizati imaginile mici si curbate īntr-un program de grafica sau examinati imaginea īn caseta de dialog Insert Picture. Va imaginati cu usurinta cum curba cea mica creeaza iluzia unui colt rotunjit atunci cānd este inserata īn celula unui tabel.

18 Faceti clic īn celula din rāndul 2, coloana 3. Faceti clic pe Insert Picture From File din bara de instrumente Standard si faceti dublu-clic pe imaginea corner_botm_left.gif din folderul C:\cer\imagini.

19 Faceti clic-cu butonul din dreapta pe imaginea nou inserata corner_botm_left.gif. Īn meniul de comenzi rapide, faceti clic pe Picture Properties, faceti clic pe fila Appearance daca este necesar, selectati Bottom īn lista verticala Alignment, apoi faceti clic pe OK.

20 Faceti clic pe celula din rāndul 1, coloana 5 (deoarece ati formatat celulele sa alinieze informatia la dreapta, cursorul va aparea īn extremitatea dreapta a celulei.) Faceti clic pe Insert Picture From File din bara de instrumente Standard si faceti dublu-clic pe imaginea corner_top_right.gif din folderul C:\cer\imagini.

21 Faceti clic īn celula din rāndul 2, coloana 5. Faceti clic pe Insert Picture From File si faceti dublu-clic pe imaginea corner_botm_right.gif din folderul C:\cer\imagini.

22 Faceti clic cu butonul din dreapta pe imaginea nou inserata corner_botm_right.gif. Īn meniul de comenzi rapide, faceti clic pe Picture Properties, faceti clic pe fila Appearance daca este necesar, selectati Bottom īn lista verticala Alignment, apoi faceti clic pe OK.

Faceti clic pe Save, īn bara de instrumente. Īn acest moment tabelul trebuie sa fie afisat dupa cum arata Figura 7-15.

Figura 7-15.

Imaginile mici adaugate īn celulele tabelului creeaza aparenta de colturi rotunjite īn tabel.

Adaugarea butoanelor de navigare

Acum ca ati creat tabelul, sunteti pregatiti sa īncepeti sa umpleti celulele tabelului. Primul lucru din agenda este adaugarea butoanelor de navigare īn prima coloana a tabelului. FrontPage furnizeaza si butoane de efecte speciale, pe care le veti utiliza īn acest proiect:

1 Faceti clic pe celula din rāndul 1, coloana 1.

2 Īn meniul Inserare, indicati Web Component, selectati Dynamic Effects īn sectiunea Component Type, alegeti Hover Button īn sectiunea Choose An Effect (descrierea componentei va fi afisata sub lista casetelor īn caseta de dialog Insert Web Component; cānd faceti clic pe efecte, descrierea se modifica) si faceti clic pe Finish.

Desi butoanele hover au un aspect placut, pot consuma uneori destul de mult timp la īncarcare si, de asemenea, nu sunt compatibile cu toate browserele Web. Prin urmare, testati-va situl Web pe mai multe sisteme si pe o varietate de browsere īnainte de a intra īn direct

 
3 Configurati caseta de dialog Hover Button Properties, dupa cum arata Figura 7-16, utilizānd urmatoarele setari:

Optiune

Setare

Button Text

Start

Link To

index.htm

Button Color

Navy

Effect

Glow

Width

Background Color

Automatic

Effect Color

Blue

Height

Figura 7-16.

FrontPage permite crearea butoanelor de acoperire prin configurarea casetei de dialog Hover Button Properties.

Faceti clic pe OK.

Pasii 6 pāna la 10 sunt repetitivi, avānd doar doua elemente variabile, aceastea fiind optiunile Button Text si Link To.

 
Apasati tasta Enter. Īn bara de instrumente Standard, faceti clic pe Web Component, asigurati-va ca sunt selectate optiunile Dynamic Effects si Hover Button, apoi faceti clic pe Finish. Tastati Despre noi īn caseta Button Text, tastati despre.htm īn caseta text Link To, specificati restul setarilor dupa cum sunt prezentate īn pasul 3, apoi faceti clic pe OK.

6 Apasati tasta Enter. Faceti clic pe Web Component, asigurati-va ca sunt selectate optiunile Dynamic Effects si Hover Button, apoi faceti clic pe Finish. Tastati Contactati-ne īn caseta text Button Text, tastati contact.htm īn caseta text Link To, specificati restul setarilor dupa cum s-a aratat īn pasul 3 (care sunt setarile implicite), apoi faceti clic pe OK.

7 Apasati tasta Enter. Faceti clic pe Web Component, asigurati-va ca sunt selectate Dynamic Effects si Hover Button, apoi faceti clic pe Finish. Tastati Īntālniri īn caseta Button Text, tastati īntālniri.htm īn caseta text Link To, specificati restul setarilor dupa cum sunt prezentate īn pasul 3, apoi faceti clic pe OK.

Apasati tasta Enter. Īn meniul Inserare, faceti clic pe Web Component, asigurati-va ca sunt selectate Dynamic Effects si Hover Button, apoi faceti clic pe Finish. Tastati Ghid celest īn caseta Button Text, tastati ghidcelest.htm īn caseta text Link To, specificati restul setarilor dupa cum sunt prezentate īn pasul 3, apoi faceti clic pe OK.

9 Apasati tasta Enter. Faceti clic pe Web Component, asigurati-va ca sunt selectate optiunile Dynamic Effects si Hover Button, apoi faceti clic pe Finish. Tastati Galerie foto īn caseta Button Text, tastati galeriefoto.htm īn caseta text Link To, specificati restul setarilor dupa cum sunt prezentate īn pasul 3, apoi faceti clic pe OK.

10 Apasati tasta Enter. Faceti clic pe Web Component, asigurati-va ca sunt selectate optiunile Dynamic Effects si Hover Button, apoi faceti clic pe Finish. Tastati Legaturi despre astronomie īn caseta Button Text, tastati legaturi.htm īn caseta text Link To, specificati restul setarilor dupa cum sunt prezentate īn pasul 3, apoi faceti clic pe OK.

Faceti clic pe Save. Subpagina ar trebui sa fie afisata īn vizualizarea Normal si īn vizualizarea Preview asa cum se arata īn Figura 7-17.

Figura 7-17.

Tabelul si butoanele de navigare sunt afisate īn modul Normal dar nu īnca īn modul Preview.

Dupa cum se observa īn Figura 7-17, FrontPage 2002 prezinta un mic neajuns atunci cānd inserati butoanele de acoperire; nu aveti posibilitatea sa examinati butoanele de acoperire īn mod automat īn vizualizarea Preview (observati imaginile de legatura īntrerupta īn ecranul Preview prezentat īn Figura 7-17). La un moment dat, este posibil ca Microsoft sa ofere o actualizare pentru a corecta problema, dar deocamdata exista doua solutii de a o rezolva:

Examinati paginile īn browser selectānd Preview In Browser din meniul File, alegeti browserul pe care doriti sa īl utilizati si faceti clic pe Preview.

Modificati codul fiecarui buton de acoperire, pentru a corecta problema.

Daca alegeti sa examinati paginile Web īn browser pāna la finalul acestui exercitiu, mergeti īnainte si treceti la sectiunea urmatoare si alegeti Preview In Browser din meniul File sau faceti clic pe butonul Preview In Browser din bara de instrumente Standard de fiecare data cānd sugeram sa examinati pagina Web. Daca preferati sa pacaliti un pic codul HTML pentru a evita deschiderea browserului pe parcursul lectiei, va prezentam aici pasii. Pasii sunt gestionabili, iar acesta este un prim exemplu al modului īn care cunoasterea codului HTML ajuta la lucrul cu editoare HTML.

12 Faceti clic pe HTML din partea de jos a ferestrei pentru a afisa codul HTML al paginii.

Codul pentru fiecare buton de acoperire apare īntre un set de etichete <applet> </applet>, ceea ce īnseamna ca trebuie sa vedeti sapte seturi de etichete <applet></applet> īn HTML. Aveti posibilitatea sa carui buton i se aplica un anumit aplet privind atributul value al parametrului care defineste textul butonului. De exemplu, mai jos este īntregul cod aplet pentru un buton; observati ca a cincea linie indica faptul ca acest aplet se aplica butonului Start:

<applet code="fphover.class" codebase="./" width="120" height="24">

<param name="color" value="#000080">

<param name="hovercolor" value="#0000FF">

<param name="textcolor" value="#FFFFFF">

<param name="text" value="Start">

<param name="effect" value="glow">

<param name="url" valuetype="ref" value="index.htm">

</applet><p>

Problema īn codul acestui buton de acoperire este atributul codebase="./" din prima linie a fiecarei etichete <applet> Acest atribut indica FrontPage sa caute fisierul fphover.class īntr-un subdirector. De fapt, FrontPage stocheaza fisierul clasa īn acelasi folder cu pagina Web, deci nu este necesar ca browserul sa caute fisierul īntr-un subdirector. Cu toate ca aceasta explicatie poate parea neclara, rezolvarea este simpla: trebuie doar sa stergeti codebase="./" din fiecare eticheta <applet> (vedeti Figura 7-18, unde unele din aparitiile atributului codebase="./" au fost evidentiate), asa cum se arata īn continuare.

Īn prima eticheta <applet>, selectati codebase="./" dupa cum se arata īn Figura 7-18, si apasati tasta Backspace (sau faceti clic cu butonul din dreapta si alegeti Delete).

Repetati pasul 13 pentru codul de aplet al fiecarui buton (nu uitati ca aveti sapte butoane, deci trebuie sa stergeti codebase="./" de sapte ori).

15 Salvati fisierul si faceti clic pe Preview īn partea de jos a ferestrei FrontPage. Dupa ce salvati modificarile de cod, butoanele de acoperire trebuie sa fie afisate īn mod Preview.

Figura 7-18.

Daca doriti sa examinati butoanele de acoperire īn modul Preview al FrontPage, trebuie sa pacaliti nitel codul fiecarui buton.

Sfat

Daca īntāmpinati probleme īn timp ce lucrati īn FrontPage (sau cu alta aplicatie Microsoft), o resursa foarte bogata la care se poate apela este Baza de Cunostinte Microsoft. Pentru a accesa Baza de cunostinte, deschideti https:// support.microsoft.com īn browser si faceti clic pe legatura Cautare īn baza de cunostinte.

Adaugarea informatiilor de subsol sub tabel

Componentele finale pe care le veti adauga sablonul sunpagina īnainte de a īncepe sa creati paginile propriu-zise ale sitului sunt elementele din partea de jos a paginii: o bara de navigare de tip text si informatia despre drepturile de autor. Dupa cum am discutat anterior īn acest curs, paginile Web trebuie sa includa legaturi de tip text pentru utilizatorii care dezactiveaza fisierele grafice sau acceseaza Web-ul cu browsere non-grafice. Mai mult, trebuie sa introduceti informatii despre drepturile de autor pentru a va proteja creatia. Pentru a adauga informatiile din josul paginii la situl Web al clubului astronomilor, urmati acesti pasi:

Textul alb este folosit pentru a crea contrast cu fundalul negru al sitului.

 
Īn vizualizarea Normal, faceti clic īn zona din partea de jos a tabelului, faceti clic pe sageata verticala de pe butonul Font Color din bara de instrumente Formatting si faceti clic pe caseta de culoare alb.

Tastati (incluzānd barele verticale) Start | Despre | Contactati-ne | Īntālniri | Ghid celest | Galerie foto | Legaturi

Selectati linia de text pe care tocmai ati tastat-o, afisati lista verticala de fonturi din bara de instrumente Formatting si alegeti Comic Sans (sau Comic Sans MS).

Faceti clic pe butonul Center din bara de instrumente Formatting pentru a centra textul.

Faceti clic la finalul liniei de text, apasati tasta Enter, apoi tastati Īntrebari sau comentarii privind acest sit Web?. Dati un mesaj la Webmaster.

Apasati Enter, afisati lista verticala Font Size din bara de instrumente Formatting, alegeti 1 (marimea 8pt), apoi tastati Drept de autor [anul curent] - [numele dvs. sau al organizatiei].



Apasati tasta Enter, apoi faceti clic pe Save īn bara de instrumente Standard.

Aveti de asemenea posibilitatea de a apasa Ctrl+K pentru a deschide caseta de dialog Insert Hyperlink.

 
Acum sunteti pregatiti sa legati textul din bara de navigare si sa adaugati o legatura pentru e-mail la textul Dati un mesaj la Webmaster:

Selectati Start īn bara de navigare de tip text, faceti clic cu butonul din dreapta pe textul selectat, apoi faceti clic pe Hyperlink.

Īn caseta de dialog Insert Hyperlink, asigurati-va ca lista verticala Look In afiseaza cer, faceti clic īn caseta text Address, tastati index.htm (asigurati-va ca stergeti https:// daca apare), dupa cum se arata īn Figura 7-19, apoi faceti clic pe OK sau apasati Enter.

Daca doriti sa adaugati un ScreenTip hyperlinkurilor de tip text, afisati butonul ScreenTip īn caseta de dialog Insert Hyperlink.

 

Figura 7-19.

Caseta de dialog Insert Hyperlink permite configurarea cu usurinta a hiperlink-urilor īn FrontPage.

Repetati pasii 8 si 9 utilizānd urmatorii parametrii:

Selectati si faceti clic cu butonul din dreapta

Introduceti īn caseta text Address

Despre

desprenoi.htm

Contactati-ne

contact.htm

Īntālniri

īntālniri.htm

Ghid celest

ghidcelest.htm

Galerie foto

galerie.htm

Legaturi

legaturi.htm

11 Selectati textul Dati un mesaj la Webmaster, faceti clic cu butonul din dreapta pe textul selectat si faceti clic pe Hyperlink pentru a deschide caseta de dialog Insert Hyperlink.

12 Īn caseta de dialog Insert Hyperlink, faceti clic pe butonul E-Mail Address īn sectiunea Link To, dupa cum se arata īn Figura 7-20.

Figura 7-20.

Aveti posibilitatea de a crea hyperlink-uri care deschid automat un formular de mesaj preadresat.

13 Introduceti adresa de posta electronica īn caseta text E-Mail Address, introduceti Clubul Astronomilor īn caseta text Subject (vezi Figura 7-20), faceti clic pe OK, apoi salvati lucrul. Portiunea inferioara a subpaginii sablon trebuie sa apara asa cum se arata īn Figura 7-21, care afiseaza vizualizarea Preview (daca nu ati modificat codul aplet al butonului de acoperire, trebuie sa alegeti Preview In Browser din meniul File pentru a examina corespunzator subpagina paginii Web). Observati, de asemenea, ca data dreptului de autor si numele organizatiei depind de informatia pe care o introduceti.

Figura 7-21.

Informatia de subsol a subpaginii furnizeaza vizitatorilor legaturi de tip text, acces la Webmaster, si informatii despre dreptul de autor.

14 Īnchideti subpagina.htm.

Aveti acum o subpagina sablon pregatita pentru a fi utilizata.

Utilizarea schemei de subpagina pentru a construi pagini Web

Acum veti folosi subpagina.htm pentru a crea cāteva subpagini pentru situl Web al clubului de astronomie. Situl necesita sase subpagini principale:

desprenoi.htm

contact.htm

īntālniri.htm

ghidcelest.htm

galerie.htm

legaturi.htm

Īn aceasta sectiune veti completa contact.htm si ghidcelest.htm precum si o subpagina (marte.htm) a paginii ghidcelest.htm. Desi nu vom realiza constructia fiecarei subpagini īn parte, acest lucru este totusi posibil daca se doreste, pentru ca imaginile cu textul barelor de titlu necesare se afla īn C:\cer\imagini, fiind copiate odata cu toate celelalte imagini din folderul Web Design Fundamentals Practice aflat īn folderul Lectia07. Am optat pentru a va arata cum se completeaza marte.htm, ghidcelest.htm si contact.htm deoarece crearea fiecareia dintre aceste pagini include informatii despre cum sa adaugati o anumita functionalitate paginilor Web, dupa cum urmeaza:

marte.htm Arata cum sa utilizati caracteristica miniatura īn FrontPage, cum sa copiati un text dintr-un document Word si cum sa modificati foile de stiluri cascada. Mai mult, aceasta pagina face legatura la pagina Ghid celest (ghidcelest.htm).

O imagine-harta este o imagine cu zone de interes pe care se poate face clic. Cānd se face clic pe o zona de interes va fi afisata o alta pagina Web.

 
ghidcelest.htm Arata cum se creeaza o imagine harta īn FrontPage.

contact.htm Ofera o prezentare generala a modului de creare a unui formular functional īn FrontPage.

Dupa ce creati cele trei subpagini descrise īn acest proiect, veti fi pregatit sa exersati si sa terminati singur subpaginile ramase.

Formularul creat īn aceasta lectie nu face decāt sa trimita dezvoltatorului Web mesaje prin posta electronica cu informatia introdusa de vizitatori. Formularele mai complicate depasesc scopul acestui curs.

 
Pregatirea pentru crearea subpaginilor

Pregatirea pentru crearea subpaginilor este simpla pentru ca acum aveti cunostinte solide dupa ce ati realizat sablonul subpagina.htm. Pentru a utiliza sablonul, salvati pur si simplu copii ale fisierului subpagina.htm cu nume si titluri diferite, dupa cum urmeaza:

Deschideti C:\cer\subpagina.htm īn FrontPage.

2 Faceti clic pe Save As īn meniul File pentru a deschide caseta de dialog Save As si asigurati-va ca īn caseta text Save In este afisat folderul C:\cer.

3 Īn sectiunea Page Title, faceti clic pe butonul Change Title, tastati Clubul Astronomilor:

Despre noi īn caseta de dialog Set Page Title, apoi faceti clic pe OK.

Sfat

Aveti posibilitatea sa modificati oricānd textul de titlu al unei pagini Web. Pentru a face asta, faceti clic pe Properties īn meniul File, modificati textul din cāmpul Title, apoi faceti clic pe OK. Ati adaugat text de titlu pentru fiecare pagina, pe masura ce ati creat paginile īn sectiunea anterioara.

4 Īn caseta text Filename tastati desprenoi.htm, apoi faceti clic pe Save. Observati ca fila paginii Web se modifica (sub barele de instrumente) si arata noua denumire a documentului curent.

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.



 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 
5 Fara a īnchide documentul curent (care īn acest moment este desprenoi.htm), repetati pasii de la 2, 3 la 4 folosind numele de fisiere si textele de titlu aflate īn tabelul urmator:

Salvare cu numele de fisier

Text pentru titlul de pagina

Show slide 07 FrontPage 33, Subpages - Filenames, Title Text.

 
contact.htm

Clubul Astronomilor: Contactati-ne

īntālniri.htm

Clubul Astronomilor: Īntālniri

ghidcelest.htm

Clubul Astronomilor: Ghid celest

galerie.htm

Clubul Astronomilor: Galerie

legaturi.htm

Clubul Astronomilor: Legaturi

marte.htm

Clubul Astronomilor: Marte

Sfat

Trebuie sa dati subpaginilor acelasi nume pe care l-ati indicat atunci cānd ati facut legatura cu butoanele de navigare si cu legaturile hypertext. De exemplu, subpagina Despre noi trebuie sa fie salvata cu numele desprenoi.htm. Nu modificati numele de fisiere īn acest moment.

Īnchideti FrontPage, deschideti folderul C:\cer si verificati ca folderul contine cāte un fisier pentru fiecare pagina Web a sitului.

7 Dupa ce ati verificat lista fisierelor nou create, īnchideti folderul C:\cer.

Adaugarea textului si a imaginii pentru bara de titlu

Dupa ce creati noi fisiere pe baza fisierului subpagina.htm, deschideti documentele noi īn FrontPage si particularizati continutul fisierelor. Prima subpagina pe care o realizati este o pagina de informatii despre planeta Marte. Īn aceasta sectiune veti adauga text si o imagine pentru bara de titlu:

Deschideti FrontPage, faceti clic pe butonul Open din bara de instrumente, afisati continutul C:\cer īn caseta de dialog Open si faceti dublu-clic pe fisierul marte.htm.

Faceti clic īn partea dreapta a barei grafice de titlu, apasati Shift+Enter, faceti clic īn bara de instrumente Standard pe Insert Picture From File, afisati continutul C:\cer\imagini si faceti dublu-clic pe t_skyguide.gif. Pagina marte.htm este o subpagina a Ghid celest si ar trebui deci sa afiseze bara subtitlu a acestuia.

Avānd cursorul plasat la capatul elementului grafic Ghid celest, apasati tasta Delete de doua ori pentru a aduce tabelul mai aproape de imaginea t_skyguide.gif.

4 Faceti clic cu butonul din dreapta pe t_skyguide.gif, selectati Picture Properties, faceti clic pe fila General, tastati Ghid celest īn caseta Alternative Representations Text, apoi faceti clic pe OK.

Acum veti adauga text īn tabelul paginii Web.

5 Deschideti C:\cer, apoi faceti dublu-clic pe marte.doc (nu marte.htm) pentru a deschide documentul Word.

6 Aranjati spatiul de lucru astfel īncāt sa vizualizati portiuni din textul documentului Word, precum si marte.htm īn FrontPage, asemenea aspectului prezentat la stānga, īn Figura 7-22.

7 Faceti clic īn documentul Word si apasati tastele Ctrl+A pentru a selecta īntregul continut al documentului Word.

Sfat

Aveti posibilitatea sa tastati textul direct īn tabel (asa cum veti vedea mai tārziu īn acest proiect), īnsa am furnizat deja textul pentru aceasta pagina astfel īncāt sa nu fie necesar sa tastati din nou informatia. De asemenea, aveti posibilitatea sa copiati si sa lipiti informatia īn FrontPage sau sa folositi comanda File din meniul Insert pentru a importa text dintr-un alt fisier.

Glisati textul selectat din documentul Word īn portiunea mare de culoare alba a tabelului din marte.htm (care, din punct de vedere tehnic, este a patra celula din primul rānd al tabelului). Textul ar trebui sa umple celula tabelului, dupa cum este aratat īn dreapta Figurii 7-22.

Figura 7-22.

Pentru acest proiect aveti posibilitatea sa glisati textul dintr-un document Word īn pagina Web. Deoarece nu ati introdus limite de latime sau de īnaltime pentru celula, celula se extinde pentru a cuprinde textul copiat.

9 Salvati pagina Web si īnchideti documentul Word.

Limbaj. O foaie stil cascada contine cod ce defineste aspectul si formatul unei pagini Web sau al unui grup de pagini Web.

 
Modificarea setarilor de foi de stil īn cascada (CSS)

Pentru a ajuta la formatarea continutului paginilor Web, aveti posibilitatea sa creati īn FrontPage foi de stil īn cascada externe sau īncorporate. Īn cazul unei foi de stiluri externe, codul de formatare este amplasat īntr-un document separat la care se leaga pagina Web, īn timp ce o foaie de stiluri īncorporata amplaseaza codul de formatare īn cadrul codului sursa al paginii Web curente.

Atunci cānd utilizati setarile pentru foile de stiluri, definiti stilul pentru un anume element din pagina - cum ar fi titlu 3 sau lista cu marcatori - iar browserele (si FrontPage) vor aplica īn mod automat setarile de stil pentru toate aparitiile acelui element. De exemplu, daca doriti ca toate titlurile tip 3 sa fie afisate īn albastru, trebuie doar sa modificati setarile de stil pentru acest element. Dupa ce salvati setarile modificate, toate titlurile 3 vor aparea īn albastru.

Īn aceasta sectiune veti utiliza FrontPage pentru a particulariza stiluri prin definirea unei foi de stiluri īncorporate. Astfel, stilurile pe care le veti defini pe pagina marte.htm se vor aplica doar la pagina marte.htm. Pentru a defini stiluri īncorporate īn FrontPage, urmati acesti pasi:

1 Asigurati-va ca marte.htm este afisata īn vizualizarea Normal īn FrontPage, apoi faceti clic pe Style din meniul Format.

Modificarea stilului elementului h3 este similara cu adaugarea de atribute etichetei <H3> a antetului.

 
2 Īn caseta de dialog Stiluri, faceti clic pe sageata verticala List si alegeti HTML tags. O lista cu etichete HTML este afisata īn lista Styles.

Īntāi trebuie sa specificati afisarea tuturor elementelor titlu 3 īn albastru si īn 12 puncte.

3 Īn lista Styles, alegeti h3, dupa cum arata Figura 7-23.

Figura 7-23.

Aveti posibilitatea sa definiti stiluri HTML selectānd stilul pe care doriti sa-l formatati din lista de etichete HTML din caseta de dialog Styles.

4 Faceti clic pe Modify, pe Format din caseta text Modify Style, apoi faceti clic pe Font.

5 Īn caseta de dialog Font, faceti clic pe 12 pt īn caseta lista Size, faceti clic pe sageata verticala Color, faceti clic pe patratul albastru, apoi faceti clic pe OK de trei ori pentru a īnchide casetele de dialog deschise.

Ambele titluri Description: si Planetary Data: vor aparea īn albastru si de marime 12 puncte. Acum īnlocuiti marcatorii standard īn negru din lista de marcatori, cu marcatori particularizati:

Faceti clic pe Style din meniul Format, pe HTML tags din caseta List, selectati li din lista Styles, apoi faceti clic pe Modify.

Īn caseta de dialog Modify Style, faceti clic pe Format, apoi pe Numbering.

Īn caseta de dialog Bullets And Numbering, faceti clic pe Browse, afisati continutul folerului C:\cer\imagini īn caseta de dialog Select Picture, apoi faceti dublu clic pe burlet_star. gif pentru a completa caseta de dialog Bullets And Numbering.

Faceti clic pe OK de trei ori pentru a īnchide casetele de dialog deschise. Lista cu marcatori din pagina va afisa imaginile stelelor īn vizualizare normala, asa cum arata Figura 7-24, iar codul sursa va include stiluri īncorporate, asa cum arata Figura 7-25 (culoarea portocaliu evidentiaza informatia de formatare adaugata īn pasii precedenti).

Salvati marte.html si asigurati-va ca este afisat īn vizualizarea Normal, īn pregatire pentru sectiunea urmatoare.

Figura 7-24.

Stilul nou definit coloreaza titlurile 3 īn albastru si afiseaza lista marcata cu marcatori stea.

Figura 7-25.

FrontPage genereaza īn mod automat informatiile despre stilul īncorporat.

Introducerea unei imagini miniaturale

Acum ca ati importat si formatat textul īn pagina Web Marte, sunteti gata sa adaugati o imagine. Īn aceasta sectiune veti introduce o imagine īn miniatura a planetei Marte, ceea ce īnseamna ca cei care vizualizeaza vor avea posibilitatea sa faca clic pe o imagine mica a planetei Marte pentru a vizualiza o versiune mai ampla a imaginii. Furnizarea unei imagini īn miniatura accelereaza timpul de descarcare al paginii si ofera vizitatorilor optiunea de a descarca o versiune mai mare a imaginii daca doresc. Pentru a introduce o imagine īn miniatura īn FrontPage, urmati acesti pasi:

1 Īn FrontPage, faceti clic la dreapta titlului Sistemul Solar:

Marte (linia de sus a textului introdus), faceti clic pe Insert Picture From File din bara de instrumente Standard, apoi faceti dublu clic pe imaginea mars.jpg din folderul C:\sky\images. Veti vizualiza īn FrontPage o imagine foarte mare a planetei Marte.

Faceti clic pe Marte, apoi afisati bara de instrumente Pictures (daca bara de instrumente nu va fi afisata īn mod automat, alegeti Toolbars din meniul View, apoi alegeti Pictures). Figura 7-26 afiseaza imaginea planetei Marte, īmpreuna cu bara de instrumente Pictures.

Figura 7-26.

Aveti posibilitatea sa creati o imagine īn miniatura a planetei Marte direct īn FrontPage.

3 Cu imaginea planetei īnca selectata, faceti clic pe butonul Auto Thumbnail din bara de instrumente Pictures (al treilea buton din stānga). O versiune de 100 pe 100 pixeli a imaginii lui Marte este creata din versiunea mai mare mars.jpg. Imaginea mai mica este denumita īn mod automat mars_small.jpg.

Faceti clic cu butonul din dreapta pe imaginea īn miniatura, alegeti Picture Properties, selectati fila Appearance daca este necesar, si configurati proprietatile dupa cum urmeaza:

Optiune

Setare

Alignment

Right

Border Thickness



Horizontal Spacing

Vertical Spacing

Sfat

Daca doriti ca miniatura sa fie afisata cu o dimensiune mai mare de 100 pe 100 pixeli, bifati caseta de selectare Specify Size īn caseta de dialog Picture Properties si modificati dimensiunea imaginii miniatura.

5 Faceti clic pe OK, apoi faceti clic īn text pentru a deselecta imaginea.

6 Faceti clic cu butonul din dreapta oriunde īn tabel si alegeti Table Properties. Se va deschide caseta de dialog Table Properties.

7 Īn sectiunea Borders, tastati 0 īn caseta text Size, apoi faceti clic pe OK.

Pentru a testa legatura imaginii īn miniatura, faceti clic pe fila de vizualizare Preview iar apoi pe imaginea īn miniatura a planetei Marte. Faceti clic pe fila de vizualizare Normal pentru a va īntoarce īn vizualizarea de lucru.

 
8 Faceti clic pe Save, pe Change Folder īn caseta de dialog Save Embedded Files, faceti dublu clic pe folderul de imagini, faceti clic pe OK de doua ori, apoi faceti clic pe fila Preview (sau alegeti Preview In Browser din meniul File). Pagina marte.htm va arata similar cu Figura 7-27, iar imaginea mica va fi legata īn mod automat la mars.jpg.

Figura 7-27.

Daca faceti clic pe imaginea īn miniatura īn timpl examinariii paginii va aparea imaginea marita a planetei Marte.

Īnchideti marte.htm.

Nota

Fisierele imagini pregatite pentru aceasta lectie includ neptune.jpg si saturn.jpg, reprezentānd imagini ale planetelor Neptun si respectiv Saturn, pe care le veti utiliza pentru a exersa suplimentar daca doriti sa creati pagini aditionale cu informatii despre aceste planete.

Felicitari! Ati terminat prima subpagina pentru situl Web al clubului de astronomie. Nu e nevoie sa va opriti aici - īn sectiunea urmatoare veti afla cum sa adaugati o imagine harta.

Crearea unei imagini harta

Īn aceasta sectiune veti crea o imagine harta pe subpagina principala Ghid celest. Veti realiza imaginea harta plecānd de la o imagine a sistemului solar. Veti formata imaginea cu sistemul solar, astfel īncāt, atunci cānd utilizatorii fac clic pe imaginea planetei Marte, sa se afiseze pagina marte.htm creata īn sectiunea precedenta. Pentru a realiza acest lucru (este mai simplu decāt pare), urmati acesti pasi:

Deschideti FrontPage, faceti clic pe pictograma Folders din bara Views, si faceti dublu-clic pe fisierul ghidcelest.htm.

Īn pasul doi se insereaza o bara de titlu.

 
Faceti clic īn dreapta imaginii din bara de titlu, apasati tastele Shift+Enter, faceti clic pe Insert Picture From File din bara de instrumente Standard si faceti dublu clic pe t_skyguide.gif.

Avānd cursorul amplasat la sfārsitul imaginii Ghid celest, apasati tasta Delete de doua ori pentru a aduce tabelul mai aproape de imaginea t_skyguide.gif.

4 Faceti clic cu butonul din dreapta pe t_skyguide.gif, selectati Picture Properties, faceti clic pe fila General, tastati Ghid celest īn caseta Alternative Representations Text, apoi faceti clic pe OK.

Acum veti adauga continut īn tabelul paginii Web.

Introducerea si formatarea textului īn celulele tabelului este o operatie similara cu adaugarea si modificarea textului si a imaginilor īntr-un program destinat procesarii de text.

 
5 Faceti clic īn celula mai mare a tabelului din dreapta butonului Home si tastati Prezentarea speciala din luna aceasta: Sistemul Solar.

6 Selectati textul, faceti clic pe pictograma Center din bara de instrumente Formatting si selectati Comic Sans (sau Comic Sans MS) din lista verticala Font.

7 Faceti clic dupa cuvāntul Solar si apasati tastele Shift+Enter de doua ori.

Tastati Faceti clic pe o planeta pentru a vedea pagina sa de informatii. Nota: Pāna acum numai Marte este activa.

Faceti clic īn zona necompletata dintre cele doua componente text pe care le-ati adaugat īn pasii 5 si 8.

10 Īn bara de instrumente Standard, faceti clic pe Insert Picture From File, navigati la folderul C:\cer\imagini daca este necesar si faceti dublu clic pe solarsystem.gif.

11 Faceti clic cu butonul din dreapta oriunde īn tabel, selectati Table Properties, setati la 0 optiunea Border Size din caseta de dialog, apoi faceti clic pe OK.

Faceti clic pe Save, īn bara de instrumente. Apoi examinati pagina Web. Pagina trebuie sa fie afisata similar cu pagina Web prezentata īn Figura 7-28.

Figura 7-28.

Veti utiliza imaginea sistemului solar pentru a crea o imagine harta.

Limbaj. O zona de interes este o zona a unei imagini pe care se poate face clic si care are creata o legatura catre o alta pagina Web sau catre o alta zona a paginii curente.

 
13 Reveniti la vizualizarea Normal īn FrontPage.

14 Faceti clic pe imaginea sistemului solar. Bara de instrumente Pictures se va deschide īn mod automat. Observati instrumentele Rectangular Hotspot, Circular Hotspot si Polygonal Hotspot, amplasate spre capatul din dreapta al barei de instrumente Pictures.

15 Faceti clic pe instrumentul Polygonal Hotspot, apoi faceti clic pe puncte multiple īn jurul imaginii Marte si pe eticheta Marte din imaginea sistemului solar pentru a crea un poligon, la fel ca īn Figura 7-29. Cānd terminati poligonul, caseta de dialog Insert Hyperlink se va deschide īn mod automat. Daca este necesar, faceti clic pe Existing File Or Web Page īn sectiunea Link To:

Figura 7-29.

Instrumentele Hotspot din bara de instrumente Pictures permit desenarea zonelor sau imaginilor pe care se poate face clic.

Daca ati creat o linie pe care nu doriti sa o folositi, aveti posibilitatea de a relua operatia dupa ce faceti clic cu butonul din dreapta pentru a īnlatura liniile deja existente.

 
Īn caseta de dialog Insert Hyperlink, faceti dublu clic pe marte.htm (nu marte.doc) din lista de fisiere C:\cer.

Creati īn jurul planetelor ramase (daca doriti) forme care indica spre pagini viitoare, cum ar fi mercur.htm, venus.htm, pamant.htm, jupiter.htm, saturn.htm, uranus.htm, neptun.htm si pluto.htm.

Salvati ghidcelest.htm, examinati pagina īn vizualizarea Preview, deplasati cursorul peste Marte (observati cum cursorul se modifica si ia aspectul unei māini) si faceti clic pe Marte pentru a vedea daca legatura functioneaza.

Faceti clic pe fila de vizualizare Normal, īnchideti ghidcelest.htm si FrontPage.

Sunteti pe drumul cel bun īn realizarea sitului Web al clubului de astronomie. Subpagina finala pe care o veti crea este o un formular īn interiorul paginii contact.htm.

Crearea de formulare

Cānd folositi formulare pe situl Web, serverul dumneavoastra trebuie sa accepte FrontPage Server Extensions si trebuie sa publicati formularul folosind instrumentul de publicare al FrontPage.

 
Īn acest moment v-ati acomodat cu adaugarea de elemente si cu configurarea setarilor īn FrontPage. Dupa cum am precizat la īnceputul acestei lectii, secretul consta īn a sti unde se gasesc instrumentele si meniurile de configurare. Īn aceasta sectiune veti crea un formular online. Un formular online permite utilizatorilor sa adauge informatii īn casetele text. Cānd utilizatorii fac clic pe butonul Submit al formularului, rezultatele vor fi transmise la adresa dumneavoastra de posta electronica.

Precautie

Nu afisati formularul īn vizualizarea Preview īnainte de a-l publica pe Web. Daca faceti asta, FrontPage 2002 adauga un cod care īmpiedica publicarea corespunzatoare a paginii. Cānd creati un formular, trebuie sa īl publicati pe Web, apoi sa īl examinati fie īn FrontPage, fie īn browser.

Pregatirea paginii de contact

Primul pas īn crearea paginii Contact este de a pregati pagina prin adaugarea unei bare de titlu si inserarea textului de titlu, dupa cum este descris īn urmatorii pasi:

Deschideti FrontPage, faceti clic pe Folder, īn bara Views, si faceti dublu clic pe fisierul contact.htm.

Faceti clic īn partea dreapta a barei de titlu, apasati Shift+Enter, faceti clic pe Insert Picture From File, afisati continutul C:\cer\imagini si faceti clic pe t_contact.gif.

Avānd cursorul īnca amplasat la capatul imaginii Contact Information, apasati tasta Delete de doua ori pentru a aduce tabelul mai aproape de imaginea t_contact.gif.

4 Faceti clic cu butonul din dreapta pe t_skyguide.gif, selectati Picture Properties, faceti clic pe fila General, tastati Pagina de contact īn caseta text Alternative Representations, apoi faceti clic pe OK.

Inserarea unei zone formular si adaugarea de etichete

Acum ca pagina Contact este pregatita, aveti posibilitatea sa creati un formular online. Īntāi trebuie sa introduceti caseta formular standard, apoi sa introduceti etichetele pentru casetele text ale formularului, butoanele de optiuni si casetele de selectare:

Faceti clic pe celula mai mare a tabelului din partea dreapta a butonului Home, indicati Form īn meniul Insert, apoi alegeti Form. Īn interiorul tabelului se va afisa o zona delimitata, continānd butoanele Submit si Reset, dupa cum se arata īn Figura 7-30 urmatoare.

Figura 7-30.

Primul pas īn crearea unui formular este introducerea unei componente formular, care include īn mod automat butoanele Submit si Reset.

2 Avānd cursorul amplasat īn partea stānga a butonului Submit, tastati Nume:, apoi apasati Shift+Enter.

Tastati Adresa de posta electronica: si apasati Enter.

Apasarea tastei Enter adauga mai mult spatiu decāt Ctrl+Enter.

 
Tastati Sunteti membru al clubului? si apasati tasta Enter.

Tastati Daca da, cāt de des participati la īntālnirile noastre lunare? si apasati tasta Enter.

Tastati Va rugam sa ne spuneti cum ati gasit situl nostru Web (bifati tot ceea ce corespunde):, apasati Shift+Enter, tastati Am participat la o īntālnire., apasati Shift+Enter, tastati L-am gasit cu un motor de cautare., apasati Shift+Enter, tastati Am aflat de la un prieten., apoi apasati Enter.

Tastati Va rugam sa scrieti aici comentariile si īntrebarile dvs.:, apasati Shift+Enter, apoi Enter. Formularul trebuie sa semene cu cel īn curs de dezvoltare prezentat īn Figura 7-31.

Figura 7-31.

Formularul īn curs de dezvoltare afiseaza doar textul acestuia si butoanele de baza.

Crearea cāmpurilor formularului

Acum sunteti gata sa introduceti cāmpurile formularului, zonele īn care cei care vizualizeaza selecteaza sau introduc text pentru a transmite informatii.

Faceti clic dupa Nume:, apasati bara de spatiu, indicati Form īn meniul Insert si alegeti Textbox.

Cāmpurile formularului vor fi formatate īn curānd, asa ca nu va īngrijorati daca īn acest moment ele nu arata chiar potrivit.

 
Faceti clic dupa Adresa de posta electronica:, apasati bara de spatiu, indicati spre Form īn meniul Insert si alegeti Textbox.

Faceti clic dupa Sunteti membru al clubului?, indicati spre Form īn meniul Insert, alegeti Option Button, tastati Da, apasati bara de spatiu, indicati spre Form īn meniul Insert, alegeti Option Button si tastati Nu.

Faceti clic dupa Daca da, cāt de des participati la īntālnirile noastre lunare?, apasati bara de spatiu, indicati spre Form īn meniul Insert, si alegeti Drop-Down Box.

Faceti clic īnainte de Am participat la o īntālnire, indicati spre Form īn meniul Insert, alegeti Checkbox si apasati bara de spatiu.

Faceti clic īnainte de L-am gasit cu un motor de cautare, indicati spre Form īn meniul Insert, alegeti Checkbox si apasati bara de spatiu.

Faceti clic īnainte de Am aflat de la un prieten, indicati spre Form īn meniul Insert, alegeti Checkbox si apasati bara de spatiu.

Faceti clic sub Va rugam sa scrieti aici comentariile si īntrebarile dvs., indicati spre Form īn meniul Insert si alegeti Text Area.

9 Faceti clic pe Save. Formularul trebuie sa fie afisat ca īn Figura 7-32.

Figura 7-32.

Formularul trebuie sa contina etichete si cāmpuri de formular neformatate.

Pentru a configura cāmpurile formularului se utiliyeay[ proprietati, astfel īncāt sa poata accepta atāt informatie cāt si continut informational de iesire.

 
Configurarea proprietatilor cāmpurilor formularului

Aveti acum creat continutul formularului. Urmatorul pas este configurarea proprietatilor pentru fiecare cāmp al formularului si specificarea proprietatilor formularului īn ansamblu. Pregatiti degetele pentru a face clic cu butonul din dreapta - veti configura cāteva proprietati ale formularului.

1 Faceti clic cu butonul din dreapta īn cāmpul de lānga Nume si selectati Form Field Properties.

Fila Tab Order specifica ordinea īn care cursorul se va misca īn cadrul unui formular īn cazul īn care un vizitator apasa tasta Tab pentru a trece de la un cāmp la altul.

 
2 Īn cāmpul Name din caseta de dialog Text Box Properties, tastati Nume, setati Width In Characters la (ca īn figura 7-33), introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

Figura 7-33.

Utilizati caseta de dialog Text Box Properties pentru a seta proprietatile unei casete text.

3 Faceti clic cu butonul din dreapta īn cāmpul de lānga Adresa de posta electronica, selectati Form Field Properties, tastati Email, setati Width In Characters la , introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

4 Faceti clic cu butonul din dreapta pe butonul Yes, alegeti Form Field Properties, tastati Membru īn caseta text Group Name, tastati Da īn caseta text Value, asigurati-va ca este selectata valoarea Selected īn sectiunea Initial State, introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

5 Faceti clic cu butonul din dreapta pe butonul No, alegeti Form Field Properties, tastati Membru īn caseta text Group Name, tastati Nu īn caseta text Value, asigurati-va ca Not Selected este selectat īn sectiunea Initial State, apoi faceti clic pe OK.

Nota

Nu este obligatoriu sa setati ordinea de tabulare (tab order) pentru ambele optiuni Da si Nu. Deoarece optiunile sunt membre ale aceluiasi grup, utilizatorii au posibilitatea sa se deplaseze la grup apasānd tasta Tab. Apoi au posibilitatea sa selecteze o optiune utilizānd tastele sageti. Cānd sunt pregatiti sa se deplaseze la sectiunea urmatoare a formularului, vor apasa tasta Tab.

Faceti clic cu butonul din dreapta pe caseta lista verticala Daca da, cāt de des participati la īntālnirile noastre lunare? si alegeti Form Field Properties. Se va deschide caseta de dialog Drop-Down Box Properties.

7 Tastati Participare īn caseta text Name, introduceti īn caseta text Tab Order, apoi faceti clic pe Add. Se va deschide caseta de dialog Add Choice.

Īn caseta de dialog Add Choice, introduceti La fiecare īntālnire, alegeti optiunea Selected īn sectiunea Initial State, apoi faceti clic pe OK.

Faceti clic pe Add, tastati Din doua īn doua luni, apoi faceti clic pe OK.

Faceti clic pe Add, introduceti De cāteva ori pe an, apoi faceti clic pe OK.

11 Faceti clic pe Add, tastati Niciodata, apoi faceti clic pe OK. Caseta de dialog Drop-Down Box Properties trebuie sa arate ca cea din Figura 7-34.

Figura 7-34.

Caseta de dialog terminata Drop-Down Box Properties afiseaza toate optiunile si care dintre optiuni va fi selectata implicit.

12 Faceti clic pe OK.

13 Faceti clic cu butonul din dreapta pe prima caseta de selectare, alegeti Form Field Properties, introduceti GasitSitWeb īn caseta text Name, introduceti Participare la īntālnire īn caseta text Value, introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

14 Faceti clic cu butonul din dreapta pe a doua caseta de selectare, alegeti Form Field Properties, introduceti GasitSitWeb īn caseta text Name, introduceti Motor de cautare īn caseta text Value, introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

15 Faceti clic cu butonul din dreapta pe a treia caseta de selectare, alegeti Form Field Properties, introduceti GasitSitWeb īn caseta text Name, introduceti Prieten īn caseta text Value, introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

16 Faceti clic cu butonul din dreapta pe caseta text defilanta, alegeti Form Field Properties, tastati Comentarii īn caseta text Name, introduceti īn caseta text Width In Characters, introduceti īn caseta text Tab Order, introduceti īn caseta text Number Of Lines, apoi faceti clic pe OK.

17 Faceti clic cu butonul din dreapta pe butonul Submit, alegeti Form Field Properties, introduceti Remitere īn caseta text Name, introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

18 Faceti clic cu butonul din dreapta pe butonul Reset, alegeti Form Field Properties, introduceti Reinitializare īn caseta text Name, introduceti Golire formular īn caseta text Value/Label, introduceti īn caseta text Tab Order, apoi faceti clic pe OK.

19 Faceti clic pe sageata Back o singura data si apasati bara de spatiu pentru a insera spatiu īntre butoanele Remitere si Golire formular.

20 Faceti clic īnainte de eticheta Nume: īn partea de sus a formularului si apasati Shift+Enter. Apoi salvati fara examinare formularul (pentru ca acesta sa functioneze corespunzator, trebuie publicat pe Web īnainte de a fi examinat).

Denumirea cāmpurilor

Īn general, trebuie sa furnizati cāte un nume pentru fiecare cāmp al formularului. Numele de cāmpuri ajuta la identificarea informatiei dupa ce aceasta a fost transmisa si pentru a permite browserelor sa diferentieze elementele asemanatoare. Aveti posibilitatea sa configurati formularul astfel īncāt sa afiseze numele fiecarui cāmp īmpreuna cu datele transmise. Aceasta setare va ajuta sa vizualizati rapid informatia care a fost transmisa pentru fiecare intrare a cāmpurilor. De exemplu, va prezentam aici cum arata un formular online completat si o pagina de confirmare:

Īn continuare, veti primi un mesaj de posta electronica ce contine informatia transmisa, similar urmatorului mesaj:

Imaginile afisate aici prezinta cum va arata formularul pe care īl creati īn acest proiect, dupa ce formularul de contact va fi publicat pe un server Web.

Terminarea paginii Contact

Pentru a termina pagina Contact, trebuie sa ascundeti bordurile tabelului si sa setati proprietatile formularului.

1 Faceti clic cu butonul din dreapta oriunde īn tabel, alegeti Table Properties, introduceti 0 īn caseta text Size din zona Borders, apoi faceti clic pe OK.

2 Faceti clic cu butonul din dreapta pe formular si alegeti Form Properties. Se va deschide caseta de dialog Form Properties.

Īn caseta de dialog Form Properties, asigurati-va ca este selectata optiunea Send To, introduceti propria adresa de posta electronica īn caseta text E-mail Address si introduceti Formular de contact pentru Astronomie īn caseta text Form Name.

Dupa ce va apasa butonul Remitere, vizitatorul va avea afisata o pagina de confirmare (multumesc.htm) īn pagina Contact.

 
4 Īn caseta de dialog Form Properties, faceti clic pe Options, faceti clic pe fila E-mail Results, asigurati-va ca este selectata caseta Include Field Names si introduceti Informatii de contact pentru Astronomie īn caseta text Subject Line. Selectarea optiunii Include Field Names specifica faptul ca numele de cāmpuri vor īnsoti informatia trimisa, iar textul din linia de subiect apare īn mesajele de posta electronica pe care le primiti dupa ce utilizatorii fac clic pe butonul Remitere.

Faceti clic pe fila Confirmation Page, tastati multumiri.htm īn caseta text URL Of Confirmation Page, faceti clic pe OK de doua ori, apoi faceti clic pe No.

6 Salvati si īnchideti contact.htm, apoi īnchideti FrontPage.

Pentru a vizualiza versiunea publicata a paginii de contact, vizitati www.creationguide.com/sky/contact.htm

 
Acestea au fost experimentele de creare a subpaginilor pentru acest proiect. Ati parcurs o serie de caracteristici ale FrontPage pe care le veti utiliza atunci cānd veti crea propriul sit Web. Īnsa, īnainte de a īnchide acest proiect, trebuie sa creati pagina de pornire a sitului clubului de astronomie.

Crearea unei pagini de pornire īn FrontPage

Acum sunteti gata sa realizati pagina de pornire. Crearea acestei pagini pare putin cam dificila īn anumite puncte si recunoastem ca este probabil cea mai avansata procedura pe care o descriem īn acest curs. Intentionam sa va dam o sugestie despre cāt de departe aveti posibilitatea sa mergeti daca v-am inspirat sa continuati cu proiectarea de situri Web. (si speram ca da!) Mai mult, ne-am gāndit ca este posibil sa fiti interesati de modul īn care tabelele si imaginile sunt uneori utilizate pentru a crea aspecte de pagina avansate. Sa īncepem prin stabilirea cadrului de lucru al paginii de pornire.

Stabilirea cadrului de lucru al paginii de pornire

Pentru a īncepe, urmati acesti pasi:

1 Deschideti FrontPage, deschideti C:\cer\subpagina.htm, alegeti Save As din meniul File, faceti clic pe butonul Change Title, introduceti Situl Web oficial al Clubului de astronomie īn caseta de dialog Set Page Title, faceti clic pe OK, introduceti index.htm īn caseta text File Name, apoi faceti clic pe Save.

2 Faceti clic cu butonul din dreapta pe o zona necompletata a paginii, faceti clic pe Page Properties, faceti clic pe fila Background, faceti clic pe caseta Text color din sectiunea Colors, alegeti culoarea alb, apoi faceti clic pe OK.

3 Amplasati cursorul īnainte de legatura Home din bara de navigare de tip text, glisati pentru a selecta tot ce se afla deasupra (incluzānd bara titlu si imaginea siglei), faceti clic cu butonul din dreapta pe elementele selectate, apoi faceti clic pe Cut.

4 Apasati pe Enter, apoi apasati butonul sageata sus (sau faceti clic pe spatiul de deasupra barei de navigare de tip text).

5 Faceti clic pe Insert Picture From File, afisati continutul folderului C:\cer\imagini daca este necesar, faceti clic pe titlebar-home.gif si apasati pe Enter.

Semnele marquees vor permite defilarea sau glisarea textului de-a lungul unei pagini.

 
6 Faceti clic pe Web Component din bara de instrumente Standard, alegeti Dynamic Effects si faceti dublu clic pe Marquee. Se va deschide caseta de dialog Marquee Properties.

7 Īn caseta de dialog Marquee Properties, tastati Viitoarea noastra īntālnire este pe 21 februarie. Rezervati-va acum un loc! īn caseta text Text; acesta este mesajul care va defila prin pagina.

Alegeti optiunea Slide īn sectiunea Behavior, deselectati caseta Continuously din sectiunea Repeat si introduceti 1 īn caseta text Repeat, ca īn figura 7-35.

Figura 7-35.

Printre alte proprietati, aveti posibilitatea sa specificati daca textul defilant va defila continuu sau doar de un anumit numar de ori predefinit.

9 Faceti clic pe butonul Style, pe Format, pe Font, alegeti Comic Sans (sau Comic Sans MS) īn caseta cu lista de fonturi, alegeti culoarea alba īn caseta de culori si faceti clic pe OK de trei ori pentru a īnchide toate casetele de dialog deschise.

10 Apasati sageata la dreapta pentru a deselecta componenta defilanta, apasati pe Enter, faceti clic pe butonul Table din bara de instrumente si creati un tabel de 1 rānd si 5 coloane. Pagina index.htm trebuie sa arate ca cea din Figura 7-36.

Figura 7-36.

Pagina de pornire a clubului de astronomie are la baza un tabel particularizat.

11 Faceti clic cu butonul din dreapta pe tabel, alegeti Table Properties, faceti clic pe lista verticala Alignment, selectati Center, asigurati-va ca este selectata caseta Specify Width, introduceti 580 īn caseta text Specify Width, alegeti optiunea In pixels, asigurati-va ca Cell Padding si Cell Spacing sunt setate la 0, apoi faceti clic pe OK.

Tabelul va fi folosit pentru a contine partile unui element grafic ce a fost divizat īntr-un program de grafica.

 
12 Selectati toate cele cinci celule ale tabelului, faceti clic cu butonul din dreapta pe celulele selectate, alegeti Cell Properties, setati Vertical Alignment la Top, apoi faceti clic pe OK.

13 Faceti clic cu butonul din dreapta pe imaginea titlebar-home.gif, alegeti Picture Properties, faceti clic pe fila General, tastati Bun venit la situl Web al Clubului Astronomilor īn caseta Alternative Representations Text si faceti clic pe OK.

Faceti clic pe Save.

Asamblarea imaginii principale

Acum veti introduce portiuni ale unei imagini care a fost decupata pentru a se potrivi īn tabel. Imaginea, īnainte de a fi īmpartita īn parti, este prezentata īn figura 7-37. Motivul pentru care am īmpartit imaginea īn imagini separate este ca am dorit sa utilizam HTML dinamic (DHTML) pentru a crea un efect de suprapunere luminos atunci cānd utilizatorii deplaseaza cursorul peste o zona de hyperlink. Daca nu am fi prezentat efectul de suprapunere (si nu am fi demonstrat cum sa taiati imaginile si sa le reasamblati atunci cānd e necesar), am fi creat o imagine harta similara cu imaginea sistemului solar pe care ati creat-o anterior pe pagina Ghid celest.

Figura 7-37.

Imaginea originala a Carului Mare prezentata aici a fost taiata īn bucati pentru acest proiect.

Nota

DHTML (HTML dinamic) este o tehnologie care da posibilitatea paginilor Web sa se modifice si sa se actualizeze īn mod automat, īn functie de actiunile utilizatorului, ca de exemplu afisarea unei imagini sau a unei informatii suplimentare īn functie de deplasarea cursorului utilizatorului.

1 Īn index.htm, faceti clic īn celula 1, faceti clic pe Insert Picture From File īn bara de instrumente Standard, afisati continutul C:\cer\imagini si faceti dublu clic pe bigdip1.gif.

2 Faceti clic īn celula 2 si inserati b_aboutus.gif.

3 Faceti clic īn celula 3, inserati bigdip2.gif (o imagine transparenta care ajuta la alinierea celorlalte imagini), apasati Shift+Enter, inserati b_contact.gif, apasati Shift+Enter, inserati b_meetings.gif, apasati Shift+Enter, inserati b_skyguide.gif.

4 Faceti clic īn celula 4 si inserati bigdip3.gif.

Faceti clic īn celula 5, inserati bigdip4.gif (alta imagine transparenta), apasati Shift+Enter, inserati b_gallery.gif, apasati Shift+Enter, inserati bigdip5.gif, apasati Shift+Enter, inserati b_links.gif. Pagina index.htm ar trebui sa se afiseze ca īn figura 7-38.

Figura 7-38.

Dupa ce redati forma imaginii Carului Mare, sunteti gata sa faceti legatura de la portiunile imaginii Carului Mare la subpagini.

Crearea legaturilor īn imaginea principala.

Urmatorul pas este sa faceti legatura de la fiecare imagine din imaginea Carului Mare care contine un nume de buton, la subpagina corespunzatoare:

Pentru a grabi procesul de creare a hyperlinkurilor nu se va tasta fiecare nume de fisier īn caseta text Address, īn schimb se va face dublu clic pe numele fisierelor aflate īn lista din caseta de dialog Insert Hyperlink.

 
1 Faceti clic cu butonul din dreapta pe textul Despre noi, alegeti Hyperlink, asigurati-va ca folderul cer apare īn caseta text Look in, tastati desprenoi.htm īn caseta text Address (sau selectati fisierul desprenoi.htm din lista de fisiere), apoi faceti clic pe OK.

2 Faceti legaturi la restul imaginilor, dupa cum urmeaza:

Imagine

Link To

Contactati-ne

contact.htm

Īntālniri

īntālniri.htm

Ghid celest

ghidcelest.htm

Galerie foto

galerie.htm

Legaturi despre astronomie

legaturi.htm

3 Faceti clic pe Save.

Un contor arata de cāte ori a fost afisata o pagina īntr-un browser, iar "Data ultimei actualizari" indica vizitatorului faptul ca situl este īntretinut si ca cineva lucreaza constant la buna functionare a acestuia.

 
Adaugarea HTML dinamic la imaginea principala

Īn continuare, veti adauga efectul de suprapunere la fiecare zona de hyperlink din tabel, utilizānd bara de instrumente DHTML din FrontPage:

Selectati butonul About Us si alegeti Dynamic HTML Effects din meniul Format. Va fi afisata bara de instrumente DHTML Effects. Veti configura bara de instrumente pentru a fi afisata ca īn Figura 7-39.

Figura 7-39.

Bara de instrumente DHTML Effects va asista īn aplicarea efectelor dinamice īn paginile Web.

2 Īn lista verticala On, alegeti Mouse Over.

3 Īn lista verticala Apply, alegeti Swap Picture, faceti clic pe lista verticala Choose Settings, selectati Choose Picture, apoi faceti dublu-clic pe b_aboutus.gif īn folderul C:\cer\imagini.

Repetati pasii de la 1 la 3 pentru fiecare zona de legatura, legānd imaginile secundare dupa cum urmeaza:

Legatura

Fisier imagine

Contactati-ne

b_contact2.gif

Īntālniri

b_meetings2.gif

Ghid celest

b_skyguide2.gif

Galerie foto

b_gallery2.gif

Legaturi despre astronomie

b_links2.gif

Īnchideti bara de instrumente DHTML Effects.

6 Faceti clic cu butonul din dreapta pe tabel, alegeti Table Properties, introduceti 0 īn caseta text Size din sectiunea Borders, faceti clic pe Apply, apoi faceti clic pe OK.

7 Faceti clic pe Save si examinati lucrarea.

8 Faceti clic pe fila Normal pentru a reveni īn zona de lucru.

Adaugarea ultimelor retusuri la pagina de pornire.

Pentru a termina pagina de pornire, veti insera elementele contor si ultima data de modificare. Pentru a insera contorul, faceti urmatorii pasi:

Elementele contorului nu vor fi afisate pāna cānd nu veti publica pe Web pagina creata īn FrontPage.

 
Īn index.htm, faceti clic dupa hyperlink-ul Links īn bara de navigare text, apasati pe Enter, indicati Web Component īn meniul Insert si alegeti Hit Counter din lista Component Type. Faceti clic pe Finish si va fi afisata caseta de dialog Hit Counter Properties.

Īn lista Choose A Counter Style, alegeti stilul numar digital verde (este ultimul stil din lista), apoi selectati caseta Fixed Number Of Digits, acceptati setarea implicita de 5 cifre si faceti clic pe OK.

3 Apasati pe Enter, alegeti Date And Time din meniul Insert si faceti clic pe OK īn caseta de dialog Date And Time. Data se va actualiza īn mod automat de fiecare data cānd editati pagina.

4 Salvati index.htm si faceti clic pe Preview. Pagina ar trebui sa arate ca cea din figura 7-40. Dupa ce publicati situl Web, pagina de pornire va afisa contorul īn loc de textul substituent.

Figura 7-40.

Fisierul index.htm terminat este prezentat aici īn modul Preview.

Ati terminat pagina de pornire si majoritatea subpaginilor pentru situl Web al clubului de astronomie. O treaba excelenta! Acum īntelegeti cāteva din capacitatile programului FrontPage. Speram ca aceste cunostinte nou-asimilate va vor fi de folos īn proiectarea si crearea propriilor situri Web.

Pentru a vedea o versiune directa a sitului Web clubul astronomilor creat īn acest proiect vizitati www.creationguide.com/sky.

 
Īn ceea ce priveste situl clubului de astronomie, singurul pas ramas este sa publicati C:\cer pe Web, utilizānd caracteristica Publish din FrontPage. Cititi cu atentie urmatoarea sectiune īnainte de a īncarca situl Web al clubului de astronomie pe spatiul serverului.

Cāteva cuvinte despre publicare

Atunci cānd creati pagini Web cu FrontPage, cea mai buna alegere este sa īncarcati paginile utilizānd caracteristica de publicare pe Web din FrontPage, mai ales cānd ati inserat elemente care se bazeaza pe extensii de server FrontPage (cum ar fi formularele si contoarele). Pentru a publica situl, selectati optiunea Publish Web, din meniul File. Spatiul si adresa de server trebuie sa fie deja pregatite. Mai mult, trebuie sa va asigurati ca serviciul de gazduire permite extensiile de server FrontPage. Pentru mai multe informatii despre publicarea paginilor Web FrontPage si utilizarea extensiilor de server FrontPage, contactati furnizorul de servicii Internet (ISP) si apelati la fisierele de ajutor din FrontPage.

Resurse suplimentare

Iata cāteva referinte pe care le-am gasit folositoare:

Buyens, Jim. Microsoft FrontPage Version 2002 Inside Out Redmond, WA: Microsoft Press, 2001. Aceasta carte este o sursa de documentare completa īn ceea ce priveste FrontPage.

www.microsoft.com/frontpage este o resursa online definitiva pentru FrontPage.

Aspecte cheie

FrontPage este un program de editare HTML cu toate caracteristicile necesare.

Aveti posibilitatea de a utiliza FrontPage pentru a crea cu usurinta pagini Web ce contin caracteristici precum efecte de rasucire a butoanelor, imagini-harta, imagini īn miniatura, formulare, contoare si alte componente.

Interfata FrontPage permite afisarea paginilor Web īn moduri de vizualizare precum Normal (de lucru), HTML sau Preview.

Prin asimilarea programului FrontPage se deschid orizonturile folosirii editoarelor HTML cu servicii complete, deoarece FrontPage exemplifica tipurile de caracteristici oferite de aceste editoare.

Īnainte sa creati pagini Web folosind FrontPage, ar trebui sa va asigurati ca serviciul de gazduire Web pe care īl veti folosi suporta FrontPage Sever Extensions. (Īn ultima vreme, majoritatea serverelor suporta aceste extensii īntr-o anumita masura.)

Īnainte sa īncepeti crearea de pagini Web īn FrontPage ar trebui sa creati un Web, care ofera unui folder selectat optiuni de formatare speciale.

Aveti posibilitatea de a simplifica procesul construirii unui sit Web prin crearea de sabloane standard pe care le puteti salva ca subpagini.

Cheia succesului īn crearea de situri Web īn FrontPage este sa tineti fisierele organizate, sa stiti unde se gasesc instrumentele FrontPage si optiunile de meniu si sa experimentati cu diverse setari.

Pentru rezultate optime, īncarcati pe server fisierele FrontPage folosind caracteristica Publicare.

Testare rapida

Prin ce se deosebeste crearea unei pagini Web īntr-un editor HTML avansat (precum FrontPage) de crearea unei pagini Web īntru-un editor de text (precum Notepad)?

Cānd salvati o pagina Web īn FrontPage, aveti posibilitatea de a seta si titlul paginii. Care este scopul acestuia?

Care sunt cele trei moduri de vizualizare ale FrontPage si care este functia principala a fiecaruia?

Caseta de dialog Insert Hyperlink este folosita pentru crearea de legaturi cu alte pagini Web. Ce alt tip de hyperlink poate fi creat folosind caseta de dialog Insert Hyperlink si cānd este el folosit ?

Care este scopul unei foi stil cascada?

Ce este o imagine-harta?

Recapitulare

Exercitiul 1: Īn aceasta lectie creati un sit Web folosind FrontPage. Pentru a exersa lucrul cu FrontPage īn vederea crearii de continut informational pentru Web veti lucra cu o subpagina construita mai devreme. Pentru īnceput, deschideti legaturi.htm īn FrontPage, si adaugati textul "Siturile lunii despre Spatiu:" īn font Comic Sans, marimea 12. Salvati documentul, examinati-l īn FrontPage. Ar trebui sa arate similar cu imaginea urmatoare:

Exercitiul 2: Pentru a continua particularizarea paginii legaturi.htm a sitului Cer, adaugati urmatoarele doua legaturi, una dedesubt iar cealalta deasupra textului adaugat īn exercitiul 1: www.space.com si www.nasa.gov. Cuvintele Space si NASA sunt textele de afisare a hyperlink-urilor. Examinati pagina īn FrontPage. Ar trebui sa arate similar cu imaginea urmatoare:

Exercitiul 3 Īn sfārsit, formatati legaturile Space si NASA īntr-o lista cu marcatori folosind bara de instrumente FrontPage. Salvati, apoi examinati pagina legaturi.htm īn FrontPage. Ar trebui sa arate similar cu imaginea urmatoare:





Document Info


Accesari: 7114
Apreciat: hand-up

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta


Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site


in pagina web a site-ului tau.




eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate




Copyright © Contact (SCRIGROUP Int. 2023 )