Diseño de páginas Web con 

MICROSOFT EXPRESSION WEB 4 
             
I.E.S. FERNANDO DE MENA 
INFORMÁTICA 4º ESO 
CURSO 2012/2013 

  Alumno:  _________________________ 

Alfonso González I.E.S. Fernando de Mena Curso 2012-2013

   

TABLA DE CONTENIDOS 
    1. OPERACIONES BÁSICAS  ...............................................................................................................................................  1  Cambiar el aspecto del programa ................................................................................................................................  1  Abrir/cerrar paneles ........................................................................................................................................................  1  Ver un Web ya existente ................................................................................................................................................  1  Pasos para crear la estructura de nuestro Web .........................................................................................................   2  2. UTILIZAR PLANTILLAS ....................................................................................................................................................  3  Seleccionar una plantilla ................................................................................................................................................  4  Crear páginas basadas en la plantilla ..........................................................................................................................   5  3. OTRA OPCIÓN: UTILIZAR MARCOS .............................................................................................................................   5  Crear marcos ...................................................................................................................................................................  5  Ver propiedades del marco  ..........................................................................................................................................  6  Dividir un marco ..............................................................................................................................................................  6  Eliminar un marco  ..........................................................................................................................................................  6  Crear un hipervínculo a un marco ................................................................................................................................  6  Insertar un marco flotante  .............................................................................................................................................  7  4. DAR FORMATO A LAS PÁGINAS ..................................................................................................................................  7  Dar formato a los caracteres .........................................................................................................................................  7  Dar formato a los párrafos .............................................................................................................................................  7  Aplicar bordes y sombreado a un párrafo  ....................................................................................................................   7  Aplicar numeración o viñetas a una serie de líneas ...................................................................................................   7  Crear una lista anidada  .................................................................................................................................................  8  Insertar línea horizontal ..................................................................................................................................................  8  Modificar las propiedades de una línea horizontal    .......................................................................... ........  8 

Agregar un sonido de fondo en una página  ..............................................................................................................   8  Insertar una imagen como fondo de una página ........................................................................................................   8  Agregar un color de fondo a la página .........................................................................................................................   8  5. HIPERVÍNCULOS  ................................................................................................................................................................  8  Crear un hipervínculo a una página ya existente de nuestro Web ..........................................................................   8  Crear un hipervínculo a una página que se creará automáticamente ....................................................................   9  Hipervínculos a marcadores ..........................................................................................................................................  9  Insertar marcadores  ..................................................................................................................................................  9  Crear un hipervínculo a un marcador  .................................................................................................................   10  Insertar un hipervínculo a otro Web existente ..........................................................................................................   10  Insertar un hipervínculo de correo ..............................................................................................................................   10  Insertar un hipervínculo para la descarga de archivos ............................................................................................   10  Agregar colores a los hipervínculos de una página .................................................................................................   11 

.................................................................  17  Hacer que al pasar el ratón por una imagen aparezca otra imagen (imagen de reemplazo) ................................................................................................................................................................................................................................................................................................  12  Crear un mapa-imagen que contenga varios hipervínculos ...............................................................................................................................................................................................................   14  b) Insertar un archivo de vídeo .........  12  Ubicar correctamente en la página una imagen insertada ...................................  18  Alojamiento web gratuito  ..........................................................................  12  Definir color transparente de una imagen GIF  ..............................................................................................................................................................................................................................................................................................  21  ACTIVIDAD FINAL: DISEÑO DE UN WEB DE TEMA A ELEGIR ..........................................................................................................................................................................................................................  20  10...  13  Animar la transición de páginas ................................................................................................................................................................................................................................................................................................................................................................................   14  d) Insertar un archivo de sonido que sonará al hacer clic en un texto....................................................................   19  Alojamiento web de pago .........................................................................   20  Colocar un icono específico en una página ..............   17  Insertar un efecto a un texto  ........................ IMÁGENES ..................   13  a) Poner un sonido de fondo a la página ...................... Fernando de Mena Curso 2012-2013 6.................   12  Insertar un GIF animado ........................................................................................................................swf .................................................................................................................................................................................................................................................................................................................................Alfonso González I........   23 .............  18  Recurrir a nuestro proveedor de servicios de Internet.................................................................  18  9.................  20  Colocar un icono en un Web de manera global ..................................................................................................................................................................   15  c) Insertar una película en formato ..........   12  8......................  14  a) Incrustar el vídeo en la página ................................................................................................................................... PUBLICAR EL WEB ...   18  Hosting (alojamiento web) ........................ imagen.....................................S............................................   14  c) Insertar un botón interactivo vinculado a un archivo de sonido .............................................................................. TABLAS  ............   15  Mensaje emergente  ..... POSICIONAMIENTO WEB ......................................................................................................................................................................................  13  Incrustar sonidos/canciones en una página .........................................................................  18  Herramientas gratuitas para crear nuestro web gratis ................................. AÑADIR UN FAVICON ..........................................................................................................................  13  Insertar botones interactivos .......................................................... MEJORAR EL WEB ....................................................................................................................................................................................................................................  11  7..............  12  Insertar una imagen ............................................................................................................  11  Ver propiedades de la tabla ..........................................................................   15  d) Pegar el código HTML del vídeo desde Youtube .......................................................................  16  Insertar ventana emergente o pop-up  ..................................................................................................................................................... etc...............................................................  14  Agregar un vídeo  ...............................................................................................................................................................................   12  Editar una imagen insertada .........................  17  Revisar ortografía ......................................................................................................  11  Insertar una tabla .E............   14  b) Crear un hipervínculo a un archivo de sonido ..   21  11......................................................................................................................................................................................................................................................................................................................................................................................

que es de pago... Abre la página index. Mozilla Composer. etc. OPERACIONES BÁSICAS (págs. Selecciónalo y haz clic en el botón 4. en software libre. ƒ Ver un Web ya existente: 1. selecciona el Menú Paneles y activa Restablecer diseño de área de trabajo. imágenes. vídeos.. Si más adelante quieres visualizar algún panel.. selecciona el Menú Paneles y activa el panel en cuestión. Un Web se compone de un conjunto de archivos relacionados (páginas HTML. sonidos.. Haz clic en la lista desplegable situada a la dcha. Fernando de Mena Curso 2012-2013 1. Abre en tu ordenador Microsoft Expression Web 4 e investiga las siguientes acciones: ƒ Cambiar el aspecto del programa: Selecciona el menú HerramientasOpciones de la aplicación. ƒ Abrir/cerrar paneles: Cierra todos los paneles a izquierda y derecha del área de trabajo central. Haz clic en el botón y selecciona Abrir sitio.htm haciendo doble clic sobre ella Las carpetas y archivos que componen el web aparecen a la izquierda.S. y busca en el servidor Público el Web Fórmula 1 de ejemplo. de muy sencillo manejo pero con el que se pueden lograr grandes efectos.. etc.) sobre un tema determinado. en el panel Lista de carpetas: Barra de título Barra de menús Pestañas de páginas activas Barra de herramientas Área de trabajo Panel Lista de carpetas Barra de estado Barra de vistas 1 Existen otros editores Web.E. 128 y 129 del libro) Para diseñar páginas Web vamos a utilizar Microsoft Expression Web 4. del botón 2. o KompoZer. excepto el panel Lista de carpetas.Alfonso González I. como Dreamweaver CS 5. 1 . Si lo que quieres es recuperar el diseño predeterminado de paneles. 3. y activa la opción Usar la combinación de colores actual de Windows. haciendo clic sobre las respectivas x.. uno de los editores de páginas Web más populares1.

