MAQUETACION WEB

“Año de la Diversificación Productiva y del Fortalecimiento de la Educación”
INSTITUTO DE EDUCACIÓN SUPERIOR
TECNOLÓGICO PRIVADO
COMPUTACIÓN E INFORMÁTICA
UNIDAD DIDACTICA : DISEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : CHARCA CAHUI, Noemi
CICLO ACADÉMICO : V-A
SEMESTRE : 2015 – III
Juliaca - Puno – Perú.
2015
“TECNOTRONIC”

En el 2018 el IESTP Tecnotronic es un modelo empresarial
educativo de excelencia académica que lidera la educación
superior tecnológica de la región sur del país.
Forma profesionales competitivos con un ambiente de
emprendimiento, innovación, eficiencia y valores.
Trabajo en equipo, Puntualidad, Confianza, Persona, Innovación,
Rentabilidad y Excelencia.

PRESENTACIÓN
Este trabajo tiene como finalidad enseñar a los estudiantes como realizar
MAQUETADOS con CSS y HTML. Para que puedan verificar y guiarse mediante este
pequeño informe realizado por mí persona. Y para empezar utilizaremos
DREAMWEAVER donde verán como realizar las líneas de código, para que y cuál es
su función que realiza y también podrán saber cómo llamar a la hoja de estilo cuando se
trabaja con CSS externo. Espero que sea útil este informe y si tienen alguna observación
a corregir con gusto recibiré sus críticas para mejorar este informe.
Dirigido a los estudiantes de computación e informática para que puedan ayudarse de
alguna u otra forma con este pequeño trabajo.

DISEÑO WEB
CHARCA CAHUI, Noemí Página 4
MAQUETACIÓN WEB.
UTILIZANDO CSS Y HTML.
EJERCICIO N° 1: maquetación utilizando CSS externo.
Para realizar la maquetación web tenemos que tener instalado nuestro
DREAMWEAVER para trabajar adecuadamente.
PASO 1:
 Abrimos nuestro DRAMWEAVER.
 Donde nos muestra la siguiente ventana en la cual seleccionaremos HTML con
el cual trabajaremos.
PASO 2:
 Luego de elegir HTML nos muestra la siguiente ventana donde eliminaremos los
códigos que no nos sirven.

DISEÑO WEB
Todo lo resaltado no nos sirve. Así que lo eliminamos. Para poder trabajar
tranquilamente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
PASO 4:
 AHORA: nos quedara así; no olvides poner el título de tu archivo HTML en mi
caso le puse MAQUETADO 1.
<!DOCTYPE>
<html>
<head>
<title>MAQUETADO 1</title>
</head>
<body>
</body>
</html>
PASO 5:
 Seguidamente guardamos nuestro archivo HTML en una carpeta. Presionamos
la tecla ctrl+s y listo nos muestra donde guardar.

DISEÑO WEB
 Listo ahora crearemos un archivo CSS para crear las CAPAS.
 Lo guardamos de igual forma en una carpeta con el nombre CSS.
 Nombre de archivo style.css

DISEÑO WEB
PASO 5:
 Listo ahora comenzaremos, nos dirigimos a nuestro CSS.
 Donde crearemos nuestras capas.
Con la etiqueta # gato. Ejemplo: #header seguido de las llaves de inicio y cierre{}.
Usaremos las siguientes etiquetas:
 position:absolute; /*nos ayuda a mover las capas*/
 background: #F9C; /* es el color de fondo de la capa*/
 border: solid 1px #000; /* número de pixeles del borde principal y
color de borde de la capa*/
 margin-left:100px; /* nos indica a que cantidad queremos que sea
nuestro margen izquierdo*/
 width:647px; /* ancho de la capa*/
 height:79px; /*alto de la capa*/
 top: 20px; /*a que distancia está en la parte superior*/
 font-size: 12px; /* tamaño de la letra*/
 text-align:center;/* alinea el texto*/
 padding:15px; /*distancia del texto con los bordes de la capa*/
Ahora veremos que contendrá nuestras capas como observamos tiene
trabajaremos con la etiqueta div id ya que lleva el símbolo #gato al
inicio del nombre de la capa seguida de una llave.
Trabajaremos con 6 capas.
Dentro de las llaves están los atributos que se asignan a la capa:
1#header {
Esta capa asignara una posición absoluta ya que podremos mover la capa tendrá un
fondo de color rosado, borde de 1px, margen izquierdo de 100, ancho 647px, alto de
79px, espacio superior 20px;
}
2#texto1 {
En esta capa se asignara para el texto tamaño 12px, alineacion centrada, distancia entre
los bordes 15px;
}

