Elabora Paginas Web

6
SE XTO SEM E S T R E
INFORMTICA
Elabora pginas web
COLEGIO DE BACHILLERES DEL ESTADO DE SONORA

Director General
Mtro. Vctor Mario Gamio Casillas
Director Acadmico
Mtro. Martn Antonio Ypiz Robles
Director de Administracin y Finanzas
Ing. David Suilo Orozco
Director de Planeacin
Mtro. Vctor Manuel Flores Valenzuela
Elabora pginas Web
Mdulo de Aprendizaje.
Copyright 2015 por Colegio de Bachilleres del Estado de Sonora.
Todos los derechos reservados.
Primera edicin 2015.
Impreso en Mxico.
DIRECCIN ACADMICA
Departamento de Innovacin y Desarrollo de la Prctica Docente.
Blvd. Agustn de Vildsola, Sector Sur.
Hermosillo, Sonora, Mxico. C.P. 83280
COMISIN ELABORADORA:
Elaboracin:
Alejandro Arvizu Miranda
Correccin de Estilo:
Irene Anglica Padilla Velarde
Diseo y Edicin:
Mara Jess Jimnez Duarte
Diseo de portada:
Mara Jess Jimnez Duarte
Jesus Ramn Franco Hernndez
Foto de portada:
Estefana Bringas Limn
Banco de imgenes:
Shutterstock
Coordinacin Tcnica:
Rubisela Morales Gispert
Supervisin Acadmica:
Vanesa Guadalupe Angulo Bentez
Coordinacin General:
Mtra. Laura Isabel Quiroz Colossio
Esta publicacin se termin de imprimir durante el mes de diciembre de 2015.
Diseada en Direccin Acadmica del Colegio de Bachilleres del Estado de Sonora.
Blvd. Agustn de Vildsola, Sector Sur. Hermosillo, Sonora, Mxico.
La edicin consta de 1, 251 ejemplares.
COMPONENTE:
CAMPO DE CONOCIMIENTO:
HORAS SEMANALES:
CRDITOS:
FORMACIN PARA
EL TRABAJO
03
INFORMTICA
06
DATOS DEL ALUMNO

Nombre:
Plantel:
Grupo:
Turno:
Telfono:
E-mail:
Domicilio:
PRELIMINARES
PRELIMINARES
Una competencia es la integracin de habilidades, conocimientos y actitudes en un contexto especfico.

El enfoque en competencias considera que los conocimientos por s mismos no son lo ms importante, sino el
uso que se hace de ellos en situaciones especficas de la vida personal, social y profesional. De este modo, las
competencias requieren una base slida de conocimientos y ciertas habilidades, los cuales se integran para un
mismo propsito en un determinado contexto.
El presente Mdulo de Aprendizaje de la asignatura de Elabora pginas Web, es una herramienta de suma
importancia, que propiciar tu desarrollo como persona visionaria, competente e innovadora, caractersticas
que se establecen en los objetivos de la Reforma Integral de Educacin Media Superior que actualmente se
est implementando a nivel nacional.
El Mdulo de aprendizaje es uno de los apoyos didcticos que el Colegio de Bachilleres te ofrece con la
intencin de estar acorde a los nuevos tiempos, a las nuevas polticas educativas, adems de lo que demandan
los escenarios local, nacional e internacional; el mdulo se encuentra organizado a travs de bloques de
aprendizaje y secuencias didcticas. Una secuencia didctica es un conjunto de actividades, organizadas en
tres momentos: Inicio, desarrollo y cierre. En el inicio desarrollars actividades que te permitirn identificar y
recuperar las experiencias, los saberes, las preconcepciones y los conocimientos que ya has adquirido a travs
de tu formacin, mismos que te ayudarn a abordar con facilidad el tema que se presenta en el desarrollo, donde
realizars actividades que introducen nuevos conocimientos dndote la oportunidad de contextualizarlos en
situaciones de la vida cotidiana, con la finalidad de que tu aprendizaje sea significativo.
Posteriormente se encuentra el momento de cierre de la secuencia didctica, donde integrars todos los
saberes que realizaste en las actividades de inicio y desarrollo.
En todas las actividades de los tres momentos se consideran los saberes conceptuales, procedimentales y
actitudinales. De acuerdo a las caractersticas y del propsito de las actividades, stas se desarrollan de forma
individual, grupal o equipos. Para el desarrollo del trabajo debers utilizar diversos recursos, desde material
bibliogrfico, videos, investigacin de campo, etc.
La retroalimentacin de tu aprendizaje es sumamente importante por eso te invitamos a participar activamente,
de esta forma aclarars dudas o bien fortalecers lo aprendido; adems en este momento, el docente podr
tener una visin general del logro de los aprendizajes del grupo.
Recuerda adems, que la evaluacin en el enfoque en competencias es un proceso continuo, el cual permite
recabar evidencias a travs de tu trabajo, donde se tomarn en cuenta los tres saberes: el conceptual,
procedimental y actitudinal con el propsito de que apoyado por tu maestro mejores el aprendizaje. Es necesario
realizar la autoevaluacin, este ejercicio permite que valores tu actuacin y reconozcas tus posibilidades,
limitaciones y cambios necesarios para mejorar tu aprendizaje.
As tambin, es recomendable la coevaluacin, proceso donde de manera conjunta valoran su actuacin, con
la finalidad de fomentar la participacin, reflexin y crtica ante situaciones de sus aprendizajes, promoviendo
las actitudes de responsabilidad e integracin del grupo.
Nuestra sociedad necesita individuos a nivel medio superior con conocimientos, habilidades, actitudes
y valores, que les permitan integrarse y desarrollarse de manera satisfactoria en el mundo laboral o en su
preparacin profesional. Para que contribuyas en ello, es indispensable que asumas una nueva visin y actitud
en cuanto a tu rol, es decir, de ser receptor de contenidos, ahora construirs tu propio conocimiento a travs
de la problematizacin y contextualizacin de los mismos, situacin que te permitir: Aprender a conocer,
aprender a hacer, aprender a ser y aprender a vivir juntos.
PRELIMINARES
Presentacin del libro .......................................................................................................................
Glosario Icnico ................................................................................................................................
Normas Tcnicas de Competencia Laboral .........................................................................................
Descripcin de la Capacitacin para el Trabajo ..................................................................................
10
Competencias Profesionales de Egreso ..............................................................................................
11
Mapa de Contenido ..........................................................................................................................
12
BLOQUE 2
BLOQUE 1
Introduccin al programa Dreamweaver ............................................................... 13
Secuencia Didctica 1: Contextualizar el uso del Dreamweaver en la construccinde sitio Web ........ 15
Secuencia Didctica 2: Flujo de trabajo en Dreamweaver ................................................................ 16
Secuencia Didctica 3: Identificar los elementos bsicos para su operacin ...................................... 20
Secuencia Didctica 4: Describir la pantalla de bienvenida ............................................................... 21
Secuencia Didctica 5: Describir los elementos de la ventana de trabajo .......................................... 23
Identificar los elementos del entorno de trabajo....................................................................... 23
Detallar las opciones Vista de un documento ............................................................................ 23
Secuencia Didctica 6: Ubicar los elementos de las barra de herramientas ....................................... 27
Documento................................................................................................................................ 27
Estndar .................................................................................................................................... 29
Estado ....................................................................................................................................... 29
Codificacin .............................................................................................................................. 30
Representacin de estilo .......................................................................................................... 31
Secuencia Didctica 7: Describir el inspector de propiedades .......................................................... 34
Secuencia Didctica 8: Ubicar los elementos de los paneles ............................................................ 34
Insertar ..................................................................................................................................... 34
Archivos..................................................................................................................................... 36
Sitio local .................................................................................................................................. 36
Sitio remoto .............................................................................................................................. 36
Sitio de Dreamweaver ............................................................................................................... 36
Utilizar el cuadro de dilogo Administrar sitios ......................................................................... 37
Estilo CSS ................................................................................................................................... 39
Modo actual .............................................................................................................................. 39
Modo todo ................................................................................................................................ 39
Secuencia Didctica 9: Guas visuales .............................................................................................. 40
Utilizar el entorno de trabajo de Dreamweaver ..................................................... 45

Secuencia Didctica 1: Cambiar la vista de la ventana de trabajo .............................................. 46
Vista de diseo........................................................................................................................... 47
Vista de cdigo .......................................................................................................................... 47
Vista dividir................................................................................................................................ 48
Cambiar el tamao de la ventana documento.......................................................................... 48
Identificar la herramienta ejecutar informes............................................................................. 49
PRELIMINARES
BLOQUE 2 cont.
Secuencia Didctica 2: Preparar la ventana de trabajo para crear una pgina Web utilizando CSS .... 51
Contextualizar hoja de estilo en cascada................................................................................... 51
Descripcin de reglas CSS ......................................................................................................... 52
Crear una nueva regla CSS ........................................................................................................ 53
Definir las propiedades CSS ...................................................................................................... 55
Categora Tipo ........................................................................................................................... 56
Categora Fondo ........................................................................................................................ 56
Utilizar etiquetas ....................................................................................................................... 57
Secuencia Didctica 3: Disear una Pgina Web ............................................................................... 58
Secuencia Didctica 4: Crear una pgina Web con diseo CSS .......................................................... 59
Secuencia Didctica 5: Utilizar etiquetas div .................................................................................... 61
Contextualizar etiquetas div ..................................................................................................... 61
Insertar una etiqueta div ........................................................................................................... 61
Secuencia Didctica 6: Aplicar maquetacin de pginas Web ........................................................... 63
Establecer reglas ....................................................................................................................... 63
Establecer guas de diseo ....................................................................................................... 64
Secuencia Didctica 7: Implementar tablas de pginas Web ........................................................... 64
Contextualizar el uso de las tablas en una pgina Web .......................................................... 64
Prioridad del formato en HTML ...............................................................................................65
Utilizar la divisin y combinacin de celdas en la tabla ........................................................... 65
Uso de tablas, en el diseo de pginas Web ....................................................................... 66
Secuencia Didctica 8: Utilizar marcos ....................................................................................... 70
Contextualizacin de marcos de Dreamweaver .................................................................. 70
Implementar marcos a la pgina Web .........................................................................................70
Secuencia Didctica 1: Aplicar elementos de la ficha de Diseo a una pgina Web .......................... 74
Insertar barra de men Spry...................................................................................................... 76
Paneles de fichas de Spry .......................................................................................................... 77
Acorden Spry ........................................................................................................................... 79
Paneles que pueden contraerse de Spry ................................................................................... 79
Secuencia Didctica 2: Implementar elementos de la ficha Formulario a la pgina Web................... 80
rea de texto ............................................................................................................................ 82
Casilla de verificacin ................................................................................................................ 83
Grupo de casillas de verificacin ............................................................................................... 84
Botn de opcin ........................................................................................................................ 85
Grupo de opcin ....................................................................................................................... 86
Lista/men................................................................................................................................ 87
Men de salto ........................................................................................................................... 88
Campo de imagen ..................................................................................................................... 89
Campo de archivo ...................................................................................................................... 90
Botn ........................................................................................................................................ 92
Etiqueta..................................................................................................................................... 93
Secuencia Didctica 3: Revisar y corregir la ortografa ..................................................................... 93
Secuencia Didctica 4: Importar datos de tabla ............................................................................. 95
Secuencia Didctica 5: Importar un documento de Microsoft Office ................................................. 95
PRELIMINARES
BLOQUE 3
Disea una pgina Web en Dreamweaver. ............................................................. 73
EVALUACIN DIAGNSTICA
Representa la Evaluacin Diagnstica, la cual te
permitir estar consciente de tus conocimientos acerca
del tema a abordar.
ACTIVIDAD INTEGRADORA
En esta seccin realizars la Actividad Integradora,
la cual ser tu proyecto durante todo el semestre,
pondrs en prctica tus conocimientos y fortalecers tu
aprendizaje.
ACTIVIDAD 1
SD1-B1
Con este grfico identificars las Actividades dentro

del texto, con las cuales optimizars los conocimientos
aprendidos. Debajo del cono sabrs la secuencia y
bloque al que pertenece y arriba si es individual, en
equipo o grupal.
conos para indicar si una actividad es:
Individual
En Equipo
Grupal
En este apartado encontrars la Evaluacin de

Actividades, donde tu profesor calificar tu desempeo.
AUTOEVALUACIN
cono de Autoevaluacin en este espacio tendrs que
evaluarte a ti mismo honestamente y te dars cuenta
de los conocimientos adquiridos, as como de las reas
que necesitas mejorar.
PRELIMINARES
cono de Coevaluacin, donde debers evaluar a tu

compaero y l te evaluar a ti.
EVALUACIN DE LA ACT. INT.

Con este cono se muestra la Evaluacin de tu proyecto,
donde se valorar tu desempeo.
PORTAFOLIO DE EVIDENCIAS
El Portafolio de Evidencias lo encontrars al finalizar
cada bloque. Aqu se especifica qu actividades debes
incluir y entregar a tu profesor para que te evale.
REACTIVOS DE CIERRE
En este espacio encontrars los Reactivos de Cierre, con
los cuales reforzars los conocimientos que adquiriste
durante el bloque y desarrollars tus habilidades.
GLOSARIO
EVALUACIN DE ACTIVIDADES
COEVALUACIN
Con esta ilustracin localizaremos el Glosario, ya sea

dentro del texto o al final del libro. Ser tu ayuda para
conocer nuevos conceptos y comprender mejor las
lecturas.
FUENTES DE INFORMACIN
til para tener referencias acerca del contenido de tus libros,
adems que podrs utilizar las Fuentes para tener ms
herramientas que contribuyan a mejorar tu desempeo
acadmico.
NOTA ENFTICA
En Notas Enfticas podrs encontrar contenido
importante que complementar tu aprendizaje.
Normas Tcnicas de
Competencia Labo
r
al
Derivado de las constantes transformaciones que se estn presentando en la organizacin del trabajo, han
generado cambios importantes respecto a los requerimientos del sector productivo para contratar a sus
trabajadores. Con este propsito, desde hace algunos aos grupos de empresarios, sindicatos y maestros,
representantes de los diferentes sectores de la economa del pas, se reunieron para definir las habilidades
y conocimientos mnimos que debera poseer un trabajador para desarrollarse exitosamente en el mundo
laboral. Estas habilidades y conocimientos (calificaciones) se expresan en documentos denominados Normas
Tcnicas de Competencia Laboral (NTCL).
PRELIMINARES
acin para el Trabajo