Es conveniente que lo renombres como index. Para ello.. como por ejemplo: (Nuevo sitio) GeneralSitio web de una página y navega hasta encontrar la carpeta que creaste en el paso 1.html.Alfonso González I. 2 . un sitio web se compone de una serie de carpetas para guardar ordenadamente la información (carpetas imágenes.. vídeos. y asígnale un nombre autoidentificativo. crea la carpeta raíz del web. Clic en botón Selecciónala y haz clic en 4. «Lenguaje de marcado de hipertexto») es el lenguaje predominante para la elaboración de páginas Web. HTML (HyperText Markup Language. Ejercicio 1: Descárgate en tu pendrive el Web Fórmula 1 de ejemplo de la web del profesor. El programa. Este es el momento en que debemos crear carpetas individuales y ordenadas para guardar en el futuro sonidos. Vamos a crear la estructura de nuestro web (para ello.html. Abre el programa y haz clic en el botón 3. etc.): 1. descomprime la carpeta.) y de archivos. Carpeta raíz 2 Ambas extensiones. vídeos. htm y html vienen a ser lo mismo. El panel Lista de carpetas nos permite organizar todos los elementos del Web cómodamente. imágenes. la mayor parte de estos últimos tienen la extensión html2. etc. 130 del libro) Como habrás observado en el web del ejemplo anterior. previamente tendremos que haber decidido qué tema trata. e investiga todo lo anterior. haz clic con el botón derecho sobre él y selecciona Cambiar nombre. por defecto. haz clic con el botón derecho sobre la carpeta raíz del web y selecciona NuevoCarpeta. de la cual cuelga el archivo Ese pequeño icono que aparece a la izquierda de su nombre indica que es la página principal. Crea todas las carpetas que necesites de momento (¡no uses tildes!). que es como la página de inicio o bienvenida. Fernando de Mena Curso 2012-2013 Para ver el contenido de una página html en cuestión basta con hacer doble clic sobre ella. botones. para ello. es decir. y la más importante es index. Crea en tu pendrive una carpeta que alojará todas las subcarpetas y archivos de tu futuro web. Observarás que la ruta de acceso a tu carpeta aparece a la derecha del cuadro Ubicación: Haz clic en . música.E.S. ƒ Pasos para crear la estructura de nuestro Web: (pág. 2.

tendremos que agregar las páginas que compondrán nuestro web: 1. y además es muy fácil realizar cambios en ellas.S. aparecerá un * a la derecha de su nombre. y cuando nos pregunte si queremos guardar los cambios. es más recomendable trabajar con plantillas. crea en tu pendrive.E. A continuación. UTILIZAR PLANTILLAS Se recomienda elegir una de las múltiples plantillas ya hechas que nos ofrece el programa. menos recomendable. Finalmente.Alfonso González I.. Ejemplos: DESACONSEJADO: Imágenes Mi música 4º ESO RECOMENDADO: imagenes mi_musica 4_eso Más adelante. lo más rápido es: ArchivoGuardar todo. y su nombre (Sin_título_1. elegir la opción Guardar y darle un nombre autoidentificativo. la mayor parte de las páginas que acabamos de crear las vamos a eliminar ya que. mayúsculas. como veremos en el próximo apartado. En cualquier caso. Estas plantillas presentan un atractivo diseño. ƒ Para guardar el Web. Selecciona de nuevo la carpeta raíz del web.html) aparece en la pestaña de las páginas activas. crea en ésta última tu Web especificando la ubicación de la carpeta anterior. y siguiendo los pasos explicados arriba. 3 .GeneralHTML 3. Clic en La página se crea en blanco.. una carpeta denominada Diseño Web y. responder afirmativamente. y dentro de la carpeta 3ª evaluación. hay que guardar todas y cada una de las páginas. crea las páginas que constituirán la estructura provisional del Web. Otra opción es cerrar el programa. Una vez la editemos. indicando que ha sido modificada. La idea es 3 Así evitaremos que nuestro Web pueda presentar problemas en determinados entornos. como por ejemplo servidores basados en Linux o Unix. otra con un nombre alusivo al tema del Web elegido. a la hora de nombrar archivos o carpetas. dentro de ella. Para guardar los cambios podemos hacer clic con el botón derecho sobre su nombre. no utilizar (Nuevo documento) palabras separadas. será muy fácil modificar sobre la marcha la estructura del Web. que distinguen mayúsculas y minúsculas -no así Windows-. Clic en la lista desplegable situada a la derecha del botón Página. desde la lista de carpetas. caracteres poco corrientes y/o tildes3. 2. lo cual veremos en el apartado 3. Fernando de Mena Curso 2012-2013 ƒ Seguidamente. Ejercicio 2: Una vez elegido el tema de tu Web. AVISO IMPORTANTE: Se recomienda vivamente. 2. Otra opción. es trabajar con marcos.

¡No la borres! . styles.) y dos páginas: es la nueva página principal. Clic en Veremos que el programa crea entonces una serie de carpetas (images. nuestro web tendrá un diseño atractivo y uniforme. ƒ Seleccionar una plantilla: 1. es la plantilla. contiene la información relacionada con el vínculo Calendario. contiene la información relacionada con el vínculo Vínculos. crear páginas basadas en ella.Alfonso González I. La carpeta La carpeta La carpeta La carpeta La carpeta La carpeta La carpeta La carpeta ¡No borrar la carpeta contiene la información relacionada con el vínculo Acerca de. etc. 3. Clic en botón (Nuevo sitio) Plantillas. contiene la información relacionada con el vínculo P+F. De esta forma. contiene la información relacionada con el vínculo Galería de fotografías. Seleccionar una de las plantillas en el panel central. 2. pues contiene páginas de estilos css! 4 .E. contiene la información relacionada con el vínculo Noticias. posteriormente. contiene la información relacionada con el vínculo Contacto. contiene las imágenes del web. Fernando de Mena Curso 2012-2013 elegir una de las plantillas y. . Marcar la casilla 4.S.

y sigue los pasos explicados arriba. ¡podremos ver que los cambios se han validado en el resto de páginas! De esta forma se consigue cómodamente cierta uniformidad en todas las páginas del web. Clic con botón derecho sobre . Seguidamente. Fernando de Mena Curso 2012-2013 Por lo tanto. services y site_map. Selecciona de nuevo la carpeta raíz del web. realiza cambios en las zonas editables de las páginas asociadas a la plantilla. A continuación. esos cambios sí pueden ser realizados en la plantilla . employment. Por el contrario. los marcos están desaconsejados.S. press.html.. cada una con una información distinta y con su propia barra de desplazamiento. Si decides adoptar este sistema de plantillas para tu web –que es hoy en día lo más recomendable-. podemos borrar las carpetas employees. ƒ Crear marcos: 1. OTRA OPCIÓN: UTILIZAR MARCOS Los marcos permiten dividir la página Web en varias zonas independientes.. 2. 3. realiza cambios en la plantilla master.. la página inicial antigua index. la carpeta imágenes que creamos en el ejercicio 2. Y lo más importante: si guardamos esos cambios en la plantilla mediante el menú ArchivoGuardar todo y respondiendo afirmativamente cuando el programa nos pregunta si queremos actualizar los archivos asociados.. Vemos que se crea una nueva página basada en la plantilla. puedes saltar directamente al apartado 4. de acuerdo con los últimos estándares de diseño. de la cabecera y de la barra lateral.html como index.E. Seleccionar Nuevo a partir de plantilla web dinámica. aparece un círculo indicando que son zonas no editables. Ejercicio 3: Selecciona una plantilla que te guste. Ahora bien. Se suele tratar. Tanto en como en esta página recién creada observamos que hay zonas que no pueden ser editadas: al intentar situar el cursor sobre ellas. Selecciona el marco que más te guste (Se recomienda Titular y contenido) 4. pasa al siguiente capítulo. Clic en la lista desplegable situada a la derecha del botón Página. 2.Páginas de marcos. y renombrar default. La zona central sí puede ser editada.html.-.Alfonso González I. products.dwt y comprueba que se validan en el resto de páginas. 3. crearemos una serie de páginas a partir de la plantilla recién elegida: 1. Ahora bien. promotions. Clic en (Nuevo documento) 5 . ƒ Crear páginas basadas en la plantilla: Seguidamente. NOTA: Es fácil reconocer una página creada a partir de la plantilla por su icono Ejercicio 4: Crea varias páginas a partir de la plantilla elegida en el ejercicio anterior. habitualmente. si piensas que vas a inclinarte más bien por un diseño a base de marcos –lo cual ya está un poco obsoleto.

) para su posible modificación: Botón derecho sobre el marcoPropiedades de marco… NOTA: Es interesante la opción . marco_central. ƒ Dividir un marco: Seleccionarlomenú FormatoMarcosDividir marco (o bien. se pueden cambiar las dimensiones de los marcos arrastrando su borde. etc. En cada uno de los marcos recién creados aparecerán dos botones. Botón derecho sobre lo anteriorClic en 3. 6. ƒ Ver propiedades del marco (nombre. Es importante que asignes a cada marco parcial un nombre autoidentificativo (marco_izquierdo. que nos permite además elegir el navegador que deseemos. imagen u objeto que constituirá el hipervínculo. 4 En la próxima sección trataremos los hipervínculos más en profundidad. Fernando de Mena Curso 2012-2013 5. 2. haz clic con botón derecho sobre élEstablecer como página principal). Nótese que. etc. podemos “publicar el Web” y ver cómo se van aplicando nuestros cambios. Insertar y seleccionar el texto. no mostrar bordes. el programa nos preguntará los nombres de las páginas de cada marco. mostrar barras de desplazamiento. y de la página que engloba a todos los marcos. una vez creados. arrastrar uno de sus bordes mientras pulsamos Ctrl ) ƒ Eliminar un marco: Seleccionarlomenú FormatoMarcosEliminar marco ƒ Crear un hipervínculo4 a un marco: 1. que permite a los visitantes de nuestro Web modificar el tamaño de los marcos desde su explorador. etc. mientras que en el derecho podemos seleccionar que se abra en el mismo marco. para seleccionar qué página se visualizará en ellos: → para insertar en ese marco una página ya existente → para insertar una página en blanco (en la que podremos comenzar a añadir elementos…) Elige una de las dos opciones anteriores para cada marco (se recomienda la segunda).lo conviertas en la página principal (Para ello.E. insertar sonido.html. mediante el botón (Vista previa). y al marco total –el que engloba a los otros. 4. Seleccionar la página a la que apuntará el hipervínculo. Al guardar los cambios realizados (menú ArchivoGuardar todo). Clic en para seleccionar en qué marco se abrirá la página anteriormente seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos.S.html.). que ocupe toda la página sin marcos. 6 .Alfonso González I. NOTA: En todo momento.

dirección. para quitarle la barra de desplazamiento) hay que situar el cursor en cualquiera de sus bordes y hacer clic con el botón derecho. Aplicar numeración o viñetas a una serie de líneas: Seleccionar párrafosmenú FormatoNumeración y viñetas… 7 . Por ejemplo: 4. se cambia cómodamente de forma similar a un procesador de textos: Dar formato a los caracteres: Seleccionar texto menú Formato Fuente.Alfonso González I.S. elimina las carpetas y plantillas que se crearon en el ejercicio 4.. y un marco principal en la parte central donde deberá aparecer la página principal. etc.. Situar el cursor en el punto deseado de la página deseada 2. Ejercicio 5: Si te has decidido por un diseño a base de marcos. Dar formato a los párrafos: Seleccionar párrafo(s)menú FormatoPárrafo… Aplicar bordes y sombreado a un párrafo: Seleccionar párrafomenú FormatoBordes y sombreado. el formato del texto. DAR FORMATO A LAS PÁGINAS ƒ En Expression Web 4. una página de marcos que contenga algo parecido a lo siguiente: un marco en su parte superior para información que siempre aparezca (logotipo. un marco en la parte izquierda donde posteriormente ubicaremos hipervínculos a las distintas páginas. viñetas.E. etc. párrafos. A continuación crea. Menú InsertarHTMLMarco flotante NOTA: Para modificar las propiedades de un marco flotante (p. ej. Fernando de Mena Curso 2012-2013 ƒ Insertar un marco flotante (es un marco que podemos situar en cualquier parte de la página): 1.). al menos.

ƒ Crear un hipervínculo a una página ya existente de nuestro Web: 2.Alfonso González I.E. 2. varios métodos alternativos para insertar sonidos. imagen u objeto que constituirá el hipervínculo6. 5. En la página 13 se explica cómo asignar un hipervínculo a un botón. ƒ Crear una lista anidada (para estructurar mejor la información): 1. Insertar una imagen como fondo de una página: Botón derecho sobre la páginaPropiedades de página…Ficha Formato Agregar un color de fondo a la página: Botón derecho sobre la páginaPropiedades de página…Ficha Formato NOTA: Es posible que alguno de los elementos anteriores pueda ser reproducido en unos navegadores y no en otros… Ejercicio 6: Investiga en tu Web todos y cada uno de los elementos anteriormente explicados. HIPERVÍNCULOS Un hipervínculo es un enlace que relaciona las páginas de nuestro Web o que conecta con otros Web de Internet. Fernando de Mena Curso 2012-2013 NOTA: Al igual que con un procesador de textos. ya que poseen menor tamaño. (pág. Situar el cursor en el punto de la lista principal donde deseamos insertar la lista secundaria y pulsar Intro .S. incorpora sólo aquellos que te interesen. en profundidad. Seleccionar la página a la que apuntará el hipervínculo. Botón derecho sobre lo anterior 3. Crear nueva lista (mediante los botones ƒ Insertar línea horizontal: InsertarHTMLLínea horizontal Modificar las propiedades de una línea horizontal: Botón derecho sobre la líneaPropiedades de la línea horizontal… ƒ Agregar un sonido de fondo en una página5: Botón derecho sobre la páginaPropiedades de página…Ficha General NOTA: Procúrese utilizar archivos MIDI. Una vez hecho esto. Clic dos veces sobre el botón (Aumentar sangría) o ) 3. 5 En las páginas 13 y 14 veremos. se puede elegir como viñeta una imagen previamente guardada en un archivo. 133 del libro) 1. 6 8 . si seleccionamos la opción Especificar imagen: de la ficha Viñetas de imagen. Seleccionar el texto.

queremos cambiar la ubicación de esa nueva página. 2. Situar el cursor en el punto en que se desea insertar el marcador. 5. Nueva ventana: Se abre en una nueva ventana del navegador.S. Clic en para seleccionar en qué marco se abrirá la página anteriormente seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos. 134 del libro) a) Insertar marcadores: 1. seleccionaremos el botón ) Ejercicio 7: Crea algunos hipervínculos necesarios para poder navegar por tu Web. 9 . hacer clic en para poder escribir un texto que se mostrará al situar el puntero del ratón sobre el hipervínculo. ƒ Crear un hipervínculo a una página que se creará automáticamente: 1. NOTA: Existe otra forma alternativa de crear un hipervínculo.Alfonso González I. mientras que en el derecho podemos seleccionar que se abra en el mismo marco. o bien cuando no sea posible cargar la imagen o se navegue sin ellas (¡este texto a modo de etiqueta es muy útil cuando el hipervínculo está sobre una imagen!). Escribir el nombre de la nueva página que se creará (Si. 5. Seleccionar el texto. imagen u objeto que constituirá el marcador. En primer lugar hay que insertar los marcadores. etc7. más rápida y cómoda pero quizá no tan completa. que consiste en arrastrar la página en cuestión desde el panel de tareas. 4. El mismo marco: Se abre en el mismo marco. Toda la página: Se abre ocupando toda la página. Clic sobre el botón situado en el panel izquierdo. ƒ Los hipervínculos a marcadores son de gran utilidad cuando se incluyen datos ordenados alfabéticamente. y a continuación crear los hipervínculos que apuntarán a cada uno de ellos: (pág. o seleccionar el texto. 7 Las opciones son: Valor pred. Escribir un nombre autoidentificativo para el marcador.E. 4. Botón derecho sobre lo anterior 3. (ninguno): Se abre en el mismo marco. que ocupe toda la página sin marcos. como cualquier otro objeto. Marco primario: Se abre ocupando toda la página. Nótese que. además. Menú InsertarMarcador… 3. imagen u objeto que constituirá el hipervínculo. además. Se recomienda. 2. Guardar la página donde se ha insertado el marcador. una vez creado el hipervínculo podemos modificarlo haciendo clic con el botón derecho sobre él. Fernando de Mena Curso 2012-2013 4.

o dependiendo de si el marcador está en la misma página Ejercicio 8: Crea una página que contenga en su parte superior las 26 letras del abecedario. (pág. 5. Seleccionar el texto. 2. Botón derecho sobre lo anterior 8 En la página 13 veremos una forma alternativa de hacer esto. 2. Seleccionar el texto. Seleccionar 4.S. Fernando de Mena Curso 2012-2013 (Para borrar un marcador. y asigna los correspondientes marcadores que accedan a una lista alfabética relacionada con el tema de tu web. utilizando un botón de acción. Seleccionar el texto. imagen u objeto que constituirá el hipervínculo. imagen u objeto que constituirá el hipervínculo. Seleccionar 4. Seleccionar o en otra.Alfonso González I. Escribir en el campo Dirección: la dirección del Web en cuestión. basta con seleccionarlo y pulsar Supr. etc): 1. Escribir nuestra dirección de correo. 135 del libro) 1. Clic en para seleccionar en qué marco se abrirá la página anteriormente seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos. 135 del libro) ƒ Insertar un hipervínculo para la descarga de archivos8: 1. Botón derecho sobre lo anterior 3. 2. ƒ Insertar un hipervínculo de correo (para que nos envíen sugerencias. etc. ƒ Insertar un hipervínculo a otro Web existente: (pág. pedidos. 4. Botón derecho sobre lo anterior 3. que ocupe toda la página sin marcos. mientras que en el derecho podemos seleccionar que se abra en el mismo marco. Seleccionar el texto. imagen u objeto que constituirá el hipervínculo. Botón derecho sobre lo anterior 3. 10 . Seleccionar (la página y) el marcador en cuestión (y el marco de destino). 2.E. o en otra: 1. o bien acceder al menú InsertarMarcador… y borrarlo de la lista) b) Crear un hipervínculo a un marcador situado en la misma página. imagen u objeto que constituirá el hipervínculo.

puede ser interesante verlos todos seleccionando  Ejercicio 9: a) Crea en tu Web al menos un hipervínculo a otro Web interesante de tema análogo. cambiar formato. etc. Seleccionar el color deseado.: 1. texto. texto. se recomienda hacer clic en ) NOTA: Cuando hemos insertado bastantes hipervínculos. alinear texto. NOTA: El efecto elegido se aplicará a todos los hipervínculos de la página. TABLAS (págs. Botón derecho sobre la páginaPropiedades de página…Ficha Formato 2. distribuir texto. 6. puede ser interesante asignar un grosor de 0 píxeles para organizar una serie de imágenes…) Ejercicio 10: Investiga en tu Web todo lo anterior e incorpora al menos una tabla que contenga imágenes. ƒ Insertar una tabla: Situar el cursor en el lugar deseadoMenú Tabla ƒ Resulta útil tener visible la barra de herramientas Tabla (para borrar líneas.) cómoda y ordenadamente. c) Inserta al menos un hipervínculo para que cualquiera que visite tu Web se pueda bajar a su ordenador un archivo relacionado con el tema. etc.S. cómodamente): Menú VerBarras de herramientasTablas ƒ Ver propiedades de la tabla: Botón derecho sobre la tabla (Por ejemplo. insertar filas o columnas. Acceder al archivo en cuestión (Si no se conoce su ubicación exacta. 131 y 132 del libro) Una tabla permite organizar la información (imágenes. combinar celdas. ƒ Agregar colores a los hipervínculos de una página: Siempre que no se haya aplicado un tema. etc. es posible configurar la página para que los hipervínculos cambien de color según hayan sido visitados. b) Inserta un hipervínculo de correo para que los usuarios de tu Web se puedan comunicar contigo. o el usuario sitúe el puntero del ratón sobre ellos.E.Alfonso González I. etc. Fernando de Mena Curso 2012-2013 3. 11 . Seleccionar 4.

permite animaciones) y JPEG (de alta definición.Alfonso González I. Puedes insertar varios gif animados más… ƒ Crear un mapa-imagen que contenga varios hipervínculos: 1. Ejercicio 12: Entra en una página de gifs animados.216 colores) son los más difundidos. otro procedimiento alternativo para insertarla es: Menú InsertarImagen (O bien. ƒ Para poder ubicar correctamente en la página una imagen insertada: Botón derecho sobre la imagen  Propiedades de imagen.. 24 bits ⇒ hasta un máximo de 16. Seleccionar para definir una zona rectangular para definir una zona circular para definir una zona poligonal 12 . Clic sobre la zona de la imagen que deseamos hacer transparente. Seleccionar la imagen. También existen otros formatos: BMP. escoge el rótulo que más te guste.. es copiar y pegar la imagen. Mostrar la barra de herramientas Imagen: Menú VerBarras de herramientasImágenes 3. Clic en botón formato) (Si la imagen no es GIF. como siempre. No te olvides de guardar la imagen del gif animado en la carpeta correspondiente. e insértalo en tu Web. Apariencia ƒ Para poder editar una imagen insertada: Botón derecho (o doble clic) sobre la imagen  Propiedades de imagen. etc. ƒ Insertar una imagen: lo más cómodo y rápido. 2.com/rotulos/nuevo. Fernando de Mena Curso 2012-2013 7. se nos pedirá un nombre y una ubicación para dicha imagen (¡Se recomienda guardar las distintas imágenes ordenadamente en un sistema de carpetas y subcarpetas! Cuidado: Si posteriormente cambiamos la ruta de acceso a esa imagen. nos preguntará si queremos convertirla a este 4.S. compatibles y rápidos de cargar. cuando salgamos del programa o guardemos el trabajo. Ejercicio 11: Inserta en las páginas de tu Web imágenes alusivas al tema elegido.777.E. como por ejemplo www. arrastrar la imagen en cuestión desde la lista de carpetas hasta la página).. el programa no la encontrará…). En este caso..gifanimados. 2. PNG. 3. TIFF. IMÁGENES Los formatos GIF (8 bits ⇒ hasta un máximo de 256 colores. Mostrar barra de herramientas Imagen. Ficha General ƒ Definir color transparente de una imagen GIF: 1. ƒ Si la imagen está previamente almacenada en un archivo. Insertar la imagen. ƒ Insertar un GIF animado: Se inserta de la misma forma que una imagen usual.

etc.Alfonso González I. Con esta opción se pueden incrustar varios archivos de sonido en una misma página. en las distintas pestañas que se muestran. 2. etc. el nombre de archivo no puede contener palabras separadas.. para seleccionar dónde apuntará el botón al hacer clic sobre él. Escribir en el cuadro Duración: cuántos segundos durará la transición.wma. Seleccionar el diseño del botón. podremos elegir. 8. Seleccionar archivo de sonido. .. Fernando de Mena Curso 2012-2013 4. Menú InsertarMultimedia 4. sonido. o cuando se entre o salga del Web. aparecerá el cuadro de diálogo Insertar hipervínculo. Se incrustará en nuestra página un cuadro reproductor de Windows Media. 3. caracteres poco corrientes y/o tildes) en una carpeta de nuestro Web (p. Ejercicio 13: Construye un mapa-imagen en tu Web. 4. en el cuadro Texto: podemos escoger el texto del botón. Seleccionar en el cuadro Efecto de transición: el tipo de transición deseado. Situar el cursor en el punto deseado.. Delimitar con el ratón la región deseada. Si hacemos clic con el botón derecho sobre él y seleccionamos Propiedades del control ActiveX. ¡IMPORTANTE!: para que funcione. se recomienda deseleccionar la opción … Inicio automático de la ficha General. NOTA: Aquí es muy recomendable utilizar el botón para indicar un texto que aparecerá cuando el usuario sitúe el puntero del ratón encima de cada región en cuestión.. Seleccionar en la lista desplegable Evento: cuándo se desea que se produzca el efecto: al entrar o salir de la página. ƒ Incrustar sonidos/canciones en una página: permite al usuario controlar la reproducción del sonido o canción utilizando el reproductor asociado a su navegador.. Menú Insertar 3.E. en cuyo caso se le preguntará al usuario si desea ejecutarlo o guardarlo. preferentemente en la página principal. 1. hay varias 4. y procederemos como ya se ha explicado en el apartado 5 (Hipervínculos). 2. mayúsculas. Situar el cursor en el punto deseado. Menú Formato 2. película. o un archivo de texto. ej. el cual se abrirá automáticamente. 3. Imprescindible copiar previamente el archivo de sonido (extensiones posibles: . Repetir los pasos 3 y 4 para cada una de las regiones del mapa-imagen.S.midi. Clic en opciones: podemos elegir otra página de nuestro web. o un web externo. por ejemplo. 5. Música). Una vez hecho esto. MEJORAR EL WEB ƒ Insertar botones interactivos: 1. ƒ Animar la transición de páginas: 1. los parámetros del cuadro reproductor. 13 ..

8: tiene el inconveniente de que sólo se puede asignar un único sonido a la página. como se vio en la pág. Vídeos. Clic en hasta seleccionar el archivo de sonido en cuestión. imagen. . ej. de forma que el usuario pueda descargarlo y reproducirlo cuando desee. . hasta el momento en que salgamos de la máquina. En cualquier caso.: 1. etc. ya que poseen menor tamaño. 2. por lo cual tiene un tamaño menor. sin botones de control. se recomienda indicar en la página su tamaño. . en cuestión. d) Insertar un archivo de sonido que sonará al hacer clic en un texto. como se explicó en la pág. de Apple). el tiempo de espera puede ser excesivo. Con el texto o imagen seleccionado. En el panel derecho que se abre a continuación seleccionar sonido.S. etc. / Reproducir NOTA: Con esta opción el sonido se escuchará hasta el final. de modo que cuando el usuario haga clic sobre él se reproducirá dicho archivo.QT (se abre con Quick Time. 10.MOV o . se recomienda utilizar archivos MIDI. imagen. Los formatos más extendidos. 14 . Tenemos las siguientes posibilidades de agregar un vídeo en Microsoft Expression Web 4: a) Incrustar el vídeo en la página: el procedimiento es análogo al recién explicado en el epígrafe anterior para incrustar archivos de sonido: Menú InsertarMultimedia NOTA: Se recomienda guardar todos los vídeos en una carpeta. Seleccionar el texto. por consiguiente.AVI o WMA (utilizados por el reproductor de Windows Media). etc. pero sin pérdida de calidad). Fernando de Mena Curso 2012-2013 Si guardamos y publicamos el web. y por tanto que presentan menos problemas.FLV (flash vídeo de Macromedia). ir a FormatoComportamientos… 3. ƒ Agregar un vídeo: Téngase en cuenta que un archivo de vídeo ocupa demasiado espacio y. son: . b) Crear un hipervínculo a un archivo de sonido.Alfonso González I. 13). c) Insertar un botón interactivo vinculado a un archivo de sonido (ver pág. NOTA: Otras opciones para insertar sonido en una página pueden ser. 4. p. Siempre que se pueda. observaremos en nuestro web algo parecido a esto: de modo que el usuario de nuestra página podrá utilizar los controles del reproductor a voluntad. entre otras: a) Poner un sonido de fondo a la página.MPEG (de formato comprimido. para que el usuario decida su reproducción.E.

ej.ej. en otros portales. 4. o bien un botón interactivo vinculado al archivo de vídeo (al igual que hicimos para insertar un archivo de sonido.swf en una carpeta de nuestro Web (p.S. detenerlo. Google videos. Situar el cursor en el punto deseadoMenú InsertarMultimedia 3. o bien crear un hipervínculo al archivo de vídeo.. Si guardamos y publicamos el web. 2. para reproducir el vídeo. d) Pegar el código HTML del vídeo (o cualquier otro componente) desde Youtube o similares en nuestra página: 1. en cualquier caso. y copiar el código que figurará en azul. Imprescindible copiar previamente el archivo .) donde está el vídeo. Copiar el código HTML del vídeo (p.. Clic en el botón abrirá entonces debajo del área de trabajo la ventana para visualizar el código HTML de la página. NOTA: Es probable que esta opción no funcione en Mozilla Firefox o en otros navegadores. etc.. suele estar situado en un cuadro llamado Embed. mediante CTRL-V ) En nuestra página se verá algo parecido a esto: 15 . por ejemplo. para poder verlo.). Imprescindible copiar previamente el archivo del vídeo en una carpeta de nuestro Web (p. quien acceda a nuestro web tendrá que tener instalado Adobe Flash Player (cuya descarga. en Youtube hay que hacer clic sucesivamente sobre los botones e . Se 4. Copiar el código HTML del vídeo (p. ej. 1. Fernando de Mena Curso 2012-2013 Con esta opción. c) Insertar una película en formato . observaremos que. 2... 5. Flash): tiene el inconveniente de que.swf (es decir. etc. el usuario podrá visualizar el vídeo haciendo clic sobre él. junto con los controles necesarios para que el visitante pueda reproducirlo. Abrir la página (Youtube. se recomienda deseleccionar la opción … Reproducción automática de la ficha General. o similar…) 3. los parámetros a la hora de reproducirlo. b) Insertar un archivo de vídeo: en este caso el vídeo se reproducirá sin controles ni ventanas aparte: 1. 2. Se incrustará en nuestra página el archivo flash.. Insertar.E. Una vez publicado el Web. en las dos pestañas que se muestran.Alfonso González I... Colocar el cursor en el punto de nuestra página donde queremos copiar el vídeo. es gratuita. Si hacemos clic con el botón derecho sobre él y seleccionamos Propiedades de Flash SWF . Vídeos). en la parte inferior de la pantalla.). ej. Seleccionar archivo swf. en la página aparecerá el cuadro reproductor con el primer fotograma del vídeo. hay que hacer clic con el botón derecho y escoger Reproducir. Vídeos). situado en la barra de vistas. podremos elegir. Arrastrar el vídeo desde el panel de archivos hasta la página en cuestión.

