Presentación1 dreamweaver
Descargar como PPTX, PDF0 recomendaciones468 vistas
Este documento describe las características y funciones de Dreamweaver CS5, incluyendo cómo iniciar y cerrar el programa, abrir y guardar documentos, las barras y paneles disponibles, y cómo modificar elementos y estructuras de datos en HTML. También explica cómo trabajar directamente con el código HTML y las etiquetas, y los pasos iniciales para crear la estructura de datos de un blog simple.
Presentación1 dreamweaver
- 1. Lina María Ali Pallares 11ºA 2.013
- 2. Que es Dreamsweaver CS5 El entorno de Dreamweaver Arrancar y cerrar Dreamweaver Abrir un documento en Dreamweaver Guardar un documento en Dreamweaver Barras en Dreamweaver Inspectores y paneles Los colores Características del texto HTML desde Dreamweaver Modificación de elementos Estructura de datos
- 3. 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 Java Script, 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.
- 4. La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
- 5. Arrancar y cerrar Dreamweaver CS5 Veamos las dos formas básicas de arrancar Dreamweaver CS5. Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa. Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes . Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí. Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows. Pulsar la combinación de teclas Alt + F4. Hacer clic sobre el menú Archivo y elegir la opción Salir. Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.
- 6. Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + O. Hacer clic sobre el menú Archivo y elegir la opción 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 opción Abrir con → Adobe Dreamweaver CS5. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.: Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + N. Hacer clic sobre el menú Archivo y elegir la opción Nuevo. Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco. En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
- 7. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón Guardar de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl + S. Hacer clic sobre el menú Archivo y elegir la opción Guardar. Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente 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 botón Guardar todo de la Barra de herramientas estándar. Hacer clic sobre el menú Archivo y elegir la opción Guardar todo. Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción 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 opción, 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
- 8. La barra de la aplicación. La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line. Las pestañas de documento. Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.
- 9. La barra de estado. Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación. La barra de herramientas estándar. La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento. La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.
- 10. La barra de representación de estilos. Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. En esta nueva versión se han añadido más opciones, como las de ver los estilos que dependen de seudo clases activas, como cuando el cursor está sobre un elemento. La barra de navegación con navegador. Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos. Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.
- 11. El inspector de Propiedades El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc... Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando. El panel Insertar. El panel Insertar. En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite. Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.
- 12. Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo. Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos a través del botón de la parte superior de la paleta. Los colores pueden asignarse a través de los botones: Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que vimos en este tema. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco.
- 13. Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS. Comenzamos viendo las propiedades HTML Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
- 14. Estilo: El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso. Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado. Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.
- 15. En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de la vista diseño. En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en el código estando dentro de Dreamweaver. En muchas ocasiones veremos que para hacer pequeñas correcciones, nos resultará más cómodo y rápido si lo hacemos directamente desde el código que recurriendo a asistentes. Etiquetas: En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>. Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.
- 16. Modificación de elementos Las páginas de modificación de elementos deberán recoger el parámetro que envíe el listado. De este modo, filtraremos el recordset y podremos mostrar la información de la entrada, categoría o comentario que queramos modificar. Es aconsejable que muestres el contenido del elemento para que antes de modificarlo tengas una vista total de él y veas mejor qué quieres hacer en él. El resto es sencillo, utiliza el asistente Actualizar registro y seguro que no encontrarás muchas más complicaciones. De nuevo en el caso de la página de modificación de entrada deberemos tener especial cuidado en enviar la fecha como tal y de mostrar los nombres de categoría en un desplegable:
- 17. Nuestro primer paso para la creación de un blog será crear la estructura de datos que contendrá la información de las entradas y otros elementos del sitio. En un sitio simple deberemos crear como mínimo 4 tablas: categorías, entradas, comentarios y usuarios. En la tabla categorías deberemos listar el nombre de las categorías en las que se dividen las entradas. En la tabla entradas deberemos almacenar el texto de la entrada con su título y fecha. Obviamente aquí deberemos hacer referencia a qué categoría pertenece la entrada. En un blog más complejo podríamos incluso almacenar qué integrante de la tabla de usuarios creó la entrada... En la tabla comentarios deberemos almacenar el texto del comentario junto con la información del autor, como su nombre y correo electrónico, por ejemplo. Con conocimientos más profundos de PHP podríamos guardar hasta su dirección IP. Finalmente en la tabla usuarios guardaremos el nombre y contraseña de los usuarios que tendrán acceso a la edición del blog. Más adelante verás que incluso se podrían establecer niveles de privilegios entre ellos.