Desarolla Aplicaciones Web

5.4. Superposición de capas Asimilando el concepto de capa como el de una lámina de acetato (lámina transparente), verás muy fácilmente el posicionamiento de las capas. Las capas superiores tapan a las inferiores siempre y cuando la superior tenga pintura. En el caso contrario, si la capa superior tiene zonas transparentes, éstas dejarán ver las capas inferiores. Observa el siguiente ejemplo y la diferente posición de las capas:   Además, Photoshop te permite graduar la transparencia de las capas. Desde la ventana de  Capas  puedes modificar la opacidad de la capa activa. El valor 0% significaría que la capa sería totalmente transparente y dejaría ver completamente el contenido de las capas inferiores. En el ejemplo que estamos utilizando, si definiésemos la opacidad de la  capa Árbol  a un 50%, dejaría ver los pájaros que vuelan en la  capa Cielo : 5.5. La visibilidad de las capas A veces, para trabajar mejor no...

Vamos a  ver  una serie de  elementos  que suelen aparecer en las páginas web, como pueden ser las fuentes web, las marquesinas, las reglas horizontales y la fecha. 13.1. Fuentes web Esta versión de Dreamweaver permite usar fuentes web de forma rápida y sencilla. En la web hay sitios como,  Google Webfonts ,  FontsSquitrel  etc. donde podemos obtener nuevas fuentes para nuestras páginas web. Usar estos nuevos tipos de letra puede dar un toque de originalidad a nuestros sitios. Para trabajar con las fuentes web debemos ir al menú  Modificar ,  Fuentes Web ...  y veremos la siguiente ventana. Si pulsamos en el botón  Añadir fuente ...  veremos esta ventana. En esta ventana tenemos que indicar en qué carpeta tenemos el archivo que contiene la nueva fuente (que prevíamente hemos descargado) y pulsar  Aceptar . Las fuentes pueden estar en uno de los cuatro formatos que aparecen en la ventana, EOT, WO...

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. 12.1. Etiquetas Ya sabes que el lenguaje HTML está basado en  etiquetas  que marcan el inicio y fin de cada elemento de la página Web. 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 entr...

Vamos a  ver  cómo insertar  elementos multimedia . En concreto, veremos cómo insertar una  animación Flash , un  sonido  y un  vídeo , que son los más empleados. 10.1. Películas Flash (SWF) 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. El contenido de esta página requiere una versión más reciente de Adobe Flash Player. Las  películas Flash  pueden insertarse en una pági...

En este tema vamos a ver qué son los formularios, para qué se utilizan, y qué elementos pueden contener. Formulario <form> Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia. Los formularios se insertan a través de las etiquetas  <form>  y  </form> . Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta  <form...

En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades. Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. 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 realizarse. Tabla <table> Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. imagen y texto COLUMNA Texto dentro de una celda FILA CELDA Para crear una tabla hay que insertar las etiquetas  <table>  y  </table> . Entre dichas etiquetas habrá que especificar las ...

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta  <img> . Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo  src . Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img  src= "imagenes/logo_animales.gif" > Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a a...

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. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas  <a>  y  </a> . A través del atributo  href  se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace: Visita www.aulaclic.com Habría que escribir: <a  href= "http://www.aulaclic.com" > Visita www.aulaclic.com </a> Tipos de referencias Existen diferentes formas de expresar una referencia a una página a través del atributo  href .   Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del d...

La aplicación de formato a texto en Dreamweaver es similar a la utilización de un programa estándar de tratamiento de texto. Puede establecer estilos de formato predeterminados (Párrafo, Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el tamaño, el color y la alineación del texto seleccionado o aplicar estilos de texto, como negrita, cursiva, monoespacio y subrayado. Dreamweaver dispone de dos inspectores de propiedades integrados en uno solo: el inspector de propiedades de CSS y el inspector de propiedades de HTML. Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante CSS ( Cascading Style Sheets : hojas de estilos en cascada). Los estilos CSS ofrecen a los diseñadores y desarrolladores web un mayor control sobre el diseño de la página web, a la vez que les permite utilizar funciones mejoradas que optimizan la accesibilidad y reducen el tamaño de archivo. El inspector de propiedades de CSS le permite acceder a ...

Tanto si se elige la opción  Nuevo...,  como si se elige la opción  Editar... , se mostrará la misma ventana en la que definir o modificar las características del sitio. Las opciones del sitio se agrupan en diferentes  categorías  que aparecen en la parte izquierda. Para  visualizar las características de una  c ategoría  basta con seleccionarla de la lista haciendo clic en ella. Las dos únicas opciones imprescindibles son las que encontramos en la categoría  Sitio , y de momento son las únicas que cambiaremos: Vamos a ver los datos que hay que editar para la categoría  Datos locales , que será lo único que empleemos de momento: Debe definirse el  Nombre del sitio , que únicamente nos servirá para identificarlo en la lista de sitios. La  Carpeta del sitio local , que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no. Estas dos características so...