Resumen.

Propiedades del texto

 

Las propiedades que encontramos en el texto son 8:

Formato: Esta opción facilita seleccionar un formato de párrafo ya definido para HTML. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato pre formateado se utiliza para que el texto aparezca como ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato pre formateado se dejara como la persona lo haya modificado, en esta caso que hayan varios espacios en lugar de solo uno.Fuente: Esta opción da la posibilidad que la persona escoja el tipo de letra que desea usar, pero lo peculiar es que al escoger aparecen diferentes opciones con el objetico de que el computador escoja la letra que tiene predeterminada.Tamaño: Esta opción permite que la persona escoja el tamaño del texto, le bueno de esto es que tiene diferentes unidades de medida como centímetros, pixeles y más. Color: Esta opción permite que se cambie el color del texto, si no se cambia el color, pues el negro será el color predeterminado.  Estilo: Aquí se encuentra la opción de colocar el texto en cursiva o negrita. Alinear: A través de estos botones es posible la alineación del texto de una de estas cuatro formas: izquierda, centrada, derecha y justificada.Lista: Estos botones permiten crear listas con viñetas o listas numeradas.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.

Hiperenlace

Un hiperenlace o también llamado hipervínculo, o vínculo, es un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

 Referencia absoluta:

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

La ubicación es en Internet, por ejemplo, http: //www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.

 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.

Por ejemplo, supóngase que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http: //www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

 

Referencia relativa al sitio:

Este nos sirve ya que nos conduce a un documento situado dentro del mismo sitio del documento actual. Un ejemplo de este seria:

Si tuviéramos definido como un sitio la carpeta http: //www.misitio.com/,con un enlace en cualquier página del sitio ahttp://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.

Puntos de fijación:

Un punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre.

Podemos referenciar a este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2

ImagenTodas las páginas web acostumbran a tener un cierto número de imágenes ya que se así le llama más la atención visitante. Existen varias clases de formatos de imagen más recomendables que otros para ser introducidos en una página web

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

Propiedades de una ventana Es importante mencionar las propiedades de una imagen, aquí podemos observar

la ventana que nos permite ver las propiedades

Desde el campo de alta podremos asignarle una ayuda contextual a la imagen, esta se mostrara cuando el ratón este sobre ella. Es más accesible ya que el texto que se escribe será leído por los visitantes.

Si se le da un valor al campo Vínculo se convierte la imagen en un link a otra página. Para enlaces externos se debe empezar siempre por HTTP:// y si se quiere crear un vínculo a un enlace electrónico deberá empezar por mailto:

Y se puede seleccionar su alineación con respecto al texto desde el campo Alinear.

Ya por último las opciones Espacio V y Espacio H  serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.

Cambiar el tamaño de una imagen  

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen dentro de la página.

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.

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:

Imagen original Imagen con tamaño modificado

     

Tabla Las tablas en dreamweaver están formadas por un conjunto de celdas,

distribuidas en filas y columnas.

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 el Ancho de la tabla,El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia que existe entre ellos es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se vea la página, en cambio el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página web.

Grosor del Borde indica de la tabla en píxeles.

Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla. Es recomendable utilizar unos encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla en el sitio web.

Si se quiere incluir un título, se indica en el Texto, el título aparecerá fuera de la tabla.

En alinear texto indican dónde se quiere alinear el título con respecto a la tabla.

En pocas palabras estos indican muna pequeña descripción de las tablas en un sitio web en donde los lectores a leer la el texto podrán identificar un tema del otro.

Aplicar estilos CSSHasta ahora, has encontrado un poco en el código de las páginas, habrás visto

etiquetas que introducían estilos CSS en ellas.

La forma más habitual de presentarse es en la sección head de la página son de esta forma:

<style type="text/cuss">

<!--

body { font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

text-align: center;

background: urn('imagines/fondo.gif') repeat-x bottom;

 Este método lo podremos utilizar para incrustar el código directamente sobre el archivo HTML.

 En este caso debemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS) donde escribiremos las reglas de estilo del mismo modo en el que hemos visto más arriba pero eliminado el componente HTML:

body {font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

text-align: center;

background: urn('imagines/fondo.gif') repeat-x bottom;}

Luego debemos vincularlo en la página HTML utilizando la etiqueta link:

<link rel="stylesheet" href="ruta/del/estilo/nombre.css" />

 

Una página puede contener ambos tipos de estilos CSS, como por ejemplo, tener un archivo vinculado y luego un bloque de estilo incrustado. O incluso tener varias hojas de estilo asociadas.También es posible declarar el estilo en línea. Es decir, tal y como se van creando las etiquetas HTML, para ello deberás utilizar el atributo style:

<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>.