Creando Tu Primera Website-cap 1-2

7/31/2019 Creando Tu Primera Website-cap 1-2

1/35

Nivel:

Principiante/Bsico

By David PowersTr. Wendolita

23/08/2012


2/35

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


3/35

Contenido

Parte 1: Configure su sitio y los archivos de proyecto

1.1.Conozca los sitios de Dreamweaver1.2.Configuracin de los archivos del proyecto1.3.Defina una carpeta local

Parte 2: Crear el diseo de la pgina

2.1.Crear y guardar una nueva pgina2.2.Inserte las etiquetas DIV

2.3.Crear una nueva hoja de estilos2.4.Coloque la nueva hoja de estilos2.5.Agregue las principales imgenes2.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 el texto original ha sido tomado desde el sitio 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!
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htmlhttp://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html


4/35

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,


5/35

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 DreamweaverCS5. 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 cuandose 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 enwww.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.


6/35

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!


7/35

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.


8/35

CREANDO SU PRIMERA

WEBSITE

(Con Dreamweaver CS5/CS5.5)

Parte 2: Crear el diseo de la pgina

By

David Powers

Nivel:

Principiante/Bsico


9/35

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 demuestra 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.


10/35

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


11/35


12/35

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 de la lista

Diseo (estas dos opciones ya debe estar seleccionado por defecto), y haga clic enCrear.

Nota: En la lista Tipo de pgina debajo de la opcin 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.


13/35

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.


14/35

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 elcontenido 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).


15/35

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.


16/35

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 y id="Contenedor">


17/35

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 y pulse Intro

(Windows) o Retorno (Mac OS X) para crear una nueva lnea (ver Figura 10).


18/35

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.


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 odespus 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 y

pulse Enter.

14. En el panel Insertar, haga clic en Insertar etiqueta Div.


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.


19/35

16. Coloque el punto de insercin despus de cerrar el nuevo left_column div y pulse

Enter.

17. En el panel Insertar, haga clic en Insertar etiqueta DIV.


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 y pulse Enter.

20. En el panel Insertar, haga clic en Insertar etiqueta Div.


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 automticamentea cada pgina que se le atribuye.


20/35

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 debeser el mismo que utiliz cuando se inserta la etiqueta div. Por lo tanto, si se ha utilizado una


21/35

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 lapgina cuando el usuario lo ve en un navegador.) Para el relleno, que has especificado 10


22/35

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.


23/35

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.


24/35

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 968-

pixel 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 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 izquierdoy 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.


25/35

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.


26/35


27/35

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.


28/35

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 del

"texto alternativo" en el men emergente.Esto inserta un atributo vacoalt="" en la

etiqueta. La "Descripcin larga" est diseada para imgenes complejas, como grficoso 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. Nohaga 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.


29/35

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, nolo 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.


30/35

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.


31/35

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.


32/35

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).


33/35

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. Reconocecombinaciones nicas de caracteres dentro de las propiedades CSS. En lugar de

escribirwidt antes Dreamweaver selecciona ancho , slo tienes que escribirdt 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.


34/35

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 flotadorpropiedad.

Coloque el punto de insercin despus del punto y coma al final de la lnea en la regla deestilo 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 insertarfloat: . A continuacin, escriba l (L minscula) y pulse Enter / Return

para insertara 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. Ladiferencia es que en Guardar todo guarda todos los archivos que estn actualmente


35/35

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 exactamentecon 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 .

Documents

Creando Tu Primera Website-cap 1-2