DREAMWEAVER

1
DREAMWEAVER
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
19
20 21 22 23 24 25 26
1
2
COMENZAMOS INICIO / PROGRAMAS / DREAMWEAVER.
La página principal o por la cual se comienza a
nevegar la llamaremos por convención index por
lo tanto la primer página del sitio será
index.html
2
3
La página por defecto tiene por nombre
predeterminado
Cuando guardamos la página le daremos un nombre
asociado a su contenido, y si es la primer página
del sitio ya mencionamos que la llamaremos Index
3
4
PROPIEDADES DE PÁGINA
Sobre la página, buscamos en el menú contextual
la opción propiedades-de página. Se abre una
ventana como la que se muestra, donde podemos
elegir el fondo de la página de color o bien una
imagen también el tipo y color de fuente,
negrita, etc
4
5
ASOCIAMOS AL CODIGO HTML
5
6
CONFIGURACIÓN DE LOS FORMATOS DE VÍNCULOS
Intenta crear una página en Dreamweaver, y
aplicar las propiedades de página y de vínculo
que te resulten adecuadas. Guarda la página con
el nombre index en una carpeta con un nombre que
consideres adecuado
EJECUTAR PROGRAMA
6
7
CÓDIGO HTML
7
8
TABLA MODO ESTANDAR
Luego puedes darle atributos a la tabla como
color y tipo de fuente, color de fondo de celdas,
de los bordes, grosor de los bordes, espacio
entre celdas, etc
8
9
TABLA MODO DISEÑO
Acá también, desde propiedades de la tabla puedes
darle atributos a la misma
9
10
DETERMINACIÓN DE SUS ATRIBUTOS (ESTANDAR)
Observa las modificaciones que puedes hacer en
una tabla e intenta aplicarlas en modo Estandar
construyendo una tabla de 3 filas por 4 columnas
EJECUTAR PROGRAMA
Si pudiste observar las diferencias al construir
una tabla en modo Estandar continuamos
Construyendo tablas en modo diseño
10
11
CONSTRUCCIÓN DE TABLA A MODO DISEÑO
Para construir una tabla en modo diseño, primero
debemos construir el marco de la tabla que luego
contendrá en cada fila las celdas que se
necesiten. Emj Construiremos primero el
esqueleto de la tabla. Observamos paso por paso
Luego completamos en este esqueleto la cantidad
de celdas que necesitemos en cada fila. Por
ejemplo construyamos 2 filas con 3 celdas en cada
fila. La tabla de 714 pixeles y las celdas y
filas distribuidas en igual tamaño (cada celda de
un ancho de 238 y su alto 104 pixeles
respectivamente
11
12
OBSERVAMOS COMO QUEDA
12
13
CONSTRUIMOS
Una tabla similar a ésta con cabecera y luego 2
filas con 3 columnas
ASOCIAMOS CÓDIGO
13
14
ATRIBUTO COLSPAN
Codigo lttable border"5" cellpading"2"
cellspacing"2"gt lttrgtlttd width"250"
height"100"gt celda 1 lt/tdgt lttd width"250"
height"100"gt celda 2 lt/tdgt lt/trgt lttrgt lttd
colspan"2" width"500" height"200"gtcelda 3lt/tdgt
lt/trgt lt/tablegt lttable border"5" cellpading"2"
cellspacing"2" width"500" height"200"gt
lttrgtlttdgt celda 4 lt/tdgt lt/trgt lt/tablegt
Las tablas pueden ser mas complejas. Se puede
subdividir de una misma tabla (Tabla 1) una de
las filas, pero no se subdivide la otra fila de
esa misma tabla por lo tanto se usa la
instrucción colspan. En cambio la otra fila como
está contenido dentro de otra tabla (Tabla 2 ) no
necesita del colspan
14
15
ATRIBUTO ROWSPAN
La celda 1 tiene un rowspan pues está dividida
en 2.
Código de la tabla superior lttable width"700"
height"200" cellpadding"12" cellsapcing"12"
border"12"gt lttr height"200"gt lttd rowspan"2"
height"100" width"400"gt1lt/tdgt lttd width"300" gt
2lt/tdgt lt/trgt lttrgt lttd width"300" height"100" gt
3lt/tdgtlt/trgt lt/tablegt
15
16
Código de la tabla inferior lttable
cellpadding"12" cellsapcing"12" border"12"
width"700" height"200"gt lttrgt lttd
width"100"gt1lt/tdgt lttd width"100" gt 2lt/tdgt lttd
width"100"gt3lt/tdgt lttd width"100" gt 4lt/tdgt lttd
width"100"gt5lt/tdgt lttd width"100" gt 6lt/tdgt lttd
width"100"gt7lt/tdgt lt/trgt lt/tablegt
La tabla inferior necesitó del atributo colspan
16
17
TABLA COMBINADA
La tabla1 contiene a la tabla2 y a la tabla3
lttable border"1 width"100 height"53"gt
lttrgtlttd width"50" height"50"
owspan"2"gt celda 7 lt/tdgt lttd width"50"
height"68"gtcelda 8 lt/tdgt lt/trgt lttrgt lttd
width"50" height"23"gtcelda 9lt/tdgt lt/trgt lttrgt
lttd width"50" height"23" gtcelda 10 lt/tdgt lttd
width"50" height"23"gtcelda 11 lt/tdgt lt/trgt
lt/tablegt
lttable border"1" height"150"gt lttrgtlttd
height"25" colspan"2"gt celda 1 lt/tdgtlttd
rowspan"2" width"65" height"50" gt celda 3
lt/tdgtlt/trgt lttrgtlttd colspan"2" height"25"gt
celda 2 lt/tdgtlt/trgt lttrgtlttd width"45" height"91"
gt celda 4 lt/tdgtlttd width"45"height"91" gt celda
5 lt/tdgtlttd width"65"height"91" gt celda 6
lt/tdgtlt/trgt lt/tablegt
17
18
CONSTRUYE A MODO DISEÑO
Ingresa al Dreamweaver y construye una tabla
similar
18
19
IMAGEN
Insertamos una imagen desde Inserta /
Imagen. Controla que la imagen tenga una
extensión JPG o bien Gif. Ingresa a Dreamweaver,
construe una tabla e inserta una imagen
RECORDAMOS HTML ASOCIADO lt CENTER gt lt IMG
SRCpajaro.gif" gt lt /CENTER gt imagen en la zona
derecha lt IMG SRC"pajaro.jpg" ALIGNRIGHT
gt  imagen en la zona izquierda lt IMG
SRC"pajaro.jpg" ALIGNLEFT gt
Ingresa al Dreamweaver
19
20
SONIDO
MIDI responde a las siglas de Musical Instrument
Digital Interface, y apareció en 1983. No es
realmente un formato de audio, sino que es un
protocolo por el cual varios intrumentos
musicales electrónicos, incluidos las tarjetas de
sonido de los ordenadores, se pueden conectar y
interactuar entre ellos para producir música. De
todas formas, mucha gente utiliza la palabra
"MIDI" para referirse a ficheros (secuencias)
producidas por dispositivos MIDI. A diferencia
del resto de formatos de audio, los archivos
MIDI, no contienen música grabada, sino un
conjunto de instrucciones que indican como tocar
un tono. Los archivos MIDI son muy pequeños y,
por lo tanto, excelentes para utilitzar en
páginas Web y otras aplicaciones. Solo unos
segundos de descarga, aun teniendo una pequeña
velocidad de conexión, pueden significar muchos
minutos para escuchar buena música. Los archivos
MIDI se pueden reproducir en la mayoría de
navegadores sin tener que instalar ningún plugin
20
21
SONIDO POR CÓDIGO
El sonido se puede reproducir de dos formas De
forma automática cuando el usuario acceda a la
página o sólo cuando el usuario pulse sobre un
"enlace" que se ponga a propósito. También
podemos hacer que el sonido se reproduzca una
sola vez o varias. Veamos algunos ejemplos de
ordenes lt EMBED SRC "melodia.mid"
autostartfalse gt Aparecerá una ventana de
reproductor de sonidos y no se reproducirá el
sonido al acceder a la página, hasta que el
usuario pulse el icono de poner en marcha"gt". lt
BGSOUND SRC "cancion.mid" LOOP"2" gt Con esta
orden es como se ha conseguido reproducir dos
veces al comienzo de tu acceso la canción (o la
melodia si hubiesemos puesto " melodia.mid ") .
ltembed src"NOMBRE DEL ARCHIVO MIDI"
align"baseline" border"5" width"68"
height"25" autostart"on" loop"30"gt
21
22
APLÍCALO
iNGRESA
22
23
ENLACES
Enlaces en una página Una de las formas de
hacer que desde una página podamos acceder a otra
página es la de usar una zona de texto que
llamaremos "enlace" (en inglés link ). Gracias a
este "enlace", si pinchamos con el cursor del
ratón (hacer click) sobre dicho texto podremos
acceder a ver la información de la página a la
cual conecta (esta página puede ser externa a
nuestro sitio o bien pertenecer a nuestro
sitio). Para ello, usaremos los siguientes
comandos de apertura y cierre del " texto de
enlace " lt A HREF" nombre.htm " gt dando el
nombre del fichero que contiene la página con la
que enlazar lt /A gt En vez de usar un texto para
enlazar páginas, también podemos usar una imagen
lt A HREF "paginaprueba.htm" gt lt IMG SRC
"icono.gif" gt lt / A gt
23
24
VINCULAMOS
Vinculamos desde Dreamweaver
Vinculamos desde código
24
25
ENLACES A UN CORREO ELECTRÓNICO
25
26
EL SIGUIENTE PASO SERÁ SUBIR NUESTRO SITIO A LA
RED
26