Post on 13-Jun-2015
Organización de Contenido en Dreamweaver CS5
Por: Rodrigo Pérez
Se puede utilizar el cuadro de diálogo Propiedades de Página para modificar las propiedades de formato y diseño.
Dreamweaver define reglas CSS para todas las propiedades especificadas en las categorías de Apariencia, Vínculos y Encabezados del cuadro de diálogo Propiedades de la página.
Las reglas CSS se incluyen en la sección head de la página.
Propiedades de un documento
Fuente de la página: especifica la familia de fuentes a utilizar para la pagina web.◦ Fuente predeterminada: definida por el usuario◦ Diversas combinaciones de fuentes: determinan
como se muestran el texto en el navegador El navegador utiliza la primera fuente de la
combinación que se encuentre en el sistema del usuario. Si no está instalada ninguna de las fuentes, el navegador mostrara las fuentes predeterminadas.
Propiedades de la apariencia CSS
Tamaño Color de texto Color de fondo Imagen de fondo Repetir: especifica el modo en que se ve la imagen
de fondo. No repetir: para ver el fondo solo una vez Repetir x: para mostrar la imagen en mosaico
horizontal Repetir y: para mostrar la imagen en mosaico
vertical Márgenes inferior, superior, izquierdo y derecho.
Propiedades de apariencia CSS
Fuente Tamaño Color Color de vínculo visitado Color de sustitución (cuando el mouse esté
encima Color de vínculo activo (cuando se hace
clic) Estilo de subrayado
Propiedades de Vínculo CSS
Existen 6 niveles de encabezados Para cada uno de ellos se puede definir las
siguientes propiedades:◦ Familia de fuente◦ Tamaño◦ Color
Encabezado de pagina CSS
Son reglas de formato que determinan el aspecto del contenido de una página Web
Permiten separar el contenido de la presentación.
El contenido se encuentra en el documento HTML mientras que el diseño se define en otro archivo externo CSS
¿Qué son las hojas de estilo CSS?
Pagina Web
Contenido HTML
Diseño CSS
Programación
Mantiene la consistencia de la página. Centraliza las propiedades de estilo y
formato Depura y simplifica el código HTML Disminuye el tiempo de carga en los
navegadores
Ventajas de CSS
Es un código que controla la estructura y apariencia de una página web
Dicho código consiste en el uso de etiquetas, los cuales son comandos cortos encerrados en corchetes angulares (< >)
Las etiquetas indican al navegador como mostrar o interactuar con la información que contienen.
Al añadir contenidos en la vista de Diseño, el código HTML se crea automáticamente
Lenguaje HTML
Etiqueta Descripción
<html></html> Encierra a todas las etiquetas en una página y define un documento html
<head></head>Contiene el titulo del documento, información de autoría, vínculos y referencias a recursos
externos
<body></body> Encierra todas las etiquetas relativas al contenido del documento
Etiquetas del documento
Etiqueta descripción
<title></title> Titulo del documento
<base> Dirección predefinida a todos los vínculos de la pagina
<link> Relación entre el documento y sus recursos externos
<style> Define un estilo
<meta> Incluye palabras clave, descripción usado por buscadores
<script> Define un código no HTML como por ejemplo JavaScript
Etiquetas dentro de <head>
etiqueta descripción
<h1> </h1> Encabezado, agranda el texto a tamaño 6
<p> </p> Define párrafos
<br> Inserta un salto de línea
<strong> </strong> Da formato negrita ( <b> </b>)
<em> </em> Da formato cursiva ( <i> </i>)
Principales etiquetas de formato
etiqueta descripción
<table> </table> Crea una tabla. Contiene las etiquetas filas y celdas
<tr> </tr> Crea las filas
<td> </td> Crea celdas dentro las filas
<th> </th> Crea celdas de encabezado dentro de una fila
Datos de tabla
Insertar vínculos<a href=“direccion_web.html”> </a>
Insertar Imágenes<img src = “imagen.jpg”> </img>
Listas sin orden
Código HTML Apariencia
<ul><li> libros </li><li> mochila </li><li> lápiz </li><li> cuaderno </li>
</ul>
• Libros• Mochila• Lápiz• cuaderno
Listas con orden
Código HTML Apariencia
<ol><li> libros </li><li> mochila </li><li> lápiz </li><li> cuaderno </li>
</ol>
1. Libros2. Mochila3. Lápiz4. cuaderno
¿Qué es un estilo CSS?
Es una regla que describe como es el formato del contenido de una página.
Contiene una colección de reglas CSS Proveen mayor control sobre:
◦ el formato de texto◦ Márgenes◦ Creación de columnas◦ Bordes de imágenes◦ Apariencia y comportamiento de vínculos.
Una vez creada, cualquier cambio será reflejado automáticamente. Lo que significa:◦ Ahorro de tiempo◦ Mayor eficiencia◦ Mejor consistencia del sitio
Hojas de estilo
Se usa el inspector de propiedades. Se nombra la regla y se definen los
aspectos de su estilo La definición se puede realizar desde 4
niveles◦ Estilo de clase◦ Etiquetas◦ ID específico◦ Estilo compuesto
Creando una CSS
Los nombres de los nuevos estilos aparecen en el menú reglas de destino en el inspector de propiedades.
Una regla CSS consta de dos partes:◦ El selector◦ El bloque de declaraciones
Reglas CSS
<style type=“text/css”>.miestilo { font-family: Georgia, “Times New Roman”, Times, Serif;font-size: 16px;color: rgb(0,102,153),
}</style>
Ejemplo de regla CSS
En lo posible, es preferible redefinir etiquetas existentes en lugar de crear un nuevo estilo, ya que proveen una jerarquía útil y facilitan la lectura del sitio.
Estilos CSS
Tipo Fondo Bloque: espaciado, alineación y propiedades Cuadro: propiedades de ubicación de
elementos en la pantalla Borde: Bordes que rodean a los elementos
Width, Color, Style Lista: configuración de tamaño y tipo de
viñetas Extensiones: opciones de filtros, saltos de
página y punteros.
Propiedades CSS para redefinir etiquetas HTML
Selectores descendientes
Especifican una etiqueta o clase que es descendiente de otra etiqueta o clase
Son selectores especiales que se refieren a características especiales de la página.
Los que están disponibles en Dreamweaver son:◦ A:Link◦ A: Visited◦ A: Hover◦ A: Active
Psuedo-Clases
Cuando se definen hojas de estilo externas, se tiene las siguientes ventajas:◦ Flexibilidad: se puede actualizar la apariencia
del sitio fácilmente◦ Consistencia: si varias paginas comparten una
hoja de estilos, la apariencia se mantiene similar.◦ Independencia: se separa la forma del
contenido.
Trabajo con hojas de estilos en cascada
Definen divisiones lógicas que existen en el contenido de una pagina web.
Se usan para centrar bloques de contenido, crear efectos de columna o diferentes aéreas de color.
Se puede hacer una página con ellas y estilos css, esto hace que el tiempo de descarga sea menor.
Se ven como cuadros de líneas punteadas. Si se sitúan en una posición absoluta se
llaman elementos PA.
Etiquetas DIV
Es un elemento de pagina HTML el cual puede situarse en cualquier lugar de la página.
Algunos elementos que se consideran bloque de diseño son:◦ Etiqueta div◦ Imagen con posición absoluta o relativa◦ Etiqueta con el estilo display:block◦ Párrafo con posición absoluta o relativa
Bloques de diseño CSS
Son elementos HTML con posición absoluta Puede contener texto, imágenes u otros. Puede emplear elemento PA para:
◦ Diseñar un pagina◦ Color elementos uno detrás de otro.◦ Ocultar mientras muestra otros.◦ Mover elementos por la pantalla.
Normalmente son etiquetas DIV ubicadas por coordenadas superior e izquierda.
Una elemento PA puede contener a otro, esto se llama anidación
Elementos PA (posición absoluta)
Una vez situado el DIV PA, se puede agregarle contenido como cualquier página.
Se pueden utilizar una imagen de rastreo la cual se emplea como guía para copiar un diseño
Hay dos formas de cambiar el tamaño de un DIV PA:1. Selecciónelo y arrastre los manejadores de
cambio de tamaño.2. Modifique los valores de Ancho y Alto en el
inspector de propiedades.
Elementos PA
Izquierda y Superior: son las posiciones con respecto a la esquina superior izquierda de la página o de otro PA que lo contenga.
Ancho y Alto: El ancho de los elemento PA en pixeles.
Vis: determina si los elementos son visibles al cargar la página.◦ Predeterminada: sin especificar visibilidad◦ Heredada: visible solamente si el padre lo es◦ Visible: siempre visible◦ Oculta: No visible
Imagen de fondo Color de fondo
Propiedades de los elementos PA
Regla de destino: es la regla que se está editando, si ya existe una regla para el texto, se mostrará su formato al darle clic
Editar regla: abre un cuadro de diálogo Definición de regla CSS
Panel CSS: Abre el panel de estilos CSS y muestra la regla de destino actual
Fuente Tamaño Color Negrita Cursiva Alineación (izquierda, centro o derecha)
Propiedades de la ficha CSS en el inspector de propiedades
Se usan para crear varias páginas con el mismo diseño.
Se pueden controlar cuáles elementos de la página permanecen constantes y cuáles se cambian.
Entre sus ventajas están:◦ Ahorro de tiempo◦ Mantiene la consistencia del sitio◦
Plantillas
Es un marco de trabajo Consiste en una biblioteca Java Script y
CSS Permite crear paginas web más completas e
interactivas Crean elementos dinámicos que se
actualizan automáticamente. Dichos elementos se conocen como Widgets
Spry
Permiten la interacción del usuario Constan de las siguientes partes:
◦ Estructura Código HTML que define el widget
◦ Comportamiento Programación Java Script que controla las funciones
del widget◦ Estilo
CSS que afecta al widget.
Los Widgets de Spry
Barra de menú◦ Conjunto de botones que muestran submenús◦ Visualizan gran cantidad de información en poco
espacio◦ Dan a usuario una idea del contenido total del
sitio. Panel que puede contraerse
◦ Almacena contenidos en un espacio reducido.◦ Se muestra o se oculta al dar clic al panel
Paneles en fichas◦ Almacenan contenido en un espacio reducido.◦ Se muestran al hacer clic sobre una ficha.
Widgets más comunes
Acordeón◦ Conjunto de paneles que se contraen◦ Almacenan mucha información en poco espacio◦ El contenido se muestra al hace clic en la ficha
del panel Información sobre herramienta
◦ Muestra información adicional únicamente cuando el mouse pasa por encima.
Widgets más comunes
Campo de texto◦ Muestra los estados válidos y no válidos cuando el
usuario introduce texto. Grupo de opciones
◦ Grupo de botones que permite validar una selección
◦ Obliga a seleccionar un solo botón del grupo. Selección
◦ Es un menú desplegable◦ Muestra los estados obligatorios, válidos o no
válidos cuando se realiza una selección.
Widgets para validar formularios
Campo de texto◦ Muestra los estados válidos y no válidos cuando el
usuario introduce texto. Grupo de opciones
◦ Grupo de botones que permite validar una selección
◦ Obliga a seleccionar un solo botón del grupo. Selección
◦ Es un menú desplegable◦ Muestra los estados obligatorios, válidos o no
válidos cuando se realiza una selección.
Widgets para validar formularios
Casilla de verificación◦ Casilla o grupo de casillas◦ Muestran los estados válido o no válido al
seleccionar una casilla Contraseña
◦ Es un campo de texto◦ Valida reglas de contraseña establecidas como
numero o tipo de caracteres. Confirmación
◦ Es un campo de texto◦ Confirma cuando el usuario escribe el mismo valor
en un campo similar del mismo formulario.
Widgets para validar formularios
Se pueden activar las siguientes opciones para hacer más sencillo el trabajo con el código y mejorar su productividad.
Ajustar texto◦ Permite ver el código sin desplazarse
horizontalmente Números de línea Caracteres ocultos
◦ Muestra caracteres especiales en vez de espacios en blanco.
Aspecto del código
Resaltar código no válido◦ en color amarillo
Aplicar colores a sintaxis◦ Activa los colores del código.
Sangría Automática◦ Aplica sangría al código al presionar Intro
mientras se escribe.
Aspecto del Código
SnippetsSon fragmentos de código que se pueden
almacenar para utilizarlos más de una vez.
Es una herramienta de referencia rápida para:◦ Diferentes lenguajes de programación◦ Estilos.
Incluye información sobre:◦ Etiquetas específicas◦ Objetos◦ Estilos
Contiene código que se puede copiar y pegar en el documento.
Panel de referencia