Introducci³n a Dreamweaver

download Introducci³n a Dreamweaver

of 17

  • date post

    19-Oct-2014
  • Category

    Technology

  • view

    10.574
  • download

    2

Embed Size (px)

description

Introducción a Dreamweaver El entorno de Dreamweaver CS4 El Texto Usando imágenes Uso de Tablas Creando Hipervínculos Usando elementos Multimedia:flash,.Sonidos, animaciones, y Videos.

Transcript of Introducci³n a Dreamweaver

Unidad 2

Docente MARCO A. CORCUERA DE LOS SANTOS. rea: Tecnologa Audio Visual y Gestin.

marco2703@latinmail.com

ESCUELA SUPER IOR DE BELLAS ARTES PBL ICA

MACEDONIO DE LA TORRE

CAPITULOS

Introduccin a Dreamweaver

El entorno de Dreamweaver CS4

El Texto

Usando imgenes

Uso de Tablas

Creando Hipervnculos

Usando elementos

Multimedia:flash,.Sonidos,

animaciones, y Videos.

2

Conceptos bsicos

Qu es Dreamweaver?

Dreamweaver es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS4 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Provee los conocimientos para disear, codificar y desarrollar sitios, pginas y aplicaciones Web, mediante herramientas tiles y sencillas de manejar, dentro de un ambiente cmodo y con todas las opciones a la mano. Tambin puede crear potentes aplicaciones de Internet. Puede trabajar en un solo entorno para crear, hacer y administrar rpidamente sitios web y aplicaciones de Internet. Mediante herramientas visuales de composicin, desarrollo rpido de aplicaciones web, con un amplio soporte para la edicin de cdigo.

Trminos Bsicos usados en este manual:

World Wide Web (WWW): Es un sistema de informacin, propio de Internet. Sus caractersticas son: o Informacin por hipertexto: Diversos elementos (texto o imgenes) de la informacin que vemos

en pantalla tiene vnculos con otras informaciones que pueden ser de otras fuentes. Para acceder a esta otra informacin bastar con hacer clic sobre dichos vnculos.

o Grfico: En la pantalla aparece simultneamente texto, imgenes e incluso sonidos. Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con

un servidor y comprender el lenguaje de todas las herramientas que manejan la informacin de Web. Ejemplo Internet Explorer.

Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.

HTTP: Es el protocolo de transferencia de hipertexto, es decir, el protocolo que los servidores de World Wide Web utilizan para mandar documentos HTML a travs de Internet.

URL (Uniform Resources Locator): Localizador Uniforme de Recursos, o dicho ms claramente, es la direccin que localiza una informacin dentro de Internet. El URL tiene dos partes separadas por: ://. La parte antes del ://, es el Protocolo, que puede ser http:// . La segunda parte es el Host, el cual da el nombre del computador al cual se accesar.

El Host puede constar de varias partes separadas por un punto. La ultima parte se refiere al tipo de organizacin a la cual pertenece el computador (servidor).

Por ejemplo, .gov: cuando pertenece a un Gobierno, .com: organizaciones comerciales; .edu: instituciones educacionales; .mil: organizaciones militares. Tambin hay terminaciones con las siglas del pas al que pertenecen, por ejemplo: .ve: organizaciones o empresas originales o radicadas en Venezuela.

HTML: Estas siglas se corresponden con la definicin "Lenguaje para marcado de hipertexto", se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben mostrarse) y atributos (parmetros que dan valor a la etiqueta).

3

El entorno de Dreamweaver

Vamos a ver cules son los elementos bsicos de Dreamweaver, la pantalla, las barras, los paneles,

etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y

para qu sirven.

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 ms fcil entender el

resto del curso. La pantalla que se muestra a continuacin (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 dnde, como veremos ms adelante.

Las barras

La barra de ttulo

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el

nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

La barra de mens

4

Agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas

con los diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las

operaciones ms habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras

operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al

encontrarnos en un documento en blanco estamos directamente sobre la etiqueta ).

Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector

cambian dependiendo del objeto seleccionado.

A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o

inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son

usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc.

Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina

5

inferior-derecha.

Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

Permite insertar elementos en un documento sin la necesidad de recurrir al men Insertar. Los elementos estn

clasificados segn su categora: tablas, texto, objetos de formulario, etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

El texto

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato:

Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado 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 preformateado se respetar que hayan varios espacios en lugar de solo uno.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre. Evitars horas perdidas buscando fallos

6

Fuente: Permite seleccionar un conjunto de fuentes.

Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica.

Tamao:

Permite cambiar el