FCPT 6 Selaborapaginasweb

QUERIDOS JVENES:
Siempre he pensado que la juventud constituye una de las etapas ms importantes en el desarrollo del
ser humano; es la edad donde forjamos el carcter y visualizamos los ms claros anhelos para nuestra
vida adulta. Por eso, desde que so con dirigir los destinos de nuestro estado, me propuse hacer
acciones concretas y contundentes para contribuir al pleno desarrollo de nuestros jvenes sonorenses.
Hoy, al encontrarme en el ejercicio de mis facultades como Gobernadora Constitucional del Estado de
Sonora, he retomado los compromisos que contraje con ustedes, sus padres y en general con las y los
sonorenses cuando les solicit su confianza para gobernar este bello y gran estado. Particularmente
luchar de manera incansable para que Sonora cuente con Escuelas formadoras de jvenes
innovadores, cultos y con vocacin para el deporte. Este esfuerzo lo har principalmente de la mano
de sus padres y sus maestros, pero tambin con la participacin de importantes actores que
contribuirn a su formacin; estoy segura que juntos habremos de lograr que ustedes, quienes
constituyen la razn de todo lo que acometamos, alcancen sus ms acariciados sueos al realizarse
exitosamente en su vida acadmica, profesional, laboral, social y personal.
Este mdulo de aprendizaje que pone en sus manos el Colegio de Bachilleres del Estado de
Sonora, constituye slo una muestra del arduo trabajo que realizan nuestros profesores para
fortalecer su estudio; aunado a lo anterior, esta Administracin 2015-2021 habr de
caracterizarse por apoyar con gran ahnco el compromiso pactado con ustedes. Por tanto, mis
sueos habrn de traducirse en acciones puntuales que vigoricen su desarrollo humano,
cientfico, fsico y emocional, adems de incidir en el manejo exitoso del idioma ingls y de las
nuevas tecnologas de la informacin y la comunicacin.
Reciban mi afecto y felicitacin; han escogido el mejor sendero para que Sonora sea ms prspero:
la educacin.
LIC. CLAUDIA ARTEMIZA PAVLOVICH ARELLANO

GOBERNADORA CONSTITUCIONAL DEL ESTADO DE SONORA
INFORMTICA
6
SE XTO SEM E S T R E
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
Director de Vinculacin e Imagen Institucional

Lic. Jos Luis Argelles Molina
ELABORA PGINAS WEB

Mdulo de Aprendizaje.
Copyright 2015 por Colegio de Bachilleres del Estado de Sonora.
Todos los derechos reservados.
Primera edicin 2015.
Primera reimpresin 2016. 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:
Jess Ramn Franco Hernndez
Mara Jess Jimnez Duarte
Fotografa de portada:
Estefana Bringas Limn
Banco de imgenes:
Shutterstock
Coordinacin tcnica:
Rubisela Morales Gispert
Supervisin acadmica:
Vanesa Guadalupe Angulo Bentez
Coordinacin general:
Laura Isabel Quiroz Colossio
Esta publicacin se termin de imprimir durante el mes de diciembre de 2016.

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,362 ejemplares.
COMPONENTE: CAPACITACIN PARA EL TRABAJO:
FORMACIN PARA INFORMTICA
EL TRABAJO
HORAS SEMANALES: CRDITOS:

3 6
DATOS DEL ALUMNO
Nombre:
Plantel:
Grupo: Turno: Telfono:
E-mail:
Domicilio:
PRELIMINARES 3
El Colegio de Bachilleres del Estado de Sonora (COBACH), desde la implementacin de la Reforma Integral de
la Educacin Media Superior en 2007, de forma socialmente responsable, dio inicio a la adecuacin de su Plan
de estudios y a sus procesos de enseanza aprendizaje y de evaluacin para reforzar su modelo de Educacin
Basada en Competencias, y as lograr que pudieran sus jvenes estudiantes desarrollar tanto las competencias
genricas como las disciplinares, en el marco del Sistema Nacional del Bachillerato.
Este modelo por competencias considera que, adems de contar con conocimientos, es importante el uso que
se hace de ellos en situaciones especficas de la vida personal, social y profesional. Dicho de otra forma, el ser
competente se demuestra cuando, de forma voluntaria, se aplican dichos conocimientos a la resolucin de
situaciones personales o a la adquisicin de nuevos conocimientos, habilidades y destrezas, lo que hace que se
refuerce la adquisicin de nuevas competencias.
En ese sentido el COBACH, a travs de sus docentes, reestructura la forma de sus contenidos curriculares y lo
plasma en sus mdulos de aprendizaje, para facilitar el desarrollo de competencias. En el caso del componente
de Formacin para el Trabajo, adems de las competencias genricas, fortalece el sentido de apreciacin hacia
procesos productivos, porque aunque el bachillerato que te encuentras cursando es general y te prepara para
ir a la universidad, es importante el que aprendas un oficio y poseas una actitud positiva para desempearlo.
De tal forma que, este mdulo de aprendizaje de la asignatura de Elabora pginas web, es una herramienta
valiosa porque con su contenido y estructura propiciar tu desarrollo como persona visionaria, competente
e innovadora, caractersticas que se establecen en los objetivos de la Reforma Integral de Educacin Media
Superior.
El mdulo de aprendizaje es uno de los apoyos didcticos que el COBACH te ofrece con la finalidad de garantizar
la adecuada transmisin de saberes actualizados, acorde a las nuevas polticas educativas, adems de lo que
demandan los escenarios local, nacional e internacional. En cuanto a su estructura, el mdulo se encuentra
organizado en 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 de tus actividades debers utilizar diversos recursos, desde material bibliogrfico, videos,
investigacin de campo, etctera; as como realizar actividades prcticas de forma individual o en equipo.
4 PRELIMINARES
La retroalimentacin de tus conocimientos es de suma importancia, de ah que se te invita a participar de
forma activa cuando el docente lo indique, 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 que la evaluacin en el enfoque en competencias es un proceso continuo, que permite recabar
evidencias a travs de tu trabajo, donde se tomarn en cuenta los tres saberes: conceptual, procedimental y
actitudinal, con el propsito de que apoyado por tu maestro mejores el aprendizaje. Es necesario que realices
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.
Finalmente, se destaca que, en este modelo, tu principal contribucin es que adoptes un rol activo y
participativo para la construccin de tu propio conocimiento y el desarrollo de tus competencias, a travs de
lo que podrs dar la respuesta y la contextualizacin adecuadas para resolver los problemas del entorno a los
que te enfrentes, ya sean personales o profesionales.
PRELIMINARES 5
El glosario icnico es la relacin de figuras que encontrars en diversas partes de tu mdulo. Enseguida, se
muestran junto con su definicin, lo que te orientar sobre las actividades que debers realizar durante el
semestre en cada una de tus asignaturas.
EVALUACIN DIAGNSTICA COEVALUACIN

