itasistenta blog

Obiective:

Crearea şi editarea paginilor Web folosind Microsoft Word.

1. Operaţii cu documente tip pagină Web:

• creare;
• deschidere;
• salvare;
• previzualizare;
• publicare.

2. Elemente specifice unui document tip pagină Web:

• titlu (Title);
• fundal (Background);
• temă (Theme);
• cadru (Frame);
• foi de stil cascadă CSS (Cascading Style Sheets);
• text alternativ (Alternative Text);
• vizualizarea codului unei pagini Web (HTML Source);
• componente Web (Web Component);
• alte opţiuni în crearea şi prelucrarea paginilor Web cu Microsoft Word.

TEMA

11.1. Creaţi un document Word similar cu exemplul din fişierul “pagina web.pdf“. Imaginea folosită: windowsxp.jpg

11.2. Salvaţi documentul în format Web Page (.html). Stabiliţi un titlu (Title) pentru pagina salvată.

11.3. Vizualizaţi codul HTML al paginii salvate.

11.4. Salvaţi documentul în format Web Page, Filtered (.html).

11.5. Observaţi diferenţele dintre cele două formate de pagină Web. Există diferenţe la nivel vizual? Vizualizaţi şi comparaţi codurile celor două pagini Web folosind Microsoft Script Editor.

11.6. Identificaţi linia unde se defineşte tipul de codificare a fişierului. Ce codificare este folosită?

11.7. Adăugaţi un text alternativ imaginii windowsxp.jpg apelată în pagina Web.

11.8. Modificaţi hyperlink-ul din pagina Web astfel încât să se deschidă într-o nouă fereastră a browser-ului.

ÎNTREBĂRI

- Cum se mai putea exprima simbolul € în limbaj HTML?
- Introduceţi o imagine pe fundalul documentului. Observaţii. Identificaţi linia din codul HTML unde a fost introdusă imaginea pentru fundal.
- Pagina creată foloseşte stiluri (CSS)? Acestea sunt definite intern (în fişierul .html) sau într-un fişier extern?
- O imagine poate fi hyperlink spre ea însăşi? Dar spre un fişier .zip stocat pe un server FTP?
- Ce rol au şi cum se utilizează marcajele (Bookmark) într-un hyperlink?

Meniu: File -> New… -> Web page
Panou de activitate: New Document -> Web page
Buton: New Web Page (bara de butoane Standard) – apare dacă se editează curent un fişier tip pagină Web
Combinaţie de taste: Ctrl+N – dacă se editează curent un fişier tip pagină Web

Se poate crea un document nou:

• tip pagină Web necompletată (Web page) – se alege încă de la început formatul pagină Web. Modul de vizualizare a documentului va fi comutat pe Web Layout View.
• dintr-un şablon (Templates, tab-ul General);
• un document Word necompletat (Blank document).

Ultimele două cazuri vor crea un document Word nou (format implicit .doc) care va putea fi ulterior salvat în format pagină Web (.html, .html).

Meniu: File -> Open…
Buton: Open (bara de butoane Standard)
Shortcut: Ctrl+O

Word poate deschide pentru editare documente tip pagină Web (extensii .htm, .html, .mht, .mhtml). Sunt disponibile aceleaşi caracteristici prezentate în capitolul Deschiderea unui document în Office Word 2003.

Meniu: File->Save, File->Save As…, Save as Web Page
Buton: Save (bara de butoane Standard)
Shortcut: Ctrl+S

Dacă documentul a fost creat sau deschis ca pagină Web, operaţia de salvare va păstra formatul. Dacă dorim să salvăm ca pagină Web orice alt tip de document deschis, se vor folosi comenzile:

• Save as şi se va alege formatul dorit (.html, .mhtml);
• Save as Web Page, cu salvare directă în acest format.

Sunt disponibile aceleaşi caracteristici prezentate în capitolul Salvarea unui document în Office Word 2003.

Documentul curent se poate salva ca:

- .htm, .html (Web Page)