t
i
c
a
p
a
C
a
l
e
d
n
i
c
p
i
Descr
Para dar continuidad a los trabajos propuestos por la Direccin General de Bachillerato (DGB), en los
programas de formacin para el trabajo (Capacitacin de Informtica) y con el propsito de responder a las
necesidades de informacin que requieren nuestros estudiantes, el presente mdulo de aprendizaje tiene
como objetivo acercarlos en un solo documento tanto elementos tericos como ejercicios prcticos para
dotarlos de los conocimientos que hoy en da requieren en el sector productivo y de esta manera ingresar al
mercado laboral conforme a las exigencias de la globalizacin, o bien, continuar con su formacin profesional.
En este contexto, los docentes del Colegio de Bachilleres del Estado de Sonora, se dieron a la tarea de elaborar
este documento con contenidos propuestos por la DGB y que se encuentran vinculados con las Normas
Tcnicas de Competencia Laboral (NTCL), del Consejo de Normatizacin y Certificacin de Competencia
Laboral (CONOCER), dando como resultado este material acorde con las tendencias de las competencias
laborales y del empleo en Sonora.
El mdulo de aprendizaje aporta los elementos necesarios para desarrollar los conocimientos, habilidades,
actitudes y valores de los estudiantes; provee de herramientas para lograr que el alumno adquiera los
conocimientos que se pretende, apoyndolos en su crecimiento y desarrollo. Por otra parte, no deja de ser
tambin un instrumento de gran utilidad para los docentes que imparten la capacitacin de Informtica,
pues estandariza los contenidos en todos los planteles del Colegio.
Estos trabajos son parte tambin de los esfuerzos que realizan COBACH y los docentes, en el proceso de
mejora continua, necesarios para elevar la calidad de los servicios que presta como institucin de educacin
media superior.
10
PRELIMINARES
COMPETENCIAS PROFESIONALES DE EGRESO

Durante el proceso de formacin de los cuatro mdulos, el estudiante desarrollar las siguientes competencias
profesionales, correspondientes a la capacitacin de Informtica:
Utiliza procedimientos y herramientas para el desarrollo de documentos

electrnicos de acuerdo a los requerimientos.
Soluciona problemas tcnicos sobre la configuracin de hardware y software

en su mbito de responsabilidad.
Interpreta y aplica documentacin tcnica en la instalacin, mantenimiento y

diagnostico en la solucin de problemas.
Instala y configura hardware y software de un sistema de cmputo conforme a

las reglas de seguridad e higiene y polticas de uso.
Aplica mantenimiento preventivo de hardware y software.
Implementa sistemas bsicos de seguridad informtica para mantener la

integridad de la informacin.
Configura de manera bsica una red de rea local para compartir dispositivos
perifricos.
Aplica el mantenimiento correctivo de hardware y software.
Instala, opera y mantiene software de sistemas operativos y aplicacin.
10
Ensambla hardware de un equipo de cmputo conforme a las reglas de

seguridad e higiene y polticas de uso.
11
Elabora pginas WEB con animaciones interactivas de aplicacin general y

especifica, en un ambiente multimedia.
PRELIMINARES
11
ELABORA
PGINAS WEB
Introduccin al programa
Dreamweaver

Secuencia Didctica 1:
Contextualizar el uso
del Dreamweaver en la
construccin de un sitio Web.
Describir la pantalla de
bienvenida.
Describir los elementos de la
ventana de trabajo.
Ubicar los elementos de las
barra de herramienta.
12
Utilizar etiquetas div.
Aplicar maquetacin de
pginas Web
Implementar tablas de
pginas Web
Utilizar marcos.
PRELIMINARES
Implementar elementos de la
ficha Formulario a la pgina
Web.
Revisar y corregir la
ortografa.
Importar datos de tabla.
Importar un documento de
Microsoft Office.
Crear una pgina Web con

diseo CSS.
Ubicar los elementos de los
Paneles.
Aplicar elementos de la ficha
de Diseo a una pgina Web.
Disear una Pgina Web.
Describir el inspector de
propiedades.
Preparar la ventana de
trabajo para crear una
pgina Web utilizando CSS.
Identificar los elementos

bsicos para su operacin.
Disea una pgina Web en

Dreamweaver
Utilizar el entorno de
trabajo de Dreamweaver.
Flujo de trabajo en
Dreamweaver.
Utilizar el entorno de
trabajo de Dreamweaver
BLOQUE 1
Introduccin al programa Dreamweaver
Contenido
Bloque 1.
Introduccin al programa Dreamweaver.
Bloque 2.
Utilizar el entorno
Dreamweaver.
de
trabajo
de
Bloque 3.
Aplicar elementos de la ficha de Diseo
a una pgina web.
Tiempo Asignado: 10 horas
Capacitacin para el Trabajo: Informtica
PRESENTACIN DEL PROYECTO A DESARROLLAR DURANTE EL

BLOQUE.
Disea pginas web utilizando las herramientas de programas integrados,
contribuyendo de manera responsable a la comunicacin global en diferentes
contextos.
ACTIVIDAD 1
SD1-B1
De manera individual responde los siguientes cuestionamientos:

Define con tus palabras el concepto de pgina Web.
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
Qu tipo de informacin encuentras en una pgina Web?
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
Menciona al menos dos lenguajes de programacin para una pgina Web.
_________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
14
Colegio de Bachilleres del Estado de Sonora
Elabora pginas Web
Actividad: 1
Conceptual
Reconoce el concepto de
pgina Web.
Autoevaluacin
Coevaluacin
Evaluacin
Producto: Definicin de
Puntaje:
conceptos
Saberes
Procedimental
Actitudinal
Identifica herramientas de
Muestra inters al resolver la
aplicacin para elaborar una
actividad
pgina Web.
C
MC
NC Calificacin otorgada por el
docente
Estrategia Didctica
Dreamweaver es un software fcil de usar que permite crear
pginas web profesionales.
Las funciones de edicin visual de Dreamweaver permiten
agregar rpidamente diseo y funcionalidad a las pginas, sin
la necesidad de programar manualmente el cdigo HTML.
Se pueden crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc. de una forma muy sencilla y visual.
Adems, incluye un software de cliente FTP completo, permitiendo entre otras
cosas, trabajar con mapas visuales de los sitios web, actualizando el sitio web
en el servidor sin salir del programa.
Inicio
Secuencia didctica 1
CONTEXTUALIZAR EL USO DEL DREAMWEAVER EN LA
CONSTRUCCIN DE SITIO WEB
Dreamweaver permite utilizar la mayora de los navegadores Web instalados en su computadora para previsualizar las pginas web. Tambin dispone de herramientas
de administracin de sitios dirigidas a principiantes como,
por ejemplo, la habilidad de encontrar y reemplazar lneas
de texto y cdigo por cualquier tipo de parmetro especificado, hasta el sitio web completo. El panel de comportamientos tambin permite crear JavaScript bsico sin conocimientos de cdigo.
BLOQUE 1 Introduccin al programa Dreamweaver
15
Con la llegada de la versin MX, Macromedia incorpor herramientas de creacin de contenido dinmico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, tambin permite la conexin a Bases de Datos
como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando
tecnologa de script como, por ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programacin.
Un aspecto de alta consideracin de Dreamweaver es su funcionalidad con
extensiones. Es decir, permite el uso de "Extensiones ". Las extensiones, tal y
como se conocen, son pequeos programas, que cualquier desarrollador web
puede escribir (normalmente en HTML y Javascript) y que cualquiera puede
descargar e instalar, ofreciendo as funcionalidades aadidas a la aplicacin.
Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de
extensiones que hacen posible la disponibilidad de extensiones gratuitas y de
pago para la mayora de las tareas de desarrollo web, que van desde simple
efectos rollover hasta completas cartas de compra.
Inicio
FLUJO DE TRABAJO EN DREAMWEAVER
Se pueden utilizar varios mtodos para crear un sitio Web; este es uno de ellos:
1) Planificacin y configuracin del sitio. Determina la ubicacin de los
archivos y examina las necesidades del sitio, el perfil de la audiencia y sus
objetivos.
Adems, se debe tener en cuenta los requisitos tcnicos como el acceso de los
usuarios, las limitaciones del navegador, los plugins o la descarga de archivos.
Una vez que se haya organizado la informacin y determinado una estructura,
se podr comenzar a crear el sitio.
2) Organizacin y administracin de los archivos del sitio. En el panel
Archivos se puede aadir, borrar y cambiar el nombre de los archivos y carpetas
fcilmente con el fin de modificar la organizacin segn resulte necesario. All
se encuentran numerosas herramientas que ayudarn a administrar el sitio,
transferir archivos desde y hacia un servidor remoto, configurar un proceso de
Proteccin/desproteccin que evite que se sobrescriban archivos y sincronizar
los archivos de los sitios local y remoto.
El panel Activos permite organizar fcilmente los activos de un sitio, que
se pueden arrastrar directamente desde el panel hasta un documento de
Dreamweaver.
16
Elabora pginas Web
3) Diseo de las pginas Web. Elije el diseo ms apropiado, o combina las

opciones de diseo de Dreamweaver para definir el aspecto de tu sitio.
En la creacin de su diseo puede utilizar elementos
PA, estilos de posicin CSS o diseos CSS
predefinidos de Dreamweaver. Las herramientas
de tabla permiten disear pginas rpidamente y,
posteriormente, reorganizar la estructura de las
mismas. Para mostrar varios documentos de forma
simultnea en un navegador, se pueden utilizarse
marcos para disear los documentos. Por ltimo,
se puede crear pginas nuevas basadas en una
plantilla de Dreamweaver y actualizar su diseo
de forma automtica cuando cambie la plantilla.
4) Adicin de contenido a las pginas. Implementa
activos y elementos de diseo, como texto, imgenes,
imgenes de sustitucin, mapas de imgenes, colores,
pelculas, sonido, vnculos HTML, mens de salto y
mucho ms. Se pueden utilizar funciones de creacin
de pginas incrustadas para dichos elementos, como
ttulos y fondos, escribir directamente en la pgina o
importar contenido desde otros documentos.
Dreamweaver tambin proporciona comportamientos para llevar a cabo tareas
en respuesta a eventos especficos, como la validacin de un formulario
cuando el visitante hace clic en el botn Enviar o abrir una segunda ventana
del navegador cuando la pgina principal ha terminado de cargarse.
Por ltimo, Dreamweaver incluye herramientas para maximizar el rendimiento
del sitio Web y para la comprobacin de las pginas, con objeto de garantizar
su compatibilidad con navegadores Web distintos.
5) Creacin de pginas mediante la introduccin manual de cdigo.
La codificacin manual de pginas Web es otro mtodo de crear pginas.
Dreamweaver ofrece sencillas herramientas de edicin visual, pero tambin
incluye un entorno de codificacin ms sofisticado. Puede utilizar el mtodo
que prefiera, o una combinacin de ambos, para crear y editar sus pginas.
17
6) Configuracin de una aplicacin Web para

contenido dinmico. Muchos sitios Web contienen
pginas dinmicas que permiten a los visitantes ver
informacin almacenada en bases de datos y que suelen
permitirles aadir y editar informacin. Para crear esas
pginas, configurar primero un servidor y una aplicacin
Web, crear o modificar un sitio de Dreamweaver y
conectarse a una base de datos.
7) Creacin de pginas dinmicas. En Dreamweaver se pueden definir
diversas fuentes de contenido dinmico, incluidos juegos de registros extrados
de bases de datos, parmetros de formularios y componentes JavaBeans. Para
aadir el contenido dinmico a una pgina, basta con arrastrarlo a ella. Puede
establecer que los registros de la pgina aparezcan de uno en uno o en grupos,
mostrar varias pginas de registros, aadir vnculos especiales para pasar de
una pgina de registros a la siguiente (o a la anterior) y crear contadores para
que los usuarios puedan llevar un control de los registros. Puede incorporar
lgica de aplicaciones o empresarial mediante tecnologas como Adobe
ColdFusion y servicios Web. Si se necesita ms flexibilidad, puede crear sus
propios comportamientos de servidor y formularios interactivos.
8) Comprobacin y publicacin. La comprobacin de las pginas es un
proceso continuo que se lleva a cabo durante todo el ciclo de desarrollo. Al
final del ciclo, publicar el sitio en un servidor. Muchos desarrolladores tambin
programan operaciones de mantenimiento peridico para asegurarse de que el
sitio se mantiene actualizado y operativo.
18
Elabora pginas Web
ACTIVIDAD 2
SD2-B1
De manera individual menciona y describe con tus palabras los pasos para elaborar una pgina
Web, en la siguiente tabla.
Pasos
Descripcin
Al finalizar comenta cada uno de los pasos y descripcin con tus compaeros.
19
Conceptual
Rbrica de Evaluacin
rea del evaluador
Puntos asignados a la actividad
Procedimental
Actitudinal
Marca con una X el tipo de evaluacin

Autoevaluacin
Saberes
C
Conceptual
Reconoce el procedimiento para elaborar una
pgina Web.
Procedimental Interpreta con sus palabras cada uno de los pasos
para elaborar una pgina Web.
Actitudinal
Lleva a cabo las instrucciones sugeridas por la
actividad y profesor.
Puntaje obtenido por el candidato
Puntos en lo
Puntos en lo
Puntos en lo conceptual
procedimental
actitudinal
Inicio
Total de la actividad
Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos
IDENTIFICAR LOS ELEMENTOS BSICOS PARA SU OPERACIN
Arrancar y cerrar Dreamweaver

Veamos las dos formas bsicas de arrancar Dreamweaver.
(Windows Vista y Windows 7) situado, normalmente, en la esquina
99 Desde el botn Inicio
inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega
un men. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que
hay instalados en tu ordenador, buscar Adobe Dreamweaver y haz clic sobre l para arrancar el
programa.
99 Desde el cono de Dreamweaver del Escritorio.
20
Elabora pginas Web
Inicio
DESCRIBIR LA PANTALLA DE BIENVENIDA
Al iniciar el programa Adobe Dreamweaver se inicia la siguiente pantalla de

bienvenida.
Abrir y Guardar documentos

Para abrir un documento, utilizar cualquiera de las siguientes operaciones:
99 Hacer clic en el botn abrir de la barra de herramientas estndar (si est
visible).
99 Pulsar la combinacin de teclas Ctrl + O.
99 Hacer clic sobre el men Archivo y elegir la opcin Abrir.
99 Hacer doble clic sobre el Archivo en la ventana del sitio.
99 Hacer clic derecho sobre el Archivo en el explorador de Windows, y
elegir la opcin Abrir con Adobe Dreamweaver CS6.
Para abrir un documento Nuevo, puedes utilizar cualquiera de las siguientes
operaciones:
99 Hacer clic en el botn Nuevo de la barra de herramientas estndar (si
est visible).
99 Pulsar la combinacin de teclas Ctrl + N.
99 Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
99 Despus de esto aparecer una nueva ventana, en la que debers
elegir la Categora Pgina en Blanco.
99 En la segunda columna seleccionar HTML, observar que hay muchos
diseos ya creados que podemos elegir. Para nuestro primer ejemplo
elegimos en Diseo ninguno. A continuacin pulsamos el botn Crear.
21
Para Guardar un documento, puedes utilizar cualquiera de las siguientes

operaciones.
99 Hacer clic en el botn Guardar de la
barra de herramientas estndar.
99 Pulsar la combinacin de teclas Ctrl + S.
99 Hacer clic sobre el men Archivo y elegir
la opcin Guardar.
99 Dreamweaver incluye la posibilidad
de, en el caso de estar trabajando
simultneamente con varios documentos,
poder guardar todos al mismo tiempo,
sin la necesidad de hacerlo uno por
uno. Para guardar todo puedes realizar
cualquiera de las siguientes operaciones.
99 Hacer clic en el botn Guardar Todo de
la barra de herramientas estndar.
99 Hacer clic sobre el men Archivo y elegir
la opcin Guardar Todo.
Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones
hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin
guardar todo, ya que en ocasiones es posible no desear guardar los cambios
en todos los documentos modificados. Por ello es conveniente que al principio
no utilices esta opcin, al menos hasta que te hayas habituado a manejar el
programa. De todas formas, observa que cuando hay cambios sin guardar
aparece un * tras el nombre del documento.
22
Elabora pginas Web
Inicio