Este tipo de evaluacin se hace con uno o varios de tus
Se trata de la evaluacin que se realizar al inicio de cada compaeros, en ella t los evalas y ellos a ti. Les permite,
secuencia didctica y que te permitir estar consciente de adems de valorar sus aprendizajes, colaborar y aprender
tus conocimientos acerca del tema que abordars. unos de otros.
ACTIVIDAD INTEGRADORA
RBRICA DE EVALUACIN
Esta actividad resume los conocimientos adquiridos
durante un proceso, ya sea una secuencia didctica, un La rbrica es una tabla que contiene niveles de logro
bloque o lo visto en un semestre completo. Es la suma o desempeo especificados en estndares mnimos
terica y prctica de tus conocimientos y es til para y mximos de la calidad que deben tener los diversos
fortalecer tu aprendizaje. elementos que componen un trabajo. Sirve como gua
para saber qu debe contener un trabajo y cmo debe
Individual ser realizado.
ACTIVIDAD 1 Equipo Grupal
SD1-B1
Con este grfico identificars la Actividad dentro del texto, PORTAFOLIO DE EVIDENCIAS
incluyendo la indicacin y especificando si debe realizarse
de manera individual, en equipo o grupal. Durante el semestre, tu profesor te ir indicando qu
evidencias (trabajos y ejercicios) debes ir resguardando
para integrarlos en un portafolio, mismos que le
EVALUACIN DE ACTIVIDADES entregars cuando te lo indique, a travs del cual te
evaluar.
En este apartado encontrars el espacio para calificar
tu desempeo, que ser por parte de tu profesor, tus
compaeros (coevaluacin) o t mismo (autoevaluacin).
REFERENCIAS
AUTOEVALUACIN Es el listado de referencias que utilizaron los profesores
que elaboraron el mdulo de aprendizaje, contiene la
bibliografa, las pginas de internet de las cuales se tom
En este espacio realizars una evaluacin de tu propio informacin, los vdeos y otras fuentes que nutrieron los
trabajo, misma que deber ser honesta para que puedas contenidos. Te permite tambin ampliar la informacin
identificar los conocimientos que has adquirido y las que te proporcione tu profesor o la del mdulo mismo.
habilidades que has desarrollado, as como las reas que
necesitas reforzar.
GLOSARIO
REACTIVOS DE CIERRE
Es la relacin de palabras nuevas o de las cuales pudieras
Son reactivos que aparecen al final de un bloque, al desconocer su significado. Es til para conocer nuevos
realizarlos reforzars los conocimientos adquiridos conceptos, ampliar tu vocabulario y comprender mejor
durante el bloque y desarrollars tus habilidades. las lecturas.
PRELIMINARES 7
Presentacin del libro ....................................................................................................................... 4
Glosario Icnico ................................................................................................................................ 7
Descripcin de la Capacitacin para el Trabajo .................................................................................. 10
Competencias Profesionales de Egreso .............................................................................................. 11
Mapa de Contenido .......................................................................................................................... 12
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
BLOQUE 1
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
BLOQUE 2
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
8 PRELIMINARES
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
BLOQUE 2 cont.
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
Disea una pgina Web en Dreamweaver. ............................................................. 73

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
BLOQUE 3
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 9
scripcin de la Capacitacin para el Trabajo
De
Una competencia es la integracin de habilidades, conocimientos y actitudes en un contexto especfico.
Para dar continuidad a los trabajos propuestos por la Direccin General de Bachillerato (DGB), en los
programas de formacin para el trabajo de la Capacitacin de Informtica y con el propsito de responder
a las necesidades de informacin que requieres como estudiante, el presente mdulo de aprendizaje tiene
como objetivo acercarte, en un solo documento, tanto a contenidos y elementos tericos como a ejercicios
y proyectos prcticos para dotarte de los conocimientos y competencias que hoy en da se requieren en el
sector productivo y de servicios, y de esta manera, integrarte al mercado laboral conforme a las exigencias
de la globalizacin, o bien, continuar con su formacin profesional en una institucin de educacin superior.
En este contexto, tu mdulo de aprendizaje fue rediseado por docentes del Colegio de Bachilleres del Estado
de Sonora, para lograr elaborar un documento que articulara los contenidos propuestos por la DGB para
el componente de formacin para el trabajo con las Normas Tcnicas de Competencia Laboral (NTCL), del
Consejo de Normalizacin y Certificacin de Competencia Laboral (CONOCER), dando como resultado este
material acorde con las tendencias de las competencias laborales que demanda el empleo en Sonora y el pas.
En cuanto a su estructura, el mdulo de aprendizaje aporta los elementos necesarios para adquirir los
conocimientos y desarrollar las habilidades, actitudes y valores en ti que, en conjunto, te hagan ser competente
en un determinado oficio que los sectores productivo o de servicios demanden, y que se determinen con base
en estndares nacionales e internacionales de calidad; te provee de herramientas para lograr que adquieras
los conocimientos necesarios y nuevos; te apoya en tu crecimiento y desarrollo. Por otra parte, es 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.
En resumen, los mdulos de la capacitacin para el trabajo de Informtica, estn diseados para formarte en
un proceso de mejora continua de calidad educativa, y de los elementos necesarios para que te dediques y
desempees de forma ptima a un oficio o, si as lo decides, contines una profesin.
10 PRELIMINARES
COMPETENCIAS PROFESIONALES DE EGRESO
Durante el proceso de formacin de los dos mdulos, el estudiante desarrollar las siguientes competencias
profesionales, correspondientes a la capacitacin de Informtica:
Utiliza procedimientos y herramientas para el desarrollo de documentos

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

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

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

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

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

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

