Nivel: Principiante/Bsico

By David Powers
Tr. Wendolita 23/08/2012

CREANDO SU PRIMERA WEBSITE (Con Dreamweaver CS5/ CS5.5) Parte 1: Configure su sitio y los archivos de proyecto
By David Powers

Nivel: Principiante/Bsico

Contenido
Parte 1: Configure su sitio y los archivos de proyecto 1.1. Conozca los sitios de Dreamweaver 1.2. Configuracin de los archivos del proyecto 1.3. Defina una carpeta local Parte 2: Crear el diseo de la pgina 2.1. Crear y guardar una nueva pgina 2.2. Inserte las etiquetas DIV 2.3. Crear una nueva hoja de estilos 2.4. Coloque la nueva hoja de estilos 2.5. Agregue las principales imgenes 2.6. Coloque las columnas

Nota: esta serie tutorial fue escrito originalmente para Dreamweaver CS4 por Jon Michael Varese. Se ha actualizado para Dreamweaver CS5 por David Powers. El contenido sigue siendo vlido para Dreamweaver CS5.5. Nota del traductor: La versin actual, traducida al espaol y en formato Word, ha sido creada por Wendolita, para compartir con aquellos que no podemos estar todo el tiempo on-line, pero igual deseamos aprender ms sobre este magnfico programa. Todo de adobe: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html, se ha respetado totalmente el contenido, solo se han reemplazado las imgenes de la interfaz de la versin en ingls a la versin en espaol de Dreamweaver. As mismo se hace mencin de los autores originales del documento. Adems he ido probando el ejercicio con la versin DWCS6 y hasta ahora ha funcionado de maravillas. ESTE DOCUMENTO NO ES PARA VENDER. ES PARA APRENDER! el texto original ha sido tomado desde el sitio

Este tutorial es una introduccin al concepto de un sitio de Adobe Dreamweaver CS5 y le muestra cmo configurar los archivos de proyecto para el sitio web muestra Check Magazine. En Dreamweaver, un sitio generalmente se compone de dos partes: una coleccin de archivos en un equipo local (el sitio local) y una ubicacin en un servidor Web remoto donde se cargan los archivos cuando usted est listo para hacer a disposicin del pblico (el mando a distancia sitio). Utilice el panel Archivos de Dreamweaver para administrar los archivos de su sitio. El mtodo ms comn para la creacin de una pgina web con Dreamweaver es crear y editar pginas de su unidad local, a continuacin, cargar copias de esas pginas a un servidor web remoto para su visualizacin en la web. En este tutorial, aprenders cmo configurar slo el sitio local para que pueda empezar Creacin de pginas web de inmediato. Ms tarde, despus de haber completado la pgina web, usted aprender cmo crear un sitio remoto para que puedas subir tus archivos a un servidor web. Una serie de tutoriales de seguimiento le mostrar cmo adaptar el sitio a utilizar una tecnologa del lado del servidor para crear un sistema de gestin de contenidos simple para una pgina de noticias que extrae su contenido de forma dinmica a partir de una base de datos. En esta primera parte de la serie, llevar a cabo las siguientes tareas: Conozca los sitios de Dreamweaver Configuracin de los archivos del proyecto Definicin de una carpeta local

Conozca los sitios de Dreamweaver

En Dreamweaver, un sitio organiza en el equipo local todos los documentos relacionados con su sitio web y le permite realizar un seguimiento y mantener vnculos, administrar archivos, compartir archivos y transferir los archivos del sitio a un servidor web. Piense en su sitio de Dreamweaver como el "cubo" que contiene todos los archivos y activos para su sitio web. Un tpico sitio de Dreamweaver tiene al menos dos partes: Carpeta local: Este es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sitio local. La carpeta local es generalmente una carpeta en su disco duro. Carpeta remota: Aqu es donde se almacenan los archivos en el equipo que ejecuta el servidor web. El equipo que ejecuta el servidor web es a menudo, pero no siempre es el equipo que hace que su sitio pblico en la web. En algunas circunstancias, es posible que tenga ms de una carpeta remota. Por ejemplo, si usted trabaja en un ambiente de equipo, todos los miembros del equipo pueden subir sus archivos a un servidor de prueba comn antes de ser desplegada en el sitio en lnea. Adems,

es habitual establecer un servidor de prueba en el desarrollo de sitios web que utilizan una tecnologa del lado del servidor, como por ejemplo Adobe ColdFusion o PHP. El proceso de configuracin de sitio en Dreamweaver CS5 se ha modificado para que pueda definir varios servidores remotos y pruebas. Otra razn de los cambios es el de simplificar el proceso de definir un sitio en Dreamweaver CS5. Todo lo que necesitas hacer para empezar a trabajar es darle a tu sitio un nombre, y decirle a Dreamweaver en la que desea guardar los archivos en el equipo local. Dreamweaver CS5 automticamente le solicita ms informacin sobre la configuracin del sitio slo cuando se necesita.

Configuracin de los archivos del proyecto

Cuando se crea un sitio local, puede colocar las imgenes activos existentes u otras piezas de contenido en la carpeta raz del sitio local de la carpeta principal del sitio. De esta forma cuando se agrega contenido a sus pginas, los activos estn ah, listos para su uso. Los archivos de ejemplo incluidos en el archivo ZIP de descarga contienen activos para el sitio web de ejemplo que va a construir en esta serie de tutoriales. El primer paso es copiar los archivos de muestra en una carpeta en su disco duro: 1. Decida dnde desea almacenar los archivos de pgina web en su disco duro. La carpeta puede estar en cualquier lugar en su computadora, pero el menor enterrado es ms fcil ser encontrar ms adelante. Por ejemplo:

Windows C: \ Sites Mac OS X Su carpeta personal ya incluye una carpeta llamada Sites.

