Programa Adobe Dreamweaver CS6

Sesión de Aprendizaje

Diseño Web

Centro de Educación Continua

3

El texto: Propiedades y Formato
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar
al texto clases y estilos creados por nosotros mismos, no predefinidos.

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

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS
para que se vean exactamente como queramos.
· Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato
predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato
predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen
varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios
espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como
tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es
importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que
siempre podremos personalizarlo.
· Estilo:
El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, 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 no suele 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. Además, emplea etiquetas que están en desuso.
· 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 <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha.
En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

Accediendo a las propiedades CSS.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos
cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición determinada o
que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación de páginas web.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pág 21

· Fuente: Permite seleccionar un conjunto de fuentes. A su vez. Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear. Aparecen conjuntos de fuentes en lugar de una sola.Programa Adobe Dreamweaver CS6 Centro de Educación Continua Sesión de Aprendizaje Diseño Web 3 El texto: Propiedades y Formato Tenemos más posibilidades a la hora de aplicar formatos. Veremos esto antes de acabar el tema. o a través del menú Formato. el texto se verá con la fuente Arial. Helvetica. · Panel CSS: Este botón abre el panel CSS si no lo tuviéramos abierto. Listas Es posible insertar texto a modo de lista. ya sea a través del inspector de propiedades. de la regla seleccionada. porcentajes del tamaño base. el color del texto por defecto será el negro. etc.Universidad Continental . si seleccionamos Arial. Por ejemplo. y cómo lo hacemos. por ejemplo sobre un párrafo. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto.. La lista con viñetas (sin ordenar) se selecciona a través del botón Adobe Dreamweaver CS6 . Pág 22 . en píxeles. Si no se ha establecido ningún color en las propiedades de la página ni aquí. · Editar regla: Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS. El tamaño lo podemos indicar en diversas unidades. Para que un texto que ya ha sido introducido en el documento se convierta en una lista. Dreamweaver CS6 nos proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en cascada . · Tamaño: Permite cambiar el tamaño del texto. Podemos definir una Nueva Regla. mientras que la lista numerada (ordenada) se selecciona a través del botón . · Estilo: Estos botones ponene el texto en negrita y cursiva respectivamente. sans-serif. centrada. simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente. pero si esta no existe se verá en Helvetica. eliminarla o aplicar una clase.LMachuca . · Regla de destino: Las reglas CSS sirven para definir a qué elemento aplicamos el estilo. ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. ignorando el color que se haya definido en las propiedades de la página.. · Color: Permite seleccionar el color de la fuente. derecha y justificada. · Alineación: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda. la lista puede ser numerada o con viñetas.

