Você está na página 1de 106

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

Elabora pginas Web


Mdulo de Aprendizaje.
Copyright 2015 por Colegio de Bachilleres del Estado de Sonora.
Todos los derechos reservados.
Primera edicin 2015.
Impreso en Mxico.

DIRECCIN ACADMICA
Departamento de Innovacin y Desarrollo de la Prctica Docente.
Blvd. Agustn de Vildsola, Sector Sur.
Hermosillo, Sonora, Mxico. C.P. 83280

COMISIN ELABORADORA:

Elaboracin:
Alejandro Arvizu Miranda

Correccin de Estilo:
Irene Anglica Padilla Velarde

Diseo y Edicin:
Mara Jess Jimnez Duarte

Diseo de portada:
Mara Jess Jimnez Duarte
Jesus Ramn Franco Hernndez

Foto de portada:
Estefana Bringas Limn

Banco de imgenes:
Shutterstock

Coordinacin Tcnica:
Rubisela Morales Gispert

Supervisin Acadmica:
Vanesa Guadalupe Angulo Bentez

Coordinacin General:
Mtra. Laura Isabel Quiroz Colossio

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


Diseada en Direccin Acadmica del Colegio de Bachilleres del Estado de Sonora.
Blvd. Agustn de Vildsola, Sector Sur. Hermosillo, Sonora, Mxico.
La edicin consta de 1, 251 ejemplares.
COMPONENTE: CAMPO DE CONOCIMIENTO:
FORMACIN PARA INFORMTICA
EL TRABAJO

HORAS SEMANALES: CRDITOS:


03 06

DATOS DEL ALUMNO

Nombre:
Plantel:
Grupo: Turno: Telfono:
E-mail:
Domicilio:

PRELIMINARES 3
4 PRELIMINARES
Una competencia es la integracin de habilidades, conocimientos y actitudes en un contexto especfico.
El enfoque en competencias considera que los conocimientos por s mismos no son lo ms importante, sino el
uso que se hace de ellos en situaciones especficas de la vida personal, social y profesional. De este modo, las
competencias requieren una base slida de conocimientos y ciertas habilidades, los cuales se integran para un
mismo propsito en un determinado contexto.
El presente Mdulo de Aprendizaje de la asignatura de Elabora pginas Web, es una herramienta de suma
importancia, que propiciar tu desarrollo como persona visionaria, competente e innovadora, caractersticas
que se establecen en los objetivos de la Reforma Integral de Educacin Media Superior que actualmente se
est implementando a nivel nacional.
El Mdulo de aprendizaje es uno de los apoyos didcticos que el Colegio de Bachilleres te ofrece con la
intencin de estar acorde a los nuevos tiempos, a las nuevas polticas educativas, adems de lo que demandan
los escenarios local, nacional e internacional; el mdulo se encuentra organizado a travs de bloques de
aprendizaje y secuencias didcticas. Una secuencia didctica es un conjunto de actividades, organizadas en
tres momentos: Inicio, desarrollo y cierre. En el inicio desarrollars actividades que te permitirn identificar y
recuperar las experiencias, los saberes, las preconcepciones y los conocimientos que ya has adquirido a travs
de tu formacin, mismos que te ayudarn a abordar con facilidad el tema que se presenta en el desarrollo, donde
realizars actividades que introducen nuevos conocimientos dndote la oportunidad de contextualizarlos en
situaciones de la vida cotidiana, con la finalidad de que tu aprendizaje sea significativo.
Posteriormente se encuentra el momento de cierre de la secuencia didctica, donde integrars todos los
saberes que realizaste en las actividades de inicio y desarrollo.
En todas las actividades de los tres momentos se consideran los saberes conceptuales, procedimentales y
actitudinales. De acuerdo a las caractersticas y del propsito de las actividades, stas se desarrollan de forma
individual, grupal o equipos. Para el desarrollo del trabajo debers utilizar diversos recursos, desde material
bibliogrfico, videos, investigacin de campo, etc.
La retroalimentacin de tu aprendizaje es sumamente importante por eso te invitamos a participar activamente,
de esta forma aclarars dudas o bien fortalecers lo aprendido; adems en este momento, el docente podr
tener una visin general del logro de los aprendizajes del grupo.
Recuerda adems, que la evaluacin en el enfoque en competencias es un proceso continuo, el cual permite
recabar evidencias a travs de tu trabajo, donde se tomarn en cuenta los tres saberes: el conceptual,
procedimental y actitudinal con el propsito de que apoyado por tu maestro mejores el aprendizaje. Es necesario
realizar la autoevaluacin, este ejercicio permite que valores tu actuacin y reconozcas tus posibilidades,
limitaciones y cambios necesarios para mejorar tu aprendizaje.
As tambin, es recomendable la coevaluacin, proceso donde de manera conjunta valoran su actuacin, con
la finalidad de fomentar la participacin, reflexin y crtica ante situaciones de sus aprendizajes, promoviendo
las actitudes de responsabilidad e integracin del grupo.
Nuestra sociedad necesita individuos a nivel medio superior con conocimientos, habilidades, actitudes
y valores, que les permitan integrarse y desarrollarse de manera satisfactoria en el mundo laboral o en su
preparacin profesional. Para que contribuyas en ello, es indispensable que asumas una nueva visin y actitud
en cuanto a tu rol, es decir, de ser receptor de contenidos, ahora construirs tu propio conocimiento a travs
de la problematizacin y contextualizacin de los mismos, situacin que te permitir: Aprender a conocer,
aprender a hacer, aprender a ser y aprender a vivir juntos.

PRELIMINARES 5
Presentacin del libro ....................................................................................................................... 5
Glosario Icnico ................................................................................................................................ 8
Normas Tcnicas de Competencia Laboral ......................................................................................... 9
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

6 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 7
EVALUACIN DIAGNSTICA COEVALUACIN
cono de Coevaluacin, donde debers evaluar a tu
compaero y l te evaluar a ti.
Representa la Evaluacin Diagnstica, la cual te
permitir estar consciente de tus conocimientos acerca
del tema a abordar.
EVALUACIN DE LA ACT. INT.
Con este cono se muestra la Evaluacin de tu proyecto,
donde se valorar tu desempeo.
ACTIVIDAD INTEGRADORA
En esta seccin realizars la Actividad Integradora,
la cual ser tu proyecto durante todo el semestre, PORTAFOLIO DE EVIDENCIAS
pondrs en prctica tus conocimientos y fortalecers tu
aprendizaje. El Portafolio de Evidencias lo encontrars al finalizar
cada bloque. Aqu se especifica qu actividades debes
incluir y entregar a tu profesor para que te evale.

ACTIVIDAD 1
SD1-B1
REACTIVOS DE CIERRE
Con este grfico identificars las Actividades dentro
del texto, con las cuales optimizars los conocimientos En este espacio encontrars los Reactivos de Cierre, con
aprendidos. Debajo del cono sabrs la secuencia y los cuales reforzars los conocimientos que adquiriste
bloque al que pertenece y arriba si es individual, en durante el bloque y desarrollars tus habilidades.
equipo o grupal.

conos para indicar si una actividad es: GLOSARIO


Individual En Equipo Grupal Con esta ilustracin localizaremos el Glosario, ya sea
dentro del texto o al final del libro. Ser tu ayuda para
conocer nuevos conceptos y comprender mejor las
lecturas.
EVALUACIN DE ACTIVIDADES
En este apartado encontrars la Evaluacin de
FUENTES DE INFORMACIN
Actividades, donde tu profesor calificar tu desempeo.
til para tener referencias acerca del contenido de tus libros,
adems que podrs utilizar las Fuentes para tener ms
herramientas que contribuyan a mejorar tu desempeo
acadmico.
AUTOEVALUACIN
cono de Autoevaluacin en este espacio tendrs que NOTA ENFTICA
evaluarte a ti mismo honestamente y te dars cuenta
de los conocimientos adquiridos, as como de las reas En Notas Enfticas podrs encontrar contenido
que necesitas mejorar. importante que complementar tu aprendizaje.

8 PRELIMINARES
Normas Tcnicas de
Competencia Labo
r al

