lorena

16
DREAMWEAVER

Upload: angelica-guerrero

Post on 05-Aug-2015

153 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Lorena

 DREAMWEAVER 

Page 2: Lorena

• ¿Qué es Dreamweaver?  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

Page 3: Lorena

• Novedades de Dreamweaver

Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndos crear nuestras páginas con la estructura adecuada.  

Page 4: Lorena

Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

Page 5: Lorena

Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de Adobe, que nos permite comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.

Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco importantes.

 

Page 6: Lorena

• El entorno de Dreamweaver

- La pantalla inicialAl arrancar Dreamweaver aparece una pantalla inicial como ésta, podemos ver sus componentes fundamentales. 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.

Page 7: Lorena

• El TEXTO: PROPIEDADES Y FORMATO

-Características del textoLas 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.

Las propiedades  HTML

Page 8: Lorena

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.

Page 9: Lorena

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

Page 10: Lorena

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

Page 11: Lorena

• MULTIMEDIA

* Películas Flash

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia más empleado en las páginas web.Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador.

Page 12: Lorena

Las películas Flash pueden insertarse en una página a través del menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F

También pueden insertarse empleando el panel Insertar en la categoría Común, pulsando sobre la opción   SWF que aparece al desplegar el menú Media.

Page 13: Lorena

Veamos las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash

Page 14: Lorena

• DISEÑO DE PAGINA. MAQUETACION WEB

* Maquetar una página webLa 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.Hace unos años, la maquetación de las páginas web

se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Page 15: Lorena

• PAGINAS DINAMICAS

tenemos un servidor de pruebas donde pueda ejecutarse el código que introduzcamos en nuestras páginas y permita la creación de bases de datos para almacenar información pasaremos a crear nuestras propias páginas dinámicas de acceso a datos.Una vez instalado WampServer empezaremos a crear nuestras primeras páginas para mostrar información específica y personalizada.Para ello nos apoyaremos siempre en la sección Datos del panel Insertar:

Page 16: Lorena

Recuerda que Dreamweaver es muy personalizable, y puede que este panel lo estés viendo como una barra de herramientas: