You are on page 1of 51

Macromedia Dreamweaver Tutorial

Axel Quiroz Salinas

INICIAR DREAMWEAVER SELECCIN HTML

VENTANA DE DREAMWEAVER

SECCIONAR ARCHIVO> NUEVO

SELECCIONAR HTML, CREAR

VENTANA> INSERTAR Y PROPIEDADES, ARCHIVOS TIENEN UNA MARCA DE VERIFICACIN CUANDO EST ACTIVO

MODIFICAR> PROPIEDADES DE LA PGINA

FUENTE APARIENCIA, TEXTO, COLOR DE FONDO

LINKS, LINK, VISIT COLORES DE LOS ENLACES

HAGA CLIC EN EL CURSOR EN LA PGINA, SELECCIONE ALINEACIN, ESCRIBIR EL TEXTO

Ventana> Propiedades Centro botn de alineacin

RESALTAR TEXTO, SELECCIONAR FUENTE ARIAL

Ventana> Propiedades Fuente Pop-up Menu

RESALTE EL TEXTO Y SELECCIONE EL TAMAO DE FORMATO TTULO

Ventana> Propiedades Pop-up Formato para el tamao Ttulo Denominacin: Ejemplo 2

O PARA CREAR UN TTULO CON UN GRFICO: INSERTAR TABLA> SELECCIONAR ICONO O TABLA

ESTABLECER FILA, COLUMNA, ANCHO DE TABLA, BORDE, OK


Title Example: 1 Row
2 Columns

AJUSTAR ANCHO DE COLUMNA

Arrastre la tabla Line columna de la izquierda o derecha para ajustar el ancho

ANTES DE AADIR IMGENES GRFICAS IR A ARCHIVO> GUARDAR COMO> NOMBRE DEL ARCHIVO

Recuerde que debe utilizar todas las letras minsculas, sin espacios ni caracteres especiales

RECUERDE QUE DEBE UTILIZAR TODAS LAS LETRAS MINSCULAS, SIN ESPACIOS NI CARACTERES ESPECIALES HAGA CLIC EN LA CELDA DE LA IZQUIERDA, INSERTAR> IMAGEN O UTILICE EL ICONO DE IMAGEN, BUSQUE?. GIF O. JPG

Ventana> Insertar Men

Para insertar un logotipo o grfico en un encabezado

HAGA CLIC EN LA CELDA DE LA DERECHA Y TIPO PARA AADIR EL TTULO

SELECCIONE LA TABLA, SELECCIONE BG AGREGAR UN COLOR DE FONDO

Men Ventana> Propiedades

HACER FRONTERA INVISIBLE CUADRO, SELECT

Seleccione Borde de la tabla

Men Ventana> Propiedades

MEN VENTANA> PROPIEDADES PARA AGREGAR TABLA DE NAVEGACIN, INSERTAR> TABLA O TABLA ICONO

1 Fila 7 Nmero mximo de columnas

HAGA CLIC EN EL INTERIOR DE LA CLULA PRIMERO EN AADIR UN BOTN DE NAVEGACIN EN FLASH

INSERTAR> MEDIA> FLASH BUTTON

ONFIGURACIN DE BOTONES: ESTILO, TEXTO, UENTE, LINK, TAMAO, APLICAR, ACEPTAR Recuerde que al cargar su sitio web al servidor para agregar el archivo. Swf botones Flash ha creado

REPITA EL PROCEDIMIENTO PARA TODOS LOS BOTONES AGREGAR

Si necesita editar el botn despus de se ha creado o para comprobar los enlaces haz doble clic en el botn de nuevo, cambiar las funciones, Aplicar, Aceptar.

EJEMPLO DEL TTULO COMPLETO Y BOTONES DE NAVEGACIN

Usted puede tener diferentes ttulos para los botones de navegacin

ENLACES EXTERNOS: ESCRIBA EL TEXTO Y RESALTAR, ESCRIBA EL URL LINK & KEY PULSE INTRO

http://www.google.com

ENLACES INTERNOS: ESCRIBA EL TEXTO Y PONER DE RELIEVE, EL TIPO DE ENLACE DE URL Y LLAVE PULSE INTRO

index.html

VNCULOS DE CORREO ELECTRNICO: ESCRIBA EL TEXTO Y PONER DE RELIEVE, EL TIPO DE ENLACE DE URL Y LLAVE PULSE INTRO

mailto:hollandj@emporia.edu

PARA AGREGAR UN GRFICO, AGREGAR UNA TABLA, Y AJUSTAR EL ANCHO DE COLUMNA


Ejemplo: 1 Fila 2 Columnas

HAGA CLIC EN LA CELDA DE LA IZQUIERDA, SELECCIONE INSERTAR> IMAGEN O ICONO DE IMAGEN


Busque Imagen grfica: . gif . jpg elegir

HAGA CLIC EN LA CELDA DE LA DERECHA Y AADA SU TEXTO


Puede necesitar ajustar el ancho de columna Ajustar fuente a Arial

LAS ANCLAS SE USAN PARA SALTAR HACIA ABAJO EN UNA PGINA LARGA DE TEXTO

RESALTE WORD, EN EL CUADRO VINCULAR EN EL # NOMBRE

SELECCIONA EL TEXTO PARA ENLAZAR, ANCHOR INSERTAR> NOMBRE

ESCRIBA FRASE EXACTA NOMBRE, EJEMPLO: AGOSTO, OK

OBSERVE EL ANCLA AMARILLA ESTA NO SE MOSTRAR CUANDO SE PUBLIQUEN

ARCHIVO> GUARDAR COMO, ESCRIBA EL NOMBRE Y UBICACIN

Example index.html or standards.htm

ARCHIVO> VISTA PREVIA EN EL NAVEGADOR> EDITAR LISTA DE NAVEGADORES

SELECCIONE INTERNET EXPLORER PRIMARIA, SECUNDARIA NETSCAPE

ARCHIVO> VISTA PREVIA EN EL NAVEGADOR> INTERNET EXPLORER

OBSERVE CMO EL NAVEGADOR SE ABRE ANTE UNA VISTA PREVIA DE LO QUE SE VER COMO CUANDO CARGAN EN EL SERVIDOR

Cuando termine de ver Close Browser Botn Rojo

OPCIONES DE VISUALIZACIN: CDIGO HTML

OPCIONES DE VISUALIZACIN: CDIGO SPLIT & DESIGN

Usted puede resaltar reas en modo de diseo y Ver en el cdigo

OPCIONES DE VISUALIZACIN:? DE DISEO PARA CREAR Y EDITAR PGINAS WEB

ARCHIVO> GUARDAR COMO, ESCRIBA EL NOMBRE Y UBICACIN

ejemplo index.html o standards.htm

NUEVA CARPETA: WEBSITE1 (GUARDAR ARCHIVOS DE PGINAS WEB DENTRO DE LA CARPETA)


website1

website2
website3 website4 website5 Reminder: Lowercase No Spaces

EJEMPLO DE LOS ARCHIVOS EN SU SITIO WEB UNA CARPETA


Debe tener una pgina principal llamada index.html

Los nombres de las pginas puede ser diferente de este ejemplo y ser una coincidencia exacta con los botones de navegacin

SUBIR TODOS LOS ARCHIVOS PARA CONDUCIR ESPACIO WEB SERVER

public_html
website1
index.html goals.htm instructor.htm syllabus.htm grading.htm rules.htm sitemap.htm graphic1.jpg graphic2.gif

website2
index.html task.htm process.htm resources.htm evaluation.htm standards.htm conclusion.htm graphic1.jpg graphic2.gif

EJEMPLO CONVENIOS DE DENOMINACIN DE ARCHIVOS


website1

Todas las letras minsculas Short nombres descriptivos No hay espacios No hay caracteres especiales Nombres Exact Match para botones de navegacin Extensiones de archivo correcto WebSite1 (Nombre de carpeta) index.html

index.html
goals.htm instructor.htm syllabus.htm grading.htm rules.htm sitemap.htm graphic1.jpg graphic2.gif

Consultas: Axel0109@gmail.com

You might also like