11 especifica, en un ambiente multimedia.
PRELIMINARES 11
ELABORA
PGINAS WEB
Introduccin al programa Utilizar el entorno de Disea una pgina Web en
Dreamweaver trabajo de Dreamweaver Dreamweaver
2
Secuencia Didctica 1:
Aplicar elementos de la ficha
Contextualizar el uso de Diseo a una pgina Web.
del Dreamweaver en la
construccinde sitio Web. Secuencia Didctica 1:
Secuencia Didctica 2: Utilizar el entorno de Secuencia Didctica 2:
trabajo de Dreamweaver. Implementar elementos de la
Flujo de trabajo en ficha Formulario a la pgina
Dreamweaver. Secuencia Didctica 2: Web.
Secuencia Didctica 3: Preparar la ventana de
Identificar los elementos trabajo para crear una
pgina Web utilizando CSS. Secuencia Didctica 3:
bsicos para su operacin.
Revisar y corregir la ortografa.
Secuencia Didctica 4: Secuencia Didctica 3:
Describir la pantalla de Disear una Pgina Web.
bienvenida. Secuencia Didctica 4:
Secuencia Didctica 4: Importar datos de tabla.
Crear una pgina Web con
Describir los elementos de la diseo CSS.
ventana de trabajo. Secuencia Didctica 5:
Secuencia Didctica 5: Importar un documento de
Utilizar etiquetas div. Microsoft Office.
Ubicar los elementos de las
3
barra de herramienta. Secuencia Didctica 6:
Secuencia Didctica 7: Aplicar maquetacin de
Describir el inspector de pginas Web
propiedades. Secuencia Didctica 7:
Secuencia Didctica 8: Implementar tablas de
Ubicar los elementos de los pginas Web
Paneles. Secuencia Didctica 8:
1 Utilizar marcos
12
BLOQUE 1
Introduccin al programa Dreamweaver
Contenido
Bloque 1.
Introduccin al programa Dreamweaver.
Bloque 2.
Utilizar el entorno de trabajo de
Dreamweaver.
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.
EVALUACIN DIAGNSTICA
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
Evaluacin
Producto: Definicin de
Actividad: 1 Puntaje:
conceptos
Saberes
Conceptual Procedimental Actitudinal
Identifica herramientas de
Reconoce el concepto de Muestra inters al resolver la
aplicacin para elaborar una
pgina Web. actividad
pgina Web.
Autoevaluacin C MC NC Calificacin otorgada por el
Coevaluacin 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.
Secuencia didctica 1
Inicio CONTEXTUALIZAR EL USO DEL DREAMWEAVER EN LA
CONSTRUCCIN DE SITIO WEB
Dreamweaver permite utilizar la mayora de los navega-

dores Web instalados en su computadora para previsua-
lizar 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 especi-
ficado, hasta el sitio web completo. El panel de comporta-
mientos tambin permite crear JavaScript bsico sin cono-
cimientos de cdigo.
BLOQUE 1 Introduccin al programa Dreamweaver 15

Con la llegada de la versin MX, Macromedia incorpor herramientas de crea-

cin de contenido dinmico en Dreamweaver. En lo fundamental de las he-
rramientas 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 (Ja-
vaServer Pages) y PHP sin necesidad de tener experiencia previa en progra-
macin.
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 Secuencia didctica 2

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.

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.

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.

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.

Rbrica de Evaluacin
rea del evaluador
Puntos asignados a la actividad
Conceptual Procedimental Actitudinal Total de la actividad
Marca con una X el tipo de evaluacin Autoevaluacin Coevaluacin

Saberes C MC NC
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 Sumatoria de
Puntos en lo conceptual
procedimental actitudinal puntos obtenidos

IDENTIFICAR LOS ELEMENTOS BSICOS PARA SU OPERACIN
Arrancar y cerrar Dreamweaver
Veamos las dos formas bsicas de arrancar Dreamweaver.
99 Desde el botn Inicio (Windows Vista y Windows 7) situado, normalmente, en la esquina

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.