DISEÑO WEB
3#navigation {
fondo de color verde, borde de 1px, margen izquierdo de 100, ancho150, alto de 551px,
espacio superior 20px;
}
4#content {
fondo de color celeste, borde de 1px color negro, margen izquierdo de 100, ancho358,
alto de 552px, espacio superior 95px;
}
5#listlink{
fondo de color morado, borde de 1px color negro, margen izquierdo de 100, ancho358,
6#footer{
fondo de color amarrillo, borde de 1px color negro, margen izquierdo de 100, ancho
647, alto de 93px, espacio superior 645px;
}
AHORA ESTA ES LA CODIFICACIÓN PARA NUESTRO MAQUETADO.
CODIFICACION:
#header {
position:absolute;
background: #F9C;
border: solid 1px #000;
margin-left:100px;
width:647px;
height:79px;
top: 20px;
}
#texto1{
font-size: 12px;
text-align:center;

DISEÑO WEB
padding:15px;
}
#navigation{
position:absolute;
background: #0C6;
margin-left:100px;
width:150px;
height:551px;
top: 95px;
}
#content {
position:absolute;
background: #0FF;
margin-left:100px;
width:358px;
height:552px;
top: 95px;
}
#listlink{
position:absolute;
background: #66C;
margin-left:100px;
width:150px;
height:552px;
left: 661px;
top: 95px;
}
#footer{
position:absolute;
background: #FC3;

DISEÑO WEB
margin-left:100px;
width:647px;
height:93px;
left: 164px;
top: 645px;
}
PASO 7:
Seguidamente luego de haber hecho esto nos dirigimos al archivo HTML.
Primero veremos para que sirve cada línea de código.
 <!DOCTYPE>/*indica el tipo de documento con el cual estas trabajando*/
 <html>/*define el texto html*/
 <head>/*provee informacion sobre el documento*/
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>/*corrige errores de los caracteres especiales*/
 <link rel="stylesheet" href="css/style.css" type="text/css">/*no olvidarse de
esta línea de código porque es muy importante cuando se trabaja con CSS
EXTERNO; nos sirve para llamar a enlazar con la carpeta css*/
 <title>maquetado1</title>/*se utiliza para el título de la página en este caso
será maquetado1*/
 </head>/*cierre de la información del documento*/
 <body>/*define el cuerpo del texto*/
 <div id="header"></div>/*esta es la etiqueta div inicio y fin del texto observa
lo resaltado de celeste/ y lo que está de amarrillo es el nombre de la capa que se
encuentra en el css pero lo veremos en el ejemplo que a continuación veremos.*/
 <h1>HEADER</h1></div>/*la etiqueta h1 es para el texto tamaño*/
 </body>/*fin del texto o cuerpo*/
 </html>/*cierre del texto html*/
PASO 8:
Ahora veremos la codificación y las etiquetas ya mencionadas:
CODIFICACION: usando div id.
<!DOCTYPE>
<html>
<head>

DISEÑO WEB
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>maquetado1</title>
</head>
<body>
<div id="header"><div id="texto1"><h1>HEADER</h1></div></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="listlink"></div>
<div id="footer"><div id="texto1"><h1>FOOTER</h1></div></div>
</body>
</html>
Lo de rojo son los nombres de las capas que se encuentran en el CSS.
PASO 9:
EJECUTAMOS EN EL NAVEGADOR CON F12
RESULTADO:

DISEÑO WEB
EJERCICIO N°2:
Utilizando CSS externo.
De igual forma aremos los siguientes pasos.
PASO 1:
Creamos un nuevo archivo HTML nos dirigimos archivo nuevo.
Y seleccionaremos HTML con el cual trabajaremos
Listo nos muestra la ventana siguiente:
 Luego de elegir HTML nos muestra la siguiente ventana donde eliminaremos los
<head>

DISEÑO WEB
</head>
<body>
</body>
</html>
PASO 2:
AHORA: nos quedara así; no olvides poner el título de tu archivo HTML en mi caso le
puse MAQUETADO 2.
Seguimos el mismo procedimiento del anterior ejercicio guardar con ctrl+s y colocarle
un nombre en mi caso es MAQUETADO 2.
PASO 3:
Listo ahora crearemos un archivo CSS para crear las CAPAS.
Lo guardamos de igual forma en una carpeta con el nombre CSS.
PASO 4:
Listo ahora comenzaremos, nos dirigimos a nuestro CSS.
Donde crearemos nuestras capas.
 border: solid 1px #000; /*número de pixeles del borde de la capa y
color de borde de la capa*/

DISEÑO WEB
Trabajaremos con 6 capas.
Dentro de las llaves están los atributos que se asignan a la capa:
1#texto1 {
En esta capa se asignara para el texto tamaño 10px, alineación centrada, distancia entre
los bordes 15px;
}
2#header {
fondo de color rosado, borde de 1px, margen izquierdo de 93, distancia entre los bordes
5px, ancho 642px, alto de 79px, espacio superior 11px;
}
3#navigation {
fondo de color verde, borde de 1px, margen izquierdo de 93, distancia entre los bordes
5px, ancho 172px, alto de 253px, espacio superior 11px;
}
4#content {
fondo de color celeste, borde de 1px, margen izquierdo de 277, distancia entre los
bordes 5px, ancho 458px, alto de 520px, espacio superior 11px;
}
5#listlink{
fondo de color morado, borde de 1px color negro, margen izquierdo de 100, ancho 173,
}

DISEÑO WEB
6#footer{
fondo de color amarrillo, borde de 1px color negro, margen izquierdo de 100, ancho
643, alto de 86px, espacio superior 645px;
}
Nos dirigimos al archivo CSS Y codificamos las capas.
CODIFICACIÓN:
#texto1{
font-size: 10px;
text-align:center;
padding:15px;
}
#header{
position:absolute;
border: solid 1px #CCC;
background: #F6C;
padding:5px;
height:79px;
width: 642px;
left: 93px;
top: 11px;
}
#navigation{
position:absolute;
background: #3C6;
padding:5px;
width:172px;
height: 253px;
top: 102px;
left: 93px;
}
#content{
position:absolute;
background: #3CC;
padding:5px;

DISEÑO WEB
width:458px;
height: 520px;
left: 277px;
top: 101px;
}
#listlink{
position:absolute;
background: #66F;
padding:5px;
width:173px;
height: 253px;
left: 93px;
top: 366px;
}
#footer{
position:absolute;
background: #CC3;
padding:5px;
width:643px;
height: 86px;
left: 93px;
top: 631px;
}
PASO 5:
Ahora veremos la codificación y las etiquetas ya mencionadas anteriormente:
CODIFICACION: USANDO DIV ID.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div id="navigation"><div id="texto1"><h1>NAVIGATION</h1></div></div>

DISEÑO WEB
<div id="content"><div id="texto1"><h1>CONTENT</h1></div></div>
<div id="listlink"><div id="texto1"><h1>LISTLINK</h1></div></div>
</body>
</html>
PASO 6:
RESULTADO:

DISEÑO WEB
EJERCICIO N°3:
UTLIZANDO CSS EXTERNO.
PASO 1:
Luego de elegir HTML nos muestra una ventana donde eliminaremos los códigos que
no nos sirven. Los cuales son lo resaltado.
<head>
</head>
<body>
</body>
</html>

DISEÑO WEB
PASO 2:
Poner el título de tu archivo HTML en mi caso le puse MAQUETADO 3.
Guardamos ctrl+s en una carpeta.
PASO 3:
Listo ahora crearemos un archivo CSS para crear las CAPAS.
PASO 4:
 border: solid 1px #000; /*color de borde de la capa*/

DISEÑO WEB
 Como ya lo explicamos anteriormente los atributos ahora observen la
codificación.
 Ya que solo cambian los pixeles.
 Trabajamos con 6 capas de igual forma.
 Nos dirigimos al archivo CSS Y codificamos las capas.
CODIFICACIÓN:
#header{
position:absolute;
border: solid 1px #CCC;
background: #F6C;
padding:15px;
height:76px;
width: 529px;
margin-left:100px;
top: 19px;
}
#texto1{
font-size:5px;
text-align:center;
}
#navigation{
position:absolute;
background: #3C6;
padding:5px;
width: 550px;
height: 28px;
margin-left:100px;
top: 129px;
}
#content{
position:absolute;
background: #3CC;
padding:5px;
width: 550px;
height: 370px;
top: 167px;
margin-left:100px;
left: 10px;
}

DISEÑO WEB
#listlink{
position:absolute;
background: #66F;
padding:5px;
width: 550px;
height: 27px;
margin-left:100px;
top: 550px;
left: 10px;
}
#footer{
position:absolute;
background: #CC3;
padding:5px;
width: 550px;
height: 32px;
margin-left:100px;
top: 590px;
left: 11px;
}
PASO 5:
Ahora veremos la codificación y las etiquetas:
CODIFICACION: usando div id.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div id="navigation"><div id="texto1"><h1>NAVIGATION</h1></div></div>
<div id="content"><div id="texto1"><h1>CONTENT</h1></div></div>
<div id="listlink"><div id="texto1"><h1>LISTLINK</h1></div></div>
</body>
</html>

DISEÑO WEB
PASO 6:
RESULTADO:

DISEÑO WEB
EJERCICIO N°4:
UTLIZANDO CSS EXTERNO.
PASO 1:
PASO 2:
Luego de elegir HTML nos muestra la siguiente ventana donde eliminaremos los
Todo lo resaltado no sirve:
<head>