Poner el despertador Ejemplo de lista con viñetas (sin ordenar): ·Perro ·Gato ·Aves ·Canario ·Loro ·Hámster Para establecer listas anidadas dentro de otras como en los ejemplos anteriores. ì. Caracteres especiales A veces necesitarás introducir caracteres especiales en tus páginas. mientras que la lista numerada (ordenada) se selecciona a través del botón . Ca Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. podemos incluir caracteres como á.Programa Adobe Dreamweaver CS6 Sesión de Aprendizaje Diseño Web Centro de Educación Continua 3 El texto: Propiedades y Formato La lista con viñetas (sin ordenar) se selecciona a través del botón . deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Ponerme el pijama 4. de forma rápida. es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. Sacar los libros de ese día 2. es posible acceder a las propiedades de la lista seleccionada. ç. Pero si quieres poner dos espacios en blanco y los introduces por teclado. ö. opción Lista. Lavarme los dientes 5.. ê. Si el carácter que buscas no se encontrase allí. haz clic en Otro. el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:).. Ejemplo de lista numerada (ordenada): 1. Lo mismo ocurrirá con los caracteres que no tenemos en el teclado. A través del menú Formato.. Introducir los libros del día siguiente 3. Preparar la mochila 1. Dreamweaver no los creará. y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia: Adobe Dreamweaver CS6 . Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú. Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño. y en el caso de las listas ordenadas.LMachuca Pág 23 . el número por el que comenzará el recuento.Universidad Continental . En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas). Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado. Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen inferior.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. También podemos crear clases. podemos definirlo como un estilo en línea (afectará sólo al elemento seleccionado) o crear una regla. Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos. definir prácticamente cualquier propiedad de los elementos que contendrán nuestra web. Algo así como definir un estilo y darle un alias. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página. por lo que si alguna vez queremos modificarlo. Para ello. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización. al crear el estilo. Esto incrustará el estilo en la propia etiqueta HTML. Por ejemplo.. cuando actualiza un estilo CSS. en Regla de destino. En cualquier caso nos aparecerá la siguiente ventana: Adobe Dreamweaver CS6 . si queremos que un determinado estilo afecte a un único elemento y en un caso puntual. Veámoslo: Crear un estilo en línea. o a todo el sitio si la guardamos en un archivo CSS. deberemos de ir al elemento. <h2>. podemos crearlo como un estilo en línea. También permiten.). Por otro lado. En el Inspector de propiedades CSS.. El estilo afectará a todos los elementos a los que apliquemos esa clase. el formato de todos los documentos que usan ese estilo se actualiza automáticamente. seleccionamos <Nuevo estilo en línea>. seleccionamos < Nuevo estilo en línea >. en Regla de destino. Introducción Los estilos CSS se utilizan para combinar una serie de atributos del texto. Crear un estilo personalizado Con Dreamweaver CS4. Crear una regla de estilo: Vamos a crear un estilo que afecte a todas las etiquetas de un tipo. Aunque tenemos que decidir a qué elementos afecta. En el Inspector de propiedades CSS. que puede afectar a toda la página. como pueden ser el color o el tamaño. como veremos más adelante.. lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo.. etc. A continuación. las características que apliquemos a un texto a través del Inspector de propiedades CSS crearán automáticamente estilos CSS. como encabezados (<h1>. enlaces (<a>). desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. párrafos (<p>). Podemos definir los estilos para determinadas etiquetas.Universidad Continental . sólo a las que estén contenidas en determinados elementos o una clase. definimos las propiedades del estilo.Programa Adobe Dreamweaver CS6 Sesión de Aprendizaje Diseño Web Centro de Educación Continua 3 Estilos CSS.LMachuca Pág 24 .

Es el alias que tomará el estilo. pues aquí introduciremos el nombre de la clase. se escribe precedido por #. · ID. p.. indicará el elemento seleccionado. y para que afecte a un elemento.Programa Adobe Dreamweaver CS6 Centro de Educación Continua Sesión de Aprendizaje Diseño Web 3 Tipo de selector: el tipo de selector es fundamental.css. Podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. id. Combina los selectores anteriores. por lo que sólo estará disponible dentro de ésta. pero no a los encabezados con esa clase. Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la página. que podemos dar a cualquier elemento. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu. etc. etiqueta. · Compuesto. ya que determina a qué elementos afectará el estilo.. Si ya estamos utilizando una hoja de estilo. y que lo identifica de forma única y concreta. En el selector. Depende íntimamente del tipo de selector. El nombre de la clase va precedido por un punto.Universidad Continental . Nombre del selector: esta opción permite asignar un nombre al selector. pero podemos escribir el que queramos. El estilo afectará a todas las apariciones de la etiqueta HTML indicada. Podemos elegir entre cuatro tipos de selector: · Clase. Por defecto. el estilo sólo puede afectar a un elemento en cada página. También se pueden anidar. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un nuevo archivo . debemos de aplicarle esa clase. Normalmente en la misma carpeta que las páginas. Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Por ejemplo. El id es un atributo html. Adobe Dreamweaver CS6 . Por tanto.LMachuca Pág 25 .resaltado afecta únicamente a los párrafos con la clase resaltado. al que tenga ese ID. · Etiqueta. podremos seleccionarla aquí y los estilos se añadirán ella. y si no lo ponemos lo hará Dreamweaver.

Aquí encontramos todas las propiedades CSS agrupadas por Categorías.Programa Adobe Dreamweaver CS6 Sesión de Aprendizaje Diseño Web Centro de Educación Continua 3 Definir o editar un estilo Una vez creado. ya que una vez creadas se van añadiendo a la lista. Las veremos más adelante. tenemos que definir las propiedades que formarán el estilo. Se abrirá la ventana Definición de regla. Para ello. También se puede cambiar el nombre del estilo. Adobe Dreamweaver CS6 .LMachuca Pág 26 . Podemos acceder a él desde el menú Ventanas o pulsando en el botón Panel CSS. es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. podemos pulsar en el botón Editar regla. Observa que la regla que estamos editando es la que aparece en Regla de destino.. Si queremos editar otra regla. Si queremos acceder a todas las propiedades. y en la parte inferior las propiedades del estilo actual. Esta ventana es la opción más cómoda nada más crear el estilo. Para ello accedemos al panel Estilos. Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior. disponemos del panel Estilos CSS. encontramos las opciones básicas en el Inspector de propiedades CSS. hacemos clic en el desplegable y la seleccionamos. hacemos clic con el botón derecho sobre el estilo y seleccionamos la opción Cambiar nombre. en medio las reglas aplicadas. cuando tenemos que cambiar varias propiedades.Universidad Continental . Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras.. En la parte superior vemos las propiedades que afectan al elemento.

Adobe Dreamweaver CS6 . y seleccionar la clase deseada del menú Establecer clase. Veamos cómo hacerlo: En el documento. Si situamos el punto de inserción. Desde las propiedades HTML también podemos hacerlo.Universidad Continental .LMachuca Pág 27 . Todas las reglas disponibles aparecen al desplegar el submenú Formato / Estilos CSS. separada por un punto. podemos hacer clic derecho sobre ella en la barra de estado. utilizando el desplegable Clase. La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento.Programa Adobe Dreamweaver CS6 Sesión de Aprendizaje Diseño Web Centro de Educación Continua 3 Aplicar un estilo En el caso de haber creado una regla para una etiqueta. el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo). pero sin seleccionar. Observa que existe una clase llamada ninguna. Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. ya que directamente se aplicarán directamente. La clase aparecerá junto al nombre de la etiqueta. Lo que hace esta opción es quitar la clase al elemento. nos será necesario aplicarla. En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Si queremos aplicar la clase a una etiqueta. selecciona el texto al que deseas aplicar el estilo CSS.

