Este documento presenta los pasos para maquetear una página web utilizando CSS externo. Explica 19 pasos que incluyen codificar distintos elementos HTML con IDs y estilos CSS como posición, tamaño, bordes y márgenes para posicionar y dar formato a diferentes secciones y cuadros en la página. El objetivo es mostrar visualmente el diseño final de la página maqueteada con CSS externo.

1. “Año de la diversificación productiva y del fortalecimiento de la educación”
INSTITUTO DE EDUCACIÓN SUPERIOR
TECNOLÓGICO PRIVADO
“TECNOTRONIC”
COMPUTACIÓN E INFORMÁTICA
UNIDAD DIDACTICA : DISSEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE :MAMANI CAÑAZACA Noemi.
CICLO ACADÉMICO : V
SEMESTRE : 2015 III
Juliaca - Puno – Perú.
2015

2. VISIÓN
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.
MISIÓN
Formar profesionales competitivos en un ambiente de
Emprendimiento, Innovación, Eficiencia y Valores.

3. Ejercicio 4: Maquete utilizando CSS externo.
Primero lo tenemos abierto el programa dreamweavern para así podertrabajar,
los pasos sonlos siguientes.
Paso N°1:
Para esto es los siguientes códigos que nos servirán para poderhacerlo el
ejercicio N°4
Paso N°2:codificamos los siguientes códigos css
Enlace con css en HTML:

4. Después lo guardamos y hacemos clic vista previa de navegador y lo
mostrara así
Paso N°3:codificamos los siguientes códigos en CSS
En HTML:

5. Paso N°4:codificamos los siguientes códigos css.
Paso N°5:codificamos los siguientes códigos css.
Paso N°6:codificamos los siguientes códigos css.

6. EN HTML:
Nos mostrara asi:
Paso N°7:codificamos los siguientes códigos css.

7. Paso N°8:codificamos los siguientes códigos css.
Paso N°9:codificamos los siguientes códigos css.
Paso N°10:codificamos los siguientes códigos css.

8. Paso N°11:codificamos los siguientes códigos css.
#actile2{
width: 210px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 55px;
}
Paso N°12:codificamos los siguientes códigos css.
#actile3{
width: 140px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: 226px;

9. margin: 20px;
top: 55px;
}
Paso N°13:codificamos los siguientes códigos css.
#arcticle4{
width: 370px;
height: 30px;
border: 1px solid #000;
position: absolute;
left: -4px;
margin: 20px;
top: 89px;
}
En HTML:

10. No mostrara asiya:
Paso N°14:codificamos los siguientes códigos css.
#cuadrado{
width: 400px;
height: 150px;
border: 1px solid #000;
position: absolute;
left: 285px;
margin: 20px;
top: 379px;
}

11. Paso N°15:codificamos los siguientes códigos css.
#cuadrado1{
width: 370px;
height: 20px;
border: 1px solid #000;
position: absolute;
left: -5px;
margin: 20px;
top: 52px;
}
Paso N°16:codificamos los siguientes códigos css.
Paso N°17:codificamos los siguientes códigos css.
En HTML:

12. Ahora nos mostrara asi:

13. Paso N°18:codificamos los siguientes códigos css.
Paso N°19:codificamos los siguientes códigos css.
En HTML:

14. Finalmente nos mostrara asi: