Modulo 8 Info 2012

DIRECCIN GENERAL DEL BACHILLERATOCOMPONENTE DE FORMACIN PARA EL TRABAJO BASADA EN COMPETENCIA LABORAL

MODULO 8

CAPACITACIN DE INFORMTICA

Mxico, 2011-2012

NOMBRE DEL ALUMNO: ____________________________________________ GRUPO: _____________

DATOS DEL ALUMNO:Nombre Grado y grupo Direccin Telfono Ciudad Horario

EVALUACINACTIVIDADES DE APRENDIZAJE ACTIVIDADES PRCTICAS E INVESTIGACIONES ACTIVIDADES DE INTEGRACIN ASISTENCIA Y PARTICIPACIN EXAMEN O PROYECTO TOTAL

EXPECTATIVAS SOBRE EL CURSO1. Que sabes acerca de esta materia?

2. Qu esperas aprender en este curso?

3. Cul es tu compromiso con esta materia?

4. Crees que te servir para algo el conocer esta materia?

5. En que lo podrs aplicar?

2

QU SABES?Es conveniente que en esta nueva actividad que inicias reflexiones sobre los conocimientos y experiencias que tienes sobre ELABORACIN DE PGINAS WEB. Esto te permitir aprender con mayor inters lo que desconoces. Considera que todo esto lo pondrs en prctica y para ello debes estar preparado. Nombre del alumno: ___________________________________________________________ grupo:__________EVALUACIN DIAGNSTICA Datos generales de la unidad ELABORACIN DE PGINAS WEB TTULO: CDIGO: Genrica CLASIFICACIN: ELEMENTO 1: Utilizar los elementos fundamentales del diseo. CDIGO: ELEMENTO 2: Manejar los elementos bsicos de un lenguaje utilizable en la creacin de pginas

Web (HTML, DHTML, ASP, Java Script, CSS, Dreamweaver, Frontpage u otros).CDIGO: ELEMENTO 3: CODIGO: ELEMENTO 4: CODIGO:

Disear una pgina Web con un software de aplicacin. Publicar pginas web

ELEMENTO 1: Resuelve los siguientes ejercicios para que autoevales tus conocimientos y habilidades. Marca con una X la opcin que corresponda: Marca con una X la opcin que corresponda: Evidencias de conocimiento Tienes conocimientos acerca de las actividades o temas que se sealan? S No

3

ELEMENTO 2: Resuelve los siguientes ejercicios para que autoevales tus conocimientos y habilidades. Marca con una X la opcin que corresponda: Marca con una X la opcin que corresponda: Evidencias de conocimiento Tienes conocimientos acerca de las actividades o temas que se sealan? S No

Menciona algunas obligaciones fiscales que conozcas

ELEMENTO 3: . Resuelve los siguientes ejercicios para que autoevales tus conocimientos y habilidades. Marca con una X la opcin que corresponda: Marca con una X la opcin que corresponda: Evidencias de conocimiento Tienes conocimientos acerca de las actividades o temas que se sealan? S No

NOMBRE Y FIRMA DEL ALUMNO: _________________________________________________________________________ 4

COLEGIO DE BACHILLERES, S.L.P. PLANTEL 03, CEDRAL, S.L.P. INSTRUMENTOS DE EVALUACIN DE LA CAPACITACION DE ____________________________ MODULO___________________________________________________________________________________ _______________COMPONENTE ________________________________________________________________________ ALUMNO(A): ______________________________________________________________________________ SEMESTRE:______________________ GRUPO:________________ FECHA:_______________________ L I S T A D E C O T E J O LC____ ACTIVIDADES DE APRENDIZAJE, PRCTICAS Y TRABAJOS DE INVESTIGACION 20% Instrucciones: Verificar que el trabajo contenga los aspectos sealados, si cumple con el aspecto anotar la cantidad correspondiente en la columna Si, o anotar (una palomita) en caso de que no cumpla, la columna No Aplica se utiliza cuando el aspecto no corresponda. CUMPLE CUMPLE No Actividades de aprendizaje Actividades complementarias SI NO NA SI NO NA 1. 2. 3. 4. 5. 6. 7. 8. 9. 10 11 SUMA A C T A D E E V A L U A C I O N P A R C I A L AEP____ Instrucciones: Escribir el puntaje obtenido en cada aspecto y multiplicar por el porcentaje para obtener la puntuacin definitiva, se suman las puntuaciones definitivas para la calificacin final. PUNTAJE PUNTUACION ASPECTO PORCENTAJE OBTENIDO DEFINITIVA CUESTIONARIO CU GUIA DE OBSERVACION GO LISTA DE COTEJO LC ACTIVIDADES DE APRENDIZAJE LC EVALUACIONES FORMATIVAS LC GUIA DE OBSERVACION (COEVALUACION) GO CALIFICACION FINAL DEL COMPONENTE REVIS ENTERADO PADRE O TUTOR INSTRUCTOR

________________________________ NOMBRE Y FIRMA 5

_____________________________ NOMBRE Y FIRMA

____________________________ NOMBRE Y FIRMA


________________________________ NOMBRE Y FIRMA 6

_____________________________ NOMBRE Y FIRMA

____________________________ NOMBRE Y FIRMA


________________________________ NOMBRE Y FIRMA 7

_____________________________ NOMBRE Y FIRMA

____________________________ NOMBRE Y FIRMA

COLEGIO DE BACHILLERES, S.L.P. PLANTEL 03, CEDRAL, S.L.P. ACTA DE EVALUACION FINAL (DIRECCION GENERAL)

CAPACITACION: __________________________ MODULO___________________________________________________________________________________________ ALUMNO: _____________________________________________________________________ SEMESTRE:______________ GRUPO:________________ FECHA:_______________________ Instrucciones: Escribir el puntaje obtenido en cada aspecto y multiplicar por el porcentaje para obtener la puntuacin definitiva, se suman las puntuaciones definitivas para la calificacin final. PUNTAJE PUNTUACION ASPECTO PORCENTAJE OBTENIDO DEFINITIVA CUESTIONARIO LISTA DE COTEJO GUIA DE OBSERVACION CALIFICACION FINAL DE LA EVALUACION (DG)