Vincular una hoja de estilos. En este caso nos será más útil la vista Todo. Adobe Dreamweaver CS6 . Utilizamos el panel Estilos CSS (Mayús + F11). Las hojas de estilo tienen la extensión . · Una nueva hoja de estilos.. Podemos hacerlo desde el menú Formato / Estilos CSS / Adjuntar hoja de estilos.. Dreamweaver nos permite exportar estos estilos fácilmente. que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo. normalmente en la misma carpeta que las páginas. los pasemos a una hoja de estilo. Seleccionamos las reglas que queramos exportar. Si queremos utilizar una hoja de estilos ya existente en nuestra página. debemos vincularla. Lo único que tendremos que hacer es seleccionar el archivo a vincular. todos los archivos que utilicemos deben de estar dentro del sitio. y en las propiedades del panel (el icono de la esquina superior derecha) seleccionamos Mover Reglas CSS... Los estilos seleccionados se quitarán de la página actual. Recuerda. o desde el panel Estilos CSS.Universidad Continental . creará una hoja nueva para las reglas exportadas. Agrupados en <style> encontramos los estilos creados en la página. y después al ver que los necesitaremos en otras páginas del sitio. Nos aparecerá la siguiente ventana: Encontramos dos opciones para ubicar los estilos: · Hoja de estilos nos permite seleccionar una hoja ya existente.LMachuca Pág 28 . y se vinculará con la hoja de estilos.. Deberemos de indicar dónde queremos guardar el archivo..css.Programa Adobe Dreamweaver CS6 Diseño Web Centro de Educación Continua Sesión de Aprendizaje 3 Hojas de estilos Exportar estilos Es frecuente que comencemos creando los estilos en la propia página. Las reglas se añadirán a ella..

