Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Sesin de Aprendizaje
Diseo Web
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 prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato
predeterminado. Los encabezados se utilizan para establecer ttulos 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, debera ir siempre en prrafos, 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 cmo se muestran esos encabezados, recuerda que
siempre podremos personalizarlo.
Estilo:
El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>, que
por defecto se ve en cursiva.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men Texto. Por ejemplo, subrayar el texto.
Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar
texto normal podra hacer que el usuario pensara que se trata de un vnculo. Adems, emplea etiquetas que estn en desuso.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el siguiente apartado.
Sangra:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En
este caso los botones se refieren a sangra 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.
Pg 21
Sesin de Aprendizaje
Diseo Web
Regla de destino:
Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo hacemos.
Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.
Editar regla:
Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos CSS, de la regla seleccionada.
Panel CSS:
Este botn abre el panel CSS si no lo tuviramos abierto.
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en
lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la
tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de
que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si
seleccionamos Arial, Helvetica, sans-serif, el texto se ver con la fuente Arial, pero si esta
no existe se ver en Helvetica.
Estilo:
Estos botones ponene el texto en negrita y cursiva respectivamente.
Alineacin:
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y
justificada.
Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un prrafo.
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, porcentajes del tamao base, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color
en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro.
Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de
lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn
Pg 22
Sesin de Aprendizaje
Diseo Web
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la lista que se
desee que pasen a formar parte de la lista anidada.
A travs del men Formato, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista
previamente o tener el cursor en algn lugar de la lista para que se active este submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en
la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.
Caracteres especiales
A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de Dreamweaver esta tarea es muy sencilla
utilizando el teclado, podemos incluir caracteres como , , , , .. de forma rpida. Pero si quieres poner dos espacios en blanco y los introduces por teclado,
Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin. Lo mismo ocurrir con los caracteres que no
tenemos en el teclado.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen inferior.
Ca
Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres ms utilizados que no pueden ser introducidos
mediante teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde podrs seleccionar caracteres entre una lista
bastante ms amplia:
Adobe Dreamweaver CS6 - Universidad Continental - LMachuca
Pg 23
Sesin de Aprendizaje
Diseo Web
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecer la siguiente ventana:
Pg 24
Sesin de Aprendizaje
Diseo Web
Tipo de selector: el tipo de selector es fundamental, ya que determina a qu elementos afectar el estilo.
Podemos elegir entre cuatro tipos de selector:
Clase. Es el alias que tomar el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase.
El nombre de la clase va precedido por un punto, y si no lo ponemos lo har Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma nica y concreta. Por tanto, el estilo slo puede afectar
a un elemento en cada pgina, al que tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML indicada.
Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta nicamente a los prrafos con la clase resaltado, pero no a los
encabezados con esa clase. Tambin se pueden anidar. Por ejemplo ul#menu li p afecta slo a los prrafos que estn dentro de un elemento de una
lista con el id menu.
Nombre del selector: esta opcin permite asignar un nombre al selector.
Depende ntimamente del tipo de selector, pues aqu introduciremos el nombre de la clase, id, etiqueta, etc... Por defecto, indicar el elemento
seleccionado, pero podemos escribir el que queramos.
Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.
Si elegimos (Slo este documento) la definicin del estilo se guardar en la cabecera de la pgina, por lo que slo estar disponible dentro de sta.
Si elegimos (Nueva hoja de estilo) se crear un archivo CSS. Podremos emplear estos estilos en cualquier pgina del sitio slo con vincular la hoja de
estilos. Deberemos de indicar dnde guardar el archivo css que contendr los estilos. Normalmente en la misma carpeta que las pginas.
Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aqu y los estilos se aadirn ella.
Pg 25
Sesin de Aprendizaje
Diseo Web
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la
seleccionamos, ya que una vez creadas se van aadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir la ventana Definicin de regla.
Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos ms
adelante.
Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que
cambiar varias propiedades.
Para pequeos cambios que no podamos hacer desde el Inspector de propiedades y otras
funciones extras, disponemos del panel Estilos CSS. Podemos acceder a l desde el men Ventanas o
pulsando en el botn Panel CSS.
En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas
aplicadas, y en la parte inferior las propiedades del estilo actual.
Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que
indique a qu tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic con el
botn derecho sobre el estilo y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de
dilogo para que introduzcamos el nuevo nombre como la imagen inferior.
Pg 26
Sesin de Aprendizaje
Diseo Web
Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, nos ser necesario aplicarla, ya que directamente se aplicarn
directamente.
Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases. Veamos cmo hacerlo:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de insercin, pero sin seleccionar, el estilo se aplicar a
la primera etiqueta que contenga el texto (por ejemplo el prrafo).
En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el
cuadro Regla de Destino. Desde las propiedades HTML tambin podemos hacerlo, utilizando el desplegable Clase.
Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del men
Establecer clase.
Observa que existe una clase llamada ninguna. Lo que hace esta opcin es quitar la clase al elemento.
La barra de estado nos ayudar a saber qu clase tiene aplicada un elemento. La clase aparecer junto al nombre de la etiqueta, separada por un
punto.
Pg 27
Sesin de Aprendizaje
Hojas de estilos
Exportar estilos
Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver que los necesitaremos en otras
pginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fcilmente.
Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista Todo.
Agrupados en <style> encontramos los estilos creados en la pgina.
Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la esquina superior derecha) seleccionamos Mover
Reglas CSS....
Nos aparecer la siguiente ventana:
Pg 28
Sesin de Aprendizaje
Diseo Web
Hiperenlaces
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier
pgina web.
Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces.
Esto podrs observarlo en la barra de estado:
Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitan a los enlaces, se comportarn igual
cuando indiquemos la ubicacin de una imagen, de un archivo Flash, de la hoja de estilo, etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.
Por ejemplo, http://www.google.com, o http://www.misitio.com/pagina/pagina1.html.
La referencia absoluta es independiente de la ubicacin de la pgina que contiene el enlace, y ser vlida siempre que no cambie la ubicacin del
archivo enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).
Pg 29
Sesin de Aprendizaje
Diseo Web
Hiperenlaces
Marcadores o Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del
punto de fijacin a continuacin de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#).
El formato sera nombre_de_documento.extension#nombre_de_punto.
Si el punto de fijacin est en la propia pgina, basta con indicar nicamente el punto en el enlace, por ejemplo #apartado2
Podemos definir el punto dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. O podemos utilizar el atributo ID de
cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos en la pgina.
Debers 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).
Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces.
Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora de referenciar tus objetos.
Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a
servir de enlace, y seguidamente establecer el Vnculo en el inspector HTML.
Por ejemplo, aqu hay un enlace a www.google.com, que al ser un archivo externo es de referencia absoluta, por eso contiene http://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo
nicamente una almohadilla #. Veremos su utilidad ms adelante.
Otra forma de crear un enlace es a travs del men Insertar,
opcin Hipervnculo.
Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar en el lugar en
el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace. Si tenamos un texto seleccionado, aparecer ah.
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla empezando siempre por http://. Haz clic sobre
el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te crear un enlace relativo al documento.
Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la tecla Alt ms la tecla de
acceso indicada.
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este campo podrs
establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus diferentes saltos. Por defecto, se
tabularn por orden de aparicin.
Adobe Dreamweaver CS6 - Universidad Continental - LMachuca
Pg 30