A C T A D E E V A L U A C I O N F I N A L D E L M O D U L O MAEF _______ CAPACITACION: __________________________ MODULO___________________________________________________________________________________________ ALUMNO: _____________________________________________________________________ SEMESTRE:______________ GRUPO:________________ FECHA:_______________________ Instrucciones: Escribir el puntaje obtenido en cada componente y multiplicar por el porcentaje para obtener la puntuacin definitiva, se suman las puntuaciones definitivas para la calificacin final. PUNTAJE PUNTUACION ASPECTO PORCENTAJE OBTENIDO DEFINITIVA COMPONENTE 1 AEFP_______ COMPONENTE 2 AEFP_______ COMPONENTE 3 AEFP_______ COMPONENTE 4 AEFP_______ EVALUACION FINAL (DG) FAE_______

CALIFICACION FINAL DEL MODULO REVIS ENTERADO PADRE O TUTOR INSTRUCTOR

________________________________ NOMBRE Y FIRMA

____________________________________ NOMBRE Y FIRMA

__________________________ NOMBRE Y FIRMA

8

BLOQUE I UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO.

Competencias profesionales: 1. Desarrolla documentos electrnicos, de acuerdo con los requerimientos establecidos (software). 2. Localiza, obtiene informacin y se comunica utilizando las tecnologas de la informacin y de comunicacin (software). 7. Disea y actualiza pginas Web, de acuerdo con los requerimientos del usuario (multimedia). Unidad de competencia: Disea pginas web utilizando las herramientas de programas integrados, contribuyendo de manera responsable a la comunicacin global en diferentes contextos. Atributos a desarrollar en el bloque: 1. Enfrenta las dificultades que se le presentan y es consciente de sus valores, fortalezas y debilidades. 2. Administra los recursos disponibles teniendo en cuenta las restricciones para el logro de sus metas. 3. Elige alternativas y cursos de accin con base en criterios sustentados y en el marco de un proyecto de vida. 4. Aplica distintas estrategias comunicativas segn quienes sean sus interlocutores, el contexto en el que se encuentra y los objetivos que persigue. 5. Maneja las tecnologas de la informacin y la comunicacin para obtener informacin y expresar ideas. 6. Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos

9

contribuye al alcance de un objetivo. 7. Ordena informacin de acuerdo a categoras, jerarquas y relaciones. 8. Utiliza las tecnologas de la informacin y comunicacin para procesar e interpretar informacin. 9. Elige las fuentes de informacin ms relevantes para un propsito especfico y discrimina entre ellas de acuerdo a su relevancia y confiabilidad. 10 Estructura ideas y argumentos de manera clara, coherente y sinttica. 11. Define metas y da seguimiento a sus procesos de construccin de conocimiento. 12. Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana. 13. Identifica las actividades que le resultan de menor y mayor inters y dificultad, reconociendo y controlando sus reacciones frente a retos y obstculos. 14. Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso de accin con pasos especficos. 15. Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva. 16. Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo.

Secuencia didctica 1. Introduccin al programa Dreamweaver CS4. Inicio

Actividad: 1 Responde las siguientes preguntas.1. Qu es una pgina web?____________________________________________________________________________________________________________________________________________________________________________________________

______________________________________________________________________________________________

2.

Qu tipo de informacin se puede utilizar en una pgina web?______________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________

3.

Menciona el lenguaje de marcado implementado por World Wide Web, para la creacin de pginas web.______________________________________________________________________________________________

4.

Menciona dos lenguajes de programacin para la creacin de pginas web.______________________________________________________________________________________________

5.

Qu diferencia existe entre una pgina web y un sitio web?

1.

Menciona tres programas para la creacin de programa

10

DesarrolloIntroduccin al Dreamweaver.El espacio de trabajo de Adobe Dreamweaver CS4 contiene barras de herramientas,inspectores y paneles que le permiten crear pginas Web. Puede personalizar el aspecto

general y el comportamiento del espacio de trabajo.

Flujo de trabajo de Dreamweaver. Se pueden utilizar varios mtodos para crear un sitio Web; ste 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, debes tener en cuenta los requisitos tcnicos como el acceso de los usuarios, las limitaciones delnavegador, los plugins o la descarga de archivos. Una vez que hayas organizado la informacin y determinado una

estructura, podrs comenzar a crear el sitio. 2) Organizacin y administracin de los archivos del sitio. En el panel Archivos puede aadir, borrar y cambiar el nombre de los archivos y carpetas fcilmente con el fin de modificar la organizacin segn resulte necesario. All encontrars numerosas herramientas que te 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. Puede utilizar Dreamweaver para administrar diversos aspectos de tus sitios de Adobe Contribute. Nota: CSS, son hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito enHTML o XML

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 te permiten disear pginas rpidamente y, posteriormente, reorganizar la estructura de las mismas. Para mostrar varios documentos de forma simultnea en un navegador, 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.

11

BLOQUE 3

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

12

EDITOR DE PGINAS WEB

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, debes 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.

Nota: Los JavaBeans son un modelo de componentes creado por Sun Microsystems para la construccin de aplicaciones en Java.

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

Adobe ColdFusion. Permite a los desarrolladores crear, implantar y mantener deforma rpida aplicaciones de Internet eficaces para la

operativo.

empresa.

13

BLOQUE 3

Actividad: 2Completa la siguiente tabla sobre los pasos para crear una pgina web.

Descripcin

Planificacin y configuracin del sitio.

Organizacin y administracin de los archivos del sitio. Diseo de las pginas Web.

Adicin de contenido a las pginas.

Creacin de pginas mediante la introduccin manual de cdigo. Configuracin de una aplicacin Web para contenido dinmico. Creacin de pginas dinmicas.

Comprobacin y publicacin.

Actividad: 2 Conceptual Reconoce los pasos necesarios para crear una pgina web. Autoevaluacin

Evaluacin Producto: Tabla descriptiva. Saberes Procedimental Examina los pasos que son necesarios para disear una pgina web. C MC NC

Puntaje: Actitudinal Se interesa por realizar la actividad con eficacia.

Calificacin otorgada por el docente

14


Introduccin al diseo del espacio de trabajo El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, colocamuchas de las operaciones ms frecuentes en barras de herramientas para que pueda realizar cambios en los

documentos rpidamente.En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo

integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao.

Opciones bsicas de trabajoArrancar y cerrar Dreamweaver CS4

Veamos las dos formas bsicas de arrancar Dreamweaver CS4. Desde el botn Inicio (Windows Vista y Windows 7) situado, normalmente, en la esquinainferior 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 CS4 y haz clic sobre l

para arrancar el programa. Desde el icono de Dreamweaver CS4 del

Escritorio.

BLOQUE 3

15

Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botn cerrar , en la esquina superior derecha, como en cualquier ventana de Windows. Pulsar la combinacin de teclas Alt + F4. Pulsar la combinacin de teclas Ctrl + Q. Hacer clic sobre el men Archivo y elegir la opcin Salir.

