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 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 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 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 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 salvezi ceea 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! - Acumai 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 9 - Din acest moment poti aduga diferite teme cum ar fi poze, tabele, si alte lucruri. - Te poti intoarce oricand la aceasta pagina principala 10 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 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 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. 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 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 (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 18 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 ajutamuserul 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 sunt scopurile principale ale paginii Web 3. Creaza pagina principala folosind Microsoft FrontPage Index.html 4. Insereaza un tabel. Foloseste proprietatile tabelelor 5. Inserarea unui mesaj ce se deruleaza 6. Insereaza Hyperlink-uri pentru a crea legaturi cu alte pagini 20 Cum sa faci pagina ta web sa arate mai bine Inserarea unei teme Din meniu selecteaza Format > Theme Selectamtema: 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 pe linie 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 pe care o ai salvata in fisierul cu numele Primul Alege poza Waterliliessi da click 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 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 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.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.comcauti programul WSFTP) sau (B) Descarci direct pe www.geocities.com 25 Publicarea paginii Web folosind yahoo De indata ce ai spatiul tau liber pe http://geocities.compoti 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 26 27 Upload File 28 Apoi cauti in calculatorul tau fisierele pe care trebuie sa le uploadezi 29 Publicarea paginii web folosind FTP Deschideti 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 unui Bookmark 3. Pagini Web mai bune folosind -Teme -Fundal -Format 4. Publicarea site-ului pe Web folosind a) geocities.com b) Folosind FTP 5. Efectul dinamic HTML 6. Inserarea - pozelor -liniilor orizontale