DESCRIBIR LOS ELEMENTOS DE LA VENTANA DE TRABAJO
Identificar los elementos del entorno de trabajo.
Dreamweaver proporciona un diseo integrado en una nica ventana. En el

espacio de trabajo integrado, todas las ventanas y pneles estn integrados en
una nica ventana de la aplicacin de mayor tamao.
A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana de

documento D. Grupos de pneles E. Conmutador de espacios de trabajo
F. Selector de etiquetas G. Inspector de propiedades H. Pnel Archivos.

Detallar las opciones Vista de un documento.
El espacio de trabajo incluye los siguientes elementos.

99 La ventana de bienvenida. Permite abrir un documento reciente o
crear un documento nuevo. Desde la pantalla de bienvenida, tambin
puede profundizar sus conocimientos sobre Dreamweaver mediante
una visita guiada o un tutorial del producto.
99 Barra de la aplicacin. A lo largo de su parte superior, la ventana de la
aplicacin contiene un conmutador de espacios de trabajo, mens (solo
Windows) y otros controles de aplicacin.
99 Barra de herramientas Documento. Contiene botones que proporcionan
opciones para diferentes vistas de la ventana de documento (como la
vista Diseo y la vista Cdigo), diversas opciones de visualizacin y
algunas operaciones comunes como la obtencin de una vista previa
en un navegador.
23
99 Barra de herramientas Estndar. (No se muestra en el diseo de

espacio de trabajo predeterminado.). Contiene botones para las
operaciones ms habituales de los mens Archivo y Edicin: Nuevo,
Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir cdigo,
Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de
herramientas Estndar, seleccione Ver > Barras de herramientas >
Estndar.
99 Barra de herramientas Codificacin. (Solo se muestra en la
vista Cdigo.). Contiene botones que permiten realizar numerosas
operaciones de codificacin estndar.
99 Barra de herramientas Representacin de estilos. (Oculta de
manera predeterminada.). Contiene botones que le permiten ver cmo
aparecera el diseo en distintos tipos de medios si utilizase hojas de
estilos. Dependientes de los medios. Tambin contiene un botn que
le permite activar o desactivar estilos de hojas de estilos en cascada
(CSS).
99 Ventana de documento. Muestra el documento actual mientras lo est
creando y editando.
99 Inspector de propiedades. Permite ver y cambiar diversas propiedades
del objeto o texto seleccionado.
99 Cada objeto tiene propiedades distintas. El inspector de propiedades
no est ampliado de forma predeterminada en el diseo del espacio de
trabajo del codificador.
99 Selector de etiquetas. Situado en la barra de estado de la parte inferior
de la ventana de documento.
99 Muestra la jerarqua de etiquetas que rodea a la seleccin actual.
Da clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta
y todo su contenido.
99 Pneles. Ayudan a supervisar y modificar el trabajo realizado.
Ejemplos de pneles son: el pnel Insertar, el pnel Estilos CSS y el
pnel Archivos. Para ampliar un pnel, da doble clic en su ficha.
99 Pnel Insertar. Contiene botones para la insercin de diversos tipos
de objeto, como imgenes, tablas y elementos multimedia, en un
documento. Cada objeto es un fragmento de cdigo HTML que te
permite establecer diversos atributos al insertarlo. Por ejemplo, puedes
insertar una tabla haciendo clic en el botn
99 Tabla del pnel Insertar. Si se prefiere, puede insertar objetos utilizando
el men Insertar en lugar del pnel Insertar.
99 Pnel Archivos. Permite administrar los archivos y las carpetas, tanto
si forman parte de un sitio de Dreamweaver como si se encuentran
en un servidor remoto. El pnel Archivos tambin proporciona acceso
a todos los archivos del disco local, como ocurre en el Explorador de
Windows (Windows) o en el Finder (Macintosh).
24
Elabora pginas Web
Detallar las opciones Vista de un documento.
La ventana de documento muestra el documento actual. Puede elegir entre una

de las vistas siguientes:
99 Vista Diseo. Un entorno para el diseo visual de la pgina, la edicin
visual y el desarrollo rpido de aplicaciones. En esta vista, Dreamweaver
muestra una representacin visual del documento completamente
editable, similar a la que aparecera en un navegador.
99 Vista Cdigo. Un entorno de codificacin manual para escribir y editar
cdigo HTML, Java Script, cdigo de lenguaje de servidor, como por
ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de
cdigo.
99 Vista de cdigo dividida. Versin dividida de la vista Cdigo que le
permite desplazarse por el trabajo realizado en diferentes secciones del
documento a la vez.
99 Vistas Cdigo y Diseo. Permite ver las dos vistas, Cdigo y Diseo,
para el mismo documento en una sola ventana.
99 Vista en vivo. La Vista en vivo, que es similar a la vista Diseo,
muestra una representacin ms realista de la apariencia que tendr el
documento en un navegador y le permite interactuar con el documento
de la misma forma que lo hara en un navegador. La Vista en vivo no es
editable. No obstante, puede realizar modificaciones en la vista Cdigo
y actualizar la Vista en vivo para ver los cambios.
99 Vista Cdigo en vivo. Solo est disponible al visualizar un documento
en la Vista en vivo. La vista Cdigo en vivo muestra el cdigo que un
navegador utiliza para ejecutar la pgina y cambia dinmicamente
conforme se interacta con la pgina en la Vista en vivo. La vista Cdigo
en vivo no es editable.
Cuando una ventana de documento est maximizada (configuracin
predeterminada), aparecen fichas en la parte superior de la misma con
los nombres de archivo de todos los documentos abiertos. Recuerda que
Dreamweaver muestra un asterisco despus del nombre del archivo si ha
realizado cambios que no has guardado todava. Para cambiar a un documento,
da clic en su ficha.
Dreamweaver tambin muestra la barra de herramientas Archivos relacionados
debajo de la ficha del documento (o debajo de la barra de ttulo del documento
si ests viendo documentos en ventanas independientes). Los documentos
relacionados son documentos asociados al documento actual, como archivos
CSS o archivos Java Script. Para abrir uno de los archivos relacionados en
la ventana de documento, haga clic en su nombre de archivo en la barra de
herramientas Archivos relacionados.
25
ACTIVIDAD 3
SD5-B1
En binas resuelvan lo solicitado en cada uno de los casos:

1. Ubica cada unas de las letras en el lugar correspondiente:
A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana de documento

D. Grupos de pneles E. Conmutador de espacios de trabajo F. Selector de etiquetas
G. Inspector de propiedades H. Panel Archivos.
2. En el programa Inspiration elabora un mapa conceptual donde menciones los diferentes
tipos de vistas que maneja Dreamweaver. Imprmelo y pgalo en este espacio, para su
valoracin.
26
Elabora pginas Web
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Saberes
C
Conceptual
Reconoce el entorno del programa Dreamweaver.
Procedimental Ilustra con un mapa conceptual las diferentes vistas
que maneja el programa Dreamweaver.
Actitudinal
Puntos en lo
Puntos en lo
procedimental
actitudinal
Inicio

Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos
UBICAR LOS ELEMENTOS DE LA BARRA DE HERRAMIENTAS
Documento.
La barra de herramientas Documento contiene botones que permiten cambiar

rpidamente entre diferentes vistas del documento. La barra de herramientas
contiene tambin algunos comandos y opciones relativos a la visualizacin del
documento y a su transferencia entre los sitios local y remoto. La siguiente
ilustracin muestra la barra de herramientas de documento ampliada.
A. Mostrar vista de cdigo B. Mostrar vistas de cdigo y diseo C. Mostrar

vista de diseo D. Vista en vivo E. Vista Cdigo en vivo F. Ttulo del documento
G. Administracin de archivos H. Vista previa/Depurar en explorador
I. Actualizar vista de diseo J. Ver opciones K. Ayudas visuales L. Validar
formato M. Comprobar compatibilidad con navegadores
27
En la barra de herramientas Documento, aparecen las siguientes opciones:

A. Mostrar vista de cdigo. Solo muestra la vista Cdigo en la ventana de
documento.
B. Mostrar vistas de cdigo y diseo. Divide la ventana de documento entre
las vistas Cdigo y Diseo. Cuando seleccione esta vista combinada,
se encontrar disponible la opcin Vista de diseo encima del men
Ver.
C. Mostrar vista de diseo. Solo muestra la vista Diseo en la ventana de
documento.
D. Vista en vivo. Muestra una vista del documento no editable, interactiva
y basada en navegador.
E. Vista Cdigo en vivo. Muestra el cdigo en s utilizado por el navegador
para ejecutar la pgina.
F. Ttulo del documento. Permite introducir un ttulo para el documento,
que parecer en la barra de ttulo del navegador. Si el documento ya
tiene ttulo, este aparecer en dicho campo.
G. Administracin de archivos. Muestra el men emergente Administracin
de archivos.
H. Vista previa/Depurar en explorador. Le permite obtener una vista previa
o depurar el documento en un navegador. Seleccione un navegador en
el men emergente.
I. Actualizar vista de diseo. Actualiza la vista Diseo tras realizar
cambios en la vista Cdigo. Los cambios realizados en la vista Cdigo
no aparecern de forma automtica en la vista Diseo hasta que se
efecten determinadas acciones, como guardar el archivo o hacer clic
en este botn.
J. Ver opciones. Permite definir las opciones de las vistas Cdigo y Diseo
y establecer qu vista desea que aparezca en la parte superior de la
ventana. Las opciones del men corresponden a la vista actual: la vista
Diseo, la vista Cdigo o ambas.
K. Ayudas visuales. Permite utilizar distintas ayudas visuales para el diseo
de las pginas.
L. Validar formato. Permite validar el documento actual o una etiqueta
seleccionada.
M. Comprobar compatibilidad con navegadores. Le permite comprobar si
el CSS es compatible con diferentes navegadores.
28
Elabora pginas Web
Estndar.
La barra de herramientas Estndar contiene botones para las operaciones ms

habituales de los mens Archivo y Edicin: Nuevo, Abrir, Examinar en Brigde,
Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y
Rehacer. Estos botones se utilizan del mismo modo que los comandos de
men equivalentes.
A. Nuevo, B. Abrir, C. Examinar en Brigde, D. Guardar, E. Guardar todo, F.
Imprimir cdigo, G. Cortar, H. Copiar, I. Pegar, J. Deshacer y K. Rehacer.
Estado.
La barra de estado, situada en la parte inferior de la ventana de documento,

proporciona informacin adicional sobre el documento que est creando.
A. Selector de etiquetas B. Herramienta Seleccionar C. Herramienta Mano

D. Herramienta Zoom E. Establecer nivel de aumento F. Men emergente
Tamao de ventana G. Tamao del documento y tiempo de descarga estimado
H. Indicador de codificacin.
A. Selector de etiquetas. Muestra la jerarqua de etiquetas que rodea a la
seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para
seleccionar la etiqueta y todo su contenido. Haga clic en <body> para
seleccionar todo el cuerpo del documento. Para definir los atributos
clase o ID para una etiqueta en el selector de etiquetas, haga clic con el
botn de derecho del ratn (Windows) o mantenga presionada la tecla
Control y haga clic (Macintosh) en la etiqueta y elija una clase o una ID
del men contextual.
B. Herramienta Seleccionar. Activa y desactiva la herramienta Mano.
29
C. Herramienta Mano. Permite hacer clic en el documento y arrastrarlo por

la ventana de documento.
D. Herramienta Zoom y men emergente Establecer nivel de aumento.
Permiten establecer un nivel de aumento para el documento.
E. Men emergente Tamao de ventana. (No disponible en la vista Cdigo.)
Permite cambiar el tamao de la ventana de documento a dimensiones
predeterminadas o personalizadas.
F. Tamao del documento y tiempo de descarga. Muestra la estimacin del
tamao del documento y del tiempo de descarga de la pgina, incluidos
todos los archivos dependientes, como imgenes y otros archivos
multimedia.
G. Indicador de codificacin. Muestra la codificacin del texto del documento
actual.

Codificacin.
La barra de herramientas Codificacin contiene botones

que le permiten realizar numerosas operaciones de
codificacin estndar, como ampliar y contraer las
selecciones de cdigo, resaltar cdigo no vlido, insertar
o eliminar comentarios, aplicar sangra al cdigo e insertar
fragmentos de cdigo utilizados recientemente. La barra
de herramientas Codificacin aparece verticalmente en
la parte izquierda de la ventana de documento y solo
est visible cuando se muestra la vista Cdigo. IMG017
No puedes desacoplar ni mover la barra de herramientas
Codificacin, pero s puedes ocultarla
(Ver > Barras de herramientas > Codificacin).
Tambin puedes modificar la barra de herramientas
Codificacin para que muestre ms botones (como
Ajustar texto, Caracteres ocultos y Sangra automtica)
u ocultar botones que no desea utilizar.
Para ello, no obstante, deber editar el archivo XML que
genera la barra de herramientas. Para ms informacin,
consulte Ampliacin de Dreamweaver.
30
Elabora pginas Web
A. Abrir documentos, B. Mostrar navegador de cdigo, C. Contraer etiqueta

completa, D. Contraer seleccin. E. Expandir Todo, F. Seleccionar etiqueta
padre, G. Equilibrar llaves, H. Nmeros de lneas, I. Resaltar cdigo no vlido,
J. Alerta de errores de sintaxis, K. Aplicar comentario. L. Quitar comentario,
M. Ajuste de etiqueta, N. Fragmentos recientes, O. Mover o convertir CSS.

Representacin de estilo.
La barra de herramientas Representacin de estilos (oculta de manera

predeterminada) contiene botones que le permiten ver cmo aparecera el
diseo en distintos tipos de medios si utilizase hojas de estilos dependientes
de los medios.
Tambin contiene un botn con el que es posible activar o desactivar los
estilos CSS. Para mostrar la barra de herramientas, seleccione Ver > Barras de
herramientas > Representacin de estilos.
Esta barra de herramientas solo funciona si los documentos utilizan hojas de
estilos dependientes de los medios. Por ejemplo, una hoja de estilos puede
especificar una regla para imprimir y otra regla distinta para los dispositivos de
mano.
De manera predeterminada, Dreamweaver muestra el diseo para una pantalla
(que muestra cmo se representa una pgina en la pantalla del equipo).
Puedes ver las representaciones para los diferentes soportes haciendo clic en
los correspondientes botones de la barra de herramientas Representacin de
estilos.
A. Representar tipo de medio Screen. Muestra cmo aparece la pgina en
la pantalla de un equipo.
B. Representar tipo de medio Print. Muestra cmo aparece la pgina en
una hoja de papel impresa.
C. Representar tipo de medio Handheld. Muestra cmo aparece la pgina
en un dispositivo de mano, como un telfono mvil o un dispositivo
BlackBerry.
D. Representar tipo de medio Projection. Muestra cmo aparece la pgina
en un dispositivo de proyeccin.
E. Representar tipo de medio TTY. Muestra cmo aparece la pgina en un
teletipo.
F. Representar tipo de medio TV. Muestra cmo aparece la pgina en la
pantalla de televisin.
31
G. Alternar visualizacin de estilos CSS. Le permite activar o desactivar

