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.
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.
![]()
IMÁGENES
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.
![]()
TABLAS
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades.
Hoy en día, 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.
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.
![]()
FORMULARIOS
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> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
![]()
MULTIMEDIA
Para insertar un sonido en una presentación muestra la ficha Insertar y en el grupo Multimedia despliega el menú Sonido. Las distintas opciones te permitirán escoger el origen del sonido que deseas insertar.
Audio de archivo... abre un cuadro de diálogo para escoger el archivo de audio del disco duro. Permite varios formatos distintos: midi, wav, wma, adts, aiff, au, mp3 y mp4.
![]() ![]()
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.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas en ella. Esto nos puede ahorrar mucho trabajo.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.
Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con Dreamweaver.
![]()
HTML DESDE DREAMWEAVER CS6
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 programa.
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.
![]()
OTROS ELEMENTOS
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 previamente hemos descargado) y pulsar Aceptar. Las fuentes pueden estar en uno de los cuatro formatos que aparecen en la ventana, EOT, WOFF, TIF y SVG. Hay que leer las condiciones de uso de la fuente y aceptarlas. A partir de este momento ya podemos usar la fuente como una fuente más. Por ejemplo, al definir nuevos estilos aparecerá en el desplegable Fuentes.
Esta línea esta escrita con la fuente web Galindo regular.
Para conseguir nuevos ficheros de fuentes web simplemente hay que visitar una de las webs que los ofrecen y descargarse el fichero con la fuente.
CAPAS
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de 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.
Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya vimos, sirven para agrupar bloques de texto.
A través del atributo id se le da un nombre a la capa, y a través del atributo style se establecen el resto de propiedades de la capa.
A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).
A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
![]() Alicia Alvarado 4 Av Porg |
Comentarios
Publicar un comentario