Fişierul salvat în acest format va conţine absolut toate marcajele necesare pentru vizualizarea documentului într-un browser exact aşa cum apare şi în fereastra Word, cu păstrarea intactă a tuturor funcţionalităţilor elementelor. Salvarea în acest format va crea implicit, pe lângă fişierul .html, un folder în care se vor stoca toate fişierele de suport – imagini, fundaluri, stiluri, scripturi externe. Dacă anumite caracteristici ale textului sau obiectelor din document nu pot fi implementate în limbajul HTML, acestea vor fi aduse la cele mai apropiate opţiuni disponibile sau vor fi eliminate.

- .htm, .html filtrat (Web Page, Filtered)

Salvarea unui document în format pagină Web (.htm, .html) presupune că Word adaugă implicit unele marcaje suplimentare, specifice Microsoft Office, care asigură că aspectul paginii în browser va fi acelaşi cu macheta documentului Word şi funcţionalitatea elementelor din pagină se va păstra în întregime. Formatul HTML filtrat oferă avantajul unei dimensiuni mai mici a fişierelor obţinută prin eliminarea marcajelor suplimentare, fiind agreat şi de autorii experimentaţi ai paginilor Web pentru care marcajele care apar în fişier sunt importante. Dezavantajul constă în pierderea unor caracteristici sau opţiuni pentru anumite elemente, atunci când o pagină creată cu Word şi salvată ca HTML filtrat este redeschisă în Word.

- .mht, .mhtml (Single File Web Page)

MHTML (MIME HTML, denumit şi Single File Web Page sau Web archive) este un format de fişier care combină codul HTML împreună cu toate resursele apelate de acesta (imagini, scripturi externe, fişiere multimedia) într-un singur fişier. Această încapsulare a resurselor permite publicarea întregului site într-un fişier .mht unic sau trimiterea lui prin poşta electronică (e-mail) ca fişier ataşat (attachment). Formatul a fost introdus în 1999, odată cu Internet Explorer 5.

Meniu: File->Web Page Preview

Alegând acest mod de vizualizare, Word salvează o copie a documentului curent în format .htm şi îl deschide în browser-ul implicit (de obicei Internet Explorer). Astfel, documentul poate fi revăzut pentru modificări finale înainte de a fi publicat pe Internet.

Paşii care trebuie urmaţi pentru publicarea unui document pe Web sunt următorii:

CONVERSIE (opţională)

Se presupune că documentul creat va fi salvat ca pagină Web (formate .html, .mhtml). Uneori, în funcţie de dorinţa utilizatorului şi scopul publicării, documentul poate fi:

• publicat în formatul nativ (.doc sau alte formate), dacă de exemplu documentul este destinat unei previzualizări restrânse sau supus recenziei (vor trebui adăugate modificări şi comentarii);
• convertit în format .pdf (Portable Document Format), un tip de fişier creat şi controlat de Adobe Systems, pentru reprezentarea documentelor într-o machetă fixă, independentă de hardware (rezoluţia monitorului, tipul de imprimantă, etc.) sau software (sistem de operare). Formatul PDF oferă şi avantajul protejării datelor, fişierul putând fi criptat pentru limitarea accesului la copierea datelor, la tipărire sau chiar la deschidere.

UPLOAD

Documentul final trebuie transferat (upload) într-o amplasare (un folder Windows / un director Linux) unde să fie disponibil publicului larg, prin intermediul serviciului unui server Web sau server FTP. Un server Web este un program care pune la dispoziţia utilizatorilor documente în diferite formate. Prin intermediul unui browser Web, utilizatorul solicită un fişier, iar serverul Web îl furnizează. Tranzacţia se face de obicei prin protocolul HTTP (Hypertext Transfer Protocol). Un server FTP (File Transfer Protocol) foloseşte protocolul omonim pentru transferul binar al fişierelor între două locaţii pe Internet. Upload-ul fişierului sursă se poate realiza prin mai multe metode:

• ferestrele Save / Save As / Save as Web Page permit navigarea (caseta Look in) prin:
  • structura locală de dispozitive, unităţi şi foldere (dacă serverul Web/FTP rulează chiar pe aceeaşi maşină);
  • o amplasare partajată (Share) din reţeaua locală (My Network Places);
  • o amplasare FTP (FTP Locations) identificată prin adresa serverului, numele de utilizator şi parola.