estilos CSS. Este botn funciona de manera independiente a los dems
botones de medios.
H. Hojas de estilos de tiempo de diseo. Le permite especificar una hoja de
estilos de tiempo de diseo.
ACTIVIDAD 4
SD6-B1
De manera individual responde lo que se te solicita.

1. Escribe en el parntesis la letra correspondiente a cada definicin.
Muestra cmo aparece la pgina en
(
un dispositivo de proyeccin.
Muestra cmo aparece la pgina en la

pantalla de un equipo.
Le permite activar o desactivar

estilos CSS. Este botn funciona de
(
manera independiente a los dems
botones de medios.
Muestra cmo aparece la pgina en un

teletipo.

(
una hoja de papel impresa.
Muestra cmo aparece la pgina en un

dispositivo de mano, como un telfono mvil
o un dispositivo BlackBerry.

(
la pantalla de televisin.
Le permite especificar una hoja de estilos de

tiempo de diseo.
32
Elabora pginas Web
Continuacin Actividad 4 (Individual)

2. Investiga y escribe el nombre del botn de la Barra de herramientas del documento en el
cono que corresponda.
rea del evaluador

Conceptual

Procedimental
Actitudinal

Autoevaluacin
Saberes
C
Conceptual
Reconoce los elementos de la ventana de documento
del Dreamweaver.
Procedimental Distingue los diferentes elementos de las barras del
entorno de trabajo del Dreamweaver.
Actitudinal
Puntos en lo
Puntos en lo
procedimental
actitudinal
Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos
33
Inicio
DESCRIBIR EL INSPECTOR DE PROPIEDADES
El inspector de propiedades permite examinar y editar las propiedades ms
comunes del elemento de pgina seleccionado actualmente, como texto o un
objeto insertado.
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos
aplicar a los diferentes elementos de la pgina Web que estemos diseando.
El contenido del inspector de propiedades es distinto en funcin del elemento
seleccionado. Por ejemplo, si se selecciona una imagen de la pgina, el
inspector de propiedades cambiar para mostrar las propiedades de la imagen
(por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de la imagen, el
borde que rodea la imagen en caso de que lo haya, etc.).
El inspector de propiedades se encuentra, de manera predeterminada, en el
borde inferior del espacio de trabajo, aunque puede desacoplarlo y convertirlo
en un panel flotante en el espacio de trabajo.
Inicio
UBICAR LOS ELEMENTOS DE LOS PANELES

Insertar.
El panel Insertar contiene botones para crear e insertar

objetos como tablas, imgenes y vnculos. Los botones
estn ordenados en diferentes categoras, entre las que
puede cambiar seleccionando la categora deseada del
men desplegable Categora. Si el documento actual
contiene cdigo de servidor, como los documentos
ASP o CFML, aparecen tambin otras categoras.
Algunas categoras tienen botones con mens
emergentes. Al seleccionar una opcin de un men
emergente, dicha opcin se convierte en la accin
predeterminada del botn.
34
Elabora pginas Web
Por ejemplo, si selecciona Marcador de posicin de imagen en el men

emergente del botn Imagen, la siguiente vez que haga clic en el botn
Imagen, Dreamweaver insertar un marcador de posicin de imagen. Siempre
que seleccione una nueva opcin del men emergente cambiar la accin
predeterminada del botn.
El panel Insertar est organizado en las categoras siguientes:
Categora Comn. Permite crear e insertar los objetos que se utilizan con ms
frecuencia, como las imgenes y las tablas.
Categora Diseo. Permite insertar tablas, elementos de tabla, etiquetas
div, marcos y widgets de Spry. Tambin puede elegir dos vistas para tablas:
Estndar (valor predeterminado) y Tablas expandidas.
Categora Formularios. Contiene botones que permiten crear formularios e
insertar elementos de formulario, incluidos widgets de validacin de Spry.
Categora Datos. Permite insertar objetos de datos de Spry y otros elementos
dinmicos, como juegos de registros, regiones repetidas y grabar formularios
de insercin y actualizacin.
Categora Spry. Contiene botones para crear
pginas de Spry, incluidos objetos de datos y widgets
de Spry.
Categora InContext Editing. Contiene botones
para la creacin de pginas de InContext Editing,
incluidos botones para Regiones editables, Regiones
repetidas y la administracin de clases CSS.
Categora Texto. Permite insertar diversas etiquetas
de formato de texto y listas, como b, em, p, h1 y ul.
Categora Favoritos. Permite agrupar y organizar
los botones del panel Insertar que utiliza con ms
frecuencia en un lugar comn.
Categoras de cdigo de servidor. Solo estn
disponibles para las pginas que emplean un
lenguaje de servidor determinado, como ASP, CFML
Basic, CFML Flow, CFML Advanced, y PHP. Cada
una de estas categoras contiene objetos de cdigo
de servidor que pueden insertarse en la vista Cdigo.
35
Archivos.
El panel Archivos se utiliza para ver y administrar los archivos del sitio de
Dreamweaver.
Al visualizar sitios, archivos o carpetas en el panel
Archivos, puede cambiar el tamao del rea de
visualizacin y expandir o contraer el panel Archivos.
Cuando el panel Archivos se contrae, muestra el
contenido del sitio local, el sitio remoto, el servidor de
prueba o el depsito SVN como una lista de archivos.
Cuando est ampliado, adems del sitio local, muestra
el sitio remoto o el servidor de prueba o el depsito SVN.
Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos
cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contrado.

Sitio local.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco

local. Los documentos HTML normalmente se crean dentro de dicha carpeta,
mientras que para contener las imgenes, las animaciones, archivos de tipos
especfico, etc., se deben crear nuevas carpetas dentro de esta, con el objetivo
de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es
lo que se conoce como sitio local.

Sitio remoto.
El sitio local y el sitio remoto tienen la misma estructura. El sitio local es la

copia del sitio con la que trabajaremos, y los cambios los actualizaremos en
el sitio remoto. Despus se podrn copiar los archivos en un servidor web, en
el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la
gente podr ver en Internet.

Sitio de Dreamweaver.
En Dreamweaver, el trmino sitio se emplea para referirse a una ubicacin

de almacenamiento local o remoto de los documentos que pertenecen a un
sitio Web.
Un sitio de Dreamweaver permite organizar y administrar todos los documentos
Web, cargar el sitio en un servidor Web, controlar y mantener vnculos y
administrar y compartir archivos. Para aprovechar al mximo las funciones de
Dreamweaver, debe definir un sitio.
36
Elabora pginas Web
Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn

el entorno de desarrollo y el tipo de sitio Web que se desarrolle:
99 Carpeta raz local. Almacena los archivos con los que est trabajando.
Dreamweaver se refiere a esta carpeta como el sitio local. Esta carpeta
suele encontrarse en el equipo local, pero tambin se puede encontrar
en un servidor de red.
99 Carpeta remota. Almacena los archivos para pruebas, produccin,
colaboracin, etc. Dreamweaver se refiere a esta carpeta como el
sitio remoto en el panel Archivos. En general, la carpeta remota suele
colocarse en el equipo donde se ejecuta el servidor Web. La carpeta
remota incluye los archivos a los que los usuarios acceden en Internet.
Las carpetas locales y remotas permiten transferir archivos entre el
disco duro local y el servidor Web, lo cual facilita la administracin de
los archivos en los sitios de Dreamweaver. Se trabaja en archivos en la
carpeta local y se publican en la carpeta remota cuando se desea que
otras personas los puedan ver.
99 Carpeta de servidor de prueba. Es la carpeta en la que Dreamweaver
procesa pginas dinmicas.

Utilizar el cuadro de dilogo Administrar sitios.
Utilice el cuadro de dilogo Administrar

sitios para crear un nuevo sitio, editar,
duplicar, eliminar un sitio o importar o
exportar la configuracin de un sitio.
1. Seleccione Sitio > Administrar sitios
y seleccione un sitio de la lista de la
izquierda.
2. Haga clic en un botn para
seleccionar una de las opciones y haga
clic en Listo.
99 Nuevo. Permite crear un sitio
nuevo.
99 Editar. Sirve para modificar un sitio
existente.
37
99 Duplicar. Crea una copia del sitio seleccionado. La copia aparece en la

ventana de lista de sitios.
99 Quitar. Elimina el sitio seleccionado; no podr deshacer esta accin.
99 Exportar. Permite exportar la configuracin de un sitio como archivo
XML (*.ste).
99 Importar. Permite seleccionar un archivo de configuracin de un sitio

(*.ste).
38
Elabora pginas Web
Estilo CSS.
El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que
afectan a un elemento de pgina actualmente seleccionado (modo Actual) o las
reglas y propiedades que afectan a todo un documento (modo Todo).
Un botn situado en la parte superior
del panel Estilos CSS te permite
cambiar entre estos dos modos. El
panel Estilos CSS tambin te permite
modificar propiedades CSS tanto en
modo Todo como en modo Actual.
Puede cambiar el tamao de
cualquiera de los pneles arrastrando
los bordes que los separan.
Modo actual.
En modo Actual, el panel Estilos CSS muestra tres secciones:

99 Panel Seleccin, que muestra las propiedades de CSS de la seleccin
actual del documento.
99 Panel Reglas, que muestra la ubicacin de las propiedades seleccionadas
(o una cascada de reglas para la etiqueta seleccionada, en funcin de
la seleccin).
99 Panel Propiedades, que le permite editar las propiedades CSS al definir
reglas para la seleccin.

Modo todo
En modo Todo, el panel Estilos CSS muestra dos secciones:

99 Panel Todas las reglas, el cual muestra una lista de reglas definidas en
el documento actual, as como las reglas definidas en las hojas de estilo
adjuntas al documento actual.
99 Panel Propiedades, permite editar propiedades CSS para cualquier
regla seleccionada en el pnel Todas las reglas.
Todos los cambios que realice en el panel Propiedades se aplican de forma
inmediata; de este modo, puede previsualizar el trabajo a medida que lo lleve
a cabo.
39
Inicio
GUAS VISUALES
Dreamweaver proporciona varios tipos de guas visuales para ayudarte a
disear documentos y predecir de forma aproximada cul ser su apariencia
en los navegadores. Puede seguir uno de estos procedimientos:
99 Ajustar instantneamente el tamao deseado para una ventana de
documento y comprobar si caben los elementos en la pgina.
99 Utilizar una imagen de rastreo como fondo de la pgina para ayudarle a
copiar un diseo creado en una aplicacin de edicin de ilustraciones o
imgenes como Adobe Photoshop o Adobe Fireworks.
99 Utilizar las reglas y guas para proporcionar una pista visual que permita
colocar y cambiar el tamao de los elementos de pgina con precisin.
99 Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y
ajuste del tamao de elementos con posicin absoluta (elementos PA).
Las marcas de cuadrcula de la pgina ayudan a alinear los elementos PA y,
cuando est activada la funcin de ajuste, permiten ajustar automticamente
los elementos PA con el punto ms prximo de la cuadrcula al moverlas o
ajustar su tamao. (Los dems objetos, como las imgenes y los prrafos, no
se ajustan a la cuadrcula.) El ajuste funciona independientemente de que la
cuadrcula est visible.
40
Elabora pginas Web
GLOSARIO

Cdigo HTML: hace referencia al lenguaje de marcado para la elaboracin

de pginas web. Es un estndar que sirve de referencia para la elaboracin
de pginas web en sus diferentes versiones, define una estructura bsica
y un cdigo (denominado cdigo HTML) para la definicin de contenido de
una pgina web, como texto, imgenes, videos, entre otros.
JavaScript: es un lenguaje de programacin interpretado, dialecto del

estndar ECMAScript. Se define como orientado a objetos, basado en
prototipos, imperativo, dbilmente dinmico.
Macromedia: empresa desarrolladora de software grfico y desarrollo

web. Su central estaba en San Francisco, California (EE.UU). Fue formada
en 1992 por la fusin entre Authorware, Inc. y MacroMind-Paracomp
(creadores de Macromind Director). - See more at: http://www.alegsa.com.
ar/Dic/macromedia.php#sthash.gG3sGo7l.dpuf
Herramientas HTML WYSIWYG: es el acrnimo de What You See Is

What You Get (en espaol, "lo que ves es lo que obtienes"). Se aplica a
los procesadores de texto y otros editores de texto con formato (como los
editores de HTML) que permiten escribir un documento viendo directamente
el resultado final, frecuentemente el resultado impreso.
MySQL: es un sistema de gestin de bases de datos relacional, multihilo y

multiusuario con ms de seis millones de instalaciones
Servidor remoto: es una combinacin de hardware y software que permite

el acceso remoto a herramientas o informacin que generalmente residen
en una red de dispositivos.
JavaBeans: modelo de componentes creado por Sun Microsystems para la

construccin de aplicaciones en Java.
Se usan para encapsular varios objetos en un nico objeto (la vaina o Bean
en ingls), para hacer uso de un solo objeto en lugar de varios ms simples.
Adobe ColdFusion: servidor de aplicaciones y un lenguaje de

programacin usado para desarrollar aplicaciones de Internet, generalmente
sitios web generados dinmicamente. En este aspecto, es un producto
similar a ASP, JSP o PHP.
41
En equipo de cinco elabora un video educativo donde menciones y describas detalladamente

la funcin de cada uno de los siguientes puntos.

Dreamweaver.
Sitio en Dreamweaver.
Carpeta Remota.
Carpeta Raz.
Carpeta de servidor de prueba.
Opciones del cuadro de dilogo Administrar sitios.
Panel CSS.
Guarda el archivo con el nombre de Actividad integradora 1 y entrgala a tu profesor para su

valoracin.
LISTA DE COTEJO PARA EVALUAR LA ACTIVIDAD INTEGRADORA.
1.- Demuestra un completo entendimiento del tema.

2.- El volumen es lo suficientemente alto para ser escuchado por todos los
miembros de la audiencia a lo largo de toda la grabacin.
3.- Durante la grabacin se desenvuelve de forma objetiva y fluida.
4.- Se mantiene en el tema todo el tiempo (100%)
5.- Habla clara y distintivamente todo y demuestra buena pronunciacin.
6.- Usa vocabulario apropiado.
7.- La entonacin es adecuada durante el desarrollo de toda la grabacin.
8.- El trabajo posee ortografa adecuada.
9 Desarrolla la instruccin de la actividad al pie de la letra.
10.- El estudiante domina el tema.
PARCIAL
TOTAL
E = excelente, S = sobresaliente, R = regular, N = no competente
42
Elabora pginas Web
REACTIVOS DE CIERRE
En este paso de flujo de trabajo en Dreamweaver se determina la ubicacin de los archivos y se
examinan las necesidades del sitio, el perfil de la audiencia y sus objetivos.
A) Planificacin y configuracin del sitio.
B) Organizacin y administracin de los archivos del sitio.
C) Diseo de la pgina Web.
D) Adicin al contenido a las pginas.
En este paso de flujo de trabajo en Dreamweaver se implementan activos y elementos de diseo,
como texto, imgenes, imgenes de sustitucin, mapas de imgenes, colores, pelculas, sonido,
vnculos HTML, mens de salto y mucho ms.
A) Planificacin y configuracin del sitio.
B) Organizacin y administracin de los archivos del sitio.
C) Diseo de la pgina Web.
D) Adicin al contenido a las pginas.
Permite abrir un documento reciente o crear un documento nuevo. Desde la pantalla de
bienvenida, tambin puede profundizar sus conocimientos sobre Dreamweaver mediante una
visita guiada o un tutorial del producto.
A) Ventana de Bienvenida.
B) Barra de aplicacin.
C) Barra de herramientas Documento.
D) Barra de herramientas Estndar.
Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento
(como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas
operaciones comunes como la obtencin de una vista previa en un navegador.
A) Ventana de Bienvenida.
B) Barra de aplicacin.
C) Barra de herramientas Documento.
D) Barra de herramientas Estndar.
43
Fuentes Bibliogrficas
Mdulo Nuevas Tecnologas de la Informacin y la Comunicacin; Colegio de Bachilleres del
Estado de Sonora; Edicin Junio del 2010.
Fuentes Electrnicas
http://tv.adobe.com/show/learn-dreamweaver-cs6/
http://www.videotutoriales.es/tutorial-dreamweaver-cs6/videotutoriales-dreamweaver-cs6-webmovil.php
44
BLOQUE 2
Utilizar el entorno de trabajo de Dreamweaver
Contenido
Cambiar la vista de la ventana de trabajo.
Utilizar etiquetas div.
Preparar la ventana de trabajo para
crear una pgina Web utilizando CSS.
Aplicar maquetacin de pginas Web.
Disear una Pgina Web.
Sealar la importancia del diseo de
pginas Web con CSS.
Crear una pgina Web con diseo CSS.
Implementar tablas de pginas Web.
Inicio
CAMBIAR LA VISTA DE LA VENTANA DE TRABAJO
PRESENTACIN DEL PROYECTO A DESARROLLAR DURANTE EL
BLOQUE.
Ubica y explica cada uno de los elementos utilizados en Dreamweaver, siguiendo
al pie de la letra las instrucciones del facilitador.
ACTIVIDAD 1
SD1-B2

