Organización de contenido en dreamweaver

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

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

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

Organización de contenido en dreamweaver

Documents

Transcript of Organización de contenido en dreamweaver