. para qué sirven y cómo crearlos.misitio.com/pagina/secciones/seccion1. La referencia absoluta es independiente de la ubicación de la página que contiene el enlace. imagina que estamos en la siguiente dirección http://www. un enlace en cualquier página del sitio a http://www. no tenemos más que indicar el nombre de la carpeta antes del archivo. etc. que al ser pulsado lleva de una página o archivo a otra página o archivo. Adobe Dreamweaver CS6 . Cuando creemos un enlace. hipervínculo.com/pagina/pagina1. Estas referencias no se limitan a los enlaces. Esta es la opción por defecto de Dreamweaver. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos). Por ejemplo. se comportarán igual cuando indiquemos la ubicación de una imagen. Si queremos enlazar con una página o archivo dentro de la misma carpeta. subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1. y separarlos por una barra (/).html. no tenemos más que utilizar su nombre.misitio. Por ejemplo.com/pagina/informacion/index.gif. y será válida siempre que no cambie la ubicación del archivo enlazado. precedemos la ruta de enlace por la barra /. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo./secciones/seccion1. ¿cómo podemos hacerlo? Fácil. ya que son un elemento esencial para cualquier página web.misitio.html. Estos enlaces no funcionarán en el sitio local.google. de la hoja de estilo. a no ser que configuremos un servidor de pruebas como veremos más adelante.misitio.com/pagina/secciones/seccion1.html.Programa Adobe Dreamweaver CS6 3 Sesión de Aprendizaje Diseño Web Centro de Educación Continua Hiperenlaces Vamos a ver qué son los hiperenlaces. Tomando como origen la carpeta raíz del sitio.html se crearía como /pagina/secciones/seccion1. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www. Por tanto. Es decir. pagina2.Universidad Continental . o a parte de una imagen. ya que Windows interpretará como raíz la raíz del disco duro. Introducción Un hiperenlace. En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.html. o vínculo.com. Para indicar la ruta relativa al sitio.html. lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces.html.LMachuca Pág 29 . Si está en una subcarpeta de la página actual. no es más que un enlace. Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se toma en relación con la ubicación del la página.com/. incluyendo el protocolo http://. Esta opción depende de la ubicación del archivo.htm. partimos de la carpeta en la que se encuentra el documento. Deberemos llamarla haciendo referencia al nivel superior (http://www. y pueden no funcionar correctamente si alteramos la estructura de carpetas. De esta forma. Es posible asignar un vínculo a un texto. de un archivo Flash. Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar . a una imagen./ Por ejemplo. o http://www.. Esto podrás observarlo en la barra de estado: Tipos de referencia Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. El resultado de la ruta sería el siguiente: . Por ejemplo imagenes/miimagen. http://www.misitio. y es la forma más habitual. podríamos poner ese vínculo en cualquier página del sitio y funcionaría independientemente de su ubicación. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual.com/pagina/) para poder ir luego a la carpeta secciones.misito. mientras nos encontramos en la carpeta información.

El formato sería nombre_de_documento. Si el punto de fijación está en la propia página.Programa Adobe Dreamweaver CS6 Centro de Educación Continua 3 Sesión de Aprendizaje Diseño Web Hiperenlaces Marcadores o Puntos de fijación: Conduce a un punto dentro de un documento. Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto). ya sea dentro del actual o de otro diferente. que pueden ser útiles cuando se utilizan comportamientos. opción Hipervínculo. Crear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades. Si teníamos un texto seleccionado. Por ejemplo. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. · Título: se trata de la ayuda contextual del vínculo.extension#nombre_de_punto. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace.Universidad Continental . También deberás evitar utilizar caracteres especiales como acentos o espacios. aquí hay un enlace a www. si se trata de un enlace externo deberás escribirla empezando siempre por http://. Para ello. por ejemplo #apartado2 Podemos definir el punto dentro de un documento a través del menú Insertar. habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada. basta con indicar únicamente el punto en el enlace. este campo se explica en el siguiente apartado. que al ser un archivo externo es de referencia absoluta. Por defecto. Por ello. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. así no tendrás problemas a la hora de referenciar tus objetos. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. · Tecla de acceso: atributo que facilita la accesibilidad a las páginas. · Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#).google. los nombres no deben de estar repetidos en la página. es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces. sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor. etc. aparecerá ahí. En cualquier caso. · Texto: es el texto que mostrará el enlace.com. Por defecto Dreamweaver te creará un enlace relativo al documento. Veremos su utilidad más adelante. que aparecerá al mantener un instante el cursor sobre el enlace. por eso contiene http:// Es posible crear también vínculos vacíos. · Destino: la ventana donde se abrirá la página. Crear vínculos de esta forma es muy sencillo.LMachuca Pág 30 . O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML). Adobe Dreamweaver CS6 . y seguidamente establecer el Vínculo en el inspector HTML. · Vínculo: es la página a la que irá redirigida el enlace. Otra forma de crear un enlace es a través del menú Insertar. opción Anclaje con nombre. se tabularán por orden de aparición.