Menciona tres tipos de vista que maneja Adobe Dreamweaver.
_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
Escribe cuatro botones de la barra de herramientas de documentos.
________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
Cul es la funcin de la barra de herramientas de estado?
_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
46
Elabora pginas Web
Evaluacin
Actividad: 1
Producto: Definicin de conceptos.
Puntaje:
Saberes
Conceptual
Reconoce los
elementos del
entorno de trabajo del
Dreamweaver.
Autoevaluacin
Procedimental
Actitudinal
Analiza las funciones del pnel insertar

y del inspector de propiedades.
MC
NC

actividad.
Calificacin otorgada por el

docente.
Coevaluacin
La ventana de documento permite

visualizar documentos en la vista
Cdigo, la vista Cdigo dividida, la
vista Diseo, las vistas Cdigo y Diseo (vista Dividida) o en la Vista en vivo.
Tambin se puede optar por visualizar la vista de cdigo dividida o las vistas
Cdigo y Diseo horizontal o verticalmente. (La visualizacin predeterminada
es la horizontal.)
Vista de diseo.
Permite trabajar con el editor visual.
Vista de Cdigo.
Se utiliza para trabajar en un entorno totalmente de programacin, de cdigo fuente.
BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver
47
No permite tener directamente una referencia visual de cmo va quedando el

documento segn se va modificando el cdigo.
Vista dividir.
Permite dividir la ventana en dos zonas: Cdigo y Diseo, La zona superior
muestra el cdigo fuente, y la inferior el editor visual. Cuando se realiza un
cambio en alguna de las zonas, este cambio se aplica directamente sobre la
otra.
Cambiar el tamao de la ventana documento.
La barra de estado muestra las dimensiones actuales de

la ventana de documento (en pixeles). Para disear una
pgina cuyo mejor aspecto se logra con un tamao especfico, puede ajustar la ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos o crear otros nuevos.
Establecimiento de un tamao predeterminado para la
ventana de documento.
Elegir uno de los tamaos del men emergente tamao de ventana situado en la parte inferior de la ventana
de documento.
48
Elabora pginas Web
Modificacin de los valores que aparecen en el men emergente tamao de

ventana.
El tamao de la ventana indicado corresponde a las dimensiones internas de
la ventana del navegador, sin bordes. El tamao del monitor figura entre parntesis. Por ejemplo, la opcin 536 x 196 (640 x 480, Predeterminado) es
el tamao de ventana que se debe utilizar si los visitantes van a hacer uso de
Microsoft Internet Explorer o Netscape Navigator en su configuracin predeterminada con un monitor de 640 x 480.
En Windows, los documentos contenidos en la ventana de documento se maximizan de manera predeterminada y no es posible cambiar el tamao de un
documento maximizado.
Para que el documento no est maximizado, hacer clic en el botn de anulacin
de la maximizacin, situado en la esquina superior derecha del documento.
Identificar la herramienta ejecutar informes.
Dreamweaver permite ejecutar informes para buscar contenido, solucionar problemas o probar el contenido. Puede generar los siguientes tipos de informes:
Buscar. Permite buscar etiquetas, atributos y texto especfico en las etiquetas.
Referencia. Le permite buscar informacin de referencia que puede resultar
til.
Validacin. Permite comprobar si existen errores de cdigo o de sintaxis.
Compatibilidad con navegadores. Permite probar el cdigo HTML en los documentos para comprobar si hay alguna etiqueta o atributo que sean incompatibles con los navegadores de destino.
Verificador de vnculos. Permite encontrar y arreglar vnculos rotos, externos
y hurfanos.
Informes de sitios. Permite mejorar el flujo de trabajo y probar los atributos
HTML del sitio. Los informes de flujo de trabajo incluyen informacin sobre
proteccin, sobre documentos modificados recientemente y sobre Design
Notes; los informes HTML incluyen etiquetas de fuentes anidadas combinables, la opcin de accesibilidad, texto alternativo que falta, etiquetas anidadas repetidas, etiquetas vacas eliminables y documentos sin ttulo.
Registro FTP. Permite ver toda la actividad de transferencia de archivos mediante FTP.
Depuracin del servidor. Le permite ver informacin para depurar una aplicacin de Adobe ColdFusion.
49
ACTIVIDAD 2
SD1-B2
En el centro de cmputo del plantel, en equipos de tres elaborar un mapa conceptual, donde se
mencionen y describan los tres tipos de vista de un documento utilizando el programa Adobe
Dreamweaver.
50
Elabora pginas Web
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Saberes
C
Conceptual
Identifica las diferentes vistas de un documento y
los diferentes reportes que genera el Dreamweaver.
Procedimental Examina las diferentes vistas de un documento en
Dreamweaver.
Actitudinal
Muestra una actitud positiva y responsable en la
elaboracin de la actividad.
Puntos en lo
Puntos en lo
procedimental
actitudinal
Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos
Inicio PREPARAR LA VENTANA DE TRABAJO PARA CREAR UNA PGINA
WEB UTILIZANDO CSS
Adobe Dreamweaver CS6 incluye numerosas funciones diseadas para facilitar la creacin de estilos y diseos para pginas Web mediante hojas de
estilos en cascada (CSS, Cascading Style Sheets).
Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y
reducen el tamao del archivo.
Contextualizar hoja de estilo en cascada.

Las hojas de estilos en cascada (CSS,) son un conjunto de reglas de formato
que determinan el aspecto del contenido de una pgina Web. La utilizacin de
estilos CSS para aplicar formato a una pgina permite separar el contenido de
la presentacin.
El contenido de la pgina (el cdigo HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentacin del cdigo residen en otro
51
archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la seccin head).
La separacin del contenido y la presentacin hace que resulte mucho ms
fcil mantener el aspecto del sitio desde una ubicacin central, ya que no es
necesario actualizar las propiedades de las distintas pginas cuando se desea
realizar algn cambio. La separacin del contenido y la presentacin tambin
depura y simplifica el cdigo HTML, lo que disminuye el tiempo de carga en los
navegadores y agiliza la navegacin para personas con problemas de accesibilidad (por ejemplo, para los usuarios que utilicen lectores de pantalla).
El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto
que desea para la pgina. Con CSS, puede controlar numerosas propiedades
del texto, entre ellas las fuentes y los tamaos de fuente especficos; negrita, cursiva, subrayado y sombras de texto; color de texto y de fondo; color y
subrayado de vnculos; etc. Si utiliza CSS para controlar las fuentes, tambin
conseguir un tratamiento ms coherente del diseo y el aspecto de la pgina
en mltiples navegadores.
Adems para dar formato al texto, puede utilizar CSS para definir el formato y
la posicin de elementos de nivel de bloque (block-level) de una pgina Web.
Un elemento de nivel de bloque es un elemento de contenido independiente
que normalmente est separado por una nueva lnea en el cdigo HTML y que
tiene visualmente el formato de un bloque.
Por ejemplo, las etiquetas h1, p y div generan elementos de nivel de bloque en
una pgina Web. Puede ajustar mrgenes y bordes para elementos de nivel de
bloque, situarlos en una ubicacin concreta, aadirles color de fondo, colocar
texto flotante alrededor de ellos, etc. La manipulacin de elementos de nivel de
bloque es, en definitiva, la forma en que se establece el diseo de las pginas
con CSS.
Descripcin de reglas CSS.
Una regla de formato CSS consta de dos
partes: el Selector y la Declaracin (o, en
la mayora de los casos, un bloque de
declaraciones). El selector es un trmino
(por ejemplo p, h1, un nombre de clase o
un identificador) que identifica el elemento
con formato; el bloque de declaraciones
define cules son las propiedades de estilo. En el siguiente ejemplo, h1 es el selector y el cdigo comprendido entre las
llaves ({}) es el bloque de declaraciones:
52
Elabora pginas Web
h1 {font-size: 16 pixels; font-family: Helvetica;

font-weight:bold;}
Cada declaracin consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por
ejemplo, Helvtica). En la regla CSS anterior,
se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1
vinculadas a este estilo tendr un tamao de
16 pxeles, fuente Helvtica y negrita.
El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar
independiente del texto al que aplica formato (normalmente en una hoja de
estilos externa o en la seccin head de un documento HTML).
Por consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas
etiquetas a la vez (y, en el caso de las hojas de estilos externas, la regla puede
aplicarse a muchas etiquetas a la vez de distintas pginas).
De este modo, CSS proporciona una capacidad de actualizacin extremadamente sencilla. Al actualizar una regla CSS en un lugar, el formato de todos los
elementos que usan ese estilo definido se actualiza automticamente con el
nuevo estilo.
Crear una nueva regla CSS.
Se puede crear una regla CSS para automatizar la aplicacin de formato a Etiquetas HTML o rangos de texto identificados mediante un atributo clase o ID.
Situar el punto de insercin en el documento y seguir uno de estos procedimientos para abrir el cuadro de dilogo: Nueva Regla CSS.
En el cuadro de dilogo Nueva Regla CSS,especificar el tipo de selector para

la regla CSS que se desea crear:
53
99Para crear un estilo personalizado que

