DIVS CCS
Tal vez hayas ya escuchado acerca de los divs, o escuchado cosas como; las tablas ya no se usan, ahora solo se programa con divs, las páginas con tablas son obsoletas y cosas por el estilo, pero ¿Qué son los divs? En este artículo te explico.
Primeramente los divs no es propiamente programación en php, mas bien se usan etiquetas de maquetación de armado y diseño de la página web, porque entonces si este blog es para programar en php pongo información de los divs, la respuesta es simple me lo solicitaron y aquí esta, si quieres saber de forma simple que son los divs continua leyendo este artículo.
Bueno los divs se utilizan para indicar cajas contenedoras de información y están son manejadas en capas. En otras palabras, cuando declaras un div estas dibujando una “cajita” a la cual le puedes poner tantas características como necesites desde una hoja de estilos, te muestro un ejemplo:
<!– AprendeAprogramarEnphpya.com/blog –>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Mi Primer DIV</title>
<!– el siguiente link es para obtener la hoja estilo –>
<link href=”estilo.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”contenedor_principal”>
Hola yo estoy dentro del primer divs
</div>
</body>
</html>
Animación con Hype
Hype es una aplicación para Mac que ofrece a los diseñadores una herramienta sencilla pero a la vez potente para comenzar a crear animaciones en HTML5, y que además permite probar las creaciones en diferentes navegadores.
Lo bueno de esta aplicación es que acerca el diseño a aquellos que no tienen tantos conocimientos en la escritura de código, algo que de a poco comenzamos a ver cada vez más. Y algo con lo que seguramente algunos no están de acuerdo pero hay que coincidir en que mucha gente creativa no sabe escribir código pero aún así tiene mucho para ofrecer a la hora de diseñar, y con Hype lo podrán lograr.
Hype 1.0 nos permite crear objetos animados que se mueven a lo largo de la pantalla, a la vez que también ofrece compatibilidad con plantillas CSS3, y Javascript, el cual emplea para editar esos objetos. Eso si, no hay que ver a esta herramienta como el reemplazo definitivo de Flash, ya que nos faltan varias funciones que si podemos encontrar en la plataforma de Adobe, como pueden ser los clips de videos y los vectores, pero teniendo en cuenta el creciente potencial de HTML5 puede convertirse en una opción interesante para los diseñadores.
Tal vez hayas ya escuchado acerca de los divs, o escuchado cosas como; las tablas ya no se usan, ahora solo se programa con divs, las páginas con tablas son obsoletas y cosas por el estilo, pero ¿Qué son los divs? En este artículo te explico.
Primeramente los divs no es propiamente programación en php, mas bien se usan etiquetas de maquetación de armado y diseño de la página web, porque entonces si este blog es para programar en php pongo información de los divs, la respuesta es simple me lo solicitaron y aquí esta, si quieres saber de forma simple que son los divs continua leyendo este artículo.
Bueno los divs se utilizan para indicar cajas contenedoras de información y están son manejadas en capas. En otras palabras, cuando declaras un div estas dibujando una “cajita” a la cual le puedes poner tantas características como necesites desde una hoja de estilos, te muestro un ejemplo:
<!– AprendeAprogramarEnphpya.com/blog –>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Mi Primer DIV</title>
<!– el siguiente link es para obtener la hoja estilo –>
<link href=”estilo.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”contenedor_principal”>
Hola yo estoy dentro del primer divs
</div>
</body>
</html>
Float
Con float CSS, un elemento puede ser empujado hacia la izquierda o hacia la derecha, permitiendo que otros elementos para envolver alrededor de ella.
Float es muy a menudo utilizado para las imágenes, sino que también es útil cuando se trabaja con diseños.
Los elementos se flotaron horizontalmente, esto significa que un elemento sólo puede flotar izquierda o hacia la derecha, no hacia arriba o hacia abajo.
Un elemento flotante se moverá lo más a la izquierda oa la derecha como sea posible. Por lo general, esto significa que todo el camino a la izquierda oa la derecha del elemento contenedor.
Los elementos después del elemento flotante fluirán alrededor de ella.
Los elementos antes del elemento flotante no se verán afectadas.Ç
CSS
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos sin CSS</title> </head> <body> <h1><font color="red" face="Arial" size="5">Titular de la página</font></h1> <p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p> </body> </html>
El ejemplo anterior utiliza la etiqueta
<font> con sus atributos color, face y size para definir el color, el tipo y el tamaño de letra de cada elemento de la página.
El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas
<font>. Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene tres atributos, habría que definir 1.5 millones de atributos.
Como el diseño de los sitios web está en constante evolución, es habitual modificar cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000 etiquetas y 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos con CSS</title> <style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>
CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas
<font>. Como se verá más adelante, la etiqueta<style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la página.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas
<h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solución anterior, pero sigue sin ser una solución ideal. Como los estilos CSS sólo se aplican en la página que los incluye, si queremos que las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían copiar 10.000 veces esas mismas reglas CSS. Más adelante se explica la solución que propone CSS para evitar este problema.
Como crear sitio en dreamweaver
- Abra Dreamweaver (figura 1).
- Para empezar, vaya a Crear nuevo > Sitio de Dreamweaver y abra la ventana Definición de sitios (figura 2).
Figura 1: Utilice la pantalla de bienvenida para comenzar a crear un sitio web.
Figura 2: La ventana Definición de sitios le ofrece una serie de opciones para definir su sitio web.
Puede utilizar indistintamente las pestañas Básicas o Avanzadas, para crear su sitio. La diferencia reside en que Avanzadas está organizada en menús, mientras que Básicas va guiándole paso a paso durante todo el proceso y explica con más detalle las distintas propiedades.
- Vaya a Avanzadas y pulse Datos locales, que es la base de este tutorial (figura 3).
- En Nombre del sitio, escriba "Sitio Aquo". Este nombre es sólo para uso propio y no aparecerá en el sitio web.
- Vaya al icono Carpeta, junto a Carpeta de raíz local. Este punto es el más importante del proceso, porque define la carpeta principal de almacenamiento de datos para el sitio web.
- Vaya a la carpeta "Sitio _Aquo" y pulse Seleccionar. Con esto Dreamweaver ya posee la información mínima para crear un sitio web.
- Pulse Aceptar. Dreamweaver abre entonces la carpeta principal y muestra en el panel Archivos un menú con todas las carpetas, imágenes y documentos contenidos en ella (figura 4).
- Observe que en la parte superior del panel Archivos existe un menú desplegable en el que aparece "Sitio Aquo". Aquí están los nombres de todos los sitios que están siendo creados. Si es necesario, se puede navegar por el disco duro para buscar otras carpetas.
- Dreamweaver no puede registrar cambios efectuados fuera de Dreamweaver. Utilice por tanto el panel Archivo para llevar a cabo todos los cambios en la estructura de los documentos del sitio web, y no herramientas del sistema operativo.
Figura 3: En Avanzadas encontrará una serie de propiedades.
Figura 4: Los archivos del sito web aparecen en el panel Archivos.
Anclas en dreamweaver
Las anclas son marcadores que nos permiten enlazar a una parte concreta de un documento HTML. Cuando hacemos un enlace normal y corriente el navegador visualiza la página enlazada pero lo hace mostrando el principio de esa página. Si queremos enlazar por ejemplo al punto 5 de la página "documento.html" necesitaremos usar las anclas.
Vamos a ver cómo utilizar las anclas en DreamWeaver. Primero tendremos que abrir en DreamWeaver el archivo que vayamos a enlazar, en este caso, "documento.html".
Vamos al punto del documento que queramos enlazar, situamos el cursor y hacemos Insertar > Anclaje con Nombre, aparecerá una ventana para darle un nombre, lo llamamos "punto5". Allí dodne hayamos insertado el ancla aparecerá este icono: 
Ahora vamos al documento donde queremos poner el enlace, por ejemplo en "indice.html". Allí donde queramos poner el enlace seleccionamos las palabras y en la barra de propiedades escribimos "documento.html#punto5" (suponiendo que indice.html y documento.html estén en el mismo directorio):
Cuando pulsemos en este enlace iremos directamente a donde se encuentra el ancla "punto5" del "documento.html".
Marcos en dreamweaver
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.
|
Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.
|
 Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.
|
 Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.
|
Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.
En esta imagen puedes ver un ejemplo de marco a la derecha.
Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.
Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.
El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
|