16


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

17

BLOQUE 3

Para Guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn Guardar de la barra de herramientas estndar. Pulsar la combinacin de teclas Ctrl + S. Hacer clic sobre el men Archivo y elegir la opcin Guardar. Dreamweaver incluye la posibilidad de, en el caso de estar trabajandosimultneamente con varios documentos, poder guardar todos de golpe,

sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botn Guardar Todo de la barra de herramientas estndar. 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.

18


Entorno de trabajo.En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao.

Nota: Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles, inspectores y ventanas, utilice el men Ventana.

A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana de documento D. Grupos de paneles E. Conmutador de espacios de trabajo F. Selector de etiquetas G. Inspector de propiedades H. Panel Archivos.

Introduccin a los elementos del espacio de trabajo El espacio de trabajo incluye los siguientes elementos. La ventana de bienvenida. Permite abrir un documento reciente o crear un documento nuevo. Desde la pantalla debienvenida, tambin puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un

tutorial del producto. Barra de la aplicacin. A lo largo de su parte superior, la ventana de la aplicacin contiene un conmutador de

espacios de trabajo, mens (slo Windows) y otros controles de aplicacin. 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. 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. Barra de herramientas Codificacin. (Slo se muestra en la vista Cdigo.) Contiene botones que le permiten realizar numerosas operaciones de codificacin estndar.19BLOQUE 3

Barra de herramientas Representacin de estilos. (Oculta de manera predeterminada.) Contiene botonesque 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). Ventana de documento. Muestra el documento actual mientras lo est creando y editando. Inspector de propiedades. Permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no est ampliado de forma

predeterminada en el diseo del espacio de trabajo del codificador. Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de documento.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. Paneles. Ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, da doble clic en su ficha. Panel 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 permiteestablecer diversos atributos al insertarlo. Por ejemplo, puedes insertar una tabla haciendo clic en el botn

Tabla del panel Insertar. Si se prefiere, puede insertar objetos utilizando el men Insertar en lugar del panel Insertar. Panel 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 panel Archivos tambin proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el Finder

(Macintosh).

Ventana de documento.La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes: 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. 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. 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. Vistas Cdigo y Diseo. Le permite ver las dos vistas, Cdigo y Diseo, para el mismo documento en una

sola ventana. Vista en vivo. La Vista en vivo, que es similar a la vista Diseo, muestra una representacin ms realista de laapariencia 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. Vista Cdigo en vivo. Slo 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.

20EDITOR DE PGINAS WEB

Cuando una ventana de documento est maximizada (configuracin predeterminada), aparecen fichas en la partesuperior 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 documentosi 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

Nota: JavaScript es un lenguaje de scripting basado en objetos, utilizado para acceder a objetos en aplicaciones.

ventana de documento, haga clic en su nombre de archivo en la barra de herramientas Archivos relacionados.

Actividad: 3Completa los siguientes cuadros y participa en un debate grupal. 1. Sobre el tema de los Elementos del espacio de trabajo, escribe en el parntesis, la letra que identifique a cada elemento del espacio de trabajo. Elementos del espacio de trabajo. Barra de herramientas documento Selector de etiquetas Grupos de paneles Panel Archivos Ventana de documento Inspector de propiedades Barra de aplicacionesConmutador

( )

( ) ( ) ( ) ( ) ( ) ( )

( )

de espacios de trabajo

21BLOQUE 3

Actividad: 3 (continuacin)2. Con respecto al tema Abrir y guardar documentos, escribe la funcin de cada elemento.

Elemento

Funcin

3. En el tema Introduccin a la ventana del documento se estudiaron las diferentes vistas del documento, a continuacin describe de cada una de ellas.

Vistas

Descripcin

Vista Diseo.

Vista Cdigo.

Vista de cdigo dividida.

Vistas Cdigo y Diseo.

Vista en vivo.

Vista Cdigo en vivo.


Actividad: 3 ConceptualIdentifica los elementos de la ventana

Evaluacin Producto: Cuadro de recuperacin. Saberes Procedimental Conceptualiza las diferentes vistas de la venta de documentos. C MC NC

Puntaje:Actitudinal

de documento del Dreamweaver.

Muestra apertura e inters al realizar la actividad.

Autoevaluacin


Herramientas de documento.La barra de herramientas Documento contiene botones que le permiten cambiar rpidamente entre diferentes vistasdel documento. La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento y a su transferencia entre los sitios local y remoto. La siguiente ilustracin muestra la barra de

herramientas de documento ampliada.

A. Mostrar vista de cdigo B. Mostrar vistas de cdigo y diseo C. Mostrar vista de diseo D. Vista en vivo E. Vista

Cdigo en vivo F. Ttulo del documento G. Administracin de archivos H. Vista previa/Depurar en explorador I. Actualizar vista de diseo J. Ver opciones K. Ayudas visuales L. Validar formato M. Comprobar compatibilidad con navegadores En la barra de herramientas Documento, aparecen las siguientes opciones: A. B. Mostrar vista de cdigo. Slo muestra la vista Cdigo en la ventana de documento. Mostrar vistas de cdigo y diseo. Divide la ventana de documento entre lasvistas Cdigo y Diseo. Cuando seleccione esta vista combinada, se encontrar

Nota:Si trabaja con XML, JavaScript, CSS u otros tipos de archivos

C.D. E. F.

disponible la opcin Vista de diseo encima del men Ver. Mostrar vista de diseo. Slo muestra la vista Diseo en la ventana de documento.Vista en vivo. Muestra una vista del documento no editable, interactiva y basada

en navegador.Vista Cdigo en vivo. Muestra el cdigo en s utilizado por el navegador para

basados en cdigo, no podr ver los archivos en la vista Diseo y losbotones Diseo y Dividir aparecern atenuados.

ejecutar la pgina.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, ste aparecer en dicho campo. G.H.

Administracin de archivos. Muestra el men emergente Administracin de archivos.Vista previa/Depurar en explorador. Le permite obtener una vista previa o depurar

I.

el documento en un navegador. Seleccione un navegador en el men emergente. 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 formaautomtica en la vista Diseo hasta que se efecten determinadas acciones, como

guardar el archivo o hacer clic en este botn.23

BLOQUE 3

J.

Ver opciones. Permite definir las opciones de las vistas Cdigo y Diseo yestablecer 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

Nota: La actualizacin tambinactualiza funciones de

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.

cdigo que dependen del DOM (modelo deobjeto de documento),