pueda aplicarse como atributo clase a cualquier elemento HTML, seleccione la opcin
Clase del men emergente Tipo de selector
e introducir un nombre para el estilo en el
cuadro de texto Nombre del selector.
Los nombres de clase deben comenzar
por un punto y pueden contener cualquier
combinacin alfanumrica (por ejemplo
.myhead1).
Si no se introduce el punto inicial, Dreamweaver lo har de forma automtica.
99 Para definir el formato de una etiqueta que contenga un atributo
ID concreto, seleccionar la opcin
ID del men emergente Tipo de
selector e introduzca el ID (por
ejemplo, containerDIV) en el cuadro de texto Nombre del selector.
Los ID deben comenzar por un signo
de almohadilla (#) y pueden contener
cualquier combinacin alfanumrica
(por ejemplo #myID1). Si no introduce
la almohadilla inicial, Dreamweaver la
introducir de forma automtica. Para
redefinir el formato predeterminado de
una etiqueta HTML especfica, seleccionar la opcin Etiqueta del men emergente Tipo de selector y, seguidamente, introducir una etiqueta HTML en el cuadro de texto Nombre del selector o
elegir una en el men emergente.
99 Para definir una regla compuesta que afecte a dos o ms etiquetas, clases
o ID simultneamente, seleccionar la opcin Compuesto e introducir los
selectores para la regla compuesta. Por ejemplo, si introduce div p, la regla
afectar a todos los elementos p situados dentro de etiquetas div. Un rea
de texto descriptivo explica exactamente a qu elementos afecta la regla
conforme se aaden o eliminan selectores.
Definir una regla para body.
Se pueden definir las categoras, Tipo, Fondo, Bloque, cuadro, Borde, Lista,
Posicin y Extensiones.
54
Elabora pginas Web
Definir las propiedades CSS.

Puede definir propiedades de reglas CSS, como la fuente del texto, la imagen
y el color de fondo, las propiedades de espaciado y diseo y el aspecto de los
elementos de las listas.
55
o Categora Tipo.
o Categora Fondo.
56
Elabora pginas Web
o Utilizar etiquetas.
El texto y las imgenes se pueden justificar al gusto del diseador.
ACTIVIDAD 3
SD1-B2
En el centro de cmputo, en binas, utiliza una nueva regla de CSS que contenga letra arial tamao 12, fondo color gris, inserta imagen y escribe los nombres de los integrantes de equipo.
Guarda en tu escritorio el documento con el nombre de Actividad 3 y mustrala a tu profesor
para su valoracin.
Conclusin Individual:
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
57
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Saberes
C
Conceptual
Selecciona los elementos necesarios de una regla
CSS para implementar una Etiqueta.
Procedimental Practica el uso de reglas CSS para la elaboracin
de pginas web.
Actitudinal
Lleva a cabo las instrucciones sugeridas por la actividad y profesor.
Puntos en lo
Puntos en lo
procedimental
actitudinal
Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos
Inicio Secuencia didctica 3

DISEAR UNA PGINA WEB.
Un diseo de pgina CSS utiliza el formato de hojas de estilos en cascada, en
lugar de las tablas o marcos HTML tradicionales, para organizar el contenido
de un sitio Web. El elemento bsico del diseo CSS es la etiqueta div, una
etiqueta HTML que, en la mayora de los casos, acta como contenedor de
texto, imgenes y otros elementos de pgina. Cuando crea un diseo CSS,
coloca etiquetas div en la pgina, aade contenido a las mismas y las sita en
distintos lugares. A diferencia de las celdas de tabla, que solo pueden situarse
en algn lugar dentro de las filas y columnas de la tabla, las etiquetas div
aparecen en cualquier lugar de una pgina Web. Puede situar etiquetas div
de forma absoluta (especificando las coordenadas (x, y) o de forma relativa
(especificando su distancia con respecto a otros elementos de la pgina).
58
Elabora pginas Web
La creacin de diseos CSS desde cero puede ser una tarea difcil debido a
la gran cantidad de formas de hacerlo que existen. Se puede crear un diseo
CSS sencillo de dos columnas estableciendo elementos flotantes, mrgenes,
rellenos y otras propiedades CSS mediante un nmero casi infinito de combinaciones. Adems, el problema de la reproduccin en distintos navegadores
hace que determinados diseos CSS se muestren correctamente en algunos
navegadores y no en otros. Dreamweaver facilita la creacin de pginas con
diseos CSS con ms de 30 diseos predefinidos que funcionan en distintos
navegadores.
La utilizacin de los diseos CSS predefinidos que vienen con Dreamweaver es
la forma ms fcil de crear una pgina con un diseo CSS, pero tambin puede
crear diseos CSS mediante los elementos con posicin absoluta (elementos
PA) de Dreamweaver. En Dreamweaver, un elemento PA es un elemento de
pgina HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene
una posicin absoluta asignada. Sin embargo, la limitacin de los elementos
PA de Dreamweaver radica precisamente en que tienen una posicin absoluta,
lo que hace que sus posiciones nunca se ajusten a la pgina en funcin del
tamao del navegador.
Al considerar un usuario avanzado, tambin se puede insertar etiquetas div de
forma manual y aplicarles estilos de posicin CSS para crear los diseos de las
pginas.

CREAR UNA PGINA WEB CON DISEO CSS
Seleccionar Archivo > Nuevo.
2. En el cuadro de dilogo Nuevo documento, selecciona la categora Pgina
en blanco (seleccin predeterminada).
3. En Tipo de pgina, selecciona el tipo
de pgina que desea crear.
4. En Diseo, seleccionar el diseo
CSS que se desea utilizar. Se puede
elegir entre ms de 30 diseos distintos. La ventana Vista previa muestra el
diseo y ofrece una breve descripcin
del diseo seleccionado.
Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas:
59
99 Fija. El ancho de columna se especifica en pixeles. La columna no cambia

de tamao en funcin del tamao del navegador o de la configuracin del
texto del visitante del sitio.
99 Elstica. El ancho de columna se especifica en una unidad de medida (ems)
relacionada con el tamao del texto. El
diseo se adapta si el visitante del sitio
cambia la configuracin del texto, pero
no en funcin del tamao de la ventana
del navegador.
99 Flotante. El ancho de columna se especifica como porcentaje del tamao
del navegador del visitante. El diseo se adapta si el visitante del sitio ampla o reduce el navegador, pero no en funcin de la configuracin del texto.
99 Hbrida. Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo, el diseo de dos columnas hbridas, barra lateral derecha
tiene una columna principal que se ajusta al tamao del navegador y una
columna elstica a la derecha que se ajusta al tamao de la configuracin
del texto del visitante del sitio.
99 5. Seleccionar un tipo de documento del men emergente Tipo de documento.
99 6. Selecciona una ubicacin
para el cdigo CSS del diseo
en el men emergente Diseo
CSS en.
99 Aadir a Head. Aade cdigo
CSS para el diseo al encabezado de la pgina que se va a
crear.
99 Crear nuevo archivo. Aade cdigo CSS para el diseo a una nueva hoja de
estilos CSS externa y la adjunta a la pgina que se va a crear.
99 Vincular a archivo existente. Permite especificar un archivo CSS existente
que ya contiene reglas CSS necesarias para el diseo. Esta opcin es especialmente til cuando desea utilizar el mismo diseo CSS (las reglas CSS
para el mismo se encuentran en un nico archivo) en varios documentos.
60
Elabora pginas Web

UTILIZAR ETIQUETAS DIV
Contextualizar etiquetas div.
Se pueden crear diseos de pgina insertando manualmente etiquetas div y
aplicando a estas estilos de posicin CSS. Una etiqueta div es una etiqueta
que define las divisiones lgicas existentes en el contenido de una pgina Web.
Puede utilizar etiquetas div para centrar bloques de contenido, crear efectos de
columna y crear diferentes reas de color, entre otras posibilidades.
Si no se est familiarizado con la utilizacin de etiquetas div y de hojas de estilos
en cascada (CSS) para crear pginas Web, puede crear un diseo CSS basado
en uno de los diseos predefinidos que se suministran con Dreamweaver.
Insertar una etiqueta div.
Se puede utilizar etiquetas div para crear bloques de diseo CSS e insertarlas
en el documento. Esto resulta til si se ha adjuntado al documento una hoja de
estilos CSS con estilos de posicin. Dreamweaver permite insertar rpidamente
una etiqueta div y aplicar a sta estilos existentes.
1. En la ventana de documento, sitar el punto de
insercin en el lugar donde se desea que aparezca
la etiqueta div.
2. Seguir uno de estos procedimientos:
99 Seleccionar Insertar > Objetos de diseo >
Etiqueta Div.
99 En la categora Diseo del panel Insertar, hacer
clic en el botn Insertar etiqueta Div.
3. Definir cualquiera de las opciones siguientes:
99 Insertar. Permite seleccionar la ubicacin de la
etiqueta div y el nombre de la etiqueta si no es
una etiqueta nueva.
99 Clase. Muestra el estilo de la clase aplicado
actualmente a la etiqueta. Si se ha adjuntado
una hoja de estilos, las clases de la hoja de
estilos aparecern en la lista. Utilizar este men
emergente para seleccionar el estilo que se desea
aplicar a la etiqueta.
99 ID. Permite modificar el nombre utilizado para identificar la etiqueta div. Si
se ha adjuntado una hoja de estilos, aparecern en la lista los ID definidos
en la hoja de estilos. No aparecen en la lista los ID de bloques que ya estn
en el documento.
99 Nueva regla CSS. Abre el cuadro de dilogo Nueva regla CSS.
61
4. Haz clic en Aceptar.
La etiqueta div tendr el aspecto de un cuadro en el documento con texto

de marcador de posicin. Al desplazar el puntero sobre el borde del cuadro,
Dreamweaver lo resaltar.
ACTIVIDAD 4
SD5-B2
En el centro de cmputo, en el programa Adobe Dreamweaver inserta una etiqueta div, donde
indiques el nombre completo y elabora una serie de pasos con dibujos detallados de cmo
hacerlo, si el espacio no es suficiente, elabora la actividad en hojas de cuaderno y pgalas en
este espacio para su valoracin.
62
Elabora pginas Web
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Saberes
C
Conceptual
Selecciona los elementos necesarios para implementar una Etiqueta Div.
Procedimental Practica el uso de Etiquetas Div para la elaboracin
de pginas web.
Actitudinal
Muestra inters en la realizacin de la prctica.
Puntos en lo
Puntos en lo
procedimental
actitudinal
Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos

APLICAR MAQUETACIN DE PGINAS WEB
Adobe Dreamweaver CS6 incorpora herramientas que le permiten crear pginas Web mediante tablas y marcos HTML. La aplicacin tambin incluye reglas, guas y una cuadrcula que permite disear pginas y colocar elementos
con precisin.
Establecer reglas.
Las reglas ayudan a medir, organizar y planificar el diseo. Pueden aparecer
en los bordes izquierdo y superior de la pgina, expresadas en pixeles, pulgadas o centmetros.
63
Establecer guas de diseo.

Las guas son lneas que pueden arrastrar sobre el documento desde las reglas. Con ellas
se pueden situar y alinear objetos de forma ms
precisa. Tambin se pueden utilizar guas para
medir el tamao de los elementos de la pgina o
emular los pliegues (reas visibles) de los navegadores Web.
Utilizar la cuadricula de diseo.
La cuadrcula muestra una serie de lneas horizontales y verticales en la ventana de documento. Resulta til para colocar objetos con
precisin. Puede hacer que los elementos de la
pgina con posicin absoluta se ajusten automticamente a la cuadrcula cuando los mueva
y cambiar la cuadrcula o controlar el comportamiento de ajuste especificando una configuracin. El ajuste funciona independientemente de
si la cuadrcula se encuentra o no visible.

IMPLEMENTAR TABLAS DE PGINAS WEB
Contextualizar el uso de las tablas en una
pgina Web.
Las tablas constituyen una herramienta muy eficaz
para presentar datos de tabla y establecer el diseo de
texto y grficos en una pgina HTML. Una tabla consta
de una o varias filas, cada una de las cuales consta, a
su vez, de una o ms celdas.
Aunque las columnas no suelen especificarse explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas y celdas.
Dreamweaver muestra el ancho de la tabla y de cada
columna cuando se selecciona una tabla o cuando el
punto de insercin est en ella. Junto a los anchos se
encuentran flechas para el men de encabezado de la
tabla y los mens de encabezado de las columnas.
64
Elabora pginas Web
Utilizar los mens para acceder rpidamente a

comandos relacionados con tablas, se pueden
activar o desactivar los anchos y los mens.
Si no se ve el ancho de una columna o de una
tabla, esta tabla o columna no tiene un ancho
especificado en el cdigo HTML. Si aparecen
dos nmeros, el ancho visual que aparece en la
vista de diseo no coincide con el ancho especificado en el cdigo HTML. Esto puede ocurrir al
cambiar el tamao de una tabla arrastrando la
esquina inferior derecha o al aadir contenido a
la celda cuyo ancho es superior al establecido.
Prioridad del formato en HTML.
A la hora de dar formato a tablas en la vista Diseo, puedes definir propiedades
que se apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de
la misma. Al definir el valor de una propiedad como, por ejemplo, el color de
fondo o la alineacin, para toda la tabla y otro valor para celdas individuales,
el formato de celda tiene prioridad sobre el formato de fila, que a su vez tiene
prioridad sobre el formato de tabla.
El orden de prioridad en el formato de tabla es el siguiente:
99 Celdas.
99 Filas.
99 Tabla.
Por ejemplo, si se establece un color de fondo azul para una sola celda y, a continuacin, se asigna el color de fondo de toda la tabla como amarillo, la celda
azul no cambiar a amarillo, ya que el formato de celda tiene prioridad sobre el
formato de tabla.
Utilizar la divisin y combinacin de celdas en la tabla.
Se podr combinar cualquier nmero de celdas contiguas, siempre que toda la
seleccin sea una lnea o un rectngulo de celdas, para obtener una sola celda
que se extienda a lo largo de varias columnas o filas. Una celda puede dividirse
en las filas o columnas que sean necesarias, aunque haya sido combinada anteriormente. Dreamweaver reestructura automticamente la tabla (aadiendo
los atributos que sean necesarios) para crear el diseo especificado.
En el siguiente ejemplo, las celdas
en la mitad de las dos primeras filas
se han combinado en una nica celda que ocupa dos filas.
65
Uso de tablas, en el diseo de pginas web.

1. Seleccionamos Crear nuevo HTML.
2. Seleccionar Clsico.
3. Seleccionar el cono de Tabla.
4. Para el tamao de la tabla, determinar primero el

nmero de filas y columnas, posteriormente indicamos el ancho de nuestra tabla, el grosor del borde,
relleno celda, espacio entre celdas y seleccionar el
encabezado.
5. Dar clic en el botn Aceptar y tenemos nuestra tabla de tres filas por cinco columnas.
66
Elabora pginas Web
6. Para llevar a cabo la combinacin de celdas

debemos primero seleccionarlas. En este caso en
particular seleccionar tres columnas y dar clic en
combinar celdas.
7. De la misma forma como se combinaron las
celdas del punto anterior, ahora se har con las
dos primeras celdas de la primera columna.
8. Insertar una imagen en el espacio formado por la

combinacin de las celdas del punto anterior. Antes
que nada es necesario identificar el icono de imagen.
A continuacin debemos indicar la ubicacin de la imagen.

Seleccionar la imagen y damos clic en el botn.
Aceptar, y escribir el texto alternativo y la descripcin larga.

De nuevo damos clic en el botn Aceptar, y de esta forma se obtiene una imagen
en las celdas seleccionadas.
Nota: Despus de insertar la imagen se deben mover

los tamaos de las celdas.
67
9. Insertar un texto, considerar

que en el punto seis combinamos
tres celdas de la primera fila, solo
que ahora adems se van a combinar las celdas la fila dos, para posteriormente insertar nuestro texto.
Antes se debe ajustar el tamao
de nuestras celdas.
Una vez que se haya el tamao de las celdas, se tiene listo el espacio para
insertar el contenido de la pgina web.
10. Insertar la informacin a la pgina web, posteriormente se podr utilizar la
Regla CSS para darle formato al contenido.
Nota: Para tener una vista previa pulsa la tecla F12.
68
Elabora pginas Web
ACTIVIDAD 5
SD7-B2
En equipos de tres, elaboren una pgina web informativa sobre el tema que el profesor les indique; as como el tiempo del cual dispondrn para lograrlo. Al finalizar debern exponerla ante el
grupo. Pegar en este espacio la ventana de Dreamweaver que muestra la exposicin.
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Saberes
C
Conceptual
Reconoce los elementos de una tabla.
Procedimental Practica el uso de tablas para la elaboracin de
pginas web.
Actitudinal
Muestra una actitud respetuosa durante su participacin en la exposicin.
Puntos en lo
Puntos en lo
procedimental
actitudinal
Coevaluacin
MC
NC
Sumatoria de
puntos obtenidos
69

UTILIZAR MARCOS
Contextualizacin de marcos en Dreamweaver.
Un marco es una zona de una ventana de navegador que puede mostrar un
documento HTML independiente de lo que se muestra en el resto de la ventana. Los marcos permiten dividir la ventana de un navegador en varias regiones,
cada una las cuales puede mostrar un documento HTML diferente. Por lo general, un marco muestra un documento que contiene controles de navegacin,
mientras que otro muestra un documento con contenido.
Un conjunto de marcos es un archivo HTML que define el diseo y las propiedades de un grupo de marcos, que incluyen el nmero, el tamao, la ubicacin
de los marcos y el URL de la pgina que aparece inicialmente en cada marco.
El archivo de conjunto de marcos no incluye el contenido HTML que se muestra en el navegador, excepto en la seccin no frames. El archivo nicamente
ofrece al navegador informacin sobre cmo debe mostrarse un conjunto de
marcos y los documentos que deben incluirse en los mismos.
Implementar marcos a la pgina Web.
Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo
de conjunto de marcos; el navegador abre entonces los documentos que deben
mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele
llamarse index.html. As, cuando el visitante no especifica ningn nombre de
archivo, este archivo se muestra de forma predeterminada.
GLOSARIO
Pixeles: es la menor unidad homognea en color que forma parte de una imagen digital.
70
Elabora pginas Web
En equipos de tres personas elaboren un video tutorial de la creacin de la pgina Web de la
actividad 5 correspondiente a este bloque.
Guardar el video con el nombre de Actividad 5 y entregarlo al profesor para su valoracin.
valoracin.
LISTA DE COTEJO PARA EVALUAR LA ACTIVIDAD

INTEGRADORA.

2.- El volumen es lo suficientemente alto para ser escuchado por todos
los miembros de la audiencia a lo largo de toda la grabacin.
5.- Habla clara y distintivamente todo y demuestra buena
pronunciacin.
7.- La entonacin es adecuada durante el desarrollo de toda la
grabacin.
8.- El trabajo tiene ortografa adecuada.
9.- Desarrolla la instruccin de la actividad al pie de la letra.
PARCIAL
TOTAL
71
REACTIVOS DE CIERRE
DESARROLLO DE REACTIVOS PROCEDIMENTALES
Subraya la opcin a la respuesta correcta.
Permite trabajar con el editor visual.
a) Vista de Diseo
b) Vista de Cdigo
c) Vista dividir
d) Vista HTML
Se utiliza para trabajar en un entorno totalmente de programacin.
a) Vista de Diseo
b) Vista de Cdigo
c) Vista HML
d) Vista CSS
Tipo de informe que permite comprobar si existen errores de cdigo o de
sintaxis.
a) Buscar
b) Referencia
c) Validacin
d) Compatibilidad
Tipo de informe que Permite buscar etiquetas, atributos y texto especfico
en las etiquetas.
a) Buscar
b) Referencia
c) Validacin
d) Compatibilidad
Fuentes Electrnicas
http://www.videotutoriales.es/tutorial-dreamweaver-cs6/videotutoriales-dreamweaver-cs6-web-movil.php
72
BLOQUE 3
Disea una pgina Web en Dreamweaver
Contenido
Aplicar elementos de la ficha de Diseo
a una pgina Web.
Implementar elementos de la ficha Formulario a la pgina Web.
Revisar y corregir la ortografa.
Importar un documento de Microsoft
Office.
Inicio
APLICAR ELEMENTOS DE LA FICHA DE DISEO A UNA PGINA WEB
PRESENTACIN DEL PROYECTO A DESARROLLAR DURANTE EL BLOQUE.
Ubica y explica cada uno de los elementos utilizados en Dreamweaver,

siguiendo al pie de la letra las instrucciones del facilitador, (en el men ventana
- texto y tablas - prrafo en donde al final a la izquierda se desactiva la casilla).
ACTIVIDAD 1
SD1-B3

Menciona tres elementos de diseo que maneja Adobe Dreamweaver.
_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
Define que es un Formulario en Dreamweaver.
________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
Cul es la funcin los botones en Dreamweaver?
________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
74
Elabora pginas Web
Evaluacin
Actividad: 1
Producto: Definicin de conceptos.
Puntaje:
Saberes
Conceptual
Reconoce los
elementos de diseo
de trabajo del
Dreamweaver
Autoevaluacin
Procedimental
Actitudinal
Analiza las funciones de los algunos

elementos de trabajo de Dreamweaver. actividad.
MC
NC
Calificacin otorgada por el

docente.
Coevaluacin
Estrategia Didctica
Dreamweaver permite acceder y tratar datos XML empleando su tecnologa
Spry.
Spry se compone de un conjunto de archivos codificados en JavaScript que
se aadirn a tu proyecto desde el momento en que se comiencen a utilizar.
Dreamweaver avisar de la creacin de una nueva carpeta en el sitio que contendr los archivos necesarios para la ejecucin de las funciones que se vern
a continuacin.
Todos los comandos que se van a utilizar son accesibles desde el men Insertar Spry o desde el panel Insertar seleccionado Spry:
BLOQUE 3 Disea una pgina Web en Dreamweaver
75
Insertar barra de men Spry.

Se pueden crear mens de forma muy sencilla haciendo clic en Insertar
Spry Barra de mens de Spry:
El primer cuadro de dilogo que encontraremos ser el siguiente:
Aqu se puede seleccionar el diseo para hacer el men, pulsando clic en Horizontal o Vertical y presionar el botn Aceptar.
Se crear automticamente el men, que se podr visualizar desde la vista de
Diseo de esta forma:
76
Elabora pginas Web
Haciendo clic en la cabecera azul Barra de mens de Spry se podr ver en el

panel Propiedades las opciones necesarias para configurar nuestro men:
La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles diferentes, as que en principio la primera tarea ser definir el primer nivel.
Esto se har desde el primer cuadro de listado. IMG083, IMG084
Aadir y quitar elementos es tan fcil como utilizar los botones + , y se
pueden reorganizar luego utilizando las flechas
. Cada uno de estos elementos puede ser modificado para que muestren el texto que se desee, se har
desde las cajas de texto que se encuentran a la derecha.
En Texto escribir el literal que se desee que se lea en el men. Si ese elemento
debe contener un enlace (a una pgina o a un correo electrnico) se har escribiendo en la caja de texto Vnculo. Si se trabaja en una pgina con marcos
se podr utilizar el campo Destino para establecer en cul de ellos se abrir el
enlace.
Por ltimo, Ttulo contendr una ayuda contextual que se mostrar en forma de
etiqueta al colocar el ratn sobre el elemento del men. Una vez definido el
primer nivel, crear los hijos de cada elemento. Seleccionar uno de los tems y
crear las opciones que se desplegarn al colocar el ratn sobre ellos. De nuevo
utiliza los botones +
y
para gestionar los elementos en el segundo
listado.
Seleccionar cada uno de los elementos de primer
nivel e ir creando sus subelementos uno a uno.
Al final, dependiendo de lo complejo del men, puede resultar muy difcil ver su estructura o recorrer
sus elementos. Adems, puede que se haya aadido algn estilo CSS que Dreamweaver no interpreta
como toca. En estos casos, resulta muy til la opcin Desactivar estilos, que mostrar el HTML real
del men: una lista con enlaces.
Paneles de fichas de Spry
Se puede crear un control como el que mostramos a continuacin haciendo clic
en Insertar Spry Paneles en fichas de Spry:
77
Para crear un control como el que se

muestra a continuacin hacer clic en
Insertar Spry Paneles en fichas
de Spry:
Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la navegacin y son muy tiles para organizar la informacin y no congestionar la pgina ni al usuario.
Seleccionando el control haciendo clic en la cabecera azul se ver lo siguiente
en el panel Propiedades:
Desde aqu podr aadir tantas fichas como se desee y ordenarlas utilizando
los botones + y
.
Luego seleccionar el Panel predeterminado que es el que se mostrar por delante cuando se visualice la pgina en el explorador, antes de que el usuario
haya pulsado alguna de las fichas.
Para modificar los ttulos de ficha simplemente cambia el nombre desde la vista
de Diseo.
Se puede modificar su contenido normalmente incluyendo todo tipo de tablas,
imgenes o elementos que se hayan visto hasta ahora. Para pasar del contenido de una ficha a otra colocar el ratn sobre ella y haz clic sobre el cono con
forma de ojo que aparecer:
Luego modificar el contenido del panel abierto.

Recordar que el panel que se visualizar primero en la pgina es el que se elige
como predeterminado en el panel Propiedades.
78
Elabora pginas Web
Acorden Spry
Otro control avanzado que utiliza las ventajas de AJAX y que Spry permite utilizar el Acorden:
Este control es tan sencillo de configurar que en el panel Propiedades:
Aadir y organizar las secciones utilizando los botones

y
. Y luego simplemente editar el conte+
nido de cada una de ellas y su nombre en la cabecera.
Del mismo modo que con las pestaas para ver el contenido de una seccin coloca el ratn sobre su cabecera y hacer clic sobre el icono con forma de ojo que
aparecer:
Paneles que pueden contraerse de Spry.
Para insertar un panel de este tipo slo se tiene que hacer clic en Insertar
Spry Panel que puede contraerse de Spry.
En el panel Propiedades se podr ver sus opciones de configuracin:
Desactivando la opcin Activar animacin se eliminar la animacin que se produce al contraer

el panel. Esta opcin solo afecta al comportamiento de apertura o cierre y no tiene mucha
ms trascendencia.
79
Se puede decidir si el pnel se muestra inicialmente abierto o cerrado en la

pgina seleccionando el estado en el desplegable Estado predeterminado. Del
mismo modo, si mientras trabajas en vista de Diseo te molesta que est abierto se puede cerrar haciendo clic en el desplegable Mostrar y seleccionando
Cerrado.
Esto ltimo tambin se puede hacer pulsando sobre el cono del ojo que aparecer en la cabecera del panel si sitas el ratn sobre ella.
IMPLEMENTAR ELEMENTOS DE LA FICHA FORMULARIO A LA PGINA WEB
ACTIVIDAD 2
SD2-B3
En equipo de tres, elaborar una presentacin ppt donde definas y ejemplifiques con imgenes copiadas de Dreamweaver los siguientes conceptos:
Insertar barra de men Spry.
Pneles de fichas de Spry.
Acorden Spry
Pneles que pueden contraerse de Spry.
Guardar la presentacin en CD y entregarla al profesor para su valoracin.
Conclusin Individual
_______________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
80
Elabora pginas Web
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Saberes
Identifica los elementos de diseo spry a una pgina web en
Conceptual
Dreamweaver.
Practica los elementos de diseo spry en el programa
Procedimental
Dreamweaver.
Muestra una actitud positiva y responsable en la elaboracin
Actitudinal
de la actividad.
Coevaluacin
C
MC NC

Puntos en lo procedimental
Puntos en lo actitudinal
Sumatoria de
puntos obtenidos
Es fundamental crear un formulario que contenga los elementos necesarios.

As, cuando hagamos clic en Enviar solo se mandarn los datos de estos elementos.
Puedes crear formularios a travs del men Insertar Formulario, opcin Formulario, o desde el panel Insertar.
Una vez creado un formulario, este aparecer en la ventana de Dreamweaver
como un recuadro formado por lneas naranjas discontinuas, similar al de la
imagen siguiente.
Estas lneas son ayudas visuales al trabajar en diseo, pero no se vern en el

formulario final.
Entre las propiedades del formulario, encontramos el campo Accin. En el indicamos a dnde se envan los datos. Normalmente, una pgina PHP que se
encarga de tratarlos.
81
Dentro de dicho formulario se podrn insertar los elementos, que como ya sabes puedes insertar a travs del men colocar, opcin Formulario o desde el
panel Insertar.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos, lo
que facilita su comprensin y mejora su apariencia.
Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos emplear el selector form.
rea de texto.
Un rea de texto es una ventana que permite al usuario introducir mltiples
lneas de texto.
Para insertar un rea de texto, podemos hacerlo desde la opcin rea de texto del submen formulario, que encontramos en el men Insertar.
82
Elabora pginas Web
O bien podemos pulsar en el botn rea de texto en la barra de formulario,

del panel insertar.
Tambin podemos simplemente insertar un campo de texto de una lnea, como

ya hemos visto, y en el panel propiedades pulsar la opcin varias lneas.
Casilla de verificacin.
Una casilla de verificacin es un pequeo cuadrado que el usuario de nuestra
pgina puede activar o desactivar con un simple clic. Cuando la casilla de verificacin est activada, una marca aparecer en su interior. Si la desactivamos,
o no la activamos, la casilla aparecer vaca.
Utilizaremos las casillas de verificacin cuando queramos ofrecer a nuestros
visitantes la posibilidad de que elijan ninguna, una, o varias opciones entre las
que hayamos creado.
Para insertar una casilla de verificacin elegiremos la opcin Casilla de verificacin del submen Formulario, del men Insertar.
O pulsando en el botn Casilla de verificacin en la barra Formulario del panel

Insertar.
83
En el panel propiedades podemos configurar las opciones para las casillas de

verificacin.
La primera es el Nombre de la casilla", para poder manejar correctamente los

valores deberemos darle un nombre que el navegador pueda enviar al servidor.
A continuacin vemos la propiedad "Valor activado", con el valor anterior le
decimos qu valor enviamos al servidor, y con este le decimos el contenido del
valor que recibir el servidor cuando la casilla est activada.
Por ltimo con el "valor inicial", decidimos que la casilla aparezca marcada o
no, cuando es visitada la pgina por el usuario, de esta manera podemos ayudarle sugiriendo la respuesta.
Grupo de casillas de verificacin.
Son cuadros de opciones para activar y desactivar varios cuadritos o casillas y
se encuentra tambin en el rea de formulario.
84
Elabora pginas Web
Botn opcin.
Un botn de opcin, es un elemento redondo que el usuario puede activar o
desactivar. Cuando el botn de accin est activo, aparece relleno, y est vaco
cuando est desactivo.
Los botones de opciones se utilizan cuando queremos presentar al usuario una
lista breve de opciones mutuamente excluyentes, por ejemplo si tiene que elegir el da de la semana que naci. Solo un botn pude ser seleccionado cada
vez. Si pulsamos uno de ellos, se marcar, pero si marcamos cualquier otro el
primero se desactivar.
Podemos insertar cuantos botones necesitemos, y podemos hacerlo tanto uno
a uno, como insertarlos todos en grupo.
Insertando un nico botn de opcin.
Para insertar un nico botn de opcin, podemos pulsar la opcin botn de
opcin del submen formulario, en el men insertar.
O bien pulsar el icono del botn opcin en la barra de frmulas del men
insertar.
A continuacin se pueden ver ahora las opciones del panel propiedades.
En el campo botn de opcin se declarar el nombre del botn de manera

predeterminada, cuando se crea un botn de opcin Dreamweaver le asigna
el nombre radiobutton.
85
En el campo valor activado, escribiremos el valor que deseemos que el navegador enve al servidor cuando el usuario pulse en el botn opcin.
Por ltimo, en la opcin estado inicial, se debe especificar si queremos que
el botn de opcin aparezca activado o desactivado cuando se muestra el formulario grupos.
Grupo de opcin.
Los botones de opcin alcanzan su verdadera dimensin cuando se utilizan en
grupos, permitindonos elegir activar slo uno cada vez de entre las posibles
opciones.
Para insertar un grupo de una sola vez, pulsaremos la opcin grupos de opciones del submen formulario, del men insertar.
O bien pulsaremos el botn grupo de opciones de la barra de formularios,

del panel insertar.
Cuando pulsemos el botn, aparecer una caja de dilogos titulada grupo de

opciones. Teclearemos el nombre del grupo en el campo nombre.
Todos los botones de opcin del mismo grupo debern tener el mismo nombre,
ya hemos visto que los botones de opcin son excluyentes. De manera que si
utilizamos distintos nombres para los botones de opcin de un mismo grupo,
el navegador no podr saber si la respuesta hace referencia a un solo botn o
a todos.
86
Elabora pginas Web
Deberemos teclear tambin una etiqueta para cada uno de los botones opcin
en la lista Label, y aadiremos un valor de activacin para botn en la lista
value.
Se pueden aadir tantas opciones como se necesiten, simplemente incluir ms
botones pulsando en el signo ms.
Para quitar algn botn slo tenemos que situarnos sobre la opcin que deseemos eliminar y pulsar el botn menos.
Dreamweaver permite ordenar las opciones en el cuadro de dilogo de forma

