Frontpage 2000 Parte 1

Curso de iniciación al diseño web de expertosdelweb.com

Microsoft

F r o n t P a g e 2000

http://www.expertosdelweb.com/

Prohibida la copia o reproducción - Todos los derechos reservados

1. Presentación del programa 3

2. Crear una web 4

3. La primera página 5

4. Propiedades de página 6

5. Las tablas y las celdas 9

6. Ejercicio 1: primera parte 11

7. Los hipervínculos 13

8. Los marcadores 15

9. Ejercicio 1: segunda parte 16

10. Las imágenes 17

11. Imágenes de fondo 20

12. Crear la estructura de la web 22

13. Navegación automática 23

14. Los temas 25

15. Páginas de marcos 26

16. Ejercicio 1: tercera parte 30

17. Mailto 31

18. Los formularios 32

19. Ejercicio 35

20. Las hojas de estilo 40

21. Html dinámico 42

22. Publicar en la Red 43

23. Como insertar sonido (y video) 48

245. Java Scripts 54

25. Cómo hacer archivos que se puedan bajar desde una web 55

26. Cómo crear archivos .zip y .exe con WinZip 57

1. Presentación del programa

Las páginas web están basadas en los que se llama el hipertexto. Word, por ejemplo, es un procesador de textos y el producto final está previsto para imprimirlo. Se trata de un texto lineal, es decir, que se comienza por la primera línea del primer párrafo y se acaba en la última línea del último párrafo. En el hipertexto no hace falta seguir el documento de forma lineal, sino que se establecen saltos (hipervínculos) de forma que cada vez que encontramos alguno de ellos podemos ir a otro sitio de la página. Por esta razón son documentos que se crean para ser vistos en pantalla.

Las páginas web sirven para preparar materiales en este formato y ser utilizados con los navegadores de Internet y también para ser publicados en Internet.

Frontpage es del grupo de Microsoft Office y en la versión 2000 aparece junto con Word, Access, Excel, etc. El entorno que ofrece es muy parecido a Word y se trabaja igual en líneas generales. Ya iremos viendo las opciones que puedan ser diferentes.

Hasta hace poco las páginas web había que hacerlas escribiendo el código html y comprobando el resultado en un navegador. Pero con el tiempo fueron apareciendo programas wysiwyg (what you see is what you get), es decir, que se puede trabajar directamente sobre los resultados finales.

En la creación de páginas web Frontpage 2000 es uno de estos programas que nos permite trabajar directamente sobre los resultados finales. También sigue manteniendo la posibilidad de trabajar con el código, que es necesario cuando se trabajan con opciones más avanzadas en la creación de páginas web como, por ejemplo, con javascript.

En las tres pestañas que aparecen en la parte inferior de la ventana de trabajo podemos ver:

• Normal: Es el modo edición de trabajo en la que se trabaja la página y todas las modificaciones que necesite.

• HTML: Es donde aparece todo el código de la página y que podemos también modificarlo. Frontpage va creando el código de forma automática.

• Vista previa: Es el resultado de la página, es decir, tal como se vería en Internet Explorer, ya que ambos programas pertenecen a Microsoft. Este mismo resultado lo podemos ver directamente en el navegador con el icono .

La forma en que funcionan las páginas es a través del código, que es ASCII. Este código es el que viaja por las líneas telefónicas y cuando llegan al navegador de un ordenador, éste lo interpreta y muestra los resultados. Nosotros vamos a trabajar en modo normal, pero para quienes les interese profundizar en el lenguaje html pueden encontrar en Internet manuales completos.

2. Crear una web

Para crear una web hay ir a Archivo / nuevo / web. Se nos abre la siguiente ventana:

En esta ventana aparecen diferentes asistentes para crear o importar webs. Para verlos cómo funcionan, cuando se tenga tiempo uno puede dedicarse a probar. Nosotros vamos a seleccionar la última de las opciones que se nos ofrece que es un "Web vacío".

En la ventanita de la derecha donde pone "Especifique la ubicación del nuevo Web" hay que elegir el lugar donde queremos tener la(s) página(s). Para ello habrá que crear las carpetas que queramos para contener la página. Lo que aparece después de la última barra (\) es el nombre que le ponemos a nuestra página.

Cuando hayamos escrito la ubicación deseada, aceptamos y en unos momentos Frontpage crea la estructura mínima necesaria para la web. Esto lo podemos ver haciendo click sobre el icono , que se encuentra debajo de insertar. Este icono abre y cierra una partición de la pantalla en la que podemos ver la lista de carpetas y archivos que forman la web. La estructura básica es la siguiente:

Al principio aparece la ubicación que hemos dado a la página y después dos carpetas vacías. La llamada "images" es para guardar todas las imágenes. Y la llamada _private es para guardar cosas que no se publicarán en Internet.

Por supuesto podemos cambiar el nombre de las carpetas, eliminarlas, etc.. simplemente situándonos encima de la carpeta o de la página web y con el botón derecho del ratón seleccionar la opción deseada.

3. La primera página.

Cuando creamos la web, directamente se nos queda en pantalla una página nueva para empezar a trabajar. Al igual que en Word, Frontpage va dando a las páginas nuevas que creamos el nombre de página_nueva 1, 2, 3, etc., hasta el momento que la guardamos que es cuando hay darle el nombre que queramos.

Al guardar la página, que lo podemos hacer al principio, Frontpage nos va a pedir un nombre de archivo y además un nombre de título de página. Al dar a guardar se nos abre la siguiente ventana:

En esta pantalla hay que dar un nombre de archivo y en "Cambiar..." un título de página. El nombre de archivo tiene que respetar ciertas reglas:

• No se admiten espacios en blanco, sí guiones bajos.

• Sólo se admiten letras del alfabeto inglés, es decir no se admiten ni eñes ni acentos.

• Es mejor no utilizar mayúsculas porque algunos servidores Unix dan problemas.

En el título se puede utilizar cualquier cosa: espacios, eñes, acentos, mayúsculas, etc.

La primera página de la web, es decir, desde donde se parte para navegar por toda ella, siempre se guarda con el nombre de index, home o defaul. Frontpage utiliza el nombre de index.

4. Propiedades de página

Tenemos que tener en cuenta que el diseño de páginas web, está pensado para mostrarse en pantalla, por lo que es importante trabajar los colores y los fondos de página y que estos no sean de colores muy vivos, sobre todo si vamos a escribir bastante texto, porque esto cansa la vista de nuestros visitantes y probablemente terminen por abandonar nuestro sitio web. Esto es bastante importante a la hora de diseñar webs.

En Frontpage para acceder a las propiedades de cualquier elemento hay que pulsar con el botón derecho sobre el elemento y nos aparece una ventana con la opción deseada. Así, si pulsamos sobre cualquier parte de la página con el botón derecho podremos seleccionar propiedades de página, que nos abrirá la siguiente ventana:

Si seleccionamos la segunda pestaña (fondo), vemos que podemos seleccionar para el fondo de la página en primer lugar alguna imagen. Si la imagen es pequeña, ésta se repite indefinidamente como fondo de la página. Pero esto lo veremos más detenidamente cuando hablemos de imágenes. Normalmente una página se diseña a 800 Pixels de ancho x 600 Pixel de alto, aunque también podemos hacer paginas con tablas e indicarle el porcentaje que queremos que ocupe el contenido de la pagina en pantalla, sea cual sea el tamaño de pantalla que tenga establecido nuestro visitante: 640x480, 800x600 o 1024x768 pixeles. De este modo, el contenido se adapta al área de pantalla de forma automática.

Las otras opciones que vemos son seleccionar el color de fondo, de texto y de hipervínculos (enlaces a otras paginas).

Para seleccionar un color pulsamos sobre el botón que aparece a la derecha de cada opción y nos muestra la siguiente ventana:

En esta ventana se nos muestra una paleta de 16 colores y aquellos que hemos ido guardando para utilizarlos en otras ocasiones.

Si pulsamos sobre más colores se nos abre otra ventana con 256 colores como el que se muestra en el siguiente en el dibujo siguiente.

En esta ventana podemos seleccionar uno de los colores que aparecen, pero si aún queremos más colores podemos pulsar sobre el botón que pone "personalizado" y se nos abre otra ventana con 16.000.000 de colores como aparece en el siguiente dibujo o también seleccionar... un color que se encuentre en pantalla, utilizando el cuentagotas.

Aquí seleccionamos un color y en la barra vertical de la derecha se puede seleccionar el matiz de ese color. También se pueden memorizar los colores si pensamos que vamos a utilizarlos posteriormente.

Una vez seleccionado un color, aceptamos todas las ventanas y el color lo tenemos disponible en la página.

Hay que tener en cuenta que para fondo se utilizan colores suaves donde destaque el texto,

...