Curso Front Page Parte II

Curso de iniciación al diseño web de
expertosdelweb.com
Microsoft
F r o n t P a g e 2000
Segunda parte
http://www.expertosdelweb.com/
Prohibida la copia o reproducción - Todos los derechos reservados
Diseñando webs con Microsoft Frontpage 2000 www.expertosdelweb.com
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........................................................................................................................ ..........................30
18. Los formularios........................................................................................................................... .......31
19. Las hojas de estilo..................................................................................................................... ........34
20. Html dinámico.................................................................................................................. ..................36
21. Publicar en la Red...................................................................................................................... ........37
22. Como insertar sonido (y video)...................................................................................... ..................39
23. Java Scripts................................................................................................................................... .....44
24. Cómo hacer archivos que se puedan bajar desde una web................................... .......................45
25. Cómo crear archivos .zip y .exe con WinZip................................................................ ...................46
29
17. Mailto
Se llama así porque crea un código html que pone mailto.
El mail-to se trata de un texto o icono que al pulsar sobre él se abre el programa de correo
(por ejemplo: Microsoft Outlook) que tiene nuestro ordenador con una ventana “mensaje
nuevo” dispuesto para escribir y en la que aparece en el campo “Para:” la dirección de
correo a la cual usted enviará su mensaje. Nosotros aprenderemos a continuación a
realizar un hipervínculo a nuestro correo eletrónico, para que esa persona pueda
enviarnos un mensaje a nosotros. Los hipervínculos se pueden hacer tanto a un texto
como a una imagen:
CORREO
Para ello se selecciona el elemento que nos va a abrir el programa de correo electrónico
(Outlook, eudora, etc...) y se pulsa el icono de hipervínculo y se nos abre la siguiente
pantalla:
Entonces se pulsa en el sobre que aparece a la derecha de dirección URL y se nos abre
la ventana siguiente:
30
Se escribe la dirección de correo a la que se quiere que llegue el correo y se aceptan las
dos pantallas. Así de fácil...
Hay que reseñar que para que esa persona nos pueda enviar el correo, deberá tener
configurado en su programa de gestión de correo (Outlook) al menos una cuenta. Si no
sabe configurar cuentas: http, Pop3... lo puede aprender en nuestro Master y contando
con soporte técnico.
17. Los formularios

Los formularios se utilizan en las webs para recoger información del visitante. Éste puede
escribir libremente en los campos que se le presentan o seleccionar una opción de las
que se le ofrecen.
Para crear un formulario, en cualquier parte de la página o dentro de una tabla

