TEMA: DISEÑO DE PÁGINAS WEB

Transcripción

1 TEMA: DISEÑO DE PÁGINAS WEB ÍNDICE 1. Introducción Diseñar el sitio Crear una Carpeta Web Definir la estructura de la Web Crear las páginas que se ubican en los marcos Insertar componente Web Insertar imagen Insertar tablas Hipervínculos o enlaces... 7 a. A una página de nuestro sitio Web... 7 b. A una dirección de correo electrónico... 8 c. A otras páginas Web externas a nuestro sistema Distintos tipos de vistas Cómo publicar nuestra página?

2 TEMA: DISEÑO DE PÁGINAS WEB 1. Introducción Un sitio Web es un conjunto de archivos en formato multimedia (texto, imagen, animaciones sonido). Este conjunto de archivos se presentan de tal forma que se puede pasar de uno a otro de una forma fácil e intuitiva, hasta encontrar la información que se está buscando. Las páginas Web se elaboran en lenguaje de programación HTML. Nosotros utilizaremos un programa editor que es el Microsoft FrontPage que nos hará de traductor. Para visualizar la página Web utilizaremos el Navegador Microsoft Internet Explorer. 2. Diseñar el sitio. Para diseñar una página Web es necesario tener claros dos aspectos: Qué información quiero que figure en mi Web?. Cómo voy a presentar esa información a mis visitantes? Para lo primero hay que definir el tema de la Web y hacer una lista con todos los temas que quiero que se expliquen en mi Web. Para lo segundo, es conveniente navegar un rato por varias páginas Web e ir tomando ideas de unas y de otras. No se trata de plagiar..., vamos a llamarlo, consultar nuestras fuentes. EJERCICIO 1: Escribe en folios la estructura jerárquica de tu página. Así luego todo será mucho más sencillo. 3. Crear una Carpeta Web. a) Crea una carpeta en tu ordenador donde guardar todos los archivos necesarios para elaborar tu sitio Web. (Para evitar posibles errores al nombrar las carpetas y los archivos hazlo en minúsculas, sin dejar espacios y con menos de ocho dígitos). b) Crea una carpeta que cuelgue de Mis documentos llamada tunombreweb de la forma habitual en Windows. c) Abre Microsoft FrontPage y en la barra de menús elige: Archivo Nuevo Página o Web. 2

3 d) En la barra que se abre en la parte derecha selecciona Sitio Web vacío. e) Se abre una ventana con título Plantillas de sitio Web. Selecciona Web vacío. f) En especifique la ubicación escribe la ruta completa de tu carpeta. Ej: C:\Mis documentos\rosaweb y acepta. Lo que hemos hecho es transformar la carpeta en web. Si miras en el Explorador verás que se han creado dentro de ella varias carpetas: _private contiene los resultados de los formularios. _vti_cnf contiene información de cada archivo _vti_pvt contiene la configuración del sitio Web images va a contener las imágenes y/o videos del sitio Web Puede que sólo se creen dos carpetas (private e image); con ellas es suficiente. 4. Definir la estructura de la Web a) En la barra de menús selecciona Archivo Nuevo Página o Web. En la barra de la derecha selecciona en la sección Nuevo a partir de una plantilla la opción Plantillas de página. En la nueva ventana selecciona la solapa Página de marcos y luego elige la que se ajuste a tus preferencias (Ej : Contenido) y acepta. Tienes una descripción del tipo de página en la parte derecha de la pantalla. b) En la pantalla se muestran ahora los marcos que delimitan los espacios bien definidos. Ej: Si has escogido la plantilla Contenido, verás dos zonas. La de la izquierda nos servirá para crear una botonera que posibilitará el acceso a las distintas secciones de la página. En el marco de la derecha estará la página principal de la web; la portada. Además, será el lugar donde se muestre el contenido de las secciones que aparecen en la botonera. 3

4 c) Lo primero que vamos a hacer es guardar los archivos de la página que acabo de abrir. Por ahora tengo que guardar tres archivos; uno para la botonera, otro para la página principal y un último que será el archivo de definición de los marcos o frames. Para ello, pinchamos en nueva página de la botonera (marco izquierdo). Hemos creado el archivo y ahora lo queremos guardar. Pulsa el botón Guardar y en la ventana que se abre se muestra en azul el archivo que vas a guardar. Elegimos la carpeta Web creada al principio del ejercicio, le ponemos el nombre de botonera y como tipo de archivo Páginas Web. Al dar a guardar nos pide que guardemos la página que define los dos marcos (ver recuadro azul bordeando toda la página). Esta página la llamaremos index.html. Por último pulsamos Nueva página en el marco derecho y lo guardamos con el nombre de principa.html d) Si abres el explorador de Windows, verás que en nuestra carpeta Web hemos creado tres archivos html: index, botonera y principa. También puedes observarlo en Ver Carpetas (para volver Ver Página). e) Situándote sobre botonera haz clic derecho y elige Propiedades del marco. Comprueba que como página inicial esté cargada botonera.html. En las propiedades del marco puedes definir el tamaño, la presencia o no de barras de desplazamiento, etc. 5. Crear las páginas que se ubican en los marcos. a) Sitúate sobre el marco de la botonera y con botón derecho selecciona Propiedades de la página. En título escribe botonera. b) Selecciona la pestaña General. En Marco de destino predeterminado pulsa el lápiz y haz clic sobre el marco de la izquierda, verás como se escribe contenido, que era el nombre del marco. Observa cómo desde aquí podríamos establecer un archivo de música como sonido de fondo de la página botonera. c) Selecciona la pestaña Fondo y elige un color de fondo y un color para el Texto. Acepta y escribe centrado en el marco contenido la palabra Índice. Para modificar el formato de la fuente actúa igual que en Word. Guarda los cambios haciendo clic en la herramienta Guardar (disquete). d) Cierra la página y vuelve a abrir index. Comprueba como se ha situado la página botonera como página inicial del marco contenido. e) Elige un color de fondo y de texto para principa.html. Comprueba las propiedades del marco. 4

5 6. Insertar componente Web. a) En la página principa haz clic al inicio de la página (margen superior izquierdo del marco). Selecciona en la barra de menús Insertar Componente Web Marquesina. b) En Texto escribe: Esta es la página Web de... Como Alto en Tamaño marca porcentaje y escribe 10%. Pulsa en Estilo, Formato y elige el tipo de letra que quieras. Acepta. c) Guarda los cambios. d) Pulsa en Vista previa (barra del margen inferior de la pantalla). e) Elige Normal (barra en el margen inferior de la pantalla) y puedes modificar la marquesina para que sea más personal. No olvides guardar los cambios antes de verlos en vista previa. f) Guarda los cambios hechos en la página principa. 7. Insertar imagen Para insertar una imagen se hace igual que en Word. Se deberá elegir la foto que se quiere insertar, pero es importante tener una copia en la misma carpeta Web, para que cuando la subamos a Internet no tengamos problemas. La imagen será de extensión JPG para que no ocupe demasiado. a) Pega una copia de tu foto en la carpeta image de tu carpeta Web. b) Sitúate en el lugar de tu página principa en la que quieras insertar una imagen. c) Haz clic en la barra de menús sobre Inserta Imagen Desde archivo Selecciona la foto e Inserta. d) El tratamiento de la imagen es igual que en Word. Si haces clic derecho sobre ella se abre la ventana Propiedades de la imagen. Ficha Apariencia: i. Estilo de ajuste: establece la alineación de la imagen. ii. Espaciado horizontal y vertical: fija la distancia desde la imagen al texto expresado en píxeles. iii. Grosor del borde: se pude añadir un borde a la imagen de distintos grosores. 5

6 iv. Tamaño: se pude fijar tanto en píxeles como en porcentajes. v. Conservar relación de aspecto: si se mantiene seleccionada se mantendrán las proporciones de la imagen para no deformarla. Ficha General: i. Origen de imagen: ubicación de la imagen que se ha insertado. Se puede modificar con un programa de edición gráfica. ii. Representaciones alternativas/texto: si escribimos un texto, cuando veamos el archivo en vista preliminar, al pasar el ratón por encima de la imagen veremos que se muestra el texto que hayamos escrito. iii. Baja resolución: se utiliza para incluir una imagen de peor resolución (que ocupe menos y tarde menos en cargarse) hasta que se cargue la de mejor calidad. Se puede modificar la imagen con la barra de imagen que se abrirá al hacer clic sobre la imagen o en Ver Barra de herramientas Imágenes. Guarda los cambios hechos. Verás que se abre una ventana para guardar página con imágenes incrustadas. Revisa que los datos son correctos y acepta. Mira el aspecto en vista preliminar. 8. Insertar tablas Las tablas nos permiten distribuir la información en la pantalla sin que se pueda descolocar. Ejemplo: 1. Sitúate debajo de la palabra Índice de la botonera. 2. En la barra de menús elige Tabla Insertar Tabla 3. Elige una fila y dos columnas. 4. Desactiva Especificar ancho. 5. En Estilo Formato Fuente Elige Verdana, tamaño 10 pto., color Verde. Acepta hasta salir de la ficha. 6

7 6. Escribe en cada fila las distintas secciones de tu página Web. 7. Haz clic derecho sobre la tabla y selecciona Propiedades de la Tabla; ve cambiando las características como tamaño del borde, color del borde, margen de celda de uno en uno para que veas los resultados. 8. En Alineación selecciona Centrar. Así la tabla quedará centrada en el espacio destinado a la botonera. 9. Guarda los cambios y supervisa el aspecto de tu página en vista preliminar. 10. En el menú Tabla tienes un conjunto de opciones de la tabla que puedes explorar: Dibujar tabla: permite dibujar las filas y columnas de la tabla con el ratón. Insertar: permite insertar filas y columnas y elegir el lugar de inserción. Dividir celdas: nos permite especificar el número de columnas y filas en las que queremos dividir nuestra celda. 9. Hipervínculos o enlaces. El Hipervínculo o enlace es una puerta que nos conduce a otro lugar de la página Web. Debemos definir el texto o imagen que hará de puerta y el destino (lugar al que nos conduce la puerta). Los enlaces pueden ser: A otro lugar del mismo archivo. Ej: Imaginemos un texto de 20 hojas. En la primera se encuentra el índice que tiene enlaces o vínculos con cada una de las secciones. A una Web del mismo sitio Web. Imaginemos que en nuestra botonera tiene distintos enlaces con distintas páginas que se irán mostrando en el marco principal. A una dirección de correo electrónico. A otra página Web que no está en nuestro ordenador. a. A una página de nuestro sitio Web Para poder vincular un texto de nuestra página a otra página primero hay que tener otras páginas. Por ello, lo primero que debes hacer es en Archivo Nuevo Página Página en blanco. 7

8 1. Selecciona en el menú contextual Propiedades de la Página un fondo. Escribe el nombre de la sección y guarda el archivo con este nombre. 2. En la tabla de la botonera selecciona el texto de la primera celda. 3. Haz clic derecho y selecciona Hipervínculo. 4. Texto: es la puerta; el texto que has seleccionado de la primera celda. 5. Dirección: es el destino al que quieres ir. Selecciona el archivo que acabas de crear en este mismo apartado. 6. Marco de destino: nos indica el lugar que va a ocupar el nuevo archivo. Elige el marco de la derecha. 7. Guarda los cambios 8. Supervisa el resultado en la Vista Preliminar. 9. Observa como ahora el texto que hace de puerta al enlace aparece de otro color. Estos colores se pueden cambiar en Propiedades de la página. 10. Haz lo mismo con cada una de los textos de las celdas. b. A una dirección de correo electrónico. 1. En algún lugar de la botonera escribe la frase: Contacta conmigo 2. Selecciona el texto recién escrito y haz clic derecho seleccionando Hipervínculo. 3. Selecciona la opción Dirección de correo electrónico. 4. Escribe la dirección de correo 5. Acepta. 6. Guarda los cambios. 7. Supervisa en Vista previa. c. A otras páginas Web externas a nuestro sistema. 1. Crea una nueva fila en la parte final de la tabla de la botonera. 2. En la nueva fila escribe Enlaces de Interés. 8

9 3. Selecciona la frase y con botón derecho selecciona Hipervínculo. 4. En la barra de dirección escribe la URL: 5. En marco de destino selecciona Marco derecho. 6. Acepta. 7. Guarda los cambios. 8. Supervisa en Vista previa. 10. Distintos tipos de vistas Para ver de una forma gráfica los enlaces y la estructura del sitio Web tenemos la opción de la barra de menús Ver. Hipervínculos: Muestra en la zona de edición los hipervínculos y sus relaciones. Página: Vuelvo a la vista normal que hemos estado utilizando todo el tiempo. Carpetas: Muestra la estructuración de los archivos en sus carpetas como en el Explorador de Windows. Informes: muestra los archivos e información de cada uno. Si haces clic en Ver Informes Resumen del sitio, se muestra una información de mucha utilidad para corregir posibles errores del sitio. Tareas: permite administrar tareas, prioridades y asignaciones. 11. Cómo publicar nuestra página? Lo primero que necesitamos es darnos de alta en un servidor. Uno que funciona bien y es sencillo de utilizar es: Nos registramos y al hacerlo además de una dirección de correo el servidor nos facilita un lugar donde ubicar nuestra página. Ahora hay que subir los archivos al sitio. Para ello se utiliza un administrador de archivos que puede ser el propio de Geocities. Conecto con Geocities mediante: Busco Entrar Relleno mi ID y contraseña. Vamos al Administrador de archivos Abrir Administrador de Archivos Cargar Elijo los archivos que quiero colgar Verifico la carga. 9

10 Si quieres modificar algún archivo tienes dos formas: Se puede seleccionar y modificar directamente en el Servidor por lo que no tendrás guardado en tu ordenador (cliente) el archivo final que la gente verá en tu página por Internet. Puedes modificar el archivo en el ordenador y cargarlo de nuevo. Al cargar un archivo con el mismo nombre que otro el nuevo machaca al antiguo y, por tanto, se guarda el archivo modificado. 10