Vous êtes sur la page 1sur 126

Carlos Zepeda Chehaibar

Di seo Web
Dreamweaver

CS4
Li bro del Profesor
ISBN: 978-607-727-008-9
Carlos Zepeda Chehaibar
Di seo Web
Dreamweaver

CS4
Li bro del Profesor
Diseo Web
Dreamweaver

CS4
DERECHOS RESERVADOS 2012 MMXI I por Grupo Educare, S. A. de C. V.
Est a es una obra prot egida por las leyes int ernacionales de derechos de aut or. Prohibida la reproduccin t ot al
o parcial de est a obra y/ o los recursos que la acompaan, por cualquier medio, sin aut orizacin escrit a de
Grupo Educare, S. A. de C. V.
Grupo Educare, el logot ipo de Grupo Educare, el logot ipo del Programa de I nformt ica Educat iva, son
propiedad de Grupo Educare, S. A. de C. V.
El diseno editorial y contenidos grahcos son propiedad exclusiva de Grupo Educare, S.A. de C.v.
Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos hcticios, a menos
que se indique lo contrario. Las citas, imagenes y videogramas utilizados en esta obra se utilizan unicamente con hnes didacticos y para la critica
e investigacin cientihca o artistica, por lo que el autor y Grupo Educare, S. A. de C. v. no asumen ninguna responsabilidad por el uso que se d
a esta informacin, ni infringen derecho de marca alguno, en conformidad al Articulo 1+8 de la Ley Federal del Derecho de Autor.
Nicrosoft Ofhce, NS DOS, NS Windows, Word, PowerPoint, Excel, FrontPage y Access y sus logotipos son marcas comerciales de Nicrosoft
Corporation. Nicrosoft y el logo de Nicrosoft Ofhce son marcas registradas de Nicrosoft Corporation en los Estados Unidos yfo en otros paises.
Nicrosoft no patrocina, endosa o aprueba esta obra. Flash, !llustrator, Fireworks, Freehand, Dreamweaver, Photoshop y sus logotipos son marcas
regist radas de Adobe I nc. Adobe no pat rocina o endosa est a obra.
Editado por Grupo Educare S.A. de C.V.
Cerro de Mesontepec #83
Colonia Colinas del Cimatario
Quertaro, Quertaro C.P. 76090
ISBN 978-607-727-008-9
Primera Edicin
Impreso por Grupo Formavi, S.A. de C.V.
Calz. Santo Toms #139, col. Santo Toms
Del. Azcapotzalco, Mxico, D.F. C.P. 02020
Impreso en Mxico, D.F. Mayo 2012
Printed in Mexico
Autor:
Carlos Zepeda Chehaibar
Apoyo en desarrollo y actividades:
Samantha Mndez Domnguez
Apoyo en actualizacin:
Csar Carranza Contreras
Coordinacin Editorial:
Alejandro Flores Ledesma
Diseo Editorial:
Csar Carranza Contreras
Apoyo Editorial:
Sandra A. Rodrguez Romero
Correccin de estilo:
Jennifer P. Castillo Ascencio
Desarrollo de Tutoriales:
Johannes Pea Corts
Direccin de Arte:
Alfredo Salazar de la Vega
Coordinador Ilustracin Portada:
Mario Martnez Ramrez
Ilustracin de portada:
Ana Mara Gonzalez Marmolejo
Ilustracin de interiores:
Judith Lourdes Sierra Prez
Miriam Tatiana Zamora Gutirrez
Csar Carranza Contreras
Revisin de Recursos Digitales:
Jennifer Priscila Castillo Ascencio
Gregorio Snchez Hernndez
Diseo Web
Dreamweaver

CS4
Unidad 1 Introduccin a HTML 9
TEMA A Navegadores 10
Lmina 1-01 Uso del Navegador y Motores de Bsqueda 10
TEMA B Tipos de estructuras clsicas 11
Actividad 1-01 Identificando estructuras 12
Proyecto 1-01 Estructura bsica de una pgina Web 12
TEMA C HTML y Tags 14
Estructura general de una pgina 14
Video 1-01 HTML y tags 15
En dnde escribir el cdigo fuente? 15
Video 1-02 En dnde escribir el cdigo fuente? 15
Actividad 1-02 Visualizando el cdigo fuente 16
Los tags ms importantes de HTML 17
Lmina 1-02 Tags ms importantes de HTML 19
Proyecto 1-02 Una pgina bsica 19
Proyecto 1-03 Editando un documento Web 21
Evaluacin 01 22
Contenido
Unidad 2 Tu primer sitio 23
TEMA A Trabajo con color 24
Lmina 2-01 Colores en HTML 24
Esquema de colores 25
Video 2-01 Trabajo con Color 25
TEMA B Trabajo con ligas 26
Video 2-02 Trabajo con ligas 26
Links para correo electrnico (mailto) 26
Video 2-03 Links para correo electrnico 27
Proyecto 2-01 Descubriendo nuevos tags 28
TEMA C Trabajo con listas 30
Video 2-04 Trabajo con listas 30
Proyecto 2-02 Creando las pginas interiores del curso 31
Listas ordenadas 31
Proyecto 2-03 Ms pginas interiores del curso 32
Listas desordenadas 32
Proyecto 2-04 Terminando el sitio del curso 33
Evaluacin 02 34
Propuesta Pedaggica I
Contenido
Unidad 3 Mejorando el aspecto visual 35
TEMA A Trabajo con rutas 36
Rutas absolutas 36
Rutas relativas 36
Video 3-01 Trabajo con rutas relativas y absolutas 36
Actividad 3-01 Escribiendo rutas 37
Lmina 3-01 Direccin URL 38
TEMA B Trabajando con imgenes 39
Imgenes de fondo (Background) 39
Imgenes en el documento 39
Borde de imagen 39
Alineacin horizontal de las imgenes 40
Alineacin vertical de las imgenes 40
Video 3-02 Trabajo con imgenes 40
Proyecto 3-01 Insertando imgenes 41
TEMA C Tablas en HTML 42
Video 3-03 Trabajo con tablas 42
Proyecto 3-02 Creando una tabla simple 43
Proyecto 3-03 Combinando celdas 44
Actividad 3-02 Escribiendo cdigo 45
Evaluacin 03 46
Unidad 4 Introduccin a Dreamweaver

47
TEMA A Flujo de trabajo para la creacin de sitios Web 48
TEMA B Definicin de requisitos del proyecto 49
Requerimientos del cliente 49
Contenido para el propsito 49
Contenido adecuado para la audiencia 49
Derechos de autor 50
TEMA C Planeacin del diseo del sitio Web 51
Diseo de proyecto Web 51
Sitio Web 51
Pgina Web 52
Jerarqua de pginas 52
Facilidad de uso 52
Accesibilidad 52
Actividad 4-01 Planeacin de un sitio Web 53
Recopilacin y manipulacin de informacin 55
TEMA D Dreamweaver

56
Espacio de trabajo de Dreamweaver 56
Actividad 4-02 Reconociendo el espacio de trabajo 57
Contenido
Video 4-01 Espacio de trabajo 57
Vistas 58
TEMA E Definicin de un sitio en Dreamweaver

59
Video 4-02 Definicin de un sitio Web en Dreamweaver

60
Proyecto 4-01 Definiendo el nuevo sitio 61
TEMA F Nuevo documento 62
Video 4-03 Nuevo documento 62
Propiedades del documento 63
Ttulo del documento 64
Guardar el documento 65
Video 4-04 Propiedades y ttulo del documento 65
Proyecto 4-02 Modificando las propiedades de un documento Web 65
Evaluacin 04 67
Unidad 5 Agregando elementos a una pgina Web 69
TEMA A Introduccin a CSS 70
Qu es CSS? 70
TEMA B Aadiendo texto 71
TEMA C Aplicando CSS a un documento HTML 72
Sintaxis bsica de CSS 72
Estilos 72
Selectores 73
TEMA D Dando formato a texto con CSS 74
Creacin de una regla CSS 74
TEMA E Definicin de propiedades CSS 76
Video 5-01 Aadiendo texto y estilos CSS 76
Proyecto 5-01 Insertando texto en una pgina 77
TEMA F Hipervnculos o Links 78
Video 5-02 Vnculos 78
Proyecto 5-02 Ligando pginas 79
TEMA G Tablas (Table) 80
Formato de tabla 80
Dividir y combinar celdas 81
Modos de tabla 81
Video 5-03 Tablas 81
TEMA H Utilizacin de etiquetas Div 82
Video 5-04 Elementos PA 83
Elementos PA 83
TEMA I Insertando imgenes en Dreamweaver

84
Video 5-05 Insertando imgenes 85
Proyecto 5-03 La galera fotogrfica 86
Mapa de imagen (Map image) 87
Contenido
Video 5-06 Creando un mapa de imagen 87
Proyecto 5-04 Creando un mapa de imagen 88
Imagen de sustitucin 89
Video 5-07 Imagen de sustitucin 89
Proyecto 5-05 Insertando imgenes especiales 89
TEMA J Insertando elementos multimedia en Dreamweaver

90
Archivo SWF 90
Sonido 90
Video 91
Video 5-08 Insertando elementos multimedia 91
Proyecto 5-06 Agregando msica en la pgina Web 92
Evaluacin 05 94
Unidad 6 Mejorando un sitio Web 95
TEMA A Marcos (Frames) 96
Video 6-01 Trabajando con marcos 97
Proyecto 6-01 Creando un marco 98
TEMA B Administracin de un Sitio Web 99
Utilizando el panel Activos 100
TEMA C Evaluacin del Sitio Web 101
Proyecto 6-02 Analizando sitios Web 102
Evaluacin 06 108
Recursos
Este material forma parte de un conjunto de recursos, que conforman el
Programa de Informtica Educativa (PIE). Est organizado en bloques integrales
que incluyen todo lo necesario para aprender, practicar y evaluar habilidades
o competencias. Las explicaciones, imgenes, tablas, actividades, notas y
tips, apoyadas con las lminas y tutoriales, permiten integrar la experiencia de
aprendizaje desde mltiples perspectivas. As, podemos afirmar que el PIE de
Grupo Educare, es la mejor manera de aprender haciendo.
Los recursos digitales que acompaan al material impreso, contienen videos que
te ayudarn a comprender los conceptos y a poner en prctica las habilidades
adquiridas. Adicionalmente encontrars los archivos que se requieren para realizar
las actividades, algunos documentos y aplicaciones tiles. No olvides que los
recursos digitales son parte integral del programa, por lo que es muy importante
que los conozcas y utilices en el curso.
Material Impreso
Recursos Digitales
TI P
Explicacin Iconogrfica
Proyecto
Este icono nos indica un ejercicio que refuerza de manera prctica.
Actividad
Este icono nos indica un ejercicio que refuerza la parte terica de
este material.
Video
Es el material digital de los recursos del programa. La representacin
en video de la parte terica.
Lmina de apoyo
La lmina es un recurso del profesor, que sirve como refuerzo
dinmico e interactivo a un tema denso y que complementa la
teora del material impreso.
Nota
Las notas que vers dentro de tu texto, puntualizan la teora o los
aspectos ms importantes de un tema.
Evaluacin
Este icono indica un elemento fundamental del proceso educativo,
que sirve para valorar el proceso de aprendizaje.
Tip
Es una sugerencia que complementa un tema del material impreso,
dando un panorama ms amplio al alumno sobre cmo ejecutar
una actividad de manera ms sencilla y prctica.
Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
Unidad 01 Introduccin a HTML
Unidad 02 Tu primer sitio
Unidad 03 Mejorando el aspecto visual
Unidad 04 Introudccin a Dreamweaver

Unidad 05 Agregando elementos a una pgina Web


Unidad 06 Mejorando un sitio Web
NIVEL: Bsico DURACIN SUGERIDA: 25 SESIONES / 45-50 MINUTOS
Pr opu est a Di d ct i ca
Este libro lo integran las siguientes Unidades:
Las propuestas didcticas son flexibles, adaptables a la forma personal de
trabajo del maestro y necesidades especficas de cada clase maximizando as
el empleo de los recursos disponibles.
Unidad Tema Subtema Objetivos
Diseo Web
Dreamweaver

CS4
II
1 Introduccin a HTML
Sesiones sugeridas 4
TEMA A Navegadores
Definir el concepto
de cdigo fuente tras
reconocer a HTML como el
lenguaje de programacin
para la elaboracin de
pginas web.
TEMA B Tipos de estructuras
clsicas
Realizar y anallizar
esquemas de sitios
web diferenciando su
estructura.
TEMA C HTML y Tags
Estructura general de una
pgina
En dnde escribir el
cdigo fuente?
Los tags ms importantes
de HTML
Conocer el procedimiento
para la creacin y
edicin de pginas web
empleando el Bloc de
Notas de Windows y un
browser o navegadro para
su visualizacin.
2 Tu primer sitio
Sesiones sugeridas 3
TEMA A Trabajo con color Esquema de colores
Expresar colores en
formato hexadecimal y
nombrar los marcadores
que
modifican el esquema de
color en una pgina Web.
TEMA B Trabajo con ligas
Links para correo
electrnico (mailto)
Reconocer los marcadores
empleados para agregar
enlaces en una pgina
Web.
Competencias
Actividades sugeridas para el
alumno
Tutorial Sugerido Recursos
III
Propuesta Didctica
A reconocer a HTML como un
lenguaje de programacin al
visualizar el cdigo
fuente de varias pginas a
travs de un navegador.
Lmina 1-01 Uso del
Navegador y Motores de
Bsqueda
A emplear una o varias
estructuras para realizar el
equema de una pgina web.
Actividad 1-01 Identificando
estructuras
Proyecto 1-01 Estructura
bsica de una pgina Web
A identificar los principales
tags de HTML al crear,
visualizar y editar pginas
web sencillas mediante el
Bloc de notas.
Actividad 1-02 Visualizando el
cdigo fuente
Proyecto 1-02 Una pgina
bsica
Proyecto 1-03 Editando un
documento Web
Evaluacin 01
Video 1-01 HTML y tags
Video 1-02 En dnde escribir
el cdigo fuente?
Lmina 1-02 Tags ms
importantes de HTML
A cambiar el esquema de
color de una pgina Web al
conocer los valores mximos
y mnimos que se pueden
emplear en el sistema
hexadecimal para expresar
colores
en HTML o nombrabdo los
principales colores en HTML.
Tambin puedes modificar
el esquema de colores
agregando variantes a un
marcador.
Video 2-01 Trabajo con Color Lmina 2-01 Colores en HTML
A agregar palabras o frases
que realicen la funcin de
llamar a otro documento o
asignar la funcin de enviar
un correo electrnico
reconociendo los dos
elementos
necesarios para realizar esta
funcin.
Proyecto 2-01 Descubriendo
nuevos tags
Video 2-02 Trabajo con ligas
Video 2-03 Links para correo
electrnico
Unidad Tema Subtema Objetivos
Diseo Web
Dreamweaver

CS4
IV
Cont. Unidad 2 TEMA C Trabajo con listas
Listas ordenadas
Listas desordenadas
Identificar los marcadoes
caractersticos de cada
uno de los tres tipos de
listas
disponibles en HTML.
3 Mejorando el aspecto visual
Sesiones sugeridas 3
TEMA A Trabajo con rutas
Rutas absolutas
Rutas relativas
Reconocer la diferencia
entre rutas relativas y rutas
absolutas para seleccionar
el tipo de ruta necesario
para el desarrollo de una
pgina Web.
TEMA B Trabajando con
imgenes
Imgenes de fondo
(Background)
Imgenes en el
documento
Borde de imagen
Alineacin horizontal de
las imgenes
Alineacin vertical de las
imgenes
Agregar imgenes en una
pgina Web identificando
los marcadores de
identificacin y las
instrucciones de formato.
TEMA C Tablas en HTML
Definir tablas bsicas
reconociendo a stas
como la principal
herramienta para
el diseo de pginas Web
en HTML.
4 Introduccin a
Dreamweaver
Sesiones sugeridas 6
TEMA A Flujo de trabajo
para la creacin de sitios
Web
Conocer la importancia de
establecer una estratega a
seguir para el desarrollo
de una pgina Web.
Describir el flujo de trabajo
para digitalizar una
imagen.
Competencias
Actividades sugeridas para el
alumno
Tutorial Sugerido Recursos
V
Propuesta Didctica
A diferenciar los tres tipos de
listas disponibles en HTML al
realizar los proyectos
integrados en el tema.
Proyecto 2-02 Creando las
pginas interiores del curso
Proyecto 2-03 Ms pginas
interiores del curso
Proyecto 2-04 Terminando el
sitio del curso
Evaluacin 02
Video 2-04 Trabajo con listas
La diferencia que existe entre
las rutas relativas y rutas
absolutas, aplicandolas en
la programacin de pginas
Web.
Actividad 3-01 Escribiendo
rutas
Video 3-01 Trabajo con rutas
relativas y absolutas
Lmina 3-01 Direccin URL
A agregar imgenes a una
pgina Web asignandole
formato y alineacin
identificando los marcadores
para estas tareas.
Proyecto 3-01 Insertando
imgenes
Video 3-02 Trabajo con
imgenes
Disear tablas complejas
para mejorar el diseo y la
organizacin de una pgina
Web mediante HTML.
Proyecto 3-02 Creando una
tabla simple
Proyecto 3-03 Combinando
celdas
Actividad 3-02 Escribiendo
cdigo
Evaluacin 03
Video 3-03 Trabajo con tablas
Elaborar una estratega a
seguir para desarrollar de una
pgina Web.
Unidad Tema Subtema Objetivos
Diseo Web
Dreamweaver

CS4
VI
Cont. Unidad 4
TEMA B Definicin de
requisitos del proyecto
Requerimientos del cliente
Contenido para el
propsito
Contenido adecuado para
la audiencia
Derechos de autor
Listar los principales
elementos que ayudaran
en la planeacin del
desarrollo
de un sitio Web.
TEMA C Planeacin del
diseo del sitio Web
Diseo de proyecto Web
Sitio Web
Pgina Web
Jerarqua de pginas
Facilidad de uso
Accesibilidad
Recopilacin y
manipulacin de
informacin
Identificar herramientas
que ayudaran en la
planeacin del diseo y
definicin
de un sitio Web.
TEMA D Dreamweaver
Espacio de trabajo de
Dreamweaver
Vistas
Reconocer a Dreamweaver
como editor de pginas
Web y estudiar el espacio
de
trabajo pra familiarizarse
con la aplicacin e
integrarla al flujo de
trabajo.
TEMA E Definicin de un
sitio en Dreamweaver
Listar los pasos
elementales en la creacin
de un sitio web con
Dreamweaver.
TEMA F Nuevo documento
Propiedades del
documento
Ttulo del documento
Guardar el documento
Identificar los elementos
que dispone la aplicacin
para la creacin nuevos
documentos y
modificacin de
propiedades de las
pginas que componen un
sitio Web.
Competencias
Actividades sugeridas para el
alumno
Tutorial Sugerido Recursos
VII
Propuesta Didctica
Que para el desarrollo de un
sitio eficaz y que cumpla con
los requerimientos de la
audiencia, es necesario un
diseo eficiente.
Que debes considerar los
objetivos y diseo del sitio al
integrar colores, logotipo,
estructura del sitio,
navegacin, fotos e imgenes
Actividad 4-01 Planeacin de
un sitio Web
Identificar los elementos que
componen el espacio de
trabajo de Dreamweaver
reconociendolo como un
editor de pginas Web.
Actividad 4-02 Reconociendo
el espacio de trabajo
Video 4-01 Espacio de trabajo
La importancia de definir un
sitio en la aplicacin para un
eficiente desarrollo.
Proyecto 4-01 Definiendo el
nuevo sitio
Video 4-02 Definicin de un
sitio Web en Dreamweaver
Identificar los elementos para
la creacin de pginas, as
como, modificar las
propiedades de las pginas
que componen el Sitio en
desarrollo.
Video 4-04 Propiedades y
ttulo del documento
Proyecto 4-02 Modificando
las propiedades de un
documento Web
Evaluacin
Video 4-03 Nuevo documento
Unidad Tema Subtema Objetivos
Diseo Web
Dreamweaver

CS4
VIII
5 Agregando elementos a una
pgina Web
Sesiones sugeridas 5
TEMA A Introduccin a CSS Qu es CSS?
Discutir la importancia que
tiene el lenguaje CSS al
permitir aplicar estilos,
adornos y otros formatos
de manera sencilla a un
documento HTML.
TEMA B Aadiendo texto
Usar Dreamweaver como
editor de HTML y emplearlo
para dar fotmato a texto.
TEMA C Aplicando CSS a un
documento HTML
Sintaxis bsica de CSS
Estilos
Selectores
Identificar tres tipos de
estilos que se pueden
aplicar en un documento
HTML.
TEMA D Dando formato a
texto con CSS
Creacin de una regla CSS
Definir el procedimiento
para la creacin de
una regla CSS en
Dreamweaver
para su aplicacin en un
documento HTML.
TEMA E Definicin de
propiedades CSS
Emplear el cuadro de
dilogo Propiedades de
regla CSS para modificar
las
carcteristicas de una
regla CSS.
TEMA F Hipervnculos o Links
Usar el inspector de
propiedades para agregar
hipervnculos en un situi
Web.
TEMA G Tablas (Table)
Formato de tabla
Dividir y combinar celdas
Modos de tabla
Practicar con herramientas
disponibles en
Dreamweaver la creacin y
modificacin de tablas.
TEMA H Utilizacin de
etiquetas Div
Elementos PA
Demostrar mediante la
utilizacin de etiquetas Div
que se puede colocar
contenido en diferentes
lugares en una pgina
sin la necesidad de crear
tablas.
Competencias
Actividades sugeridas para el
alumno
Tutorial Sugerido Recursos
IX
Propuesta Didctica
A emplear hojas de estilo en
un documento HTML para
modificar el formato.
A editar documentos HTML
y previsualizarlos con
Dreamweaver
A determinar cual de los
tres estilos en que se puede
aplicar CSS se adapta mejor
a tu flujo de trabajo.
A crear reglas CSS y aplicarlas
a un documento HTML.
Que una vez creada una regla
CSS se pueden editar sus
caractersticas de manera
sencilla mediante el cuadro
de dilogo correspondiente.
Proyecto 5-01 Insertando
texto en una pgina
Video 5-01 Aadiendo texto y
estilos CSS
A identificar elementos en del
inspector de propiedades que
te ayudan a crear
hipervnculos.
Proyecto 5-02 Ligando
pginas
Video 5-02 Vnculos
A crear y dar formato a tablas
con Dreamweaver.
Video 5-03 Tablas
Como agragar etiquetas Div
y editar sus propiedades con
ayuda del inspector.
Video 5-04 Formato de un
Elemento Div
Unidad Tema Subtema Objetivos
Diseo Web
Dreamweaver

CS4
X
Cont. Unidad 5
TEMA I Insertando imgenes
en Dreamweaver
Mapa de imagen (Map
image)
Imagen de sustitucin
Discutir los principales
formatos de imagen
recomendables para Web,
listando
su carctersticas.
TEMA J Insertando
elementos multimedia en
Dreamweaver
Archivo SWF
Sonido
Video
Valuar la necesidad
de agregar elementos
multimedia en un sitio
Web para
mejorar su aspecto.
6 Mejorando un sitio Web
Sesiones sugeridas 3
TEMA A Marcos (Frames)
Crear contenidos
estructurados en ventanas
mediante la aplicacin de
marcos.
TEMA B Administracin de
un Sitio Web
Utilizando el panel Activos
Conocer los elementos que
integran el panel Archivos
para la administracin
de un sitio Web.
TEMA C Evaluacin del Sitio
Web
Describir los elementos
clave a considerar al
evaluar un sitio Web.
Competencias
Actividades sugeridas para el
alumno
Tutorial Sugerido Recursos
XI
Propuesta Didctica
Como reducir el tiempo
de carga de una pgina
mediante la optimizacin de
imgenes.
Proyecto 5-03 La galera
fotogrfica
Proyecto 5-04 Creando un
mapa de imagen
Proyecto 5-05 Insertando
imgenes especiales
Video 5-05 Insertando
imgenes
Video 5-06 Creando un mapa
de imagen
Video 5-07 Imagen de
sustitucin
Que mediante la adicin de
conternido multimedia a un
sitio Web se puede mejorar
el aspecto e impacto de un
sitio Web.
Proyecto 5-06 Agregando
msica en la pgina Web
Evaluacin 05
Video 5-08 Insertando
elementos multimedia
A emplear conjuntos de
marcos que viene de forma
predeterminada en la
aplicacin
para organizar el contenido
de un sitio Web.
Proyecto 6-01 Creando un
marco
Video 6-01 Trabajando con
marcos
Que mediante el panel de
Archivos es posible realizar la
sincronizacin de un sitio
Web local con el servidor
remoto manteniendo la
estructura e integridad del
sitio.
Que al analizar diversos
sitios, los dos elementos
clave para el xito o fracaso
de
un sitio Web son el diseo y
calidad en el contenido.
Proyecto 6-02 Analizando
sitios Web
Evaluacin 06
Diseo Web
Dreamweaver

CS4
XII
Inventario de habilidades
Habilidad 1 2 3 4 5
Uso de lenguaje de programacin HTML.
Reconocer la estructura de una pgina WEB.
Manejo del Bloc de Notas de Windows

.
Uso de Navegadores.
Identificar los valores de colores en sistema hexadecimal.
Manejo de listas.
Diferenciar entre rutas relativas y absolutas.
Identificar los elementos que componen el espacio de trabajo.
Listar las diferencias entre pgina Web y sitio Web.
Crear y nombrar pginas Web.
Aplicar estilos CSS en un documento HTML.
Familiarizado con los conceptos de Derechos de Autor.
Crear links.
Crear tablas.
Crear mapa de imgenes.
Optimizar imgenes para la Web.
Manejo del Inspector de propiedades.
Importar imgenes de fondo.
Definir los requisitos del proyecto.
Optimizar archivos de audio y video para la web.
Este inventario se emplea para medir las habilidades de los alumnos que inician
el curso. Esto no es una prueba, es un indicador que va del 1 al 5, dnde uno
establece poco o nulo conocimiento del tema por parte del alumno y cinco que
est completamente familiarizado con el mismo.
Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
A Definir el concepto de cdigo fuente, tras reconocer a HTML como el lenguaje
de programacin para la elaboracin de pginas web.
B Realizar y analizar esquemas de sitios web diferenciando su estructura.
C Conocer el procedimiento para la creacin y edicin de pginas web, empleando
el Bloc de Notas de Windows

y un browser o navegador para su visualizacin.


NIVEL: Bsico DURACIN SUGERIDA: 4 SESIONES / 45-50 MINUTOS
Un i d ad 0 1
I n t r odu cci n a
H TM L
Durante el desarrollo de esta unidad aprenders a:
HTML: El HTML, Hyper Text Markup Language (Lenguaje de Marcacin de
Hipertexto), es el lenguaje de marcas de texto utilizado normalmente en la www
(World Wide Web). Fue creado en 1986, por el fsico nuclear Tim Berners-Lee.
Diseo Web
Dreamweaver

CS4
10
Cuntas pginas Web has visto? Muchas estn llenas de colores, imgenes y contenido
vistoso. Otras son simples documentos con texto y algunos links. Actualmente existen decenas
de programas para crear sitios Web y muchas tecnologas en las que las pginas son diseadas
y programadas.
Los navegadores o browsers Web, como el Internet Explorer

, Mozilla Firefox

, Netscape
Navigator

o Safari

, interpretan el cdigo en que estn programadas las pginas Web. El


cdigo tiene indicaciones que le dicen al navegador dnde estn las pginas y cmo deben
aparecer, qu colores deben mostrarse, cmo se presentarn los textos y dems contenidos,
as como qu funcionalidad tendrn los distintos elementos.
Observa las siguientes imgenes. La primera muestra un sitio Web, tal y como se ve en el
navegador de Internet. La segunda muestra un fragmento del cdigo HTML, que permite al
navegador localizar los archivos y mostrarlos en la pantalla correctamente.
TEMA A Navegadores
Imagen 1-1: Pgina Web
Imagen 1-2: Cdigo fuente de una pgina Web
404
LMINA
Uso del Navegador y Motores de Bsqueda
HTML quiere decir Hyper Text Markup Language y es el cdigo estndar bsico para la
programacin o creacin de pginas Web. Su estudio te servir de base para la comprensin y
el aprendizaje posterior de herramientas de diseo Web ms avanzadas.
11
Introduccin a HTML
Hay cuatro tipos de estructuras clsicas para esquematizar el contenido de un sitio Web.
Jerrquica: es la tpica estructura de rbol, en el que la
raz (index) contiene una presentacin o introduccin y un
men principal. A partir de esta raz se puede navegar a las
diferentes secciones que contiene el sitio. La informacin
general se encuentra en los niveles externos y los
detalles en los niveles internos. La estructura jerrquica,
permite al visitante saber siempre el lugar del sitio en
que se encuentra navegando, pudiendo adentrarse en la
estructura para obtener informacin ms especfica.
Lineal: es la estructura ms simple de todas, se navega
de una pgina a la siguiente o a la anterior, como si
se estuviera leyendo un libro. Esta estructura es muy
til cuando quieres que el visitante siga un esquema
guiado, fijo y secuencial, evitando que se distraiga o se
pierda con enlaces a otras pginas. Se recomienda para
tutoriales de aprendizaje o tours de visitas guiadas.
Lineal con jerarqua: es una mezcla de las dos estructuras
anteriores: los temas y subtemas estn organizados de
una forma jerrquica, pero puedes leer todo el contenido
en orden de forma lineal.
Red: es una organizacin libre, sin un orden establecido aparente. Esta estructura tiene el riesgo
de perder al visitante dentro del sitio o de que no logre ver algn
contenido que se pretende mostrar. Es recomendable combinar
esta estructura con alguna de las anteriores.
TEMA B Tipos de estructuras clsicas
Imagen 1-3: Estructura jerrquica
Imagen 1-4: Estructura lineal
Imagen 1-5: Estructura lineal con jerarqua
g
Imagen 1-6: Estructura de red
Diseo Web
Dreamweaver

CS4
12
Navega en Internet e identifica un sitio Web basado en cada uno de los tipos de estructura:
Jerarqua, Lineal, Lineal con jerarqua o de Red. Anota en las lneas la URL y adems describe
brevemente la organizacin.

Identificando estructuras
404
ACTIVIDAD A
Estructura bsica de una pgina Web
404
PROYECTO
1. En el siguiente espacio escribe un tema que te interese o te agrade. Ubcalo en la parte
superior del rea de escritura. Este ser el tema de un nuevo sitio Web.
2. Debajo del tema escribe dos objetivos, donde detalles lo que quieres que el visitante conozca
acerca del tema, cuando recorra las pginas del sitio Web.
3. Ms abajo establece una lista de los contenidos que tendr la pgina Web. Puedes usar una
sola palabra o un enunciado que describa el contenido de cada una de las pginas que
formarn el sitio Web, por ejemplo: introduccin, historia, novedades, planes futuros o zona
de contactos.
www.sep.gob.mx - Red. Organizacin gubernamental encargada de organizar la
educacin en Mxico.
www.aulafacil.com - Lineal con jerarqua. Pgina dedicada a brindar cursos
rpidos y fciles va internet.
www.un.org - Jerarqua. Pgina de la Organizacin de las Naciones Unidas
(ONU).
www.conclase.net/tutorial - Lineal. Pgina de tutoriales y referencias de HTML.
13
Introduccin a HTML
Esquematiza la navegacin del sitio Web con alguna de las cuatro estructuras clsicas, de
acuerdo a la informacin que mostrars a los usuarios.
Muestra el trabajo a tu profesor para comentarios y correcciones.


Diseo de pginas Web
- Cul es el cdigo que se utiliza para programar y cmo se utiliza.
- Dreamweaver como opcin de pginas web. Cules son sus ventajas.
Esquema: Jerarqua
- Generalidades del HTML
Introduccin
Cmo usar HTML
- Iniciando una pgina
- Edicin de texto
- Insertar imgenes
- Crear links
- Manejo de tablas
- Generalidades de Dreamweaver
Ventajas de Dreamweaver
Entorno de trabajo
- Diseo en Dreamweaver
Diseo Web
Dreamweaver

CS4
14
El HTML es un lenguaje de tags (marcadores), que se insertan en un documento de texto. Los
tags son indicaciones, que silenciosamente le dicen al navegador qu hacer. El navegador lee
las instrucciones y despliega o ejecuta lo que se le indica. Al conjunto de instrucciones que
definen una pgina Web, se le llama cdigo fuente.
Los tags son por lo general palabras en ingls, por ejemplo body (cuerpo), o abreviaturas por
ejemplo p que significa prrafo. Se distinguen del resto del texto porque estn encerrados
entre los smbolos < y > llamados brackets (parntesis diagonal).
La primera regla de HTML es muy simple: Los tags siempre van en parejas. Por ejemplo, si utilizo
el tag <h1> para comenzar un encabezado, debo utilizar el tag </h1> para terminarlo. Habrs
notado que se utiliza una diagonal/ en el segundo tag. La diagonal distingue al tag que cierra
(con diagonal), del tag que abre (sin diagonal).

Ejemplo: <b> Este texto se mostrar en negrita </b>
El tag inicial <b> activa la orden de colocar el texto en negritas y el tag final </b> la desactiva.
Como en toda regla, hay algunas excepciones: no todos las tags requieren la marca de cierre y
se denominan marcas abiertas.
Estructura general de una pgina
Analiza esta estructura general:
TEMA C HTML y Tags
<html>
<head>
<title> Ttulo del documento </title>
</head>
<body>
</body>
</html>
Todas las pginas HTML comienzan con el tag <html> y terminan con el tag </html>.
Esta seccin limita el documento e indica que todo lo que est dentro de los marcadores se
encuentra escrito en este lenguaje.
En medio de estos dos tags globales, hay dos secciones generales: <head> (cabeza) y el
<body> (cuerpo) del documento.
En la cabeza (que est limitada por los tags <head> y </head>) se pone informacin que no
aparece directamente en el interior de la pgina, como el ttulo de la ventana (delimitado por los
tags <title> y </title>). Slo puede haber un ttulo por documento, corto y significativo.
15
Introduccin a HTML
Imagen 1-7: Ventana Guardar como
En dnde escribir el cdigo fuente?
El cdigo fuente de una pgina Web, se puede escribir en cualquier programa que pueda
trabajar con texto sin formato. La opcin ms simple es utilizar el Bloc de notas, que es un
accesorio estndar incluido con el sistema operativo Microsoft

Windows

.
El Bloc de notas es muy efectivo porque no agrega formato ni caracteres adicionales a los
textos, como hacen la mayora de los procesadores de texto.
Una vez escrito el cdigo fuente en el Bloc de notas, debes guardarlo con la extensin .html.
Para eso, en el cuadro de dilogo del men File/Save As (Archivo/Guardar como) selecciona el
Tipo > Todos los archivos y agrega al nombre del archivo la extensin .html.
En el cuerpo del documento (limitado por los tags <body> y </body>) se encierra todo lo
que aparecer en la pgina, es decir, todo el contenido.
Nombre
Al dar el nombre a la pgina, siempre
debe tener la extensin .html
Tipo
Selecciona el tipo Todos los archivos. Si
no, el archivo se guardar como texto.
404
VIDEO
HTML & tags
Para ver en el navegador la pgina creada, basta abrirla o arrstrala a una ventana de exploracin.
Para editar o modificar el cdigo fuente de un documento HTML abierto en el navegador, utiliza
el comando Men Ver/Cdigo fuente o Men Pgina/Ver cdigo fuente, para que se abra el
cdigo en el Bloc de notas. Si requieres modificar el cdigo, lo puedes hacer directamente
en el Bloc de notas, guardar los cambios y cerrar. De regreso en el navegador, actualiza los
cambios con el Men Ver/Actualizar o la tecla <F5>.
402
VIDEO
En dnde escribir el cdigo fuente?
Diseo Web
Dreamweaver

CS4
16
Visualizando el cdigo fuente
402
ACTIVIDAD A
1. Abre en el navegador de Internet las siguientes pginas Web, que se encuentran en la
carpeta Pagsweb de los Recursos Digitales.
2. En cada una, visualiza el cdigo fuente con Men Ver/Cdigo fuente o Men Pgina/Ver
cdigo fuente, puede cambiar de un navegador a otro.
3. Anota en las lneas el cdigo fuente completo de cada pgina.
a. Pag01.html
b. Pag02.html
< html >
< head >
< title > Ttulo que aparecer en la barra del ttulo del explorador <
/title >
< /head >
< body > Dentro del tag body se coloca todo el contenido de la
pgina web como texto, imgenes, tablas y links a otras pginas o archivos.
< /body >
< /html >
<html>
<head>
<title> Tags de una pgina </title>
</head>
<body>
<p>Las instrucciones en una pgina web se escriben en coman-
dos denominados tags, y siempre van puestos entre signos de: < > <br>
<p>Casi todos los tags trabajan en parejas, uno para abrir
la instruccin y otro para cerrarla. El tag de cierre se identifca por tener una
<b>diagonal</b> ( / ).
</body>
</html>
17
Introduccin a HTML
Los tags ms importantes de HTML
La siguiente tabla muestra algunos de los marcadores ms importantes del lenguaje HTML. En
la tabla slo se muestran los marcadores de inicio, pero recuerda que, a menos que se indique
lo contrario, todos los tags tienen su contraparte de cierre, para indicar al navegador dnde
termina una instruccin.
c. Pag03.html

Tag Funcin Notas
<html>
Inicia un documento
Web
<head>
Inicia la cabeza de
un documento Web
<title>
Inicia el ttulo de la
pgina Web
<body>
Inicia el cuerpo de
un documento Web
<br/>
Inserta un salto
de lnea, pero sin
cambiar de prrafo
Este marcador no tiene tag de cierre
<html>
<head><h1><center>Ttulo</center></h1>
<title> Pgina Web </title>
</head>
<body><hr>
<p>En el cdigo de una pgina, el formato que le des al texto
no ser tomado en cuenta a menos que utilices <font color=red>instrucciones
especiales </font>para hacerlo. As, si tengo un salto de lnea
no es tomado en cuenta
y el texto
aparecer de forma continua.
</body>
</html>
Diseo Web
Dreamweaver

CS4
18
Tag Funcin Notas
<p>
Inserta un salto de
lnea en blanco
e inicia un nuevo
prrafo
Alineacin
<p align = left>alinea un prrafo a la
izquierda
<p align = right>alinea un prrafo a la
derecha
<p align = center>centra un prrafo
El tag de cierre es opcional
<h1>
Inicia un
encabezado
Tamaos
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Donde <h1> es el encabezado ms grande y
<h6> es el encabezado ms pequeo
<b>
Inicia texto en
negrita
<i>
Inicia texto en
cursiva (itlicas)
<font
size=#>
Modifica el tamao
de la fuente a partir
del marcador
Se cierra con el tag
</font>
Tamaos
Desde <font size=1> hasta <font
size=7>
Donde 1 es el tamao ms pequeo y 7 es el
tamao ms grande
El tamao predeterminado es 3
<font
color=#>
Modifica el color de
la fuente a partir del
marcador.
Puedes escribir
el nombre de
algn color
predeterminado, o
el cdigo del color
correspondiente
Se cierra con el tag
</font>
Colores
<font color = red>
<font color = blue>
<font color = gray>
<font color = yellow>
<font color = green>
<font color = white>
<font color = black>
<font color = brown>
<font color = pink>
<font color = cyan>
<font color = magenta>
19
Introduccin a HTML
Este ejemplo muestra el cdigo fuente completo de una pgina Web muy simple:
<head>
<title>Mi primera pgina Web</title>
</head>
<body>
Est e es un prrafo que ser most rado en el navegador.
<p> Est e es un nuevo prrafo con <b> negrit as </b> y con <i> it licas </i>
</body>
</html>
TI P
El uso de espacios o tabuladores en el cdigo fuente es ignorado por
el navegador, sin embargo es una buena prctica tabular las lneas
dependientes o internas, para facilitar la programacin y sobre todo la
revisin de errores. As, por ejemplo, el tag <body> se escribe un poco
ms a la derecha que el tag <html> y las lneas que estn dentro del
cuerpo del documento se escriben ms a la derecha para indicar que
estn dentro del tag <body>. A esta tcnica se le llama indentar el
cdigo fuente. Usa el tabulador!
402
LMINA
</htm /
Tags ms importantes de HTML
1. Abre el Bloc de notas y teclea el siguiente cdigo HTML.
<html>
<head>
<title>Reciclaj e de basura en nuest ro pas</title>
</head>

<body>
<h1>El reciclado de basura depende de nosot ros</h1>
<p>En est a pgina encont rars informacin acerca del reciclaj e de basura.
<p>Nuest ro obj et ivo es que los visit ant es de est a pgina sean generadores de
conciencia acerca de la import ancia del reciclaj e en su comunidad.
<p><b><font color=red><font size=5> A reciclar! </font></font>
</body>
</html>
Una pgina bsica
402
PROYECTO
Diseo Web
Dreamweaver

CS4
20
2. Guarda el documento creado en la carpeta que indique tu profesor, con el nombre Page04.
html. No olvides seleccionar el Tipo>Todos los archivos y agregar la extensin .html.
3. Inicia el navegador de Internet y escala la ventana, de modo que puedas arrastrar el icono del
archivo que acabas de crear, dentro del navegador. Observa la pgina resultante y verifica:
a. El ttulo de la ventana, en la barra de ttulo del navegador.
b. El encabezado dentro de la pgina, definido por el tag <h1>.
c. Los prrafos del documento.
d. El formato de la fuente.
NOTA
Maysculas o minsculas?
Aunque para el sistema operativo Windows son indistintas las
maysculas y minsculas al nombrar los archivos, ste no es el
caso en HTML e Internet.
En Internet no es lo mismo el archivo contacto.html que el archivo
contacto.HTML o el archivo Contacto.html. Estos tres nombres
corresponderan a archivos diferentes, que podran incluso estar en
una misma ubicacin en la red. Por eso es importante utilizar los
nombres de archivos exactamente como son.
Tampoco debes usar espacios ni caracteres internacionales para
nombrar los archivos, pues podran tener problemas cuando se
coloquen en un servidor de Internet.
21
Introduccin a HTML
Editando un documento Web
40
PROYECTO
1. Abre en una ventana del navegador el documento Web que creaste en el proyecto anterior.
2. Visualiza el cdigo fuente.
3. Agrega los tags necesarios al cdigo fuente para lograr las siguientes modificaciones en la
pgina:
a. Agrega un encabezado de tamao 2 y otro de tamao 4.
b. Pon en negritas la palabra nosotros del encabezado (slo esa palabra).
c. Pon en cursivas las palabras reciclaje de basura del primer prrafo.
d. Pon en negritas y cursivas las palabras generadores de conciencia del segundo
prrafo.
e. Agrega un prrafo de 5 lneas, donde comentes algo acerca de cmo contribuiras al
reciclaje de basura desde casa.
f. Centra este nuevo prrafo.
g. Cambia la fuente del ltimo prrafo a color azul.
4. Cierra el Bloc de notas guardando los cambios.
5. De regreso en el navegador, actualiza la pgina con Men Ver/Actualizar o la tecla <F5>.
6. Revisa que todo est correcto. Si hace falta algn cambio vuelve a editar el cdigo fuente.
Diseo Web
Dreamweaver

