Maquetacion De Pagina Web

Practica guida: Maquetado en Dreamweaver con CSS. Maquetado de una página web con hoja de estilos, en Dreamweaver CS3. Primeramente debemos de realizar un bosquejo de la página a realizar como se ilustra en la parte de la izquierda, para saber las partes o Divs que debemos de crear. Por lo anterior en Dreamweaver (DW), primeramente se crea un sitio como ya debemos de saber, denominado:curso2012_3. Dentro de este sitio de crea:  Un archivo HTML denominado: mio.html  Un archivo CSS denominado: miestilo.css  Una carpeta denominada imagenes, para colocar todas las imágenes. Después de lo anterior en el DW, y abierto el documento mio.html a través del inspector de propiedades en la lista desplegable Estilo seleccione: Adjuntar hojas de estilos…y seleccione la hoja de estilo miestilo.css,hasta ahora en blanco. Vamos a generar los archivos HTML y CSS a la vez, paso a paso, para poder explicar las etiquetas y estilos que vamos a utilizar para cada parte de la página. El cuerpo de la página En la declaración de estilos CSS, para el cuerpo de la página, hemos definido un color y una imagen de fondo "fondo.gif", que se repetirá por toda la página en un mosaico. También se definen unosmárgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros navegadores se realiza en la capa principal con el atributo "margin" definido como "auto"). Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como el tipo deletra o el color del texto. body { background: #C0D9D9 url(imagenes/fondo.gif) repeat; font:14pt Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666666; margin:20px 0px 20px 0px; text-align: center; } La capa contenedor

Practica guida: Maquetado en Dreamweaver con CSS. Generalmente, se utiliza una capa principal, a la que llamaremos contenedor. Dentro de esta capa se colocan todos loselementos que va a tener la página. Contenido de la página… En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la alineación por defecto sea a izquierda). También definimos una anchura de 800px, un color de fondo blanco y el margen, con el atributo "margin", lodefinimos como "auto", para que Mozilla y otros navegadores centren la capa. #contenedor{ text-align:left; width:800px; background-color : #ffffff; margin:auto; } Por cierto, hemos dejado deliberadamente el borde de la capa. Se podría haber definido el atributo "border", pero eso nos repercute negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que se vea correctamente entodos los navegadores. La cabecera de la página La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración. Aunque yo coloque una imagen jpg, tú debes de colocar un banner en Flash cs3. La insertamos dentro del contenedor


Vemos que es una simple imagen, pero atención,que tenemos que colocar el a continuación de sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño margen debajo de la imagen, que queremos evitar. Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valoresporque son los que se tomarían por defecto. #cabecera{ height:128px; width:800px; } La barra de navegación. Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la cabecera.

Practica guida: Maquetado en Dreamweaver con CSS. Inicio | Teorias del diseño | Html | Css | Dreamweaver CS3 | Contacto Como se puede ver, simplemente hemos definido una serie de...