• separat, folosind comenzi ale protocolului FTP sau un program client FTP dedicat

PUBLICAREA ADRESEI URL

Adresa URL (Uniform Resource Locator) a documentului trebuie făcută publică într-o pagină Web din cadrul site-ului, prin inserarea unei hiperlegături (hyperlink) către documentul respectiv. În acest moment documentul devine public, iar utilizatorii îl pot descărca (download) dând clic pe hyperlink-ul din pagina Web.

HTML (Hypertext Markup Language) este un limbaj folosit pentru documente pe Internet. Un fişier tip .html este un fişier text care conţine marcaje speciale (inserate între semnele “<” şi “>”), interpretate de browsere astfel încât să se afişeze elementele paginii (texte, imagini, scripturi etc.) în formatul stabilit, iar acţiunile utilizatorului să fie corect interpretate.

Câteva exemple de marcaje HTML:

<b>Text</b>

Cuvântul “Text” va fi scris îngroşat (bold). Marcajele HTML folosite aici sunt <b> şi </b>.

<img src="pic1.jpg">

În pagină va fi inserată imaginea pic1.jpg. Marcajul HTML folosit este <img>.

<a href="http://www.google.ro">Google</a>

Cuvântul “Google” va fi afişat ca hyperlink; clic pe el va produce un salt spre adresa Web www.google.ro. Marcajul HTML folosit este <a>.

Spre deosebire de un document Word, crearea unei pagini Web întâmpină unele probleme datorate specificului limbajului HTML (limitarea posibilităţilor de formatare şi poziţionare a elementelor componente). Majoritatea comenzilor şi opţiunilor din Word sunt disponibile, iar cele care nu se pot aplica în editarea unei pagini Web sunt dezactivate automat.

Câteva dintre elementele comune care se găsesc atât în documente Word (.doc), cât şi în pagini Web (.html) sunt:

• texte, imagini, tabele, împreună cu formatările specifice (unele limitate la nivelul limbajului HTML);
• hyperlink-uri (meniul Insert->Hyperlink) – vezi Hiperlegătură (Hyperlink);
• obiecte multimedia (butoane de pe bara Web Tools) – film (Movie), audio (Sound);
• formulare (Forms) destinate completării în Word sau completării pe Web – vezi Formulare (Forms) completate pe Web.

În continuare se prezintă câteva elemente specifice exclusiv unei pagini Web:

• titlu (Title);
• fundal (Background);
• temă (Theme);
• cadru (Frame);
• foi de stil cascadă CSS (Cascading Style Sheets);
• text alternativ (Alternative Text);
• vizualizarea codului unei pagini Web (HTML Source);
• componente Web (Web Component);
• alte opţiuni în crearea şi prelucrarea paginilor Web cu Word.

La salvarea unui document ca pagină Web (în Fereastra Save/Save As/Save as Web Page) există posibilitatea introducerii unui titlu (Title) care va apărea în bara de titlu a ferestrei browserului Web. Titlul paginii se poate alege şi din meniul File->Properties, tab-ul Summary.

De obicei titlul este un text concis (recomandat de maxim 60 caractere), care rezumă informaţia prezentată în pagină.

Meniu: Format -> Background

Pentru fundalul (Background) unei pagini Web se pot folosi atât culori solide, alese din combinaţii de Red (roşu), Green (verde) şi Blue (albastru), cât şi efecte de umplere (degrade-uri, texturi, modele sau chiar imagini). Culoarea de fundal se aplică documentelor vizualizate pe monitor (pagini Web sau mesaje e-mail). Pentru un document Word tipărit fundalul se stabileşte din meniul Format->Background->Printed Watermark – vezi Crearea unui fundal (Background).

Meniu: Format -> Theme

Tema (Theme) este un set prestabilit de formatări, culori şi elemente, care permit crearea rapidă a unei pagini Web sau a unui întreg site cu un aspect unitar (care respectă aceeaşi machetă). La aplicarea unei teme, în document sunt particularizate barele de legătură, reprezentările grafice, culorile (de fundal, pentru hyperlink-uri şi chenare de tabel), stilurile pentru titluri, subtitluri şi text, aspectul listelor, liniile orizontale etc.