Crearea unui site Web folosind

Microsoft FrontPage

Bucuresti
Februarie 2007 1
- Computer supported teaching and learning in the curriculum -
Proiect de Dezvoltare Scolara – Comenius 1
2005-2008

Crearea unui Site Web

folosind Front Page
Februarie 2007

Grupul Scolar de Chimie “Costin Nenitescu”, Bucuresti

Prof. Felicia Huides

2
Obiective / scopuri

1. Organizarea – designul unei pagini Web

2. Crearea unui Web Site
3. Crearea conexiunilor catre diferite pagini
(Link-uri)
4. Adaugarea componentelor la pagina web
5. Publicarea Web-site-ului

3
 Organizarea site-ului Web

Home Page (index.html)

elevi profesori parinti teste

nume Evenimente/activitati

4
 Planificarea Site-ului Web

Care sunt scopurile de baza pentru crearea unei pagini

Web?

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

5
 Aria de lucru principala in Front Page

Pagina

Fisiere

6
Pagina se poate vedea in 3 moduri diferite (normal, HTML sau Preview)
Primii pasi in crearea unui Site Web

- Selecteaza File / New / Page or Web /

apoi cauti Empty Web

- Alege locatia pe hard-disk unde sa salvezi

ceea ce lucrezi si apasa OK!

7
 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 alte
lucruri.

- Te poti intoarce oricand la aceasta pagina principala

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

- Te poti intoarce oricand la aceasta pagina

principala

9
 Adaugarea unui tabel

• Palseaza cursorul in locul unde vrei sa

inserezi 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

10
Din fereastra de proprietati puteti face modificarile dorite

11
 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!

12
 Derularea textului (marque)

• Plasati cursorul in locul in care doriti ca

mesajul dorit sa inceapa sa se deruleze
• Selectati Insert > Web Component > Marque

13
 Crearea unei pagini goale (albe)

-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 pagina
dumneavoastra, selectati Insert > File
- Selectati fisierul Word (.doc) pe care doriti sa il inserati in pagina
dumneavoastra si apoi apasati Open
- Apasati No in urmatoarea fereastra si textul din Word va fi plasat in
noua dumneavostra pagina din Front Page.

14
 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!

15
16
 Inserarea unui Hyperlink:

(a) La un document (word de ex.) pe care il ai salvat in resursele

paginii Web pe care doresti sa o creezi (fisierul Primul)
(b) la o alta pagina web
(c) pentru a trimite un email

(a) Despre inserarea unui document Word am discutat mai sus

(b) Sunt cazuri in care doresti sa creezi o legatura intre
pagina ta si o alta pagina web.
Pentru a face acest lucru trebuie sa sti URL-ul paginii
respective pentru a crea un hyperlink direct (de exemplu –
http://www.nenitescu.ro)
(c) De asemenea poti avea nevoie sa creezi un link in pagina ta
web prin care cel ce viziteaza pagina sa iti trimita un e-mail
17
 Bookmarks

• In cazul in care vreti sa aveti o legatura (link)

catre o pagina web foarte stufoasa, si este dificil
ca userul sa o citeasca in intregime, atunci
ajutam 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
18
 Recapitulare
4. Insereaza un tabel. 1. Organizeaza-ti pagina Web
Foloseste proprietatile Deseneaza pe hartie o
tabelelor diagrama

5. Inserarea unui 2. Stabileste care sunt

Crearea
mesaj ce se scopurile principale ale
deruleaza unui Web Site paginii Web

6. Insereaza Hyperlink-uri 3. Creaza pagina

pentru a crea legaturi cu principala folosind
alte pagini Microsoft FrontPage
Index.html
19
 Cum sa faci pagina ta web sa arate mai bine

Inserarea unei teme

Din meniu selecteaza Format > Theme

Selectam tema: “Cascade” si activam “All pages” daca dorim

20
 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 pe
linie apoi efectueaza modificarile necesare.

21
• Deschizi pagina de lucru Inserarea unei poze
(index.html) Selecteaza Insert
> Picture
• Selecteaza Clip Art sau From
File pentru a insera poza pe
care o ai salvata in fisierul cu
numele Primul
• Alege poza “Waterlilies” si da
click OK!
• Poza va fi plasata in locul de
pe pagina ta, loc pe care ti l-
ai ales.

22
 Folosirea elementului Dinamic HTML

Poti avea un mesaj care se misca sau o poza de

indata ce se incarca pagina sau cand asezam
cursorul 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 rezultatul
folosin Preview

23
 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.com
Acest cont va purta numele paginii pe care doresti sa o creezi
De exemplu: popescu_maria@yahoo.com
2. Dupa care folosind adresa creata iti deschizi cont la
www.geocities.com
Acestia 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

24
 Publicarea paginii Web folosind yahoo

• De indata ce ai spatiul tau liber pe

http://geocities.com poti sa uploadezi fisierele
folosind 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
25
26
Upload File

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

28
Publicarea paginii web folosind FTP
Deschideti http://www.home.ro
Si va creati un cont nou

29
4. Publicarea site-ului pe 1. Hyperlink
Web folosind
a) Legatura cu alte pagin
a) geocities.com
b) Legatura cu emailul
b) Folosind FTP

2. Inserarea unui
5. Efectul dinamic
HTML Recapitulare Bookmark

3. Pagini Web mai bune

6. Inserarea folosind
- pozelor -Teme
-liniilor orizontale -Fundal
30
-Format