2. Descargar y descomprimir los archivos de ejemplo first_website_pt1.zip desde el enlace en la parte superior de esta pgina si no lo han hecho ya. 3. Copia la carpeta check_cs5 en la carpeta Sitios. 4. La carpeta check_cs5 es la carpeta que va a utilizar como la carpeta carpeta raz principal de su sitio de Dreamweaver. Nota: La carpeta raz local del sitio de Dreamweaver normalmente es la carpeta principal o de nivel superior de su sitio web. Por lo general, corresponde a una carpeta llamada public_html, www, o wwwroot en el servidor remoto. Por ejemplo, si usted tiene un sitio web en www.example.com, y tiene un archivo llamado news.html en la carpeta raz, su URL es http :/ / www.example.com / news.html. La prctica normal es darle a su carpeta raz local del mismo nombre que el sitio web sin el dominio de nivel superior, como. Com u org.. Por ejemplo, para almacenar los archivos de mi sitio web en http :/ / foundationphp.com en una carpeta llamada foundationphp en mi disco duro local. Defina una carpeta del sitio local Debe definir una carpeta de sitio local de Dreamweaver para cada sitio web nuevo que cree. Dreamweaver tiene que saber dnde estn los archivos del sitio para crear todos los enlaces internos correctamente, y para actualizarlos cuando usted mueve los archivos a una ubicacin diferente dentro de su sitio.

A continuacin, configure el sitio para esta serie de tutoriales y definir como la carpeta del sitio local de la carpeta check_cs5 ha copiado en la carpeta Sitios: 1. Inicie Dreamweaver y seleccione Sitio Web> Nuevo. La configuracin de la sede cuadro de dilogo. CS5.5 los usuarios deben seleccionar el sitio de Dreamweaver en el epgrafe Crear nuevo. 2. En el cuadro de texto Nombre del sitio, introduzca Compruebe Magazine como el nombre del sitio. El nombre se utiliza internamente por Dreamweaver para identificar el sitio. No importa si contiene espacios. 3. Haga clic en el icono de carpeta situado junto al cuadro de texto del sitio local de carpeta para localizar y seleccionar la carpeta check_cs5. El cuadro de dilogo de la configuracin del Sitio debe parecerse a la figura 1.

Figura 1. Definicin de la carpeta del sitio local para el sitio de Check Magazine.

Nota: Las rutas de los archivos pueden variar, dependiendo de dnde se cre la carpeta Sitios en el disco duro. 4. Haga clic en Guardar. Eso es!

El panel Archivos de Dreamweaver muestra ahora la nueva carpeta raz local para el sitio actual (ver Figura 2). La lista de archivos en el panel Archivos acta como un administrador de archivos, que le permite copiar, pegar, eliminar, mover y abrir archivos igual que lo hara en un escritorio.

Figura 2. Lista de archivos en panel Archivos

Ahora usted ha definido una carpeta del sitio local para el sitio de la revista Check. Aqu es donde usted guarda las copias de trabajo de pginas web en su computadora local. Ms adelante, si desea publicar sus pginas y las har pblicas, deber definir una carpeta, un remoto lugar en un equipo remoto, ejecutar un servidor web que contendr las copias publicadas de los archivos locales. Usted aprender cmo hacerlo en el apartado 6 de esta serie de tutoriales.

CREANDO SU PRIMERA WEBSITE (Con Dreamweaver CS5/ CS5.5) Parte 2: Crear el diseo de la pgina
By David Powers

Nivel: Principiante/Bsico

Bienvenidos a la segunda parte de esta serie de tutoriales sobre cmo crear su primer sitio web. En este tutorial se explica cmo crear un diseo de pgina basado en CSS en Adobe Dreamweaver CS5. Un diseo de pgina determina cmo aparecer la pgina en el navegador, mostrando, por ejemplo, la colocacin de los mens, imgenes, y otros tipos de contenido. Diseo de pginas web con CSS (hojas de estilo en cascada) se ha convertido en el estndar para el diseo web moderno. CSS ofrece dreamweaverhabilidad superior y el control sobre su diseo, lo que permite crear elementos de la pgina y ajustar sus posiciones con precisin de pxel. Sin embargo, los diseos de CSS pueden ser difciles de entender y crear, y esto ayuda a tener un poco de conocimiento de fondo antes de la construccin de su primer diseo con CSS.

Evaluar la tarea por delante

Por lo general, usted no comienza la construccin de un sitio web mediante la apertura de Dreamweaver y la disposicin de las pginas. Los primeros pasos para la creacin de un sitio web de comenzar en una hoja de papel o en una aplicacin de edicin de grficos como Adobe Fireworks o Adobe Photoshop. Los diseadores grficos suelen esbozar una obra de arte integral (tambin conocido como un borrador) por la pgina web para mostrar al cliente y asegurarse de que las ideas iniciales para el sitio con la aprobacin de su cliente. Examinar el borrador Un borrador consiste en cualquier nmero de elementos de la pgina que el cliente ha solicitado para un sitio web. Por ejemplo, el cliente podra decir: "Yo quiero tener un logotipo en la parte superior de la pgina, un sistema de navegacin que une a estas otras pginas, una seccin de una tienda en lnea, y un lugar donde pueda insertar clips de vdeo." Sobre la base de ese examen, el diseador comienza a planificar el diseo del sitio y crea bocetos de pginas de muestra que cumplan con los requisitos del cliente. Este tutorial le proporciona el borrador completado y aprobado para la revista Check, una publicacin de ficcin que est en la necesidad de un sitio web. Como diseador web, su trabajo consiste en transformar el borrador en una pgina web de trabajo (muy probablemente con la ayuda de otros diseadores grficos) La figura 1 muestra un borrador de la pgina principal de la revista Check Magazine.

Figura 1. Un borrador de la pgina de inicio de Check Magazine

Se dar cuenta de que el diseador grfico le ha proporcionado una imagen de la pgina web que incluye una serie de reas de contenido, as como algunas ideas grficas. Tenga en cuenta tambin que el texto es lorem ipsum text (texto de marcador de posicin de falso latn) y que los ttulos de las columnas inferiores no son finales (dos de ellos son idnticos). A pesar de que el contenido de la pgina sigue sin decidirse, puede utilizar Dreamweaver para realizar este diseo. Tambin puede abrir el archivo original para competicin si quieres verlo en la pantalla del ordenador. Usted puede encontrar el borrador, check_comp.gif, en la carpeta de imgenes de la carpeta check_cs5 que ha copiado en el disco duro en la parte 1 de esta serie de tutoriales, Configuracin del sitio y los archivos de proyecto. Puede incluso imprimir el borrador para que pueda tenerlo a mano para empezar a construir su pgina