foromania.php http://www.Alfonso González I.net Permiten incrustar presentaciones Powerpoint Ofrecen contadores gratis Desde nuestro web podemos enlazar a alguno de estos foros gratuitos Permite crear un foro Alguno puede requerir registro previo Hay que registrarse previamente ƒ Mensaje emergente: es una ventana de Windows que se mostrará con el mensaje de texto que deseemos al hacer clic sobre un objeto. o a otra página de nuestro web. gif animados. pero la desventaja clara es que si el vídeo es retirado de Youtube dejará de verse en nuestra página.com www. o un web externo. Fernando de Mena Curso 2012-2013 Nótese que el usuario dispone de controles para visualizar el vídeo. película.contador-de-visitas.cbox.es/ http://www. d) Inserta al menos un vídeo. relojes. e) Inserta un mensaje emergente. NOTA: En realidad este procedimiento sirve para poder pegar todo tipo de componentes (presentaciones Powerpoint. o un archivo de texto. pero hay disponible versión gratuita de prueba http://www. sonido.forogratis. A continuación mostramos una serie de portales en los que podemos encontrar interesantes utilidades: URL: http://www.net/ DESCRIPCIÓN: Permite a nuestros visitantes dejar mensajes o chatear Permite pegar mapas OBSERVACIONES: Hay que registrarse previamente Hay que registrarse previamente No precisa registrarse previamente Es un programa de pago.slideshare. etc.php http://clustrmaps.ws/index. etc.com/getone.).S.micontador.com/ http://www. b) Elige algún tipo de transición entre las distintas páginas del Web.ispringsolutions. c) Inserta al menos una canción.es www. o al cargar la página.com www.).E. objetos flash. etc. La ventaja de este método es que ahorramos espacio. para volver a la página anterior o a la principal.: Seleccionar el objetoMenú FormatoComportamientos… Mensaje emergenteRedactar el mensaje Ejercicio 14: a) Inserta botones interactivos (por ejemplo. 16 .forosgratis.

