manual de ceración de páginas web con el · pdf fileprograma de diseño...
TRANSCRIPT
![Page 1: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/1.jpg)
MANUAL DE CERACIÓN DE PÁGINAS WEB
CON EL PROGRAMA KOMPOZER
Informática Máster Colegio Internacional Nuevo Centro
Curso 2011-2012
![Page 2: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/2.jpg)
1. LENGUAJES UTILIZADOS PARA DISEÑO Y PROGRAMACIÓN DE PÁGINAS WEB
1.1 Extensiones de archivos creados
1.2 Otros programas utilizados
1.1 EXTENSIONES DE ARCHIVOS CREADOS
El lenguaje más común para la creación de páginas web es el HTML. Este
lenguaje se escribe con etiquetas en forma de código. La creación del archivo puede hacerse de dos formas distintas:
a) escribiendo directamente el código, lo que permite hacer gran cantidad de cosas pero exige un conocimiento profundo del lenguaje, o
b) utilizando programas específicos que, mediante iconos permiten hacer
tareas como insertar texto, imágenes, hacer hipervínculos, maquetar, etc. De estos programas, los más conocidos son:
Frontpage, de Microsoft →FrontPage.lnk
Dreamweaver, de Macromedia →
Dreamweaver MX 2004.lnk
En ambos casos se nos generará un archivo con extensión .htm o .html.
Aunque ambos programas se pueden utilizar para la elaboración de páginas web, Dreamweaver es mucho más completo y versátil que Frontpage.
Estos programas son de pago y exigen un ordenador potente para poder usarse fácilmente.
Para la realización de este curso, se ha elegido un programa gratuito, y muy completo que permite realizar páginas de forma sencilla. Vamos a utilizar
el programa KompoZer y todas las explicaciones irán orientadas a este programa.
En cualquier caso, las tareas que se solicitan se pueden realizar con cualquier
programa de diseño web, por lo que si el estudiante está acostumbrado a usar
otro programa, puede usarlo para la realización de las páginas.
![Page 3: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/3.jpg)
1.2. OTROS PROGRAMAS UTILIZADOS
Existen muchos programas que nos permiten gestionar el código HTML
mediante WYSIWYG es decir, que nos permiten realizar algo en código HTML,
sin necesidad de teclear el código, que será lo que realmente se verá. Entre los programas más comunes está Frontpage y Dreamweaver.
Frontpage es un editor de páginas web de la empresa Microsoft, formando parte del paquete Office que ya ha quedado algo obsoleto.
Dreamweaver es un editor de páginas web creado por Macromedia, que actualmente ha sido absorbida por Adobe. Es el editor de web más utilizado
con diferencia. Se completa con programas como Flash, fireworks o Freehand. Sus versiones más conocidas han sido la MX 2004, la versión 8 y actualmente
la CS3.
KompoZer es un editor gratuito muy usado y muy indicado para la
iniciación en la creación de páginas web por su sencillez de uso.
Otros programas de uso complementarios para páginas web: Flash,
Photoshop, Hot Potatoes, etc. Características generales de cada uno de ellos.
Complementariamente a Dreamweaver se pueden utilizar otros tipos de
software que permite mejorar el aspecto y las utilizaciones de una página web.
Entre ellos destacamos los siguientes:
a) Flash: es un programa de Macromedia que permite hacer botones,
animaciones, etc. Con Flash se crean archivos modificables con extensión .fla y archivos no modificables, que son los que ofrecen la animación y que tienen
extensión .swf. Para poder ver la acción que tienen estos archivos es necesario tener instalado, al menos, el plug-in de Flash. También se pueden crear
archivos .exe que se ejecutan sin la necesidad del plug-in. En cualquiera de estos casos, el archivo .swf o el archivo .exe se insertan en una página html.
Flash MX 2004.lnk
b) Photoshop o cualquier otro programa de edición de imágenes que nos
permite editar imágenes para poder modificarlas, pasarlas a formatos web
según nuestras necesidades y obtener así archivos para web, con extensiones .gif ó .jpg.
c) Hot Potatoes, que nos permite crear cuestionarios, sopas de letras,
crucigramas y otro tipo de actividades, en código HTML que podemos rellenarlos e, incluso, corregirlos automáticamente.
Hot Potatoes 6.lnk
![Page 4: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/4.jpg)
2.DIRECCIÓN DE URL
2.1 Concepto
2.2 Caracteres que no deben utilizarse
2.3 Estructura de una dirección web.
2.1 CONCEPTO
La URL son las siglas de Uniform Resource Locutor, es decir, Localizador Uniforme de Recursos, que son el conjunto de caracteres que colocamos en la
barra del navegador cuando queremos entrar en una página web. Como ejemplos de URL podemos encontrar:
http://es.wikipedia.org/wiki/Wikipedia:Portada
http://www.terra.es/,
http://www.gruposantander.es/ o
http://www.isftic.mec.es/.
Podemos optar por dos formas de colocar la URL en el navegador, son las
siguientes:
a) escribiendo con el teclado toda la dirección en la barra de navegación.
En este caso deberemos tener cuidado de introducir correctamente todos los caracteres para que se pueda cargar la página web.
b) utilizando “Favoritos”, es decir, aquellas URL que utilicemos frecuentemente, las “guardaremos” en Favoritos para pinchar directamente en
ellas y no tener que teclearlas cada vez que queramos visitar su página web
2.2 CARACTERES QUE NO DEBEN UTILIZARSE
Cuando guardemos nuestras carpetas, subcarpetas y archivos deberemos
tener mucho cuidado de no utilizar algunos caracteres ya que
pueden dar problemas a la hora de cargar la página web. Estos caracteres son los siguientes:
- Símbolos raros como: ñ, @, /, %, el punto(.), la coma (,), etc.
- Letras mayúsculas
- Espacios en blanco, en su caso podemos utilizar el guión bajo (_)
- Tildes
En cambio, si pueden utilizarse números
![Page 5: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/5.jpg)
El no uso de estos caracteres es muy importante ya que, si los usamos, se nos pueden producir errores que serán muy difíciles de localizar a la hora de
que el navegador cargue la página.
2.3 ESTRUCTURA DE UNA DIRECCIÓN WEB
La estructura de una URL es la siguiente: primero se nombra el servidor
que incluye a la página que estamos buscando, después viene la estructura de carpetas y subcarpetas donde se encuentra la página que buscamos y, por
último, el nombre del archivo que buscamos, con la extensión .htm o .html.
A continuación vemos un ejemplo de esto:
http://w3.cnice.mec.es/recursos/bachillerato/tecnologia/manual/index.html
Servidor
Carpeta: recursos
Carpeta: bachillerato
Carpeta: tecnologia
Carpeta: manual
Archivo: index.htm
![Page 6: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/6.jpg)
Esta URL estará en el servidor del ISFTIC (Ministerio de Educación) y dentro de él en la carpeta “recursos” y dentro de esta en la subcarpeta
“bachillerato”, y dentro de esta en la subcarpeta “tecnología”, y dentro de esta en la subcarpeta “manual” y dentro de esta llamamos al archivo “index.htm”.
Esta es la forma de llamar a un archivo. Esto deberemos tenerlo en cuenta cuando elijamos la estructura de carpetas, subcarpetas y archivos de nuestra
web.
Se aconseja nombrar “index.htm” al archivo que queremos que sea la
página principal o portada de nuestra web, ya que este es el nombre que los
navegadores cargarán por defecto.
3. INTRODUCCIÓN A LOS PROGRAMAS DE DISEÑO WEB
Este curso ha sido diseñado para familiarizar al alumno con las bases
fundamentales del diseño web.
Antiguamente las páginas Web se diseñaban mediante programación, pero en la actualidad se han creado una serie de programas para diseñar páginas de
manera más fácil, apareciendo automáticamente la programación de una página. Esto ha evitado la dura tarea de los programadores y se ha facilitado el
trabajo en esta materia.
En este curso vamos a aprender a crear páginas Web utilizando el
programa KompoZer para su orientación, pero como hemos indicado hay otros programas que se podrían usar.
Algunos de estos programas que podemos utilizar para diseñar páginas Web son Dreamweaver, Frontpage, GoLive, Namo Web Editor, etc…
4. INTRODUCCIÓN A LOS COMPONENTES DE UNA PÁGINA WEB HTML, es
un lenguaje diseñado para estructurar textos y presentarlos en forma de hipertexto,
que es el formato estándar de las páginas web.
El HTML puede ser editado con cualquier procesador de texto aunque existen programas
de edición de código HTML. Estos programas se los conoce como WYSIWYG, es decir,
las siglas del inglés, “lo que tu ves es lo que tu obtienes”, esto es, que lo que tu vas
viendo al hacer un archivo es lo que realmente vas a obtener.
El código HTML está formado por etiquetas, que son instrucciones con una señal de inicio
y otra de finalización. Todas las etiquetas de inicio se caracterizan porque van entre
signos de menor que y mayor que (<>) y las de finalización llevan además la barra del
signo de división (</>).
![Page 7: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/7.jpg)
Para ver el código fuente de una página web en Internet Explorer solo tenemos que ir a
Ver/Código fuente y se abrirá una ventana con el código HTML de esa página.
Si queremos ver el código fuente de una página web que estemos diseñando con
KompoZer deberemos pulsan en la parte inferior izquierda de la pantalla en el apartado:
“Código fuente”. Tal y como se muestra en la siguiente imagen:
Un ejemplo de código de una página HTML en blanco es el siguiente:
Donde podemos ver las siguientes etiquetas
- <html> como inicio de documento HTML y </html> como fin de ese mismo archivo
- <title> marca el inicio del título y </title> su final
- <head> marca el encabezamiento de la página y su final viene indicado por </head>
- <body> el inicio del cuerpo del archivo y </body> como el fin
Otras etiquetas son:
- <p>: párrafo nuevo
- <BR>: salto de línea forzado
- <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas dentro de
las filas con <TD>)
- <A>: indica la existencia de un hipervínculo o enlace, dentro o fuera la página web. Debe
definirse el parámetro de pasada por medio del atributo href (ejemplo: <a
href="http://www.google.com">Google</a> se representa como Google)
- <IMG>: indica la existencia de una imagen para mostrarse en el navegador
- <font color="#rrggbb">: Color del texto, representado por un código hexadecimal. - <b>: Texto
en negrita
![Page 8: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/8.jpg)
- <i>: Texto en cursiva
- <u>: Texto subrayado
Si en un momento dado nos interesa podemos colocar el archivo en formato código y
realizar las modificaciones que deseemos en las etiquetas, que se verán reflejadas en el
formato diseño.
De esta forma podremos realizar algunas actuaciones o modificaciones que de otra
manera se hacen muy difíciles de realizar.
No obstante, la manipulación del código o la incorporación de elementos mediante código
requieren un manejo muy fluido del lenguaje HTML.
5. EL PROGRAMA KOMPOZER
5.1 PASOS PARA DESCARGARNOS EL PROGRAMA DE KOMPOZER.
Vamos a proceder a descargarnos el programa de KompoZer que es
totalmente gratuito.
Lo primero que tenemos que hacer es conectarnos a Internet e introducir en la barra de
navegación la siguiente dirección www.magister.es/ch el enlace está disponible en
la parte inferior de la web
- Se nos abrirá una ventana nueva como la que aparece a continuación:
- Pulsar en el botón
Empezará la descarga del programa y una vez descargado comenzará la
instalación (también se puede elegir la opción guardar, descargarlo en el
![Page 9: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/9.jpg)
escritorio y posteriormente ejecutarlo dándole doble clic)
- Nos aparecerá una nueva ventana en donde nos introduce en el programa
- Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación.
- Nos aparecerá una nueva ventana en donde tendremos que seleccionar
que aceptamos los términos (seleccionar “I accept the agreement”)
![Page 10: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/10.jpg)
Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación.
- Nos aparecerá una ventana informándonos de donde se va a guardar el programa, es automático pero si quieres guardarla en otra parte tendrás
que pulsar en el botón de que sería en español “examinar”, y
elegir en donde quieres guardarlo.
- Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación.
- En esta nueva ventana que nos aparece nos informa del nombre que queremos darle al programa, es automático y se recomienda dejar el que aparece.
![Page 11: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/11.jpg)
- Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación
- En esta nueva ventana no vamos a seleccionar nada, ya que queremos
que nos aparezca el programa tal cual aparece.
- Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación
- Nos aparecerá la última pantalla para poder iniciar su instalación.
- Pulsar en el botón de para iniciar el proceso de instalación.
![Page 12: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/12.jpg)
- Una vez finalizado este proceso nos aparecerá la siguiente ventana.
- Pulsar en el botón de para cerrar el programa.
El programa se ha instalado correctamente pero en inglés, vamos a cambiarlo
a español para que nos resulte más fácil.
Para ello vamos a seguir los siguientes pasos:
- Descargar el paquete de Idioma Español del enlace que figura en la parte inferior de la web: www.magister.es/ch
- Descárguelo en el escritorio ya que lo necesitará en los siguientes pasos.
- Dirígete a Tools -> Extensions (Herramientas -> Extensiones si quieres actualizar la traducción).
- Pulsa el botón Install (Instalar).
- Localiza el XPI descargado en tu disco duro y selecciónalo.
- Lee el mensaje del cuadro de diálogo de instalación de software y, una vez termine la cuenta atrás, pulsa el botón Install now.
- Una vez instalado, reinicia Nvu/KompoZer para que los cambios de
idioma tengan efecto.
![Page 13: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/13.jpg)
6. PÁGINAS EN KOMPOZER
6.1 CÓMO TRABAJAR EN UNA PÁGINA EN KOMPOZER
Cuando abrimos el programa de “KompoZer”, nos aparecerá esta ventana:
En la página podremos introducir toda clases de objetos, texto... de forma
muy parecida a como lo haríamos en un documento de word.
En las barras de herramientas, que se muestran a continuación, podemos
encontrar los iconos de las funciones más habituales:
También disponemos de la “Barra de Menús”
.. en donde si pulsamos encima con el botón izquierdo del ratón, nos
aparecerán submenús con distintas opciones que podemos utilizar en el
programa.
![Page 14: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/14.jpg)
En la parte inferior de la ventana, nos aparecerán unas etiquetas.
… esto nos permite tener distintas vistas de la página que estemos
creando.
- En “Normal” nos aparecerá tal y como lo estemos creando
- En “Etiquetas HTML” nos aparecerán todos los objetos como en la “vista
Normal” pero con etiquetas que identifican a los códigos.
- En “Código Fuente” no aparecerán los objetos, sino el código necesario
para crearlos.
- En “Vista preliminar” nos permitirá ver como queda antes de publicarlo y verlo en el Internet Explorer u otro programa de visualización.
Es recomendable guardar frecuentemente la página, ya que el programa nos permite ver la página tal y como se vería en el explorador, si la página no
esta guardada previamente no nos permitirá ver la página.
Es imprescindible que cuando escribamos el nombre de la página o
creemos directorios, se redacten sin acentos, sin ñ, ni espacios y sin mayúsculas, ya que será más fácil trabajar con las páginas.
Bien MAL
pagina_ejemplo1.htm Página_ejemplo1. htm
![Page 15: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/15.jpg)
7. GUARDAR PÁGINAS EN KOMPOZER
7.1 Guardar una página nueva
7.2 Guardar una página existente
7.3 Ejemplo guiado paso a paso
7.1 GUARDAR UNA PÁGINA NUEVA
Cuando vamos a crear una nueva página, habrá que indicarle donde guardarla para que posteriormente podamos abrirla o actualizarla y verla como
quedaría en el explorador.
- Pulsar en el “Menú Archivo”
- Seleccionar la opción para indicarle donde queremos guardar la nueva página
- Nos aparecerá una ventana en donde tendremos que seleccionar la
ruta en donde queremos guardarla y el nombre por el cual la identificaremos a la página
- Pulsar el botón de y ya estaría guardada la nueva página
dentro de nuestra carpeta.
7.2 GUARDAR UNA PÁGINA EXISTENTE
Cuando abrimos una página que ya existía con anterioridad y realizamos modificaciones, a la hora de guardarla ya no tendremos que indicarle ni donde
ni con que nombre.
Los pasos a seguir serían estos:
- Pulsar en el “Menú Archivo”
- Pulsar en el “Menú Abrir” para abrir la página que tenemos guardada
- Selecciona dentro la página que quieres abrir
- Pulsar el botón de “Abrir” para abrir la página en pantalla.
- Haces las modificaciones que quieras
- Ahora vamos a guardar las modificaciones en este documento, para ello tienes que pulsar en el “Menú Archivo”
- Seleccionar la opción “Guardar”, se guardará automáticamente sin tener que escribir nada, ya que hemos guardado las modificaciones que hemos realizado sin cambiar ni el nombre ni el sitio en donde está guardada la página.
![Page 16: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/16.jpg)
7.3 EJEMPLO GUIADO PASO A PASO
Vamos a continuación a crear unas páginas y carpetas para saber manejar
paso a paso un poquito de kompoZer.
- Pulsar en el “Menú Archivo”
- Seleccionar la opción para indicarle donde queremos guardar la nueva página
- Nos aparecerá la siguiente ventana:
- En “Guardar en” tendremos que seleccionar la ruta en donde
queremos guardarla, que en nuestro caso será “C:/ curso_web
- En “Nombre” se tendrá que escribir el nombre de la página que
queremos guardarla. Por ejemplo escribir “pagina_prueba1”
- Pulsar el botón de y ya estaría guardada la nueva página dentro de nuestra carpeta.
Guardar una página existente
Cuando abrimos una página que ya existía con anterioridad y realizamos
modificaciones, a la hora de guardarla ya no tendremos que indicarle ni donde ni con que nombre.
Vamos a realizar un ejemplo para comprobar estos pasos:
![Page 17: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/17.jpg)
- Pulsar en el “Menú Archivo”
- Pulsar en el “Menú Abrir” para abrir la página que tenemos guardada
- Selecciona dentro de tu carpeta que se encuentra en C:/ curso_web la página con el nombre de “pagina_prueba1”.
- Pulsar el botón de “Abrir” para abrir la página en pantalla.
- Escribe el siguiente texto en la página que acabamos de abrir: “VAMOS A GUARDAR UN DOCUMENTO GUARDADO CON ANTERIORIDAD”.
- Ahora vamos a guardar las modificaciones en este documento, para ello
tienes que pulsar en el “Menú Archivo”
- Seleccionar la opción “Guardar”, se guardará automáticamente sin tener que escribir nada, ya que hemos guardado las modificaciones que hemos realizado sin cambiar ni el nombre ni el sitio en donde está guardada la página.
8. VISTA PREVIA EN EL EXPLORADOR.
8.1 Vista previa
8.1 VISTA PREVIA
Kompozer nos permite mediante la opción “visualizar vista en el
explorador” ver como nos quedaría la página creada en Internet y como funcionan sus comandos una vez insertados, antes de colgarlos en Internet.
Para ello tendrás que seguir los siguientes pasos:
- Teniendo abierta una página, la que estemos diseñando, pulsar en el “Menú Archivo” y seleccionar “guardar” si la página ya está guardada con anterioridad o “guardar como” si no tiene nombre ni ruta (estos puntos están explicados detalladamente en el punto 15.1 y 15.2.)
- Una vez guarda la pagina, pulsamos en el “Menú Archivo” y
seleccionamos la opción
También podremos acceder a esta opción pulsando la tecla de función “F5”
- Nos aparecerá la siguiente ventana:
La página aparecerá tal y como quedará una vez colgada en Internet.
![Page 18: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/18.jpg)
9. DESCARGA DE ARCHIVOS
9.1 Como descargarnos las imágenes necesarias para los ejemplos y actividades
9.1 COMO DESCARGARNOS LAS IMÁGENES NECESARIAS PARA LOS
EJEMPLOS Y ACTIVIDADES
En las actividades y en los ejemplos prácticos se requieren una serie de imágenes para su realización. Se puede usar cualquier imagen, siempre que su
tamaño no exceda los 100kbytes (se pueden usar mayores, pero la página tardaría mucho en cargarse o abrirse)
La recomendación es descargarlas en nuestro equipo de la siguiente manera:
- Tendremos que entrar en un “buscador” por ejemplo “google.com”.
Escribir la siguiente URL:
http://www.google.es/
- Nos aparecerá la siguiente ventana:
- haga Clic sobre
![Page 19: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/19.jpg)
- Añadir un palabra o frase correspondiente a la imagen que queremos buscar, por ejemplo:
- Pulsar en el botón para activar la búsqueda.
- Nos aparecerá una ventana, con todas las imágenes que aparezcan con este nombre:
![Page 20: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/20.jpg)
. .
- Seleccionar la imagen que queramos escoger, por ejemplo…
- Clic sobre la imagen con el botón derecho del ratón, y se despliega el menú contextual.
- Seleccionar la opción , nos aparecerá la siguiente ventana
- En “Guardar en”: tendremos que seleccionar la ruta en donde queramos guardarla. En nuestro caso C:/curso_web/
- En “Nombre” escribir el nombre por el cual vamos a identificar a la
imagen. En nuestro caso “lobo” o “lobo1” (recomendamos nombres simples y cortos)
![Page 21: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/21.jpg)
. .
MUY IMPORTANTE: Los nombres de las imágenes deben de cumplir las siguientes normas:
Cuando guardemos nuestras imágenes, carpetas, subcarpetas y archivos
deberemos tener mucho cuidado de no utilizar algunos caracteres
ya que pueden dar problemas a la hora de cargar la página web. Estos caracteres son los siguientes:
- Símbolos raros como: ñ, @, /, %, el punto(.), la coma (,), etc.
- Letras mayúsculas
- Espacios en blanco, en su caso podemos utilizar el guión bajo (_)
- Tildes
- Pulsar el botón para que se quede guardada la imagen.
De esta manera podremos localizar todas las imágenes que necesitemos en las actividades y los ejemplos prácticos.
10. ELEMENTOS DE TEXTO EN UNA PÁGINA WEB
10.1 Escribir texto
10.2 Estructura de una página
10.3 Modificar texto
10.3.1. Tipo de fuente
10.3.2. Tamaño
10.3.3. Color
10.3.4. Estilo
10.4 Alineación del texto
10.5 Viñetas y numeración
10.6 Sangría
10.7 Ejemplo guiado paso a paso
10.8 Autoevaluación
10.1 ESCRIBIR TEXTO
KompoZer nos permite introducir texto y modificarlo a nuestro gusto. Para ello tendremos que seguir los siguientes pasos:
Nos fijamos en donde está el cursor de texto y escribiremos lo que
queramos. Hay que tener en cuenta en donde se escribe el texto, esto lo
![Page 22: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/22.jpg)
. .
explicaremos en el apartado siguiente.
10.3 MODIFICAR TEXTO
En este apartado vamos a ver como podemos modificar los formatos del
texto para mejorar su presentación.
10.3.1. Tipos de fuente.
Para cambiar las fuentes vamos a explicar dos formas posibles que poder realizar esos cambios.
Forma 1:
- Seleccionar el texto que queremos modificar
- Pulsar en el “Menú ”
- Seleccionar la opción
![Page 23: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/23.jpg)
. .
- Se despliega un submenú con todos los estilo de fuentes en donde podremos elegir la que se quiera solo pulsando encima de la fuente elegida.
fuente.
Forma 2ª:
- Seleccionar el texto al cual vamos a cambiar el tipo de
- Ir a la barra de herramientas
- Pulsar en la flecha que nos aparece en la parte de la
derecha y se despliega un submenú con todos los tipos de fuente disponibles.
Nota aclaratoria: Se puede cambiar el tipo de fuente antes o después
de escribir el texto, la única diferencia es que si tenemos el texto escrito tendremos que proceder a seleccionar previamente antes de
cambiar el tipo de fuente.
10.3.2 Tamaño
Para cambiar el “Tamaño” del texto, tendremos que pulsar en
el “Menú Formato” y seleccionar la opción y se despliega un
submenú con los distintos tamaños que nos permite aplicar.
![Page 24: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/24.jpg)
. .
También podemos acceder mediante los iconos “disminuir
texto aumentar texto.
10.3.3 Color
Para cambiar el color de la fuente, sólo hay que seleccionar el
texto y pulsar la opción color . Se puede ver que hay dos colores, uno se refiere al texto (el más a la izquierda y arriba) y otro al fondo (el más abajo y
a la derecha)
O desde el “Menú Formato”, y seleccionar la opción “Color del texto”. Cuando pulsas encima del a opción “color” se despliega un submenú
con gran variedad de colores. Sólo tienes que hacer clic encima del que necesites y se aplicará en el texto seleccionado.
10.3.4 Estilo
Esta opción nos permite añadir estilos a la fuente que tengamos seleccionada, hay que tener en cuenta que algunos tipos de fuente
son incompatibles con estas opciones, por ejemplo el tipo Monotype Cursiva, no nos permite añadir cursiva porque esta fuente es cursiva.
- Para acceder a estos estilos podemos acceder desde el
“Menú Formato”, y seleccionar la opción .
varias opciones. - Se despliega un submenú en donde podremos seleccionar
![Page 25: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/25.jpg)
. .
- A continuación vamos a explicar estas opciones:
- : nos permite añadir un grosor mayor
al texto independientemente del color que tenga ésta. Negrita
- nos permite poner en cursiva el texto seleccionado. Cursiva
- nos permite añadir subrayado
debajo del texto seleccionado. Subrayado
- nos permite tachar algún texto, por ejemplo en los ejercicios de inglés o lenguaje, que se dice que la opción correcta no
sería esa. Tachado
- , nos permite poner el texto por encima de
otro texto. Superíndice
otro texto. Subíndice
- , nos permite poner el texto por debajo de
También podemos acceder a algunas de estos estilos desde la barra de herramientas.
Negrita Subrayado
Cursiva
10.4 ALINEACIÓN DEL TEXTO
KompoZer nos permite elegir la alineación del texto según nuestra
necesidad.
Para acceder a esta opción tenemos que seguir los siguientes pasos:
- Pulsar en el “Menú ”
![Page 26: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/26.jpg)
. .
- Se despliega un submenú en donde podremos elegir varias alineaciones que detallo a continuación
- Alineación Izquierda o el icono de la barra de herramientas nos permite alinear el texto a la izquierda.
- “Alineación a la derecha” o el icono de la barra de herramientas
: nos permite alinear el texto a la derecha.
- “Alineación centrada” o el icono de la barra de herramientas : nos permite alinear el texto desde el centro hacía los extremos.
- “Alineación justificada” o el icono de la barra de herramientas : nos permite alinear el texto tanto a la derecha como a la izquierda.
10.5 VIÑETAS Y NUMERACIÓN
El programa nos permite añadir también, distintos tipos de viñetas, numeración…
- Si queremos añadir una viñeta o numeración para que el texto nos
aparezca en niveles distintos, tendremos que pulsar en las opciones:
Numeración Viñetas
Cuando pulsamos en uno de estos dos iconos, nos aparecerá
directamente la opción de “números” o “símbolo”
Si queremos seleccionar algún modelo distinto, tendremos que pulsar
sobre “Menú Formato” y seleccionar la opción “Lista”.
- Sitúa el cursor debajo de lo que tenemos escrito sitúa el cursor.
- Selecciona la opción “Viñetas” y nos aparecerá la viñeta predeterminada por defecto.
![Page 27: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/27.jpg)
. .
- Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y seleccionar la opción “Lista”. Dentro del submenú que aparece pulsar en
.
- Nos aparecerá la siguiente ventana:
- En esta ventana nos permite elegir entre un número limitado de estilos. Seleccionar la opción “circunferencia”
- Pulsar el botón
10.6 SANGRÍA
Si queremos aumentar la sangría del texto, podremos realizarlo desde las
opciones “Sangrar texto” y “desangrar texto” . Estas opciones
nos permiten añadir espacios en blanco en las primeras líneas y en el resto del párrafo no.
Con todas las modificaciones que hemos realizado con el texto escrito, nos
debería de quedar el resultado final de la siguiente manera.
10.7 EJEMPLO GUIADO PASO A PASO
- Lo primero que vamos a hacer es crear una página nueva para poder ir
introduciendo texto, y guardarla con el nombre de “pagina_ejemplo1”
![Page 28: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/28.jpg)
. .
(tenga en cuenta que en realidad la página se guardará como “pagina_ejemplo1.html” donde .html es la extensión de la página)
- Primero se debe abrir el programa KompoZer, luego ir al menú “archivo”
(en la parte superior izquierda) y en el desplegable seleccionar “nuevo”.
- Se abrirá una ventana en la que se debe seleccionar “un documento vacío” y dar al botón “crear”.
- Generalmente se abre una pantalla que te pregunta el título que va ha tener la página. Introducirás el texto: es una página de ejemplo y presionas “ENTER”
- Se despliega la ventana para guardar el archivo,
- Escribir “pagina_prueba1” y seleccionar el directorio “curso_web” como
destino.
- Ahora vamos a escribir el siguiente texto: “ENCABEZADO DE LA PÁGINA”, pulsar la tecla Enter y escribir “RESTO DEL TEXTO EN PÁRRAFO”
- Selecciona el texto “ENCABEZADO DE LA PÁGINA”
- Para modificar todos los formatos tendremos que acceder al “Menú
y tendremos que ir seleccionar las distintas opciones que aparecen.
![Page 29: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/29.jpg)
. .
- Ahora vamos a cambiar los formatos del texto, que sirven para predeterminar si queremos encabezados, párrafos,etc.
- Selecciona el texto para que será el “ENCABEZADO DE LA PÁGINA”,
para ello tenemos que pulsar en el “Menú Formato” y seleccionar la
opción y nos aparecerá un submenú en donde podremos seleccionar el estilo que tendrá nuestra letra, si es encabezado, párrafo, título 1, …
… en nuestro caso vamos a seleccionar .
- Seleccionar ahora, “RESTO DEL TEXTO EN PÁRRAFO” e introducirnos
en el “Menú Formato”, seleccionar la opción “Párrafo” y dentro del
submenú que nos aparece seleccionar la opción .
- Ahora vamos a cambiar las fuentes del texto.
- Selecciona el texto “ENCABEZADO DE LA PÁGINA”y pulsar sobre el
“Menú Formato” y seleccionar la opción . Se despliega un submenú en donde podremos seleccionar todas las fuentes de las cuales disponemos.
![Page 30: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/30.jpg)
. .
- Seleccionar la letra “Monotype Cursiva” (en caso de no disponer de esta letra, elegir otra cualquiera)
Ahora vamos a cambiar la fuente del resto del texto accediendo a través de la barra de herramientas:
- Selecciona el siguiente texto, RESTO DEL TEXTO EN PÁRRAFO”
- Pulsa en la opción de la barra de herramientas
.
- Selecciona pulsando en la fecha para que nos aparezca todas las
fuentes de las que disponemos.
- Seleccionar la fuente “Verdana” (en caso de no disponer de esta
letra elegir otra distinta)
- Para cambiar el “Tamaño” del texto, tendremos que pulsar en el “Menú
Formato” y seleccionar la opción y se despliega un submenú con los distintos tamaños que nos permite aplicar.
También podemos acceder mediante los iconos “disminuir texto
aumentar texto.
- Selecciona el encabezado, y añádele el tamaño “extragrande”
- Selecciona el texto que va en párrafo y añádele el tamaño “grande”.
- Para cambiar el color de la fuente, sólo hay que seleccionar el texto y
pulsar la opción color .
![Page 31: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/31.jpg)
. .
O desde el “Menú Formato”, y seleccionar la opción “Color del texto”. Cuando pulsas encima del a opción “color” se despliega un submenú con
gran variedad de colores. Sólo tienes que hacer clic encima del que
necesites y se aplicará en el texto seleccionado.
- Seleccionar el texto de encabezado y aplicar un color “azul”
- Seleccionar el texto que va en párrafo y aplicar un color “rojo”.
- Existen dos opciones que nos permiten modificar el texto de manera distinta a las explicadas anteriormente.
- La opción “Negrita” , nos permite añadir un grosor mayor al texto independientemente del color que tenga ésta.
- La opción “Cursiva” , nos permite poner en cursiva el texto
seleccionado.
- La opción “Subrayar” , nos permite añadir subrayado debajo del texto seleccionado.
También podemos acceder a dichas opciones desde el “Menú Formato”,
y se despliega el siguiente submenú.
- Selecciona el texto de encabezado y añadir negrita y cursiva sobre él.
![Page 32: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/32.jpg)
. .
- También nos permite modificar la alineación del texto en la página. Para ello tendremos que seleccionar uno de las opciones que aparece en “propiedades”.
“Alineación a la izquierda” : nos permite alinear el texto a la izquierda.
“Alineación a la derecha” : nos permite alinear el texto a la derecha.
“Alineación centrada” : nos permite alinear el texto desde el centro hacía los extremos.
“Alineación justificada” : nos permite alinear el texto tanto a la derecha
como a la izquierda.
También podemos acceder a estas opciones desde el “Menú Formato”,
seleccionar y se despliega un submenú con las siguientes opciones.
- Selecciona el texto, todo, y añádele texto centrado.
- El programa nos permite añadir también, distintos tipos de viñetas, numeración…
- Si queremos añadir una viñeta o numeración para que el texto nos
aparezca en niveles distintos, tendremos que pulsar en las opciones:
Numeración Viñetas
Cuando pulsamos en uno de estos dos iconos, nos aparecerá directamente
la opción de “números” o “símbolo”
Si queremos seleccionar algún modelo distinto, tendremos que pulsar sobre “Menú Formato” y seleccionar la opción “Lista”.
- Sitúa el cursor debajo de lo que tenemos escrito sitúa el cursor.
![Page 33: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/33.jpg)
.
- Selecciona la opción “Viñetas” y nos aparecerá la viñeta predeterminada por defecto.
- Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y seleccionar
la opción “Lista”. Dentro del submenú que aparece pulsar en
.
- Nos aparecerá la siguiente ventana:
- En esta ventana nos permite elegir entre un número limitado de estilos. Seleccionar la opción “circunferencia”
- Pulsar el botón
- Escribir el siguiente texto:
- Si queremos aumentar la sangría del texto, podremos realizarlo desde
las opciones “Sangrar texto” y “desangrar texto” . Estas opciones nos permite añadir espacios en blanco en las primeras líneas y en el resto del párrafo no.
Con todas las modificaciones que hemos realizado con el texto escrito, nos debería de quedar el resultado final de la siguiente manera (aproximadamente)
![Page 34: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/34.jpg)
.
11. IMÁGENES
11.1 Insertar imágenes
11.2 Insertar texto alternativo a una imagen
11.3 Cambiar texto alternativo
11.4 Modificar tamaño
11.5 Ejemplo guiado paso a paso
11.1 INSERTAR IMÁGENES
Para que las imágenes siempre aparezcan sin ningún problema en la
página, tienen que estar en la misma carpeta (directorio) que la página.
Si no has descargado todavía ninguna imagen, recomendamos seguir los
pasos indicados en el apartado “imágenes” para buscar imágenes en google y descargarlas en el directorio creado para el curso: “curso_web”.
Es conveniente disponer e al menos 3 imágenes correctamente guardadas para hacer el siguiente apartado.
Para insertar imágenes tenemos que…
- Pulsar en el “Menú Insertar”
- Y seleccionar la opción “Imagen” o también pulsando en el icono de la
barra de herramientas
- Se nos abrirá una nueva ventana con distintas fichas,
- Ficha “Ubicación”:
![Page 35: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/35.jpg)
.
- En “Ubicación de la imagen”, tendremos que pulsar en la carpeta
para indicarle la ruta en donde se encuentra las imágenes.
- En “La URL es relativa a la dirección de la página”: tenemos que tener activada está opción para que nos aparezca en pantalla la imagen.
- En “Texto emergente”, se tendrá que introducir un texto para que
cuando arrastremos el puntero del ratón sobre la imagen nos aparecerá este texto.
- En “Texto alternativo” se podrá introducir un texto. En caso de no haber puesto un “texto emergente” nos aparecería ningún texto.
- Si no queremos que se vea el texto alternativo, activar la casilla
- Pulsar el botón para verificar que queremos realizar
los cambios.
11.2 INSERTAR TEXTO ALTERNATIVO A UNA IMAGEN
Dentro de la misma pantalla que hemos visto en el apartado anterior,
podemos encontrar el texto alternativo.
Si queremos insertar un texto alternativo a una imagen una vez que ya está insertada la imagen, tendremos que seguir los siguientes pasos:
- Seleccionamos la imagen en donde vamos a insertar el texto
alternativo
- Pinchar en el “Menú Formato” y seleccionar la opción “Propiedades de una imagen”
![Page 36: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/36.jpg)
.
- Nos aparecerá una nueva ventana igual que la explicada en el apartado anterior.
- Tendremos que poner el texto que queramos que aparezca cuando pasemos el cursor por la imagen
- En caso de no querer que aparezca el texto alternativo pulsaremos en la siguiente opción.
- Una vez seleccionado una de las dos opciones pulsar el botón
11.3 CAMBIAR TEXTO ALTERNATIVO
En caso de querer cambiar el texto alternativo que tenemos, seguiremos
estos pasos:
- Pulsar doble clic sobre la imagen, o pulsar en el “Menú Formato” y seleccionar la opción “Propiedades de la imagen”.
- Nos aparecerá el mismo cuadro que hemos explicado anteriormente.
- Realizar los cambios que queramos realizar
- Pulsar el botón para verificar los cambios que hemos realizado.
![Page 37: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/37.jpg)
.
quede como el tamaño real, sólo tendremos que pulsar en la
opción .
11.4 MODIFICAR TAMAÑO
Se puede modificar el tamaño de la imagen de dos maneras distintas.
Primera manera: La manera más fácil y rápida de modificarla es…
- Seleccionar la imagen
- Situar el puntero del ratón en una esquina o arista, y el cursor se convierte en una flecha de doble punta.
- Manteniendo pulsado el ratón arrastrar hasta que tenga el tamaño
deseado.
Segunda manera: Pulsar doble clic sobre la imagen, o pulsar en el “Menú Formato” y seleccionar la opción “Propiedades de la imagen”.
- Pulsar sobre la ficha “Dimensiones”
- Nos aparecerá una ventana con las dimensiones actuales de la imagen, que podemos modificar a nuestro gusto.
Podemos añadir el ancho y
alto de la imagen a
nuestro gusto. Cuando
modificamos la altura se
modificará automáticamente
la anchura, y viceversa.
- Si queremos modificar los cambios que hayamos realizado y que nos
- Una vez modificado el tamaño de la imagen pulsar el botón
para verificar los cambios.
11.5 EJEMPLO GUIADO PASO A PASO
Para realizar este ejemplo se deben tener varias imágenes en el directorio “curso_web”, el mismo donde debe estar guardada la página web.
En el ejemplo se va a usar C:\curso_web
Lo primero que vamos a hacer es abrir la página que tenemos guardado
con el nombre de “pagina_ejemplo1” para poder insertar imágenes y trabajar con ellas.
Insertar Imágenes
Para insertar imágenes tenemos que…
- Pulsar en el “Menú Insertar”
![Page 38: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/38.jpg)
.
- Y seleccionar la opción “Imagen” o también pulsando en el icono de la
barra de herramientas
- Se nos abrirá una nueva ventana con distintas fichas,
- Ficha “Ubicación”:
- En “Ubicación de la imagen”, tendremos que pulsar en la carpeta
para indicarle la ruta en donde se encuentra las imágenes. En nuestro caso tendremos que seleccionar “C:\curso_web\
- En “La URL es relativa a la dirección de la página”: tenemos que
tener activada está opción para que nos aparezca en pantalla la imagen.
- En “Texto emergente”, se tendrá que introducir “LOBO” para que cuando arrastremos el puntero del ratón sobre la imagen nos aparecerá este
texto.
- En “Texto alternativo” se podrá introducir “LOBO DE LA NOCHE”. En caso de no haber puesto un “texto emergente” nos aparecería este texto.
- Si no queremos que se vea el texto alternativo, activar la casilla
- Pulsar el botón para verificar que queremos realizar los
cambios. Nos quedará de la siguiente manera:
![Page 39: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/39.jpg)
.
12. HIPERVÍNCULOS Y ENLACES
12.1 Hipervínculo absoluto
12.2 Ejemplo guiado paso a paso
12.3 Hipervínculo relativo
12.4 Ejemplo guiado paso a paso
12.5 hipervínculo anclado de texto
12.6 Ejemplo guiado paso a paso
12.7 Hipervínculo anclado con imágenes o flechas UP
12.8 Ejemplo guiado paso a paso
12.9 Hipervínculo anclado con correo electrónico
12.10 Ejemplo guiado paso a paso
12.1 HIPERVÍNCULO ABSOLUTO
Este hipervínculo nos permite crear un enlace desde nuestra página a cualquiera que se encuentre en la red. Tendrá que empezar por “http://www”
Para ello vamos a realizar los siguientes pasos:
- Escribimos el texto que será nuestro hipervínculo
- Seleccionar el texto que acabamos de escribir
- Pulsar en el “Menú Insertar” y seleccionar la opción o bien
pulsar el icono de la barra de herramientas
- Nos aparecerá la siguiente ventana
![Page 40: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/40.jpg)
.
- En “Ubicación de enlace” escribimos el enlace que al pulsar sobre él nos abrirá la página correspondiente.
- Pulsar el botón para verificar los cambios realizados.
- Guardar la página y pulsar la tecla de función “F5” para ver como quedaría realmente nuestra página.
12.2 EJEMPLO GUIADO PASO A PASO
Vamos a realizar los siguientes pasos para practicar lo que acabamos de
aprender.
- Abrir una nueva página que vamos a guardar en nuestra carpeta que se encuentra en esta ruta: “C:\curso_web”, y vamos a guardar la página con el nombre de “pagina_ejemplo2”.
- Vamos a escribir el texto “Hipervínculo Absoluto”
- Seleccionar el texto que acabamos de escribir
- Pulsar en el “Menú Insertar” y seleccionar la opción o bien
pulsar el icono de la barra de herramientas
- Nos aparecerá la siguiente ventana
- En “Ubicación de enlace” vamos a escribir http://www.google.es
- Pulsar el botón para verificar los cambios realizados.
- Guardar la página y pulsar la tecla de función “F5” para ver como quedaría realmente nuestra página.
- Clic sobre el enlace que acabamos de escribir, y se nos tendrá que abrir
el buscador de google.
![Page 41: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/41.jpg)
.
12.3 HIPERVÍNCULO RELATIVO
Nos permite enlazar nuestra página con otra que tenemos creada dentro
de nuestra carpeta o web.
- Escribimos el texto correspondiente a nuestro enlace.
- Selecciona el texto que acabamos de escribir
- Pulsar en el “Menú Insertar” y seleccionar la opción o bien
pulsar el icono de la barra de herramientas
- Nos aparecerá esta ventana:
- Pulsamos en la carpeta que aparece en la parte izquierda , para seleccionar la página con la que queremos enlazar.
- Se rellena con el nombre de la página que queremos que se abra
cuando pulsemos sobre él.
- Pulsar el botón para verificar los cambios realizados.
- Guardar la página y pulsar la tecla de función “F5” para ver como quedaría realmente nuestra página.
- Cuando pulsamos sobre el enlace que acabamos de crear, nos debería
aparecer la página que teníamos creada con anterioridad.
12.4 EJEMPLO GUIADO PASO A PASO
Vamos a realizar un ejemplo para practicar lo que hemos aprendido en el apartado anterior.
- Debajo de lo que hemos escrito, escribir “Hipervínculo Relativo”
- Selecciona el texto que acabamos de escribir
![Page 42: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/42.jpg)
.
- Pulsar en el “Menú Insertar” y seleccionar la opción o bien
pulsar el icono de la barra de herramientas
- Nos aparecerá esta ventana:
- Pulsamos en la carpeta que aparece en la parte izquierda , para seleccionar la página que tenemos guardada con el nombre de “pagina_ejemplo1.html”, que está guardada en “C:\ curso_web”
- Se rellena con el nombre de la página que queremos que se abra
cuando pulsemos sobre él.
- Pulsar el botón para verificar los cambios realizados.
- Guardar la página y pulsar la tecla de función “F5” para ver como quedaría realmente nuestra página.
- Cuando pulsamos sobre el enlace que acabamos de crear, nos debería
aparecer la página que teníamos creada con anterioridad.
12.5 HIPERVÍNCULO ANCLADO DE TEXTO
Son los enlaces que nos permiten movernos por diferentes zonas de nuestra página.
- Escribimos el texto que nos va a servir para movernos por la página
- Clic sobre la opción de “Enlace Interno” que se encuentra en la barra de herramientas.
menús.
… otra manera de acceder a esta opción es mediante la barra de
![Page 43: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/43.jpg)
.
- Clic sobre el “Menú Insertar”
- Y seleccionar la opción “Enlace Interno”
- Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace
- Pulsar el botón para verificar el nombre y el enlace.
- Nos aparecerá el ancla delante del texto.
- Situar el cursor hacía donde queremos que nos aparezca el texto.
- Escribir el texto identificando lo que va a hacer el enlace
- Seleccionar el texto que acabamos de escribir y pulsar el botón derecho sobre él.
- Nos aparecerá el “Menú Contextual”
- Pulsar la opción “Crear enlace” y nos aparecerá la siguiente ventana.
![Page 44: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/44.jpg)
.
- Escribir el texto con el símbolo almohadilla delante de él: el símbolo almohadilla (#) es para confirmar que es un enlace anclado, y el nombre que escribimos a continuación, tiene que ser el mismo que hemos puesto en el
“texto alternativo” del anclaje, ya que lo que queremos se identifica con este texto
- Guarda la página con los cambios y pulsar la tecla de función F5
12.6 EJEMPLO GUIADO PASO A PASO
- En la misma página en la que estamos, sitúa el cursor delante del texto “hipervínculo Absoluto”.
- Clic sobre la opción de “Enlace Interno” que se encuentra en la barra de herramientas.
menús. … otra manera de acceder a esta opción es mediante la barra de
- Clic sobre el “Menú Insertar”
- Y seleccionar la opción “Enlace Interno”
![Page 45: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/45.jpg)
.
- Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace, escribir: “SUBIR”
- Pulsar el botón para verificar el nombre y el enlace.
- Nos aparecerá el ancla delante del texto.
- Bajar con las barras de desplazamiento hasta que desaparezca el texto de la pantalla (puede que sea necesario dar a ENTER para crear más líneas), y hacer clic para situar el curso de texto en esta zona.
- Escribir el texto “SUBIR”
- Seleccionar el texto que acabamos de escribir y pulsar el botón derecho sobre él.
- Nos aparecerá el “Menú Contextual”
![Page 46: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/46.jpg)
.
- Pulsar la opción “Crear enlace” y nos aparecerá la siguiente ventana.
- Escribir el siguiente texto “#SUBIR”: el símbolo almohadilla (#) es para confirmar que es un enlace anclado, y el nombre que escribimos a continuación, tiene que ser el mismo que hemos puesto en el “texto alternativo” del anclaje, ya que lo que queremos que nos haga es que al pulsar en el enlace “subir”, nos suba directamente a donde esté el ancla, al principio
de la página.
- Guarda la página con los cambios y pulsar la tecla de función F5
- Clic sobre el enlace “Subir” y nos tendrá que subir automáticamente al inicio de la página, en donde habíamos insertado el “enlace anclado”.
12.7 HIPERVÍNCULO ANCLADO CON IMÁGENES O FLECHAS UP
Se utiliza de la misma manera que el explicado anteriormente, sólo que utilizaremos una imagen para que nos permita movernos por las páginas.
![Page 47: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/47.jpg)
.
“FLECHAS UP” son imágenes de flechas, que hacen más visual la indicación de subir o bajar, que si se hiciese con el texto.
Vamos a explicar los pasos que tendremos que seguir para su realización.
- Situar el cursor de texto en donde queramos insertar el enlace.
- Vamos a insertar el anclaje, para ello, clic sobre la opción de “Enlace
Interno” que se encuentra en la barra de herramientas
- Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace
- Bajar con la fecha de desplazamiento hasta el final de la página, que no se vea el contenido de la página.
- Ahora vamos a insertar la imagen.
- Clic sobre el “Menú Insertar”
- Y seleccionar la opción “Imagen” o bien pulsando en el icono de la
barra de herramientas
- Nos aparecerá una ventana en donde tendremos que pulsar en la
carpeta que aparece a la derecha de la “ficha ubicación” para seleccionar la imagen que necesitamos.
![Page 48: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/48.jpg)
.
- Seleccionar la imagen que nos aparecerá y pulsando sobre ella nos trasladará a la parte de la hoja que hemos seleccionado con anterioridad
- Pulsar en el botón
- Nos aparecerá una ventana para introducir el “Texto Alternativo”. Escribir el texto en caso de querer que aparezca.
- Pulsar en el botón
- Selecciona la imagen que acabamos de insertar y pulsa en botón derecho del ratón sobre la imagen para acceder al “Menú contextual”.
- Seleccionar la opción
- Nos aparecerá una nueva ventana en donde tendremos que escribir: el texto para que cuando pulsemos sobre la flecha vaya automáticamente a donde hemos insertado anteriormente el anclaje, dentro de la “Ficha enlace”
![Page 49: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/49.jpg)
.
- Guardar todos los cambios y pulsar la tecla de función “F5”.
12.8 EJEMPLO GUIADO PASO A PASO
Se utiliza de la misma manera que el explicado anteriormente, sólo que
utilizaremos una imagen para que nos permita movernos por las páginas.
Para realizarlo deberás descargarte una imagen con una flecha, para
hacerlo puedes usar el buscador de google tal y como se ha indicado en apartados anteriores. Otra opción es usar cualquier imagen y que al pulsarla se
vaya a arriba.
Vamos a realizar un ejemplo en donde aplicaremos este nuevo concepto.
- Abrir la página “pagina_ejemplo1”.
- Situar el cursor después del texto escrito en el encabezado.
- Vamos a insertar el anclaje, para ello, clic sobre la opción de
“Enlace Interno” que se encuentra en la barra de herramientas
- Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace, escribir: “SUBIR”
![Page 50: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/50.jpg)
.
- Bajar con la fecha de desplazamiento hasta el final de la página, que no se vea el contenido de la página.
- Ahora vamos a insertar la imagen.
- Clic sobre el “Menú Insertar”
- Y seleccionar la opción “Imagen” o bien pulsando en el icono de la
barra de herramientas
- Nos aparecerá una ventana en donde tendremos que pulsar en la
carpeta que aparece a la derecha de la “ficha ubicación” para seleccionar la imagen que necesitamos.
- En la ventana que nos aparece a continuación tendremos que abrir la carpeta que tenemos descargada del servidor denominada “imágenes_ ejemplo”.
![Page 51: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/51.jpg)
.
- Seleccionar de la imagen “flecha_subir” o la imagen que vayas a
usar (que se debería encontrar en “C:\ curso_web\”)
- Pulsar en el botón
- Nos aparecerá una ventana para introducir el “Texto Alternativo”. Escribir “Flecha Arriba”
- Pulsar en el botón
- Selecciona la imagen que acabamos de insertar y pulsa en botón derecho del ratón sobre la imagen para acceder al “Menú contextual”.
- Seleccionar la opción
- Nos aparecerá una nueva ventana en donde tendremos que escribir: “#SUBIR” para que cuando pulsemos sobre la flecha nos suba automáticamente a donde hemos insertado anteriormente el anclaje, dentro
de la “Ficha enlace”
![Page 52: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/52.jpg)
.
- Guardar todos los cambios y pulsar la tecla de función “F5”.
- Clic sobre la fecha y verás como se desplaza la página hasta donde está visible el anclaje (el ancla no sale en esta vista, pero si el lugar donde está insertado)
12.9 HIPERVÍNCULO ANCLADO CON CORREO ELECTRÓNICO
Se utiliza igual que los anteriores enlaces, sólo con la diferencia que
tendremos que seleccionar la opción para que identifique que es un correo electrónico.
La manera de proceder con este enlace es exactamente igual que los
anteriores. Vamos a realizar los pasos:
- Situamos el cursor de texto en donde queramos insertar el enlace
- Pulsar en el icono “Enlace”
- Nos aparecerá la siguiente ventana:
- Vamos a escribir en “Texto de enlace”
- En “Ubicación del enlace” escribir el e-mail de la persona.
- Activar la casilla para que el programa reconozca es un correo electrónico.
- Pulsar en el botón
- Guardar la página y pulsar la tecla de función “F5”
![Page 53: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/53.jpg)
.
12.10 EJEMPLO GUIADO PASO A PASO
Se utiliza igual que los anteriores enlaces, sólo con la diferencia que tendremos que seleccionar la opción para que identifique que es un correo
electrónico.
La manera de proceder con este enlace es exactamente igual que los anteriores. Vamos a realizar un ejemplo:
- Abrir la página con el nombre “pagina_ejemplo1” que se encuentra en “C:\curso_web”
- Debajo de lo que tenemos escrito y pulsar en el icono “Enlace”
- Nos aparecerá la siguiente ventana:
- Vamos a escribir en “Texto de enlace” “E-mail”
- En “Ubicación del enlace” escribir: [email protected]”.
- Activar la casilla para que el programa reconozca es un correo electrónico.
- Pulsar en el botón
- Guardar la página y pulsar la tecla de función “F5”
![Page 54: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/54.jpg)
.
13. ROLL – OVER
13.1 Roll – Over de texto
13.2 Ejemplo guiado paso a paso
13.1 ROLL – OVER DE TEXTO
El Roll – over nos permite que al pasar por encima de un texto, éste cambie de aspecto
Vamos a realizar los pasos a seguir:
- Escribir un texto
- Seleccionar el texto que acabamos de escribir
- Pulsar el botón derecho del ratón para acceder al “Menú contextual”
- Seleccionar la opción
- Nos aparecerá la siguiente ventana nueva.
![Page 55: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/55.jpg)
.
- En “Texto del enlace” aparecerá automáticamente el texto ya que lo teníamos seleccionado con anterioridad.
- En “ubicación del enlace” tendremos que escribir la URL la cual
queremos que se abra automáticamente cuando pulsemos sobre el texto.
- Pulsar en el botón
- Teniendo seleccionado el texto, clic en el “Menú Formato” y seleccionar
la opción
- Se abrirá la siguiente pantalla:
- Vamos a modificar el vínculo con distintos colores y fuentes, tendremos que seleccionar el texto cuando está normal, cuando es un enlace, cuando es un enlace activo y cuando ha sido visitado, pinchando en los cuadrados con colores que tenemos al lado.
-Si queremos que nos aparezca una imagen de fondo, tendremos que
pulsar en la carpeta y especificar la ruta en donde esté la imagen que queremos insertar.
- Pulsar el botón para verificar que queremos los cambios.
- Guardar la página y pulsar la tecla “F5”
![Page 56: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/56.jpg)
.
13.2 EJEMPLO GUIADO PASO A PASO
Vamos a realizar un ejemplo guiado para que sea más fácil su creación y
explicación.
- Vamos a abrir, lo primero, la página en donde vamos a crear el roll – over. Ésta va a ser “pagina_ejemplo1”.
- Situarnos por debajo de la imagen del “Lobo”.
- Escribir el siguiente texto “ROLL – OVER DE TEXTO”
- Seleccionar el texto que acabamos de escribir
- Pulsar el botón derecho del ratón para acceder al “Menú contextual”
- Seleccionar la opción
- Nos aparecerá la siguiente ventana nueva.
![Page 57: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/57.jpg)
.
- En “Texto del enlace” aparecerá automáticamente “ROLL – OVER DE TEXTO” ya que lo teníamos seleccionado con anterioridad.
- En “ubicación del enlace” tendremos que escribir la URL la cual queremos que se abra automáticamente cuando pulsemos sobre el texto. Escribir: http://www.terra.es
- Pulsar en el botón
- Teniendo seleccionado el texto de “ROLL – OVER DE TEXTO”, clic en el
“Menú Formato” y seleccionar la opción
- Se abrirá la siguiente pantalla:
- Vamos a modificar el vínculo con distintos colores y fuentes:
- En “Texto normal” vamos a seleccionar un color “Azul”
- En “Color del vínculo” Seleccionar un color “Rojo”, tendréis que pulsar
en . Es el color que queremos para nuestro vínculo.
- En “Color de sustitución” elegir el color “amarillo” ya que cuando
pasemos el cursor por encima de él se pondrá amarillo.
- En “Vínculos visitados” elegir un color “verde manzana”, para que
cuando hagamos clic sobre el enlace queremos que nos cambie de color.
- En “Vínculo activo”, elegir un color “Rosa” ya que cuando pulsemos este enlace, mientras se abre la ventana correspondiente, nos cambiará de color.
- Si queremos que nos aparezca una imagen de fondo, tendremos que
pulsar en la carpeta y especificar la ruta en donde esté la imagen que queremos insertar.
- Pulsar el botón para verificar que queremos los cambios.
![Page 58: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/58.jpg)
.
- Guardar la página y pulsar la tecla “F5”
- Clic sobre el Roll – Over de texto para ver los cambios realizados.
14. PROPIEDADES DE PÁGINA
14.1 Color de fondo
14.2 Color del texto
14.3 Ejemplo guiado paso a paso
14.1 COLOR DE FONDO
KompoZer nos permite introducir color en el fondo y hasta una imagen para realizar una creación más creativa. Para ello vamos a seguir los siguientes
pasos:
- Abrir la página en donde queremos modificar el fondo
- Pulsar en el “Menú ” y seleccionar la opción
- Nos aparecerá la siguiente ventana:
![Page 59: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/59.jpg)
.
- En tenemos la opción de , si pulsamos en el
cuadro que aparece en su línea , se desplegará una paleta de colores en donde podremos elegir el color que queremos para nuestro fondo.
![Page 60: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/60.jpg)
.
- La opción “imagen de fondo” nos permite elegir una imagen para el fondo de pantalla, tendremos que pulsar en la carpeta que nos
aparece en la parte de la derecha y se abrirá una nueva ventana.
- Elegir la imagen que queremos utilizar como fondo y pulsar el botón
de
14.2 COLOR DEL TEXTO
Nos permite cambiar el texto según el destino que tenga, es decir, si el texto es normal llevará un color, si es un enlace otro, y en caso de este último
podrás elegir si es un enlace visitado, activo.
Para ellos seguimos los siguientes pasos:
- Abrir la página en donde queremos modificar el fondo
- Pulsar en el “Menú ” y seleccionar la opción
- Nos aparecerá la siguiente ventana
![Page 61: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/61.jpg)
.
- En la opción nos aparecen dos opciones:
- , no nos permite
usar colores diferentes según la necesidad, pondrá los que tenga el programa predeterminados.
- , nos permite elegir el color de la
fuente según nuestra necesidad, para ello nos fijamos en los apartados siguientes:
- Podemos seleccionar en las subcategorías que aparecen los
distintos colores según la utilización del texto, si es un enlace,
etc… sólo tendremos que pulsar en (en la parte de la derecha nos aparecerá el color que hemos elegido como muestra.
- Una vez que hemos elegido los colores que queremos pulsar en el
botón de
![Page 62: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/62.jpg)
.
14.3 EJEMPLO GUIADO PASO A PASO
Vamos a realizar una ejemplo guiado para repasar estas nuevas opciones.
- Lo primero que vamos a hacer es abrir la página que tenemos guarda
en nuestra carpeta con el nombre de “pagina_ejemplo1”.
- Pulsar en el “Menú ” y seleccionar la opción
- Nos aparecerá la siguiente ventana
![Page 63: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/63.jpg)
.
- Vamos a modificar los colores para que quede de la siguiente manera, tendrás que pulsar en los cuadros al lado de las opciones para cambiar el color.
- Texto normal de color negro
- Texto de enlace de color azul
- Texto enlace activo de color rojo
- Texto enlace visitado de color verde
- Fondo blanco
- Ahora vamos a insertar una imagen de fondo. Para ellos tendrás que
pulsar en la carpeta que aparece al lado de
![Page 64: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/64.jpg)
.
- Se nos abrirá una nueva ventana en donde tendremos que elegir la imagen que quieras de la carpeta C:\curso_web (o donde hayas guardado la página)
- Pulsar en el botón de , y veremos en la parte superior de la
ventana la imagen aplicada como vista previa.
- Pulsar en el botón de para ver como queda en nuestra página.
![Page 65: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/65.jpg)
.
15. LAS TABLAS
15.1 Insertar tablas
15.2 Modificar el tamaño de la tabla
15.3 Ejemplo guiado paso a paso
15.1 INSERTAR TABLAS
Para insertar tablas tendremos que seguir los siguientes pasos:
- Elegir donde queremos insertar la tabla
- Clic sobre el “Menú ”, seleccionar la opción y elegir
- Se nos abrirá la siguiente ventana con varias fichas.
- En la “Ficha Rápido”, se podrá elegir la cantidad de columnas y filas que necesitemos, sólo tendremos que pulsar en el primer cuadro con el botón izquierdo del ratón y manteniéndolo pulsado arrastrar hasta que tenga la cantidad de filas y columnas que queramos.
- En la “Ficha Preciso”, podremos realizar la misma operación que en la anterior ficha, pero añadiendo de forma más precisa la cantidad de filas y columnas, así como la anchura de la tabla y los bordes de la misma.
![Page 66: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/66.jpg)
.
- En la “Ficha Celda” podremos añadir la alineación de las filas y columnas individualmente, así como si queremos ajustar el texto a las celdas o no, y el espacio entre celdas así como su relleno.
- Pulsar el botón para verificar los cambios
- Nos quedará de la siguiente manera:
Para escribir dentro sólo tendremos que hacer clic encima y escribir.
Las tablas nos permiten tener una manera fácil de poder hacer una
maquetación, ya que nos permite crear tablas dentro de tablas, crear enlaces,
hipervínculos…
![Page 67: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/67.jpg)
.
15.2 MODIFICAR EL TAMAÑO DE LA TABLA
Si queremos modificar el tamaño de la tabla sólo tendremos que situar
el puntero del ratón en una de las aristas, y cuando la flecha se convierte en una flecha de doble punta, manteniendo pulsado el botón izquierdo del ratón,
arrastrar hasta que tenga el tamaño deseado.
15.3 EJEMPLO GUIADO PASO A PASO
- Clic sobre el “Menú ”, seleccionar la opción y elegir
- Se nos abrirá la siguiente ventana con varias fichas.
- En la “Ficha Rápido”, se podrá elegir la cantidad de columnas y filas que necesitemos, sólo tendremos que pulsar en el primer cuadro con el botón izquierdo del ratón y manteniéndolo pulsado arrastrar hasta que tenga la cantidad de filas y columnas que queramos.
… En nuestro caso selecciona 2 filas y 2 columnas, como aparece en el
modelo anterior.
- En la “Ficha Preciso”, podremos realizar la misma operación que en la anterior ficha, pero añadiendo de forma más precisa la cantidad de filas y columnas, así como la anchura de la tabla y los bordes de la misma.
![Page 68: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/68.jpg)
.
… vamos a escribir filas (2), columnas (2), anchura (100%) para que se ajunte a la página, y bordes (2).
- En la “Ficha Celda” podremos añadir la alineación de las filas y columnas individualmente, así como si queremos ajustar el texto a las celdas o no, y el espacio entre celdas así como su relleno.
… vamos a poner alineación centrada tanto horizontal como vertical, pulsar “ajustar” en ajustar texto, en espacio entre celdas (2) y el relleno de las
celdas (2)
- Pulsar el botón para verificar los cambios
- Nos quedará de la siguiente manera:
![Page 69: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/69.jpg)
.
- Para escribir dentro sólo tendremos que hacer clic encima y escribir. Rellenar con los siguientes datos.
Las tablas nos permiten tener una manera fácil de poder hacer una
maquetación, ya que nos permite crear tablas dentro de tablas, crear enlaces, hipervínculos…
16. SUBIR LA PÁGINA Web AL SERVIDOR
16.1 SUBIR LOS FICHEROS AL SERVIDOR/INTERNET
Una vez realizada una o varias páginas webs, para que estas sean
accesibles desde Internet por cualquier persona, es necesario subirlas al servidor (subirlas a Internet).
Las páginas webs son ficheros iguales que los subidos en la práctica de subida de ficheros vía FTP (core_ftp) por lo que se deberá seguir nuevamente
todos los pasos, pero en lugar de subir los ficheros del ejemplo anterior, esta vez se deben subir la página o páginas creadas, así como las imágenes que se
usen en estas páginas.
Los pasos básicos serán:
- Abrir el programa FTP, en nuestro caso core_ftp
- Conectarse al servidor siguiendo los pasos del tema 8.8.
- Entrar en el directorio personal, por ejemplo web0000, si no se
hubiese creado, habría que crearlo.
- Seleccionar los documentos (páginas webs, imágenes, …) que se vayan a subir a Internet/servidor y subirlos.
- Comprobar que se accede correctamente a ellos desde Internet.
16.2 EJEMPLO GUIADO PASO A PASO
PRIMERO DEBEMOS CONECTARNOS AL ESPACIO Web o SERVIDOR:
- Primero abrimos el programa Core_FTP
- Tendremos que pulsar en el “Menú Sites”
- Seleccionar en el submenú que se despliega la opción .
![Page 70: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/70.jpg)
.
- Se abrirá la siguiente pantalla en donde tendremos que introducir los datos correspondientes, que recibimos en el email de activación de la cuenta para poder acceder a nuestro sitio web.
Los datos correspondientes son:
Site name: podemos introducir cualquier nombre
Host/IP/URL: FTP Hostname
Usuario: FTP Username
Contraseña: FTP Password
FTP Hostname, FTP Username y FTP Password son los datos que recibimos
en el email de activación de la cuenta en el servicio de hosting 000webhost.com. Todos los pasos puede revisar en el capitulo 8.8 del manual.
- Pulsar el botón para conectarnos al servidor.
- Nos aparecerá en la parte de la derecha todos los archivos que estén a nuestra disposición del servidor.
![Page 71: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/71.jpg)
.
Una vez que estamos conectados con el servidor podemos trabajar para
subir y bajar ficheros.
SUBIR LAS WEBS E IMÁGENES AL DIRECTORIO PERSONAL
Vamos a detallar paso a paso todo lo que tendréis que realizar para poder subir los ficheros que necesitáis para realizar la actividad perteneciente a la
tarea 2 y que posteriormente se tendrá que enviar al tutor para su revisión y comprobación de que esta actividad ha sido realizada.
- Lo primero que tenemos que hacer es seleccionar la carpeta en nuestro ordenador en donde tenemos los archivos que vamos a subir. En nuestro caso sería, la unidad de disco duro o local (C:), doble clic sobre “curso_Web”.
- Después de este paso en la parte izquierda te debe quedar algo
parecido a esto:
Ahora es necesario subir los ficheros de imágenes y páginas webs al directorio personal en el servidor que se llama con nuestro nombre de usuario
y que habremos creado en la tarea de FTP. Si no existiese habría que crear en la parte derecha el directorio con el nombre de usuario correspondiente.
- Como ya tendremos creado nuestro directorio (en la carpeta public_html), tenemos que buscarnos dentro del listado de la parte derecha, dentro de los directorios del servidor y pulsar doble clic encima para abrirlo.
- Una vez que está abierto, vamos a proceder a subir los ficheros y las
imágenes igual que se hizo con el fichero ftp.htm.
- Seleccionar dentro de nuestra carpeta C:\curso_web\ los ficheros que se van a subir, en nuestro caso serán los siguientes:
- flechaarriba.jpg
- flechabajar.jpg
- lobo1.jpg
![Page 72: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/72.jpg)
.
- lobo2.jpg
- lobo3.jpg
- tarea2.html
- Una vez tenemos seleccionados los documentos y estamos en la parte derecha en nuestro directorio del servidor donde vamos a subir el fichero,
pulsar la flecha “Upload” para suvir al servidor el fichero.
- Nos quedará de la siguiente manera.
Ahora debemos comprobar que realmente se ha subido bien y que podemos
verlo desde Internet. Para ello tenemos que abrir una ventana de Internet (por ejemplo el Internet Explorer) e introducir la URL o dirección en la que
teóricamente se encuentra el fichero que hemos subido.
Para comprobarlo, vamos a poner un ejemplo de lo que habría que hacer si disponemos de los siguientes ficheros:
EJEMPLO:
Supongamos que el nombre de subdominio (para este ejemplo) que hemos creado sigiendo los pasos de capitulo 8.8 es:
www.webdepedrogarcia.webege.com
Nuestro usuario (para este ejemplo) es web0000
Los ficheros a subir son (para este ejemplo):
tarea2.html
![Page 73: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/73.jpg)
.
lobo1.jpg
lobo2.jpg
lobo3.jpg
Entonces deberíamos poner lo siguiente en el navegador o explorador de
Internet:
www.webdepedrogarcia.webege.com/web0000/tarea2.html
o también podríamos poner:
http://www.webdepedrogarcia.webege.com/web0000/tare
a2.html
Recuerda que en lugar de web0000 debes poner el nombre del directorio que hayas creado. Y en lugar de tarea2.html debes poner el nombre de la Web que hayas creado.
Esa dirección o URL será la que deberás probar y una vez comprobado que funciona, indicársela al tutor para superar la tarea 2.
Si no funcionase, seguramente se haya escrito algo mal o no se han subido correctamente los ficheros, recomendamos que se inicien los pasos desde cero para asegurar que se ha hecho todo correctamente.
![Page 74: MANUAL DE CERACIÓN DE PÁGINAS WEB CON EL · PDF fileprograma de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización](https://reader034.vdocumento.com/reader034/viewer/2022051721/5a79d4397f8b9ad7608cff5c/html5/thumbnails/74.jpg)
.