CS4
22
Qu aprendiste?
TEMA A: A reconocer a HTML como un lenguaje de programacin, al visualizar el cdigo
fuente de varias pginas a travs de un navegador.
TEMA B: A emplear una o varias estructuras para realizar el equema de una pgina web.
TEMA C: A identificar los principales tags de HTML al crear, visualizar y editar pginas web
sencillas mediante el Bloc de notas.
04
EVALUACIN EV EE
1. Menciona cuntos y cules son los tipos de estructuras clsicas que se emplean para
esquematizar el contenido de un sitio Web.
2. Escribe el proceso para crear una pgina web y visualizarla:
3. Define Qu es tag?

Por lo general son palabras o abreviaturas en ingls, por ejemplo body (cuerpo),
o p que signifca prrafo. Se distinguen del resto del texto porque estn ence-
rrados entre los smbolos < y > llamados brackets (parntesis diagonal) y
siempre van en parejas.
Son cuatro:
Jerrquica estructura de rbol.
Lineal es la ms simple de todas.
Lineal con jerarqua que es una mezcla de la lineal y la jerrquica.
Red que es una organizacin libre sin un orden establecido aparente.
Escribir el cdigo fuente en el bloc de notas.
Guardarlo con extensin HTML.
Abrirlo en el navegador o browser.
Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
A Expresar colores en formato hexadecimal y nombrar los marcadores que
modifican el esquema de color en una pgina Web.
B Reconocer los marcadores empleados para agregar enlaces en una pgina Web.
C Identificar los marcadoes caractersticos de cada uno de los tres tipos de listas
disponibles en HTML.
NIVEL: Bsico DURACIN SUGERIDA: 4 SESIONES / 45-50 MINUTOS
Un i d ad 0 2
Tu pr i mer si t i o
Durante el desarrollo de esta unidad aprenders a:
WWW: Gestor FTP: Dreamweaver

incluye un gestor FTP (File Transfer Protocol)


que te permite administrar tus carpetas, subir y descargar documentos de tu
computadora al servidor web.
Diseo Web
Dreamweaver

