lunes, 28 de abril de 2014

Practica 19. Ventana dreamweaver y barra de herramientas

Ventana principal de Dreamweaver



La Ventana de documento o zona de edición, en la que escribirá y creará los detalles de una página.
La barra Insertar, que contiene botones para la inserción de diversos tipos de objetos, como imágenes, tablas, etc.
El botón desplegable Común  cuenta con un buen número de barras, que clasifican por temas los objetos que se pueden manipular. Cada objeto es un fragmento de código HTML y podrá establecer diversos atributos al insertarla.



La barra de herramientas
La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente, cambiar el título del documento o previsualizar la página en el navegador. Los elementos del menú Opciones (botón situado en el extremo derecho de la barra de herramientas) cambia en función de la vista que seleccione. 


  • Para ver sólo código en la ventana de documento, haga clic en el botón Vista de código.
  • Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el botón Vistas de código y diseño.
  • Para ver sólo la vista de Diseño, haga clic en el botón Vista de diseño.
  • Para introducir un título para el documento, utilice el campo Título. Si el documento ya tiene título, éste aparecerá en dicho campo.
  • Para poner, obtener o proteger un archivo, haga clic en el botón de menú de "Estado de archivo".
  • Para previsualizar o depurar un documento en un navegador, haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente.
  • Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de diseño.
  • Para obtener información de referencia sobre código HTML, CSS y JavaScript, haga clic en el botón Referencia.
  • Para desplazarse por el código, haga clic en el botón Navegación por el código. Para obtener más información, consulte "Introducción al depurador JavaScript".
  • Para mostrar u ocultar la regla, la cuadrícula y las ayudas visuales, haga clic en el botón de menú Opciones.
El pánel objetos
Este pánel contiene botones que permiten la creación e inserción de diversos tipos de objetos, como tablas, vínculos, capas e imágenes. El pánel contiene siete categorías de forma predeterminada: Común, Formularios, Marcos, Head, Invisibles y Caracteres. También contiene botones que cambian de vista: Estándar y Disposición. Cada uno de estos elementos serán explicados en temas posteriores.




Para cambiar de categoría dé clic sobre alguna de las pestañas situadas en la parte superior del pánel.
Si desea insertar un objeto en el documento haga clic en el correspondiente botón del pánel o arrastre el ícono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá un cuadro de diálogo en el cual se le pedirá que seleccione o inserte el archivo u objeto deseado.
Si desea insertar un marcador de posición mantenga presionada la tecla Control mientras da clic en el ícono para insertar el objeto. (Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, mantenga presionada la tecla Control y haga clic en el botón Imagen.)
Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos, como las barras de navegación, las capas, los botones Flash, los marcos, etc., no insertan marcadores de espacio.
Inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades del elemento que esté seleccionado actualmente, puede ser un objeto o texto. Es posible seleccionar los elementos en la ventana de documento o en el inspector de código.
La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventana de documento. (Para algunas propiedades, los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edición de la propiedad, se presiona Enter o se presiona Tab para cambiar a otra propiedad.)
El contenido del inspector de propiedades varía en función del elemento seleccionado. Si quiere obtener información sobre propiedades concretas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono Ayuda, situado en la esquina superior derecha del inspector de propiedades.
El inspector de propiedades muestra inicialmente las propiedades del elemento seleccionado que se utilizan con mayor frecuencia; para ver todas las propiedades haga clic en la flecha de ampliación situada en la esquina inferior derecha del inspector de propiedades, para ver más propiedades del elemento.