para seleccionar la imagen de reemplazo. imagen. etc. Fernando de Mena Curso 2012-2013 ƒ Insertar ventana emergente o pop-up: Una ventana emergente (pop-up. tabla. Si queremos cambiar esto. NOTA: Más adelante.E. ƒ Hacer que al pasar el ratón por una imagen aparezca otra imagen (imagen de reemplazo): 1. 1. Seleccionar el texto que deseamos que cambie. 2. en inglés) es una ventana con el tamaño e información (texto. En el panel derecho que se abre a continuación seleccionar 4. Guardarlo. etc. etc. etc. En el panel derecho que se abre a continuación seleccionar explorador. al hacer clic sobre él. si seleccionamos la opción . ¡IMPORTANTE!: Si elegimos retirar el puntero del ratón. la ventana emergente se abrirá al pasar el puntero del ratón sobre el texto seleccionado. por defecto. si queremos cambiar el comportamiento. sombreado. etc. y seleccionar los cambios. una vez el usuario de nuestra página deje de pasar el puntero del ratón por la imagen se volverá a la imagen original. que se abre cuando hacemos clic sobre una imagen. 3. imagen.S. podemos hacer .) que deseemos. seleccionar también el tamaño de la ventana emergente. aparezca la ventana emergente. 2. etc. el texto retornará a su formato original al NOTA: Al igual que en el caso anterior. Con el texto o imagen seleccionado. e insertar en él la información que queramos. Seleccionar la imagen original. 17 . Clic en hasta seleccionar la página html del paso 1. Seleccionar el texto. FormatoComportamientos… 3. En el panel derecho que se abre a continuación. / Cambiar propiedad.Alfonso González I. / Abrir ventana de 5. ir a FormatoComportamientos… 4. Si queremos cambiar esto. Seleccionar . clic en 4. hay que seleccionar en el panel derecho. al pasar el ratón por él. ƒ Insertar un efecto a un texto de forma que. NOTA: Si queremos eliminar un comportamiento. el efecto se producirá al pasar el puntero del ratón sobre el texto seleccionado. por ejemplo. en . NOTA: Por defecto. bastará con hacer doble clic sobre él en el panel derecho. y cambiar el color. FormatoComportamientos… 3. hay que hacer clic sobre en el panel derecho y cambiarlo. 2. el cual constituirá la ventana emergente. en que se añada borde. Clic en / Intercambiar imagen.html. Crear archivo nuevo . hay que hacer clic sobre en el panel derecho y cambiarlo. texto. cambie de formato (esta opción es muy recomendable en una barra de vínculos): 1. . tal que. tamaño.