como la capacidad para seleccionar las etiquetasinicial y final de un

bloque de cdigo.

Barra de herramientas Estndar.La barra de herramientas Estndar contiene botones para las operaciones ms habituales de los mens Archivo yEdicin: 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.

Barra de 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

B. C.D. E.

etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. Haga clic en 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. Herramienta Seleccionar. Activa y desactiva la herramienta Mano. Herramienta Mano. Permite hacer clic en el documento y arrastrarlo por la ventana de documento.Herramienta Zoom y men emergente Establecer nivel de aumento. Permiten establecer un nivel de aumento

para el documento.Men emergente Tamao de ventana. (No disponible en la vista Cdigo.) Permite cambiar el tamao de la

F. G.24

ventana de documento a dimensiones predeterminadas o personalizadas. 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. Indicador de codificacin. Muestra la codificacin del texto del documento actual.


Herramientas de Codificacin.

La barra de herramientas Codificacin contiene botones que le permiten realizar numerosasoperaciones 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 slo est visible cuando se muestra la vista Cdigo. 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.

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.

Herramientas de Representacin de Estilos.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 slo 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.

25

BLOQUE 3

119

A. B.C.

Representar tipo de medio Screen. Muestra cmo aparece la pgina en la pantalla de un equipo. Representar tipo de medio Print. Muestra cmo aparece la pgina en una hoja de papel impresa.Representar tipo de medio Handheld. Muestra cmo

D. E. F. G. H.

aparece la pgina en un dispositivo de mano, como un telfono mvil o un dispositivo BlackBerry. Representar tipo de medio Projection. Muestra cmo aparece la pgina en un dispositivo de proyeccin. Representar tipo de medio TTY. Muestra cmo aparece la pgina en un teletipo. Representar tipo de medio TV. Muestra cmo aparece la pgina en la pantalla de televisin. Alternar visualizacin de estilos CSS. Le permite activar o desactivar estilos CSS. Este botn funciona de manera independiente a los dems botones de medios. Hojas de estilos de tiempo de diseo. Le permite especificar una hoja de estilos de tiempo de diseo.

Actividad: 4Completa las siguientes tablas y participa en un debate grupal.

I.

Escribe el numero del nombre del botn de la Barra de herramientas del documento en el icono que corresponda. Mostrar vistas de cdigo y diseo Vista en vivo Actualizar vista de diseo Administracin de archivos Vista Cdigo en vivo 2. 4. 6. 8. Ttulo del documento Ver opciones Mostrar vista de cdigo Vista previa/Depurar en explorador

1. 3. 5. 7. 9.

10. Mostrar vista de diseo 12. Ayudas visuales

11. Validar formato 13. Comprobar compatibilidad con navegadores

26


Actividad: 4 (continuacin)

II. Escribe en el inciso que corresponde el nombre de los elementos de la barra de estado. A)B)

E) F) G) H)

C)D)

III. Cul es la funcin de la barra de herramientas de codificacin?__________________________________________________________________________________________________ __________________________________________________________________________________________________ __________________________________________________________________________________________________ __________________________________________________________________________________________________

IV. Menciona cinco botones de la barra de herramientas de codificacin.__________________________________________________________________________________________________ __________________________________________________________________________________________________ __________________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________________

27BLOQUE 3

Actividad: 4 (continuacin)V. Escribe en el parntesis que correcto, la letra del icono que corresponde a la definicin de cada elemento de la barra de herramientas de representacin de estilos.Muestra cmo aparece la pgina en un dispositivo de proyeccin. Le permite activar o desactivar estilos CSS. Este botn funciona de manera independiente a los dems botones de medios. Muestra cmo aparece la pgina en una hoja de papel impresa.

Muestra cmo aparece la pgina en la pantalla de un equipo.

(

)

(

)

Muestra cmo aparece la pgina en un

teletipo.Muestra cmo aparece la pgina en un

(

)

(

)

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

(

)

(

)

Le permite especificar una hoja de estilos

de tiempo de diseo.

(

)

( )

Muestra cmo aparece la pgina en la pantalla de televisin.

Evaluacin Actividad: 4 Conceptual Reconoce los elementos de la ventana de documento del Dreamweaver. Autoevaluacin Producto: Actividades diversas. Saberes Procedimental Distingue los diferentes elementos de las barras del entorno de trabajo del Dreamweaver. C MC NC Puntaje: Actitudinal Muestra apertura y respeto para escuchar las opiniones de sus compaeros y docente.



Descripcin general del 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 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.

29BLOQUE 3

Panel 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. 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: A. Categora Comn. Permite crear e insertar los objetos que se utilizan con ms frecuencia, como las imgenes y las tablas. B. 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. C. Categora Formularios. Contiene botones que permiten crear formularios e insertar elementos de formulario, incluidos widgets de validacin de Spry. D. 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. E. Categora Spry. Contiene botones para crear pginas de Spry, incluidos objetos de datos y widgets de Spry. F. Categora InContext Editing. Contiene botones para la creacin de pginasde InContext Editing, incluidos botones para Regiones editables, Regiones

repetidas y la administracin de clases CSS. G. Categora Texto. Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul. H. Categora Favoritos. Permite agrupar y organizar los botones del panel Insertar que utiliza con ms frecuencia en un lugar comn. I. Categoras de cdigo de servidor. Slo 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.


A diferencia de otros paneles de Dreamweaver, el panel Insertar se puede arrastrar fuera de su posicin de acoplamiento predeterminada y colocarse en una posicin horizontal en la parte superior de la ventana de documento. Al hacerlo, cambia de panel a barra de herramientas (aunque no puede ocultarla ymostrarla como el resto de barras de

Nota: Adobe Spry es una biblioteca JavaScript queproporciona a los

herramientas).

diseadores construir pginas que proporcionan una experiencia msinteractiva.

31

BLOQUE 3

125

Actividad: 5Completa las siguientes tablas y participa en un debate grupal.

1.

En el inspector tenemos las propiedades HTML y CSS, identifica cada uno de los siguientes iconos, a continuacin escribe una H si pertenecen a la propiedad HTML, una C si pertenecen a la propiedad CSS y HC si pertenecen a ambas propiedades.

/

2.

Con respecto al panel Insertar, escribe en la tabla la categora segn la descripcin.

Descripcin Contiene botones para crear pginas de Spry, incluidos objetos de datos y widgets de Spry.Permite insertar objetos de datos de Spry y otros elementos dinmicos, como juegos de registros, regiones repetidas y grabar formularios de

Categora

insercin y actualizacin. Contiene botones que permiten crear formularios e insertar elementos de formulario, incluidos widgets de validacin de Spry.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.Permite crear e insertar los objetos que se utilizan con ms frecuencia,

como las imgenes y las tablas. Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.

32


Actividad: 5 Conceptual Identifica los elementos del inspector de propiedades del Dreamweaver. Autoevaluacin

Evaluacin Producto: Tabla. Saberes Procedimental Diferencia los elementos del inspector de propiedades del dreamweaver. C MC NC

Puntaje: Actitudinal Muestra inters y actitud positiva en el desarrollo de la actividad. Calificacin otorgada por el docente

Panel archivos.Utiliza el panel Archivos 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 dearchivos. 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 localNota: Para definir un

sitio de Dreamweaver, slo tiene que configurar una carpeta local. Sin embargo, para transferir archivos a un servidor Web o desarrollar aplicaciones Web, tambin debe aadir datos para un sitio remoto y un servidor de prueba.

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 sta, 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 verlo en Internet.

33

BLOQUE 3

Sitios 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.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: 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. 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. Carpeta de servidor de prueba. Es la carpeta en la que Dreamweaver procesa pginas dinmicas. Utilizacin del 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. 2. Seleccione Sitio > Administrar sitios y seleccione un sitio de la lista de la izquierda. Haga clic en un botn para seleccionar una de las opciones y haga clic en Listo.

Nuevo. Permite crear un sitio nuevo. Editar. Sirve para modificar un sitio existente. Duplicar. Crea una copia del sitio seleccionado. La copia aparece en la ventana de lista de sitios. Quitar. Elimina el sitio seleccionado; no podr deshacer esta accin. Exportar. Permite exportar la configuracin de un sitio como archivo XML (*.ste). Importar. Permite seleccionar un archivo de configuracin de un sitio (*.ste).

34


Panel estilos CSS.El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que afectan a un elemento de pginaactualmente 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 cambiarentre estos dos modos. El panel Estilos CSS tambin te permite modificar

propiedades CSS tanto en modo Todo como en modo Actual.

uede cambiar el tamao de cualquiera de los paneles arrastrando los bordes que los separan. En modo Actual, el panel Estilos CSS muestra tres secciones: Panel Seleccin, que muestra las propiedades de CSS de la seleccin actual del documento. Panel Reglas, que muestra la ubicacin de las propiedades seleccionadas (o una cascada de reglas para la etiqueta. seleccionada, en funcin de la seleccin). Panel Propiedades, que le permite editar las propiedades CSS al definir reglas para la seleccin.

35

BLOQUE 3

En modo Todo, el panel Estilos CSS muestra dos secciones: 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. Panel Propiedades, permite editar propiedades CSS para cualquier regla seleccionada en el panel 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 vaya llevando a cabo.

Guas visuales.Dreamweaver proporciona varios tipos de guas visuales para ayudarte a disear documentos y predecir de forma

aproximada cul ser su apariencia en los navegadores. Puede seguir uno de estos procedimientos: Ajustar instantneamente el tamao deseado para una ventana de documento y comprobar si caben los elementos en la pgina. 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. Utilizar las reglas y guas para proporcionar una pista visual que permita colocar y cambiar el tamao de los elementos de pgina con precisin. 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 le 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 oajustar 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.

36


CierreActividad: 6En binas contesta las siguientes cuestiones y participa en un debate grupal. En el tema Sitios en Dreamweaver, completa la siguiente tabla. Funcin

1.

Sitio en Dreamweaver.

Carpeta raz local.

Carpeta remota.

Carpeta de servidor de prueba.

2.

En el cuadro de dilogo Administrar sitios, encontramos varias opciones. Escribe en nmero de la opcin en el parntesis que corresponda.

1. 2. 3.4.

Exportar Quitar NuevoDuplicar

( ( ( ( ( (

) Sirve para modificar un sitio existente. ) Elimina el sitio seleccionado; no podr deshacer estaaccin. Permite exportar la configuracin de un sitio como ) archivo XML (*.ste). ) Permite seleccionar un archivo de configuracin de un sitio (*.ste). ) Crea una copia del sitio seleccionado. La copia aparece en la ventana de lista de sitios.

5. 6.

Importar Editar

) Permite crear un sitio nuevo.

37

BLOQUE 3

Actividad: 6 (continuacin)3. Elabora un mapa conceptual sobre el panel Estilos CSS.

/

Actividad: 5 Conceptual Reconoce los elementos necesarios para la administracin de sitios web.Autoevaluacin

Evaluacin Producto: Mapa conceptual. Saberes ProcedimentalAdministra la informacin necesaria

Puntaje:Actitudinal

para una pgina web. C MC NC

Participa de manera activa y responsable durante el desarrollo de la actividad.


38


Secuencia didctica 2. Entorno de trabajo del Dreamweaver CS4. InicioActividad: 1Responde las siguientes preguntas. 1. Qu diferencia existe entre la vista de diseo y la vista de cdigo?______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________

2.

Menciona cinco botones de la barra de herramientas de documentos.______________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________

3.

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

4.

Cul es la funcin de los botones que contiene el panel insertar?______________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________

5.

Qu informacin muestra el Inspector de propiedades?______________________________________________________________________________________________ ______________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________

Actividad: 1 Conceptual Reconoce los elementos del entorno de trabajo del Dreamweaver.Autoevaluacin

Evaluacin Producto: Cuestionario. Saberes ProcedimentalAnaliza las funciones del panel insertar

Puntaje:Actitudinal Asume una actitud responsable al

y del inspector de propiedades. C MC NC

responder el cuestionario.

Calificacin otorgada por el Docente

39

BLOQUE 3

Cambio de vista en la ventana de documento.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 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 Diseo. Permite trabajar con el editor visual.

Vista de Cdigo utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. SeNo permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el

cdigo.

40


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. NOTA: Si cambia el tamao de la ventana de documento o de la ventana de la aplicacin, o bien cambia el diseo del espacio de trabajo, Dreamweaver mantendr la relacin de divisin para que las dos vistas estn siempre visibles.

Cambio del tamao de la ventana de documento

La barra de estado muestra las dimensiones actuales de la ventana de documento (en pxeles). Para disear una pgina cuyo mejor aspecto se logra con un tamao especfico, puede ajustar la ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos o crear otros nuevos. Establecimiento de un tamao predeterminado para la ventana de documento. Elija uno de los tamaos del men emergente tamao de ventana situado en la parte inferior de la ventana de documento.

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 laventana del navegador, sin bordes. El tamao del monitor figura entre parntesis. Por ejemplo, la opcin 536 x 196 (640 x 480, Predeterminado) es el tamao de ventana que se debe utilizar si los visitantes van a hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuracin predeterminada con un monitor de 640 x 480.

