Embed Size (px)
Citation preview
Manual Introductorio deMicrosoft FrontPage
FrontPage es un editor visual de páginas Web
de fácil manejo y que nos permitirá crear y modificar nuestras páginas sin
necesidad de saber programación y de una forma intuitiva. Es muy similar a un
procesador de texto (Word, por ejemplo), y si echamos un vistazo a su pantalla
principal, veremos que tiene muchas de las opciones y botones de cualquier
procesador de texto.
Para comenzar vamos a echar un vistazo al lugar de trabajo (worksheet) de FrontPage y las posibilidades que nos ofrece.
- Las vistas en FrontPage -
FrontPage nos da la posibilidad de tener diferentes vistas para organizar y
administrar nuestro sitio web.
Vista exploración
Vista informes
Vista carpetas (directories)
Vista hipervínculos (hyperlinks)
Vista tareas
Vista página
Vista exploración : Es tal vez donde mejor podemos visualizar el sitio (web
site), ya que nos muestra su estructura en forma de organigrama, donde
tenemos en la parte superior la página principal (con un icono de una casita) y
debajo de ésta, todas las páginas secundarias ramificadas. Podemos colocar
nuestras páginas, o no, en la vista exploración (arrastrándolas de la lista de
carpetas o seleccionando nueva página con el menú del botón derecho del
mouse) pero si alguna no se coloca, esta no aparecerá en las barras de
exploración que coloquemos en las páginas (una barra de exploración es una
lista automática con hipervínculos a las demás páginas).
Vista Informes : En esta vista podremos obtener una serie de datos muy útiles
para nuestro sitio como páginas lentas, archivos no vinculados, archivos nuevos,
hipervínculos rotos, etc.
Vista carpetas : es donde podemos ver las diferentes carpetas en donde
guardamos los archivos. Generalmente nos conviene organizarlos para trabajar
más ordenados, por ejemplo, las imágenes las guardamos todas juntas en una
carpeta; también podemos guardar una sección entera de nuestro sitio en una
carpeta diferente. Es importante no confundir la estructura de exploración con la
estructura de las carpetas ya que no tienen porqué ser iguales. Como podemos
ver el modo de carpetas es totalmente familiar a la del explorador de Windows.
Podemos revisar el contenido de cada directorio haciendo click sobre él en el
panel izquierdo de la ventana, el contenido se mostrará en el panel derecho.
Vista hipervínculos : Nos muestra cada página con sus hipervínculos entrantes
y salientes. Esto nos permite controlar el flujo de información, pues con esta
presentación visual vemos claramente la forma en que las visitas pueden
navegar en nuestro web. También podemos controlar la consistencia de todos
los hipervínculos.
Vista tareas : Aquí podemos organizarnos las próximas tareas que iremos a
realizar en nuestro sitio o en algún archivo determinado. Es una especie de
agenda.
Vista Pagina : esta es la vista donde se arma y se da formato a la página, como
se verá, el proceso es similar a editar un documento en Word, ya que las
herramientas son parecidas.
Dentro de la vista página podremos observar que existen tres lengüetas (tabs):
Normal ,HTML y Vistaprevia.
La vista Normal es en donde editamos nuestra página, es decir, donde
podemos agregar el texto, gráficos, etc.
La vista HTML, nos es útil para cuando tenemos que hacer alguna
modificación en el código de la página. Muchos sitios web ofrecen la
opción de darnos contadores o banners de intercambio, y nos pueden
enviar por e-mail, el código html que debemos agregar a nuestra página.
Para hacer esto, debemos copiar dicho código en la vista HTML. Para
ubicarlo con precisión coloquen el cursor en la vista Normal en donde
quieren que aparezca el contador o el banner, y luego en la vista HTML,
aparecerá en el mismo lugar; presionen Edición / Pegar (Edit/Paste) y se
copiará el código. Puede ser que en algunas ocasiones tengan problemas
y que el código se copie como un texto para leer en la vista Normal o
Vista previa; para evitar esto, copien el código al bloc de notas (texto sin
formato con extensión .txt) y luego vuelvan a copiarlo, recién ahí péguenlo
en la página.
Por último la Vista previa nos da una idea de como se va a ver la página
en el explorador, aunque algunos elementos, como contadores o
formularios, deben estar publicados en Internet para que funcionen
correctamente.
- Estilos de texto -
Como en cualquier otro procesador de texto, en FrontPage es posible atribuir
estilos al texto, de forma que se destaque un título, un subtítulo, un párrafo de
texto normal, etc.
ENCABEZADOS (HEADERS): Son estilos utilizados para títulos,
subtítulos y comienzos de apartado. Existen hasta seis niveles de
encabezados, numerados del 1 al 6, según su nivel de importancia dentro
del documento. El estilo de encabezado 1 utiliza el tipo de letra más
grande de todos ellos, el encabezado 2 uno menor, pero mayor que el
encabezado 3 y así sucesivamente. La característica común que poseen
todos los estilos de encabezado es que utilizan textos en negrita.
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
Las etiquetas HTML para estos estilos de encabezado son <h1>... </h1>, <h2>...
</h2>, así sucesivamente desde el h1 hasta el h6.
TEXTO NORMAL: Además de los estilos de encabezado, entre los estilos
básicos de FrontPage está el texto normal. Es el estilo que se usa para
escribir el contenido de las hojas.
- Dando formato al texto -
Hay otros estilos básicos de FrontPage, pero no hay que olvidar que en la barra
de herramientas Formato de Texto (Format Text) podemos dar el formato que
queramos al texto de nuestra página web, cambiar el tipo de letra, tamaño, color,
estilo negrita, estilo cursiva, subrayado, alineación...
La manera en que FrontPage define el tamaño de letra difiere un poco de la
forma en que en la que estamos habituados a hacerlo en un procesador de
texto, donde se especifica el tamaño por puntos. En FrontPage existen 7
tamaños de letra numerados del 1 al 7 y correspondiendo el tamaño normal al
número 3. El tamaño 1 es el más pequeño y el 7 es el mayor.
Este texto está escrito con el tamaño 1 en FrontPage (8 puntos en un procesador de texto)
Este texto está escrito con el tamaño 3 en FrontPage (12 puntos)
Tamaño 6 en FrontPage (24 puntos)
El uso de tipos de letra en páginas web supone un gran avance en las
posibilidades de diseño, pero tiene la contrapartida de que sólo es posible su
utilización en versiones actuales de los exploradores. Además, puede ocurrir que
la computadora que se esté visualizando el documento no disponga de un tipo
de letra dado, por lo que el explorador usará el tipo de estándar y se perderá el
formato y el diseño con que fue concebida la página.
- Listas -
Con FrontPage también podemos crear listas con viñetas, o listas numeradas.
Para crear una lista con viñetas (bullets) o una lista numerada (numbered),
seguiremos los mismos pasos que cuando lo hacemos en el procesador de texto Microsoft
Word.
Ejemplo de lista con viñetas
Ingredientes:
Media libra de café puro.
1 tirita de cáscara de limón.
4 cucharadas de azúcar extrafina.
Crema batida espesa
Ejemplo de lista numerada
Preparación:
1. Disolver el azúcar en el café
caliente añadiendo la cáscara de
de limón.
2. Dejar enfriar y sacar la tira de
limón.
3. Poner a congelar en cubetas,
removiendo cada 30 min, hasta
obtener una textura espesa de
nieve granulada.
4. Servir en vasos altos cubriendo
con la crema batida espesa.
Pero FrontPage ofrece otras posibilidades a la hora de crear listas:
Listas de directorio: su apariencia es similar a la lista de viñetas.
Listas de menú: es conveniente su uso para crear listas con
hipervínculos, cuando lo que se desea es formar un posible menú de
opciones.
Listas de definición: su aspecto es muy dependiente del explorador web
que utilicemos. Apropiada cuando se expone la definición de varios
términos.
- Las imágenes -
Una de las formas más eficaces e impactantes de transmitir la información a
través del WWW es hacer uso de imágenes que las representen. Este uso
puede ir desde el empleo de la imagen como información en sí misma (por
ejemplo, un museo virtual) a ser un simple motivo de decoración.
FrontPage da grandes facilidades para el manejo de imágenes, desde su
elección y manipulación, hasta su gestión dentro del sitio web. Además incluye
un catálogo de imágenes distribuidas por categorías, disponibles para ser
incluidas en las páginas.
- Formatos de archivos de imágenes -
El formato de una imagen es la forma de empaquetarla, es decir, la manera en
que se codifica y se almacena dentro de un archivo. Existen muchos formatos
distintos, sin embargo, la necesidad ha impuesto un estándar, que ha sido
definido por la aceptación de gran parte de los usuarios de la red. Estos dos
formatos son:
GIF (Graphics Interchange Format): Permite almacenar los gráficos con
256 colores (color de 8 bits). Se utiliza para títulos, logotipos, y gráficos.
También se pueden usar para fotos pero la calidad será peor. A diferencia
del formato jpeg, el gif no hace disminuir la calidad de la imagen.
Entre las propiedades a destacar de este formato son:
Transparencia: Marca uno de los 256 colores como transparente
haciendo que en su lugar no se dibuje nada, respetándose de esta
forma el fondo de la página. Es muy usado para eliminar el color de
fondo de las imágenes consiguiendo un efecto de flotación sobre el
fondo.
Entrelazado: Cambia la forma de almacenar el gráfico, en vez de
almacenar sus líneas secuencialmente lo hace de forma alterna,
con una pequeña distancia entre ellas. De este modo, al descargar
la imagen lo primero que llega son esas líneas alternas que
colocadas convenientemente en su lugar producen un efecto de
"cortina" que permite ver un avance del aspecto final de la imagen
en baja resolución.
JPEG (Joint Photographic Expert Group): es un formato de codificación
de imágenes de alta definición. Entre sus muchas cualidades se
encuentra la de poder almacenar imágenes en color de hasta 16.777.216
colores (color de 24 bits o "color verdadero"). Según el grado de
compresión variable variará el tamaño del archivo y la calidad de la
imagen de una forma inversamente proporcional, por lo que habrá que
buscar la relación calidad/tamaño más adecuada.
Veamos la diferencia entre los dos formatos de archivo:
Formato jpeg (jpg)
Formato gif
- Gifs animados -
El formato GIF89a permite almacenar secuencias de
imágenes (imágenes animadas). Se conocen como gifs animados.
- Insertar una imagen -
Insertar una imagen en nuestra página web es muy sencillo con FrontPage.
Podemos hacerlo desde Insertar / Imagen / Desde archivo... o bien desde el
icono de la barra de herramientas estándar.
El tamaño de los archivos gráficos en una página Web debe ser pequeño para
optimizar el tiempo de descarga de la página.
- Los fondos -
Una página web va a dar al mundo una primera impresión de su creador. Ello supone que la presentación que le dé ha ser lo más cuidada posible y a de adaptarse a lo que se quiera exponer. Una parte fundamental de este aspecto
general de la web son las propiedades de la página, éstas incluyen características tales como el título, el fondo, los colores del texto...
En el cuadro de diálogo Propiedades de página / Fondo podemos definir y
cambiar la apariencia visual de nuestra página.
IMAGEN DE FONDO: se puede utilizar una imagen como fondo.
Normalmente se tratará de un dibujo que define una textura. Ésta será
colocada en forma de mosaico sobre la ventana del explorador. Haciendo
click en Examinar podemos seleccionar la imagen de fondo desde el web
actual, desde el disco duro o de la galería de imágenes de FrontPage.
En la próxima página se puede apreciar un ejemplo de una imagen de fondo
MARCA DE AGUA: se trata de una característica propia del browser
Microsoft Internet Explorer. El efecto que produce es que el texto y las
imágenes de la página web flotan sobre el fondo que permanece fijo.
También se ha añadido a esta página el efecto marca de agua.
FONDO Y TEXTO: en estos dos campos podremos indicar el color de
fondo, que sólo será visible en caso de no poner una imagen de fondo, y
el del texto de la página (texto, hipervínculo, hipervínculo activo e
hipervínculo visitado).
- Las tablas en FrontPage -
Un elemento fundamental y de gran utilidad en las páginas web son las tablas.
Una tabla está formada por filas y por columnas de celdas, donde podemos
introducir cualquiera de los componentes habituales de una página web como
texto, imágenes, formularios e incluso otras tablas.
Con una tabla se puede situar cada elemento en el lugar de la página que se
desee; basta con dividir la página o parte de ésta con la tabla y situar los
elementos en las casillas (celdas) que más se ajusten a nuestro diseño. Así es
posible mostrar el texto en párrafos paralelos y columnas, distribuir texto
alrededor de una imagen, poner márgenes en las coordenadas deseadas, etc.
- Creación de tablas -
Antes de crear una tabla se debe pensar cuál va a ser su uso y qué
características se le quieren dar, aunque luego podamos modificarla a nuestro
antojo.
La creación de tablas en FrontPage es similar a la de Word.
En el cuadro de diálogo Insertar tabla podemos decidir el número de filas y
columnas que tendrá nuestra tabla; en qué parte de la página queremos situarla;
el tamaño del borde (el tamaño viene definido en pixels); podemos controlar
además la distancia entre el contenido de las celdas y sus bordes interiores o el
espacio entre éstas; también podemos definir el tamaño que queramos que
tenga la tabla. A la hora de definir el tamaño de la tabla podemos hacerlo de dos
maneras:
Una vez activada la casilla de Especificar ancho:
En pixels: hace referencia a unidades absolutas. Le dice al explorador
web que el valor de ancho está en pixels y éste reservará un espacio fjo
en la pantalla.
En porcentaje: es lo más flexible ya que declara el tamaño en unidades
relativas al ancho de la ventana del explorador web.
Hay otro método de insertar tablas y es utilizando el icono de la barra de
herramientas estándar.
- Creación de hipervínculos -
Un hipervínculo o enlace, en el contexto de creación de páginas web, es un
código que posee un documento de hipertexto que le dice al programa
navegador que de ahí se puede saltar a otro recurso que está disponible en
algún lugar del www.
Antes de nada, haremos una pequeña clasificación de los tres tipos de
hipervínculos que encontraremos al trabajar con FrontPage:
HIPERVÍNCULOS INTERNOS: diremos que los hipervínculos son
internos cuando hagan referencia a páginas web u otros recursos que
estén situados dentro de nuestro web.
MARCADORES: son zonas que definimos dentro de una página web a
las que es posible hacer que los hipervínculos apunten. Es decir, puede
haber hipervínculos que apunten a una parte dentro de la misma página o
a una parte situada dentro de otra página.
HIPERVÍNCULOS EXTERNOS: son hipervínculos que hacen referencia a
páginas o recursos que están contenidos fuera de nuestro sitio web.
Para crear un hipervínculo en nuestra página seleccionaremos con el ratón una
parte del texto, una imagen o un objeto insertado desde donde queremos que
sea llamado el recurso al que hace referencia y, o bien desde el icono , o
bien desde el menú principal Inserta / Hipervínculo.
En el cuadro de diálogo Crear hipervínculo, seleccionaremos el destino de
nuestro hipervínculo:
Si se trata de una página del WWW (Hipervínculos externos).
Si se trata de una página de nuestro web (Hipervínculos internos).
Si el enlace es a una dirección de correo electrónico
(automáticamente se abrirá el administrador de correo que tengamos
configurado con la dirección requerida en el hiperenlace).
Si lo que queremos es crear una página nueva en nuestro web.
Si el hipervínculo que estamos creando hace referencia a un marcador ya
establecido lo seleccionaremos en el campo Marcador.
En el campo Marco de destino podemos seleccionar si queremos que el destino
de nuestro hipervínculo se abra en la ventana actual, en una nueva o en un
marco.
- Publicación de una página -
El propósito que tenemos al confeccionar una página web es, por supuesto, el
de publicarla y ponerla a disposición de todo el mundo.
No podemos colocarla directamente en la red, pues necesitaríamos disponer
para nosotros solos de un servidor, es decir, un computador conectado
permanentemente con Internet y dotado de un programa específico, lo que
supone una gran inversión económica y unos elevados conocimientos técnicos.
La solución es instalarla en un servidor conectado a la WWW (World Wide Web:
la telaraña mundial).
Los distintos canales para colocar una página en la red son:
Los servidores de las instituciones oficiales y académicas a sus
miembros, para la difusión de información relacionada con esos
organismos.
Los proveedores comerciales de acceso a Internet (ISP Internet Service Provider), que ceden frecuentemente a sus usuarios un espacio
determinado en sus servidores para que puedan colocar sus páginas
personales, bien sea gratuitamente o por una tarifa determinada.
Las empresas comerciales que, sin ser proveedores de Internet, se
dedican a alquilar espacio para la colocación de páginas de carácter
personal o comercial, en Puerto Rico algunas son: AYUSTAR.NET,
COQUI.NET o ISLA.NET
Ciertos servidores que conceden de una manera gratuita espacio para la
colocación de páginas personales. Uno de los más populares es
Geocities.
- Transmisión FTP -
Una vez confeccionada en nuestro disco duro la página web, y estando ya lista
para ser colocada en el servidor, surge la cuestión de cómo proceder para
enviarla.Esto se hace generalmente utilizando un programa de FTP (Programa
de envío y recepción de ficheros (archivos)). Pero dependerán de cada servidor
las instrucciones pertinentes a dicho envío.En cualquier caso FrontPage cuenta
con un servicio de FTP.
El método de este protocolo difiere del HTTP en que el acceso al servidor
requiere una fase de identificación del usuario y una contraseña para el inicio de
la sesión. Aunque más tarde se inventaron los servidores FTP anónimos, a los
que se puede acceder utilizando un nombre de usuario anonymous o ftp y
usando una dirección de correo electrónico como contraseña.
FrontPage nos da la posibilidad de hacer pública la información que deseemos a
través de FTP. Lo único que necesitamos es el nombre del servidor donde se
deben ubicar los archivos de nuestra página, el directorio y la contraseña (ésta
nos será proporcionada por el servidor a la hora de solicitar el espacio para
colocar nuestra web).
Los pasos a seguir son Archivo / Publicar Web...
En el cuadro de diálogo Publicar Web deberemos especificar la dirección FTP.
Tenemos, además, la posibilidad de publicar todas las páginas de nuestro web o
tan sólo aquéllas que han sido modificadas.
- Promoción de una página -
No basta con colocar nuestra página en la Red. Por muy interesante que sea su
contenido, y por bien diseñada que esté, para que los demás puedan acceder a
ella tienen que tener conocimiento de su existencia. Es una labor nuestra la de
promocionar la página, es decir, darla a conocer por todos los medios posibles.
Es paso más eficaz para esto es dar de alta nuestra página en sitios del Web
especializados en almacenar y organizar direcciones. Estos sitios sirven como
base de datos a donde acude la gente en búsqueda de información sobre dónde
encontrar las páginas del Web deseadas. Además, dar de alta una página en los
buscadores es totalmente gratuito.
Estos sitios pueden funcionar de dos maneras distintas:
Pueden estar organizados como directorios, es decir, catalogan las
páginas por su contenido en categorías y subcategorías. Para darse de
alta en ellos, es necesario situarse primero en la categoría apropiada al
contenido de nuestra página. Estos sitios sólo contienen las páginas de
quienes se hayan dado de alta en ellos de manera voluntaria.
Otros sitios, los llamados motores de búsqueda (search engines) actúan
de una forma completamente distinta. Utilizan unos programas (llamados
comunmente robots o arañas) que tienen la misión de rastrear
continuamente el Web en búsqueda de páginas nuevas o renovadas.
Para ello, van navegando de URL en URL a través de los enlaces que
encuentran en las páginas, con la intención de catalogar el máximo
número de ellas. Si uno de estos robots visita nuestra página web,
grabará el texto completo de cada una de las páginas. De esta manera,
todas las palabras de todas las páginas de nuestro sitio son incorporadas
a su base de datos.
Nosotros podemos facilitar la labor a los motores de búsqueda para que
cataloguen correctamente nuestra página web. Veamos algunos consejos:
1. Utilizar palabras clave dentro de la etiqueta <title>, haciendo que sea lo
más descriptivo posible, porque cuando un motor de búsqueda presenta
una página concreta como resultado de una búsqueda, lo hará
reproduciendo las palabras que ha encontrado dentro de la etiqueta
<title> de esa página.
2. Utilizar etiquetas <meta>. Estas etiquetas se colocan en la cabecera de la
página (entre <head> y </head>) que sirven para suministrar una
información detallada del contenido de un página, con lo que se obtiene
un control mayor de cómo será catalogada. Hay diferentes tipos de
etiqueta, pero las que más nos interesan son las que hacen referencia a
la descripcion (description) de la página y la que presenta las palabras
clave (keywords) con las que la gente buscará una página.
3. Poner un resumen del contenido de la página en el comienzo del texto,
puesto que hay motores de búsqueda que utilizan las primeras 25
palabras del texto de una página a modo de presentación de su
contenido.
4. Utilizar el atributo ALT en las imágenes iniciales. El atributo ALT permite
poner un texto a la imagen, que será visto únicamente por quienes utilizan
los navegadores en forma de sólo texto y hay motores de búsqueda que
toman en cuenta el texto que encuentran de esta manera en las imágnes
(sobre todo las iniciales) para hacer una descripción del sitio o para
suministrar las palabras clave.
Algunos de los buscadores más populares son:
Está estructurado por categorías y secciones, es de los más utilizados.
El motor de búsqueda más utilizado en Internet. Un excelente portal que reune
muchos servicios, opciones de búsqueda y un índice muy amplio de sitios web.
Este motor de búsqueda no es de los más viejos en el web, pero sus excelentes
resultados y opciones de búsqueda, destacando su clasificación por idiomas y
su cache de páginas viejas lo han ido colocando entre los mejores del momento.
Otro gran portal con muchos recursos y un interesante sistema de búsqueda.
Laboratorio Nº 1
Objetivo : Formato al texto, párrafo, viñetas, numeración, bordes y sombreados, fondos de página.(El usuario debe tener Instalado en su PC. Front Page 2000)
Nota: Siga la secuencia paso a paso, mayormente todo será vía menú.
1.- Cargando el Sistema desde Windows 98/2000:
Haga Click en Menú:
Inicio (Start) Programas (Programs)
Office 2000 Microsoft Front Page 2000
* Carga
completada (Esto debe estar observando en su pantalla
2.- Creación de una Página Libre
Nos proponemos ahora a crear una Página Web, para lo cual Ud. Escriba lo siguiente:
Bienvenidos a mi Primera Página Web
Ahora: FORMATO AL TEXTO
1. Seleccionar el texto anterior, Centrar.2. Dar clic en el menú Insertar y Clic en Línea Horizontal.3. Dar clic en menú Formato, Clic en Fuente:
Fuente : VerdanaEstilo : NegritaTamaño : 18 ptsColor : AmarilloEfectos : Versales
Hecho lo anterior escribir el siguiente párrafo:
En esta página daré a conocer mis Aficiones, Mis sitios favoritos en Internet, Algunas fotos de mi Familia y algunas otras inquietudes mías, espero les guste.
Ahora: FORMATO AL PARRAFO Y FONDO DE PAGINA
1. Seleccionar el párrafo anterior2. Dar clic en menú Formato, Clic en Fuente:
Fuente : ArialEstilo : Negrita CursivaTamaño : 12 ptsColor : Blanco
3. Luego Dar Clic en el menú Formato, Clic en Fondo4. En la sección Colores, elegir Fondo Negro, Texto Blanco.5. Dar Clic En menú Formato, Clic en Párrafo.
Alineación : IzquierdaSangría :
Antes del texto : 20Después del texto : 40
Espaciado : Antes de : 30Después de : 30Interlineado : Sencillo
Hecho lo anterior escribir lo siguiente, a continuación del párrafo 1:
Mis AficionesInternet
AjedrezMúsica
Ahora: NUMERACIÓN Y VIÑETAS
1. Seleccionar Mis Aficiones, darle Formato:
Arial, Negrita, 14 pts, Subrayado, Celeste.
2. Seleccionar las Aficiones:
Fuente : Comic Sans MS, Cursiva, 12 pts, Fucsia
3. Luego Dar Clic en el menú Formato, Clic en Viñetas y Numeración4. En la Ficha Viñetas, elegir una de las viñetas.
A continuación escribir lo siguiente:
Mis Sitios FavoritosPanamericanaEl ChatTerra Perú
5. Seleccionar Mis Sitios Favoritos, darle Formato: Negrita, 14 pts, Subrayado, color celeste.
6. Seleccionar los sitios favoritos:
Fuente : Comic Sans MS, Cursiva, 12 pts, Verde
7. Luego Dar Clic en el menú Formato, Clic en Viñetas y NumeraciónEn la Ficha Numeración, elegir una de las numeraciones.
Ahora : BORDES Y SOMBREADOS
1. Seleccionar el primer párrafo2. Dar Clic en menú Formato, Bordes y Sombreados3. En la ficha Bordes, Dar clic en Cuadro, Estilo Doble, Color Verde, ancho 5
pts.4. Luego Colocar un sombreado, color celeste.5. Ahora Cambiar todos los formatos a la página, de acuerdo a tus gustos.
Muy bien, Ahora procederemos a guardar nuestra primera Pagina Web, para ello, damos Clic en el menú Archivo, luego en Gardar Como y Cambiar el titulo de la pagina, dando Clic en el botón Cambiar, escribe : Pagina de...Tu nombre y tu Apellido.Tu primera página debe quedarte mas o menos así:
Ver la siguiente Figura
¿Cómo mejoro el aspecto de mi página?
Podemos mejorar nuestra página insertando una imagen como fondo, añadir imágenes prediseñadas, dibujos, formas, objetos de word-art, cambiar el tamaño y apariencia de las imágenes, crear imágenes como miniatura, crear una galería de imágenes, videos, etc.
Para añadir un fondo necesitamos ir al menú de Format >Background, nos aparecerá la siguiente ventana donde podemos escoger el o los colores que nos ofrece FrontPage, e incluso podemos poner una foto como fondo con tan solo marcar el cuadro de Background Picture y posteriormente activar Browse para buscar la imagen que se desea de fondo.
-Insertar Hipervínculos
Para insertar una liga en Microsoft FrontPage 2002 necesitamos ir al menú de Insert > Hyperlink
Nos aparecerá la siguiente ventana la cual sirve para hacer ligas a documentos ya existentes o directamente a una dirección de una página web ya creada
También podemos hacer una liga dentro del mismo documento, solo tenemos que dar click al icono de Place in This Document, nos aparecerá la siguiente ventana donde aparecerán los Bookmarks definidos en la misma:
Otra de las opciones es hacer una liga a un NUEVO DOCUMENTO dando clic en Create New Document
E incluso también podemos hacer ligas a direcciones de correo, únicamente damos clic al ícono de E-mail Address
Insertar Bookmarks
En Microsoft FrontPage 2002 tenemos la posibilidad de manejar bookmarks, es decir, nos da la opción de navegar dentro de una misma página; para hacer esto tenemos que irnos al menú de Insert > Bookmark a un lado de la palabra a la cual queremos ligar.
Nos aparecerá la siguiente ventana en la cual le damos un nombre a nuestro bookmark.
Una vez que hayamos insertado el bookmarks a la palabra que queremos ligar nos aparecerá un icono de una banderita como lo muestra la siguiente imagen
¿Cómo asigno un titulo a una página web?
Cada página de un sitio web se almacena en su propio archivo. A medida que vaya construyendo un sitio web, irá familiarizándose con su estructura y no tendrá dificultades para identificar las páginas a partir de sus nombres de archivo. Sin embargo, los visitantes del sitio esperarán que sus páginas tengan nombres mas intuitivos y es aquí donde entran en juego los títulos de página.
El título de página es el texto que verán los visitantes del sitio en la barra de estado cuando la página este abierta en el explorador
El título de la página no tiene que ser igual que el nombre del archivo, ni siquiera tiene que ser similar.
Al guardar una página nueva, FrontPage 2002 sugiere un título de página que refleje la primera línea del texto contenido en la página. Si esta sugerencia no es la adecuada podemos cambiar el título sugerido por uno diferente. Podemos cambiar el título de página desde el menú de File> Save As> aparecerá la siguiente ventana
Se activa la opción de Change title... y en la ventana que aparece se modifica el título.
Programación Javascript, Java, PHP y ASP (I)Vamos a ver cómo se pueden incluir programas en nuestras páginas
web. Aunque el objetivo de este curso no es este, vamos a explicar un poco qué posibilidades tiene el usuario para programar sus propias páginas web y de incluir alguno de los programas disponibles gratuitamente en la red.
Javascript. ¿Qué es? ¿Para qué sirve?
Javascript es un lenguaje de programación creado en sus orígenes por Netscape para ampliar las posibilidades del HTML. Gracias a él, podemos incluir pequeños programas que se ejecutan en el ordenador del usuario, permitiendo cierta interactividad entre el usuario y la página web. Por ejemplo, si tenemos un formulario que el cliente ha de rellenar, podemos desarrollar un Javascript que se encargue de verificar que todos los datos son correctos y de avisar al cliente si falla alguno, antes de enviar el formulario.
Así ahorramos tráfico innecesario de páginas web. Javascript debe ser soportado por el navegador. Debido a que existen diversas versiones, es posible
que nuestro navegador o el del usuario no soporte la versión de Javascript que usemos. En ese caso, el código de Javascript es ignorado.
Javascript. Mini-manual.
Los scripts de Javascript son insertados en la página web de la misma forma que escribimos código HTML, por tanto es posible programar con cualquier editor de textos o desde la vista HTML de FrontPage. Debemos indicarle al navegador dónde se encuentra el script con las etiquetas <SCRIPT> y </SCRIPT>. Veamos un ejemplo:
<HTML> <HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAJE="Javascript"> document.write("<H1>Esto es una cabecera.</H1>"); </SCRIPT>
</BODY> </HTML>
Primero le indicamos al navegador que el lenguaje del
script será Javascript (existen otros lenguajes de script
menos populares). Para ello lo indicamos con
LANGUAJE.
Después escribimos el código (en rojo) dentro de las
etiquetas <SCRIPT>.
Este script muestra por pantalla un texto de cabecera:
Esto es una cabecera
Pero lo que da sentido a un script es la posibilidad de asociarlo a un evento. Un evento se da cuando se abre una ventana, cuando se cierra, cuando el usuario pulsa un botón, etc. Es un mensaje que el sistema operativo le pasa al navegador, diciéndole el usuario ha hecho algo.
Vamos a ver un ejemplo sencillo: al pulsar en un botón, se abre una ventana. Para ello nos aprovecharemos de algunas funciones y objetos que nos proporciona Javascript: el objeto window, que representa la ventana del navegador, y la función onclick(), que nos permite abrir ventanas.
<HTML><HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY> <TABLE> <tr> <td width="85%" align="center">
<input type="button" value=" Ver ejemplo " name="B9" style="font-family: arial" onClick = "window.open('pagina_pruebas.htm','ayuda','resizable=yes,scrollbars=yes,
menubar=yes,width=300,height=250')">
</TABLE>
</BODY></HTML>
Este script muestra un botón. Al hacer clic en él, muestra otra página en otra ventana aparte. El script ya viene
implementado en el navegador, y se asocia al botón con onClick(). window.open abre una nueva ventana,
y pasa como parámetros al navegador varios valores que configurarán la ventana (resizable: que pueda
cambiar de tamaño, width y height: el tamaño (ancho, alto), etc).
Pulsa el botón y comprueba que funciona
Javascript. Adaptar el Javascript a la página.
Existen multitud de scripts en Javascript gratuitos disponibles en la red. Pero, ¿cómo usarlos en nuestras páginas? Generalmente un código en Javascript se divide en dos partes: la que va entre las etiquetas <HEAD> y las que va entre las etiquetas <BODY>.
Las primeras son puro código, mientras que las segundas especifican a qué se aplica el código de las primeras. Por tanto, no importa mucho donde coloquemos el código que va entre las <HEAD> siempre que allí. En cambio, el código que va entre las <BODY> se aplicará a un objeto (o creará uno nuevo) y hemos de colocar el código justo donde lo necesitemos. Todo esto suele ir explicado en la página web dónde obtenemos el código.
Tomemos por ejemplo el siguiente código de una página web personal (a la izquierda). Vamos a insertar un código Javascript (a la derecha) que saluda a nuestros visitantes, variando el texto según la hora del día. En la web se nos pide que insertemos el código en las entre etiquetas <BODY>.
<HTML> <HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<p>Bienvenido a mi web personal.</p>
</BODY> </HTML>
<script LANGUAGE="JavaScript"> var dt = new Date();var hr = dt.getHours();var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches");msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg);msg=" <H2> "+msg+" !</H2>";document.write(msg); </script>
La forma correcta de insertar el código (siempre desde la vista HTML) es la siguiente:
<HTML> <HEAD><TITLE>Esto es el titulo</TITLE></HEAD>
<BODY>
<script LANGUAGE="JavaScript"> var dt = new Date(); var hr = dt.getHours(); var msg = ((hr<12) ? "Buenos dias" :"Buenas Noches"); msg = ((hr>11)&&(hr<19) ? "Buenas Tardes" : msg); msg=" <H2> "+msg+" !</H2>"; document.write(msg); </script>
<p>Bienvenido a mi web personal.</p>
</BODY> </HTML>
Programación Javascript, Java, PHP y ASP (III)
JAVA. ¿Qué es? ¿Para qué sirve?
Java es un lenguaje de programación creado por Sun Microsystems. Es gratuito y podemos encontrarlo en la web de Sun (en inglés): http://java.sun.com, y además en otros muchos sitios.
Java permite desarrollar programas que se ejecutan de la misma manera en cualquier plataforma. No debemos confundir Javascript con Java. Java es un lenguaje multipropósito que nos permite hacer programas completos. No obstante, en Internet se suelen usar pequeños programas de Java llamados applets. Los applets deben ser soportados por el navegador o no serán visualizados. Al igual que con el Javascript, existen distintas versiones. Un applet debe ser compilado y ejecutado, por lo que puede ser un tanto lento de visualizar.
Los applets se escriben en el código html, dentro de las etiquetas <APPLET></APPLET>, a su vez dentro de las etiquetas <BODY>. Los applets utilizan unos objetos denominados clases, que se encuentran en archivos terminados en .class. Por ejemplo, para incluir un applet que usa la clase miapplet.class escribiremos:
<APPLET CODE=miapplet.class></APPLET>
¡Todo applet debe ser incluido junto con los archivos .class que necesite en el mismo directorio. Si no, el applet no funcionará!
JAVA. Adaptar el applet a la página.
Afortunadamente FrontPage nos permite incluir de forma automática las etiquetas que necesitemos. Para insertar un applet hacemos clic en Insertar Componente Web
Controles avanzados Subprograma Java. Pulsamos en finalizar.
Aparecerá la siguiente ventana, en la que tenemos que rellenar los parámetros que necesita el applet para funcionar.
Origen del subprograma: Aquí podremos el nombre del archivo que contenga la clase Java.
Dirección URL base del subprograma: Si el archivo no está en el mismo directorio que la página, debemos escribir aquí donde está con la dirección de Internet completa.
Mensajes para exploradores no
compatibles con Java: Algunos navegadores no soportan o no tienen instalado Java. Escriba aquí un mensaje para avisar al usuario.
Diseño y Tamaño: Escriba aquí los parámetros del objeto Java en cuanto a tamaño, alineación y espaciado.
Parámetros de subprograma: Aquí tenemos que poner los distintos parámetros que el applet necesita para funcionar. Para ello haremos clic en Agregar e iremos escribiendo
los parámetros y sus valores uno a uno. Supongamos que tenemos un applet llamado CreditRoll.class con el parámetro BGCOLOR:
<applet code="CreditRoll.class" width="330" height="200"><param name="BGCOLOR" value="0088ff"></applet>
Para insertarlo seguimos los pasos ya explicados, y al pulsar en Agregar nos aparece la siguiente ventana:
En Nombre escribimos el nombre del parámetro (etiqueta name), y en Datos el valor (etiqueta value). Pulsamos en Aceptar.
Así, iremos haciendo lo mismo con todos los parámetros que necesite el applet.
Vamos a usar el applet para crear un cuadro con texto en movimiento, bastante atractivo. En la web del autor se nos dice que el applet tiene los siguientes parámetros:<applet code="CreditRoll.class" width="330" height="200"><param name="BGCOLOR" value="0088ff"><param name="FADEZONE" value="30"><param name="FONTSIZE" value="25"><param name="REPEAT" value="yes"><param name="SPEED" value="100"><param name="TEXT1" value="Hola, bienvenido "><param name="TEXT2" value="a mi página web personal. "><param name="TEXT3" value="Podrá encontrar toda clase"><param name="TEXT4" value="de información. Tan sólo debe "><param name="TEXT5" value="pulsar en los enlaces "><param name="TEXTCOLOR" value="333333"></applet>
Según el autor, en los parámetros TEXT escribimos que queremos que
salga en el cuadro. Lo hacemos personalizando así el applet.
Veamos como queda:
JAVA. Errores comunes.
El error más usual ocurre cuando el applet no encuentra el archivo de la clase (o clases) que necesita. Esto hace que no funcione, dejando un cuadro vacío en la página. Podemos saber si esto ocurre pasando el ratón por el cuadro del applet. En la barra de estado del navegador debería poner algo así como Subprograma iniciado si lo encuentra y el applet funciona, y XXXX no encontrado si no funciona el applet (donde XXXX es el nombre de la clase que no logra cargar).
PHP y ASP. ¿Qué son? ¿Para qué sirven?
PHP y ASP son dos lenguajes de programación que permiten generar HTML de forma dinámica. Es decir, con estos lenguajes creamos programas que crean páginas web dinámicas.
La forma tradicional (como la que enseña este curso) consiste en crear páginas web estáticas. Esto significa que siempre que un usuario carga su página, ve la misma página. Por tanto, si queremos hacer algún cambio para que lo vea el usuario, hemos de editar la página y subirla al servidor de Internet donde se aloje.
Esto es ideal para una página web personal o de una pequeña empresa, donde la web no es muy grande o no varía mucho. Pero, ¿y si tiene que variar una página cada día? Pongamos por caso una tienda de Internet. Una página estática puede mostrar los productos y un formulario para hacer pedidos, pero ¿y sí se acaban los artículos? ¿y si cambian de precio? Lo mismo podemos decir para una web de un periódico, o de una gran empresa. El número de páginas puede llegar a ser muy grande, y el trabajo y tiempo perdido en modificarlas cada vez que haya un cambio puede ser enorme. ¿Por qué no dejar que un ordenador haga el trabajo por nosotros?
Por eso PHP y ASP mezclan programación con HTML, pero el resultado final es siempre una página web. Ambos tienen un gran potencial, pueden trabajar con bases de datos y servidores web, son eficientes y nos ahorran mucho trabajo.
ASP es un lenguaje propiedad de Microsoft, mientras que PHP es un
lenguaje de desarrollo libre.