Qu hacer si las cosas van mal? Cuando se est aprendiendo nuevas tcnicas o a trabajar con software desconocido, es fcil cometer errores. Las instrucciones en toda esta serie de tutoriales tratan de anticipar los errores comunes, y cada parte contiene un archivo ZIP que muestra cmo debe ser el cdigo cuando haya terminado. Si la pgina no se ve de la forma esperada, utilice el archivo de Dreamweaver Comparativa de programas para comparar los archivos con las versiones de descarga. Para utilizar File Compare, se necesita una utilidad de archivos de terceros comparacin, como WinMerge para Windows.

Las causas ms comunes de los errores son accidentalmente saltarse un paso en las instrucciones, errores de escritura o un ID o una propiedad CSS. Vuelve sobre tus pasos para ver dnde podra haber ido mal. A veces, la mejor idea es comenzar de nuevo desde cero. Puede ser frustrante, pero se puede aprender mucho de sus errores. Por supuesto, si te quedas atascado, llame para pedir ayuda. El mejor lugar es en el foro de debate de Dreamweaver General, donde puedes encontrar expertos y principiantes por igual ayudan entre s. Por encima de todo, disfruta. El Diseo web a veces puede ser un reto, pero tambin es muy divertido.

Crear y guardar una nueva pgina

Una vez que haya creado un sitio y examin sus composiciones (en su caso), usted est listo para comenzar la construccin de pginas web. Vamos a empezar por la creacin de una nueva pgina, y guardarlo en la carpeta raz check_cs5 local de su sitio web. La pgina eventualmente se convierte en la pgina principal de la revista Check Magazine. Nota: Si no ha creado la carpeta check_cs5 sitio local, debe hacerlo antes de continuar. Para obtener instrucciones, consulte la Parte 1 de esta serie de tutoriales, Configuracin del sitio y los archivos de proyecto. 1. En Dreamweaver, asegrese de que el sitio de la revista Check Magazine est seleccionada en el panel Archivos (ver Figura 2).

Figura 2. Antes de comenzar a trabajar en un sitio, seleccinelo en el panel Archivos..

2. Seleccione Archivo > Nuevo 3. En la categora de pginas en blanco del cuadro de dilogo Nuevo documento, seleccione HTML en la lista Tipo de pgina, seleccione de la lista <ninguno> de la lista Diseo (estas dos opciones ya debe estar seleccionado por defecto), y haga clic en Crear.

Nota: En la lista Tipo de pgina debajo de la opcin <ninguno> podrs ver todos los diseos de CSS que vienen con Dreamweaver. Ms tarde se puede volver a este cuadro de dilogo para explorar los diferentes tipos de diseos CSS disponibles. 4. Seleccione Archivo> Guardar, o pulse Ctrl + S (Windows) o Cmd + S (Mac OS X). 5. En el cuadro de dilogo, asegrese de que est en la carpeta check_cs5 que defini como carpeta raz del sitio local. Dreamweaver se ha seleccionado de forma automtica, pero si una carpeta est seleccionada, haga clic en el botn de raz del sitio en la parte inferior del cuadro de dilogo (que es la derecha en Windows, ya la izquierda en la versin Mac). 6. Escriba index.html en el cuadro de texto Nombre de archivo y haga clic en Guardar. El nombre del archivo aparece ahora en la ficha de su nuevo documento.

7. En el cuadro de texto Ttulo del documento en la parte superior de su nuevo documento, escriba Check Magazine (ver Figura 3).

Figura 3. Agregar el ttulo de la pgina.

Este es el ttulo de la pgina (diferente del nombre del archivo). Los visitantes de su sitio vern este ttulo en la barra de ttulo del navegador cuando se ve la pgina en un navegador web. 8. Haga clic en la pgina de una vez para mover el punto de insercin de la caja de texto Ttulo del documento. Vers que aparece un asterisco (*) junto al nombre del archivo en la ficha del documento. El asterisco indica que un archivo ha cambiado y que es necesario guardar el archivo si desea guardar los cambios. 9. Seleccione Archivo> Guardar para guardar la pgina.

Inserte las etiquetas DIV

Si usted hizo alguna de las lecturas de base recomendada al inicio de este tutorial (por ejemplo, los conceptos bsicos de diseo de pginas CSS), entonces usted ya sabe que la etiqueta div, una etiqueta HTML que, en la mayora de los casos acta como un contenedor para el texto, las imgenes, y otros elementos de la pgina-es el bloque bsico de construccin de un diseo CSS. Usted coloca etiquetas div en la pgina, agregar contenido a ellos, y el uso de CSS para colocarlos. A diferencia de las celdas que se encuentran restringidos a los actuales dentro de las filas y columnas de una tabla, las etiquetas div son mucho ms dreamweaverible. Si nos fijamos en la competicin de diseo nuevo (ver Figura 1), te dars cuenta de que la pgina est dividida en secciones distintas: el logotipo de una bandera en la parte superior de la pgina, una zona cntrica grfico en el centro de la pgina y, a continuacin, una tercera seccin inferior que contiene tres columnas separadas dentro de la misma. Estas secciones corresponden todas a separar las etiquetas div que actan como contenedores para el contenido dentro de ellos. En realidad, es un poco ms complicado que eso, pero no te preocupes por eso ahora.