NOTA: Si no desea asignar un tamao tan preciso,utilice los mtodos

estndar de su sistema operativo, como arrastrarla esquina inferior

derecha de una ventana. En Windows, los documentos contenidos en la ventana de documento se maximizan de manera predeterminada y no es posible cambiar el tamao de un documento maximizado.41

BLOQUE 3

Para que el documento no est maximizado, haga clic en el botn de anulacin de la maximizacin, situado en la esquina superior derecha del documento.

Informes en Dreamweaver.Dreamweaver permite ejecutar informes para buscar contenido, solucionar problemas o probar el contenido. Puede generar los siguientes tipos de informes: Buscar. Permite buscar etiquetas, atributos y texto especfico en las etiquetas. Referencia. Le permite buscar informacin de referencia que puede resultar til. Validacin. Permite comprobar si existen errores de cdigo o de sintaxis. Compatibilidad con navegadores. Permite probar el cdigo HTML en los documentos para comprobar si hay alguna etiqueta o atributo que sean incompatibles con los navegadores de destino. Verificador de vnculos. Permite encontrar y arreglar vnculos rotos, externos y hurfanos. Informes de sitios. Permite mejorar el flujo de trabajo y probar los atributos HTML del sitio. Los informes de flujo

de trabajo incluyen informacin sobre proteccin, sobre documentos modificados recientemente y sobre Design Notes; los informes HTML incluyen etiquetas de fuentes anidadas combinables, la opcin de accesibilidad, texto alternativo que falta, etiquetas anidadas repetidas, etiquetas vacas eliminables y documentos sin ttulo. Registro FTP. Permite ver toda la actividad de transferencia de archivos mediante FTP. Depuracin del servidor. Le permite ver informacin para depurar una aplicacin de Adobe ColdFusion.

Actividad: 2Desarrolla el ejercicio prctico en el centro de cmputo. 1. Completa el siguiente mapa conceptual Cambio de vista en la ventana de documento, describe la utilidad de cada vista de la ventada de documentos. Utilidad de la Vista.

/

Diseo Vistas en la ventana de documento

Cdigo

Dividir

42


Actividad: 2 (continuacin)2. Realiza el siguiente ejercicio prctico en el centro de cmputo, en el cual compruebes lautilidad de los informes en Dreamweaver, anota tus conclusiones y posteriormente participa en

un debate grupal.__________________________________________________________________________________________________________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________

/__________________________________________________________________________________________________________________________________________________________________________________________

_____________________________________________________________________________________________

3. Realiza el siguiente ejercicio prctico en el centro de cmputo, visualiza las vistas de cdigo, diseo y dividir, anota tus conclusiones._____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________ _____________________________________________________________________________________________

Actividad: 2 ConceptualIdentifica las diferentes vistas de un documento y los diferentes reportes

Evaluacin Producto: Ejercicio prctico. Saberes Procedimental Examina las diferentes vistas de un documento en Dreamweaver. C MC NC

Puntaje:Actitudinal Muestra una actitud positiva y

que genera el Dreamweaver.Autoevaluacin

responsable en la elaboracin de la actividad.

Calificacin otorgada por el Docente

43

BLOQUE 3

Elaboracin de pginas con CSS.Adobe Dreamweaver CS4 incluye numerosas funciones diseadas para facilitar la creacin de estilos y diseos para pginas Web mediante hojas de estilos en cascada (CSS, Cascading Style Sheets). Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y reducen el tamao del archivo.

Aspectos bsicos de las hojas de estilos en cascada. Hojas de estilos en cascada Las hojas de estilos en cascada (CSS,) son un conjunto de reglas de formato que determinan el aspecto del contenidode una pgina Web. La utilizacin de estilos CSS para aplicar formato a una pgina permite separar el contenido de la

presentacin.El contenido de la pgina (el cdigo HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentacin del cdigo residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML

(normalmente, en la seccin head).La separacin del contenido y la presentacin hace que resulte mucho ms fcil mantener el aspecto del sitio desde una ubicacin central, ya que no es necesario actualizar las propiedades de las distintas pginas cuando se desea realizar algn cambio. La separacin del contenido y la presentacin tambin depura y simplifica el cdigo HTML, lo que disminuye el tiempo de carga en los navegadores y agiliza la navegacin para personas con problemas de

accesibilidad (por ejemplo, para los usuarios que utilicen lectores de pantalla).El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que desea para la pgina. Con CSS,

puede controlar numerosas propiedades del texto, entre ellas las fuentes y los tamaos de fuente especficos; negrita,cursiva, subrayado y sombras de texto; color de texto y de fondo; color y subrayado de vnculos; etc . Si utiliza CSS para

controlar las fuentes, tambin conseguir un tratamiento ms coherente del diseo y el aspecto de la pgina en mltiples navegadores. Adems de 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. Unelemento de nivel de bloque es un elemento de contenido independiente que

NOTA: HTML, siglas de HyperText Markup Language(Lenguaje de Marcado de

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

Hipertexto), es el lenguaje demarcado predominante para

la elaboracin de pginasweb. Es usado para describir

pgina Web. Puede ajustar mrgenes y bordes para elementos de nivel de bloque, situarlos en una ubicacin concreta, aadirles color de fondo, colocar texto flotantealrededor de ellos, etc. La manipulacin de elementos de nivel de bloque es, en

la estructura y el contenido en forma de texto, as comopara complementar el texto

definitiva, la forma en que se establece el diseo de las pginas con CSS.

con objetos tales como imgenes.


Descripcin de Reglas CSS Una regla de formato CSS consta de dos partes: el Selector y la Declaracin (o, en la mayora de los casos, un bloque de declaraciones). El selector es un trmino (por ejemplo p, h1, un nombre de clase o un identificador) que identifica el elemento con formato; el bloque de declaraciones define cules son las propiedades de estilo. En el siguiente ejemplo, h1 es el selector y el cdigo comprendido entre las llaves ({}) es el bloque de declaraciones: h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; } Cada declaracin consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendr un tamao de 16 pxeles, fuente Helvetica y negrita.El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar independiente del texto al que aplica

formato (normalmente en una hoja de estilos externa o en la seccin head de un documento HTML). Por consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez (y, en el caso de las hojas de estilos externas, la regla puede aplicarse a muchas etiquetas a la vez de distintas pginas). De este modo, CSS proporciona una capacidad de actualizacin extremadamente sencilla. Al actualizar una regla CSS en un lugar, el formatode todos los elementos que usan ese estilo definido se actualiza

automticamente con el nuevo estilo.

Creacin de una nueva regla CSS Puede crear una regla CSS para automatizar la aplicacin de formato a Etiquetas HTML o rangos de texto identificados mediante un atributo clase o ID. Site el punto de insercin en el documento y siga uno de estos procedimientos para abrir el cuadro de dilogo: Nueva Regla CSS.Opcin del inspector de propiedades para iniciar una nueva regla, despus seleccionar Editar Regla.

45

BLOQUE 3

En el cuadro de dilogo Nueva Regla CSS, especifique el tipo de selector para la regla CSS que desea crear: Para crear un estilo personalizado que pueda aplicarse como atributo clase a cualquier elemento HTML, seleccione la opcin Clase del men emergente Tipo de selector e introduzca 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 introduce el punto inicial, Dreamweaver lo har de forma automtica. Para definir el formato de una etiqueta que contenga un atributo ID concreto, seleccione la opcin ID del men emergente Tipo de selector e introduzca el ID (por ejemplo, containerDIV) en el cuadro de texto Nombre del selector. Los ID deben comenzar por un signo de almohadilla (#) y pueden contener cualquier combinacin alfanumrica (por ejemplo #myID1). Si no introduce la almohadilla inicial, Dreamweaver la introducir de forma automtica.

Para redefinir el formato predeterminado de una etiqueta HTML especfica, seleccione la opcin Etiqueta del men emergente Tipo de selector y, seguidamente, introduzca una etiqueta HTML en el cuadro de texto Nombre del selector o elija una en el men emergente. Para definir una regla compuesta que afecte a dos o ms etiquetas, clases o ID simultneamente, seleccione la opcin Compuesto e introduzca 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.


Definicin de regla para body Se pueden definir las categoras, Tipo, Fondo, Bloque, cuadro, Borde, Lista, Posicin y Extensiones.

Definicin para regla estilo en lnea categora Tipo.

Definicin de 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.

47

BLOQUE 3

Despus de definir las propiedades de Reglas CSS y Categoras que vamos a utilizar, damos clic en continuacin podemos utilizar la Nueva Regla CSS o directamente en Definimos regla CSS, categora Tipo.

ya

Uso de la categora Fondo.


Escribimos el texto de la Etiqueta.

Centramos el texto.

49BLOQUE 3

Actividad: 3En binas realiza la siguiente prctica en el centro de cmputo: Utiliza una nueva regla CSS y elije Etiqueta del selector contextual para la regla CSS, posteriormente elige el nombre del selector body, y a continuacin define en la regla para body las categoras tipo y fondo. Guarda la etiqueta y mustrala a tu profesor. 1. Elabora un reporte de la prctica.______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________

2.

Menciona los puntos donde encontraste una mayor dificultad para desarrollar la Etiqueta.______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________

3.

Escribe tus conclusiones.______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________

Actividad: 3 Conceptual Selecciona los elementos necesarios de una regla CSS para implementar una Etiqueta. Coevaluacin

Evaluacin Producto: Ejercicio prctico. Saberes Procedimental Practica el uso de reglas CSS para la elaboracin de pginas web. C MC NC

Puntaje:Actitudinal

Asume una actitud responsable durante el desarrollo de la prctica y al emitir sus conclusiones. Calificacin otorgada por el Docente


Diseo de pginas con CSS.Acerca del diseo de pginas con CSS 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 slo 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). La creacin de diseos CSS desde cero puede ser una tarea difcil debido a la gran cantidad de formas de hacerlo que existen. Puede crear un diseo CSS sencillo de dos columnas estableciendo elementos flotantes, mrgenes, rellenos y otras propiedades CSS mediante un nmero casi infinito de combinaciones. Adems, el problema de la reproduccin en distintos navegadores hace que determinados diseos CSS se muestren correctamente en algunos navegadores y no en otros. Dreamweaver facilita la creacin de pginas con diseos CSS con ms de 30 diseos predefinidos que funcionan en distintos navegadores. La utilizacin de los diseos CSS predefinidos que vienen con Dreamweaver es la forma ms fcil de crear una pgina con un diseo CSS, pero tambin puede crear diseos CSS mediante los elementos con posicin absoluta (elementos PA) de Dreamweaver. En Dreamweaver, un elemento PA es un elemento de pgina HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posicin absoluta asignada. Sin embargo, la limitacin de los elementos PA de Dreamweaver radica precisamente en que tienen una posicin absoluta, lo que hace que sus posiciones nunca se ajusten a la pgina en funcin del tamao del navegador. Si se considera un usuario avanzado, tambin puede insertar etiquetas div de forma manual y aplicarles estilos de posicin CSS para crear los diseos de las pginas. Creacin de una pgina con un diseo CSS 1. 2. Seleccione Archivo > Nuevo. En el cuadro de dilogo Nuevo documento, seleccione categora Pgina en blanco (seleccin predeterminada).En Tipo de pgina, seleccione el

la

3. 4.

tipo de pgina que desea crear.En Diseo, seleccione el diseo CSS que desea utilizar. Puede elegir entre ms de 30 diseos distintos. La ventana Vista previa muestra el diseo y ofrece una breve descripcin del diseo

seleccionado.

51

BLOQUE 3

Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas: Fija. El ancho de columna se especifica en pxeles. La columna no cambia detamao en funcin del tamao del navegador o de la configuracin del texto

del visitante del sitio. Elstica. El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamao del texto. El diseo se adapta si el visitante del sitio cambia la configuracin del texto, pero no en funcin del tamao de la

NOTA: Debe seleccionar un tipo de pgina HTML para el diseo. Por ejemplo, puede seleccionar HTML,ColdFusion,

PHP, etc. No puedencrearse pginas

ActionScript, CSS,Library Item, JavaScript,XML, XSLT ni ColdFusion

ventana del navegador. Flotante. El ancho de columna se especifica como porcentaje del tamao delnavegador del visitante. El diseo se adapta si el visitante del sitio amplia o

Component con un diseoCSS. Los tipos de pgina

reduce el navegador, pero no en funcin de la configuracin del texto. Hbrida. Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo, el diseo dos columnas hbridas, barra lateral derecha tiene una columna principal que se ajusta al tamao del navegador y una columna

de la categora Otro del cuadro de dilogo Nuevo documento tampoco pueden incluir diseos de pgina CSS.