A la derecha de la ventana, tenemos los grupos de paneles. Son conjuntos de paneles relacionados y apilados y se les identifica con un nombre.
Para desplegar un grupo de paneles, haga clic en la punta de flecha https://blogger.googleusercontent.com/img/proxy/AVvXsEjkBztjTOv39DFM29XpYnHO2zEqNS5lCSfQ1-2K9i4gyvyXIsQYn3JDrrXcTDjEjAEJRNBxLTntYUYyEVnykldreLefyUMVr_gXBi78HmudSwEHF-dclL6S09d-wXpBCQjcRzZwxpZpEh0yiEwid8lVjeksLNhD7Z2NAHjNXzX7jt6-Ag3b-bveg2Y7DMO4QKSBW5sAft_ARmQk= de despliegue
Para desacoplar un grupo de paneles, arrástrelo pinchando en el botón mover https://blogger.googleusercontent.com/img/proxy/AVvXsEg3oPuNBkzrf9yqnGb3ODOkgl4dKdmWUSURlY5fRb3WBCiEPwlALGGwKxAFbZmaAfT0Js98tO0w7cMquLO-qC-O3HQQXbXHRGDiDPoDVPPw8Ot5PwyT3yIYlzZI1Yut5R6m7PpiHgXx8wg4yb-h8aAYhV29vYdhsYOAQDle2mTnnL5oaUSzQhwt2sjJp08BnRDuUbwnEbQjDBE= (formado por dos columnas de puntitos) situado en el borde izquierdo de la barra de título del grupo.
10.  El panel Sitio, desplegado, permite administrar los archivos y carpetas que forman el sitio Web.
11.  El botón Ampliar / Contraer https://blogger.googleusercontent.com/img/proxy/AVvXsEiZt1g_JX5oryrFkhTwl0vtGZxq38fOp33HFqwQ_O-Y_7WuxcNTOw1QZiBYA__228QZl7xl-bIaL4t8siz6RkmsYNepzgFBSyBLMJlCS14_lIBGzG-2gC8tbQEgD1lE6SwB05xJ47KqUucDfV4DsyvoTgDLCKMgrfwys9OFgWxWZyNIC9RtlEN9Oh4bgjBvpHpzYQyo8qGPwSANyQ= del panel de Archivos ofrece la posibilidad de ver todos los archivos del disco duro local de manera semejante a como lo hace el Explorador de Windows.
12.  Interesante es el botón en forma de punta de flecha que se ve en el lateral izquierdo del panel. Haciendo clic, conseguimos plegar el panel hacia el margen derecho para ampliar la superficie de edición o volverlo a desplegar para ver de nuevo el árbol de archivos del sitio Web.
13.  Recuerde que pulsando F4 oculta todos los paneles lo que aumenta la superficie de la vetana documento. Esto es muy útil cuando escribe la página Web.




Dreamweaver ofrece otros muchos paneles, inspectores y ventanas, como el panel Historial y el Inspector de código. Para abrir paneles, inspectores y ventanas tiene que utilizar el menú Ventana.

Practica 18. Terminología basica del software para diseñar paginas web


1; Dreamweaver CS5

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.
 Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
Además 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.


2; CSS

CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas.


3; Plantilla de Dreamweaver

Una plantilla es una estructura en la que hay partes no editables (que no se van a poder modificar) y otras que son modificables para llenarse de contenido.


4; Contenedor en Dreamweaver

Los contenedores están incluidos en la misma página, pero cada contenedor puede albergar un elemento muy concreto tal como una imagen, una animación o un texto, y podemos situarlo donde deseemos, en cualquier parte de la página.


5; Comportamientos en Dreamweaver

Los comportamientos de Dreamweaver introducen en los documentos código JavaScript que permite a los visitantes interactuar con la página Web para modificarla de diversas maneras o para que se realicen determinadas tareas. Un comportamiento es una combinación de un evento con una acción que desencadena ese evento.


6; Sitio local

Al definir un sitio local, está indicando a Dreamweaver el lugar en el que tiene intención de almacenar todos los archivos de un sitio concreto. 


7; Sitio dinámico

Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando  una mayor interactividad con el navegante. Aplicaciones dinámicas como  encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ....


8; Sitio interactivo

Un sitio web interactivo permite a los usuarios participar y aportar contenido. Un sitio interactivo es básicamente un sitio dinámico al que se le han añadido prestaciones interactivas.

http://www.designioweb.com/interactivos.html

9; Región editable

En una plantilla, las regiones editables son las partes de la página que se pueden cambiar en los archivos basados en esa plantilla. Las regiones bloqueadas (no editables) son las partes del diseño de la página que permanecen constantes de una página a otra.


10; Maquetación

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página.


11; Etiqueta Div

Se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.


12; Tabla

Las tablas son una herramienta potente para presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web formas de añadir estructura vertical y horizontal a una página.


13; Formulario

Los formularios sirven para que los usuarios o visitantes de la página envien un comentario o consulta al cliente.


14; Formulario de contacto

Los formularios de contacto son una gran manera hacer que los visitantes se unan a tu sitio