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 WEBDOCENTE : 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.

VISIÓN

MISIÓN

VALORES

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

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.

CHARCA CAHUI, Noemí Página 4

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:






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



PASO 4:







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;border: solid 1px #009;padding:5px;width:172px;height: 253px;top: 102px;left: 93px;}

#content{position:absolute;border: solid 1px #009;background: #3CC;padding:5px;


DISEÑO WEB

width:458px;height: 520px;left: 277px;top: 101px;}

#listlink{position:absolute;border: solid 1px #009;background: #66F;padding:5px;width:173px;height: 253px;left: 93px;top: 366px;}

#footer{position:absolute;border: solid 1px #009;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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/style.css" type="text/css"><title>maquetado2</title></head>

<body><div id="header"><div id="texto1"><h1>HEADER</h1></div></div><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><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 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:



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;border: solid 1px #009;padding:5px;width: 550px;height: 28px;margin-left:100px;top: 129px;}

#content{position:absolute;background: #3CC;border: solid 1px #009;padding:5px;width: 550px;height: 370px;top: 167px;margin-left:100px;left: 10px;}


DISEÑO WEB

#listlink{position:absolute;border: solid 1px #009;background: #66F;padding:5px;width: 550px;height: 27px;margin-left:100px;top: 550px;left: 10px;}

#footer{position:absolute;background: #CC3;border: solid 1px #009;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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/style.css" type="text/css"><title>maquetado3</title></head>

<body><div id="header"><div id="texto1"><h1>HEADER</h1></div></div><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><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.


DISEÑO WEB

PASO 6:


RESULTADO:

EJERCICIO N°4:


DISEÑO WEB

UTLIZANDO CSS EXTERNO.


PASO 1:



PASO 2:




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;border: solid 1px #000;background: #CCC;width:435px;height:58px;margin-left:100px;top: 6px;

}#texto1{

font-size:5px;text-align:center;}

#nav1 {position:absolute;border: solid 1px #000;background: #999;width:379px;height:20px;left: 140px;top: 27px;

}#section_izq {

position:absolute;border: solid 1px #000;background: #CCC;margin-left:100px;width:156px;height:325px;left: 10px;top: 73px;

}#nav2 {


DISEÑO WEB

position:absolute;border: solid 1px #000;background: #999;width:123px;height:144px;left: 132px;top: 100px;

}#aside1 {


}#section_der {

position:absolute;border: solid 1px #000;background: #CCC;margin-left:100px;width:271px;height:326px;left: 173px;top: 72px;

}#header2 {


}#article1 {

position:absolute;border: solid 1px #000;background: #CCC;width:252px;height:108px;left: 286px;top: 121px;


DISEÑO WEB

}#header3 {


}#div1 {


}#aside2 {


}#p1 {


}#article2{

position:absolute;border: solid 1px #000;background: #CCC;width:250px;height:102px;left: 286px;


DISEÑO WEB

top: 252px;}#header4 {


}#div2 {


}#p2 {


}#footer1 {

position:absolute;border: solid 1px #000;background: #CCC;width:249px;height:20px;left: 289px;top: 366px;

}#footer2 {

position:absolute;border: solid 1px #000;background: #CCC;margin-left:100px;width:434px;


DISEÑO WEB

height:24px;left: 11px;top: 404px;

}PASO7:


Ahora veremos la codificación y las etiquetas :

CODIFICACION: USANDO DIV ID.

<!DOCTYPE html><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/style4.css" type="text/css"><title>maquetado4</title>

</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="header3"><div id="texto1"><h1>header3</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="header4"><div id="texto1"><h1>header4</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.

Como observaremos en nuestro resultado.


DISEÑO WEB

PASO 8:


RESULTADO:


maquetacion web

Education