CS4
24
Los colores en tu monitor se forman mediante la combinacin de tres canales de color: Red,
Green and Blue (Rojo, Verde y Azul) o RGB, con los que se pueden formar todos los colores para
una pgina Web. Cualquier color puede expresarse mediante un cdigo numrico formado de
3 valores, que indican el valor de rojo, el valor de verde y el valor de azul.
En HTML, el cdigo de un color comnmente se expresa en formato
hexadecimal (por ejemplo, #FF0000) o con nombres (red). El valor
hexadecimal mnimo para cada canal es 00 y el valor mximo FF
(que equivale a 255 en formato decimal). De esta forma, el nmero
mximo de colores disponibles es de 16,777,216
.
As, por ejemplo, el color azul que se muestra en la figura se compone de 00 de rojo, 66 de
verde y CC de azul. El cdigo hexadecimal de este color es por lo tanto #0066CC.
Analiza estos ejemplos:
TEMA A TRABAJO CON COLOR
Imagen 2-1: Color Azul
R G B Color
00 00 00 Negro
FF 00 00 Rojo puro
00 FF 00 Verde puro
00 00 FF Azul puro
FF FF 00 Amarillo
FF 00 FF Morado
FF FF FF Blanco
33 33 33 Gris Oscuro
99 99 99 Gris Claro
TI P
Se debe tomar en cuenta, al crear
una pgina, que los colores variarn
ligeramente, dependiendo del
monitor de cada visitante, su sistema
operativo y su navegador.
204
LMINA
Colores en HTML
25
Tu primer sitio
Esquema de colores
De forma predeterminada, los navegadores usan el esquema de colores bsico siguiente:
El fondo del documento es blanco.
El texto normal es negro.
Los links son azules.
Los links ya visitados se vuelven morados.
Los links activos (mientras les haces clic) son rojos.
Si deseas modificar el esquema de colores, puedes agregar variantes al tag del cuerpo del
documento <body>, de esta manera:
<body bgColor=# text=# link=# vLink=# aLink=#>
El smbolo # debe ser seguido de un cdigo numrico que representa un color, o bien,
sustituirse por el nombre de un color reconocido.
Por ejemplo, si tecleas el siguiente cdigo:
<body text=#00FF00 link=#FF0000 vlink=#0000FF>
o bien
<body text=green link=red vlink=blue>
El resultado ser una pgina con texto verde y links rojos, que se vuelven azules cuando ya han
sido visitados.
El HTML es muy flexible y nos permite incluir uno o ms modificadores en una sola lnea.
204
VIDEO
Trabajo con color
TI P
Como ayuda se ha incluido en tu material de
trabajo, un programa llamado Color Box. Esta
aplicacin te permite elegir un esquema de
colores para el fondo, el texto y las ligas de una
pgina Web y generar automticamente el cdigo
HTML que se debe usar.
Diseo Web
Dreamweaver

CS4
26
TEMA B Trabajo con ligas
La clave para la funcionalidad de los navegadores es el hipertexto. El hipertexto permite que
un documento llame a otro documento, por medio de enlaces activos que se esconden en
palabras, frases, botones o imgenes. Los elementos activos se llaman indistintamente enlaces,
vnculos, ligas o links.
Generalmente cuando se hace clic sobre algn texto subrayado (un link) en un documento
Web, el cdigo escondido detrs, apunta a otra ubicacin. Esto es lo que se conoce como
navegaren un sitio: ir haciendo clic en los links para pasar de un documento a otro.
Cuando se construye un link se necesitan dos cosas:
El texto o imagen que va a aparecer en la pgina, sobre el cual el visitante puede
hacer un clic y la direccin (URL) del documento al que se quiere ligar (a donde va
a saltar el visitante cuando haga clic sobre la liga).
Para crear un link, debes encerrar las palabras sobre las que se har clic entre
el tag <a href=?> y el tag </a>. En vez del signo ? se debe escribir la
direccin (URL) del documento al que se va a ligar.
Por ejemplo, el link para ir a la pgina Web de Grupo Educare se programa as:
<a href=http://www.grupoeducare.com>Visita la pgina de Grupo Educare</a>
Y aparecer en el navegador as: Visita la pgina de Grupo Educare
Links para correo electrnico (mailto)
Si has navegado lo suficiente en Internet, seguramente habrs visto que hay algunos links que
no te llevan a otra pgina, sino que abren tu programa de correo electrnico y te permiten
enviar un correo a una direccin de e-mail especfica.
Para crear este tipo de link, encierra las palabras sobre las que el visitante har clic, entre los
tags <a href=mailto:?> y </a>. En vez del signo ? se escribe la direccin de correo
electrnico deseada.
Por ejemplo, si tu direccin de correo electrnico fuera armando@hotmail.com, podras crear
un link a este correo escribiendo el siguiente cdigo:
<a href=mailto:armando@hotmail.com>Envame un correo!</a>
Y aparecer en el navegador as: Envame un correo!
202
VIDEO
Trabajo con ligas
27
Tu primer sitio
20
VIDEO
Links para correo electrnico
La siguiente tabla contiene la referencia rpida de los tags de color y links que hemos estudiado.
Tag Funcin Notas
<body text=#>
Establece el color de
texto predeterminado de
todo el documento
# es un cdigo
hexadecimal de color
<body link=#>
Establece el color de
links predeterminado de
todo el documento
# es un cdigo
hexadecimal de color
<body vlink=#>
Establece el color
de links visitados
predeterminado de todo
el documento
# es un cdigo
hexadecimal de color
<body alink=#>
Establece el color
de links activos
predeterminado de todo
el documento
# es un cdigo
hexadecimal de color
<body bgcolor=#>
Establece el color
de fondo de todo el
documento
# es un cdigo
hexadecimal de color
<a href=?> Crea un link
Poner en vez de ?, la
ruta o URL a la que se va
a ligar.
<a href=mailto:?>
Crea un link para correo
electrnico
Poner en vez de ?,
la direccin de correo
electrnico a la que se va
a ligar
</a> Cierra un link
Diseo Web
Dreamweaver

CS4
28
En esta actividad y las que le siguen, vas a crear un pequeo curso de HTML para principiantes,
consiste en un men y algunas pginas interiores. Empecemos por la presentacin.
1. Abre el Bloc de Notas y copia el siguiente cdigo HTML:
<HTML>
<HEAD>
<TITLE>Curso de HTML</TITLE>
</HEAD>
<BODY bgColor=#444444 text=#FFFF99 link=#CC66CC vLink=#FF9999>
<H1 align=center>Curso de HTML</H1>
<H3 align=center>Pgina Men</H3>
<P align=center>En esta pgina conoceremos el uso de los principales tags de
HTML. Lo primero que hay que observar es el esquema de colores del documento,
incluido dentro del tag body. El esquema de colores se dehne con los tags
auxiliares bgColor, text, link, vLink y aLink. Puedes colocar slo los tags
auxiliares que necesites dentro del tag body.

<BLOCKQUOTE>Analiza este prrafo para comprender el uso del tag de tabulacin
blockquote. Repetiremos varias veces este texto de modo que puedas analizar
cmo funciona el tag. Analiza este prrafo para comprender el uso del tag de
tabulacin blockquote. Repetiremos varias veces este texto de modo que puedas
analizar cmo funciona el tag.
<BLOCKQUOTE> Analiza este prrafo para comprender el uso del tag de tabulacin
blockquote. Repetiremos varias veces este texto de modo que puedas analizar
cmo funciona el tag. Analiza este prrafo para comprender el uso del tag de
tabulacin blockquote. Repetiremos varias veces este texto de modo que puedas
analizar cmo funciona el tag.
<BLOCKQUOTE> Analiza este prrafo para comprender el uso del tag de tabulacin
blockquote. Repetiremos varias veces este texto de modo que puedas analizar
cmo funciona el tag. Analiza este prrafo para comprender el uso del tag de
tabulacin blockquote. Repetiremos varias veces este texto de modo que puedas
analizar cmo funciona el tag.
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
<P align=center>A continuacin veremos el uso de <B>listas</B>, que se identihcan
por nmeros o vietas. Existen tres tipos de listas: desordenadas, ordenadas y
de dehnicin. La nica diferencia entre un tipo y otro es el nmero o vieta
que identihca a cada elemento de la lista. Para conocer ms sobre alguno de los
tipos disponibles, <B><I>haz clic</I></B> en el tema correspondiente.
<P align=center>
<A href=listaordenada.html>Listas Ordenadas</A><BR>
<A href=listadesordenada.html>Listas Desordenadas</A><BR>
<A href=listadehnicion.html>Listas de Dehniciones</A><BR>
<P align=right>Si necesitas mayor informacin <A href= mailto:
micorreo@server.com>escrbeme</A>
</BODY>
</HTML>
Descubriendo nuevos tags
204
PROYECTO
29
Tu primer sitio
2. Cierra el documento creado y gurdalo en la ubicacin que el profesor te indique, con el
nombre Curso_menu.html. Usars este documento en la siguiente actividad.
3. Abre el documento en una ventana del navegador. Revisa que est completo y contesta lo
siguiente:
a. De qu color son el fondo y el texto?
b. Cul es el tag que determina el color de los links?
c. Para que sirve el tag <blockquote>?
d. Qu pasa si en vez de cerrar 3 veces el tag <blockquote>, slo se cierra una vez?
e. Qu ocurre si haces un clic sobre la palabra escrbeme, al final del documento?
f. Cules son los nombres y extensiones de los tres documentos a los que se liga desde
el men que has creado?



Fondo: Gris oscuro y Texto: Amarillo
< body link= #cc66cc vlink= # ff9999 >
Para dar sangra al prrafo.
El texto A continuacin veremos... queda al mismo nivel que el tercer
prrafo.
Se abre el programa predeterminado para enviar correo, con la direc-
cin del destinatario ya puesta.
Diseo Web
Dreamweaver

CS4
30
TEMA C Trabajo con listas
Tag Funcin Notas
< ol >
Inicia una lista ordenada
(ordered list)
< ul >
Inicia una lista desordenada
(unordered list)
< l i >
Identifica un elemento de una
lista ordenada o desordenada
Para listas ordenadas puedes usar:
<li type=1> usa nmeros (1,2,3)
<li type=A> usa incisos en
maysculas (A,B,C,)
<li type=a> usa incisos en
minsculas (a,b,c)
<li type=I> usa romanos en
maysculas (I,II,III)
<li type=i> usa romanos en
minsculas (i,ii,iii)
< dl >
Inicia una lista de definiciones
(definition list)
< dt >
Identifica un trmino de una lista
de definiciones (definition term)
< dd>
Identifica una definicin de una
lista de definiciones
(definition definition)
En HTML es posible crear listas compuestas por elementos llamados tems. La diferencia entre
los tres tipos de listas disponibles, es el identificador de cada tem de la lista. Los tems se
pueden marcar con vietas simples, con nmeros o con incisos.
Revisa en la siguiente tabla el uso de los tags involucrados en el manejo de listas.
204
VIDEO
Trabajo con listas
31
Tu primer sitio
1. Crea una nueva pgina Web con este cdigo HTML:
<HTML>
<HEAD>
<TITLE>Curso de HTML</TITLE>
</HEAD>
<BODY bgColor=#444444 text=#FFFF99 link=#CC66CC vLink=#FF9999>
<H1 align=center>Curso de HTML</H1>
<H3 align=center>Listas Ordenadas</H3>
<P>Las listas ordenadas utilizan nmeros o letras para identihcar cada uno de
los elementos que contienen. Para iniciar una lista ordenada se utiliza el
tag <FONT COLOR=red><b>ol</b></FONT> y para terminar la lista se cierra con
el tag <FONT COLOR= red><b>/ol</b></FONT>.
<P>Antes de cada uno de los elementos de la lista utiliza el tag<FONT
COLOR=red><b>li</b></FONT>.
<P>Observa cmo se ve una lista ordenada simple:
<P><FONT COLOR=#9999FF>Es importante estudiar y prepararse por las siguientes
razones:
<ol>
<li>Aumenta el gusto por el estudio
<li>Te capacita para el trabajo autnomo
<li>Mejora el rendimiento escolar
</ol>
</FONT>
<P>Es posible tambin anidar listas ordenadas y usar distintos tipos de
incisos. Por ejemplo:

<P><FONT COLOR=#9999FF>Listas Anidadas
<ol>
<li type=l>Los continentes
<ol>
<li type=A>Europa
<li type=A>Amrica
<ol>
<li type=i>Canad
<li type=i>Estados Unidos
<li type=i>Mxico
</ol>
<li type=A>Asia
</ol>
</ol>
</FONT>
<P align=right><a href=Curso_menu.html>Volver al Men del Curso</a>
</BODY>
</HTML>
Creando las pginas interiores del curso
Listas ordenadas
202
PROYECTO
2. Cierra y guarda el documento en la misma ubicacin que el documento de la actividad
anterior, con el nombre listaordenada.html.
3. brelo en una ventana del navegador y revsalo. Comprueba que el link al final del documento
funciona, llevndote al documento de la actividad.
Diseo Web
Dreamweaver

CS4
32
2. Cierra y guarda el documento en la misma ubicacin que el documento de la actividad
anterior, con el nombre listadesordenada.html.
3. brelo en una ventana del navegador y revsalo. Comprueba que el link al final del documento
funciona, llevndote al documento del men.
<HTML>
<HEAD>
<TITLE>Curso de HTML</TITLE>
</HEAD>
<BODY bgColor=#444444 text=#FFFF99 link=#CC66CC vLink=#FF9999>
<H1 align=center>Curso de HTML</H1>
<H3 align=center>Listas Desordenadas</H3>
<P>Las listas desordenadas utilizan vietas para enumerar los elementos
de la lista. Para iniciar una lista desordenada se utiliza el tag <FONT
COLOR=red><b>ul</b></FONT> y para terminar la lista se cierra con el tag <FONT
COLOR=#FF0000><b>/ul</b></FONT>. Antes de cada uno de los elementos de la lista
utiliza el tag <FONT COLOR=FF0000><b>li</b></FONT>.
<P>Observa cmo se ve una lista desordenada simple:
<P><FONT COLOR=#9999FF>Los libros recomendados para leer este mes son:
<ul>
<li>Los Miserables
<li>El Extranjero
<li>El Quijote de la Mancha
</ul>
</FONT>
<P>Es posible tambin anidar listas desordenadas dentro de otras listas
desordenadas. Por ejemplo:
<P><FONT COLOR=9999FF>Libros interesantes
<ul>
<li>Los Miserables
<ul>
<li>novela romntica francesa
<li>crtica social
</ul>
<li>El extranjero
<ul>
<li>literatura contempornea
<li>el protagonista se siente extrao en su
propio medio
</ul>
<li>El Quijote de la Mancha
<ul>
<li>el autor es Miguel de Cervantes y Saavedra
<li>la historia del ingenioso Hidalgo
</ul>
</ul>
</FONT>
<p align=right><a href=Curso_menu.html>Volver al Men del Curso</a>
</BODY>
</HTML>
1. Crea una nueva pgina Web con este cdigo HTML:
Ms pginas interiores del curso
Listas desordenadas
20
PROYECTO
33
Tu primer sitio
1. Crea una nueva pgina Web con este cdigo HTML:
<HTML>
<HEAD>
<TITLE>Curso de HTML</TITLE>
</HEAD>
<BODY bgColor=#444444 text=#FFFF99 link=#CC66CC vLink=#FF9999>
<H1 align=center>Curso de HTML</H1>
<H3 align=center>Listas de Dehniciones</H3>
<P>Las listas de dehniciones muestran un trmino que se va a dehnir y la
dehnicin del mismo. Para iniciar una lista de dehniciones se utiliza el tag
<FONT COLOR= red><b>dl</b></FONT>y para terminar la lista se cierra con el
tag <FONT COLOR=#FF0000><b>/dl</b></FONT>. Antes de cada uno de los elementos
a dehnir se utiliza el tag <FONT COLOR=FF0000><b>dt</b></FONT> y antes de la
dehnicin se utiliza el tag <FONT COLOR=red><b>dd</b></FONT>.

<P>Observa cmo se ve una lista de dehniciones simple:
<P><FONT COLOR=#9999FF>Los trminos de la leccin son:
<dl>
<dt>Novela
<dd>Obra literaria en prosa, que narra sucesos total o parcialmente
hcticios.
<dt>Romanticismo
<dd>Movimiento literario, artstico e ideolgico de la primera mitad
del siglo XIX, en que prevalecan la imaginacin y la sensibilidad
sobre la razn y lo crtico.
<dt>Contemporneo
<dd>Que es actual o de una misma poca.
</dl>
</FONT>
<p align=right><a href=Curso_menu.html>Volver al Men del Curso</a>
</BODY>
</HTML>
Terminando el sitio del curso
204
PROYECTO
2. Guarda el documento en la misma ubicacin que el de la actividad anterior y ponle el
nombre listadefinicion.html.
3. brelo en una ventana del navegador y revisa que todos los links funcionen.
Diseo Web
Dreamweaver

CS4
34
Qu aprendiste?
TEMA A: A cambiar el esquema de color de una pgina Web, al conocer los valores mximos
y mnimos que se pueden emplear en el sistema hexadecimal para expresar colores
en HTML o nombrando los principales colores en HTML. Tambin puedes modificar
el esquema de colores agregando variantes a un marcador.
TEMA B: A agregar palabras o frases que realicen la funcin de llamar a otro documento o
asignar la funcin de enviar un correo electrnico, reconociendo los dos elementos
necesarios para realizar esta funcin.
TEMA C: A diferenciar los tres tipos de listas disponibles en HTML, al realizar los proyectos
integrados en el tema.
02
EVALUACIN EV EE
1. Describre cules son los tres tipos de listas que se pueden crear en HTML, indicando su
marcador correspondiente:
2. Escribe cmo se expresa comnmente el color en HTML, ejemplificando cada opcin:
3. Escribe el cdigo HTML necesario para crear un link para ir a la pgina de la enciclopedia
Wikipedia, agregando el texto La enciclopedia libre y cmo aparecera en el navegador:

<a href=http://www.wikipedia.com>Wikipedia la enciclopedia libre</a>
Y aparecer en el navegador as: Wikipedia la enciclopedia libre
<ol> Inicia una lista ordenada (ordered list)
<ul > Inicia una lista desordenada (unordered list)
<dl> Inicia una lista de defniciones (defnition list)
En formato hexadecimal #ff0000
o con nombres en ingls Red, Blue, Black, etc.
Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
A Reconocer la diferencia entre rutas relativas y rutas absolutas, para seleccionar
el tipo de ruta necesario para el desarrollo de una pgina Web.
B Agregar imgenes en una pgina Web, identificando los marcadores de
identificacin y las instrucciones de formato.
C Definir tablas bsicas, reconociendo a stas como la principal herramienta para
el diseo de pginas Web en HTML.
NIVEL: Bsico DURACIN SUGERIDA: 3 SESIONES / 45-50 MINUTOS
Un i d ad 0 3
Mej or an do el
aspect o v i su al
Durante el desarrollo de esta unidad aprenders a:
Uso de las tablas: Las tablas constituyen una herramienta muy eficaz para
establecer el diseo de texto y grficos en una pgina HTML. Dreamweaver


permite manipular tanto columnas, como filas y celdas. Utiliza los mens para
acceder rpidamente a comandos relacionados con tablas. Puedes activar o
desactivar los anchos y los mens.
Diseo Web
Dreamweaver

CS4
36
TEMA A Trabajo con rutas
Al crear una liga, si adems del nombre del archivo no especificas una ruta, el documento
ligado debe estar en la misma ubicacin que el archivo HTML de la pgina Web. Esta ubicacin
puede ser local (un disco en tu computadora) o remota (una direccin de Internet), siempre y
cuando ambos archivos residan en la misma carpeta.
Si el archivo ligado no est en la misma ubicacin que la pgina Web, entonces debes incluir
su ubicacin o ruta.
Rutas absolutas
Las rutas absolutas determinan la posicin especfica de un archivo, independientemente de la
ubicacin del archivo que lo llama. Por ejemplo, este tag crea una liga al archivo tema1.html
que se encuentra dentro de la carpeta curso del sitio Web de Grupo Educare.
<a href=http://grupoeducare.com/curso/tema1.html>
En general, las rutas absolutas se usan slo cuando conoces la ubicacin exacta y definitiva
del archivo al que quieres ligar. Si el archivo cambiara de posicin, el navegador no podra
encontrarlo. Esto es inconveniente cuando ests ligando las pginas interiores de un sitio Web,
que despus podra distribuirse a varias computadoras o estar disponible en Internet.
Rutas relativas
Una ruta relativa indica al navegador la ubicacin de un archivo, con respecto a la ubicacin
de la pgina que contiene el cdigo de la liga. Imagina por ejemplo, que un sitio Web tiene las
siguientes carpetas y documentos.
Si se requiere crear una liga a un archivo que est en carpetas
interiores, basta incluir el nombre de todas las carpetas involucradas.
Por ejemplo, para crear una liga desde el cdigo de sistemasolar.
html al archivo europa.html, el cdigo correcto es:
<a href=planetas/tierra/continentes/europa.
html>
Si se necesita crear una liga a un archivo que est en carpetas exteriores,
se utiliza el doble punto por cada nivel que se quiera retroceder. Por
ejemplo, para crear una liga desde el cdigo de asia.html al archivo sistemasolar.html, el
cdigo correcto es:
<a href=../../../sistemasolar.html>
04
VIDEO
Trabajo con rutas relativas y absolutas
37
Mejorando el aspecto visual
1. Considera que en un sitio Web existen los siguientes documentos, en las ubicaciones que
se especifican:
http://www.grupoeducare.com/curso/temario.html
http://www.grupoeducare.com/curso/parte1.html
http://www.grupoeducare.com/curso/parte2.html
http://www.grupoeducare.com/curso/imagenes/fotos.html
http://www.grupoeducare.com/curso/imagenes/foto1.gif
http://www.grupoeducare.com/curso/imagenes/foto2.gif
2. Escribe las rutas absolutas para crear las siguientes ligas:
a. Una liga del cdigo en parte1.html al archivo parte2.html
<a href= >
b. Una liga del cdigo en temario.html al archivo foto1.gif
<a href= >
c. Una liga del cdigo en fotos.html al archivo parte1.html
<a href= >
3. Escribe las rutas relativas para crear las siguientes ligas:
a. Una liga del cdigo en parte1.html al archivo parte2.html
<a href= >
b. Una liga del cdigo en temario.html al archivo foto1.gif
<a href= >
c. Una liga del cdigo en fotos.html al archivo parte1.html
<a href= >
Escribiendo rutas
04
ACTIVIDAD A
http://www.grupoeducare.com/curso/parte2.html
http://www.grupoeducare.com/curso/imagenes/foto1.gif
http://www.grupoeducare.com/curso/parte1.html
parte2.html
imagenes/foto1.gif
../parte1.hmtl
Diseo Web
Dreamweaver

CS4
38
4. Escribe una desventaja de usar rutas relativas.
5. Escribe una desventaja de usar rutas absolutas.

04
LMINA
Direccin URL
NOTA Direcciones Web o URL
Todos los documentos Web que estn en Internet, tienen una direccin nica
llamada URL (Universal Resource Locator). La direccin URL se usa para
localizar y mostrar pginas Web especficas. Un ejemplo de URL es http://www.
grupoeducare.com/web/index.php/videos-tecnologia-educativa.
Puedes teclear directamente la URL o direccin Web en el espacio que para ello
tienen los navegadores. La URL debe teclearse en forma exacta, incluyendo los
puntos y diagonales y sin usar espacios.
La URL especifica varias cosas, como el recurso, dominio, carpeta y documento
que se busca. Analiza el ejemplo: http://www.grupoeducare.com/web/index.
php/videos-tecnologia-educativa
http:// es el tipo de recurso. Aunque la gran mayora de las veces
usars recursos de tipo http, hay otros tipos de recursos, como
https://, ftp:// o news://
www.grupoeducare.com es un nombre relacionado con la direccin
del servidor, donde se encuentra la pgina o archivo al que deseas
acceder. Est delimitado entre la doble diagonal // y la primera
diagonal sencilla /. A esto se le conoce como dominio.
findex.php/videos-tecnologia-educativa. Cualquier parte adicional
en un URL (despus de la primera diagonal sencilla /) especifica los
nombres de carpetas o de archivos. En nuestro ejemplo se trata de
un archivo llamado foro.html.
Si mueves el archivo que enlaza, ya no funciona el link.
Es fcil equivocarse en el momento de escribir la ruta y difcil de identifcar.
39
Mejorando el aspecto visual
Todas las imgenes de una pgina en HTML son archivos externos al documento, guardados en
alguna ubicacin. El cdigo HTML en la pgina, le indica al navegador en dnde se encuentra
guardado el archivo de imagen y en qu lugar de la pgina lo debe desplegar. Tambin le
puede dar indicaciones acerca del formato que se debe usar para la imagen.
Imgenes de fondo (Background)
El tag <body background=?> permite especificar el nombre y la ubicacin de un
archivo de imagen, que ser utilizado por el navegador como imagen de fondo de la pgina. El
navegador utilizar esta imagen para formar un mosaico, repitiendo la imagen en todo el fondo
de la pgina.
Por ejemplo, el cdigo <body background=patos.gif> har que el navegador forme
un mosaico con la imagen patos.gif sobre el fondo de la pgina.
Imgenes en el documento
El tag para incluir una imagen en una pgina web es <img src=?>, donde el signo ? se
sustituye por el nombre y ruta del archivo de imagen.
Antes de colocar una imagen en tu pgina, necesitas saber el nombre y ubicacin exactos del
archivo de la imagen. Si no incluyes una ruta, el navegador buscar la imagen en la misma
carpeta en que est la pgina Web. Si la imagen est en otra carpeta, entonces debes incluir la
ruta absoluta o relativa necesaria.
Por ejemplo:
<img src=foto01.gif>
<img src=images/foto01.gif>
Borde de imagen
Normalmente las imgenes no tienen borde, o mejor dicho, tienen un borde de grosor igual
a cero. Puedes especificar un borde para tu imagen, desde 0 hasta 99 puntos de grosor,
agregando el tag auxiliar border (borde) dentro de la definicin de la imagen. Por ejemplo:
<img border=3 src=foto01.gif>
TEMA B Trabajando con imgenes
Diseo Web
Dreamweaver

CS4
40
Alineacin horizontal de las imgenes
Para alinear la imagen a la izquierda o a la derecha del texto de un prrafo, debes incluir en
el tag las palabras align left (alinear a la izquierda) o align right (alinear a la derecha) de la
siguiente manera:
<img align=left src=foto01.gif> texto del prrafo
<img align=right src=foto01.gif> texto del prrafo
Imagen 3-1: Alineacin horizontal
Alineacin vertical de las imgenes
Una imagen se puede alinear verticalmente, con respecto a la primera lnea del prrafo que la
contiene. Observa en la imagen los resultados de aplicar cada uno de los tags de alineacin
vertical.
<img align=top src=foto01.jpg> texto del prrafo
<img align=middle src=foto01.jpg> texto del prrafo
<img align=bottom src=foto01.jpg> texto del prrafo
Imagen 3-2: Alineacin vertical
02
VIDEO
Trabajo con imgenes
41
Mejorando el aspecto visual
TI P
Como no existe la alineacin centrada de imagen, si
deseas centrarla debes centrar el prrafo en que se
encuentra, usando el tag:
<p align=center>, por ejemplo:
<p align=center><img src =foto01.gif>
1. En los Recursos Digitales encontrars la carpeta Movies. Dentro de ella hay un archivo de texto
llamado Movies.txt. Contiene informacin general sobre varias pelculas. En la subcarpeta
Images, hay 10 fotografas en formato jpg, relacionadas con las pelculas del texto.
2. Copia el archivo de texto y la subcarpeta Images, con todo su contenido, a una carpeta de
trabajo personal que usars para crear un nuevo sitio Web.
3. Usando slo HTML, crea una nueva pgina Web donde, de manera agradable, muestres
las reseas de las pelculas y las imgenes de cada una. Utiliza rutas relativas para hacer
referencia a las imgenes desde el cdigo fuente.
4. Detalla tu pgina Web agregando encabezados, formato, esquema de color y ligas a algn
sitio interesante de cine o correos electrnicos. Resalta palabras o frases con colores o
estilos de letra.
5. Guarda y revisa el documento en el navegador de Internet.
Insertando imgenes
04
PROYECTO
Diseo Web
Dreamweaver

CS4
42
Tag Funcin Notas
<table>
Inicia la definicin de
una tabla
Se pueden incluir las siguientes propiedades:
Border= tamao del borde
Width= ancho de la tabla
BgColor=# color de la tabla
Cellpadding= espacio en pxeles entre el
borde de la celda y su contenido
Cellspacing= espacio en pxeles entre celdas
<tr>
Define un rengln
dentro de una tabla
<td>
Define una celda en un
rengln
Se pueden incluir las siguientes propiedades:
Bgcolor=# color de la celda
colspan= nmero de columnas que se
combinarn con la celda actual
rowspan= nmero de filas que se
combinarn con la celda actual
TEMA C Tablas en HTML
Al trabajar con imgenes, te has dado cuenta que la ubicacin de stas dentro del documento,
no siempre es la ms adecuada. En HTML no es posible mover la imagen a la posicin que
quieras, como lo haces en un procesador de palabras.
Para tener control preciso de la ubicacin de las imgenes y el texto en un documento Web,
es necesario crear tablas. Las tablas son la estructura ms importante para dar una buena
presentacin a una pgina Web. Una tabla es la agrupacin de celdas en columnas y filas.
Aunque en un principio se incorporaron dentro del lenguaje HTML para mostrar datos tabulados,
actualmente las tablas son la principal herramienta para el diseo de pginas Web en HTML. El
proceso tpico de diseo de una pgina, es primero definir su estructura mediante tablas y luego
agregar el contenido (texto o imgenes) en las celdas de las tablas definidas.
Estos son los tags ms importantes para definir tablas:
0
VIDEO
Trabajo con tablas
43
Mejorando el aspecto visual
1. En un nuevo documento del Bloc de notas crea el siguiente documento Web.
<html>
<head>
<title>Uso de tablas en HTML</title>
</head>
<body>
<h3>Tablas</h3>
<br>
<table border=1 width=400 bgcolor=#ff35cc>
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</table>
</body>
</html>
2. Prueba el documento en el navegador.
3. Modifica y comprueba el cdigo para dar a la tabla las siguientes propiedades:
a. Borde de cuatro pxeles.
b. Ancho de 250 pxeles.
c. Color de la celda 1 en azul claro.
d. Color de la celda 4 en verde.
e. Texto de la celda 1 en negritas.
f. Inserta una imagen en la celda 3.
Creando una tabla simple
02
PROYECTO
Diseo Web
Dreamweaver

CS4
44
1. En un nuevo documento del Bloc de notas crea el siguiente documento Web.
<html>
<head>
<title>Uso de tablas en HTML</title>
</head>
<body>
<h3>Tablas 2</h3>
<br>
<table border=1 width=400 bgcolor=#ff35cc>
<tr>
<td>celda 1</td>
<td>celda 2</td>
<td>celda 3</td>
</tr>
<tr>
<td colspan=2>celda 4</td>
<td>celda 5</td>
</tr>
</table>
</body>
</html>
2. Prueba el documento en el navegador.
3. Cul es la lnea de cdigo que logra la combinacin de celdas en el ejemplo anterior?
Cmo funciona?

Combinando celdas
0
PROYECTO
< td colspan= 2 > celda 4 < /td >
45
Mejorando el aspecto visual
Escribe sobre las lneas el cdigo HTML para crear cada una de las siguientes tablas. Todas tienen
200 pxeles de ancho y borde de 1 punto.

Escribiendo cdigo
02
ACTIVIDAD A
< table width = 200 border = 1 >
< tr >
< td > 1 < /td >
< td > 2 < /td >
< td rowspan = 2 > 3 < /td >
< /tr >
< tr >
< td > 4 < /td >
< td > 5 < /td >
< /tr >
< /table >
< table width = 200 border = 1 >
< tr >
< td rowspan = 2 > 1 < /td >
< td > 2 < /td >
< td > 3 < /td >
< /tr >
< tr >
< td rowspan = 2 > 4 < /td >
< /tr >
< tr >
< td > 5 < /td >
< td > 6 < /td >
< td > 7 < /td >
< /tr >
< /table >
Diseo Web
Dreamweaver

CS4
46
Qu aprendiste?
TEMA A: La diferencia que existe entre las rutas relativas y rutas absolutas, aplicndolas, en
la programacin de pginas Web.
TEMA B: A agregar imgenes a una pgina Web, asignndole formato y alineacin,
identificando los marcadores para estas tareas.
TEMA C: Disear tablas complejas para mejorar el diseo y la organizacin de una pgina
Web mediante HTML.
0
EVALUACIN EV EE
1. Describe para qu se emplean las rutas absolutas:
2. Escribe para qu se emplean las rutas relativas:
3. Define Qu funcin realiza el marcador <table> y qu propiedades se pueden incluir?

Inicia la defnicin de una tabla y se pueden incluir las siguientes propiedades:
Border= tamao del borde, Width= ancho de la tabla
BgColor=# color de la tabla
Cellpadding= espacio en pxeles entre el borde de la celda y su contenido
Cellspacing= espacio en pxeles entre celdas
Las rutas absolutas determinan la posicin especfca de un archivo, independien-
temente de la ubicacin del archivo que lo llama.
Una ruta relativa indica al navegador la ubicacin de un archivo, con respecto a la
ubicacin de la pgina que contiene el cdigo de la liga.
Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
A Conocer la importancia de establecer una estrategia a seguir para el desarrollo
de una pgina Web. Describir el flujo de trabajo para digitalizar una imagen.
B Listar los principales elementos que ayudarn en la planeacin del desarrollo
de un sitio Web.
C Identificar herramientas que ayudarn en la planeacin del diseo y definicin
de un sitio Web.
D Reconocer a Dreamweaver como editor de pginas Web y estudiar el espacio
de trabajo para familiarizarse con la aplicacin e integrarla al flujo de trabajo.
E Listar los pasos elementales en la creacin de un sitio web con Dreamweaver.
F Identificar los elementos que dispone la aplicacin para la creacin de nuevos
documentos y modificacin de propiedades de las pginas que componen un
sitio Web.
NIVEL: Bsico DURACIN SUGERIDA: 4 SESIONES / 45-50 MINUTOS
Un i d ad 0 4
I n t r odu cci n a
Dr eam weaver

Durante el desarrollo de esta unidad aprenders a:


Puedes integrar en tu pgina web
diferentes elementos, entre videos,
archivos de audio, fotos, vistas en
360, videojuegos programados en
Flash, entre otros.
Diseo Web
Dreamweaver

CS4
48
TEMA A Flujo de trabajo para la creacin de sitios Web
Recuerda que un sitio Web se compone de varias pginas que tratan de un mismo tema. Cada
una de las pginas contiene a su vez textos, imgenes y vnculos. Antes de crear cualquier
sitio Web necesitas planearlo. Debes definir los objetivos y la forma de presentarlos. Tienes
que elegir una estructura de navegacin (jerrquica, lineal, lineal con jerarqua o red). Hay que
definir un estilo visual. Debes crear una pgina principal (index o home) y debes disear cada
uno de los documentos del sitio.
El flujo de trabajo se define como la estrategia que debe seguir el desarrollo de una pgina Web
a partir de su diseo, objetivo y funcionamiento. Este proceso inicia con la planeacin del sitio
y culmina con la codificacin y la inclusin del contenido e interactividad.
Para crear un sitio Web completo y profesional, se recomienda trabajar en nueve fases:
1. Definicin de proyecto.
2. Planeacin del diseo del sitio WEB.
3. Recopilacin de informacin e imgenes.
4. Manipulacin y optimizacin de imgenes en un programa de diseo grfico.
5. Creacin del nuevo sitio en Dreamweaver.
6. Diseo de las pginas Web.
7. Integracin de contenido en las pginas.
8. Agregar interactividad (navegacin).
9. Prueba y depuracin.
Imagen 4-1: Flujo de trabajo.eps
49
Introduccin a Dreamweaver

TEMA B Definicin de requisitos del proyecto


Para el desarrollo de un sitio eficaz, es necesario un diseo eficiente y sobre todo una
excelente planeacin revisando previamente los requerimientos de la audiencia. En la etapa
de la planeacin se definen los objetivos, el pblico a quien va dirigido, estrategias, requisitos,
estructura y presupuesto.
Requerimientos del cliente
Esta es una de las etapas donde se debe revisar con cuidado cada uno de los elementos
requeridos por el cliente, incluyendo los que ste no observa desde adentro de la empresa.
Es muy importante dejar en claro y por escrito, una lista detallada de las necesidades para un
anlisis en conjunto y durante el desarrollo, el cliente debe validar cada uno de los pasos.
Algunos temas a solicitar son:
a. Secciones en la pgina.
b. Sitios web que le gustan (por ejemplo de la competencia).
c. Audiencia del sitio web.
d. Periodicidad de los cambios.
e. Idiomas.
f. Material disponible.
Contenido para el propsito
La definicin del propsito de un sitio web es de vital importancia en el proceso de planificacin,
donde la audiencia es claramente identificada y el contenido es desarrollado. El contenido es
la informacin proporcionada por el usuario para publicar en el Internet acerca de su negocio,
productos y servicios. Dependiendo de esta informacin se puede o no atraer visitantes.
Contenido adecuado para la audiencia
Del latn audienta, significa or a las personas, es el nmero de personas que reciben un
mensaje a travs de cualquier medio de comunicacin. La audiencia debe estar claramente
definida desde el principio del proceso de la creacin de la pgina Web, de lo contrario sta
no tendr xito. La audiencia puede estar divida por gnero, edad, empresariales potenciales
o voluntarios para su organizacin. Al saber quin es la audiencia, el diseo debe estar en
funcin de sus expectativas y necesidades.
Diseo Web
Dreamweaver

CS4
50
TI P
Para mayor informacin relacionada con Derechos de
autor visita:
http://www.unesco.org/bpi/pdf/memobpi08_publicdomain_es.pdf
http://www.diputados.gob.mx/LeyesBiblio/pdf/122.pdf
Derechos de autor
Al obtener la informacin requerida para el proyecto, siempre se considerar el reconocimiento
o fuente de autor o creacin, pudiendo ser alusivo a texto, imgenes, grficos o cualquier otro
elemento. Derecho de autor protege obras tales como la poesa, pelculas, CD-ROM, videojuegos,
videos, obras, pinturas, partituras musicales, espectculos de msica grabada, novelas, cdigo
de software, esculturas, fotografas, coreografa y diseos arquitectnicos. Siempre deber
estar en un medio tangible. La obra debe ser original aunque pudiera ser similar a otras. Existen
diversos elementos en Internet los cuales carecen de un autor conocido o atribuido. A esto se le
conoce como informacin de dominio pblico, informacin a la que el pblico puede acceder
sin infringir ninguna disposicin jurdica ni violar cualquier otro derecho ni contraer obligacin
alguna de Confidencialidad. Por consiguiente, se refiere al conjunto de obras u objetos de
derechos conexos que toda persona puede explotar sin autorizacin, por ejemplo, debido a que
no estn protegidos en virtud de la legislacin nacional o el derecho internacional, o a que el
plazo de la proteccin ha expirado.
Las obras del dominio pblico pueden ser libremente utilizadas por cualquier persona, con la
sola restriccin de respetar los derechos morales de los respectivos autores. Es libre el uso de
la obra de un autor annimo.
Integracin de estndares de accesibilidad para personas con
capacidades diferentes
La accesibilidad en la Web debe ser universal, sin considerar el hardware, software, infraestructura
de red, idioma, cultura, ubicacin geogrfica y capacidad del usuario. Se deben contemplar
puntos elementales para el acceso a la red sin dificultades para ciertos grupos de usuarios sin
sacrificar el diseo.
Se recomienda utilizar el atributo alt para incorporar texto equivalente al contenido de una
imagen cuando se requieren utilizar grficos. Esto permitir que dispositivos (como lectores
de pantalla) o personas que no pueden visualizar los grficos, obtengan una representacin
alternativa textual.
51
Introduccin a Dreamweaver

TEMA C Planeacin del diseo del sitio Web


Durante el proceso de planeacin se deben considerar los objetivos del sitio, beneficio a
obtener con el sitio, el presupuesto, beneficio para los visitantes, la siguiente parte del proceso
de la planeacin tiene que ver con el contenido o diseo del sitio y esto hace referencia a los
colores, el logotipo, estructura del sitio, navegacin, fotos e imgenes.
Diseo de proyecto Web
En esta fase el sitio comienza a materializarse. Se deben preparar los elementos grficos y
audiovisuales de acuerdo a la estructura previa del sitio. El diseo debe contener balance, es
decir, una proporcin adecuada de diferentes elementos integrados en el sitio, color, imgenes,
texto, etc. Espacio, dejar un par de espacios limpios sin imgenes ni texto, pueden dar una
sensacin de libertad. Lgica y orden son dos elementos importantes, ya que con ellos el
usuario puede tener una navegacin simple.
Sitio Web
Un sitio web es una coleccin de pginas web organizadas jerrquicamente, las cuales tienen
un dominio en comn en Internet. Todos los sitios web publicados y accesibles forman parte de
la World Wide Web.
Al crear un sitio web es muy importante considerar los siguiente:
1. Diagramas de flujo, guiones y Wireframes: Una de las herramientas bsicas para la
elaboracin de un sitio web, es la creacin de diagramas, stos servirn para representar
la estructura y el flujo de navegacin del sitio. Los Wireframes muestran el esquema
de una pgina web, aqu se establece el contenido y comportamiento de las diferentes
pginas, es mucho ms detallado. Puede incluir tonos, color, diagramacin de la pgina,
iconografa a utilizar, tipografas, etc. Los guiones tienen la funcin de indicar el momento
en el cual se mostrar determinada informacin dentro de la pgina Web.
2. Uso en varias plataformas: Las plataformas web son el entorno de desarrollo de software
utilizado para disear y ejecutar un sitio web, este consta de:
El sistema operativo, con el que opera el servidor donde se hospedan las pginas.
El servidor web, es el software que maneja las solicitudes desde equipos remotos
a travs de Internet. Puede proveer el archivo solicitado o manejar otros programas
para mostrar la informacin.
Sistema manejador de bases de datos, almacena sistemticamente un conjunto de
registros de datos relacionados para ser usados posteriormente.
Diseo Web
Dreamweaver

CS4
52
3. Uso en varios navegadores: Una de las actividades necesarias al momento de la creacin
de un sitio web, es comprobar el diseo en varios navegadores, para descubrir errores de
su trabajo y errores causados por los navegadores.
Pgina Web
Es un documento o informacin, la cual se puede observar en la World Wide Web y est
compuesta por diferentes elementos como texto o enlaces multimedia. Las hay estticas o
dinmicas.
Jerarqua de pginas
Este concepto se refiere a la forma en la cual est estructurada la navegacin de un sitio.
Hay distintos tipos de estructuras, secuencia o lineal, parrilla, jerrquica, que es la forma ms
utilizada para organizar informacin compleja. Este tipo de estructura funciona especialmente
para los sitios que parten de una nica pgina de inicio.
Facilidad de uso
Permite revisar la eficacia en la consulta de informacin dentro de un sitio Web, est directamente
relacionado con el diseo de interfaz de usuario y el desarrollo de contenidos. Debe ser de fcil
acceso, claro y los contenidos mostrarse sin algn software especial a instalar.
Accesibilidad
La accesibilidad en la Web debe ser universal, sin considerar el hardware, software, infraestructura
de red, idioma, cultura, ubicacin geogrfica y capacidad del usuario. Se deben contemplar
puntos elementales para el acceso a la red sin dificultades para ciertos grupos de usuarios sin
sacrificar el diseo.
Se recomienda utilizar el atributo alt para incorporar texto equivalente al contenido de una
imagen cuando se requieren utilizar grficos. Esto permitir que dispositivos (como lectores
de pantalla) o personas que no pueden visualizar los grficos, obtengan una representacin
alternativa textual.
53
Introduccin a Dreamweaver

Antes de definir la estructura y contenido del sitio Web, debes considerar el tema, propsito y
audiencia a la que se dirigir.
1. Elige un tema general para un sitio educativo, relacionado con alguna asignatura como
literatura, ciencias, lenguaje, historia u otra.
2. Define un propsito para el sitio y decide el tipo de audiencia al que quieres dirigir tu trabajo.
Anota tus decisiones en este espacio:
Tema:
Propsito:
Audiencia:
3. Desglosa el contenido del nuevo sitio en temas generales, que se convertirn en las pginas
del sitio Web. Por ahora define slo de 4 a 8 temas o subtemas. No olvides incluir una pgina
principal de introduccin o presentacin.
4. Dibuja un esquema de la estructura que tendr el sitio y que posteriormente se convertir
en el flujo de navegacin del mismo. Recuerda (o revisa en la primera seccin del curso) las
estructuras de navegacin jerrquica, lineal, lineal con jerarqua y red.
Planeacin de un sitio Web
404
ACTIVIDAD A
Matemticas
Ser una materia de apoyo auxiliar en Internet para consultar frmulas o
como referencia rpida.
Jvenes de 13 a 20 aos
+ Principal
- Secundaria
i)Productos estables
ii)Factorizacin
iii)Sistema de ecuaciones
- Preparatoria
i)Geometra analtica
ii)Clculo diferencial
iii)Clculo integral
Diseo Web
Dreamweaver

