Creación de una pagina Web en dream weaber Alumno : Kevin Guillermo silva caro Tema : taller de office Profesor : víctor.

Presentación del tema: "Creación de una pagina Web en dream weaber Alumno : Kevin Guillermo silva caro Tema : taller de office Profesor : víctor."— Transcripción de la presentación:

1

2 Creación de una pagina Web en dream weaber Alumno : Kevin Guillermo silva caro Tema : taller de office Profesor : víctor

3 Índice: conceptos básicos:. Que es el dreamweaver?.Como guardar un documento Conceptos del tema:.como editar paginas Web.Las barras.Inspectores y paneles.vista de un documento.Crear o editar paginas Web sin conexión a Internet.Abrir un sitio Web.Ver un sitio Web.Subir archivos al servidor.Propiedades de un documento.Tablas.Hiperenlaces.imagenes

4 Concepto básicos Que es el 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 JavaScript, etc.., de una forma muy sencilla y visual. Como guardar un documento? 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.

5 Conceptos del tema Editar paginas Web Concepto: Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo. Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

6 Entorno de dreamweaver 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.

7 Las barras 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 yuna caja de búsquedas para obtener ayuda on line. 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.

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

9 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 pseudo 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.

10 Inspectores y paneles 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. 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. Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado.

11 Vistas de un documento la vista Diseño :permite trabajar con el editor visual. La vista Código :La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

12 La vista Dividir : La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra. La Vista en vivo : La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador. La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan correctamente en el navegador. La vista Código en vivo : Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente.

13 Configuración de un sitio local Crear o editar un sitio Web sin conexión a Internet: Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio. Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos. También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio... En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

14 propiedades y formato Características del texto: 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: Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Estilo: El botón B encierra el texto en una etiqueta, que por defecto se muestra en negrita. El botón I, lo encierra entre, 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 nosuele 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 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, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

15 Hiperenlaces Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://. Por ejemplo, http://www. aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html. La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos). Referencia relativa al documento : La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir, partimos de la carpeta en la que se encuentra el documento. Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm. Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemploimagenes/miimagen.gif.

16 Imágenes Insertar una imagen: 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. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I. Propiedades de una imagen Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente. Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen n el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

17 Cambiar el tamaño de una imagen: Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original. Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc.. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes: Existen dos formas de modificar el tamaño. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen. Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.

18 Tablas Insertar una tabla: Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como elAncho de la tabla. El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde. Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas. Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

19 Seleccionar elementos de una tabla: Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el punto de inserción en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla. También es posible seleccionar una pulsando con el ratón sobre el borde exterior que la rodea, o pulsando que aparece en la barra de estado de la ventana de documento.

20 Bibliografía: http://www.aulaclic.es http://dreamweaver-cs3.blogspot.com/