1

Crearea unui site Web folosind Microsoft FrontPage

Bucuresti Februarie 2007

2

Crearea unui Site Web folosind Front Page

Februarie 2007

Grupul Scolar de Chimie “Costin Nenitescu”, Bucuresti

Prof. Felicia Huides

- Computer supported teaching and learning in the curriculum -

Proiect de Dezvoltare Scolara – Comenius 1

2005-2008

3

Obiective / scopuri

1. Organizarea – designul unei pagini Web2. Crearea unui Web Site3. Crearea conexiunilor catre diferite pagini(Link-uri)4. Adaugarea componentelor la pagina web5. Publicarea Web-site-ului

4

Organizarea site-ului Web

Home Page (index.html)

elevi profesori parinti teste

nume Evenimente/activitati

5

Planificarea Site-ului Web

Care sunt scopurile de baza pentru crearea unei paginiWeb?

1. Informarea partenerilor (ex.: profesori, elevi, parinti)

2. Crearea unui mijloc de comunicare intre diversii parteneri

3. Oferirea de informatii despre evenimente

4. Alte anunturi

6

Aria de lucru principala in Front Page

Pagina

Fisiere

Pagina se poate vedea in 3 moduri diferite (normal, HTML sau Preview)

7

Primii pasi in crearea unui Site Web

- Selecteaza File / New / Page or Web /apoi cauti Empty Web

- Alege locatia pe hard-disk unde sa salveziceea ce lucrezi si apasa OK!

8

Cum sa creezi pagina principala (index.html)?

Selecteaza File > New > Page

si apoi > One-Column body with contents on left > dam click pe Ok!

- Acum ai creat pagina principala a Site-ului Web

- Din acest moment poti aduga diferite teme cum ar fi poze, tabele, si altelucruri.

- Te poti intoarce oricand la aceasta pagina principala

9

- Din acest moment poti aduga diferite temecum ar fi poze, tabele, si alte lucruri.

- Te poti intoarce oricand la aceasta paginaprincipala

10

Adaugarea unui tabel

• Palseaza cursorul in locul unde vrei sainserezi tabelul

• Alege Table > Insert > Table• In fereastra care apare alegi numarul de

linii si de coloane• Pentru a mai adauga randuri plasati

cursorul in ultima casuta (a tabelului) din coltul dreapta jos si apasati tab

11

Din fereastra de proprietati puteti face modificarile dorite

12

Plasarea pe fundal a unui mesaj care sa se deruleze in momentul in care pagina se deschide

• De exemplu:

Sper sa va placa acest CURS!

13

Derularea textului (marque)

• Plasati cursorul in locul in care doriti ca mesajul dorit sa inceapa sa se deruleze

• Selectati Insert > Web Component > Marque

14

-Selectati File > New > Page > Normal Page > ok!- Tocmai ati creat o a doua pagina unde puteti adauga text, poze, tabele, etc.- Daca aveti deja un document Word pe care doriti sa il inserati in paginadumneavoastra, selectati Insert > File- Selectati fisierul Word (.doc) pe care doriti sa il inserati in paginadumneavoastra si apoi apasati Open- Apasati No in urmatoarea fereastra si textul din Word va fi plasat in noua dumneavostra pagina din Front Page.

Crearea unei pagini goale (albe)

15

Crearea unui Hyperlink (hiperlegaturi)

• Selectati Hyperlinkul (o poza sau cuvinte)• Folosind meniul selectati Insert >

Hyperlink• Dati nume fisierului pe care doriti sa il

legati in hyperlink• Apasati ok!

16

17

Inserarea unui Hyperlink:

(a) Despre inserarea unui document Word am discutat mai sus(b) Sunt cazuri in care doresti sa creezi o legatura intrepagina ta si o alta pagina web.Pentru a face acest lucru trebuie sa sti URL-ul paginiirespective pentru a crea un hyperlink direct (de exemplu –http://www.nenitescu.ro)(c) De asemenea poti avea nevoie sa creezi un link in pagina taweb prin care cel ce viziteaza pagina sa iti trimita un e-mail

(a) La un document (word de ex.) pe care il ai salvat in resurselepaginii Web pe care doresti sa o creezi (fisierul Primul)

(b) la o alta pagina web(c) pentru a trimite un email

18

Bookmarks

• In cazul in care vreti sa aveti o legatura (link) catre o pagina web foarte stufoasa, si este dificilca userul sa o citeasca in intregime, atunciajutam userul sa mearga direct in locul in care dorim

• Pentru asta se poate folosi Bookmarks• Un bookmarks este un hyperlink care duce

userul intr-un punct specificat al unei pagini web fara sa fie nevoit sa o deruleze pe toata

• Du-te in punctul de pe pagina ta web pe care vrei sa il vizualizezi dupa ce apesi pe hyperlink

• Din menu selectazi Insert > Bookmark > ok

19

Recapitulare

Crearea

unui Web Site

1. Organizeaza-ti pagina Web Deseneaza pe hartie o

diagrama

2. Stabileste care suntscopurile principale ale

paginii Web

3. Creaza paginaprincipala folosind

Microsoft FrontPage Index.html

4. Insereaza un tabel. Foloseste proprietatile

tabelelor

5. Inserarea unuimesaj ce se deruleaza

6. Insereaza Hyperlink-uripentru a crea legaturi cu

alte pagini

20

Cum sa faci pagina ta web sa arate mai bine

Inserarea unei teme

Din meniu selecteaza Format > ThemeSelectam tema: “Cascade” si activam “All pages” daca dorim

21

Inserarea unei linii orizontale

• Pune cursorul in locul unde vrei sa inserezi linia

• Selecteaza Insert > Horizontal line

• Pentru a schimba proprietatile liniei (ex: culoarea sau latimea) fa un click dreapta pelinie apoi efectueaza modificarile necesare.

22

Inserarea unei poze• Deschizi pagina de lucru(index.html) Selecteaza Insert > Picture

• Selecteaza Clip Art sau From File pentru a insera poza pecare o ai salvata in fisierul cu numele Primul

• Alege poza “Waterlilies” si daclick OK!

• Poza va fi plasata in locul de pe pagina ta, loc pe care ti l-ai ales.

23

Folosirea elementului Dinamic HTML

Poti avea un mesaj care se misca sau o poza de indata ce se incarca pagina sau cand asezamcursorul pe un mesaj, text, scris

• 1. Du-te la pagina web si selecteaza un rand sau un mesaj

• 2. Selecteaza Format > Dynamic HTML Effects• 3. Pe bara de optiuni apasa ON si selecteaza

Page Load• 4. In casuta de dialog selectati Apply > Hop• 5. Apasati save (Ctrl+S) , inchideti fereastra

DHTML Effects si incercati sa vedeti rezultatulfolosin Preview

24

Publicarea site-ului tau pe WEB

• Restul lumii va vedea pagina ta cand o vei publica pe web.1. Mai intai trebuie sa iti faci un cont nou pe www.yahoo.comAcest cont va purta numele paginii pe care doresti sa o creeziDe exemplu: popescu_maria@yahoo.com2. Dupa care folosind adresa creata iti deschizi cont la

www.geocities.comAcestia iti vor da un spatiu de 20 Mb pentru a folosi serverul yahoo.

Apoi trebuie sa descarci pagina creata de tine pe Internet. Exista 2 cai:(A) Downloadezi gratis un program FTP pe computerul tau

(www.towcows.com cauti programul WSFTP) sau

(B) Descarci direct pe www.geocities.com

25

Publicarea paginii Web folosind yahoo

• De indata ce ai spatiul tau liber pehttp://geocities.com poti sa uploadezi fisierelefolosind File Manager

• Trebuie sa urmezi pasii:

- Click pe Manage- Click si Open File Manager- Apasa pe Upload Files- Apoi poti cauta in calculatorul tau fisierele pe

care le poti uploada

26

27

Upload File

28

Apoi cauti in calculatorul tau fisierele pe care trebuie sa le uploadezi

29

Publicarea paginii web folosind FTPDeschideti http://www.home.ro

Si va creati un cont nou

30

Recapitulare

1. Hyperlink

a) Legatura cu alte pagin

b) Legatura cu emailul

2. Inserarea unuiBookmark

3. Pagini Web mai bunefolosind

-Teme

-Fundal

-Format

4. Publicarea site-ului peWeb folosind

a) geocities.com

b) Folosind FTP

5. Efectul dinamicHTML

6. Inserarea

- pozelor

-liniilor orizontale