Unidad I: Introducción - Colegio Militar Leoncio Prado

Colegio Militar “Leoncio Prado” - Diseño Web
-
Adobe Dreamweaver CS3
SESIÓN 04: Vamos a elabora un sitio web sobre el Perú y sus regiones. Para diseñar el sitio web usaremos:
tablas, imágenes, textos, hipervinculos, imagen de sustitución, etc
Primero hay que definir el sitio web, clic en sitio/ nuevo sitio
Ingresa el nombre que desea asignar al sitio web
En nuestro caso será: peru_apellido
Ejemplo: peru_panta
Buscar y seleccionar tu carpeta…
donde está grabada toda tu información
si la ruta no aparece debes ingresarla en forma manual
(digitando la dirección)
Ejemplo: la ruta es: D:\peru_panta\
Listo… al final saldrá un resumen de la
creación de tu Sitio.
Clic en completado
_______________________________________________________________________________________
5to Año
Facilitador Alonso Panta Panta
Sesión 04: Página 1/4
Colegio Militar “Leoncio Prado” - Diseño Web
1.
-
Adobe Dreamweaver CS3
Guardamos la primera página:
- La 1era página debe llevar el nombre de index.html
- clic en archivo / guardar como
- Al guardar verificar que este guardando en mi carpeta
2.
Configuraremos la página:
- Clic derecho y elegir propiedades de página
- Cambiamos el color de fondo de la página
- Cambiamos el color del texto de la página
- Si desea también puede insertar una imagen de fondo
3.
Insertar una tabla:
Clic en INSERTAR / TABLA O CTRL + ALT + T
-Filas = 13
-Columnas = 3
-Grosor de borde = 2 Pixeles
-Ancho de Tabla = 100 Porcentaje
-Relleno de celdas = 1
-Espacio entre celdas 1
4.
Combinar las celdas: Seleccionar las celdas y clic en el botón combinar celdas…
1ero combinamos las celdas de la cabecera
2do Combinamos las celdas del centro
5.
Insertar imágenes
- Las imágenes están en D:\peru_panta\global\
- Clic en insertar / imagen
(selecciona la imagen de la carpeta)
|- Aparecerá el recuadro de texto alternativo
(Ingresa un texto, este texto se visualizará cuando pases el puntero
del mouse sobre la imagen)
-Ingresa las imágenes y asígnales el tamaño indicado:
A la imagen principal
- Ancho = 128
- Alto = 95
A la imagen mapa01
- Ancho = 735 - Alto = 95
A la imagen cabecera
- Ancho = 735 - Alto = 95
Guarda el archivo:
-Clic en Archivo / Guardar Como
- Guardar con el nombre de index.html
En el panel propiedades cambiamos el ancho y alto de una imagen
_______________________________________________________________________________________
5to Año
Facilitador Alonso Panta Panta
Sesión 04: Página 2/4
Colegio Militar “Leoncio Prado” - Diseño Web
6.
-
Adobe Dreamweaver CS3
Guardamos la página con otro nombre:
-Clic en archivo / guardar como y guardaremos con el nombre de cusco para crear la página Cusco.html
7.
Modificando la Página cusco.html
-Elimina la imagen del mapa del Perú y luego inserta una tabla
- Filas = 4
- Columnas = 3
- Borde = 0
8.
Copia y pega el texto, de cusco.txt, luego inserta la imagen…
Para alinear el texto con relación a la imagen
Clic en Alinear = Izquierda
Nos debe quedar así nuestra página cusco
Las imágenes deben tener
las siguientes medidas:
-Ancho=200
-Alto 209
-Ancho=582
-Alto 180
-Ancho=194
-Alto 90
_______________________________________________________________________________________
5to Año
Facilitador Alonso Panta Panta
Sesión 04: Página 3/4
Colegio Militar “Leoncio Prado” - Diseño Web
9.
-
Adobe Dreamweaver CS3
Abrir index.html
- Insertar imágenes de sustitución
- Crear vínculos con las imágenes de sustitución.
- Clic en el menú : Insertar / objetos de imagen / imagen de sustitución
- Nombre de la imagen: b_cusco
- Imagen original: clic en examinar y busca el archivo
- Imagen de sustitución: clic en examinar y busca el archivo
- Digita el texto alternativo
- Al hacer clic, ir al url: clic en examinar y busca el archivo
Luego de dar clic en aceptar aparecerá la imagen de sustitución insertada en la página cusco.html
10.
Abrir cusco.html
-En la página cusco.html procedemos a crear el hipervínculo de regreso… a index.html
- Seleccionamos el botón principal
- En la barra de propiedades clic en vínculo
- Selecciona el archivo index.html
Listo ahora guarda y visualiza… prueba los hipervínculos…
Al dar clic en principal debo ir a index.html
index.html
Clic en cusco…
Debe saltar a la
página cusco.html
Adicional a las Páginas: index.html y cusco.html
Los cadetes deben realizar 1 pagina más.
_______________________________________________________________________________________
5to Año
Facilitador Alonso Panta Panta
Sesión 04: Página 4/4