Elabora pginas Web

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.

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.

Elabora pginas Web

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.

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).

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.

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.

Elabora pginas Web
Rbrica de Evaluacin
rea del evaluador

Saberes C MC NC
Conceptual Reconoce el entorno del programa Dreamweaver.
Procedimental Ilustra con un mapa conceptual las diferentes vistas
que maneja el programa Dreamweaver.

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

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.

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.

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.

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.

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 Muestra cmo aparece la pgina en la

( ) ( )
un dispositivo de proyeccin. pantalla de un equipo.
Le permite activar o desactivar

estilos CSS. Este botn funciona de Muestra cmo aparece la pgina en un
( ) ( )
manera independiente a los dems teletipo.
botones de medios.
Muestra cmo aparece la pgina en un
Muestra cmo aparece la pgina en
( ) ( ) dispositivo de mano, como un telfono mvil
una hoja de papel impresa.
o un dispositivo BlackBerry.
Muestra cmo aparece la pgina en Le permite especificar una hoja de estilos de

( ) ( )
la pantalla de televisin. tiempo de diseo.

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


Saberes C MC NC
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.


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.

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.

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.

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.

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.

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).

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.


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.

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.

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. E S R N
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

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.

FUENTES DE INFORMACIN
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-web-
movil.php

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 Aplicar maquetacin de pginas Web.
crear una pgina Web utilizando CSS.
Secuencia Didctica 3: Implementar tablas de pginas Web.
Disear una Pgina Web.
Sealar la importancia del diseo de
pginas Web con CSS.
Crear una pgina Web con diseo CSS.


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?

_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________

Elabora pginas Web
Evaluacin
Actividad: 1 Producto: Definicin de conceptos. Puntaje:

Saberes
Reconoce los Analiza las funciones del pnel insertar Muestra inters al resolver la
elementos del y del inspector de propiedades. actividad.
entorno de trabajo del
Dreamweaver.

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 total-

mente 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 espe-
cfico, puede ajustar la ventana de documento con cual-
quiera de los tamaos predeterminados, editar dichos ta-
maos o crear otros nuevos.
Establecimiento de un tamao predeterminado para la

ventana de documento.
Elegir uno de los tamaos del men emergente tama-

o de ventana situado en la parte inferior de la ventana
de documento.

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 pa-
rntesis. 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 predeter-
minada con un monitor de 640 x 480.
En Windows, los documentos contenidos en la ventana de documento se maxi-

mizan 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 pro-

blemas o probar el contenido. Puede generar los siguientes tipos de informes:
Buscar. Permite buscar etiquetas, atributos y texto especfico en las etique-

tas.
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 do-

cumentos para comprobar si hay alguna etiqueta o atributo que sean incom-
patibles 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 combina-
bles, la opcin de accesibilidad, texto alternativo que falta, etiquetas anida-
das repetidas, etiquetas vacas eliminables y documentos sin ttulo.
Registro FTP. Permite ver toda la actividad de transferencia de archivos me-

diante FTP.
Depuracin del servidor. Le permite ver informacin para depurar una apli-
cacin de Adobe ColdFusion.

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.

Elabora pginas Web
Rbrica de Evaluacin
rea del evaluador

Saberes C MC NC
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.
Secuencia didctica 2
Inicio PREPARAR LA VENTANA DE TRABAJO PARA CREAR UNA PGINA
WEB UTILIZANDO CSS
Adobe Dreamweaver CS6 incluye numerosas funciones diseadas para fa-
cilitar 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, mien-

tras que las reglas CSS que definen la presentacin del cdigo residen en otro

