Desarolla Aplicaciones Web

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

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á 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. En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los números en azul del 1 al 9. 1.- Las barras. 2.- Las pestañas de documentos. 3.- La barra de estado. 4.- El panel de propiedades. 5.- Área de paneles. 6.- Paneles y ventanas. 7.- Línea inferior de pestañas. 8.- Vista diseño del documento. 9.- Vista código del documento 1- La barra de la aplicación. La...

Dreamweaver CS6 es un software fácil de usar que permite crear  páginas web   profesionales. Las funciones de edición visual de Dreamweaver CS6 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. 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 program a. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de  Adobe ,  la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.  Novedades de Dreamweaver CS6: En este punto comentaremos las característi...