Katty
Páginas: 10 (2321 palabras)
Publicado: 30 de julio de 2012
GUÍA PARA ELABORAR PÁGINA WEB CON FRONTPAGE EXPRESS
1. Crear una carpeta donde se va a guardar las páginas, imágenes y todo lo relacionado con el sitio Web. Se recomienda como nombre de la carpeta: sitiowebxxxxxx, donde las xxx es el nombre de la página.
2. Una vez creada la carpeta del sitio, dentro de esta se va crear una carpeta con el nombre de imágenes, (sin tilde) donde se guardaranpreviamente todas las imágenes que se publicaran.
[pic]
3. Una vez creada la carpeta, abrimos el editor Web (FrontPage Express)
[pic]
4. A la primera página la nombraremos index, primero vamos en archivo, Guardar como (figura No.3),
[pic]
Figura No. 3 Guardar como
Abre una ventana, en titulo de la pagina, (borde superior de toda página Web donde indica el titulo de la página)recomendamos escribir “Bienvenidos al sitio Web de la Institución Educativa XXXXXXX” donde xxxxx es el nombre de la sede educativa, una vez le haya dado titulo a la pagina procedemos a guardar la pagina dando clic en el botón inferior derecho “Guardar como archivo” fig. 4.
[pic]
Figura No. 4 Como archivo
Nos abre un cuadro de dialogo, nos ubicamos en la carpeta creada para el sitio en nuestrocomputador y en nombre escribimos “index” y damos clic en guardar, como lo muestra la figura 5
[pic]
Figura No. 5 Guardar
5. El diseño preestablecido es el siguiente. Los contenidos que se muestran se disponen en tablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.
Se construyo una estructura de presentación de los contenidos que se puedafragmentar en varias tablas, de esa manera, cuando el usuario a la página de la sede educativa, siempre mostrará la primera tabla (que llevará los logotipos y la identificación del sitio) de manera rápida, dando al usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se van poniendo los restantes elementos del sitio.
En la figura 6 se puede ver que el sitio estáconstruido en 4 tablas:
Tabla 1: Muestra los logotipos del convenio (Escudo y/o fotos de la sede) y el nombre de la sede, departamento y municipio.
Tabla 2: Enlaces externos de interés, como CPE, UIS, Alcaldía municipal, Página del convenio, etc. o un tipo de marquesina ó imagen que separe el encabezado del cuerpo de la página
Tabla 3: Muestra las Secciones del Sitio más los contenidos dediferente nivel.
Tabla 4: Muestra el pie de la página con la identificación de la sede, correo electrónico, etc.
[pic]
Figura 6. Diagramación páginas del sitio Web
6. Ahora debemos plasmar el diseño en la página Web, como se indico, se van a insertar tablas, para cada sección de la página, empecemos, ubicamos en la barra de menús (parte superior) el menú de tabla e insertamos una tablacomo lo indica la figura 7.
[pic]
Figura 7. Menú de Tabla
A continuación se presenta las propiedades de la tabla que vamos a insertar, damos el número de filas y columnas, debemos organizar como va distribuir la información en dicha tabla, puede ser una parte para el escudo, otra para el nombre de la sede y otra para una foto. Entonces debemos tener 3 columnas y una fila (el número decolumnas es opcional), las opciones de Orden de columnas, alineación, tamaño del borde, relleno de las celas, espacio de las celdas, lo dejamos como está predeterminado, activamos el especificar ancho, escribimos 100 y escogemos que sea porcentaje (eso significa que va ocupar el 100% de la pantalla, sin importar la resolución), y damos clic en aceptar, como se puede observar en la figura 8.
[pic]Figura 8. Propiedades de la Tabla
Una vez que tenemos la tabla debemos dimensionar sus columnas para que no se desconfigure en el momento de insertar información. Para ello nos paramos en la primera celda e ingresamos en el menú tabla, propiedades de la celda.
[pic]
Figura 9. Propiedades de la celda
En el cuadro de dialogo de propiedades de la celda, podemos elegir la alineación,...
1. Crear una carpeta donde se va a guardar las páginas, imágenes y todo lo relacionado con el sitio Web. Se recomienda como nombre de la carpeta: sitiowebxxxxxx, donde las xxx es el nombre de la página.
2. Una vez creada la carpeta del sitio, dentro de esta se va crear una carpeta con el nombre de imágenes, (sin tilde) donde se guardaranpreviamente todas las imágenes que se publicaran.
[pic]
3. Una vez creada la carpeta, abrimos el editor Web (FrontPage Express)
[pic]
4. A la primera página la nombraremos index, primero vamos en archivo, Guardar como (figura No.3),
[pic]
Figura No. 3 Guardar como
Abre una ventana, en titulo de la pagina, (borde superior de toda página Web donde indica el titulo de la página)recomendamos escribir “Bienvenidos al sitio Web de la Institución Educativa XXXXXXX” donde xxxxx es el nombre de la sede educativa, una vez le haya dado titulo a la pagina procedemos a guardar la pagina dando clic en el botón inferior derecho “Guardar como archivo” fig. 4.
[pic]
Figura No. 4 Como archivo
Nos abre un cuadro de dialogo, nos ubicamos en la carpeta creada para el sitio en nuestrocomputador y en nombre escribimos “index” y damos clic en guardar, como lo muestra la figura 5
[pic]
Figura No. 5 Guardar
5. El diseño preestablecido es el siguiente. Los contenidos que se muestran se disponen en tablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.
Se construyo una estructura de presentación de los contenidos que se puedafragmentar en varias tablas, de esa manera, cuando el usuario a la página de la sede educativa, siempre mostrará la primera tabla (que llevará los logotipos y la identificación del sitio) de manera rápida, dando al usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se van poniendo los restantes elementos del sitio.
En la figura 6 se puede ver que el sitio estáconstruido en 4 tablas:
Tabla 1: Muestra los logotipos del convenio (Escudo y/o fotos de la sede) y el nombre de la sede, departamento y municipio.
Tabla 2: Enlaces externos de interés, como CPE, UIS, Alcaldía municipal, Página del convenio, etc. o un tipo de marquesina ó imagen que separe el encabezado del cuerpo de la página
Tabla 3: Muestra las Secciones del Sitio más los contenidos dediferente nivel.
Tabla 4: Muestra el pie de la página con la identificación de la sede, correo electrónico, etc.
[pic]
Figura 6. Diagramación páginas del sitio Web
6. Ahora debemos plasmar el diseño en la página Web, como se indico, se van a insertar tablas, para cada sección de la página, empecemos, ubicamos en la barra de menús (parte superior) el menú de tabla e insertamos una tablacomo lo indica la figura 7.
[pic]
Figura 7. Menú de Tabla
A continuación se presenta las propiedades de la tabla que vamos a insertar, damos el número de filas y columnas, debemos organizar como va distribuir la información en dicha tabla, puede ser una parte para el escudo, otra para el nombre de la sede y otra para una foto. Entonces debemos tener 3 columnas y una fila (el número decolumnas es opcional), las opciones de Orden de columnas, alineación, tamaño del borde, relleno de las celas, espacio de las celdas, lo dejamos como está predeterminado, activamos el especificar ancho, escribimos 100 y escogemos que sea porcentaje (eso significa que va ocupar el 100% de la pantalla, sin importar la resolución), y damos clic en aceptar, como se puede observar en la figura 8.
[pic]Figura 8. Propiedades de la Tabla
Una vez que tenemos la tabla debemos dimensionar sus columnas para que no se desconfigure en el momento de insertar información. Para ello nos paramos en la primera celda e ingresamos en el menú tabla, propiedades de la celda.
[pic]
Figura 9. Propiedades de la celda
En el cuadro de dialogo de propiedades de la celda, podemos elegir la alineación,...
Leer documento completo
Regístrate para leer el documento completo.