Derivado de las constantes transformaciones que se estn presentando en la organizacin del trabajo, han
generado cambios importantes respecto a los requerimientos del sector productivo para contratar a sus
trabajadores. Con este propsito, desde hace algunos aos grupos de empresarios, sindicatos y maestros,
representantes de los diferentes sectores de la economa del pas, se reunieron para definir las habilidades
y conocimientos mnimos que debera poseer un trabajador para desarrollarse exitosamente en el mundo
laboral. Estas habilidades y conocimientos (calificaciones) se expresan en documentos denominados Normas
Tcnicas de Competencia Laboral (NTCL).

PRELIMINARES 9
ipcin de la Capacitacin para el Trabajo
Descr

Para dar continuidad a los trabajos propuestos por la Direccin General de Bachillerato (DGB), en los
programas de formacin para el trabajo (Capacitacin de Informtica) y con el propsito de responder a las
necesidades de informacin que requieren nuestros estudiantes, el presente mdulo de aprendizaje tiene
como objetivo acercarlos en un solo documento tanto elementos tericos como ejercicios prcticos para
dotarlos de los conocimientos que hoy en da requieren en el sector productivo y de esta manera ingresar al
mercado laboral conforme a las exigencias de la globalizacin, o bien, continuar con su formacin profesional.

En este contexto, los docentes del Colegio de Bachilleres del Estado de Sonora, se dieron a la tarea de elaborar
este documento con contenidos propuestos por la DGB y que se encuentran vinculados con las Normas
Tcnicas de Competencia Laboral (NTCL), del Consejo de Normatizacin y Certificacin de Competencia
Laboral (CONOCER), dando como resultado este material acorde con las tendencias de las competencias
laborales y del empleo en Sonora.

El mdulo de aprendizaje aporta los elementos necesarios para desarrollar los conocimientos, habilidades,
actitudes y valores de los estudiantes; provee de herramientas para lograr que el alumno adquiera los
conocimientos que se pretende, apoyndolos en su crecimiento y desarrollo. Por otra parte, no deja de ser
tambin un instrumento de gran utilidad para los docentes que imparten la capacitacin de Informtica,
pues estandariza los contenidos en todos los planteles del Colegio.

Estos trabajos son parte tambin de los esfuerzos que realizan COBACH y los docentes, en el proceso de
mejora continua, necesarios para elevar la calidad de los servicios que presta como institucin de educacin
media superior.

10 PRELIMINARES
COMPETENCIAS PROFESIONALES DE EGRESO

Durante el proceso de formacin de los cuatro mdulos, el estudiante desarrollar las siguientes competencias
profesionales, correspondientes a la capacitacin de Informtica:

1 Utiliza procedimientos y herramientas para el desarrollo de documentos


electrnicos de acuerdo a los requerimientos.

2 Soluciona problemas tcnicos sobre la configuracin de hardware y software


en su mbito de responsabilidad.

3 Interpreta y aplica documentacin tcnica en la instalacin, mantenimiento y


diagnostico en la solucin de problemas.

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


las reglas de seguridad e higiene y polticas de uso.

5 Aplica mantenimiento preventivo de hardware y software.

6 Implementa sistemas bsicos de seguridad informtica para mantener la


integridad de la informacin.

7 Configura de manera bsica una red de rea local para compartir dispositivos
perifricos.

8 Aplica el mantenimiento correctivo de hardware y software.

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

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


seguridad e higiene y polticas de uso.

11 Elabora pginas WEB con animaciones interactivas de aplicacin general y


especifica, en un ambiente multimedia.

PRELIMINARES 11
ELABORA
PGINAS WEB
Introduccin al programa Utilizar el entorno de Disea una pgina Web en
Dreamweaver trabajo de Dreamweaver Dreamweaver

2
Secuencia Didctica 1:
Secuencia Didctica 1:
Aplicar elementos de la ficha
Contextualizar el uso de Diseo a una pgina Web.
del Dreamweaver en la
construccin de un 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
Secuencia Didctica 4: Secuencia Didctica 3: ortografa.
Describir la pantalla de Disear una Pgina Web.
bienvenida.
Secuencia Didctica 4: Secuencia Didctica 4:
Secuencia Didctica 5: 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:
Secuencia Didctica 6:
Utilizar etiquetas div. Importar un documento de
Ubicar los elementos de las Microsoft Office.

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