elstica a la derecha que se ajusta al tamao de la configuracin del texto del visitante del sitio.

5. Selecciona un tipo de documento del men emergente DocType. 6. Selecciona una ubicacin para el cdigo CSS del diseo en el men emergente Diseo CSS en.

Aadir a Head. Aade cdigo CSS para el diseo al encabezado de la pgina que se va a crear. 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. Vincular a archivo existente. Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseo. Esta opcin es especialmente til cuando desea utilizar el mismo diseo CSS (las reglas CSS para el mismo se encuentran en un nico archivo) en varios documentos.

Utilizacin de etiquetas div.Acerca de la utilizacin de etiquetas div Puede crear diseos de pgina insertando manualmente etiquetas div y aplicando a stas 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 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. Si no se siente cmodo utilizando cdigo CSS pero s con el uso de tablas, tambin puede probar a utilizar tablas.

52


Insercin de etiquetas div Puede utilizar etiquetas div para crear bloques de diseo CSS e insertarlas en el documento. Esto resulta til si haadjuntado al documento una hoja de estilos CSS con estilos de posicin. Dreamweaver le permite insertar

rpidamente una etiqueta div y aplicar a sta estilos existentes. 1. 2. En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la etiqueta div. Siga uno de estos procedimientos: Seleccione Insertar > Objetos de diseo > Etiqueta Div. En la categora Diseo del panel Insertar, haga clic en el botn Insertar etiqueta Div. Defina cualquiera de las opciones siguientes: Insertar. Permite seleccionar la ubicacin de la etiqueta div y el nombre de la etiqueta si no es una etiqueta nueva. Clase. Muestra el estilo de la clase aplicadoactualmente a la etiqueta. Si ha adjuntado una hoja de estilos, las clases de la hoja de estilos aparecern en

3.

la lista. Utilice este men emergente para seleccionar el estilo que desea aplicar a la etiqueta. ID. Permite modificar el nombre utilizado para identificar la etiqueta div. Si 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. Nueva regla CSS. Abre el cuadro de dilogo Nueva regla CSS. 4. Haz clic en Aceptar.

La etiqueta div tendr el aspecto de un cuadro en el documento con texto de marcador de posicin. Al desplazar el

puntero sobre el borde del cuadro, Dreamweaver lo resaltar. Edicin de etiquetas Div Despus de insertar una etiqueta div, puede manipularla o aadir contenido a ella.Cuando se asignan bordes a etiquetas div, o cuando se selecciona Contornos de diseo CSS, las etiquetas div tienen bordes visibles. (La opcin Contornos de diseo CSS est seleccionada de forma predeterminada en el men Ver > Ayudas visuales.) Cuando el puntero se pasa por encima de una etiqueta div, Dreamweaver la resalta. Puede cambiar

el color de resaltado o desactivar el resaltado. Cuando se selecciona una etiqueta div, puede ver y editar sus reglas en el panel Estilos CSS. Para aadir contenido a la etiqueta div tambin puede situar el punto de insercin dentro de la etiqueta div y, a continuacin, aadir el contenido como lo hara en una pgina.53

BLOQUE 3


Actividad: 4En binas realiza el siguiente ejercicio prctico en el centro de cmputo, utilizando el menInsertar elije Objetos de diseo, posteriormente elige Etiquetas Div, define las categoras.

Posteriormente crea una Etiqueta Div. 1. Elabora un reporte de la prctica.______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________

/____________________________________________________________________________________________________________________________________________________________________________________________ ______________________________________________________________________________________________

______________________________________________________________________________________________

2.

Menciona las diferencias entre una Etiqueta y una Etiqueta Div.______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________

3.

Escribe tus conclusiones.______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ______________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________

Evaluacin Actividad: 4 Conceptual Selecciona los elementos necesarios para implementar una Etiqueta Div. Coevaluacin Producto: Ejercicio prctico. Saberes Procedimental Puntaje:Actitudinal

Practica el uso de Etiquetas Div para la Muestra inters en la realizacin de elaboracin de pginas web. la prctica. C MC NC Calificacin otorgada por el Docente

55

BLOQUE 3

Maquetacin de pginas con HTML.Adobe Dreamweaver CS4 incorpora herramientas que le permiten crear pginas Web mediante tablas y marcosHTML. La aplicacin tambin incluye reglas, guas y una cuadrcula que le permite disear pginas y colocar

elementos con precisin. Establecimiento de reglas Las reglas ayudan a medir, organizar y planificar el diseo. Pueden aparecer en los bordes izquierdo y superior de la pgina, expresadas en pxeles, pulgadas o centmetros.

Establecimiento de guas de diseo

Las guas son lneas que puede

arrastrar sobre el documento desde las reglas. Con ellas puede situar y alinear objetos de forma ms precisa. Tambin puede utilizar guas para medir el tamao de los elementos de la pgina o emular los pliegues (reas visibles) de los navegadores Web.

Utilizacin de la cuadrcula de diseo La cuadrcula muestra una serie de lneas horizontales y verticales en la ventana de documento. Resulta til para colocar objetos con precisin. Puede hacer que los elementos de la pgina con posicin absoluta se ajusten automticamente a la cuadrcula cuando los mueva y cambiar la cuadrcula o controlar el comportamiento de ajuste especificando una configuracin. El ajuste funciona independientemente de si la cuadrcula se encuentra o no visible.

56


Presentacin del contenido en tablas.Tablas Las tablas constituyen una herramienta muy eficazpara presentar datos de tabla y establecer el diseo de texto y grficos en una pgina HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o ms

celdas.Aunque las columnas no suelen especificarse explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas y

celdas.Dreamweaver muestra el ancho de la tabla y de cada columna cuando se selecciona una tabla o cuando el punto de insercin est en ella. Junto a los anchos se encuentran flechas para el men de encabezado de la tabla y los mens de

encabezado de las columnas.Utilice los mens para acceder rpidamente a comandos relacionados con tablas, puede activar

o desactivar los anchos y los mens. Si no ve el ancho de una columna o de una tabla, esta tabla o columna no tiene un ancho especificado en el cdigoHTML. Si aparecen dos nmeros, el ancho visual que aparece en la vista de diseo no coincide con el ancho especificado en el cdigo HTML. Esto puede ocurrir al cambiar el tamao de una tabla arrastrando la esquina inferior

derecha o al aadir contenido a la celda cuyo ancho es superior al establecido.

Prioridad de formato de tabla en HTML A la hora de dar formato a tablas en la vista Diseo, pu

Modulo 8 Info 2012

Documents

Transcript of Modulo 8 Info 2012