2. Què és FrontPage?
 
FrontPage és una eina de creació i administració de llocs web que no requereix coneixements de programació però és prou robusta com per crear llocs web avançats. La seva aparença sol resultar familiar a aquells usuaris que en alguna ocasió hagin utilitzat algun programa dels que conformen el paquet de Microsoft Office.

Dins de FrontPage s'inclouen l'Explorador de pàgines web, on es poden crear, dissenyar i administrar un lloc web sencer. L'editor de FrontPage permet crear i editar pàgines web sense necessitat de conèixer HTML. És possible treballar amb temes que permeten donar-li a un lloc web aparença professional. A més hi ha una sèrie completa d'assistents i plantilles per a la creació de pàgines web, elements actius i una llista de tasques per portar el control de les tasques necessàries per a la creació i administració del lloc web.
 
Les vistes en FrontPage

FrontPage ens dóna la possibilitat de tenir diferents vistes per a organitzar i administrar el nostre lloc web (recordem que un lloc es refereix a un conjunt de pàgines web, quan anem a un lloc web, es diu pàgina principal a la primera pàgina a la qual vam arribar i que generalment porta el nom d'index.html).
 

1. Vista exploració. És potser on millor podem visualitzar el lloc, ja que ens mostra la seva estructura en forma d'organigrama, on tenim a la part superior la pàgina principal (amb una icona d'una caseta) i sota d'aquesta, totes les pàgines secundàries ramificades. Podem col·locar les nostres pàgines, o no, a la vista exploració (arrossegant de la llista de carpetes o seleccionant nova pàgina amb el menú del botó dret del ratolí) però si alguna no es col·loca, aquesta no apareixerà a les barres d'exploració que col·loquem en les pàgines (una barra d'exploració és una llista automàtica amb hipervincles a les altres pàgines).

2. Vista Pàgina. Aquesta és la vista on s'arma i es dóna format a la pàgina, com es veurà, el procés és similar a editar un document en Word, ja que les eines són semblants. Dins d'ella podrem observar que hi ha tres llengüetes: Normal, HTML i Vista prèvia.


3. Vista Carpetes. Aquí és on podem veure les diferents carpetes on guardem els arxius. Generalment ens convé organitzar-los per treballar més ordenats, per exemple, les imatges les guardem totes juntes en una carpeta; també podem guardar una secció sencera del nostre lloc en una carpeta diferent. És important no confondre l'estructura d'exploració amb l'estructura de les carpetes ja que no tenen per què ser iguals.
 
4. Vista Informes. En aquesta vista podrem obtenir una sèrie de dades molt útils per al nostre lloc com pàgines lentes, arxius no vinculats, arxius nous, hipervincles trencats, etc.
 
5. Vista Hipervincles. Ens mostra cada pàgina amb els seus hipervincles entrants i sortints.
 
6. Tasques. Aquí podem organitzar les pròximes tasques que anirem a realitzar en el nostre lloc o en algun arxiu determinat. És una espècie d'agenda.
 

Creant un nou lloc web

Per crear un lloc web cal anar al menú Fitxer, assenyalar Nou i fer clic en web. És possible escollir entre una sèrie de llocs preestablerts en FrontPage, per exemple, hi ha un assistent per crear un web per Presència corporativa i un per a crear una pàgina web personal. Si no té intencions d'utilitzar cap assistent és possible crear un web buit o web d'una pàgina. Després hem d'escriure la ubicació on es crearà el nou lloc web. Podem escriure el nom d'alguna carpeta situada en un disc dur de la nostra màquina o un disc compartit en una xarxa LAN, també és possible crear directament el lloc web en un servidor web.
 
A continuació, crearem un lloc web, partint de zero, a manera d'exemple. El lloc serà per a una escola que anomenarem "Les Oliveres":
 

1. Anem a Arxiu I Nou I Web i triem l'opció Web buit.
 

2. Un cop fet això es crearan automàticament les carpetes images i _private i apareixerà una pàgina en blanc. Nosaltres començarem per tancar aquesta pàgina en blanc i anirem a la vista exploració.
 

3. Un cop a la vista exploració fem clic al botó dret i seleccionem Nova Pàgina. Un cop creada, si fem doble clic, automàticament passarem a la vista pàgina. Encara en la vista exploració, fem clic dret sobre la nova pàgina que vam crear i seleccionem Nova Pàgina altra vegada, creant així una pàgina secundària.
 

4. Si fem clic dret sobre cada pàgina i triem Canviar nom podrem col·locar un títol ala pàgina (que és diferent al nom d'arxiu). Posarem "Les Oliveres" a la primera pàgina i "Claustre" a la segona.



5. Podem, d'aquesta manera, definir tota l'estructura del nostre lloc per després tenir llistes totes les pàgines per treballar. Una característica important és que si fem clic a una pàgina i sense deixar-la anar l'arrosseguem, veurem una línia puntejada que uneix la mateixa amb la seva pàgina superior, i al moure-la, podrem col·locar-la en qualsevol altra posició, modificant així l'estructura del lloc.
 

6. Un cop fet això, si fem doble clic sobre una pàgina, passem a la vista pàgina per començar a introduir el contingut.
 

7. Quan guardem una pàgina (amb l'opció Arxiu I Desa), aquesta es guarda com un arxiu.htm. Si anem a la carpeta de Windows on estem armant el lloc veurem que l'arxiu de pàgina té la icona del nostre explorador, i si l'obrim, no s'obrirà en FrontPage, sinó en el navegador. Per obrir el fitxer per editar-hem d'obrir FrontPage i triar l'opció Arxiu IObrir i buscar la pàgina que volem editar. Si per contra volem obrir el lloc sencer (és més recomanat per veure-ho complet) hem de triar Arxiu I Obrir web amb el que distingirem a les carpetes de llocs web, de les altres perquè tenen una icona d'un globus terraqüi. No obstant això, les carpetes de llocs web es veuran com carpetes comuns si la busquem des de Windows.
 

8. Finestra Obrir Web : veiem que les carpetes de llocs tenen una icona diferent. Per obrir-les, seleccionem la que volem, i fem clic a Obre dues vegades. És molt importantque quan guardem una pàgina o qualsevol altre arxiu del nostre lloc (imatges, sons), no utilitzem en el nom del mateix, cap caràcter amb accent ni la lletra "Ñ", ja que quan la vulguem publicar, ens serà rebutjada.
 

5. Donar format a les pàgines: Donar format a les pàgines és una tasca molt senzilla de realitzar amb FrontPage ja que disposa d'eines molt similars a les de qualsevol processador de text com Word. Només hi caben alguns aclariments. Quan vam iniciar una nova pàgina, apareix al menú de fonts Font defecte, i en el de grandària, Normal.Això es refereix a la font i la mida configurats al navegador predeterminat d'Internet que es tingui instal·lat. Si per exemple tenim Internet Explorer i la font per defecte que té configurada (a Opcions d'Internet del Panell de Control) és Times New Roman, llavors aquesta serà la font per defecte de FrontPage, però un cop publicada la pàgina, cada persona veurà la pàgina amb el tipus de lletra i mida que tingui configurada en el seu navegador.
 
Perquè no succeeixi això, i que tots vegin la pàgina amb la lletra que nosaltres vam triar, hem de triar una font del menú, diferent de la predeterminada.
Seguirem ara amb la construcció de la nostra pàgina d'exemple:
Per triar un color de fons per a la pàgina anem a Format I Fons o bé Format I Propietatsi fem clic a la pestanya Fons. Un cop allà podem triar el color de fons, el color del text, dels hipervincles, podrem optar per posar una imatge de fons que es multiplicarà en mosaic, o bé prendre la informació del fons d'una pàgina que bé podria ser la principal.
 
Imatge de fons: Si optem per col·locar una imatge de fons haurem de seleccionar la casella Imatge de fons i després seleccionar-fent clic al botó Navega. Si seleccionem a més la casella Marca d'aigua, la imatge de fons romandrà fixa, mentre que el text o el contingut de la pàgina es podrà desplaçar amb les barres de desplaçament.
 


 
 

Per canviar el color de les lletres hem de seleccionar el text i triar el nou color a la barra d'eines (el símbol d'una A amb una ratlla a sota). També es poden editar totes les opcions de format del text al menú Format I Font.
En FrontPage es creen les sagnies fàcilment utilitzant els botons de sagnat de la barra d'eines Format. El botó de l'esquerra disminueix la sagnia i el de la dreta l'augmenta. Per crear llistes numerades o vinyetes, Frontpage posa a la nostra diposició els següents botons a la barra d'eines Format. El botó esquerre crea llista numerada i el dret vinyetes.
 
Si en escriure, ens sembla exagerat l'espai entre paràgraf i paràgraf, podem incloure un salt de línia pressionant MAJÚS + INTRO
 
Per inserir una línia horitzontal, al qual ens és útil per separar seccions o títols, anem a Insereix/línia horitzontal. Si després fem doble clic a la línia, s'obrirà el quadre de diàleg amb les propietats de la mateixa.
 
Una eina molt útil per a treballar amb el format és Copiar format (al costat de l'eina Pegar). Si ja tenim un text amb el format que desitgem aplicat i volem aplicar el mateix format a un altre paràgraf, hem de prendre l'eina Copiar format, seleccionar el primer text (la part que conté el format a copiar, pel que pot ser solament una lletra) i després, (veuran que encara tindran el cursor amb l'eina activa) ombrejar tot el text al qual li volem aplicar el format. Si desitgen aplicar format diverses vegades, han de fer doble clic en seleccionar l'eina, i per desactivar-la, premin la tecla Esc.
 
6. Les Taules
En l'edició de pàgines web les taules no només tenen el seu ús habitual (llistes, fulls, etc.), sinó que també s'utilitzen per alinear el text, els gràfics, barres d'exploració; la qual cosa ens dóna moltes possibilitats per a un disseny elegant. Però el més important és que si col·loquem el nostre text dins de taules podrem estar tranquils que apareixeran sempre on ho hem col·locat.
Les cel·les es poden combinar i dividir, es pot fer que les vores siguin visibles o invisibles, es poden crear taules una dins l'altra i un munt de possibilitats més.
 

1. Per a crear una taula, anem al menú Taula I Insereix I Taula. Apareix el quadre de diàleg Insereix Taula on hem d'especificar el nombre de files i columnes. L'alineació de la taula pel que fa a la pàgina pot ser dreta, esquerra, centre o justificada. La mida de la vora pot fer-se zero perquè aquest no sigui visible al navegador, aquesta opció ens és útil per quan volem alinear text, gràfics o escriure en dues o més columnes i que no es vegin les vores de la pàgina. Podem especificar un ample determinat en percentatge o en píxels (recomanem 80%), si no ho fem, podrem modificar després manualment.També podrem trobar el marge de les cel·les i l'espai que hi ha entre elles.

2. Un cop creada la taula poden combinar dues o més cel·les que seleccionem mitjançant l'opció Combinar cel·les al menú Taula.

3. Si el que volem és dividir una cel·la en files o columnes haurem de triar Dividir cel·les.

4. També es poden inserir noves files o columnes mitjançant l'opció Inserir I Files ocolumnes. Si triem Insereix I Taula crearem una taula dins d'una altra, la qual cosa de vegades ens pot arribar a ser força útil.

5. En el quadre de diàleg. Propietats de la taula, es poden modificar moltes característiques de la mateixa; per arribar al quadre cal fer clic dret sobre la taula i seleccionar Propietats de taula  al menú emergente.Algunas de les característiques que podem editar són: l'alineació (dreta, esquerra, centrada o justificada) respecte a la pàgina, si el ample es va a especificar o s'ajustarà al contingut de la taula, el marge de les cel·les (l'espai des de la vora de la mateixa), l'espaiat entre cel·les, la mida de les vores (recordin que ample zero és una vora invisible en l'explorador però si es veu durant l'edició). També es pot triar un color de fons per a tota la cel·la o una imatge. Si el que desitgen és un color per a cada cel · la (o imatge) han de triar color de fons en el quadre de Propietats de cel·la.

6. El quadre de diàleg. Propietats de cel·la és similar al de la taula solament que en aquest cas només afectarem a la cel·la seleccionada o aquella on estigui el cursor. Per arribar al quadre es procedeix de la mateixa manera que abans, fent clic dret. Una característica important és la d'alineació vertical, amb el que se'ns permet alinear el text o les imatges a les parts superior, inferior o central de la cel·la (veure exemple).


 
7. Bordes compartits

Els border compartits són molt útils ja que són un espai de la pàgina que es repeteix en totes les pàgines i pro això pot usar-se per a mostrar la barra de navegació del nostre lloc web. Es poden col·locar amunt, avall a la dreta i ala esquerra. També pot usar-se per col·locar el logotip d'una empresa, l'adreça de correu electrònic o el telèfon a final de cadascuna de les pàgines del seu lloc web Caldria agregárselo pàgina per pàgina? No. Utilitzant les vores compartits, n'hi haurà prou amb escriure aquesta informació una sola vegada i especificar que es copiï, en el mateix lloc, a cada pàgina del lloc. Per inserir una vora compartit, anem a Format I Bordes Compartits, immediatament ens apareixerà el quadre de diàleg Bordes Compartits.
 


També tenim l'opció d'incloure els botons d'exploració en la vora triat.
 
8. Tema

Una manera senzilla i prática de donar un disseny personalitzat a la nostra web és a través dels temes. Els temes són un conjunt d'opcions que ens ofereix FrontPage per donar un format a les nostres pàgines. Aquest format suposa una sèrie de colors dels botons de navegació automàtica, fons, text, etc. Per aplicar un tema es prem amb el botó dret sobre la pàgina i es selecciona tema. Ens apareix una finestra com la següent:
 


Al principi apareix la pantalla en blanc i diu que "aquesta pàgina no utilitza tema", però pel que fa seleccionem algun tema com en l'exemple de dalt apareix en què consisteix.Es pot aplicar un tema diferent a cada pàgina, però cal anar amb compte amb això perquè l'efecte pot ser una mica xaró pel que és millor utilitzar un tema per tot el web o diferents temes, però amb molt de compte
 
9. Les Imatges

En treballar amb imatges en un lloc web és important saber que els arxius que es manegen a Internet són de dues classes: els.jpg i els.gif, tots dos són arxius d'imatge comprimits. Els primers s'utilitzen per a fotografies, les quals en utilitzar aquest format comprimit, ocupen menys memòria al cost de baixar una mica la qualitat. El format.gif, s'utilitza per a títols, logotips, i gràfics amb menys de 256 colors. També es poden usar per a fotos però la qualitat serà pitjor. A diferència del format jpg, el gif no fa disminuir la qualitat de la imatge.

9.1. Inserint Imatges El procés per inserir una imatge és molt simple:

9.2. Sobre el Mida de les imatges: Com s'ha comentat amb anterioritat, la mida dels arxius gràfics en una pàgina web ha de ser petit per optimitzar el temps de descàrrega de la pàgina. Si obrim la imatge en algun editor com Adobe Photoshop o Microsoft PhotoEditor, hem de triar veure la imatge al 100% per saber com és la mida real de la imatge que es veurà a la pàgina. Amb això aconseguirem un major control de la mateixa.

Un altre aspecte important és que mai és convenient inserir una imatge gran i després fer-la més petita mitjançant els controladors de la mateixa (Ios petits quadradets que apareixen a les vores per canviar la mida), ja que si fem això, es fa més petita la imatge que es veu en pantalla però no la mida del fitxer. Per canviar la mida es deu obrir la imatge en l'editor i modificar el zoom fins la grandària desitjada. Si fem servir Microsoft PhotoEditor el procés és anar a Imatge/Canviar la mida i fixar-se que NO estigui titllada la casella Permetre distorsió un cop fet això, variem el percentatge d'Alt o Ample.

9.3. Ubicació
Per ubicar la imatge amb precisió hem de punxar sobre la imatge amb el ratolí prement el botó dret a "Propietats/Disseny" En aquest quadre, hi ha diferents opcions on ubicar la imatge.


 
10. Corno Organitzar els Arxius

A l'hora d'organitzar els arxius disposem de l'opció de crear carpetes perquè no se'ns barregin tots en la llista de carpetes. El nostre lloc s'ha creat en una carpeta determinada, i dins d'aquesta carpeta FrontPage va crear dues més: _private i images. És convenient que totes les imatges les guardem a la carpeta images. Quan guardem una pàgina que conté imatges, se'ns preguntarà on la volem guardar i si volem canviar-li el nom.
 
11. Creació d'hipervincles

Els hipervincles, també coneguts com a enllaços, enllaços o links, són connexions entre dos arxius. Podem inserir un enllaç en una paraula, frase o imatge, de manera que en fer clic sobre aquesta, l'explorador obri una nova pàgina o un nou arxiu.

1. Per inserir un enllaç a una pàgina o arxiu del nostre lloc web, primer escrivim la paraula o frase corresponent, la seleccionem i anem a Insereix I Hipervincle, o bé premem en la icona d'un globus terraqüi amb una cadena a la barra de eines. En el quadre de diàleg, apareixerà una llista dels arxius del nostre lloc, triem un i pressionem D'acord. Després veurem que la paraula apareixerà subratllada en un color diferent. Podem canviar el color dels enllaços al menú Format I Propietats.

2. Per inserir un enllaç a una adreça (URL) d'un altre lloc o pàgina web d'Internet, l'escrivim al requadre URL. Igualment, si escrivim aquesta direcció a la vista pàgina, FrontPage la reconeixerà com a tal i crearà un enllaç automàticament, el mateix succeirà amb les.Direccions de correu electrònic.

3. Per inserir un enllaç a un arxiu que estigui emmagatzemat en el nostre ordinador, fem clic a la icona d'una lupa amb una carpeta, el segon a la dreta, i busquem l'arxiu.Posteriorment, FrontPage crearà una còpia d'aquest arxiu que es guardarà a la nostra carpeta web.

4. Per inserir una adreça de correu electrònic, hem de fer clic a la icona del sobre (el tercer a la dreta) o escriure en el requadre de Direcció URL: mailto: nombre@servidor.com, és a dir la paraula "mailto" seguida de dos punts i la direcció a la qual volem vincular.

5. i finalment, si volem crear un link a una pàgina nova (que encara no ha estat creada), fem clic a la quarta icona, amb un dibuix d'un full de paper en blanc, i s'obrirà una pàgina llista per a ser editada (tot i que no es guarda fins que pressionem Desa).

6. Per inserir un hipervincle a una imatge es procedeix de la mateixa manera que si es tractés de crear un enllaç a text.


Una altra classe d'hipervincles són els anomenats marcadors, els quals uneixen diferents punts d'una mateixa pàgina. Són molt útils per a les pàgines llargues. Per inserir un marcador primer seleccionem qual va ser el punt de destinació a la pàgina, situem el cursor aquí i anem a Insereix I Marcador. Apareix el quadre de diàleg dels Marcadors i se'ns demanarà un nom qualsevol per al mateix. Un cop fet això, premem D'acord.

Posteriorment anirem al lloc de la pàgina on inserirem l'hipervincle, i com vam fer abans, seleccionem la paraula, frase o imatge i seleccionem Inserir 1 hipervincle. 

Al quadre de diàleg fem clic al menú desplegable Marcador i vam triar el nom del marcador que hem creat (pot haver-hi molts en una mateixa pàgina). Si per contra, des d'una altra pàgina volem arribar a aquest marcador en particular, en lloc que arribem ala part superior, hem de seleccionar primer la pàgina de la llista i després, sense pressionar Acceptarseleccionem el marcador.
 
12. Publicar amb FrontPage

Quan estiguem preparats per mostrar la nostra web al World Wide Web o en la intranet de l'organització, hem de publicar-ho. La publicació d'un web consisteix bàsicament a copiar els arxius del web al punt de destí, un servidor web per exemple, on altres persones podran explorar-los. Abans de publicar la nostra web, hem d'assegurar que funciona correctament: comprovant els hipervincles, assegurant-nos que les pàgines tenen l'aspecte adequat i provant el web per assegurar-nos que tot funciona. Podem veure una vista prèvia en el navegador de Web, explorar el lloc i comprovar l'estat dels arxius.

Un cop comprovat el correcte funcionament del nostre web el procés de publicació amb FrontPage és una tasca molt simple, consistent en: amb el lloc obert i totes les pàgines guardades, anem a Arxiu I Publicar, a continuació se'ns demanarà l'adreça web del lloc, així com el nom d'usuari i contrasenya, i una vegada completats aquests camps i pressionat el botó transferir el traspàs d'arxius és automàtic quedant d'aquesta manera el nostre web publicat.

 

Anem a començar