CS4
54
5. En la siguiente tabla describe brevemente el contenido que tendra cada una de las pginas.
Puedes usar una frase que resuma el texto que piensas insertar. Incluye adems una
descripcin de las imgenes que te gustara colocar en cada pgina.
Pgina Contenido
Principal
Secundaria Preparatoria
Principal
-Breve descripcin del propsito
-Men
Secundario
-Imgenes de letras y ecuaciones
-Men
Productos Notables
-Breve explicacin
-Formulario
-Tips
-Ejercicios
Factorizacin
-Breve explicacin
-Desarrollo
-Tips
-Ejercicios
Sistema de Ecuaciones
-Explicacin
-Mtodos de solucin
-Tips
-Ejercicios
Preparatoria
-Imgenes de grfcos y signos de integracin
-Men
Geometra Analtica
-recta
-hiprbola
-parbola
-circunferencia
-valo
-Tips -Ejercicios
Clculo Diferencial
-Breve explicacin
-Formulario
-Aplicaciones
-Tips
-Ejercicios
Clculo Integral
-Breve explicacin
--Formulario
-Aplicaciones
-Tips
-Ejercicios
55
Introduccin a Dreamweaver

Recopilacin y manipulacin de informacin


En la actividad anterior realizaste la planeacin, que es la primera fase de la creacin de un
nuevo sitio Web. Las siguientes dos fases, son la recopilacin de informacin e imgenes y la
manipulacin y optimizacin de las mismas.
Lo ideal es crear una carpeta temporal donde puedes guardar elementos como textos, imgenes,
videos, sonidos o animacin, que podrs o no usar en el sitio final. Una vez que hayas generado
o recopilado suficiente informacin para cumplir los objetivos y estructura del sitio Web, utiliza
programas que conozcas para trabajar con los textos y las imgenes. Considera estas guas
generales de trabajo:
a. No des formato a los textos, ya que es mejor darle formato directamente en
Dreamweaver

. Lo ms conveniente es pasar a archivos de Bloc de notas (texto puro)


todos los textos que vayas a utilizar en las pginas del sitio Web.
b. Modifica las imgenes en algn programa de edicin de fotografas, para que queden
exactamente como quieres que aparezcan en el sitio, incluyendo dimensiones y
apariencia. Aunque en Dreamweaver

es posible modificar detalles como el tamao


o el borde, siempre es mejor hacerlo antes en un programa especfico para diseo
grfico (Photoshop

, Fireworks

u otro).
c. Optimiza las imgenes. Los programas de manipulacin fotogrfica permiten reducir
el tamao de los archivos de imagen guardndolos en diferentes formatos. Considera
que en Web muchos formatos de imagen tradicionales no pueden ser utilizados, por
lo que debes guardar tus fotos en los formatos jpg, gif o png (gif y jpg son soportados
por ms navegadores).
TI P
La planeacin de un nuevo sitio Web, como la
que has realizado en la actividad anterior, debe
ser siempre el primer paso del flujo de trabajo.
En adelante, realiza siempre este ejercicio de
planeacin antes de encender la computadora
para crear el sitio.
Diseo Web
Dreamweaver

CS4
56
TEMA D Dreamweaver

Adobe

Dreamweaver

CS4 es un editor profesional de documentos Web. Permite crear


pginas, tanto escribiendo directamente el cdigo en HTML, como diseando de forma
visual los elementos. Dreamweaver

incluye muchos elementos de gran utilidad para los que


ya tienen ms conocimiento de diseo Web, como manejo de scripts, editores de cdigo y
depuradores; sin embargo es extremadamente sencillo para quienes no saben ningn lenguaje
de programacin en Internet.
En Dreamweaver

se puede introducir el texto de una pgina Web, insertar imgenes, crear


tablas y asignar formatos, de forma muy similar a como se hace en un procesador de palabras
moderno. Este curso se enfoca al manejo general de la interfaz grfica y a la creacin de
pginas en el amigable entorno visual.
Espacio de trabajo de Dreamweaver

La ventana de Dreamweaver integra barras de herramientas, ventanas de documento (donde


se disean las pginas Web), paneles y una barra de propiedades. Todas las ventanas y
paneles se pueden reacomodar, apilar, ocultar o mostrar segn sea necesario. Cuando inicies
Dreamweaver se abrirn los siguientes elementos del rea de trabajo:
Barra de ttulo: Contiene el nombre del programa.
Barra de Mens: En esta barra se encuentran las operaciones y acciones de Dreamweaver,
encargadas de modificar los elementos dentro de las pginas que se realicen.
Barra de Insertar: Contiene herramientas para agregar contenido al documento, organizadas
en varias categoras. Cualquier elemento se puede insertar a travs del Men Insert (Insertar),
pero la barra de Insertar facilita estas tareas.
Barra de Herramientas del Documento: Contiene botones para cambiar la forma en que se
ve el documento abierto. Por ahora conserva siempre la vista Designer (Diseador).
Barra de Estado: Esta barra indica el tag de HTML en que se est actualmente. A la derecha
incluye las opciones de seleccin, mano y zoom, para ajustar la vista al porcentaje requerido
o arrastrar la pgina.
Ventana del Documento: Esta es el rea de diseo de la pgina o documento HTML actual.
Muestra la pgina casi exactamente como aparecer en el navegador.
Inspector de Propiedades: Muestra y permite modificar las propiedades del elemento que
est seleccionado en el documento en el que se est trabajando.
Paneles: Los distintos paneles se muestran u ocultan para trabajar con algn aspecto
especfico en el diseo del documento.
57
Introduccin a Dreamweaver

Imagen 4-2: Espacio de trabajo


Observa el Video: Entorno de trabajo Dreamweaver

y coloca en las lneas el nombre de cada


parte del entorno de Dreamweaver

.
Reconociendo el espacio de trabajo
402
ACTIVIDAD A
404
VIDEO
Espacio de trabajo
Panel insertar
Panel
Archivos
Barra de
herramientas
Barra de la
aplicacin
Ventana del
documento
Inspector de
propiedades
Diseo Web
Dreamweaver

CS4
58
Vistas
Dreamweaver

tiene tres modos de visualizacin de documentos.


Code View (Vista Cdigo) o men View Code (Ver/Cdigo). Muestra
el cdigo HTML que se requiere para que el navegador de Internet despliegue el
contenido del documento. Aqu se puede editar adems el cdigo fuente generado
por programas de diseo de pginas Web de terceros, que se quieran seguir
trabajando en Dreamweaver.
Design View (Vista Diseo) o men View/Design (Ver/Diseo). Slo
muestra el contenido grficamente, permitiendo trabajar de forma visual con todos
los elementos. Es el modo de trabajo ms simple.
Code and Design (Vista Cdigo y Diseo) o men View/Code and
Design Ver (Ver/Cdigo y Diseo). Divide la ventana en dos reas, de manera que
puedes trabajar con el cdigo o con los elementos del sitio Web.
TI P
TI P
En cualquier momento puedes visualizar
la distribucin predeterminada usando el
men Window/Workspace layout/Designer
(Ventana/Entorno de trabajo/Diseador).
Mientras te familiarizas con el programa,
es recomendable trabajar siempre en esta
distribucin.
TTTTTTTTTTTTTTTTTTTTTIIIIIIIIIIIIIIIIIIIII PPPPPPPPPPPPPPPPPPPPP
402
VIDEO
Vistas
59
Introduccin a Dreamweaver

La mejor forma de iniciar un sitio en Dreamweaver

es crear una carpeta en tu disco duro, donde


irs colocando todos los archivos (pginas Web, imgenes, video o sonido) que formarn parte
del sitio. No uses esta carpeta para archivos temporales si no ests seguro que quedarn en el
sitio final. Si creas o copias documentos sin pensar en la estructura final del sitio, puedes terminar
con una carpeta llena de archivos que no se usen, sin organizacin y difcil de administrar.Si el
sitio es mediano o grande, crea subcarpetas para organizar los archivos. Un sitio Web regular
contiene decenas o centenas de archivos diferentes y una buena organizacin es indispensable
para facilitar la creacin y mantenimiento.
Despus de crear la carpeta principal del sitio, es el momento de iniciar Dreamweaver

. Al
definir el sitio, la aplicacin identifica cules son las carpetas involucradas, mantiene un registro
de los cambios y automatiza las tareas para publicar las pginas en un servidor de Internet.
En el cuadro de dilogo del men Site/New Site (Sitio/Nuevo Sitio) debes especificar el nombre
que quieres dar al sitio, la carpeta principal que has definido y la forma en que se conecta este
sitio al Internet (por ahora ninguna).
Estos son los pasos para definir un nuevo sitio en
Dreamweaver

, a partir del asistente del Men


Site/New Site (Sitio/ Nuevo Sitio).
Paso 1
Define el nombre del sitio. Utiliza un nombre que
sea representativo al tema que seleccionaste
para crear la pgina web. Dreamweaver

usar
este nombre como una referencia interna para
todo el contenido del sitio Web.
TEMA E Definicin de un sitio en Dreamweaver

Imagen 4-3: Defnicin de sitio: Paso 1


Paso 2
En tu primer sitio no usars tecnologa de servidor.
Esta tecnologa se usa para crear sitios con pginas
cuyo contenido no es fijo, sino controlado por
programacin, tambin conocido como contenido
dinmico o pginas dinmicas.
Imagen 4-4: Defnicin de sitio: Paso 2
Diseo Web
Dreamweaver

CS4
60
Paso 3
Para empezar, lo ms conveniente es trabajar
todas las pginas de forma local y despus
publicarlas en Internet cuando estn terminadas.
Especifica la ubicacin de los archivos en tu disco
local, es decir, la carpeta principal que creaste
y que contendr todas las dems carpetas y
archivos del sitio final. Recuerda que esta no es la
carpeta temporal de recopilacin y manipulacin
de informacin.
Imagen 4-5: Defnicin de sitio: Paso 3
40
VIDEO
Definicin de un sitio Web en Dreamweaver

Imagen 4-6: Defnicin de sitio: Paso 4


Imagen 4-7: Defnicin de sitio: Paso 5
Paso 4
Por ahora editars el sitio localmente, no en Internet,
por lo tanto, en las opciones de conexin con el
servidor remoto, selecciona None (Ninguna).
Paso 5
La ltima pantalla muestra en resumen las
configuraciones que seleccionaste para el sitio
Web.
61
Introduccin a Dreamweaver

Toma en cuenta la planeacin del nuevo sitio Web que realizaste antes. Imagina que ya realizaste
la fase de recopilacin de informacin y que ya has manipulado y optimizado las fotografas. Es
el momento de definir el sitio en Dreamweaver

.
1. En tu disco duro, crea una nueva carpeta y dale un nombre representativo del nuevo sitio
que vas a definir. Por el momento esta carpeta estar vaca. Al ir armando las pginas Web,
Dreamweaver

te ayudar a copiar a esta carpeta los archivos que formarn parte del sitio
final.
2. Inicia Dreamweaver

y asegrate que la distribucin de la pantalla es la predeterminada.


Para eso usa el men Window/Workspace layout/Designer (Ventana/Espacio de trabajo/
Diseador).
3. Inicia el asistente del men Site/New Site (Sitio/Nuevo sitio) y define un nuevo sitio con las
siguientes caractersticas (no modifiques otras opciones):
a. Nombre del sitio: dale un nombre apropiado. No es necesario dar una direccin http por
ahora.
b. Elige No, I do not want to use a server technology (No utilizar tecnologa de servidor).
c. Elige la opcin recomendada, para Edit local copies on my machine, then upload to
server when ready (Editar copias locales en tu equipo y luego cargarlas al servidor
cuando estn listas). Adems debes elegir la carpeta principal que usar el sitio. Esta
seleccin es muy importante ya que esta carpeta ser la referencia base de todo el sitio
Web y todo el contenido estar organizado en su interior.
d. Especifica que trabajars localmente el sitio, eligiendo None (Ninguno) en la conexin
al servidor.
e. Revisa el resumen de configuracin del nuevo sitio Web y termina el asistente con Done
(Finalizar).
4. A la derecha de la pantalla, observa el panel Files (Archivos). Contiene una nica carpeta
con el nombre que diste al sitio. Sobre esta carpeta, da un clic con el botn secundario del
ratn para abrir su men contextual. Elige las opciones New File (Archivo Nuevo) o New
Folder (Nueva Carpeta) y ve creando la estructura de tu sitio Web, tal y como la definiste en
la planeacin.
5. Desde el panel Files (Archivos) puedes hacer doble clic sobre cualquier archivo para abrirlo
en la ventana principal de Dreamweaver

y comenzar a introducir contenido en l. Prueba


abrir algn archivo, cerrarlo y abrir otro despus.
Definiendo el nuevo sitio
404
PROYECTO
Diseo Web
Dreamweaver

CS4
62
Imagen 4-8: Cuadro de dilogo Nuevo Documento
En un sitio definido puedes agregar pginas en cualquier momento. El cuadro de dilogo del
Men File/New (Archivo/Nuevo) presenta varios tipos de documentos para crear una nueva
pgina. Puedes iniciar con una pgina en blanco, que inicia con un rea totalmente vaca, donde
puedes crear libremente el documento. Tambin puedes iniciar con una pgina prediseada
que ya tiene algunos espacios y elementos.
TEMA F Nuevo documento
Pginas
en blanco
Pginas
prediseadas
Diseo de pgina Tipo de pgina
404
VIDEO
Nuevo documento
NOTA
El ltimo sitio con el que se
haya trabajado, se abre auto-
mticamente cuando inicias
Dreamweaver.
Si necesitas cambiar a un sitio existente diferente,
es necesario usar el men Site/Manage Sites (Sitio/
Administrar sitios). En el cuadro de dilogo que se
abre, simplemente elige un sitio y presiona el botn
Done (Finalizar).
63
Introduccin a Dreamweaver

Propiedades del documento


En un sitio Web es importante que todas las pginas tengan caractersticas similares para dar
uniformidad y congruencia. Puedes definir el formato de cada una de las pginas desde el cuadro
de dilogo Page Properties (Propiedades de la pgina). Puedes acceder a las propiedades de
varias formas:
a. Haciendo clic sobre el men Modify/Page Properties (Modificar/Propiedades de la
pgina).
b. Usando la combinacin de teclas <Ctrl+J>.
c. Haciendo clic con el botn secundario del ratn sobre el rea de trabajo y seleccionado
del men contextual la opcin Page Properties (Propiedades de la pgina).
Las propiedades del documento estn organizadas en categoras. Slo veremos las primeras dos:
A. En la categora Appearance (Aspecto), encontrars las propiedades:
1. Background image (Imagen de fondo): esta imagen se mostrar en un mosaico de
repeticiones a lo largo y ancho del documento. Si usas una imagen de fondo utiliza algo
muy sutil. No es conveniente usar imgenes llamativas ni tener un GIF animado como
fondo.
2. Background color (Color de fondo): especifica un color de fondo para el documento.
Este color slo se mostrar si no hay una imagen de fondo.
3. Text Color (Color del texto): determina el color predeterminado de la fuente.
4. Size (Tamao): define el tamao predeterminado de la fuente.
5. Margin (Mrgenes): establece los mrgenes en el documento.
Imagen 4-9: Propiedades de pgina Aspecto
1
5
2
3
4
Diseo Web
Dreamweaver

CS4
64
Imagen 4-11: Barra herramientas de documento
B. En la categora Links (Vnculos), encontrars las propiedades:
1. Link Color (Color de vnculo): ayuda al visitante a distinguir entre el texto normal y los
vnculos de enlace a otras pginas.
2. Visited links (Vnculos visitados): el color de los vnculos visitados es diferente al del
vnculo sin visitar.
3. Active links (Vnculos activos): color de los vnculos cuando el ratn hace clic sobre
ellos.
4. Rollover links (Vnculos rollover): color de los vnculos cuando el ratn est sobre
ellos.
5. Underline Style (Estilo subrayado): de forma predeterminada, al crear un vnculo el
texto aparece subrayado, pero con esta opcin puedes elegir que el texto se muestre
diferente.
2
1
3
5
4
Ttulo del documento
En la Barra de herramientas del documento, se muestra el campo Title (Ttulo). Directamente
en este espacio puedes escribir el ttulo que aparecer en la barra de ttulo del navegador
cuando se abra tu pgina Web. Si el visitante agrega la pgina a sus Favoritos, se guardar con
el ttulo que le hayas puesto.
Aqu puedes escribir el ttulo que quieres que
aparezca en la barra de ttulo de navegador.
Imagen 4-10: Propiedades de pgina>Vnculos
65
Introduccin a Dreamweaver

