Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Apuntes Kompozer PDF
Apuntes Kompozer PDF
Informática Máster
Colegio Internacional Nuevo Centro
Curso 2011-2012
1. LENGUAJES UTILIZADOS PARA DISEÑO Y PROGRAMACIÓN DE
PÁGINAS WEB
Frontpage, de Microsoft →
FrontPage.lnk
Dreamweaver, de Macromedia →
Dreamweaver MX 2004.lnk
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.
1.2. OTROS PROGRAMAS UTILIZADOS
Flash MX 2004.lnk
2.1 Concepto
2.1 CONCEPTO
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:
- Letras mayúsculas
- Tildes
http://w3.cnice.mec.es/recursos/bachillerato/tecnologia/manual/index.html
Este curso ha sido diseñado para familiarizar al alumno con las bases
fundamentales del diseño 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 (</>).
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:
5. EL PROGRAMA KOMPOZER
- Pulsar en el botón
Bien MAL
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”
http://www.google.es/
- Nos aparecerá la siguiente ventana:
- Letras mayúsculas
- Tildes
10.3.2. Tamaño
10.3.3. Color
10.3.4. Estilo
10.6 Sangría
10.8 Autoevaluación
En este apartado vamos a ver como podemos modificar los formatos del
texto para mejorar su presentación.
Forma 1:
- Seleccionar el texto que queremos modificar
- Pulsar en el “Menú ”
- Seleccionar la opción
. .
Forma 2ª:
- Seleccionar el texto al cual vamos a cambiar el tipo de
fuente.
- 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.
10.3.2 Tamaño
10.3.3 Color
10.3.4 Estilo
Negrita Subrayado
Cursiva
Para acceder a esta opción tenemos que seguir los siguientes pasos:
- Pulsar en el “Menú ”
. .
Numeración Viñetas
- Pulsar el botón
10.6 SANGRÍA
Con todas las modificaciones que hemos realizado con el texto escrito, nos
debería de quedar el resultado final de la siguiente manera.
- 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”
. .
- Ahora vamos a cambiar los formatos del texto, que sirven para
predeterminar si queremos encabezados, párrafos,etc.
Ahora vamos a cambiar la fuente del resto del texto accediendo a través
de la barra de herramientas:
Numeración Viñetas
- Pulsar el botón
Con todas las modificaciones que hemos realizado con el texto escrito, nos
debería de quedar el resultado final de la siguiente manera (aproximadamente)
.
11. IMÁGENES
11.1 Insertar imágenes
barra de herramientas
- Se nos abrirá una nueva ventana con distintas fichas,
- Ficha “Ubicación”:
.
- 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.
Insertar Imágenes
barra de herramientas
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
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
- Nos aparecerá una nueva ventana para añadir el texto para identificar
el nombre del enlace
- Nos aparecerá una nueva ventana para añadir el texto para identificar
el nombre del enlace, escribir: “SUBIR”
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
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.
.
- 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
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.
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.
- 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
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.
- Pulsar en el botón
- Guardar la página y pulsar la tecla de función “F5”
.
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.
- Pulsar en el botón
- Guardar la página y pulsar la tecla de función “F5”
.
13. ROLL – OVER
13.1 Roll – Over de texto
El Roll – over nos permite que al pasar por encima de un texto, éste
cambie de aspecto
- Seleccionar la opción
- Nos aparecerá la siguiente ventana nueva.
.
- Pulsar en el botón
- Teniendo seleccionado el texto, clic en el “Menú Formato” y seleccionar
la opción
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.
.
- Pulsar en el botón
- Teniendo seleccionado el texto de “ROLL – OVER DE TEXTO”, clic en el
“Menú Formato” y seleccionar la opción
- Clic sobre el Roll – Over de texto para ver los cambios realizados.
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:
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.
- , no nos permite
usar colores diferentes según la necesidad, pondrá los que
tenga el programa predeterminados.
- Una vez que hemos elegido los colores que queremos pulsar en el
botón de
.
Vamos a realizar una ejemplo guiado para repasar estas nuevas opciones.
- Fondo blanco
- Ahora vamos a insertar una imagen de fondo. Para ellos tendrás que
pulsar en la carpeta que aparece al lado de
.
- 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)
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…
.
… 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.
- 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…
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.
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.
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:
- flechaarriba.jpg
- flechabajar.jpg
- lobo1.jpg
.
- lobo2.jpg
- lobo3.jpg
- tarea2.html
EJEMPLO:
www.webdepedrogarcia.webege.com
Nuestro usuario (para este ejemplo) es web0000
tarea2.html
.
lobo1.jpg
lobo2.jpg
lobo3.jpg
www.webdepedrogarcia.webege.com/web0000/tarea2.html
o también podríamos poner:
http://www.webdepedrogarcia.webege.com/web0000/tare
a2.html