Dreamweaver CS3

ALUMNO: Mena garcia felix

PROFESOR: EMILIO FELIX ALBERTO

CONCEPTO:

• Es un software fácil de usar que permite crear páginas web profesionales.

FUNCIONES:

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

ELEMENTOS BASICOS DE Dreamweaver CS3:

• la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.

Configuración de un sitio local:

• En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

El texto :

• Características del texto-. Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades.

Hiperenlaces:

• es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

• Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Tipos de enlaces:

• Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.

• Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual.

• Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual.

• Puntos de fijación: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser nombre_de_documento.extension#nombre_de_punto.

Imágenes:

• Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.

Tablas:

• Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

• Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

Insertar una tabla:

• Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

Marcos:

• Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientraMarcos que otras sí pueden cambiar.

• Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Multimedia :• Vamos a ver cómo insertar elementos multimedia. En

concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo.

• Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensión SWF.

• También pueden insertarse pulsando sobre la opción Flash que aparece en la pestaña Común del panel Insertar, botón Media.

Las plantillas :

• Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas.

• No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada una.

Crear plantillas :

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos. La pestaña Activos se puede abrir a través del menú Ventana, opción Activos. También pulsando F11.

HTML desde Dreamweaver :

• En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaverpara 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.

Capas:

Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página (es decir, que tienen una posición absoluta en la página), en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.

Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.

Insertar una capa:

• Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fácil seleccionar la deseada a la primera.

Comportamientos:

• Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.

• La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa el puntero sobre ella para ver qué es lo que ocurre.

Abrir comportamientos:

• El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F4.

Comportamientos Avanzados :

• En este tema veremos otros comportamientos y veremos cómo utilizarlos y aprovecharnos de esta característica de Dreamweaverpara crear diversas funcionalidades automáticamente.

• Para crear un mensaje emergente deberás seleccionar el elemento al cual irá asociado el mensaje, en el ejemplo es un texto.

• Una vez seleccionado ves al panel Comportamientos (Mayus+F4) pulsa el botón y selecciona la opción Mensaje emergente.

• Se abrirá el siguiente cuadro de diálogo:

Estilos CSS Avanzado :

• En este tema aprenderemos más sobre CSS, pero orientándonos más a qué es CSS y cómo crear estilos CSS para crear páginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium).

Sitios Remotos :

• Definir un sitio remoto significa establecer una configuración de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así poder trabajar a la vez con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet.

• El modo en el que veremos que el programa se comunica con tu servidor será FTP, ya que es prácticamente el más utilizado y muy pocos utilizan otras alternativas.

Configurar un Sitio Remoto • Así que haz clic en Sitio y selecciona Administrar sitios. • Selecciona el sitio con el que quieras establecer comunicación

remota (o crea uno nuevo para el caso) y pulsa Editar. • Verás que se abre el cuadro de diálogo de Definición del Sitio. • Ahora en el desplegable Acceso selecciona el método de acceso

que deberá utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opción FTP.

• Se mostrarán las siguientes opciones:

Servidor de Pruebas :

• PHP es un lenguaje de programación. Pero no te preocupes, Dreamweavercontiene las suficientes herramientas como para manejarte sencillamente sin que tengas que saber ni una línea de código.

• Hasta ahora nosotros creábamos páginas con extensión HTML, este tipo de archivos, cuando son requeridos por un navegador se descargan automáticamente del servidor y se visualizan tal y como son en el cliente (el ordenador del usuario que está viendo la página).

Páginas Dinámicas :

• En esta unidad vamos a ver cómo utilizar Dreamweaver para crear páginas PHP y acceder a datos almacenados en una base de datos.

• Ahora que ya 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.

• Para ello nos apoyaremos siempre en la sección Datos de la barra de herramientas Insertar:

Cómo crear un Blog:

• Un blog es una página web donde se introduce contenido periódicamente sobre un tema en particular.

• Su contenido suele organizarse en entradas que se van añadiendo con una asiduidad relativa.

• Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces solamente los registrados) pueden dejar su opinión sobre la entrada o sobre el blog en general.