archivo (una hoja de estilos externa) o en otra parte del documento HTML (nor-
malmente, 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 accesibi-
lidad (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; negri-
ta, 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 es-
tilo. En el siguiente ejemplo, h1 es el se-
lector y el cdigo comprendido entre las
llaves ({}) es el bloque de declaraciones:

Elabora pginas Web
h1 {font-size: 16 pixels; font-family: Helvetica;

font-weight:bold;}
Cada declaracin consta de dos partes: la pro-

piedad (por ejemplo, font-family) y el valor (por
ejemplo, Helvtica). En la regla CSS anterior,
se ha creado un estilo concreto para las eti-
quetas 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 extremada-

mente 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 Eti-
quetas 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 procedi-

mientos 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:

99Para crear un estilo personalizado que

pueda aplicarse como atributo clase a cual-
quier 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, Drea-

mweaver lo har de forma automtica.
99 Para definir el formato de una eti-

queta 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 cua-
dro 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, selec-
cionar la opcin Etiqueta del men emergente Tipo de selector y, seguidamen-
te, 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.

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.

o Categora Tipo.
o Categora Fondo.

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 ta-
mao 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:
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________

Rbrica de Evaluacin
rea del evaluador

Saberes C MC NC
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 acti-
vidad y profesor.

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).

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 combi-
naciones. 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 docu-

mento, 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 distin-
tos. 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:

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 espe-

cifica 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 am-
pla o reduce el navegador, pero no en funcin de la configuracin del texto.
99 Hbrida. Las columnas son una combinacin de las tres opciones anterio-
res. 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 docu-

mento.
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 encabe-
zado 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 es-
pecialmente til cuando desea utilizar el mismo diseo CSS (las reglas CSS
para el mismo se encuentran en un nico archivo) en varios documentos.

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.

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.

Elabora pginas Web
Rbrica de Evaluacin
rea del evaluador

Saberes C MC NC
Conceptual Selecciona los elementos necesarios para imple-
mentar 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.

APLICAR MAQUETACIN DE PGINAS WEB
Adobe Dreamweaver CS6 incorpora herramientas que le permiten crear p-

ginas Web mediante tablas y marcos HTML. La aplicacin tambin incluye re-
glas, 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, pulga-
das o centmetros.

Establecer guas de diseo.
Las guas son lneas que pueden arrastrar so-

bre 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 nave-
gadores Web.
Utilizar la cuadricula de diseo.
La cuadrcula muestra una serie de lneas ho-

rizontales y verticales en la ventana de docu-
mento. Resulta til para colocar objetos con
precisin. Puede hacer que los elementos de la
pgina con posicin absoluta se ajusten auto-
mticamente a la cuadrcula cuando los mueva
y cambiar la cuadrcula o controlar el compor-
tamiento de ajuste especificando una configura-
cin. 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 explcita-

mente en el cdigo HTML, Dreamweaver permite mani-
pular 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.

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 especi-
ficado 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 con-
tinuacin, 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 an-
teriormente. 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 cel-
da que ocupa dos filas.

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 indica-
mos 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 nues-

tra tabla de tres filas por cinco columnas.

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 ima-
gen.
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.

9. Insertar un texto, considerar

que en el punto seis combinamos
tres celdas de la primera fila, solo
que ahora adems se van a combi-
nar las celdas la fila dos, para pos-
teriormente 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.

Elabora pginas Web
ACTIVIDAD 5
SD7-B2
En equipos de tres, elaboren una pgina web informativa sobre el tema que el profesor les indi-
que; 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.
Rbrica de Evaluacin
rea del evaluador

Saberes C MC NC
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 partici-
pacin en la exposicin.


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 venta-
na. Los marcos permiten dividir la ventana de un navegador en varias regiones,
cada una las cuales puede mostrar un documento HTML diferente. Por lo ge-
neral, 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 propie-

dades 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 mues-

tra 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 ima-
gen digital.

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

E S R N
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

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-dreamwea-
ver-cs6-web-movil.php

BLOQUE 3
Disea una pgina Web en Dreamweaver
Contenido

Aplicar elementos de la ficha de Diseo Importar datos de tabla.
a una pgina Web.
Secuencia Didctica 2: Importar un documento de Microsoft
Implementar elementos de la ficha For- Office.
mulario a la pgina Web.


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?

________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________

Elabora pginas Web
Evaluacin
Actividad: 1 Producto: Definicin de conceptos. Puntaje:

Saberes
Reconoce los Analiza las funciones de los algunos Muestra inters al resolver la
elementos de diseo elementos de trabajo de Dreamweaver. actividad.
de trabajo del
Dreamweaver

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 con-
tendr 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 Inser-
tar 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 Ho-
rizontal o Vertical y presionar el botn Aceptar.
Se crear automticamente el men, que se podr visualizar desde la vista de

Diseo de esta forma:

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 nive-

les 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 ele-
mentos 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 es-
cribiendo 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, pue-

de resultar muy difcil ver su estructura o recorrer
sus elementos. Adems, puede que se haya aadi-
do algn estilo CSS que Dreamweaver no interpreta
como toca. En estos casos, resulta muy til la op-
cin 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:

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. Fa-
cilitan la navegacin y son muy tiles para organizar la informacin y no con-
gestionar 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 de-

lante 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 conte-
nido 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.

Elabora pginas Web
Acorden Spry
Otro control avanzado que utiliza las ventajas de AJAX y que Spry permite uti-
lizar 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 con-
tenido de una seccin coloca el ratn sobre su cabe-
cera 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 eli-

minar la animacin que se produce al contraer
el panel. Esta opcin solo afecta al comporta-
miento de apertura o cierre y no tiene mucha
ms trascendencia.

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 abier-
to 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 apare-
cer 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 co-
piadas 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
_______________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________

Elabora pginas Web
Rbrica de Evaluacin
rea del evaluador

Saberes C MC NC
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.
Sumatoria de
Puntos en lo conceptual Puntos en lo procedimental Puntos en lo actitudinal
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 ele-
mentos.
Puedes crear formularios a travs del men Insertar Formulario, opcin For-
mulario, 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 in-

dicamos a dnde se envan los datos. Normalmente, una pgina PHP que se
encarga de tratarlos.

Dentro de dicho formulario se podrn insertar los elementos, que como ya sa-
bes 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 formu-
larios. 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, po-
demos 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 tex-
to del submen formulario, que encontramos en el men Insertar.

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 veri-
ficacin 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 veri-

ficacin del submen Formulario, del men Insertar.
O pulsando en el botn Casilla de verificacin en la barra Formulario del panel

Insertar.

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 ayu-
darle 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.

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 ele-
gir 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.

En el campo valor activado, escribiremos el valor que deseemos que el na-

vegador 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 for-
mulario 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 op-
ciones 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.

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 desee-
mos 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 si-
multneamente. 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.

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 Comporta-

mientos 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:

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 in-
sertar.
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 pri-

mer 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 in-

formacin 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.

Para insertar un campo oculto elegiremos la opcin campo oculto del sub-
men 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 en-

viado 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 carpe-
tas 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.

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 archi-
vo, 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 nme-

ro 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 habitual-
mente 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.

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 Formula-

rio 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 ttu-

lo 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 ac-

ciones que se pueden asignar a los botones.
Botn enviar.
Un botn enviar, enva como su propio nombre indica, la informacin del for-
mulario al servidor. Este botn suele situarse al final del formulario para que el
usuario lo pulse cuando haya acabado de rellenarlo.

Elabora pginas Web
Botn restablecer formulario.
El botn restablecer formulario borra los valores introducidos en todos los ele-
mentos del formulario y restablece su estado predefinido. Este es un botn
opcional, por norma general es conveniente presentarlo cuando utilicemos for-
mularios 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 do-
cumento actual. El comando Or-
tografa no tiene en cuenta las
etiquetas HTML ni los valores de
atributo.
De forma predeterminada, el co-

rrector ortogrfico utiliza el diccio-
nario 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.

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.
Rbrica de Evaluacin
rea del evaluador

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.
Puntos en lo conceptual Puntos en lo Puntos en lo actitudinal Sumatoria de
procedimental puntos obtenidos

Elabora pginas Web

IMPORTAR DATOS DE TABLA
Puede importar datos de ta-
bla en el documento guar-
dando en primer lugar los ar-
chivos (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 docu-

mentos HTML de Microsoft Word.
Tambin se puede aadir texto de documentos de Microsoft Excel a un docu-

mento 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 Micro-
soft Word o Excel a una p-
gina 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 archi-
vo, tambin es posible pegar fragmentos de un documento de Word y conser-
var el formato.

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.

Importar datos de tabla.
Importar un documento de Microsoft Office.
Imprimir y pegar el mapa conceptual en esta rea para su valoracin.
Rbrica de Evaluacin
rea del evaluador

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 desa-
Procedimental rrollo dentro del programa de Dreamweaver los elementos de
ortografa e importacin.
Muestra una actitud respetuosa durante su participacin en la
Actitudinal
exposicin.
Puntos en lo conceptual Puntos en lo Puntos en lo actitudinal Sumatoria de
procedimental 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. E S R N
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 pronuncia-

cin.
7.- La entonacin es adecuada durante el desarrollo de toda la graba-

cin.
8.- El trabajo tiene ortografa adecuada.
9.- Desarrolla la instruccin de la actividad al pie de la letra.
PARCIAL
TOTAL

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.

Elabora pginas Web
Fuentes Electrnicas
https://helpx.adobe.com/es/dreamweaver/using/text.html

MIS NOTAS:

Elaborar pginas Web
MIS NOTAS:
101
MIS NOTAS:

Elaborar pginas Web
MIS NOTAS:
103
MIS NOTAS:

FCPT 6 Selaborapaginasweb

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

FCPT 6 Selaborapaginasweb

Transféré par

Droits d'auteur :

Formats disponibles

QUERIDOS JVENES:

LIC. CLAUDIA ARTEMIZA PAVLOVICH ARELLANO

Elabora pginas web

Director de Administracin y Finanzas

Director de Vinculacin e Imagen Institucional

ELABORA PGINAS WEB

Esta publicacin se termin de imprimir durante el mes de diciembre de 2016.

HORAS SEMANALES: CRDITOS:

DATOS DEL ALUMNO

EVALUACIN DIAGNSTICA COEVALUACIN

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

Secuencia Didctica 6: Ubicar los elementos de las barra de herramientas ....................................... 27

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

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

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

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

5 Aplica mantenimiento preventivo de hardware y software.

Implementa sistemas bsicos de seguridad informtica para mantener la

8 Aplica el mantenimiento correctivo de hardware y software.

9 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

Tiempo Asignado: 10 horas

PRESENTACIN DEL PROYECTO A DESARROLLAR DURANTE EL

Disea pginas web utilizando las herramientas de programas integrados,

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

Dreamweaver es un software fcil de usar que permite crear

Las funciones de edicin visual de Dreamweaver permiten

Se pueden crear tablas, editar marcos, trabajar con capas, insertar

Adems, incluye un software de cliente FTP completo, permitiendo entre otras

Dreamweaver permite utilizar la mayora de los navega-

BLOQUE 1 Introduccin al programa Dreamweaver 15

Con la llegada de la versin MX, Macromedia incorpor herramientas de crea-

Un aspecto de alta consideracin de Dreamweaver es su funcionalidad con

Inicio Secuencia didctica 2

1) Planificacin y configuracin del sitio. Determina la ubicacin de los

2) Organizacin y administracin de los archivos del sitio. En el panel

El panel Activos permite organizar fcilmente los activos de un sitio, que

16 Colegio de Bachilleres del Estado de Sonora

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

En la creacin de su diseo puede utilizar elementos

4) Adicin de contenido a las pginas. Implementa

Dreamweaver tambin proporciona comportamientos para llevar a cabo tareas

Por ltimo, Dreamweaver incluye herramientas para maximizar el rendimiento

5) Creacin de pginas mediante la introduccin manual de cdigo.

BLOQUE 1 Introduccin al programa Dreamweaver 17

6) Configuracin de una aplicacin Web para

7) Creacin de pginas dinmicas. En Dreamweaver se pueden definir

8) Comprobacin y publicacin. La comprobacin de las pginas es un

18 Colegio de Bachilleres del Estado de Sonora

BLOQUE 1 Introduccin al programa Dreamweaver 19

Marca con una X el tipo de evaluacin Autoevaluacin Coevaluacin

Inicio Secuencia didctica 3

Arrancar y cerrar Dreamweaver

Veamos las dos formas bsicas de arrancar Dreamweaver.

99 Desde el botn Inicio (Windows Vista y Windows 7) situado, normalmente, en la esquina