Capacitacin para el Trabajo: Informtica

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.

16 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 17


Capacitacin para el Trabajo: Informtica

6) Configuracin de una aplicacin Web para


contenido dinmico. Muchos sitios Web contienen
pginas dinmicas que permiten a los visitantes ver
informacin almacenada en bases de datos y que suelen
permitirles aadir y editar informacin. Para crear esas
pginas, configurar primero un servidor y una aplicacin
Web, crear o modificar un sitio de Dreamweaver y
conectarse a una base de datos.

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


diversas fuentes de contenido dinmico, incluidos juegos de registros extrados
de bases de datos, parmetros de formularios y componentes JavaBeans. Para
aadir el contenido dinmico a una pgina, basta con arrastrarlo a ella. Puede
establecer que los registros de la pgina aparezcan de uno en uno o en grupos,
mostrar varias pginas de registros, aadir vnculos especiales para pasar de
una pgina de registros a la siguiente (o a la anterior) y crear contadores para
que los usuarios puedan llevar un control de los registros. Puede incorporar
lgica de aplicaciones o empresarial mediante tecnologas como Adobe
ColdFusion y servicios Web. Si se necesita ms flexibilidad, puede crear sus
propios comportamientos de servidor y formularios interactivos.

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


proceso continuo que se lleva a cabo durante todo el ciclo de desarrollo. Al
final del ciclo, publicar el sitio en un servidor. Muchos desarrolladores tambin
programan operaciones de mantenimiento peridico para asegurarse de que el
sitio se mantiene actualizado y operativo.

18 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 19


Capacitacin para el Trabajo: Informtica

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

Inicio Secuencia didctica 3


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.

20 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

Inicio Secuencia didctica 4


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.

BLOQUE 1 Introduccin al programa Dreamweaver 21


Capacitacin para el Trabajo: Informtica

Para Guardar un documento, puedes utilizar cualquiera de las siguientes


operaciones.

99 Hacer clic en el botn Guardar de la


barra de herramientas estndar.
99 Pulsar la combinacin de teclas Ctrl + S.
99 Hacer clic sobre el men Archivo y elegir
la opcin Guardar.
99 Dreamweaver incluye la posibilidad
de, en el caso de estar trabajando
simultneamente con varios documentos,
poder guardar todos al mismo tiempo,
sin la necesidad de hacerlo uno por
uno. Para guardar todo puedes realizar
cualquiera de las siguientes operaciones.
99 Hacer clic en el botn Guardar Todo de
la barra de herramientas estndar.
99 Hacer clic sobre el men Archivo y elegir
la opcin Guardar Todo.

Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones


hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin
guardar todo, ya que en ocasiones es posible no desear guardar los cambios
en todos los documentos modificados. Por ello es conveniente que al principio
no utilices esta opcin, al menos hasta que te hayas habituado a manejar el
programa. De todas formas, observa que cuando hay cambios sin guardar
aparece un * tras el nombre del documento.

22 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

Inicio Secuencia didctica 5


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.

BLOQUE 1 Introduccin al programa Dreamweaver 23


Capacitacin para el Trabajo: Informtica