muy sencilla, slo se tiene que situar sobre cada una de ellas y desplazarla con
las flechas hasta la posicin en que se desee aadir cada una de ellas en el
grupo.
Con la ltima opcin del cuadro de dilogo seleccionar la forma en que
Dreamweaver organizar los botones en pantalla. Se puede utilizar una tabla,
en la que cada botn ocupar una celda, o bien recurrir la opcin <br>que
permita organizar los botones sin utilizar tablas.
Lista/men.
Otro de los elementos de los formularios son las listas, con
ellas podemos mostrar a los usuarios, varias opciones simultneamente. Y podemos permitir al usuario seleccionar
varios elementos de la lista a la vez.
Desde el mismo lugar podemos crear mens de opciones. En
los mens de opciones cuando pulsamos sobre la ventana
que lo contiene se despliega un men con todas las opciones
posibles. La diferencia con las listas, es que en los mens el
usuario slo puede elegir una opcin de entre las posibles.
Es mejor utilizar las listas y los mens en los casos en que las opciones son
numerosas, y en cambio elegiremos usar los botones de opcin y las casillas
de verificacin cuando el nmero de opciones posibles sea ms reducido.
Para insertar un men o una lista deberemos elegir la opcin Lista/men del
submen Formulario del men Insertar.
87
O bien pulsar el botn Lista/men de la barra Formulario del panel Insertar.
Men de salto.
Aunque este comportamiento se encuentra en el listado del panel Comportamientos vamos a aprender a insertarlo desde otro lugar ya que te ser ms
fcil.
Un men de salto no es ms que un men desplegable desde el que puedes
saltar de una pgina a otra con slo seleccionar la opcin correspondiente en
el men. Justo al principio del apartado tienes un ejemplo (no es funcional pero
puedes desplegarlo para hacerte una idea) que ilustra el aspecto que tendra
este tipo de mens.
Insertarlo es muy sencillo, solo tienes que hacer clic en Insertar, seleccionar la
opcin Formulario y en el desplegable elegir Men de salto.
Se abrir este cuadro de dilogo:
88
Elabora pginas Web
Para crear el men debers introducir los elementos (opciones) que lo forman.
Para ello escribe en Texto el ttulo de la pgina y en al seleccionarse, ir a URL
la ruta de la pgina que se tiene que abrir si el usuario selecciona esta opcin
del men.
Una vez rellenados estos campos, haz clic en el botn + .
Luego repite el proceso tantas veces como elementos en el men quieras insertar.
Cuando se haya acabado decidir en qu ventana se quieren abrir los enlaces
en Abrir URL: y dar un nombre al men.
Luego puedes marcar la opcin Seleccionar primer elemento tras el cambio de URL para que
cuando se abra la ventana el elemento del men
que se muestre sea el primero.
Djalo desmarcado si quieres que se muestre el
de la pgina que se est visualizando.
Luego marca la opcin Insertar botn Ir tras el men para que se aada un
botn al formulario.
Si escoges esta opcin vers que se crea un men como el que tienes justo
sobre este prrafo.
El funcionamiento de este men de salto es muy parecido al anterior, slo que
una vez seleccionada la pgina que mostrar hay que pulsar el botn para que
se efecte el salto.
Campo de imagen.
Un campo oculto es un elemento de formulario no visible, que contiene informacin que slo podr ver el servidor, por ejemplo si queremos fijar ciertos
valores que no sean visible para el usuario pero que si se utilice al enviar la
informacin al servidor, por ejemplo una direccin de correo electrnico.
El usuario podr mandar el formulario por mail a una direccin que nosotros
especifiquemos.
Esta, aunque es una buena forma de dar un aspecto profesional a nuestros
formularios, no es una buena idea para manejar datos sensibles o privados, ya
que al visualizar el cdigo fuente de la pgina cualquiera podra ver el valor de
estos campos.
89
Para insertar un campo oculto elegiremos la opcin campo oculto del submen formulario en el men insertar.
O bien pulsar en el botn campo oculto de la barra formulario en el panel

insertar.
Las opciones del panel propiedades para el campo oculto resultan sencillas,
ya que son solamente dos, la primera opcin es donde asignaremos el nombre
al campo oculto.
Y en el segundo escribiremos el Valor que le asignar al campo para ser enviado al servidor.
Por ltimo veremos que Dreamweaver maneja de
una forma nueva el campo oculto, lo muestra con una
imagen de un escudo amarillo, si pulsamos sobre ese
cono veremos las propiedades del campo.
Campo de archivo.
Los campos de archivos son los elementos de formularios que permiten al
usuario adjuntar y enviar un archivo a travs del formulario hasta el servidor.
Con el campo de archivo podemos buscar, navegando por las distintas carpetas del ordenador hasta encontrar el archivo que deseamos adjuntar.
Para insertar un campo de archivo pulsar la opcin campo de archivo, en el
submen formulario de el men insertar.
90
Elabora pginas Web
O pulsar el botn campo de archivo, de la barra formulario del panel

insertar.
El usuario puede usar el campo de archivo, para navegar por el ordenador

hasta encontrar el archivo. O bien, si conoce la ubicacin y el nombre del archivo, simplemente podr escribirlo directamente en el campo.
Ver ahora las opciones del panel propiedades de los campos de archivos.
El primer campo, campo archivo, es el nombre que se le dar al campo de

archivo activo. Tras darle un nombre descriptivo, se puede dar en el campo
Ancho en caracteres, en este campo se fija el ancho del campo.
La ltima opcin caracteres mximos permite especificar el mximo nmero de caracteres que aceptaremos en el campo, de manera que slo tendremos
en cuenta hasta los caracteres que se fijen. Esta opcin no se utiliza habitualmente debido a que no podemos saber la longitud de la ruta o del nombre del
fichero que el usuario utilizar.
Si se decide no utilizar esta opcin, simplemente deberemos dejar este campo

en blanco, sin darle ningn valor.
91
Botn.
Un botn es un elemento de formulario que el usuario pulsar para realizar una
accin.
Para insertar el botn se debe elegir la opcin Botn en el submen Formulario de el men Insertar.
O bien pulsar en el icono Botn de la barra Herramienta en el panel Insertar.
Como en ocasiones anteriores a este elemento tambin se debe asignar un

nombre que le identifique.
En el Panel de propiedades se establece su nombre en el campo Nombre del
botn.
La siguiente opcin es la Etiqueta del botn. Es decir aqu se introduce el ttulo que mostrar el botn cuando se muestre en el formulario. Es importante que
la etiqueta sea descriptiva para que el usuario identifique claramente la funcin
del botn, y qu ocurrir cuando lo pulse.
Finalmente en la zona de la derecha tenemos las opciones de las posibles acciones que se pueden asignar a los botones.
Botn enviar.
Un botn enviar, enva como su propio nombre indica, la informacin del formulario al servidor. Este botn suele situarse al final del formulario para que el
usuario lo pulse cuando haya acabado de rellenarlo.
92
Elabora pginas Web
Botn restablecer formulario.

El botn restablecer formulario borra los valores introducidos en todos los elementos del formulario y restablece su estado predefinido. Este es un botn
opcional, por norma general es conveniente presentarlo cuando utilicemos formularios extensos y queramos darle la oportunidad al usuario de reiniciar el
formulario devolvindolo a su estado inicial.
Etiqueta.
Se utiliza para ponerle nombres al resto de elementos de formulario, para que
el usuario pueda saber qu datos ha de introducir en cada uno de ellos.

REVISAR Y CORREGIR LA ORTOGRAFA.
Utilizar el comando Ortografa
para revisar la ortografa del documento actual. El comando Ortografa no tiene en cuenta las
etiquetas HTML ni los valores de
atributo.
De forma predeterminada, el corrector ortogrfico utiliza el diccionario de ingls de Estados Unidos. Para cambiar el diccionario, seleccionar
Edicin > Preferencias > General (Windows) o Dreamweaver > Preferencias >
General (Macintosh) y, a continuacin, seleccionar el diccionario que se desea
utilizar en el men emergente Diccionario ortogrfico.
93
ACTIVIDAD 3
SD3-B3
En el centro de cmputo, en binas, utilizando el programa Dreamweaver practica cada uno de

los siguientes elementos de Formulario:
rea de texto.
Casilla de verificacin.
Grupo de casillas de verificacin.
Botn de opcin.
Grupo de opcin.
Lista/men.
Men de salto.
Campo de imagen.
Campo de archivo.
Botn.
Etiqueta.
Al terminar la prctica de los elementos, avisa a tu facilitador para que valore el funcionamiento
de cada uno.
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Coevaluacin
Saberes
C
MC NC
Conceptual
Reconoce la ubicacin de los elementos de la ficha Formulario
del programa Dreamweaver.
Procedimental Practica el funcionamiento de los elementos de la ficha
Formulario del programa Dreamweaver.
Actitudinal
Lleva a cabo las instrucciones sugeridas por la actividad y
profesor.
94
Puntos en lo
procedimental
Sumatoria de
puntos obtenidos
Elabora pginas Web

IMPORTAR DATOS DE TABLA
Puede importar datos de tabla en el documento guardando en primer lugar los archivos (por ejemplo, archivos
de Microsoft Excel o archivos
de base de datos) en formato de texto delimitado.
Se puede importar y aplicar formato a datos de tabla e importar texto de documentos HTML de Microsoft Word.
Tambin se puede aadir texto de documentos de Microsoft Excel a un documento de Dreamweaver importando el contenido del archivo de Excel en una
pgina Web.
99 Seleccionar Archivo > Importar> Importar datos de tabla o bien Insertar >
Objetos de tabla > Importar datos de tabla.
99 Localizar el archivo deseado o introduzca su nombre en el cuadro de texto.
99 Seleccione el delimitador empleado cuando se guard el archivo como texto
delimitado. Las opciones disponibles son: Tabulacin, Coma, Punto y coma,
Dos puntos y Otro.
99 Si se selecciona Otro, aparecer un campo en blanco al lado de la opcin,
Introduzca el carcter empleado como delimitador.
99 Utilizar las restantes opciones para aplicar formato o definir la tabla en la que
se importarn los datos y haga clic en Aceptar.

IMPORTAR UN DOCUMENTO DE MICROSOFT OFFICE
Se puede insertar contenido
de un documento de Microsoft Word o Excel a una pgina Web nueva o existente.
Al importar un documento de
Word o Excel, Dreamweaver
recibe el HTML convertido y lo inserta en la pgina Web.
El tamao de archivo, una vez que Dreamweaver recibe el HTML convertido,
debe ser inferior a 300 KB. En lugar de importar todo el contenido de un archivo, tambin es posible pegar fragmentos de un documento de Word y conservar el formato.
95
ACTIVIDAD 4
SD5-B3
En equipos de tres, elaboren un mapa conceptual donde se explique detalladamente el proceso

para llevar a cabo cada uno de los siguientes conceptos en Dreamweaver.
Revisar y corregir la ortografa.
Importar un documento de Microsoft Office.
Imprimir y pegar el mapa conceptual en esta rea para su valoracin.
Conceptual
Rbrica de Evaluacin
rea del evaluador
Procedimental
Actitudinal

Autoevaluacin
Coevaluacin
Saberes
C
MC NC
Reconoce y ubica los elementos de ortografa e importacin en
Conceptual
el programa Dreamweaver.
Elabora un mapa conceptual mostrando el proceso de desaProcedimental rrollo dentro del programa de Dreamweaver los elementos de
ortografa e importacin.
Muestra una actitud respetuosa durante su participacin en la
Actitudinal
exposicin.
96
Puntos en lo
procedimental
Sumatoria de
puntos obtenidos
Elabora pginas Web
En equipos de tres personas elaboren un video tutorial de la creacin de la pgina Web de la
actividad 5 correspondiente a este bloque.
Guardar el video con el nombre de Actividad 5 y entregarlo al profesor para su valoracin.
valoracin.
LISTA DE COTEJO PARA EVALUAR LA ACTIVIDAD INTEGRADORA.

2.- El volumen es lo suficientemente alto para ser escuchado por todos
los miembros de la audiencia a lo largo de toda la grabacin.
5.- Habla clara y distintivamente todo y demuestra buena pronunciacin.
7.- La entonacin es adecuada durante el desarrollo de toda la grabacin.
8.- El trabajo tiene ortografa adecuada.
9.- Desarrolla la instruccin de la actividad al pie de la letra.
PARCIAL
TOTAL
97
REACTIVOS DE CIERRE
Subraya la respuesta correcta.
Es una ventana que permite al usuario introducir mltiples lneas de texto.
A) rea de texto.
B) Casilla de verificacin.
C) Botn de opcin.
D) Lista/Men.
Es un pequeo cuadrado que el usuario de nuestra pgina puede activar o desactivar con un
simple clic.
A) rea de texto.
C) Botn de opcin.
D) Lista/Men.
Se utilizan cuando queremos presentar al usuario una lista breve de opciones mutuamente
excluyentes.
A) rea de texto.
C) Botn de opcin.
D) Lista/Men.
Con ellas podemos mostrar a los usuarios, varias opciones simultneamente. Y podemos
permitir al usuario seleccionar varios elementos de la lista a la vez.
A) rea de texto.
C) Botn de opcin.
D) Lista/Men.
98
Elabora pginas Web
Fuentes Electrnicas
https://helpx.adobe.com/es/dreamweaver/using/text.html
99
MIS NOTAS:
100
Elaborar pginas Web
MIS NOTAS:
101
MIS NOTAS:
102
Elaborar pginas Web
MIS NOTAS:
103
MIS NOTAS:
104

Elabora Paginas Web

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Elabora Paginas Web

Caricato da

Copyright:

Formati disponibili

6

Elabora pginas web

COLEGIO DE BACHILLERES DEL ESTADO DE SONORA

DATOS DEL ALUMNO

Una competencia es la integracin de habilidades, conocimientos y actitudes en un contexto especfico.

Presentacin del libro .......................................................................................................................

Glosario Icnico ................................................................................................................................

Normas Tcnicas de Competencia Laboral .........................................................................................

Descripcin de la Capacitacin para el Trabajo ..................................................................................

Competencias Profesionales de Egreso ..............................................................................................

Mapa de Contenido ..........................................................................................................................

Introduccin al programa Dreamweaver ............................................................... 13

Utilizar el entorno de trabajo de Dreamweaver ..................................................... 45

Disea una pgina Web en Dreamweaver. ............................................................. 73

Con este grfico identificars las Actividades dentro

En este apartado encontrars la Evaluacin de

cono de Coevaluacin, donde debers evaluar a tu

EVALUACIN DE LA ACT. INT.

Con esta ilustracin localizaremos el Glosario, ya sea

acin para el Trabajo

COMPETENCIAS PROFESIONALES DE EGRESO

Utiliza procedimientos y herramientas para el desarrollo de documentos

Soluciona problemas tcnicos sobre la configuracin de hardware y software

Interpreta y aplica documentacin tcnica en la instalacin, mantenimiento y

Instala y configura hardware y software de un sistema de cmputo conforme a

Aplica mantenimiento preventivo de hardware y software.

Implementa sistemas bsicos de seguridad informtica para mantener la

Aplica el mantenimiento correctivo de hardware y software.

Instala, opera y mantiene software de sistemas operativos y aplicacin.

Ensambla hardware de un equipo de cmputo conforme a las reglas de

Elabora pginas WEB con animaciones interactivas de aplicacin general y

Crear una pgina Web con

Disear una Pgina Web.

Identificar los elementos

Disea una pgina Web en

Introduccin al programa Dreamweaver

Tiempo Asignado: 10 horas

Capacitacin para el Trabajo: Informtica

PRESENTACIN DEL PROYECTO A DESARROLLAR DURANTE EL

De manera individual responde los siguientes cuestionamientos:

Colegio de Bachilleres del Estado de Sonora

Elabora pginas Web

BLOQUE 1 Introduccin al programa Dreamweaver

Capacitacin para el Trabajo: Informtica

Colegio de Bachilleres del Estado de Sonora

Elabora pginas Web

3) Diseo de las pginas Web. Elije el diseo ms apropiado, o combina las

BLOQUE 1 Introduccin al programa Dreamweaver

Capacitacin para el Trabajo: Informtica

6) Configuracin de una aplicacin Web para

Colegio de Bachilleres del Estado de Sonora

Elabora pginas Web

BLOQUE 1 Introduccin al programa Dreamweaver

Capacitacin para el Trabajo: Informtica

Marca con una X el tipo de evaluacin

Arrancar y cerrar Dreamweaver

Colegio de Bachilleres del Estado de Sonora

Elabora pginas Web

Al iniciar el programa Adobe Dreamweaver se inicia la siguiente pantalla de

Abrir y Guardar documentos

BLOQUE 1 Introduccin al programa Dreamweaver

Capacitacin para el Trabajo: Informtica

Para Guardar un documento, puedes utilizar cualquiera de las siguientes