(aconsejable: primero crear una tabla de 1x1 y dentro de la tabla..., se va a Insertar /
formulario / cuadro de texto de una línea o cualquier tipo de campo que se quiera utilizar.
Entonces en modo normal, nos aparece un rectángulo con una línea entrecortada como la
siguiente:
El rectángulo primero en blanco es un campo de texto de una línea y luego hay dos
botones, uno de enviar y otro de restablecer, es decir, borrar todo lo que se tiene escrito
en el formulario.
El formulario, será todo lo que se escriba dentro de la línea punteada. No incluya campos
fuera de la linea entrecortada del formulario puesto que no se recibirán los datos. Para
ello, al igual que en Word se van creando los espacios necesarios y poniendo los títulos
que queramos a los campos. Un ejemplo de formulario creado sobre una tabla de una
celda, para poder darle un fondo diferente y destacarlo, podría ser el siguiente.
Nombre Apellidos
31
Dirección Ciudad C.P.
Bebida que toma
Tu opinión sobre esta web
El primer paso sería pensar los campos que queremos crear y colocarlos en el formulario
con un nombre. Se aconseja ir creando filas y en cada una de ellas, ir incluyendo nuevas
tablas con el numero de columnas que necesitemos: una para el mensaje, otra para
separar y una tercera por ejemplo, donde incluiremos el campo del formulario.
Una vez creado el formulario tenemos que ir dándoles los nombres que queramos que
aparezcan cuando recojamos los resultados. Para ello hay que ir por todos los campos
pulsando con el botón derecho y seleccionando propiedades de campo de formulario.
Entonces se nos muestra la siguiente ventana:
Esto es lo que nos ha aparecido en el primer campo de "Nombre", entonces en la primera

línea deberíamos poner Nombre porque si no nos aparecerá lo siguiente cuando
recibamos el formulario por correo electrónico:
T1=pepito perez -Evidentemente, seria más correcto: Nombre=pepito perez
Para poner los nombres de campo hay que respetar las normas de html, es decir, no se
admiten acentos, ni eñes, ni espacios en blanco. Así, por ejemplo habría que escribir
bebida_preferida, tu_opinion, etc.
Una vez puestos los nombres que queramos ver en los resultados, tenemos que pulsar
con el botón derecho sobre formulario y seleccionar propiedades de formulario. Nos
aparece la siguiente ventana:
32
Si nosotros dejáramos el formulario con estas opciones, sólo sería válido si nuestra web
está puesta en un servidor que tiene extensiones de Frontpage. Podríamos poner una
dirección de correo electrónico y elegir un archivo para que nos recoja los resultados. Lo
que ocurre es que contratar las extensiones de Frontpage suele costar dinero y los
servidores gratuitos no las tienen.
Para poder utilizar un servidor gratuito o sin extensiones de Frontpage tenemos que
pulsar en "enviar a otra" y después en el botón "Opciones". Entonces se nos abre la
siguiente pantalla que la tenemos que rellenar como la muestro:
• Acción: Hay que poner mailto, dos puntos y la dirección de correo electrónico
donde se van a recibir los resultados. Todo esto sin espacios en blanco, acentos, ni
eñes.
• Método: Se selecciona POST
• Tipo de codificación: text/plain. Le estamos diciendo que nos lo mande en texto
sencillo, es decir, sin ningún tipo de formato.
Una vez hecho esto aceptamos todas las ventanas y el formulario está listo para
funcionar.
Ahora convendría realizar un formulario en la web de la zapatería en la que utilicemos

diferentes tipos de campos para ver cómo se crean. Una vez que realicemos todos los
33
pasos, hay que comprobarlo a ver cómo funciona. Si no tenemos un correo electrónico
todavía nos abrimos uno gratuito en www.hotmail.com
18. Las hojas de estilo

Las páginas de estilo sirven para aplicar un mismo formato a todas las páginas que se
desee. Pueden proporcionar, por ejemplo, tipos de letra, fondos de página, formato de
viñetas, diferentes estilos a los tipos de encabezado, etc.
Frontpage tiene diferentes hojas de estilo. Para poder utilizarlas hay que ir a archivo /
nuevo / hojas de estilo y se nos muestra la siguiente pantalla:
En esta ventana podemos encontrar una breve descripción de lo que hace cada página.
Así, por ejemplo, si nos interesa la hoja de estilo denominada "Arcos", la aceptamos y se
nos abre una página que está en código html. Guardamos esta página con el nombre de
arcos como una hoja de estilo, es decir que tiene la extensión css.
Una vez que la tenemos guardada en nuestra web podemos utilizar la hoja de estilo. Para
ello creamos una página nueva en blanco y nos vamos a formato / vínculos de hojas de
estilo. Esto nos abre una pantalla como la siguiente:
34
Pulsamos en agregar y seleccionamos arcos.css y aceptamos. Entonces se nos aplicará

el estilo. Al principio sólo veremos el fondo de la página que es amarillo claro, pero según
utilicemos los diferentes estilos de título, viñetas, hipervínculos, etc, iremos viendo los
resultados.
Si esto lo hacemos con las diferentes páginas que componen la web, nos irán quedando
con el mismo estilo. Estos mismos apuntes están hechos utilizando hojas de estilo.
Conociendo un poco de código html podemos cambiar características de las hojas de

estilo, e incluso crear nuestras propias páginas de estilo. Pero esto escapa a las
pretensiones de este manual elemental. De todas formas lo puede intentar quien le
interese porque no es muy complicado.
El único problema de las hojas de estilo es que es un recurso típico de Microsoft y lo

reconocen los navegadores Explorer 4 y posteriores, pero Netscape, al menos por el
momento, no reconoce la hoja de estilo y no muestra sus resultados.
19. Html dinámico

El Dhtml se trata de las últimas tendencias que se quieren aplicar al html. En este punto
nos encontramos con diferencias cuando se ve la página con los diferentes navegadores.
Frontpage nos ofrece algunas posibilidades para crear Dhtml, pero hay que tener en
35
cuenta que sólo funcionará con las últimas versiones del Navegador Explorer y que no
siempre funcionan en Netscape.
Un ejemplo de Dhtml, seria el intercambiar dos imágenes cuando el ratón pasa por
encima, o el aplicar algún cambio de color, tamaño o tipo de letra cuando pasamos el
ratón por encima de un texto:
Para crear efectos Dhtml hay que tener visible la barra de Dhtml. Para ello, al igual que en
Word, se pulsa con el botón derecho sobre cualquiera de las barra de herramientas y
seleccionamos efectos DHTML. Se nos muestra la siguiente barra:
A partir de aquí se selecciona un trozo de texto o una imagen y en "elegir evento" se

selecciona una de las opciones. Después se nos van activando los siguientes botones y
seleccionamos una de las opciones que nos ofrecen y ya está el efecto creado.
Hay que tener en cuenta que cuando se trata de una imagen que va a cambiar, las dos
tienen que tener el mismo tamaño, si no la segunda se adaptará al tamaño de la primera.
Los efecto no se ven en vista normal, sólo en vista previa o en el navegador.
Estos efectos son interesantes si los vamos a utilizar con Explorer 5. Pero si los vamos a
publicar hay que comprobarlo en los diferentes navegadores para ver que funcionen como
queramos.
20. Publicar en la web
Frontpage tiene su forma propia de publicar una web en Internet con el icono . Pero
esto sólo vale para servidores con los que se han contratado extensiones de Frontpage.
36
La mejor forma de publicar sin contratar estas extensiones, que cuestan dinero, es a
través de FTP, utilizando un programa de FTP: CuteFtp, Ws_ftp, etc...
FTP, son las iniciales en ingles de protocolo de transferencia de ficheros. Para ello lo
primero que hay que hacer es contratarse un espacio gratis en cualquiera de los servicios
que se ofrecen ahora mismo: iespana (recomendado), terra, inicia, wanadoo, alehop,
galeon, etc.
Estos contratos que se hacen a través de rellenar un formulario sencillo, nos dan una
cuenta de correo y un espacio gratis en la Red. Por ejemplo, iespana no pone limite de
espacio, aunque como contraprestación al servicio gratuito, nos colocan una barra
publicitaria o hemos de solicitarles un popud una vez obtenido el espacio gratuito. Para
ello, pónganse en contacto con la propia empresa.
Una vez contratado el espacio tenemos que buscar un programa de FTP que también sea
gratuito y bajarlo de Internet. El más utilizado se llama Cute ftp o bien el WS FTP. Lo
podemos encontrar en diferentes sitios, por ejemplo, en www.softonic.com
En esa dirección buscamos ws_ftp y en los resultados seleccionamos WS_FTP LE (32-

bit) que es el gratuito. Nos bajamos el programa a nuestro disco duro o a un disquete y
después lo instalamos.
Cuando abrimos el programa nos aparece la siguiente pantalla:
Lo primero que hay que hacer es crear nuestra cuenta con los datos que nos ha dado el
servidor. Para ello hay que tener clara la dirección a donde debemos dirigirnos (Host
Name/Address), el nombre de usuario (user ID) y la contraseña (password) que pusimos
cuando nos solicitamos nuestro espacio gratis.
Si los datos son correctos, en unos instantes se nos abre la siguiente pantalla:
37
La pantalla de la izquierda es nuestro ordenador y la de la derecha el espacio que nos

dejan en el ordenador conectado a Internet. En la pantalla de la izquierda nos vamos a
donde está nuestra web y seleccionamos todos los archivos que componen la web y con
la flechita los pasamos al otro ordenador.
Por el sistema de FTP sólo hace falta pasar la carpeta de imágenes y los archivos de
texto. El resto sirven si se está utilizando navegación automática y para que funciones con
extensiones de Frontpage.
Hay que mantener el mismo esquema que tenemos en nuestra página. Si, por ejemplo,
las imágenes están dentro de una carpeta habrá que colocarlas en una carpeta con el
mismo nombre. Si no respetamos el mismo esquema no funcionará bien la página porque
el código html remitirá a un lugar que si no se llama igual y está en el mismo nivel nos
aparecerá la típica pagina en el navegador: 404 page not found (pagina no encontrada).
Una vez que el programa nos diga que se han pasado correctamente los archivos de una
lado a otro, ya se pueden ver publicados en Internet. Cada vez que hagamos algún
cambio en una página habrá que subir la página completa.
Si realiza cambios en alguna pagina es muy probable que no se haya actualizado en la

ventana de nuestro programa de ftp, por ello, es muy importante que actualicemos (F5) la
parte correspondiente a nuestro disco duro (parte izquierda).
Es importante recordar que las imágenes son independientes del documento de texto y
que, por tanto, habrá que subirlas de forma independiente.
Este apartado es un tanto complejo, si necesita ayuda en el master tenemos ayuda on-
line para guiarte paso a paso, hasta ver publicada su pagina en internet.
38
21. Insertar sonido en la página

Hay que partir que la inclusión de sonido en una página implica que la carga se relentiza.
Es por este motivo, por el que es una opción en desuso.
La inserción de sonido y video funciona de una forma muy parecida. Los archivos de
video que se admiten en las web tienen las extensiones .avi las que son de Microsoft
Vídeo para Windows y .mov o .qt los de Apple.
Los archivos de sonido son de muchas más clases porque se han utilizado desde hace
mucho más tiempo. Los más habituales son los siguientes:
• .wav de Microsoft.
• .snd y .mac de sonido Macintosh.
• .au de audio de Sun.
• .mid o . midi que sólo se utilizan para música.
Para utilizar un sonido en una página nos encontramos con las siguientes posibilidades:
• Incrustar un sonido que lo reproduzcan Internet Explorer y Netscape Navigator:

Permite al usuario reproducir un sonido a voluntad. Equivale también a incrustar un
video. (ver ampliación: 1)
• Configurar un sonido de fondo para usuarios de Internet Explorer y Netscape

Navigator: Reproduce un sonido cuando se carga la página. (ver ampliación: 2)
• Configurar un sonido de fondo únicamente para usuarios de Internet Explorer. (ver

ampliación: 3)
• Crear un enlace a un archivo de sonido, de forma que el usuario lo descarga y

posteriormente un programa en el ordenador del usuario lo reproduce. (ver
ampliación: 4)
(1) Incrustar un sonido para Internet Explorer y Netscape Navigator

Por este sistema vamos a conseguir incrustar un sonido en los dos navegadores más
importantes y que el usuario pueda reproducirlos a voluntad utilizando el programa que
utiliza cada navegador para ello. Cuando lo hayamos insertado nos encontraremos con
los siguientes iconos en las últimas versiones de los navegadores:
39
El primero en Explorer y el segundo en Navigator. él tamaño de los iconos se puede hacer

más grande o más pequeño como cualquier imagen.
En Explorer se oirá el sonido al cargar la página una sola vez y si se quiere volver a
escuchar hay que pulsar en el triángulo que aparece en la parte inferior izquierda.
En Navigator no se oye el sonido al cargar la página sólo cuando se hace doble click
sobre el icono del altavoz.
El proceso para incrustar el sonido es el siguiente:
En la página donde queremos insertar el sonido, colocamos el cursor donde queremos

que nos cree el icono de reproducción del sonido (o vídeo) y vamos a Insertar /
Avanzadas / Complemento y nos aparece la siguiente ventana:
En origen de datos ponemos la dirección del archivo de sonido o vídeo o en examinar

seleccionamos el archivo. Os recuerdo que si el archivo está fuera de la web que estamos
creando y lo tenemos que buscar en otro directorio tenemos que pulsa el icono para
navegar por nuestro ordenador.
En el cuadro de "mensaje para exploradores que no admiten complementos" hay que

escribir el mensaje que queremos que aparezca. Por ejemplo: "Lo siento, pero su
navegador no parece disponer de soporte para vídeo o sonido".
Las siguientes opciones afectan a cómo aparecerá el icono de vídeo o sonido.

Normalmente para vídeo el tamaño de 128 x 128 es suficiente.
Una vez puestas las opciones que queremos, aceptamos la ventana y en Frontpage nos
aparece el siguiente icono en modo normal:
40
Cuando guardemos la página en modo vista previa o en cada navegador podremos ver
alguno de los iconos del principio de esta página.
(2) Configurar un sonido de fondo para Internet Explorer y Netscape

Navigator
Se procede como en el punto anterior de incrustar un sonido de fondo hasta que nos
aparece la ventana siguiente donde hemos seleccionado el archivo de sonido (esto no
vale para los vídeos):
Si hemos puesto algún mensaje para los exploradores que no admiten complementos lo
borramos.
En el tamaño ponemos 1 x 1.
Marcamos la casilla de "Ocultar complementos"
Aceptamos la ventana y el icono se nos ha hecho muy pequeño. A partir de este momento
tenemos que recurrir al código html para completar la operación ya que la ventana
anterior no nos da más posibilidades.
Damos a la pestaña de HTML y tenemos que buscar un código similar al siguiente:
41
<embed width="1" height="1" src="nombrearchivo.wav" hidden>
Antes de la palabra hidden tenemos que teclear autostart="true" dejando un espacio antes
y después. El código nos quedaría de la siguiente forma:
<embed width="1" height="1" src="nombrearchivo.wav" autostart="true" hidden>
Seleccionamos la pestaña de vista Normal y guardamos el archivo
Si alguien tiene un navegador que no dispone de soporte para complementos, el sonido

de fondo no se reproducirá, pero la página funcionará correctamente, aunque de forma
silenciosa, y los usuarios nunca lo sabrán.
(3) Sonido de fondo sólo para Internet Explorer

Como Frontpage e Internet Explorer son de Microsoft, esta es la forma más sencilla de
poner un sonido de fondo a la página. El único problema es que no se oye con Netscape
Navigator. Pero tampoco pasa nada porque la página funciona normalmente, pero en
silencio.
Para insertar un sonido de fondo, sobre la página que nos interesa pulsamos con botón
derecho y nos vamos a propiedades de página. Nos aparece la siguiente ventana en la
pestaña General:
42
En sonido de fondo seleccionamos el archivo de sonido que nos interesa que suene de
fondo.
Si mantenemos seleccionado "siempre", sonará todo el rato. Si lo deseleccionamos se

nos pone activo el "bucle". Cada bucle es las veces que queramos que se repita el
archivo. Así, por ejemplo, si ponemos 3, el archivo se repetirá tres veces.
Aunque aquí no estamos tratando sobre diseño de páginas, ojo con la utilización de los
sonidos. Sobre todo si se repiten mucho o están de fondo de piñon fijo. Pueden aburrir a
las ovejas mejor entrenadas.
(4) Enlace a un archivo de sonido

Esta es la técnica más antigua en Internet de escuchar sonidos. Se realizaba de este
modo hasta la aparición de los complementos y el streaming de audio. Cuando el usuario
hace click en un enlace a un archivo de sonido, el archivo se descarga en el ordenador
del usuario. Después el usuario puede reproducir el sonido utilizando la aplicación
apropiada. Por ejemplo si se trata de un archivo .wav, se puede reproducir empleando el
Reproductor de Medios de Windows.
Utilizar esta opción es bueno, especialmente cuando el archivo de sonido es grande. De

esta forma no se fuerza al usuario a aceptar un archivo que puede paralizarle el sistema.
O también es apropiada para los amantes de navegadores antiguos que funcionan sólo
en modo texto.
Para enlazar un archivo se hace igual que con cualquier otro enlace. Como los archivos
de sonido pueden ser muy grandes, es habitual y cortés, indicar el tamaño del archivo
junto al enlace.
Al ser tan pequeño el archivo apenas se nota la descarga y verás que directamente abre
la aplicación de tu ordenador que hace posible escuchar el sonido.
Esto funciona con todos los navegadores.
43
22. Utilización de JavaScript: agregar interactividad.

El Java Script es un lenguaje de programación que se utiliza dentro del html. Lo interpreta
el navegador y produce alguna acción determinada en la página web donde está
insertado. En Internet podemos encontrar muchos ejemplos de JavaScript.
Para ello hay que trabajar en vista html porque son lineas de programación que hay que
incrustar o pegar dentro del código html. El efecto lo podemos comprobar con el
navegador o en vista previa.
El html está formado por los siguientes bloques fundamentales:
<html>
<head>
</head>
<body>
</body>
</html>
Hay scripts que van totalmente dentro del head, otros totalmente en el body y otros que
tienen una parte dentro del head y otra en el body. Cuando veamos un script que nos
interesa tendremos que que ver su código fuente y ver cómo está estructurado para
colocarlo nosotros de la misma manera.
Para ver el código fuente con Explorer y Netscape hay que hacer clic con el botón
derecho sobre la página y seleccionar, ver código fuente o ver origen. Entonces se nos
abre una pantalla donde vemos el html del documento y si contiene un script veremos que
está contenido entre <script Language="JavaScript"> y </script>
Todo lo que está entre estos dos códigos es el script y tendremos que copiar todo,
incluidos estos códigos. Habrá que fijarse si esta en el head o en el body y si tiene dos
partes, es tal caso habrá que copiar cada parte y colocarla en su sitio, una en body y la
otra en el head. Cuando tiene dos partes, el script propiamente dicho está en el head y en
el body llama al script con expresiones como <a href="JavaScript:void(0)"
onmouseout="Mout(2)" onmouseover="Mover(2)"> o códigos que hacen referencia a la
primera parte. Si queremos cambiar algo del script habrá que cambiarlo dentro de estos
códigos, tanto del head como del body.
Para aprender a manejarlos lo mejor es "pelearse" con ellos. Si no estás acostumbrado a

manejarlos, te recomiendo que empieces por los que veas que tienen el código más
sencillo.
En algunos scripts aparece el nombre y la dirección donde lo tiene publicado el autor,

conviene respetar esos datos por una cuestión de ética. Además que son datos que no
molestan porque sólo se ven en el código y no aparecerán en nuestra página.
44
23. Cómo hacer archivos que se puedan descargar

desde una web.
Como el apartado anterior de javascripts, esta lección no corresponde exactamente a
Fronpage, pero puede ser muy importante su manejo para todos aquellos que quieran
tener páginas que se puedan descargar en un ordenador para su posterior uso. Con
páginas me refiero también a carpetas con subcarpetas y todos los documentos que los
contienen en un sólo archivo. Esta posibilidad permite también que se puedan enviar por
e-mail archivos completos con su estructura como, por ejemplo web completas, que no
se pueden enviar en cuanto tengan alguna carpeta en su estructura. Además que los
archivos se comprimen, de forma que, ocupan mucho menos que cuando están
descomprimidos.
Para realizar todo esto el programa más utilizado es el WinZip, que se puede descargar
gratuitamente de Internet. Es una versión que no está registrada, pero es totalmente
funcional. Sí hay que advertir que este programa viene totalmente en inglés.
Este programa crea archivos con la extensión .zip y .exe, y cuando creamos un enlace a
un archivo de estos tipos los navegadores Explorer y Netscape entienden que tienen la
propiedad de abrirlos o hacer un download, es decir, que se bajen al ordenador del que
está navegando. Y suelen abrir la típica ventana con las dos posibilidades. En el Explorer
es la siguiente:
Los dos tipos de archivos, los .zip y .exe, se utilizan para comprimir archivos, carpetas y
subcarpetas. La diferencia está que para los archivos .zip hay que tener el programa
WinZip instalado y los .exe no necesitan el programa. Éstos últimos ocupan un poco más
porque llevan las instrucciones dentro para recomponer después toda la estructura y que
lo puedan abrir sin recurrir al WinZip.
45
24. Cómo crear archivos .zip y .exe con Winzip.

Una vez que hemos instalado el WinZip, el programa tiene varias formas de verse.
Nosotros vamos a trabajar en la forma clásica. Para ello abrimos el programa, que lo
encontraremos en Inicio con botón izquierdo, en la parte de arriba. Primero habrá que
aceptar en "I Agree" la primera ventana. Cerramos la siguiente ventana, que si no la
desactivamos, nos aparecerá todas las veces contándonos cositas que puede hacer el
programa.
Con el programa abierto elegimos File, Wizard, Winzip Classic. O pulsamos sobre el
icono Wizard y seleccionamos lo mismo. Entonces nos aparece el programa de la
siguiente manera:
Para crear archivos .exe, siempre hay que crear primero archivos .zip, y a partir de ellos
se crean los .exe.
Para crear un .zip pulsamos en el icono "New" y se nos abre una ventana en donde nos
pide en qué lugar lo va a crear y el nombre que queremos dar al nuevo archivo. En
"create in" seleccionamos el sitio exacto donde lo va a crear y en "Nombre del archivo"
escribimos el nombre que nos guste. Al aceptar la ventana se abre otra ventana que pone
"Add" en donde hay que seleccionar los archivos que queramos. Si son archivos sueltos
no hace falta hacer nada especial más que seleccionar de uno en uno, o en grupos, e ir
pulsando en el icono "Add" para añadir más, pero si entran carpetas y subcarpetas
vamos a verlo con la siguiente ventana.
46
En este ejemplo de ventana que os pongo, veis que está seleccionado Include
subfolders. Si dejamos solo este seleccionado nos crea un archivo con todo el contenido
de la carpeta principal, pero si seleccionamos también save full path info, nos crearía
también la carpeta cursofrontpage con las otras subcarpetas y archivos . Para que nos
guarde toda la estructura de esta carpeta, que tiene subcarpetas, no hay que pulsar en
"Add" sino en "Add with wildcards". Con esta operación nos crea un sólo archivo que
es al que le hemos puesto el nombre al principio. Con los archivos .zip, cuando los
abrimos aparece todo su contenido, pero si los archivos tienen enlaces unos con otros,
para que se recomponga todo, hay que dar a "Extract" y una dirección donde nos lo
guarde porque si no, irán a los archivos temporales de Windows.
Si queremos ponerle una contraseña para que se pueda abrir la carpeta hay que pulsar
en "Password" y elegir una. Pero el programa tiene muchas posibilidades que os dejo que
las investiguéis vosotros porque si no, tendría que hacer una web para este programa y
sólo quiero explicar un par de cosas.
Una vez que hayamos dado a "Add" o "Add with wildcards" y tengamos todos los
archivos que queremos ya tenemos el archivo .zip creado y listo.
Para hacer el archivo .exe, con el archivo .zip abierto tenemos que dar a "Actions",
"Make .Exe File" y nos aparece la siguiente ventana.
47
En create self-extracting... nos aparece automáticamente donde tenemos el archivo .zip

guardado o donde lo haya bajado desde Internet el usuario, y en Default "Unzip"... hay
que poner la dirección donde queremos que nos descomprima el archivo. El ejemplo que
os pongo serviría para que se descomprima y aparezca en el escritorio si el usuario no lo
cambia y ese dato se memoriza también en el archivo .exe.
Al aceptar (OK) se nos crea un nuevo archivo que es un .exe. Cuando se hace doble clic
sobre este nuevo archivo y se pulsa en "Unzip" nos descomprimirá todo el archivo en el
Escritorio y volveremos a ver todas las carpetas, subcarpetas y archivos como al principio.
En el Explorador de Windows los archivos .exe aparecen como "Aplicación" cuando los
vemos en vista detalles.
48

Curso Front Page Parte II

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso Front Page Parte II

Uploaded by

Copyright:

Available Formats

Curso de iniciación al diseño web de

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........................................................................................................................ ..........................30

18. Los formularios........................................................................................................................... .......31

19. Las hojas de estilo..................................................................................................................... ........34

20. Html dinámico.................................................................................................................. ..................36

21. Publicar en la Red...................................................................................................................... ........37

22. Como insertar sonido (y video)...................................................................................... ..................39

23. Java Scripts................................................................................................................................... .....44

25. Cómo crear archivos .zip y .exe con WinZip................................................................ ...................46

17. Los formularios

Para crear un formulario, en cualquier parte de la página o dentro de una tabla

Dirección Ciudad C.P.

Bebida que toma

Tu opinión sobre esta web

Esto es lo que nos ha aparecido en el primer campo de "Nombre", entonces en la primera

T1=pepito perez -Evidentemente, seria más correcto: Nombre=pepito perez

Ahora convendría realizar un formulario en la web de la zapatería en la que utilicemos

18. Las hojas de estilo

Pulsamos en agregar y seleccionamos arcos.css y aceptamos. Entonces se nos aplicará

Conociendo un poco de código html podemos cambiar características de las hojas de

El único problema de las hojas de estilo es que es un recurso típico de Microsoft y lo

19. Html dinámico

A partir de aquí se selecciona un trozo de texto o una imagen y en "elegir evento" se

Los efecto no se ven en vista normal, sólo en vista previa o en el navegador.

20. Publicar en la web

En esa dirección buscamos ws_ftp y en los resultados seleccionamos WS_FTP LE (32-

Cuando abrimos el programa nos aparece la siguiente pantalla:

La pantalla de la izquierda es nuestro ordenador y la de la derecha el espacio que nos

Si realiza cambios en alguna pagina es muy probable que no se haya actualizado en la

21. Insertar sonido en la página

• Incrustar un sonido que lo reproduzcan Internet Explorer y Netscape Navigator:

• Configurar un sonido de fondo para usuarios de Internet Explorer y Netscape

• Configurar un sonido de fondo únicamente para usuarios de Internet Explorer. (ver

• Crear un enlace a un archivo de sonido, de forma que el usuario lo descarga y

(1) Incrustar un sonido para Internet Explorer y Netscape Navigator

El primero en Explorer y el segundo en Navigator. él tamaño de los iconos se puede hacer

El proceso para incrustar el sonido es el siguiente:

En la página donde queremos insertar el sonido, colocamos el cursor donde queremos

En origen de datos ponemos la dirección del archivo de sonido o vídeo o en examinar

En el cuadro de "mensaje para exploradores que no admiten complementos" hay que

Las siguientes opciones afectan a cómo aparecerá el icono de vídeo o sonido.

(2) Configurar un sonido de fondo para Internet Explorer y Netscape

Marcamos la casilla de "Ocultar complementos"

Damos a la pestaña de HTML y tenemos que buscar un código similar al siguiente:

<embed width="1" height="1" src="nombrearchivo.wav" hidden>

<embed width="1" height="1" src="nombrearchivo.wav" autostart="true" hidden>

Seleccionamos la pestaña de vista Normal y guardamos el archivo