99 Barra de herramientas Estndar. (No se muestra en el diseo de


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

24 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 25


Capacitacin para el Trabajo: Informtica

ACTIVIDAD 3
SD5-B1

En binas resuelvan lo solicitado en cada uno de los casos:

1. Ubica cada unas de las letras en el lugar correspondiente:

A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana de documento


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

2. En el programa Inspiration elabora un mapa conceptual donde menciones los diferentes


tipos de vistas que maneja Dreamweaver. Imprmelo y pgalo en este espacio, para su
valoracin.

26 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

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 entorno del programa Dreamweaver.
Procedimental Ilustra con un mapa conceptual las diferentes vistas
que maneja el programa Dreamweaver.
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

Inicio Secuencia didctica 6


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

BLOQUE 1 Introduccin al programa Dreamweaver 27


Capacitacin para el Trabajo: Informtica

En la barra de herramientas Documento, aparecen las siguientes opciones:

A. Mostrar vista de cdigo. Solo muestra la vista Cdigo en la ventana de


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

28 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 29


Capacitacin para el Trabajo: Informtica

C. Herramienta Mano. Permite hacer clic en el documento y arrastrarlo por


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

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

30 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 31


Capacitacin para el Trabajo: Informtica

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.

32 Colegio de Bachilleres del Estado de Sonora


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

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 los elementos de la ventana de documento
del Dreamweaver.
Procedimental Distingue los diferentes elementos de las barras del
entorno de trabajo del Dreamweaver.
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

BLOQUE 1 Introduccin al programa Dreamweaver 33


Capacitacin para el Trabajo: Informtica

Inicio Secuencia didctica 7


DESCRIBIR EL INSPECTOR DE PROPIEDADES

El inspector de propiedades permite examinar y editar las propiedades ms


comunes del elemento de pgina seleccionado actualmente, como texto o un
objeto insertado.

Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos
aplicar a los diferentes elementos de la pgina Web que estemos diseando.
El contenido del inspector de propiedades es distinto en funcin del elemento
seleccionado. Por ejemplo, si se selecciona una imagen de la pgina, el
inspector de propiedades cambiar para mostrar las propiedades de la imagen
(por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de la imagen, el
borde que rodea la imagen en caso de que lo haya, etc.).

El inspector de propiedades se encuentra, de manera predeterminada, en el


borde inferior del espacio de trabajo, aunque puede desacoplarlo y convertirlo
en un panel flotante en el espacio de trabajo.

Inicio Secuencia didctica 8


UBICAR LOS ELEMENTOS DE LOS PANELES

Insertar.

El panel Insertar contiene botones para crear e insertar


objetos como tablas, imgenes y vnculos. Los botones
estn ordenados en diferentes categoras, entre las que
puede cambiar seleccionando la categora deseada del
men desplegable Categora. Si el documento actual
contiene cdigo de servidor, como los documentos
ASP o CFML, aparecen tambin otras categoras.

Algunas categoras tienen botones con mens


emergentes. Al seleccionar una opcin de un men
emergente, dicha opcin se convierte en la accin
predeterminada del botn.

34 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 35


Capacitacin para el Trabajo: Informtica

Archivos.

El panel Archivos se utiliza para ver y administrar los archivos del sitio de
Dreamweaver.

Al visualizar sitios, archivos o carpetas en el panel


Archivos, puede cambiar el tamao del rea de
visualizacin y expandir o contraer el panel Archivos.
Cuando el panel Archivos se contrae, muestra el
contenido del sitio local, el sitio remoto, el servidor de
prueba o el depsito SVN como una lista de archivos.
Cuando est ampliado, adems del sitio local, muestra
el sitio remoto o el servidor de prueba o el depsito SVN.

Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos


cambiando la vista (sitio local o sitio remoto) que aparece de forma
predeterminada en el panel contrado.

Sitio local.

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


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

Sitio remoto.

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


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

Sitio de Dreamweaver.

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


de almacenamiento local o remoto de los documentos que pertenecen a un
sitio Web.

Un sitio de Dreamweaver permite organizar y administrar todos los documentos


Web, cargar el sitio en un servidor Web, controlar y mantener vnculos y
administrar y compartir archivos. Para aprovechar al mximo las funciones de
Dreamweaver, debe definir un sitio.

36 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 37


Capacitacin para el Trabajo: Informtica

99 Duplicar. Crea una copia del sitio seleccionado. La copia aparece en la


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

99 Importar. Permite seleccionar un archivo de configuracin de un sitio


(*.ste).

38 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 39


Capacitacin para el Trabajo: Informtica

Inicio Secuencia didctica 9


GUAS VISUALES

Dreamweaver proporciona varios tipos de guas visuales para ayudarte a


disear documentos y predecir de forma aproximada cul ser su apariencia
en los navegadores. Puede seguir uno de estos procedimientos:
99 Ajustar instantneamente el tamao deseado para una ventana de
documento y comprobar si caben los elementos en la pgina.
99 Utilizar una imagen de rastreo como fondo de la pgina para ayudarle a
copiar un diseo creado en una aplicacin de edicin de ilustraciones o
imgenes como Adobe Photoshop o Adobe Fireworks.
99 Utilizar las reglas y guas para proporcionar una pista visual que permita
colocar y cambiar el tamao de los elementos de pgina con precisin.
99 Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y
ajuste del tamao de elementos con posicin absoluta (elementos PA).

Las marcas de cuadrcula de la pgina ayudan a alinear los elementos PA y,


cuando est activada la funcin de ajuste, permiten ajustar automticamente
los elementos PA con el punto ms prximo de la cuadrcula al moverlas o
ajustar su tamao. (Los dems objetos, como las imgenes y los prrafos, no
se ajustan a la cuadrcula.) El ajuste funciona independientemente de que la
cuadrcula est visible.

40 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 41


Capacitacin para el Trabajo: Informtica

ACTIVIDAD INTEGRADORA

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

42 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 1 Introduccin al programa Dreamweaver 43


Capacitacin para el Trabajo: Informtica

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

44 Colegio de Bachilleres del Estado de Sonora


BLOQUE 2
Utilizar el entorno de trabajo de Dreamweaver

Contenido

Secuencia Didctica 1: Secuencia Didctica 5:


Cambiar la vista de la ventana de trabajo. Utilizar etiquetas div.

Secuencia Didctica 2: Secuencia Didctica 6:


Preparar la ventana de trabajo para Aplicar maquetacin de pginas Web.
crear una pgina Web utilizando CSS.
Secuencia Didctica 7:
Secuencia Didctica 3: Implementar tablas de pginas Web.
Disear una Pgina Web.
Sealar la importancia del diseo de
pginas Web con CSS.

Secuencia Didctica 4:
Crear una pgina Web con diseo CSS.

Tiempo Asignado: 15 horas


Capacitacin para el Trabajo: Informtica

Inicio Secuencia didctica 1


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.

EVALUACIN DIAGNSTICA

ACTIVIDAD 1
SD1-B2
De manera individual responde los siguientes cuestionamientos:

Menciona tres tipos de vista que maneja Adobe Dreamweaver.


_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________

Escribe cuatro botones de la barra de herramientas de documentos.


________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________

Cul es la funcin de la barra de herramientas de estado?


_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________

46 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

Evaluacin

Actividad: 1 Producto: Definicin de conceptos. Puntaje:


Saberes
Conceptual Procedimental Actitudinal
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.

Autoevaluacin C MC NC Calificacin otorgada por el


docente.
Coevaluacin

La ventana de documento permite


visualizar documentos en la vista
Cdigo, la vista Cdigo dividida, la
vista Diseo, las vistas Cdigo y Diseo (vista Dividida) o en la Vista en vivo.
Tambin se puede optar por visualizar la vista de cdigo dividida o las vistas
Cdigo y Diseo horizontal o verticalmente. (La visualizacin predeterminada
es la horizontal.)

Vista de diseo.

Permite trabajar con el editor visual.

Vista de Cdigo.

Se utiliza para trabajar en un entorno total-


mente de programacin, de cdigo fuente.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 47


Capacitacin para el Trabajo: Informtica

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.

48 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 49


Capacitacin para el Trabajo: Informtica

ACTIVIDAD 2
SD1-B2

En el centro de cmputo del plantel, en equipos de tres elaborar un mapa conceptual, donde se
mencionen y describan los tres tipos de vista de un documento utilizando el programa Adobe
Dreamweaver.

50 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

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 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.
Puntaje obtenido por el candidato
Puntos en lo Puntos en lo Sumatoria de
Puntos en lo conceptual
procedimental actitudinal puntos obtenidos

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

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 51


Capacitacin para el Trabajo: Informtica

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:

52 Colegio de Bachilleres del Estado de Sonora


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:

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 53


Capacitacin para el Trabajo: Informtica

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.

54 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 55


Capacitacin para el Trabajo: Informtica

o Categora Tipo.

o Categora Fondo.

56 Colegio de Bachilleres del Estado de Sonora


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

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 57


Capacitacin para el Trabajo: Informtica

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 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.
Puntaje obtenido por el candidato
Puntos en lo Puntos en lo Sumatoria de
Puntos en lo conceptual
procedimental actitudinal puntos obtenidos

Inicio Secuencia didctica 3


DISEAR UNA PGINA WEB.

Un diseo de pgina CSS utiliza el formato de hojas de estilos en cascada, en


lugar de las tablas o marcos HTML tradicionales, para organizar el contenido
de un sitio Web. El elemento bsico del diseo CSS es la etiqueta div, una
etiqueta HTML que, en la mayora de los casos, acta como contenedor de
texto, imgenes y otros elementos de pgina. Cuando crea un diseo CSS,
coloca etiquetas div en la pgina, aade contenido a las mismas y las sita en
distintos lugares. A diferencia de las celdas de tabla, que solo pueden situarse
en algn lugar dentro de las filas y columnas de la tabla, las etiquetas div
aparecen en cualquier lugar de una pgina Web. Puede situar etiquetas div
de forma absoluta (especificando las coordenadas (x, y) o de forma relativa
(especificando su distancia con respecto a otros elementos de la pgina).

58 Colegio de Bachilleres del Estado de Sonora


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.

Inicio Secuencia didctica 4


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:

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 59


Capacitacin para el Trabajo: Informtica

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.

60 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

Inicio Secuencia didctica 5


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.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 61


Capacitacin para el Trabajo: Informtica

4. Haz clic en Aceptar.

La etiqueta div tendr el aspecto de un cuadro en el documento con texto


de marcador de posicin. Al desplazar el puntero sobre el borde del cuadro,
Dreamweaver lo resaltar.

ACTIVIDAD 4
SD5-B2
En el centro de cmputo, en el programa Adobe Dreamweaver inserta una etiqueta div, donde
indiques el nombre completo y elabora una serie de pasos con dibujos detallados de cmo
hacerlo, si el espacio no es suficiente, elabora la actividad en hojas de cuaderno y pgalas en
este espacio para su valoracin.

62 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

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 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.
Puntaje obtenido por el candidato
Puntos en lo Puntos en lo Sumatoria de
Puntos en lo conceptual
procedimental actitudinal puntos obtenidos

Inicio Secuencia didctica 6


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.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 63


Capacitacin para el Trabajo: Informtica

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.

Inicio Secuencia didctica 7


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.

64 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 65


Capacitacin para el Trabajo: Informtica

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.

66 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 67


Capacitacin para el Trabajo: Informtica

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.

68 Colegio de Bachilleres del Estado de Sonora


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
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 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.
Puntaje obtenido por el candidato
Puntos en lo Puntos en lo Sumatoria de
Puntos en lo conceptual
procedimental actitudinal puntos obtenidos

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 69


Capacitacin para el Trabajo: Informtica

Inicio Secuencia didctica 8


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.

70 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

ACTIVIDAD INTEGRADORA

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.

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


E S R N
INTEGRADORA.
1.- Demuestra un completo entendimiento del tema.
2.- El volumen es lo suficientemente alto para ser escuchado por todos
los miembros de la audiencia a lo largo de toda la grabacin.
3.- Durante la grabacin se desenvuelve de forma objetiva y fluida.
4.- Se mantiene en el tema todo el tiempo (100%)
5.- Habla clara y distintivamente todo y demuestra buena
pronunciacin.
6.- Usa vocabulario apropiado.
7.- La entonacin es adecuada durante el desarrollo de toda la
grabacin.
8.- El trabajo tiene 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

BLOQUE 2 Utilizar el entorno de trabajo de Dreamweaver 71


Capacitacin para el Trabajo: Informtica

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

72 Colegio de Bachilleres del Estado de Sonora


BLOQUE 3
Disea una pgina Web en Dreamweaver

Contenido

Secuencia Didctica 1: Secuencia Didctica 4:


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

Secuencia Didctica 3:
Revisar y corregir la ortografa.

Tiempo Asignado: 23 horas


Capacitacin para el Trabajo: Informtica

Inicio Secuencia didctica 1


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

EVALUACIN DIAGNSTICA

ACTIVIDAD 1
SD1-B3

De manera individual responde los siguientes cuestionamientos:

Menciona tres elementos de diseo que maneja Adobe Dreamweaver.


_________________________________________________________________________________
_________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________

Define que es un Formulario en Dreamweaver.


________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________

Cul es la funcin los botones en Dreamweaver?


________________________________________________________________________________
________________________________________________________________________________
_________________________________________________________________________________

74 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

Evaluacin

Actividad: 1 Producto: Definicin de conceptos. Puntaje:


Saberes
Conceptual Procedimental Actitudinal
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

Autoevaluacin C MC NC Calificacin otorgada por el


docente.
Coevaluacin

Estrategia Didctica

Dreamweaver permite acceder y tratar datos XML empleando su tecnologa


Spry.

Spry se compone de un conjunto de archivos codificados en JavaScript que


se aadirn a tu proyecto desde el momento en que se comiencen a utilizar.
Dreamweaver avisar de la creacin de una nueva carpeta en el sitio que 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


Capacitacin para el Trabajo: Informtica

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:

76 Colegio de Bachilleres del Estado de Sonora


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:

BLOQUE 3 Disea una pgina Web en Dreamweaver 77


Capacitacin para el Trabajo: Informtica

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.

78 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 79


Capacitacin para el Trabajo: Informtica

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.

Inicio Secuencia didctica 2


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
_______________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________

80 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

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
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.
Puntaje obtenido por el candidato
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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 81


Capacitacin para el Trabajo: Informtica

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.

82 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 83


Capacitacin para el Trabajo: Informtica

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.

84 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 85


Capacitacin para el Trabajo: Informtica

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.

86 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 87


Capacitacin para el Trabajo: Informtica

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:

88 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 89


Capacitacin para el Trabajo: Informtica

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.

90 Colegio de Bachilleres del Estado de Sonora


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 91


Capacitacin para el Trabajo: Informtica

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.

92 Colegio de Bachilleres del Estado de Sonora


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.

Inicio Secuencia didctica 3


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 93


Capacitacin para el Trabajo: Informtica

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
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 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.
Puntaje obtenido por el candidato
Puntos en lo conceptual Puntos en lo Puntos en lo actitudinal Sumatoria de
procedimental puntos obtenidos

94 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

Inicio Secuencia didctica 4


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.

Inicio Secuencia didctica 5


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.

BLOQUE 3 Disea una pgina Web en Dreamweaver 95


Capacitacin para el Trabajo: Informtica

ACTIVIDAD 4
SD5-B3

En equipos de tres, elaboren un mapa conceptual donde se explique detalladamente el proceso


para llevar a cabo cada uno de los siguientes conceptos en Dreamweaver.

Revisar y corregir la ortografa.


Importar 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
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
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.
Puntaje obtenido por el candidato
Puntos en lo conceptual Puntos en lo Puntos en lo actitudinal Sumatoria de
procedimental puntos obtenidos

96 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

ACTIVIDAD INTEGRADORA

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.

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


cin.
6.- Usa vocabulario apropiado.

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.

10.- El estudiante domina el tema.

PARCIAL

TOTAL

E = excelente, S = sobresaliente, R = regular, N = no competente

BLOQUE 3 Disea una pgina Web en Dreamweaver 97


Capacitacin para el Trabajo: Informtica

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.
B) Casilla de verificacin.
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.
B) Casilla de verificacin.
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.
B) Casilla de verificacin.
C) Botn de opcin.
D) Lista/Men.

98 Colegio de Bachilleres del Estado de Sonora


Elabora pginas Web

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/
https://helpx.adobe.com/es/dreamweaver/using/text.html

BLOQUE 3 Disea una pgina Web en Dreamweaver 99


Capacitacin para el Trabajo: Informtica

MIS NOTAS:

100 Colegio de Bachilleres del Estado de Sonora


Elaborar pginas Web

MIS NOTAS:

101
Capacitacin para el Trabajo: Informtica

MIS NOTAS:

102 Colegio de Bachilleres del Estado de Sonora


Elaborar pginas Web

MIS NOTAS:

103
Capacitacin para el Trabajo: Informtica

MIS NOTAS:

104 Colegio de Bachilleres del Estado de Sonora