Comience por crear el ms bsico, la etiqueta div ms importante y ms comn para los diseos de CSS- el contenedor . El div contenedor contiene todas las otras etiquetas en el diseo. Si su diseo CSS es como una caja de arena, y se le va a poner una pelota de playa, un cubo, algunas conchas, y un paraguas en la caja de arena, entonces la etiqueta envase es el borde exterior de la caja de arena. Se define la forma, dimensin, y las limitaciones de la caja de arena, y mantiene todo junto. 1. Asegrese de que el botn de diseo se selecciona en la parte superior izquierda de la ventana de documento y haga clic una vez en la pgina para asegurarse de que el punto de insercin se encuentra en la esquina superior izquierda de la pgina (ver Figura 4).

Figura 4. Site el cursor en la esquina superior izquierda de la pgina.

2. Si no est ya expandido, expanda el panel Insertar, haga clic en su ficha o seleccionando Ventana> Insertar. (En el espacio de trabajo de diseo [el espacio de trabajo de Dreamweaver por defecto], el panel de insercin est en la parte derecha de la interfaz de Dreamweaver, por encima del panel Archivos.) 3. La pantalla predeterminada del panel Insertar es la categora comn. Asegrese de que la categora Comn est seleccionada y haga clic en Insertar etiqueta DIV (ver Figura 5).

Figure 5. De clic en Insertar etiqueta Div en la categora Comn del panel Insertar.

4. En el cuadro de dilogo Insertar etiqueta Div, dejar en punto de insercin seleccionado en la opcin Insertar en el men emergente, deje en blanco el cuadro de texto Clase, escriba contenedor en el cuadro de texto ID y haga clic en Aceptar.

El nuevo div aparece en su pgina, rodeada por una lnea de puntos en la vista Diseo y, con un poco de texto marcador de posicin (ver Figura 6).

Figura 6. El texto del marcador identifica el div por su ID.

Nota: Si no puede ver la lnea de puntos que rodea el div, seleccione Ver> Ayudas visuales y asegrese de que haya una marca de verificacin junto a Esquemas de diseo CSS. Al hacer clic en cualquiera de las opciones en el submen Ayudas visuales que activa y desactiva.

5. Seleccione el texto del marcador y eliminelo, asegurndose de eliminar slo el texto. Si el contorno de la div desaparece, repita el paso 4. El texto de marcador de posicin debe ser seleccionado automticamente cuando el div se inserta, por lo que todo lo que necesitas hacer es presionar Delete/Suprimir. 6. En el panel Insertar, haga clic en Insertar etiqueta Div nuevo. 7. En el cuadro de dilogo Insertar etiqueta Div, seleccione "Despus del inicio de la etiqueta" de la insercin en el men emergente. Esto activar un nuevo men desplegable al lado, que enumera los lugares en los que Dreamweaver puede insertar el nuevo div. Por el momento, los nicos candidatos son el <body> y id="Contenedor"> <div. Usted desea anidar el nuevo div dentro del div Contenedor, as que seleccione <div id="container"> (ver Figura 7).

Figura 7. Alojar el nuevo div dentro del div contenedor.

8. Deje el cuadro de texto Clase en blanco, escriba banner en el cuadro de texto ID y haga clic en Aceptar.

El nuevo div aparece en su pgina, y dentro de ella se puede ver el contenido del marcador de posicin para el div banner. Pero de dnde el div contenedor ir? Bueno, que est ah, que no se puede ver en la vista Diseo. La mejor forma de verlo es mirar el cdigo. 9. Haga clic en el botn de Dividir (ver Figura 8).

Figura 8. Haga clic en el botn Dividir.

Vista dividida muestra el cdigo subyacente a la izquierda de la ventana de documento. Se puede ver la etiqueta div contenedor, y en su interior es la etiqueta div bandera nueva, as como lo previsto (vase la Figura 9).

Figura 9. El contenedor y las etiquetas de banners div en la vista Dividir.

Note: Trabajar en la vista Dividir (Cdigo formalmente llamado y la vista Diseo) es una gran manera de aprender cmo Dreamweaver genera cdigo. Al insertar algo en la vista Diseo, aparece el cdigo que Dreamweaver escribe en la vista Cdigo. Es especialmente til si usted tiene un monitor de gran tamao, ya que puede ver la pgina web en la vista Diseo y el cdigo subyacente al mismo tiempo. 10. Puesto que usted est buscando en el cdigo crudo, vamos a seguir trabajando all. Si le obstaculizan para el espacio en la vista dividida, haga clic en el botn Cdigo en la parte superior de la ventana de documento. Coloque el punto de insercin despus de la etiqueta-div banner de cierre </ div> y pulse Intro (Windows) o Retorno (Mac OS X) para crear una nueva lnea (ver Figura 10).

Figura 10. Pulse Enter despus de la etiqueta de cierre div banner

Nota: Preste especial atencin al punto de crear la nueva lnea. An debe estar dentro del div contenedor. La etiqueta div contenedor de cierre est en la lnea 12 de la figura 10. 11. En el cuadro de dilogo Insertar etiqueta Div, dejar en punto de insercin seleccionado en la opcin Insertar en el men emergente, deje el cuadro de texto Clase en blanco, en el cuadro de texto ID escriba main_image y haga clic en Aceptar.

12. La nueva etiqueta div aparece en la pgina, y dentro de ella se puede ver el texto de marcador de posicin. Esta etiqueta div est en el interior del div,contenedor en el mismo nivel que el div banner. Consejo: Al crear nuevos ID de mirar hacia fuera para espacio adicional, ya sea antes o despus de la identificacin. Por ejemplo, asegrese de que al escribir el ID main_image, no hay un espacio adicional despus de la "e" en la imagen. Si no, se puede llevar a problemas de CSS ms tarde. 13. Coloque el punto de insercin despus de cerrar el nuevo div main_image de </ div> y pulse Enter. 14. En el panel Insertar, haga clic en Insertar etiqueta Div. 15. En el cuadro de dilogo Insertar etiqueta Div, dejar en punto de insercin seleccionado en la opcin Insertar en el men emergente, deje el texto Clase en blanco, escriba left_column en el cuadro de texto ID, y haga clic en Aceptar.

16. Coloque el punto de insercin despus de cerrar el nuevo left_column div </ div> y pulse Enter. 17. En el panel Insertar, haga clic en Insertar etiqueta DIV. 18. En el cuadro de dilogo Insertar etiqueta Div, dejar en punto de insercin seleccionado en la opcin Insertar en el men emergente, deje el cuadro de texto Clase en blanco, escriba center_column en el cuadro de texto ID, y haga clic en Aceptar. 19. Una vez ms, con el punto de insercin sentimiento lugar despus del cierre del nuevo center_column div </ div> y pulse Enter. 20. En el panel Insertar, haga clic en Insertar etiqueta Div. 21. En el cuadro de dilogo Insertar etiqueta Div, dejar en punto de insercin seleccionado en la opcin Insertar en el men emergente, deje el texto Clase en blanco, escriba right_column en el cuadro de texto ID, y haga clic en Aceptar.

Su cdigo debe ser como se muestra en la Figura 11.

Figura 11. El cdigo HTML despus de agregar los seis divs.

22. Si est en la vista dividida, presione F5 o haga clic en la parte vista Diseo de la ventana de documento para actualizar la vista Diseo. Alternativamente, haga clic en el botn Diseo para volver a la vista Diseo. 23. Todos sus divs estn apilados uno encima de otro y se extienden todo el ancho de la pgina. Este es el comportamiento por defecto hasta que se crean las reglas CSS para ellos.

Crear una nueva hoja de estilos

Ahora que tienes tus etiquetas div en su lugar, el siguiente paso es formatear y posicionar con CSS. CSS significa forcascading hojas, un estilo coleccin de reglas de formato que controlan el aspecto del contenido de una pgina web. El uso de CSS para dar formato a una pgina separa el contenido de la presentacin. El contenido de su pgina HTML, el cdigo se encuentra en el archivo HTML, CSS y las reglas que definen la presentacin del cdigo residen en otro archivo, la hoja de estilos externa. Nota: Tambin puedes poner reglas CSS en la seccin head de un documento, o en lnea con el propio cdigo. Sin embargo, un archivo externo es el modo ms eficiente de utilizar CSS, ya que los cambios efectuados en las normas en una hoja de estilo externa se aplica automticamente a cada pgina que se le atribuye.

1. Seleccione Archivo > Nuevo. 2. En el cuadro de dilogo Nuevo documento, verifique que la categora Pgina en blanco est seleccionado, seleccione CSS en la columna Tipo de pgina (ver Figura 12), y haga clic en Crear.

Figura 12. Cuadro de dilogo Nuevo Documento.

3. Una hoja de estilo en blanco aparece en la ventana de documento. Los botones Diseo y Dividir estn desactivados. Los archivos CSS son archivos de slo texto, su contenido no est destinado a ser visto en un navegador. 4. Seleccione Archivo> Guardar. En el cuadro de dilogo, cree una nueva carpeta llamada estilos en la raz del sitio, seleccione la nueva carpeta y guarde el archivo en la carpeta de estilos como check_cs5.css. 5. Cinco divs en index.html estn anidados dentro del div contenedor. Para centrar el contenido de la pgina, es necesario crear una regla de estilo para el div contenedor, dndole un ancho fijo y fijar sus mrgenes izquierdo y derecho de auto. Para crear una regla de estilo para un div (o cualquier otra etiqueta) que tiene un ID, el prefijo del ID con un signo numeral (#). As que el selector CSS para el div contenedor es # contenedor. Nota: CSS distingue entre maysculas y minsculas. La ortografa de la identificacin debe ser el mismo que utiliz cuando se inserta la etiqueta div. Por lo tanto, si se ha utilizado una

letra mayscula inicial, el selector CSS sera # Container . Adems, asegrese de que no hay espacio entre la almohadilla y el ello. Escriba el siguiente cdigo en la hoja de estilos: #container { width: 968px; background: #FFF; margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow: hidden; } A medida que escribe, Dreamweaver utiliza las sugerencias de cdigo para sugerir opciones para completar la entrada. Pulse Intro (Windows) o Retorno (Mac OS X) cuando vea el cdigo que desee, y dejar que Dreamweaver terminar la escritura para usted. Al escribir los valores de los pxeles, no deje un espacio entre el nmero y la px . Por ejemplo, debe ser 968px , no 968 pxeles . No se olvide de incluir un punto y coma al final de cada lnea, despus de que los valores de propiedad. Cuando haya terminado, el cdigo debe ser como se muestra en la Figura 13.

Figura 13. La regla de estilo para el div contenedor.

Cada una de las propiedades de la nueva regla significa algo especfico para el div contenedor. El primero de ellos-anchura -es el ms obvio. Establece el ancho del div contenedor a 968 pxeles. Est tratando de ajustar el color de fondo a blanco (# FFF), y la declaracin de 0 pxeles para los mrgenes superior e inferior del contenedor yautomviles para los mrgenes izquierdo y derecho del contenedor. (Esto efectivamente centra el contenedor en el centro de la pgina cuando el usuario lo ve en un navegador.) Para el relleno, que has especificado 10

pxeles a la derecha y la izquierda, y ha especificado un desbordamiento oculto, lo que obliga grandes activos como imgenes de mantenerse dentro de los lmites de sus etiquetas de contenedores. Consejo: Para obtener ms informacin acerca de las propiedades CSS, consulte la gua de referencia de O'Reilly incluida con Dreamweaver. Para visualizar la gua, seleccione Ayuda> Referencia y seleccione O'Reilly CSS Reference en el men emergente del panel Referencia. Contiene detalles de CSS2, adems de algunas propiedades no estndar CSS. 6. Guarde la hoja de estilos. A continuacin vamos a colocar la nueva hoja de estilos a la pgina index.html.

Coloque la nueva hoja de estilos

Para adjuntar la hoja de estilo, siga estos pasos: 1. Haga clic en la ficha de la pgina index.html y asegrese de que est mirando la pgina en la vista Diseo. (Si usted todava est en la vista Cdigo, haga clic en el botn de la vista Diseo.) Tu pgina debe ser exactamente igual a la Figura 14.

Figura14. La pgina index.html en la vista Diseo antes de colocar la hoja de estilos.

A pesar de que ha creado una compleja regla CSS para el div contenedor, la pgina todava tiene el mismo aspecto que antes. Esto es porque la hoja de estilo CSS todava no est conectado a la pgina. Cuando se adjunta la hoja de estilos a la pgina, el contenedor # regla que ha creado en la hoja de estilos formatear el div con el id "contenedor" en su pgina web. 2. Abra el panel Estilos CSS, haga clic en su ficha. (En el espacio de trabajo de diseo [el espacio de trabajo de Dreamweaver por defecto], el grupo Estilos CSS panel se encuentra debajo del panel Insertar. Si no es as, siempre se puede seleccionar Ventana> Estilos CSS para que aparezca.) 3. Se dar cuenta de que el panel Estilos CSS est vaco (salvo por el mensaje, "(sin estilos definidos)") porque no hay reglas CSS aplicadas a esta pgina.

4. (Opcional) Haga doble clic en el panel Insertar para cerrarla y crear ms espacio. 5. En la parte inferior derecha de la esquina del panel Estilos CSS, haga clic en el botn Adjuntar hoja de estilos (ver Figura 15).

Figura 15. Haga clic en el botn Adjuntar hoja de estilos.

5. En el cuadro de dilogo Vincular hoja de estilos externa, haga clic en el botn Examinar. Esto inicia la Hoja de Estilo Seleccione cuadro de dilogo. Vaya a la hoja de estilo check_cs5.css que ha creado en la carpeta de estilos, seleccinelo y haga clic en Aceptar.

6. Haga clic en Aceptar para cerrar el cuadro de dilogo Vincular hoja de estilos externa. 7. Tenga en cuenta lo que le pas a la pgina. Usted puede ver inmediatamente que el div contenedor aadido relleno de 10 pxeles a la izquierda y la derecha. Dependiendo del tamao de la ventana de documento, tambin puede ver que el div contenedor se ve centrado en la pgina. Eso es porque si tienes espacio extra (adems de la anchura 968pixel especificado), el envase tambin tendr un "auto" margen en sus lados izquierdo y derecho. Esto significa efectivamente que el navegador crea exactamente la misma cantidad de espacio de pxeles a la izquierda y derecha de la div contenedor, creando as un efecto de centrado. 8. Guarde la pgina. 9. Ejecutar el cursor sobre el borde del div contenedor hasta que aparezca una lnea roja, a continuacin, haga clic para seleccionar el div contenedor. La figura 16 muestra lo que debera ver cuando el div contenedor seleccionado.

Figura 16. El div contenedor seleccionado en la vista Diseo.

Nota: Si tiene dificultades para seleccionar el borde del div contenedor, haga clic en el interior de cualquiera de los divs que ha creado, y seleccione <div#container> en el selector de etiquetas situado en la parte inferior de la ventana de documento. Aqu Dreamweaver te da una representacin visual agradable de cmo la regla CSS se aplica al elemento contenedor. El sombreado gris claro en los lados izquierdo y derecho del div contenedor indica el relleno 10-pixel, y al pasar el cursor sobre el rea, Dreamweaver muestra un texto de ayuda que te dice eso. De manera similar, las zonas ms claras de color azul en los puntos extremos laterales izquierdo y derecho del contenedor indican los mrgenes de automviles. Una vez ms, la cantidad de margen de auto que se muestra en Dreamweaver depende del tamao de la ventana de documento. Si est trabajando en el espacio de trabajo por defecto de diseo Dreamweaver, y hacer que su pequea ventana de documento, arrastre el rea del panel acoplado a la derecha, debera ver el margen de automviles desaparecen a medida que se disponga de menos espacio en la pgina. Nota: Si la representacin visual del relleno y los mrgenes no puede mostrar, seleccione Ver> Ayudas visuales y asegrese de que las siguientes opciones tienen marcas de verificacin junto a ellos: diseo CSS Box Model y Contornos de diseo CSS.

9. Haga clic en el botn Inspeccionar en la parte superior de la ventana de documento (vase la Figura 17).

Figura 17. Haga clic en el botn Inspeccionar.

Esta es una nueva caracterstica de Dreamweaver CS5. Se enciende Live View en CSS Inspeccione modo. Las lneas punteadas de los divs desaparecer, y se ve la pgina tal y como se vera en un navegador. De hecho, usted est buscando en la pgina en un navegador-Live View utiliza el motor de navegador WebKit que alimenta el Safari y Google Chrome navegadores. 10. Mueva el cursor sobre los divs en el centro de la pgina. Al mover hacia arriba o hacia abajo, cada div se resalta en color azul claro. 11. Mueva el cursor a la izquierda del texto marcador de posicin (ver figura 18).

Figura 18. CSS Inspeccione destaca modo los divs, el relleno y los mrgenes.

Esto pone de relieve el div contenedor. La propia div aparece resaltado en azul. El relleno de 10 pxeles a cada lado se pone de relieve, de color morado, y los mrgenes de automviles estn resaltadas en amarillo. Ser capaz de ver el efecto de sus reglas de estilo como este hace que sea mucho ms fcil de entender el efecto que tienen en su diseo. 12. Haga clic en En Vivo para volver a la vista Diseo y desactivar el modo Inspeccionar CSS.

Agregue las principales imgenes

Ahora que tienes todas tus divs en su lugar y su hoja de estilo asociada a la pgina, usted est listo para crear las restantes normas de diseo CSS, y aplicarlos a los elementos correspondientes de la pgina. Pero primero, tiene que pensar en las dos imgenes principales: el banner en la parte superior, y la imagen grande de un hombre de pie junto a la reflexin de palmeras en una pared de cristal.

Con CSS, puede agregar una imagen de fondo a cualquier elemento HTML, como un div. Sin embargo, las imgenes de fondo se debe utilizar solamente para fines decorativos. Por defecto, los navegadores desactivan las imgenes de fondo cuando una pgina se imprime. Imgenes importantes se pueden insertar directamente en el cdigo HTML, utilizando el <img> etiqueta. Las imgenes de esta pgina desempean funciones diferentes, por lo que deben ser manejados de manera diferente. Inserte la imagen de banner con el tag <img> La imagen del banner en la parte superior aparece en todas las pginas y se identifica el sitio de la revista Check Magazine, as que no es apropiado para una imagen de fondo. 1. Haga clic dentro del div banner grfico y borrar todo el texto de marcador de posicin para que el div banner este vaco. 2. En el panel Insertar, haga clic en Imgenes. Si es la primera vez que ha utilizado imgenes abre un submen, que muestra las diferentes opciones. Elige la primera (imagen), como se muestra en la Figura 19. Esto abre la seleccin de Fuente de imagen cuadro de dilogo.

Figura 19. Seleccin de imagen en el submen de Imgenes.

Nota: Despus de la primera vez, Dreamweaver recuerda su eleccin ms reciente, y hace que sea el predeterminado. Para elegir una opcin diferente, haga clic en la flecha hacia abajo a la derecha pequea del icono en el panel Insertar.

3. En el cuadro de dilogo Seleccionar origen de imagen, vaya a la carpeta de imgenes en el sitio de la revista Ver y seleccione banner.jpg. Haga clic en Aceptar. Esto abre la cuadro de dilogo Atributos de accesibilidad de la etiqueta de imagen.

3. Cuando se inserta una imagen en una pgina HTML, es necesario agregar texto alternativo que se da una breve descripcin de la imagen para el beneficio de las personas con discapacidades visuales. Cuando visitan su sitio web utilizando un lector de pantalla, la tecnologa asistencial que lee el contenido de las pginas web en voz alta el texto alternativo que les da una indicacin verbal de lo que hay en la pantalla. El texto alternativo tambin se muestra en lugar de la imagen, si un visitante tiene imgenes desactivadas en el navegador, o si la imagen no aparece. Escriba Check Magazine en el cuadro de texto "Texto alternativo" (ver Figura 20) y haga clic en Aceptar.

Figura 20. Aadir el texto alternativo para la imagen.

Nota: las imgenes puramente decorativas normalmente se debe agregar como imgenes de fondo con CSS, pero si usted los pone directamente en el cdigo HTML, seleccione <empty> del "texto alternativo" en el men emergente. Esto inserta un atributo vaco alt="" en la etiqueta <img>. La "Descripcin larga" est diseada para imgenes complejas, como grficos o tablas, y debe contener la URL de una descripcin textual del contenido. El enlace a la descripcin del texto es visto slo por los lectores de pantalla. 5. La pgina debera parecerse a la Figura 21, con la imagen del banner que se sienta encima de los marcadores de posicin div restantes.

Figura 21. La imagen principal se encuentra en la div de la parte superior.

Inserte la imagen principal como fondo Cuando el diseo est terminado, el texto se aade delante de la imagen principal, que es principalmente decorativo de todos modos. As que, esta vez, va a utilizar CSS para insertarla como imagen de fondo para el div main_image. 1. Coloque el punto de insercin en el div main_image y borrar todo el texto del marcador. Despus de haber eliminado el ltimo carcter, que se ver como el div ha desaparecido por completo. No te preocupes, todava est all. No haga clic en cualquier parte de la ventana de documento antes de continuar con el paso siguiente. 2. En la parte inferior derecha de la esquina del panel Estilos CSS, haga clic en el botn Nueva regla CSS (ver Figura 22).

Figura 22. Haga clic en el botn Nueva regla CSS.

Siempre y cuando el punto de insercin se encontraba en el div main_image al hacer clic en el botn, la nueva regla CSS cuadro de dilogo de forma automtica debe sugerir ajustes adecuados para el selector CSS (ver Figura 23).

Figura 23. La nueva regla CSS cuadro de dilogo indica el tipo de selector y el nombre.

Dreamweaver detecta que el punto de insercin est en el div main_image, que est anidado dentro del div contenedor, y se sugiere el uso de un compuesto selector # container # main_image . El rea de texto debajo del cuadro de texto Nombre del Selector describe el significado de este selector. Aunque es correcto, todo en la pgina est anidado dentro del div contenedor, por lo que no es necesario ser tan especfico. . 3. Haga clic en el botn menos especfico. Esto cambia el valor en el cuadro de texto Nombre del selector # main_image , que es exactamente lo que quieres. Tcnicamente hablando, el tipo de selector, ahora se debe establecer en ID. Sin embargo, no lo hacen. Si lo hace, Dreamweaver borra el valor actual de la caja de texto Nombre Selector. 4. Deje el tipo de selector fijo en el Compuesto y asegrese de que est seleccionado estilos.css de la definicin de reglas en el men emergente. A continuacin, haga clic en Aceptar.

El cuadro de dilogo definicin de reglas CSS que indica que se est definiendo las propiedades para el nueva regla # main_image . 5. Seleccione la categora de fondo en la columna Categora. 6. En la categora de fondo, haga clic en el botn Examinar situado junto al cuadro de texto de fondo de la imagen. 7. En el cuadro de dilogo Seleccionar origen de imagen, vaya a la carpeta de imgenes en el interior del sitio Check Magazine. 8. Seleccione la main.jpg grfico y haga clic en Aceptar. 9. Selecciona la no-repeticin de los antecedentes de repeticin en el men emergente. El grfico main.jpg se define ahora como la imagen de fondo del div main_image (ver Figura 24).

Figura 24. Ajuste de la imagen de fondo del div main_image.

10. Seleccione la categora de posicionamiento en la columna Categora. En la categora de posicionamiento, haga lo siguiente: Seleccione relativo de la posicin en el men emergente. Escriba 968 en el cuadro de texto Ancho y seleccione pxeles en el men desplegable de la derecha. Tipo 376 en el cuadro de texto Altura y seleccione pxeles en el men desplegable de la derecha. Haga clic en Aceptar.

El grfico que aparece en la main.jpg div main_image, y las dimensiones de la div establecen. Normalmente, no es una buena idea dar a un div una altura fija, debido a que un div se expande o contrae automticamente en funcin de la cantidad de texto u otro contenido en su interior. Sin embargo, en este caso una altura fija es necesario, ya que necesita el div a ser la misma altura que la imagen de fondo. Sin la altura declarada en la EAP, el div se derrumbara a la nada, y la imagen de fondo no se mostrar. Voy a explicar la razn por la configuracin de la posicin de relativo en la parte 4 de esta serie de tutoriales, cuando usted va a aadir un texto a la div main_image. 11. Seleccione Archivo> Guardar todos los archivos relacionados para guardar la pgina y la hoja de estilos. La figura 25 muestra lo que su pgina debe ser similar a este punto.

Figura 25. La pgina index.html despus de configurar las propiedades del div main_image.

Coloque las columnas

La ltima tarea importante para el diseo bsico de index.html es para calcular las referencias en orden de las columnas en la parte inferior de la pgina. CSS clasifica los elementos ms HTML como a nivel de bloque o en lnea.Un elemento a nivel de bloque comienza en una nueva lnea propia, y obliga al elemento siguiente en la lnea siguiente, mientras que los elementos en lnea acurrucarse al lado de la otra. Tpicos elementos en bloque incluyen encabezados, prrafos, y divs. El texto dentro de un prrafo y las imgenes son los elementos en lnea. Antes de mover las columnas en su posicin, lo que necesita hacer un pequeo clculo. La imagen principal es de 968 pxeles de ancho. Eso no es divisible por 3, pero se necesita un poco de espacio para respirar entre cada columna, por ejemplo, 10 pxeles. Por lo tanto, si se divide 948 por 3, se obtiene 316. Ese es el ancho de cada columna tiene que ser. Tambin pasa a ser la anchura de las imgenes en la parte superior de cada columna. 1. Si su monitor es lo suficientemente ancha, la mejor manera de trabajar es en la vista Dividir, usando la funcin relacionada con Dreamweaver archivos. Check_cs5.css Cerrar haciendo clic en la X en su ficha, dejando slo index.html abierta. 2. Haga clic en la barra de herramientas estilos.css archivos relacionados debajo de la pestaa de index.html. Esto abre la hoja de estilos en la vista Dividir, dejando index.html visible en la vista Diseo (ver Figura 26).

Figure 26. Using related files, you can work in the style sheet and see your page at the same time.

Ahora puede editar la hoja de estilo, y ver los cambios en la vista Diseo. Consejo: Si le obstaculizan para el espacio, arrastre la barra central para cambiar el tamao de las ventanas. Usted tambin puede hacer ms espacio pulsando F4 para ocultar todos los paneles. Presione F4 de nuevo para restaurar. 3. Todas las columnas tienen que ser 316 pxeles de ancho, se puede aplicar el mismo ancho a todos ellos mediante la creacin de un selector combinado para los tres divs. Agregue la siguiente regla de estilo en la parte inferior de la hoja de estilo: 4. #left_column, #center_column, #right_column { width: 316px; } Sugerencia: sugerencias de cdigo en Dreamweaver CS5 es sper inteligente. Reconoce combinaciones nicas de caracteres dentro de las propiedades CSS. En lugar de escribir widt antes Dreamweaver selecciona ancho , slo tienes que escribir dt para ir directamente all, y luego presione Intro (Windows) o Retorno (Mac OS X) para insertarancho: en la hoja de estilo. Este truco funciona con todas las sugerencias para el cdigo, no slo CSS. La separacin de los selectores de ID para los tres divs con comas se aplica la misma regla a cada uno de ellos. 4. Haga clic en la vista Diseo (o presione F5) para actualizar la pgina. Las columnas son ahora mucho ms estrecho, pero todava estn apiladas una encima de la otra (ver Figura 27). Esto se debe a que son elementos en bloque.

Figura 27. Las columnas se divs todava apilados uno encima del otro..

5. Para conseguir que se sientan uno al lado del otro, es necesario utilizar el flotador propiedad. Coloque el punto de insercin despus del punto y coma al final de la lnea en la regla de estilo que acaba de crear y pulse Intro (Windows) o Retorno (Mac OS X). Dreamweaver muestra sugerencias de cdigo para las propiedades disponibles. Tipo de f y pulse Enter / Return para insertar float: . A continuacin, escriba l (L minscula) y pulse Enter / Return para insertar a la izquierda . No se olvide de aadir un punto y coma al final de la lnea. 6. Actualizar vista de diseo, haga clic en ella o pulsando F5. Las columnas debe ser ahora uno junto al otro en la parte inferior de la pgina. 7. Por ltimo, es necesario aadir los mrgenes entre las columnas. Esto se hace mediante la adicin de un margen izquierdo de 10 pxeles hacia el centro y columnas de la derecha. Agregue la siguiente regla de estilo en la parte inferior de la hoja de estilo: #center_column, #right_column { margin-left: 10px; } Al igual que la regla de estilo anterior, la misma propiedad se asigna a varios elementos haciendo una lista de sus selectores separados por comas. 8. Seleccione Archivo> Guardar todos los archivos relacionados. Nota: dependiendo de donde el foco est en la ventana de documento, guarde todos los archivos relacionados pudieron ser atenuados. Si es as, seleccione Guardar todo. La diferencia es que en Guardar todo guarda todos los archivos que estn actualmente

abiertos. Guardar todos los archivos relacionados guarda slo los archivos que estn relacionados con el documento actual. La figura 28 muestra lo que su pgina debe parecerse a la vista Diseo.

Figura 28. Las columnas son ahora en su lugar.

Su diseo de pgina CSS ha finalizado. Si por alguna razn su diseo no se ve la forma en que se supone que, vuelva a comprobar la ortografa (incluyendo maysculas, si procede) de todas las reglas CSS. Las causas ms comunes de errores de diseo CSS son los tipogrficos, por lo que debe asegurarse de que los ID de su archivo CSS externo se corresponden exactamente con los identificadores en el archivo index.html. Adems, no se olvide de tener en cuenta los espacios adicionales que pueden arrastrarse en antes y despus de los ID al crear nuevas reglas CSS .