Guardar el documento
Es muy recomendable guardar el documento inmediatamente despus de crearlo, incluso antes
de agregarle el contenido. De esta manera Dreamweaver puede mantener un inventario de la
ubicacin de todos los archivos del sitio y la relacin que hay entre ellos.
Utiliza el men File/Save (Archivo/Guardar) o la combinacin de teclas <Ctrl+S>, para
guardar el documento activo. No olvides elegir la ubicacin ms apropiada, siempre dentro de
la estructura de carpetas definida para el sitio Web.
TI P
Dreamweaver

muestra un asterisco
junto a los nombres de las pginas
que tienen cambios que no han sido
guardados. En esta imagen, la primera
pgina no ha sido guardada, mientras
que la segunda s.
40b
VIDEO
Propiedades y ttulo del documento
Modificando las propiedades de un
documento Web
402
PROYECTO
1. En los Recursos Digitales encontrars los archivos Modweb.html y Modweb.jpg. Localiza
estos dos archivos y cpialos dentro de la carpeta principal del sitio que has definido.
2. Inicia Dreamweaver

y revisa que tu sitio est activo. Observa el panel Files (Archivos) para
comprobar que los dos archivos que acabas de copiar estn disponibles en la estructura del
sitio.
3. Directamente desde el panel Files (Archivos) haz doble clic sobre la pgina Modweb.html,
para abrirla en el rea de trabajo. Esta pgina simple contiene algunos textos y ligas.
Diseo Web
Dreamweaver

CS4
66
4. Observa la pgina y contesta:
a. De qu color es el fondo?
b. De qu color es el texto normal?
c. De qu tamao es el texto?
d. Cul es el color de las ligas?
5. Abre las opciones del documento con el men Modify/Page Properties (Modificar/
Propiedades de la pgina).
6. Determina las siguientes caractersticas:
Page font (Fuente de pgina): Verdana, Arial, Helvetica San-serif
Size (Tamao): 9 pxeles
Text color (Color de texto): #666666
Background color (Color de fondo): #CCCCCC
Link font (Fuente de vnculo): Same as page font (Igual que la fuente de pgina)
Size (Tamao de vnculo): xx-small (muy pequeo)
Link color (Color de vnculo): #006600
Visited links (Vnculos visitados): 00CC33
Underline style (Estilo subrayado): Always underline (Siempre subrayar)
7. Aplica los cambios y observa el resultado.
a. De qu color es el fondo?
b. De qu color es el texto normal?
c. De qu tamao son las ligas?
d. Cul es el color de las ligas?
8. Utiliza las propiedades para establecer como imagen de fondo del documento el grfico
Modweb.jpg.
9. Guarda los cambios desde el Men File/Save (Archivo /Guardar).
Azul #3300ff
Naranja #ff6633
14 puntos
Vino #990033
Gris
Gris oscuro
Muy pequea (xx-small)
Verde oscuro
67
Introduccin a Dreamweaver

Qu aprendiste?
TEMA A: Elaborar una estrategia a seguir para desarrollar una pgina Web.
TEMA B: Que para el desarrollo de un sitio eficaz y que cumpla con los requerimientos de la
audiencia, es necesario un diseo eficiente.
TEMA C: Que debes considerar los objetivos y diseo del sitio al integrar colores, logotipo,
estructura del sitio, navegacin, fotos e imgenes
TEMA D: Identificar los elementos que componen el espacio de trabajo de Dreamweaver


reconocindolo como un editor de pginas Web.
TEMA E: La importancia de definir un sitio en la aplicacin para un eficiente desarrollo.
TEMA F: Identificar los elementos para la creacin de pginas, as como, modificar las
propiedades de las pginas que componen al Sitio en desarrollo.
04
EVALUACIN EV EE
Contesta las siguientes preguntas.
1. Dentro de Dreamweaver, las pginas Web se ven como:
a. slo cdigo HTML
b. slo grficamente
c. cdigo HTML y grficamente
2. Si los archivos se mueven a una carpeta fuera de la carpeta principal del sitio, las pginas
se mostrarn correctamente.
a. Verdadero b. Falso
3. Si los archivos se mueven a una subcarpeta dentro de la carpeta principal del sitio,
Dreamweaver actualiza los vnculos para que las pginas se muestren correctamente.
a. Verdadero b. Falso
4. En Dreamweaver para qu se define un sitio Web?
Para tener una mejor organizacin de los archivos.
Diseo Web
Dreamweaver

CS4
68
NOTAS:

Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
A Discutir la importancia que tiene el lenguaje CSS al permitir aplicar estilos,
adornos y otros formatos de manera sencilla a un documento HTML.
B Usar Dreamweaver

como editor de HTML y emplearlo para dar formato al texto.


C Identificar tres tipos de estilos que se pueden aplicar en un documento HTML.
D Definir el procedimiento para la creacin de una regla CSS en Dreamweaver


para su aplicacin en un documento HTML.
E Emplear el cuadro de dilogo Propiedades de regla CSS para modificar las
caractersticas de una regla CSS.
F Usar el inspector de propiedades para agregar hipervnculos en un sitio Web.
G Practicar con herramientas disponibles en Dreamweaver la creacin y
modificacin de tablas.
H Demostrar mediante la utilizacin de etiquetas Div que se puede colocar
contenido en diferentes lugares en una pgina sin la necesidad de crear tablas.
I Discutir los principales formatos de imagen recomendables para Web, listando
sus caractersticas.
J Valuar la necesidad de agregar elementos multimedia en un sitio Web para
mejorar su aspecto.
NIVEL: Bsico DURACIN SUGERIDA: 6 SESIONES / 45-50 MINUTOS
Un i d ad 0 5
Agr egan do el emen t os
a u n a pgi n a Web
Durante el desarrollo de esta unidad aprenders a:
El elemento bsico del diseo CSS es
la etiqueta Div. Puedes situar etiquetas
Div de forma absoluta (especificando
las coordenadas x y y) o de forma
relativa (especificando su distancia
con respecto a otros elementos de la
pgina). Tambin puedes situar etiquetas
Div especificando elementos flotantes,
rellenos y mrgenes (el mtodo preferido
conforme al estndar web actual).
Diseo Web
Dreamweaver

CS4
70
HTML es un lenguaje fcil de aprender, pero limitado en cuanto a sus etiquetas y estructura
al momento de aplicar formato a un documento. Esto es as porque fue concebido para usos
distintos a los actuales. Cuando el nmero de sitios web empez a crecer, tambin creci el
nmero de etiquetas que la especificacin HTML contemplaba. El objetivo era construir sitios
web cada vez ms atractivos visualmente hablando, con lo que HTML deba incluir nuevas
etiquetas destinadas a conseguir diversos efectos visuales.
Para solucionar estos problemas, los diseadores han utilizado tcnicas tales como la utilizacin
de tablas, imgenes transparentes para ajustarlas, utilizacin de etiquetas que no son estndares
del HTML y otras. Estos recursos han causado a menudo problemas en las pginas, al momento
de su visualizacin en distintas plataformas.
Con todos estos cambios que la web ha sufrido, nos encontramos con que un lenguaje que
en sus inicios haba sido orientado a la estructura, ahora estaba totalmente orientado a la
visualizacin. Encontramos etiquetas cmo <B>, <U> o <I> que definen estilos de visualizacin
sin aportar nada a la estructura del documento.
Por otra parte, el uso de la etiqueta FONT condiciona totalmente la estructura del documento, ya
que, aunque con ste podemos definir una zona que corresponde a la cabeza o ttulo de una
pgina, que debera estar expresado con un H1, al realizar este cambio se pierde por completo
la estrucutra del documento.
De cierta manera, un lenguaje llamado Cascade Style Sheets (CSS) (Hojas de estilo en
cascada), hace ms sencilla la manera de aplicar estilos, adornos y otros formatos.
Que es CSS?
CSS es el lenguaje que se utiliza para describir la presentacin de pginas Web, incluyendo
colores, composicin y fuentes. Permite adaptar la presentacin a los diferentes tipos de
dispositivos, como pantallas grandes y pequeas, o impresoras. CSS es independiente de HTML
y se puede utilizar con cualquier lenguaje de marcado basado en XML. La separacin de HTML
y CSS hace ms fcil el mantenimiento de los sitios web. Esto se conoce como la separacin
del contenido y su presentacin.
Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentro del
documento HTML y as conseguir el mismo efecto que si utilizramos el lenguaje tradicional:
<h6><font color=blue>Hola Mundo</font></h6>
Con lenguaje CSS: H6 {color: blue;}
A esta expresin se la denomina regla, y especficamente, permite poner en azul los elementos
de tipo h6.
TEMA A Introduccin a CSS
71
Agregando elementos a una pgina Web
El contenido es lo ms importante de una pgina Web y es lo que mayor tiempo requiere para
su creacin, por eso es importante que pongas atencin para lograr una buena aplicacin del
texto.
Aunque Dreamweaver

permite modificar el texto de forma similar a como se hace en los


procesadores de texto, es importante recordar siempre los tags HTML para dar formato. Siempre
puedes revisar el cdigo fuente cambiando a la vista de cdigo del documento.
En Dreamweaver

puedes adems aplicar acciones tpicas de los procesadores de palabras


como:
Deshacer <Ctrl+Z>
Rehacer <Ctrl+Y>
Revisin de ortografa <Shift+F7>
Modificar la fuente, tamao, color, estilo, alineacin, sangra y vietas (listas).
Dentro de la pgina Web puedes introducir tambin caracteres especiales, como smbolos de
copyright, smbolos internacionales y otros. Para elegir alguno de los caracteres especiales haz
clic en el men Insert/HTML/Special Characters/Other (Insertar/HTML/caracteres especiales/
Otro).
TEMA B Aadiendo texto
TI P
Si escribes ms de un espacio en Dreamweaver

, cuando
visualices la pgina en el navegador slo vers uno. Sin
embargo, en la vista de cdigo puedes utilizar el caracter
especial &nbsp; tantas veces como sea necesario, para dar
espacios entre palabras.
Una buena prctica al aadir texto, es la de asignar un
conjunto de fuentes, en lugar de una sola fuente especializada.
Esto asegura que la mayora de los visitantes, vern el texto
de la misma manera. El navegador utiliza la primera fuente
especificada y que se tenga instalada en su sistema. Si
ninguna de las fuentes en el conjunto se encuentra instalada,
el navegador desplegar el texto segn las preferencias del
navegador del visitante.
Diseo Web
Dreamweaver

CS4
72
Sintaxis bsica de CSS
Cada regla de CSS se divide en tres partes:
selector {propiedad: valor;}
selector: es la etiqueta HTML que se le aplicara a dicha propiedad.
propiedad: corresponde a una propiedad vlida dentro de la especificacin CSS.
valor: separado por un punto y coma es un valor asignado a la propiedad.
Estilos
Existen tres tipos de estilos que se pueden aplicar en un documento HTML:
1. Una hoja de estilo externa, (enlace a una hoja de estilo) es una hoja de estilo que est
almacenada en un archivo diferente al archivo donde se almacena el cdigo HTML de la
pgina Web. Esto se realiza mediante la etiqueta Link, la lnea de cdigo debe insertarse
en la seccin de encabezado del cdigo HTML, es decir, entre la etiqueta <head> y </
head>. De esta manera:
<html>
<head>
<title>Mi documento</title>
<link rel=stylesheet type=text/css href=style/style.css />
</head>
<body>
...
El navegador cargar ambas hojas de estilo, combinando y aplicando las reglas que
definen.
2. Una hoja de estilo interna, (la etiqueta style) que es una hoja de estilo que est incrustada
dentro de un documento HTML incluyendo el cdigo CSS usando la etiqueta HTML
< st yl e>. Por ejemplo, as:
<html>
<head>
<title>Ejemplo</title>
<style type=text/css>
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una pgina con fondo rojo</p>
</body>
</html>
TEMA C Aplicando CSS a un documento HTML
73
Agregando elementos a una pgina Web
TI P
Si utilizas una propiedad que no existe, la
declaracin es ignorada.
Si utilizas un valor incorrecto para la
propiedad, depender del navegador si es
ignorada en su totalidad o slo esta parte.
3. Un estilo en lnea (el atributo style) es un mtodo para insertar el lenguaje de estilo de
pgina directamente dentro de una etiqueta HTML. Aunque esta manera no es lo ms
adecuado, el lenguaje CSS se puede aplicar as:
<html>
<head>
<title>Ejemplo</title>
</head>
<body style=background-color: #FF0000;>
<p>Esta es una pgina con fondo rojo</p>
</body>
</html>
Selectores
El selector Class (Clase) permite aplicar estilos a cualquier etiqueta donde se invoque este
selector. Presenta como desventaja que debemos modificar el cdigo HTML del documento,
incluyendo selectores clase en los lugares donde quisiramos aplicar estilos.
<p class=cita>Erase que se era...</p>
Slo nos queda definir este nuevo estilo como una regla ms de nuestro documento CSS:
.cita {font-weight: bold; color: blue;}
El punto inicial es necesario para mantener la definicin de este estilo desvinculada de cualquier
elemento del documento. Para restringir el uso de este estilo a un tipo de elemento, podemos
definirlo como:
p.cita {font-weight: bold; color: blue;}
El selector ID (Identificador) permite aplicar los estilos a un slo elemento usando un identificador
o ID, es posible aplicarlo a diferentes elementos, produciendo resultados indeseables que
causara confusin en el cdigo. La definicin de los estilos de tipo ID, estn precedidos por el
caracter almohadilla # .
Diseo Web
Dreamweaver

CS4
74
Creacin de una regla CSS
Puedes crear una regla CSS para automatizar la aplicacin de formato a etiquetas HTML o
rangos de texto identificados mediante un atributo class o ID.
1. En el panel CSS Styles (Estilos CSS) o Window/CSS Styles (Ventana /Estilos CSS), has
clic en el botn New Rule CSS (Nueva regla CSS) situado en la parte inferior derecha del
panel.
Imagen 5-1: Panel Estilos CSS
Imagen 5-2: Cuadro de dilogo Nueva Regla CSS
TEMA D Dando formato a texto con CSS
2. En el cuadro de dilogo New CSS Rule (Nueva Regla CSS) especifica el tipo de selector
para el que se aplicar la regla CSS, las opciones disponibles son:
class: se aplica un estilo personalizado a cualquier elemento HTML.
id: se aplica a slo un elemento HTML.
tag: redefine un elemento HTML.
compound: o regla compuesta, afectar a dos o ms etiquetas, clase o ID
simultneamente.
75
Agregando elementos a una pgina Web
3. Una vez que seleccionaste el Selector Type (Tipo de selector) escribe su nombre en el
cuadro de texto Selector Name (Nombre de selector).
4. Selecciona la ubicacin en la que deseas definir la regla en el men emergente Rule
Definition (Definicin de Regla), tienes las opciones:
This Document only (Este documento), la regla se incluye en el documento HTML
y haz clic en OK (Aceptar).
New Style Sheet File (Una Hoja de Estilos Nueva) abre el cuadro de dilogo Save
Style Sheet File As (Guardar Hoja de Estilos Como), selecciona la ubicacin para
el Archivo, de preferencia crea una carpeta con el nombre CSS dentro del directorio
raz de tu sitio, asgnale un nombre y haz clic en Save (Guardar).
Una vez concluidos estos pasos se iniciar el cuadro de dilogo CSS Rule Definition (Definicin
de la Regla CSS)
Imagen 5-3: Nombre del selector
NOTA
Los nombres de class deben comenzar por un punto y
pueden contener cualquier combinacin alfanumrica. Si no
introduces el punto inicial, Dreamweaver