DISEÑO WEB
</head>
<body>
</body>
</html>
PASO 3:
No olvides poner el título de tu archivo HTML en mi caso le puse MAQUETADO 4.
Guardamos ctrl+s en una carpeta.
PASO 5:
Listo ahora crearemos un archivo CSS para crear las etiquetas.
PASO 6:
Con la etiqueta # gato. Ejemplo: #header seguido de las llaves de inicio y cierre {}.
 border: solid 1px #000; /*color de borde de la capa*/

DISEÑO WEB
Aquí trabajaremos con 18 div id capas en css.
Nos dirigimos al archivo CSS Y codificamos las capas.
CODIFICACIÓN:
#header1 {
position:absolute;
background: #CCC;
width:435px;
height:58px;
margin-left:100px;
top: 6px;
}
#texto1{
font-size:5px;
text-align:center;
}
#nav1 {
position:absolute;
background: #999;
width:379px;
height:20px;
left: 140px;
top: 27px;
}
#section_izq {
position:absolute;
background: #CCC;
margin-left:100px;
width:156px;
height:325px;
left: 10px;
top: 73px;

DISEÑO WEB
}
#nav2 {
position:absolute;
background: #999;
width:123px;
height:144px;
left: 132px;
top: 100px;
}
#aside1 {
position:absolute;
background: #666;
width:120px;
height:90px;
left: 134px;
top: 261px;
}
#section_der {
position:absolute;
background: #CCC;
margin-left:100px;
width:271px;
height:326px;
left: 173px;
top: 72px;
}
#header2 {
position:absolute;
background: #999;
width:253px;
height:19px;
left: 286px;
top: 94px;
}
#article1 {
position:absolute;
background: #CCC;
width:252px;
height:108px;

DISEÑO WEB
left: 286px;
top: 121px;
}
#header3 {
position:absolute;
background: #999;
width:236px;
height:20px;
left: 294px;
top: 145px;
}
#div1 {
position:absolute;
background: #999;
width:118px;
height:21px;
left: 293px;
top: 173px;
}
#aside2 {
position:absolute;
background: #999;
width:114px;
height:22px;
left: 418px;
top: 173px;
}
#p1 {
position:absolute;
background: #999;
width:237px;
height:23px;
left: 294px;
top: 201px;
}
#article2{
position:absolute;
background: #CCC;
width:250px;

DISEÑO WEB
height:102px;
left: 286px;
top: 252px;
}
#header4 {
position:absolute;
background: #999;
width:233px;
height:18px;
left: 298px;
top: 272px;
}
#div2 {
position:absolute;
background: #999;
width:233px;
height:19px;
left: 297px;
top: 297px;
}
#p2 {
position:absolute;
background: #999;
width:234px;
height:23px;
left: 296px;
top: 323px;
}
#footer1 {
position:absolute;
background: #CCC;
width:249px;
height:20px;
left: 289px;
top: 366px;
}
#footer2 {
position:absolute;
background: #CCC;

DISEÑO WEB
margin-left:100px;
width:434px;
height:24px;
left: 11px;
top: 404px;
}
PASO7:
Ahora veremos la codificación y las etiquetas :
CODIFICACION: USANDO DIV ID.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="css/style4.css" type="text/css">
</head>
<body>
<div id="header1"><div id="texto1"><h1>header</h1></div></div>
<div id="nav1"><div id="texto1"><h1>nav1</h1></div></div>
<div id="section_izq"><div id="texto1"><h1>section_izq</h1></div></div>
<div id="nav2"><div id="texto1"><h1>nav2</h1></div></div>
<div id="aside1"><div id="texto1"><h1>aside1</h1></div></div>
<div id="section_der"><div id="texto1"><h1>section_der</h1></div></div>
<div id="header2"><div id="texto1"><h1>header2</h1></div></div>
<div id="article1"><div id="texto1"><h1>article1</h1></div></div>
<div id="div1"><div id="texto1"><h1>div1</h1></div></div>
<div id="aside2"><div id="texto1"><h1>aside2</h1></div></div>
<div id="p1"><div id="texto1"><h1>p1</h1></div></div>
<div id="article2"><div id="texto1"><h1>article2</h1></div></div>
<div id="div2"><div id="texto1"><h1>div2</h1></div></div>
<div id="p2"><div id="texto1"><h1>p2</h1></div></div>
<div id="footer1"><div id="texto1"><h1>footer1</h1></div></div>
<div id="footer2"><div id="texto1"><h1>footer2</h1></div></div>
</body>
</html>
 Lo de rojo son los nombres de las capas que se encuentran en el CSS.
 Lo azul es el texto que se muestra en cada capa.

DISEÑO WEB
 Como observaremos en nuestro resultado.
PASO 8:
RESULTADO:

DISEÑO WEB

MAQUETACION WEB

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a MAQUETACION WEB

Similar a MAQUETACION WEB (20)

Último

Último (20)

MAQUETACION WEB