. Alojamiento web gratuito: Es más limitado que el de pago. Fernando de Mena Curso 2012-2013 NOTA: Por defecto. Existen varias posibilidades de hosting: 1.es. la publicidad es personalizable. Si queremos cambiar esto.creatupropiaweb. Te dan 50Mb de espacio gratuito. vídeos.es).. 100 MB de espacio 50 MB de espacio 15 MB de espacio 50 MB de espacio 18 . acceso vía Web o FTP . soporta ftp. para ello. Tienes que soportar su publicidad.Alfonso González I. www. una ventana popup al entrar en tu página. ya que no te permite abrirlas. etc. basta seleccionar el texto en cuestión en el paso 1. lo que tiene de malo es que es muy difícil subir tu sitio si tienes que manejarte con varias carpetas. URL tipo http://usuarios.hispavista.lycos. el cual nos garantizará que cualquier usuario de Internet a nivel mundial podrá acceder a él desde cualquier ordenador conectado a la red. Soporte php y sql. al pasar el ratón por un determinado texto. acceso Web.es/tu_nombre. conviene saber que existen herramientas gratuitas para crear nuestro web gratis. y suele agregar publicidad. herramientas para principiantes. etc) a un determinado proveedor. Dirección URL que obtienes: http://tu_nombre. formularios. álbum de fotos. asistente que te guiará paso a paso. como por ejemplo: http://www.htm ƒ Hosting (alojamiento web): Consiste en. URL tipo http://tu_nombre. libros de visita.tráfico ilimitado. y recursos para tus páginas como libro de visitas.es. d) Revisa la ortografía de todas las páginas. tendremos que enviar todos los archivos que componen nuestro Web (¡IMPORTANTE!: Suele ser necesario llamar index a la página principal) al proveedor elegido por medio de cualquier programa de transmisión de archivos (también llamado ftp: file transfer protocol). acceso FTP EN LA PROPIA WEB. pulsar F7) 9.galeon. cute ftp. enviar la totalidad de nuestro Web (archivos. pero es gratis… He aquí una lista de servidores: www. plantillas ya creada . WS ftp. del tipo filezilla. etc.com GratisWeb. la imagen de reemplazo aparecerá al pasar el puntero del ratón sobre el texto seleccionado. estadísticas detalladas de tus visitas. sonido. Ofrecen 100Mb de espacio. una vez ultimado. http://galeon. un banner enorme debajo de la página o. c) Inserta alguna imagen de reemplazo. los cuales pueden encontrarse gratis en la red. herramientas para principiantes.tripod. NOTA: Otra variante es hacer que. hay que hacer clic sobre en el panel derecho y cambiarlo. asistente para principiantes. gestor de archivos. imágenes. etc. ƒ Revisar ortografía: HerramientasOrtografía Ejercicio 15: a) Inserta al menos una ventana emergente.es. mandándoles un correo a esta dirección (popup@iespana. foro.com/ Ofrecen 15Mb.iespana. b) Inserta efectos en algunos textos. Para ello.iespana. se cambie una imagen original por otra de reemplazo. Chat. Ofrecen 50Mb. (o bien.com/publicar/publicar. PUBLICAR EL WEB ƒ En primer lugar.lycos.S.E.

ijijiji.com. Ofrecen 50Mb. Es otro gran sitio donde publicar. cuentas de correo. Ono. MySQL.4t. MySQL y otras.cute. En inglés. Es un lugar donde te ofrecen espacio gratuito para tu página y un montón de recursos: PHP.com Personales. 19 . asistente para navegación. tienes que ser mayor de 18 años para registrarte. Muchos recursos gratuitos para crear tu sitio (PHP5. Más que un sitio para alojar tu Web se trata de un servidor privado.tu nombre http://freeservers.  500 Mb de espacio  25Mb de espacio  Ilimitado   Sin especificar  50Mb de espacio  50Mb de espacio Tresuvesdobles Metropoli 2000 Tripod España comunalia Galeón Aldea Virtual Vivelared (Busca por ti mismo más sitios. mail..com. gestor de imágenes texto y fotos.com Te ofrecen 30Mb. nombre tipo http://hippo. php.ijijiji. Fernando de Mena Curso 2012-2013 50 MB de espacio www. URL tipo http://club. MySql5. php.com/tu_nombre .http://hippo.. También hosting vip GRATIS con mysql. espacio ilimitado. plantillas prediseñadas. Jazztel.com. tipo http://atspace.E. herramientas básicas para iniciados y Web ftp. hosting gratis) 2. Espacio web ilimitado con ftp y todo lo necesario. URL tipo http://tu_nombre. transferencia ilimitada. Bases de datos. con asistente. bases de datos MySQL y Access. Tienes que soportar publicidad tipo popup al entrar en tu Web. transferencia ilimitada. el cual.freeservers.S. boletín de páginas en telepolis. http://miarroba. ijijiji . php y mysql sin restricciones. Ofrecen 25Mb. lo malo de este hosting es la publicidad. acceso Web. También para páginas PHP y base de datos MySQL.Alfonso González I.atspace. ya que puedes elegir entre varias opciones. cgis y mas. etc. sólo tienes que poner en Google.com Diseño propio. 50 Megas Gratis para tu Web. Te dan 50Mb. transferencia ilimitada.com o http://tu_nombre. Espacio en disco y transferencia ajustados a cada necesidad.com 25Mb de espacio gratuito. múltiples subdominios y dominios para elegir. URL www.ijijiji. etc. promoción. o cualquier otro. generalmente ofrece dentro del importe del contrato la posibilidad de almacenamiento web. UnLugar.). recursos.. donde crear tu espacio.telepolis. Servicios de alojamiento gratuito de calidad. Ofrecen espacio ilimitado y gratuito para alojar una web con tecnologías PHP.album. si bien con bastantes limitaciones en la mayoría de los casos. Amigar.com. espacio ilimitado..com.webcindario. acceso Web FTP. la pagina de telepolis como inicio) que luego puedes desinstalar. Alojamiento 100% gratis. Alojamiento gratuito con soporte PHP y ASP.telepolis. Sin publicidad. alojamiento por tiempo ilimitado. URL del tipo http://tu_nombre. además de la propia conexión a Internet. por ejemplo. estadísticas completa. tienes que instalarte un pack al registrarte (noticias en tu email. servicios de dns.com. herramientas y asistente para principiantes. ftp.com http://hippo. Otra posibilidad puede ser recurrir a nuestro proveedor de servicios de Internet (Telefónica.x).com . Tienes que soportar su publicidad (Nada molesta). recursos. Ofrecen espacio de 20 Mb y no colocan banners en las páginas.com.

sobre todo en Explorer.ico (no .Alfonso González I. etc.com www. Con la segunda opción podremos asignar un icono en una página de manera independiente: 1.S. en la barra de direcciones del navegador aparezca.com/ www. Este archivo lo colocaremos en el directorio raíz del dominio. He aquí una lista de programas para ello: http://tools. La primera se trata de colocar un icono a todo un sitio Web entero. no se recomienda crearlo con Paint. PhotoShop. o Marcadores de Mozilla. El que funcione o no nuestro favicon en los distintos navegadores suele ser. También.piensasolutions.com/ www. AÑADIR UN FAVICON Vamos a ver cómo conseguir que.com/ Si queremos tener posibilidades de que funcione siempre. sólo tienes que poner en Google. a veces. un icono identificativo previamente escogido por nosotros. junto a la URL de nuestro Web. Colocar un icono en un Web de manera global: Para ello. Este icono se suele llamar “favicon”: Un favicon es un archivo de imagen que suele tener extensión .ico". para conseguir nuestro objetivo de que se vea en la barra de direcciones tenemos dos posibilidades.bmp. Alojamiento web de pago: La mayor parte de los proveedores ofrecen. este icono se verá en Favoritos de Explorer.es/hosting www. Fernando de Mena Curso 2012-2013 3.evidaliahost. Cuando se introduzca en favoritos cualquier página del sitio.com/es/ http://www.com/ www. gif o jpg). Una vez creado el favicon. se recomienda que tenga un tamaño de 16x16 píxeles. algo impredecible.com/ Desde sólo 3€ al mes nos oferecen 100 MB de espacio Por 18 € al trimestre ofrecen 200 MB Desde 3 €/mes.hostalia. Para asegurarnos de que funcione.1and1.dynamicdrive.com/favicon/ http://www.favikon. otros servicios: compra de dominios.guebs.es www. 100 MB Desde 6 €/mes ofrecen 800 MB (Busca por ti mismo más sitios. y extensión . en principio se verá el icono seleccionado.E.ico. En primer lugar. 100 MB Por 4 €/mes sólo ofrecen 30 MB Desde 2 €/mes. por ejemplo.interdominios.genfavicon. tendremos que crear el archivo favicon. errático e inestable. www. además. etc.ico y darle el nombre "favicon.arsys. hosting) 10. 20 . 250 MB Desde 2 €/mes. correo electrónico. 16 colores (4 bits). debemos editar un archivo . una vez publicado nuestro Web.

ico estará en el mismo directorio que la página web. tenemos una segunda opción: 2.guebs. Por cierto. en este caso nunca tendremos acceso al directorio raíz. POSICIONAMIENTO WEB Consiste en conseguir. <link rel="shortcut icon" href="http://www.dirson. Se trata de un interesante tutorial que nos da consejos para posicionarnos en google con un alto grado de éxito.E. hemos indicado la ruta de acceso completa. se ha de colocar el nombre del icono que queremos utilizar y la ruta para acceder a él.ico" type="image/x-icon"> Es decir.yahoo. Ahora bien. existen dos posibilidades para ello: gratis. Para posicionarse en el buscador de google (ahora bien.es/favicon.html http://google. En tal caso.alfonsogonzalez.google. etc. Para posicionarse en el buscador de yahoo. tras una descripción nuestra de nuestro web. http://www. generará las metaetiquetas para pegar a nuestro código HTML. Fernando de Mena Curso 2012-2013 Ahora bien.com/intl/es/addurl. el problema es que esta cantidad suele ser elevada para el bolsillo de un particular. Esta etiqueta la tenemos que colocar en cada página que queramos asociar con un icono: <link rel="shortcut icon" href="myicono.). hay que tener en cuenta que Google responde a alrededor del 60 % de las búsquedas en la red. que éste se agregue a las bases de datos de los motores y directorios de búsqueda más utilizados en la red (Google. Yahoo. es más probable que funcione. no siempre tenemos acceso al directorio raíz del dominio. y a continuación.com.guebs.com/info/suggest/ http://www. De nuevo. 11. por ejemplo www. o pagando.com/addurl. Para este caso. SEO son las siglas de 21 . De esta manera.google.com/agregaWeb/ http://docs. Colocar un icono específico en una página En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre <head> y <head>). Imaginemos que publicamos nuestro web en Guebs.com/posicionamiento. www. Altavista. tenemos una segunda manera de insertar el icono. sino que tendremos acceso al directorio que nos hayan asignado. En el caso del ejemplo anterior se supone que un archivo llamado myicono. ya nos avisan de que no nos prometen resultados inmediatos…).S.net/ ƒ Usualmente los resultados serán más cómodos y quizá mejores en el caso de que estemos dispuestos a pagar una cantidad. free URL submission.cyler. por lo que es más frecuente su uso en el caso de empresas.Alfonso González I.ico"> En el atributo href de la etiqueta anterior.html http://www. pero no con Explorer. En el primer caso. en general el procedimiento anterior suele funcionar con Mozilla. una vez realizado nuestro Web y publicado. y añadido el atributo type. he aquí algunos ejemplos: Elegir search engine submission.com/mipagina.

por ejemplo tiene más en cuenta las palabras clave en el título de la página (paso 2). y no las metaetiquetas de los pasos 3 y 4… 22 .seoposicion.es/posicionamiento www.E. separadas por comas. también es muy recomendable poner las cosas fáciles a los buscadores.com/ www.es lograr un gran número de enlaces a nuestro web en otros webs.serviweb. Fernando de Mena Curso 2012-2013 "Search Engine optimizar" (Optimizador de Buscadores). Escribir en el campo Descripción de la página: una breve descripción de nuestro Web.canalip. Si activamos el panel Código para visualizar el código HTML de la página.es/ www. además de la posibilidad de que nuestra Web esté presente en las bases de datos de los navegadores.com/Posicionamiento www.com/ www. Hay una gran oferta en la red (basta con poner posicionamiento web en cualquier buscador…): www. 4. por ejemplo.Hurra.S.xeoweb. Escribir en el campo Título: un título de la página que sirva además como palabra clave descriptiva del web. en Google cada vez que éste encuentre nuestro Web. la cual aparecerá. no conviene usar mayúsculas. hay que reseñar que lo que se recomienda vivamente para poder aumentar nuestro pagerank -una especie de índice de popularidad en Google.posicionamientoweb. ni extenderse mucho.9 3. 9 No todos los buscadores funcionan igual: Google. Se recomienda no usar mayúsculas. Se trata de una persona o empresa que se encarga de que una página web aparezca en las primeras posiciones dentro de los resultados de un buscador. a ello podemos añadir la utilización de metaetiquetas: etiquetas HTML que se insertan en la cabecera de la página (entre <HEAD> y </HEAD>) y que nos permiten incluir en ellas la información que posibilitará a los buscadores localizar nuestra página: 1. Escribir en el campo Palabras clave: las palabras que resumen el contenido de nuestro Web. Botón derecho sobre la página principal>Propiedades de página…>Ficha General 2.com/ ƒ Pero.Alfonso González I.davilac. podremos observar: <title>titulo_de_la_pagina</title> Título de la página junto con las siguientes metaetiquetas en la cabecera de la página: <META name="keywords" content="…" /> < META name="Description" content="…" /> Palabras clave de búsqueda Descripción del contenido del Web Finalmente. en relación a una serie de palabras o términos.com www. fundamentalmente intentando que en el título de cada página aparezcan las palabras claves deseadas (con las que queremos que encuentren nuestro web desde cualquier buscador).

Transiciones atractivas entre las distintas páginas del Web (pág. 17) 20. Contador de visitas (pág. Botones interactivos (pág. Una presentación PowerPoint incrustada (pág. ƒ Dicho Web deberá implementar algunos de los siguientes aspectos (en negrita figuran aquellos que deberán ser incorporados obligatoriamente): 1. 10) para que los que accedan a nuestro Web puedan mandarnos algún mensaje. Socuéllamos. música. mejor nota se obtendrá) ƒ Finalmente. 16) 14.) y. utilizando obligatoriamente plantillas (págs. Mapa imagen con hipervínculos (pág. Incorporar animaciones y efectos dinámicos a los distintos elementos (letras. 8) 3. de forma armonizada y atractiva. si se consigue asociarle un favicon (pág. 18 y ss. Hipervínculo para la descarga de archivos (pág.. cada alumno o pareja deberá elegir el tema de su Web (deportes. Hipervínculo a Web de tema relacionado (pág. 16) 17. 9) 5. Hipervínculo de correo (pág. Insertar gif animados (pág. 3 a 5) o marcos (pág. etc. Fernando de Mena Curso 2012-2013 ACTIVIDAD FINAL: DISEÑO (por parejas) DE UN WEB DE TEMA A ELEGIR ƒ En primer lugar. pensar qué estructura tendrá dicho Web. 12) 9. Listas anidadas (pág. una vez recibido el visto bueno del profesor. 12) 11. 13) 16. Insertar imágenes (pág. Marcadores para acceder a una lista alfabética (pág. 13) y vídeos (pág. 17) 15. imágenes.E. cuantos más ítems de los anteriores incorpore el Web. y más aún. 10) 6. Mensajes emergentes (pág. se conseguirá la máxima nota si se consigue publicar el Web siguiendo las recomendaciones de las pág. ciencia. ƒ A continuación. abril de 2013 23 . música. Revisar la ortografía de todo el Web (pág. 11) para organizar la información. 8) 4. 20).Alfonso González I. 17) 21. 2 y 3). 16) 18. etc. Líneas horizontales (pág. cine. 14) 13. 13) 12. vídeos. 2. Incorporar un foro de discusión (pág. etc.S. 5). Insertar ventana emergente (pág. sugerencia.) del Web y sus distintas páginas (ver págs. 7. Insertar una imagen de reemplazo (pág. 18) (Evidentemente.) del Web (pág. Sonidos (pág. 16) 19. habrá que crear la estructura de carpetas y subcarpetas (imágenes. Utilizar tablas (pág. 10) 8. etc. 12) 10. cultura. texto.