lo hace de forma
automtica.
Los id deben comenzar por un signo de almohadilla (#) y
puede contener cualquier combinacin alfanumrica. Si no
introduces la almohadilla inicial, Dreamweaver

lo har de
forma automtica.
Al seleccionar la opcin tag en el cuadro de texto Selector
Name (Nombre de selector) puedes escribir el tag o
seleccionarlo de la lista emergente haciendo clic en el botn.
Imagen 5-4: Defnicin de la Regla
Diseo Web
Dreamweaver

CS4
76
Imagen 5-5: Cuadro de dilogo Propiedades de regla CSS
TEMA E Definicin de propiedades CSS
Mediante este cuadro de dilogo puedes definir las propiedades de reglas CSS, como la fuente
de texto, color de fondo, etc. Estas propiedades se encuentran agrupadas por categoras.
Type (Tipo) se define la configuracin bsica de la fuente y del tipo de estilo CSS.
Background (Fondo) define la configuracin del fondo de un estilo CSS, como el
color de fondo o que muestre una imagen de fondo.
Block (Bloque) define la configuracin del espaciado y de la alineacin de las
etiquetas y propiedades.
Box (Caja) controla la ubicacin de los elementos en la pgina.
Border (Borde) se define la configuracin de los bordes que rodean los elementos
(Ancho, Color y Estilo).
List (Lista) define los parmetros de configuracin para las etiquetas de lista, por
ejemplo el tipo de vietas.
Positioning (Posicin) determina cmo debe colocarse el contenido relacionado
con el estilo CSS en la pgina.
Extensions (Extensiones) incluye opciones de filtros, saltos de pgina y cursor.
b04
VIDEO
Aadiendo texto y estilos CSS
77
Agregando elementos a una pgina Web
1. Abre en Dreamweaver

el documento Web de la actividad anterior.


2. Utiliza el inspector de propiedades para modificar los aspectos del texto, utilizando diferentes
fuentes, tamaos, colores y estilos. Haz varias modificaciones como ejemplo, aunque no se
vean muy bien. El objetivo es que te familiarices con el proceso para formatear el texto.
3. Selecciona alguna de las palabras o prrafos que has formateado y cambia a la vista de
cdigo. Observa cmo Dreamweaver

ha creado los tags (etiquetas) HTML necesarios para


dar el formato.
4. Inserta los siguientes caracteres especiales y sobre la lnea escribe el cdigo HTML que
corresponde a cada uno. Para ello tendrs que cambiar de la vista de diseo a la vista de
cdigo, o mejor an, trabajar en la vista Split (Dividida).
copyright
registrado
trade mark
5. Guarda los cambios al documento.
6. Abre la vista previa en el navegador, utilizando la tecla <F12>.
Insertando texto en una pgina
b04
PROYECTO
&copy
&reg
&#8482
Diseo Web
Dreamweaver

CS4
78
Imagen 5-6: Panel Archivos e Inspector de propiedades
Un hipervnculo (link, enlace o vnculo) es una conexin entre un origen y un destino. El destino
es con frecuencia otra pgina Web, pero tambin puede ser una imagen, una direccin de
correo o un archivo. Por otro lado, los elementos que sirven de origen pueden ser texto o
imgenes.

Una forma de crear un enlace es a travs del Properties Inspector (Inspector de propiedades).
Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace y establecer el
Link (Vnculo) en el inspector.
Sin embargo, la forma ms sencilla y segura de crear links es seleccionar el texto u objeto que
servir de enlace y arrastrar una lnea desde el localizador de liga hasta el archivo con que se
quiere ligar.
TEMA F Hipervnculos o Links
Imagen 5-7: Inspector de propiedades
Imagen 5-8: Inspector de propiedades
Es posible especificar vnculos a direcciones de correo electrnico. La sintaxis del vnculo en
este caso es: mailto:direcciondecorreoelectrnico.
b02
VIDEO
Vnculos
79
Agregando elementos a una pgina Web
1. En tu carpeta de actividades encontrars la carpeta Linkpags. Copia la carpeta con todo su
contenido a alguna ubicacin en tu disco duro.
2. Inicia Dreamweaver

y define un nuevo sitio Web con men Site/New Site (Sitio/Nuevo


Sitio). Dale al sitio el nombre Links Pags y utiliza como su carpeta principal la carpeta que
acabas de copiar. Al terminar de definir el nuevo sitio, revisa el panel de Files (Archivos).
3. El sitio contendr 5 pginas Web y 2 archivos de imagen. El objetivo de la actividad es ligar
las pginas en una estructura lineal con jerarqua clsica.
4. Abre el documento Index.html. Crea una liga desde el ttulo Ancdotas hacia el archivo
Anecdotas.html.
5. Crea un link desde el ttulo Curiosidades al archivo Curiosidades.html.
6. Crea de forma similar los dos links que corresponden a los ttulos Preguntas y Humor.
7. Prueba el sitio en el navegador y revisa que estos links iniciales funcionen.
8. Ahora en cada una de las pginas interiores agrega la palabra Volver y convirtela en una
liga para regresar al ndice.
9. Crea ligas con las palabras Anterior y Siguiente para permitir la navegacin secuencial por el
sitio en el siguiente orden: ndice, ancdotas, curiosidades, preguntas, humor.
10. Por ltimo, crea en el ndice una liga a una direccin de correo electrnico. El correo debe
poder enviarse al hacer clic sobre la palabra Contctanos.
11. Revisa en el navegador que todos los enlaces funcionen adecuadamente.
Ligando pginas
b02
PROYECTO
TI P
Utiliza el panel Verificador de Vnculos men
File/Check Page/Links (Archivo/Comprobar
pgina/Vnculos) para comprobar vnculos
rotos y archivos hurfanos, ya sea en el
documento actual o dentro del sitio.
Diseo Web
Dreamweaver

CS4
80
1 Border thickness (Grosor del Borde): indica el grosor del borde en pxeles.
2 Cell padding (Relleno de celda): indica la distancia entre el contenido de las celdas
y sus bordes.
3 Cell spacing (Espacio entre celdas): indica la distancia entre las celdas de la tabla.
4 Caption (Texto): permite agregar un ttulo a la tabla, que aparecer fuera de ella.
5 Summary (Resumen): en este campo se da una descripcin de la tabla: los lectores
de pantalla leen el texto del resumen pero ste no aparece en el navegador.
Imagen 5-9: Cuadro de dilogo Tabla
La mayora de las pginas Web utilizan tablas para organizar los elementos que las conforman.
Las tablas se usan para que los textos e imgenes de una pgina mantengan posiciones
absolutas al visualizarse en el navegador. Cuando visitas algn sitio Web, probablemente
no veas las tablas porque se han definido con un borde igual a cero, pero cuando hay una
distribucin organizada de imgenes y textos, lo ms probable es que haya al menos una tabla
involucrada.
1
2
3
4
5
Imagen 5-10: Inspector de Propiedades (Tabla)
Formato de tabla
A travs del inspector de propiedades se pueden modificar los valores que se especificaron al
insertar la tabla. Tambin puedes indicar otros parmetros como:
1 2 3 4
TEMA G Tablas (Table)
Para insertar una tabla ve al men Insert/Table
(Insertar/Tabla). En el cuadro de dilogo tendrs que
especificar el nmero de Rows (Filas) y Columns
(Columnas), as como el Width (Ancho de la tabla)
ya sea en pxeles (fijo) o en porcentaje (depende
del tamao de la ventana de cada usuario).
Adicionalmente puedes especificar los siguientes
parmetros:
81
Agregando elementos a una pgina Web
1 Table ID (Id de Tabla): especifica un ID para la tabla.
2 Rows & Cols. (Filas y Columnas): Nmero de filas y columnas de la tabla.
3 Wide (Ancho): El ancho de la tabla en pxeles o como porcentaje del ancho de la
ventana del navegador. Normalmente no es necesario especificar el alto de una tabla.
4 Align (Alinear): Determina dnde aparecer la tabla en relacin con otros elementos.
La parte superior del inspector de propiedades sirve para especificar las propiedades del texto
que se insertar dentro de la celda seleccionada. La parte inferior del inspector sirve para
especificar valores propios de la celda, como el color o imagen de fondo, el color del borde,
entre otros.
Dividir y combinar celdas
Cuando seleccionas una o ms celdas, el inspector de propiedades cambia para permitirte
modificar propiedades especficas de las celdas. Dos botones nuevos son los que te permiten
dividir y combinar.
Merges selected cells using spans (Combinar celdas): consiste en
convertir dos o ms celdas seleccionadas en una sola.
Split cell into rows or columns (Dividir celdas): parte en dos la celda
seleccionada.
Modos de tabla
Dentro de Dreamweaver

puedes trabajar con tables (tablas) en distintos modos de visualizacin.


La aplicacin inicia siempre en el modo estndar. Pero puedes pasar a los dems modos a travs
del men View/ Table Mode (Ver/Modo de tabla). Estos son los modos de tabla disponibles:
a. Standard Mode (Modo estndar): las tablas se presentan de forma normal, como un
cuadriculado de filas y columnas.
b. Expanded Tables Mode (Modo de tablas expandidas): aade temporalmente relleno y
espaciado de celdas a las tablas de un documento. Esto facilita su seleccin y edicin,
pero no muestra la tabla exactamente como se ver en el navegador. Utiliza este
modo slo para facilitar tareas durante la edicin de la pgina, pero regresa al modo
estndar para ver el resultado real.
b0
VIDEO
Tablas
Diseo Web
Dreamweaver

CS4
82
TEMA H Utilizacin de etiquetas Div
Se puede disear una pgina web utilizando tablas. Sin embargo, una tcnica mucho ms
eficiente de crear pginas web es utilizando CSS (pginas de estilos en cascada). El bloque
de construccin bsico para un maquetado CSS es la etiqueta Div. Una etiqueta Div define
divisiones lgicas en el contenido de una pgina web. Se puede utilizar para centrar bloques de
contenido, texto, imgenes, reas de color, etc.
Cuando se crea un diseo basado en CSS, se posicionan Divs con contenido en diferentes
lugares en la pginas. A diferencia de las celdas, que estn restringidas a un lugar dentro de
las lneas y columnas de una tabla, los pueden aparecer en cualquier parte de la pgina web,
ya sea que utilicen posicin absoluta (AP element, especificando coordenadas x-y para definir
su posicin dependiendo de la parte superior e izquierda del documento), o posicin relativa
(especificando su distancia con respecto a otros elementos de la pgina).
Es muy fcil colocar Divs AP (etiquetas div de Posicin Absoluta), y nos proveen de un gran control
sobre el diseo de la pgina, reducen la cantidad de cdigo que los programadores necesitan,
y permite formatear bloques de contenido con mrgenes, bordes y color. Adicionalmente, las
personas que utilicen lectores de pantalla para ver pginas web pueden hacerlo mucho ms
fcil y rpido ya que el cdigo es ms simple y corto. La nica desventaja de los divs AP, es que
el contenido no se ajusta al tamao de ventana del navegador del usuario.
Para insertar una etiqueta div
1. En el documento, sita el mouse donde quieras insertar la etiqueta Div.
2. Selecciona Men Insert/Layout Objects/Div Tag (Insertar/Objetos de diseo/Etiqueta Div)
o en el panel Insert/Layout/Insert Div Tag (Insertar / Pestaa Diseo/Insertar Etiqueta Div).
3. Define cualquiera de las siguientes opciones:
Insert: (Insertar) Permite seleccionar la ubicacin de la etiqueta y el nombre.
Class: (Clase) Muestra el estilo aplicado a la etiqueta (CSS).
ID: (Identificador) Modifica el nombre utilizado para la etiqueta.
New CSS Rule: (Nueva regla CSS) Abre el cuadro de dilogo para una nueva regla.
4. Click en Aceptar.
La etiqueta Div tendr el aspecto de un cuadro en el documento con texto de marcador de
posicin. Cuando se selecciona, se pueden ver y editar sus reglas en l (panel Estilos CSS). Para
aadir contenido a un div, se da click dentro de la etiqueta y se aade contenido como se hara
en cualquier otro lugar de la pgina.
83
Agregando elementos a una pgina Web
Imagen 5-11: Inspector de propiedades Elemento CSS-P
Formato de un Elemento PA
Las propiedades del Elemento PA seleccionado se pueden especificar desde el Inspector de
propiedades. Los parmetros ms importantes son los siguientes:
1 CSS-P Element (Elemento CSS-P): Especifica un ID para el Elemento PA seleccionado.
Utilice slo caracteres alfanumricos; no utilice caracteres especiales como espacios,
guiones, barras ni puntos. Cada Elemento PA debe tener un ID exclusivo.
2 L (Izq) y T (Sup): indican la distancia en pxeles que hay entre los lmites del documento
(izquierdo y superior) y el Elemento PA. En otras palabras, determinan su posicin.
3 W (Ancho) y H (Alto): indican el ancho y el alto del Elemento PA.
4 Z- Index (ndice Z): es el orden en que se colocan los Elementos sobre el documento,
determinando cules quedan al frente y cules detrs.
5 Vis (Visibilidad): indica la visibilidad inicial del Elemento PA. Puede ser de cuatro tipos:
Default (default): se dar la visibilidad del sitio segn el navegador.
Inherit (Heredada): se muestra el Elemento PA mientras la pgina a la que
pertenece tambin se est mostrando.
Visible (Visible): muestra el Elemento PA aunque la pgina Web no se est viendo.
Hidden (Oculta): el Elemento PA est oculto.
6 Overflow (Desdoblamiento): se encarga de controlar cmo deben aparecer los
Elementos en el navegador cuando el contenido excede el tamao especfico.
Visible (Visible): indica que el contenido extra aparece en el Elemento.
Hidden (Escondido): especifica que el contenido adicional no aparecer.
Scroll (Desplazamiento): especifica que el navegador deber aadir siempre barras
de desplazamiento al Elemento.
Auto (Automtico): hace que el navegador muestre las barras de desplazamiento
para el Elemento cuando sean necesarias.
b04
VIDEO
Elementos PA
1 2 3 4 5 6
Diseo Web
Dreamweaver

CS4
84
La mayora de las pginas Web manejan imgenes, mejorando su apariencia o dndole una
mayor informacin grfica o visual. Los formatos de imagen ms recomendables para Web son:
Formato GIF: utiliza un mximo de 256 colores, es recomendable para imgenes con grandes
reas de un mismo color o tonos no continuos. Permite transparencias y animaciones.
Formato JPEG: la imagen es de mayor calidad, pero su tamao se incrementa y tarda ms
en descargarse en el navegador.
Formato PNG: es una imagen de mayor tamao, pero permite transparencias en el fondo
de la imagen.
Para insertar una imagen en el punto seleccionado se utiliza el men Insert/Image (Insertar/
Imagen). Al momento de elegir la imagen a insertar, debes especificar si la imagen ser relativa
al documento o a la carpeta raz del sitio. Es mejor que la direccin sea relativa al documento,
ya que si mueves la pgina a una ubicacin distinta, la imagen no se ver.
TEMA I Insertando imgenes en Dreamweaver
NOTA
Si el navegador no encuentra una
imagen, mostrar un recuadro
blanco con una cruz roja. Cuando
esto ocurra tienes que verificar el cdigo fuente: lo ms
probable es que la ruta sea incorrecta o el nombre del
archivo no sea exacto.
Imagen 5-12: Men desplegable Relativo a
85
Agregando elementos a una pgina Web
Imagen 5-13: Inspector de propiedades Imgenes
1 Alt: en este campo puedes asignar un texto alternativo. Si por alguna razn no puede
mostrarse la imagen, o el usuario elije no mostrar las imgenes para mayor velocidad
de descarga, se ver este texto.
2 Link (Vnculo): permite crear una liga para la imagen.
3 Border (Borde): determina el tamao de borde de la imagen.
4 Align (Alinear): permite alinear la imagen con respecto al texto.
5 V Space (Espacio V) y H Space (Espacio H): son tiles para separar la imagen del
texto. Indican el espacio vertical y horizontal entre la imagen y el texto.
1 2 3
4
5
b0b
VIDEO
Insertando imgenes
Al seleccionar una imagen, el inspector de propiedades desplegar los siguientes campos:
NOTA
Recuerda que no es conveniente usar espacios ni
caracteres internacionales para nombrar los archivos,
pues podran tener problemas cuando se coloquen en
un servidor de Internet.
Diseo Web
Dreamweaver

CS4
86
La galera de fotos en Internet es una pgina mediante la cual se puede acceder a un grupo de
imgenes. Para facilitar la visualizacin de imgenes, adems de mejorar la velocidad de carga,
se presentan pequeas versiones de cada fotografa, llamadas thumbnails (miniaturas), en un
cuadriculado.
Cuando el usuario hace clic en alguna de las versiones pequeas, puede ver la imagen en su
tamao original.
1. Para esta actividad requerirs todas
las imgenes y textos de la carpeta
Galeria, que se encuentra en tu
carpeta de actividades.
2. Copia la carpeta completa a una
ubicacin en tu disco duro.
3. Inicia en Dreamweaver un nuevo sitio
Web. Dale al sitio el nombre Galera
de Fotos. Utiliza como carpeta raz
principal del sitio, la carpeta que
acabas de copiar.
4. Inicia en el sitio un nuevo documento en blanco y crea una estructura de tablas para definir
las reas donde irn las versiones miniatura de las fotografas.
5. En la misma pgina crea tambin los espacios para los textos explicativos de cada thumbnail
(miniatura).
6. Inserta las imgenes miniatura y los textos, en los espacios creados.
7. Seleccionando cada imagen, crea una liga desde la miniatura hasta la versin original de la
imagen, de manera que cuando el usuario haga clic sobre cada thumbnails (miniatura), se
abra la foto grande.
8. Guarda el documento y prubalo en el navegador. Revisa que funcionen todas las ligas en
las fotos.
La galera fotogrfica
b0
PROYECTO
Imagen 5-14: La galera fotogrfca
87
Agregando elementos a una pgina Web
Imagen 5-15: Imagen con Hot Spots (reas sensibles). Cada hot spot
funciona como un botn o liga.
Imagen 5-16: Herramientas para la creacin de reas sensibles.
(Inspector de propiedades)
Mapa de imagen (Map image)
En ocasiones se desea que slo ciertas partes de una imagen funcionen como botones,
permitiendo al usuario establecer diferentes ligas. Se trata de un slo archivo con una o ms
reas sensibles, que sirven como links (ligas). Una imagen con estas caractersticas se conoce
como Map image (Mapa de imagen).
Para crear un Map image (Mapa de imagen) a partir de una imagen seleccionada, se utilizan
las herramientas de mapa del inspector de propiedades. Con las herramientas se dibujan
directamente sobre la imagen las Hotspots (reas sensibles), que pueden ser rectangulares,
ovaladas o poligonales.
Despus es posible seleccionar un Hotspot y asignarle un link, tal y como se crean las ligas para
cualquier otro elemento.
Imagen 5-17: Asignacin de vnculo al rea sensible
(Inspector de propiedades)
b06
VIDEO
Creando un mapa de imagen
Diseo Web
Dreamweaver

CS4
88
1. Inicia un nuevo sitio en Dreamweaver y crea un nuevo documento en blanco. Guarda el
documento para que, al insertar imgenes, se hagan rutas relativas correctas.
2. Inserta en el documento la imagen Tienda.gif que se encuentra en los Recursos Digitales.
3. Selecciona la imagen y crea los siguientes Hotspots (reas sensibles) sobre ella:
a. Un rea circular alrededor del CD, que ligue al sitio
http://www.sonymusic.com
b. Un rea rectangular alrededor del poster del guerrero con espada, que ligue a un sitio
llamado http://universalpictures.com
c. Un rea rectangular alrededor de los libros, que ligue a la URL
http://www.barnesandnoble.com/
d. Un rea irregular alrededor de la caja registradora, que ligue a http://amazon.com/
4. Guarda el archivo y prubalo en el navegador. Revisa que todas las ligas funcionen. An
cuando no tengas conexin a Internet, debe intentar abrirse cada uno de los sitios ligados.
Imagen 5-18: Creando un mapa de imagen
Creando un mapa de imagen
b04
PROYECTO
89
Agregando elementos a una pgina Web
Imagen de Sustitucin
Con Dreamweaver

se pueden insertar imgenes de sustitucin en la pgina. Un Rollover


Image (Imagen de Sustitucin) es una imagen que al visualizarse en un navegador, cambia
cuando el puntero pasa sobre ella.
Debes tener dos imgenes para crear una imagen de sustitucin: la imagen principal (la que
aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el
puntero sobre la imagen principal). Ambas imgenes deben tener el mismo tamao. Si tienen
tamaos distintos, Dreamweaver

cambia el tamao de la segunda imagen para que se ajuste


a las propiedades de la primera.
b07
VIDEO
Imagen de sustitucin
1. Define un nuevo sitio en Dreamweaver

, con el nombre Rollover. Utiliza como carpeta


principal del sitio, una nueva carpeta vaca en tu disco duro.
2. Crea en el sitio 4 documentos en blanco, que se llamen Index.html, Tema1.html, Tema2.
html y Tema3.html.
3. En cada uno de los 4 documentos, inserta un texto, con el ttulo del documento. Utiliza para
cada texto diferente color.
4. En la pgina Index.html, debajo del ttulo que has creado, inserta una tabla de 1 fila y 3
columnas, sin borde.
5. En cada una de las celdas de la nueva tabla inserta una Rollover Image (Imagen de
Sustitucin), que est ligada a cada uno de los documentos Tema1, Tema2 y Tema3. Ajusta
la tabla para que las imgenes queden juntas y la tabla se acomode en el centro de la
pgina.
6. Prueba el sitio en el navegador y revisa su funcionamiento.
7. Ahora agrega Imgenes de Sustitucin diferentes en cada una de las otras pginas, que
permitan regresar al documento Index.html.
Insertando imgenes especiales
b0b
PROYECTO
Diseo Web
Dreamweaver

CS4
90
TEMA J Insertando elementos multimedia en Dreamweaver

Archivos SWF
Es frecuente ver estas animaciones en la pgina principal de los sitios, como introduccin para
atraer la atencin de los visitantes.
Los archivos SWF se pueden insertar en la pgina desde el men Insert/ Media/SWF (Insertar/
Media/SWF). En el inspector de propiedades de los archivos SWF estn las siguientes opciones:
Loop (Bucle): indica que al terminar de reproducirse, la pelcula volver a iniciar.
Autoplay (Reproduccin automtica): al cargarse la pgina en el navegador, la
pelcula empezar a reproducirse inmediatamente.
Sonido
Puedes incluir un sonido agradable que refuerce el tema del sitio. Los formatos de sonido ms
utilizados para el navegador son MP3 (formato de compresin de audio), WAV (formato de
audio sin compresin) y MIDI (Interfaz Digital de Instrumentos Musicales).
Para insertar un archivo de audio en la pgina Web, ve al men Insert/ Media/Plugin (Insertar/
Media/Plugin). Todos los archivos insertados como plugins (complementos) sern representados
con el icono .
En el inspector de propiedades del plugin de sonido puedes establecer el W (ancho) y H (altura)
de los controles de audio que se vern en el navegador. En caso de no especificar ningn
tamao, la aplicacin mostrar el tamao predeterminado de los controles. Si deseas que se
escuche el sonido sin que se muestren los controles de audio, los campos de tamao deben
tener el valor de 0.
Imagen 5-19: Inspector de propiedades
Imagen 5-20: Controles de reproduccin en
el navegador
91
Agregando elementos a una pgina Web
De forma predeterminada, el sonido se va a reproducir una vez al cargarse la pgina en
el navegador. Puedes modificar el cdigo HTML para que el sonido se reproduzca -o no-
automticamente. Por ejemplo:
<embed src=music01.mp3 autostart=false loop=true></embed>
En este ejemplo, el parmetro autostart (empezar automticamente) define que el sonido no
iniciar automticamente y el parmetro loop (repetir) determina que s se repetir al terminar.
Si quieres agregar msica de fondo al sitio, sin que los controles aparezcan, puedes escribir el
siguiente cdigo dentro de las etiquetas de la cabeza de la pgina <head>. Por ejemplo:
<head>
<title>Msica de fondo</title>
<embed><bgsound src=music01.mp3 loop=-1></embed>
</head>
En este caso, se puede asignar al parmetro loop un nmero entero para definir el nmero de
veces que se repetir el sonido. Un valor de -1 significa reproducir de modo continuo.
Video

Dentro de las pginas Web puedes incluir algn video, pero debes tener en cuenta que los videos
ocupan mucho espacio y como consecuencia tardan mucho en descargarse. Los formatos de
video utilizados comnmente para Internet son: AVI (formato contenedor de audio y video),
MPEG (Grupo de Expertos de Imgenes en Movimiento), MOV (formato estndar desarrollado
por Apple

) y FlashVideo.
Para insertar un archivo de video en un documento utiliza tambin el Men Insert/Media Plugin
(Insertar//Media/Plugin). El inspector de propiedades es el mismo que el de los archivos de
sonido, ya que los dos se insertan como plugins.
Los videos se pueden reproducir automticamente, una sola vez al cargarse la pgina. Tambin
puedes invertir estas opciones agregando al cdigo HTML los tags (etiquetas) auxiliares autostart
=false y loop=true
b0
VIDEO
Insertando elementos multimedia
Diseo Web
Dreamweaver

CS4
92
1. Abre en Dreamweaver

el sitio Web con el que trabajaste en la actividad anterior.


2. Abre la pgina Index.html
3. Utiliza las herramientas para dibujar una celda en la parte inferior de la pgina, de 400
pxeles de ancho por 30 de alto.
4. Inserta en la nueva celda el sonido Musica.mp3 que se encuentra en los Recursos Digitales.
Dreamweaver

te preguntar si deseas copiar el archivo a la carpeta raz de tu sitio local.


Acepta esta opcin para que el archivo se copie a tu propia carpeta.
5. Modifica las propiedades del plugin para que ocupe toda la celda, es decir, para que sus
dimensiones sean de 400 X 30 pxeles.
6. Con el plugin seleccionado, cambia a View Code (Vista cdigo) y modifica el tag HTML para
que la msica no inicie automticamente.
7. Guarda los cambios y prueba la pgina en el navegador. Probablemente tu navegador
bloquee el contenido del plugin, pero puedes permitir el contenido bloqueado con toda
seguridad.
8. Regresa a Dreamweaver

y en el modo de diseo dibuja una celda en el centro de la pgina,


que mida 583 pxeles de ancho por 263 de alto.
9. Dentro de la nueva celda inserta la pelcula Flash Animaflash.swf, que se encuentra en tu
carpeta de actividades. Cuando Dreamweaver

te pregunte, copia esta pelcula a la carpeta


raz de tu sitio.
10. Selecciona la pelcula insertada y utiliza el control Play (Reproducir) del inspector de
propiedades para ver la animacin. Detenla con el botn Stop (Parar).
11. Guarda los cambios y prueba la pgina en el navegador.
Agregando msica en la pgina Web
b06
PROYECTO
93
Agregando elementos a una pgina Web
12. Regresa a Dreamweaver

y observa el cdigo HTML. La aplicacin se ha encargado de


generar todo el cdigo necesario para mostrar la pgina correctamente. Identifica todos los
tags que ya conoces y algunos nuevos. Contesta las siguientes preguntas:
a. Qu hay dentro de las etiquetas <head> </head>?
b. Con qu etiquetas se identifica el cuerpo de la pgina?
c. Cul es la etiqueta que se cre al insertar el sonido?
d. Crees que es importante conocer HTML para trabajar mejor con Dreamweaver? Por
qu?

<meta http-equiv=content_type content=text/html; charset=ISO-8859-1/>y el
ttulo : < title > Untitled Document < /title >
< body > < /body >
< embed src = Msica.mp3 width =400 height 30 >
S, para poder modifcar el documento ms a fondo y checar errores, tambin
hay cosas que es muy difcil lograr en la vista Diseo.
Diseo Web
Dreamweaver

CS4
94
0b
EVALUACIN EV EE
Contesta correctamente las siguientes preguntas:
1. Describe qu es una etiqueta div y anota 2 ventajas de usarlos en una pgina Web.
2. Cules son los formatos de imagen ms recomendables para Web y sus caractersticas?
3. Qu es lo que sucede cuando el navegador no encuentra una imagen?

Qu aprendiste?
TEMA A: A emplear hojas de estilo en un documento HTML para modificar el formato.
TEMA B: A editar documentos HTML y previsualizarlos con Dreamweaver

.
TEMA C: A determinar cul de los tres estilos en que se puede aplicar CSS se adapta mejor
a tu flujo de trabajo.
TEMA D: A crear reglas CSS y aplicarlas a un documento HTML.
TEMA E: Que una vez creada una regla CSS se pueden editar sus caractersticas de manera
sencilla mediante el cuadro de dilogo correspondiente.
TEMA F: A identificar elementos en el inspector de propiedades que te ayudan a crear
hipervnculos.
TEMA G: A crear y dar formato a tablas con Dreamweaver.
TEMA H: Cmo agregar etiquetas Div y editar sus propiedades con ayuda del inspector.
TEMA I: Cmo reducir el tiempo de carga de una pgina mediante la optimizacin de
imgenes.
TEMA J: Que mediante la adicin de contenido multimedia a un sitio Web se puede mejorar
el aspecto e impacto de un sitio Web.
Las capas son recuadros que pueden situarse en cualquier parte de la pgina y
en donde se insertan contenidos de HTML, sus ventajas:
1. Se pueden colocar objetos en cualquier lugar del documento.
2. Se pueden ocultar y sobreponer entre s para lograr un buen diseo.
IF. Utiliza mximo 256 colores, recomendado para imgenes con grandes
reas del mismo color o tonos continuos y permite transparencias y anima-
ciones.
JPEG. Imagen de mayor calidad, su tamao se incrementa y tarda en des-
cargarse.
PNG. Imagen de mayor tamao y permite transparencias en el fondo.
El navegador mostrar un recuadro blanco con una cruz roja y hay que verifcar
el cdigo fuente.
Diseo Web Dreamweaver

CS4
Autor:
Carlos Zepeda Chehaibar
A Crear contenidos estructurados en ventanas mediante la aplicacin de marcos.
B Conocer los elementos que integran el panel Archivos para la administracin
de un sitio Web.
C Describir los elementos clave a considerar al evaluar un sitio Web.
NIVEL: Bsico DURACIN SUGERIDA: 3 SESIONES / 45-50 MINUTOS
Un i d ad 0 6
Mej or an do u n si t i o
Web
Durante el desarrollo de esta unidad aprenders a:
La manera en la que organices las carpetas de tu proyecto, es la misma en
la que el servidor las va a buscar. Es recomendable el uso de direcciones
relativas, que indican la posicin de una ubicacin de memoria en una
computadora ligada a la direccin base.
Diseo Web
Dreamweaver

CS4
96
Imagen 6-1: Cuadro de dilogo Nuevo Documento
TEMA A Marcos (Frames)
Probablemente has visto una pgina Web que se compone de dos o ms secciones
independientes: una de las secciones permanece fija y la otra va cambiando al navegar el
sitio. Por medio de los Frames (marcos) se definen sub-ventanas dentro de la ventana principal
del navegador de Internet. Cada una de las sub-ventanas o frames es en realidad una pgina
independiente, con su propio contenido.

Adicionalmente, la ventana principal contiene la definicin de la estructura, en donde se
especifican cuntas y cules sern las sub-ventanas, qu posicin tendrn y cul es el archivo
que se debe cargar en cada una. A esta estructura se le llama Frameset (Conjunto de marcos).
Dicho de forma simple, un frameset es un documento Web que no tiene contenido alguno, ni
texto, ni grficos, pero que contiene cdigo HTML para definir una estructura de ventanas. Un
frameset funciona como un contenedor y dentro de cada contenedor puedes colocar la pgina
Web que desees.
En cualquier momento puedes crear un Frameset (Conjunto de marcos) en Dreamweaver

,
utilizando alguna de las opciones del men Insert/HTML/Frames (Insertar/HTML/Marcos), o
bien, seleccionando alguna de la opciones de la categora Frameset del men File/New/Page
from Sample/Frameset (Archivo/Nuevo/Pgina de Muestra/Conjunto de marcos).
Una vez creado el frameset (conjunto de marcos), es posible modificar sus propiedades, o
las propiedades de cada frame (marco), desde el inspector de propiedades. Para facilitar la
seleccin de un frame o de todo el frameset, utiliza el panel de Frames que se muestra con el
Men Window/Frames (Ventana/Marcos).
Cuando guardas el sitio Web, debes guardar la estructura o frameset en un archivo html
independiente. As por ejemplo, en una estructura como la que se muestra en la figura anterior,
ser necesario guardar 4 archivos: uno para cada frame y uno ms para la estructura.
97
Mejorando un sitio Web
Imagen 6-2: Panel Marcos
Haz clic en el interior de un frame para
seleccionarlo.
Haz clic en el borde del frameset para
seleccionarlo.
Nombre de los frames
Cada frame de la estructura se identifica con un nombre. Al crear un frameset, Dreamweaver


asigna automticamente nombres genricos a cada frame, como mainFrame (marco principal),
leftFrame (marco izquierdo) o topFrame (marco superior). Si lo deseas, puedes seleccionar
cualquier frame y cambiar su nombre en el inspector de propiedades.
El nombre es muy importante ya que en Dreamweaver

es posible crear ligas en un frame,


que hagan referencia a otro, a travs del tag auxiliar target (destino). Por ejemplo, puedes
poner una liga en el frame izquierdo, que abra una pgina en el frame principal como sigue:
<p><a href=Bienvenidos.htm target=mainFrame>Bienvenidos</a></p>
El destino de las ligas tambin puede especificarse directamente en el inspector de propiedades,
utilizando el campo Target (destino).
Adems del nombre de un marco especfico, puedes seleccionar como Destino (Target) alguna
de las siguientes opciones:
_blank: carga el destino en una nueva ventana del navegador.
_self: carga el destino en la misma ventana donde est el link.
_parent: carga el destino reemplazando el frameset actual. Si hay abierto ms de
un frameset, slo se reemplaza el frameset donde est el link.
_top: carga el destino en la ventana completa actual, reemplazando cualquier
frameset que est abierto.
Imagen 6-3: Inspector de Propiedades
604
VIDEO
Trabajando con marcos
Diseo Web
Dreamweaver

CS4
98
1. De los Recursos Digitales, localiza la carpeta Marco. Esta carpeta contiene varias pginas
Web muy sencillas. Copia la carpeta completa a tu disco duro.
2. Inicia Dreamweaver

y define un nuevo sitio Web. Dale el nombre Marco y utiliza como


carpeta raz del nuevo sitio, la carpeta que acabas de copiar. Revisa en el panel Files
(Archivos) las pginas e imgenes que contiene el nuevo sitio. Abre cada una para ver su
contenido, pero cirralas todas antes de continuar al siguiente paso.
3. Define un nuevo frameset con el men File/New (Archivo/Nuevo). En el cuadro de dilogo
selecciona Page from Sample/Frameset/ Fixed Top (Conjunto de marcos/Pgina de
Muestra/Superior Anidado) y da clic en Create.
4. Guarda el frameset, con men File/Save Frameset As (Archivo/Guardar Conjunto de marcos
Como) y dale el nombre Index.html. Observa los marcos en el panel Frames (Marcos). Si
no est visible, usa el men Window/Frames (Ventana/Marcos). Revisa los nombres de los
marcos.
5. Coloca el cursor dentro del marco superior y utiliza el men File/Open in Frame (Archivo/
Abrir en marco), para abrir en este marco la pgina Arriba.html.
6. Ahora haz clic dentro del marco inferior y abre en su interior la pgina Anecdotas.html. y
crea una liga de la palabra Ancdotas, en el marco superior, al archivo Anecdotas.html,
eligiendo como Target (Destino) el marco inferior.
7. De forma similar crea ligas desde cada uno de los ttulos en el marco superior (Curiosidades,
Preguntas y Humor), ligando a la pgina correspondiente y eligiendo como destino el marco
inferior. Guarda todo con el Men File/Save All (Archivo/Guardar todo) y prueba el sitio en el
navegador y comprueba el funcionamiento de todas las ligas.
8. Ahora regresa a Dreamweaver

e inserta imgenes de sustitucin en cada una de las 4


pginas de contenido, para ir a la siguiente pgina o a la anterior. Utiliza imgenes con
flechas. Estas servirn de botones para navegar el sitio de forma lineal, pudiendo pasar de
una a otra pgina en el siguiente orden: Ancdotas, Curiosidades, Preguntas, Humor.
a. Cul es el target (destino) que se debe especificar en estos botones?
b. Qu pasa si no especificas ningn target? Por qu?

Creando un marco
604
PROYECTO
_self
Las pginas de contenido se cargan en una pgina nueva, porque es equivalen-
teal target_blank.
99
Mejorando un sitio Web
1 Men del Sitio: Selecciona y visualiza los archivos del sitio con el que se va a
trabajar.
2 Conectar/desconectar: Establece o interrumpe la conexin con el sitio remoto.
3 Actualizar: Actualiza los archivos de los sitios remoto y local.
4 Archivos del sitio: Muestra la estructura de la organizacin de los archivos.
5 Servidor de prueba: Muestra la estructura de la organizacin de los archivos en el
servidor de prueba.
6 Vista de base de datos.
7 Obtener archivo(s): Copia los archivos seleccionados del sitio remoto al local.
8 Colocar archivo(s): Copia los archivos seleccionados del sitio local al remoto.
9 Proteger archivo(s): Previene que otros usuarios editen el documento.
10 Desproteger: Permite que otros usuarios editen el documento remoto.
11 Sincronizar: Sincroniza los archivos entre las carpetas local y remota.
12 Expandir/contraer: Expande o contrae el panel Archivos para mostrar uno o los dos
paneles.
Imagen 6-4: Panel
Archivos
TEMA B Administracin de un Sitio Web
Dreamweaver

incluye un panel llamado Files (Archivos) que facilita la administracin y


transferencia de archivos entre el sitio local (guardado en nuestra carpeta raz dentro de la
computadora) y un servidor remoto (donde se publicar el sitio web). Al transferir archivos entre
nuestro sitio local y sitio remoto, mantenemos estructuras de archivos y carpetas paralelas en
ambos sitios. Dreamweaver crea automticamente las carpetas necesarias si an no existen en
uno de los dos sitios.
Tambin pueden sincronizarse los archivos entre los sitios y Dreamweaver

copia los archivos


necesarios y elimina los no deseados.
Escogiendo en qu tipo de vista se desea trabajar (local o remota), los archivos se pueden abrir,
cambiarles de nombre, aadir, mover o eliminar.
1 2 3 4 5 6 7 8 9
10 11 12
Diseo Web
Dreamweaver

CS4
100
Imagen 6-5: Panel Activos
Utilizando el panel Activos
Utiliza el panel Assets (Activos) para administrar los activos de tu sitio. En el panel se muestran
listados elementos asociados al documento activo (imgenes, colores, vnculos, archivos
multimedia, scripts, plantillas, etc.)
Es una alternativa para tener rpido acceso a elementos que ests utilizando en la pgina,
abrirlos, editarlos y reutilizarlos.
Por ejemplo, si se desea editar la imagen miniverde.jpg, los pasos a seguir son:
1. Selecciona Men Window/Assets (Ventana/Activos).
2. Da clic en la opcin Site (Sitio).
3. En la opcin Imgenes, selecciona el archivo banner:miniverde.jpg.
4. Da clic en el botn Editar de la esquina inferior derecha del panel.
101
Mejorando un sitio Web
TEMA C Evaluacin del Sitio Web
Qu es lo que hace destacar un sitio de otro? Por qu hay sitios que te agradan y sitios que
no? Los dos elementos clave para el xito o fracaso de un sitio Web son: un buen diseo y
calidad en el contenido. Una buena forma de mejorar la calidad de tus propios proyectos,
es analizando sitios existentes en Internet y revisando cules son los aspectos que los hacen
menos o ms agradables.
El anlisis de un sitio Web debe considerar al menos los siguientes aspectos:
1. En cuanto al contenido:
Tema: el contenido debe ser relevante para el tema del sitio y debe cubrirlo con la
profundidad necesaria como para ser interesante y til para un visitante.
Propsito: analiza si el contenido cumple con el propsito para el que fue creado el
sitio, tanto en calidad como en cantidad.
Audiencia: analiza si la cantidad, lenguaje, importancia y tipo de contenido son
apropiados para los usuarios a los que est dirigido el sitio.
Redaccin: es muy importante que la redaccin sea correcta y que se haga buen uso
de la ortografa, la puntuacin y la gramtica.
2. En cuanto al diseo:
Coherencia: el diseo entre las distintas pginas de un Sitio Web debe tener coherencia
y uniformidad. Aunque es vlido usar diferentes estilos o colores entre pginas, un
buen sitio Web mantiene ciertos elementos de diseo que dan al usuario la sensacin
de que est navegando en el mismo sitio, aunque cambie de pgina.
Navegacin: un buen sitio ofrece al usuario una navegacin sencilla, de modo
que siempre sepa en dnde est y pueda pasar a la pgina que desea fcilmente.
Normalmente las barras de navegacin o mens grficos estn siempre visibles.
Distribucin: los elementos en las pginas, como textos o imgenes, deben estar
correctamente balanceados en el rea del documento. Recuerda que debes usar
simetra y balance para crear la composicin de cada pgina.
Facilidad de uso: las pginas bien diseadas deben descargar rpido. Si un usuario
tiene que esperar mucho tiempo a que baje una imagen o algn otro elemento,
probablemente dejar la pgina o su experiencia no ser ptima. Los usuarios deben
tambin distinguir claramente la informacin por medio de encabezados, manejo de
color, contraste, puntos de nfasis y otros elementos grficos.
Look and Feel: este es un aspecto que parece subjetivo, pero que tiene siempre bases
claras que lo determinan. El uso general de los elementos, los colores, animaciones,
composicin y dems aspectos del diseo, le dan al sitio una apariencia global y
una sensacin que transmite un mensaje al usuario. Analiza si la sensacin que te
da un sitio es agradable, seria, alegre, compleja, brillante o alguna otra. Decide qu
aspectos del diseo son los que te transmiten esa sensacin.
Siempre que visites un sitio Web, analiza todos los aspectos. Si una pgina te gusta, pregntate
por qu y si no te gusta piensa qu fallas tiene. De esta manera irs construyendo tu propio
gusto para el diseo y podrs crear trabajos ms profesionales.
Diseo Web
Dreamweaver

CS4
102
1. De forma individual o en pequeos equipos, visita cada uno de los siguientes sitios Web.
2. Llena para cada sitio los formatos de Anlisis de Contenido y Anlisis de Diseo.
Analizando sitios Web
602
PROYECTO
Sitio web a evaluar: http://www.sep.gob.mx
Nombres (s):
Fecha:
Cul es el tema?
El contenido es adecuado para el propsito?
Cul es la audiencia?
Anlisis del Contenido
El contenido es adecuado en cuanto al tema? Por qu?
El contenido es adecuado para el propsito? Por qu?
El contenido est bien redactado? Por qu?
Educacin
S
Maestros y pblico en general
S, tiene los temas ms relevantes de la educacin en Mxico. Contiene la infor-
macin ofcial de la SEP.
S, se enfoca a lo que podramos buscar y hasta tiene una seccin infantil. Es un
portal muy amplio.
S, no tiene faltas de ortografa y todo est entendible.
103
Mejorando un sitio Web
La ortografa y gramtica estn bien? Por qu?
El contenido es adecuado para la audiencia? Por qu?
Anlisis del Diseo
Hay coherencia entre pginas? Qu elementos dan uniformidad?
Cmo es la estructura de navegacin?
La distribucin de elementos es adecuada? En qu lo notas?
Se destaca lo importante? Cmo?
El sitio descarga rpido? Se usa con facilidad? Especifica.

Qu Look and Feel tiene el sitio?

S, el estilo de una pgina a otra se mantiene. Mismo fondo, colores y mens al
lado.
Red, de cualquier pgina me puedo mover a otra. Siempre se nos informa en
qu pgina y nivel nos encontramos situados.
S, hay uniformidad y balance visual en texto y grfcos. Se cuida la distribucin
de la informacin.
S, en la pgina principal con letreros ms grandes y/o colores. Se establecen
ligas a los temas principales desde botones grfcos.
S, no tarda en cargarse y no te pierdes en la pgina, pues siempre tienes el
men accesible.
Formal e informativo. Gubernamental.
Tipo portal con gran cantidad de informacin.
S, aunque quiz hara falta hacer ms llamativa la seccin de nios. A veces
es difcil encontrar algo en especfco.
S, no tiene faltas de ortografa ni de gramtica.
Diseo Web
Dreamweaver

CS4
104
Elabora un diagrama de flujo bsico del sitio:
105
Mejorando un sitio Web
Sitio web a evaluar: http://www.un.org
Nombres (s):
Fecha:
Cul es el tema?
El contenido es adecuado para el propsito?
Cul es la audiencia?
Anlisis del Contenido
El contenido es adecuado en cuanto al tema? Por qu?
El contenido es adecuado para el propsito? Por qu?
El contenido est bien redactado? Por qu?
La ortografa y gramtica estn bien? Por qu?
El contenido es adecuado para la audiencia? Por qu?
Diseo Web
Dreamweaver

CS4
106
Anlisis del Diseo
Hay coherencia entre pginas? Qu elementos dan uniformidad?
Cmo es la estructura de navegacin?
La distribucin de elementos es adecuada? En qu lo notas?
Se destaca lo importante? Cmo?
El sitio descarga rpido? Se usa con facilidad? Especifica.
Qu Look and Feel tiene el sitio?

107
Mejorando un sitio Web
Elabora un diagrama de flujo bsico del sitio:
Diseo Web
Dreamweaver

CS4
108
Nombres (s):
Fecha:
Cul es el tema?
El contenido es adecuado para el propsito?
Cul es la audiencia?
Anlisis del Contenido
El contenido es adecuado en cuanto al tema? Por qu?
El contenido es adecuado para el propsito? Por qu?
El contenido est bien redactado? Por qu?
La ortografa y gramtica estn bien? Por qu?
El contenido es adecuado para la audiencia? Por qu?
Sitio web a evaluar: http://www.museoprado.es/
109
Mejorando un sitio Web
Anlisis del Diseo
Hay coherencia entre pginas? Qu elementos dan uniformidad?
Cmo es la estructura de navegacin?
La distribucin de elementos es adecuada? En qu lo notas?
Se destaca lo importante? Cmo?
El sitio descarga rpido? Se usa con facilidad? Especifica.
Qu Look and Feel tiene el sitio?

Diseo Web
Dreamweaver

CS4
110
Elabora un diagrama de flujo bsico del sitio:
111
Mejorando un sitio Web
Qu aprendiste?
TEMA A: A emplear conjuntos de marcos que vienen de forma predeterminada en la
aplicacin para organizar el contenido de un sitio Web.
TEMA B: Que mediante el panel de Archivos es posible realizar la sincronizacin de un sitio
Web local, con el servidor remoto manteniendo la estructura e integridad del sitio.
TEMA C: Que al analizar diversos sitios, los dos elementos clave para el xito o fracaso de
un sitio Web son el diseo y calidad en el contenido.
06
EVALUACIN EV EE
1. Por qu es importante crear la estructura del sitio antes de introducir informacin?
2. Por qu es lo ms conveniente trabajar todas las pginas de forma local y despus
publicarlas en Internet cuando estn terminadas?
3. Explica cada uno de los siguientes modos de visualizacin de documentos, Diseo, Cdigo
y Cdigo & Diseo:



Diseo: Muestra la pgina como va quedando y se puede modifcar el texto,
imgenes, etctera. Muy similar a un editor de texto.
Cdigo: Muestra el cdigo para la pgina. Si se hace algo en vista diseo, se
actualiza el cdigo de esta vista automticamente.
Cdigo y diseo: Muestra ambas vistas.
Para saber cmo se van a vincular y no revolverse al estar creando la pgina y
para mantener la integridad de los vnculos.
Para no trabajar con rutas absolutas sino con puras rutas relativas y evitar erro-
res.
Diseo Web
Dreamweaver

CS4
112
NOTAS: