Crea una pagina en html con Dreamweaver 8 (2)

EMPEZAMOS A CREAR LA ESTRUCTURA DE LA PAGINA

En el articulo anterior creamos la carpeta donde guardamos nuestra pagina  (el archivo html y css).

 

En este articulo  vamos a agregar las etiquetas principales de una pagina web que es la cabecera, el contenido, la barra lateral, y el pie de pagina  (en ingles  header, content, sidebar, footer) .

Vamos a utilizar estos botones para pasar de modo de Diseño a Código para trabajar con la estructura en html y viceversa. Tambien vean que podemos pasar del documento html al documento css esto nos será util mas adelante.

Ya que estemos en modo de Codigo nos concentramos en lo que es el cuerpo de nuestra pagina (body), vamos a eliminar el texto que se encuentra dentro de la etiqueta container, cuando decimos dentro, despues o antes de una etiqueta será asi :  

antes <div> dentro </div> despues . 

 

<body>

<div id="container">Colocar aquí el contenido para  id "container"</div>

</body>

 

Nos quedará de la siguiente manera ya alineado dejamos algo de espacio dentro de container, es la etiqueta donde vamos a trabajar por eso necesitamos que se vea ordenado y limpio. Colocas en cursor dentro de container y das click como si fueras a escribir algo despues vas arriba y eliges Insertar - Objeto de diseño - Etiqueta div  y le escribes en ID header y das click en aceptar la etiqueta nueva se debió crear dentro de container, asi mismo dejamos un espacio despues de header y creamos otras tres etiquetas con ID  content, sidebar, footer

 

<body>

    <div id="container">

 

              

 

    </div>

</body>

 

Ya nos queda de esta manera eliminando el texto que contiene cada etiqueta y solo dejaremos el nombre de cada una de ellas para identificarlas al momento de pasar al modo de diseño, recuerden que estamos en modo de Código si pasamos a diseño y las etiquetas no tienen palabras no veremos absolutamente nada porque aun no tienen estilos indicados.

 

<body>

    <div id="container">

 

              <div id="header"> header </div>

              <div id="content"> content </div>

              <div id="sidebar"> sidebar </div>

              <div id="footer"> footer </div>

 

    </div>

</body>

 

Pasaremos a modo de diseño para agregar estilos a nuestras etiquetas. Al nombre de cada etiqueta vas a dar click derecho - Estilos css - Nuevo entonces te salé la ventana con el nombre de la etiqueta que elegiste pero probablemente te salga asi #container #header es un ejemplo, te sale al principio con la etiqueta container no es ningun error ahí te esta diciendo que vas a editar la etiqueta header que se encuentra dentro de container pero no es importante que esten las dos solo borra container completo y no dejes espacios y das aceptar enseguida te sale la ventana para indicar las propiedades que necesitas en esa etiqueta, como en la siguiente imagen.

 

 

Ahora te voy a indicar las propiedades para cada etiqueta. En la columna de categoria eliges que vas a ediatar, vas indicar lo siguiente en cada etiqueta:

 

header

 CUADRO: ancho 100% , alto 250px , margen-inf 30px

 FONDO: color de fondo #FFFF99

 

content

 CUADRO: ancho 690px , alto 500px , flotar derecha

 FONDO: color de fondo #F2F2F2

 

sidebar:

 CUADRO: ancho 280px , alto 300px , flotar izquierda

 FONDO: color de fondo #CCCCCC


footer

 CUADRO: ancho 100% , alto 100px

 FONDO: color de fondo #333333

 

 

Ahora vamos a crear otra etiqueta para eso pasamos al modo Codigo en dreamweaver y lo que  vamos a hacer es que la nueva etiqueta debe actuar como contenedor de las etiquetas content y sidebar ¿esto porque? porque hay un error que suele ocurrir debido al alineamiento de estas dos etiquetas y que ocasiona un desastre con tu pagina.Debe quedar de la siguiente manera esta etiqueta la escribes con tu teclado tal como esta.

 

 

<body>

    <div id="container">

 

              <div id="header"> header </div>

              <div id="container-content">

                        <div id="content"> content </div>

                        <div id="sidebar"> sidebar </div>

              </div>

              <div id="footer"> footer </div>

 

    </div>

</body>

 

Ahora vamos a escribir esta etiqueta en nuestro archivo CSS ya que la hemos escrito directamente en el codigo y no se guardo como lo hace cuando la insertamos con las funciones  que trae el programa. Pasamos al archivo CSS como les mencione al comienzo de este articulo, ya trabajamos con el archivo html ahora pasamos al archivo css.

 

Tus estilos deben estar acomodados tal y como los fuiste creando el primero es container, el segundo header, content, sidebar y footer no te preocupes si no estan de esa forma pero si es mas comodo trabajar si estan en orden. Cada etiqueta tiene un "#" que indica que es tipo ID cuando tiene un punto en ves de # se le llama Clase, las propiedades se indican dentro de dos llaves asi  { } . Continuando con nuestra pagina vamos a escribir la etiqueta asi   #container-content {} en el archivo css despues de la etiqueta header o antes de content para que se encuentren en orden y presionamos CONTROL+ S  para guardar los cambios.

 

 

 

 

Ahora volvemos al archivo HTML y este es el ultimo paso que vamos a hacer hasta el momento.

 

A tu derecha en dreamweaver  vas a ver los estilos tal como en la imagen  ahí se encuentran todas la etiquetas que hemos creado, con dar doble click sobre alguna de ellas sale la ventana para indicarle las propiedades que queremos darle. Vamos a dar doble click a la etiqueta #container-content y vamos a cuadro e indicamos que tenga de ancho 1000 px y solo de margen inferior 60px y en en Bloque vamos a donde dice mostrar y elegimos tabla, en Posicion vamos donde dice desbordamiento y elegimos oculto ya solo damos click en aplicar y aceptar.

 

Por ultimo seleccionamos #container y le damos de ancho 1000px y de margen 0 auto 0 auto aplicamos y aceptamos.

  

Bueno hasta aqui terminamos solo vamos al mundito y vemos la vista previa con chrome para ver nuestro avance y le damos que si queremos guardar los cambios. Esto seria todo y la proxima vez vamos a hacer el menu de la pagina. Si tienen dudas comenten y les ayudaré. Gracias por tomarte tu tiempo para leer este articulo nos vemos hasta la proxima.




Escribir comentario

Comentarios: 0