Descarga
Anuncio
Anteproyecto de unidad
Primero Básico
Formularios/Tablas HTML+CSS Dreamweaver
Instrucciones: Realiza el siguiente anteproyecto a mano
con buena letra y debe de llevar todo lo que se le
solicita estrictamente punto por punto. Recuerda que si
no entregas el presente anteproyecto NO SE TE
RECIBIRÁ NI CALIFICARÁ EL PROYECTO DE UNIDAD. Es
obligatorio que adjunte la carátula en el formato que
aparece en este documento así como la lista de cotejo
que aparecerá al final del presente documento.
--------------------------------------------------------------------------Instrucciones Específicas: Copiar todo el contenido del
presente documento, a mano y con buena letra. Debe
entregarse en un folder tamaño carta en hojas líneas, el
folder debe de ser únicamente AZUL. Al inicio del
anteproyecto irá la carátula (el formato está más
adelante) y la lista de cotejo (Solo si desea la carátula y
la lista de cotejo puede ser impresa)
Lista de Cotejo
1. Orden, ortografía, limpieza, redacción, buena
letra, hojas tamaño carta línea, folder rojo
tamaño carta, Carátula del anteproyecto
2. Copio todo el código del inciso no 1
3. Copio todo el código del inciso no 2
4. Realizó Diagrama/Bosquejo inciso no 3
TOTAL DEL ANTEPROYECTO /APROBACIÓN PROYECTO
Punteo
1
2
1
1
5
Colegio Salesiano Don Bosco
Materia: Informática
Catedráticos: Víctor Aquino/Débora Santizo
ANTEPROYECTO DE UNIDAD
SEGUNDA UNIDAD
Nombre:________________________________
Grado y Sección:_________________________
Clave:________
Nueva Guatemala de la Asunción, Mayo de 2016.
Única parte del anteproyecto:
1. Código para generar: Formulario simple de base de HTML
+ CSS en Dreamweaver con su diseño decorativo
<!DOCTYPE html>
<html>
<head>
<title>hola</title>
<style type="text/css">
body {
background: red;
}
#titulo{
font-family:Impact;
font-size:80px;
text-decoration:underline;
background-color:none;
color:black;
}
#caja1{
border-style:double;
border-color:white;
border-radius:45px 45px 45px 45px;
width:500px;
height:150px;
border-width:7px;
}
#leyenda{
font-family:Arial;
font-size:30px;
color:blue;
background-color:yellow;
}
#nombre{
font-family:"Comic Sans MS", cursive;
font-size:25px;
color:green;
background-color:white;
}
#direccion{
font-family:"Comic Sans MS", cursive;
font-size:25px;
color:green;
background-color:white;
}
#contraseña{
font-family:"Comic Sans MS", cursive;
font-size:25px;
color:green;
background-color:white;
}
#caja2{
border-style:dotted;
border-color:white;
border-radius:45px 45px 45px 45px;
width:500px;
height:150px;
border-width:7px;
}
#leyenda2{
font-family:"Times New Roman", Times, serif;
font-size:30px;
color:white;
background:magenta;
}
#boton1{
font-family:Impact;
font-size:50px;
background:orange;
border-radius:55px 55px 55px 55px;
}
#boton2{
font-family:Impact;
font-size:50px;
background:gold;
border-radius:55px 55px 55px 55px;
}
#nom{
background:skyblue;
opacity:1;
border-radius:25px 25px 25px 25px;
border-style:dashed;
border-width:2.5px;
width:200px;
height:30px;
}
#dir{
background:green;
opacity:1;
border-radius:25px 25px 25px 25px;
border-style:dashed;
border-width:2.5px;
width:200px;
height:30px;
}
#con{
background:brown;
opacity:1;
border-radius:25px 25px 25px 25px;
border-style:dashed;
border-width:2.5px;
width:200px; height:30px; }
</style>
</head>
<body>
<div id="titulo">
MI FORMULARIO
</div>
<form>
<fieldset id="caja1">
<table>
<legend id="leyenda">Datos Personales</legend>
<tr>
<td><label id="nombre">Nombre</label></td>
<td><input type="text" id="nom" value="" />
</tr>
<tr>
<td><label id="direccion">Direccion </label></td>
<td><input type="text" id="dir" value="" /></td>
</tr>
<tr>
<td><label id="contraseña">Contraseña</label></td>
<td><input type="password" id="con" value="" /></td>
</tr>
</table>
</fieldset>
<fieldset id="caja2">
<table>
<legend id="leyenda2">Botones y Listas</legend>
<tr>
<td><input type="submit" id="boton1" value="Enviar" /></td>
<td><input type="reset" id="boton2" value="Borrar" 7></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
2. Código para generar formulario con textarea, combobox,
lista múltiple, repaso de label, checkbox y adornos.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background:red;
}
#caja{
width:300px;
height:615px;
border:double 7px yellow;
border-radius:9px;
font-family:Comic Sans Ms;
font-size:13px;
color:blue;
background:lime;
}
#leyenda{
font-family:Impact;
font-size:31px;
color:white;
background:green;
}
#nombre{
font-family:Arial black;
font-size:20px;
color:magenta;
background:white;
}
#nom{
border-radius:0px 40px 0px 40px;
border:dotted 4px red;
background:blueviolet;
}
#direccion{
font-family:Corbel black;
font-size:20px;
color:magenta;
background:gold;
}
#dir{
border-radius:0px 40px 0px 40px;
border:inset 6px black;
background:magenta;
}
#corea{
font-family:Georgia;
font-size:25px;
color:blue;
background:yellow;
}
#India{
font-family:Times New Roman;
font-size:26px;
color:magenta;
background:black;
}
#comenta{
border-radius:5px;
border:ridge 1px gray;
background:brown;
font-family:Calibri;
font-size:28px;
color:white;
}
#comentario{
border-radius:7px;
border:dotted 8px black;
background:blue;
opacity:0.9;
}
#texto{
font-family:Arial black;
font-size:25px;
color:purple;
}
#multiple{
border-radius:6px;
border:dotted 10px blue;
background:yellow;
font-family:Comic Sans Ms;
font-size:15px;
color:black;
}
#combobox{
border-radius:6px;
border:dashed 5px magenta;
background:violet;
font-family:Comic Sans Ms;
font-size:15px;
color:white;
}
</style>
</head>
<body>
<meta charset="UTF-8" />
<form>
<fieldset id="caja">
<h1>CHECKBOX, TEXTAREA, COMBOBOX, LISTA MULTIPLE
</h1>
<legend id="leyenda">DATOS</legend>
<table>
<tr>
<td><label id="nombre">Nombre</label></td>
<td><input type="text" id="nom" value="enviar" /></td>
</tr>
<tr>
<td><label id="direccion">Direccion</label>
<td><input type="text" id="dir" value="enviar" /></td>
</tr>
<tr>
<td><input type="checkbox" id="p1" value="" /></td>
<td><label id="corea">Corea del Sur</label></td>
</tr>
<tr>
<td><input type="checkbox" id="p2" value="" /></td>
<td><label id="India">India</label></td>
</tr>
<tr>
<td><label id="comenta">Comenta en la Caja </label></td>
<td><textarea rows="4" cols="60" id="comentario">Escribe
tu comentario acá</textarea></td>
</tr>
<tr>
<td id="texto">Lista Multiple</td>
<td><select name="docentes" size="4" id="multiple"
multiple>
<option>Aquino</option>
<option>Zavala</option>
<option>Acosta</option>
<option>Lucero</option>
</select>
</td>
</tr>
<tr>
<td id="texto">Lista Combobox</td>
<td><select name="ciudades" id="combobox">
<option>-Escoge una ciudad-</option>
<option>Seul</option>
<option>New York </option>
<option>Buenos Aires</option>
<option>Madrid</option>
</select>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
3. Haga un diagrama a mano sobre cómo va diseñando su
página: ¿Qué colores le vas a colocar?, ¿Cómo vas a
hacer tu formulario, y tu tabla? Dibuja los elementos de
la página web y escribe más o menos como vas
diseñando tu formulario y tabla en página web. Debes de
hacer un diagrama o dibujo más una explicación breve de
cómo vas diseñando tu proyecto (mínimo 7 líneas). Acá
debe de colocar con lápiz, lapicero, crayones etc., el
BOSQUEJO de cómo va diseñando su proyecto. Es como
si trabajaras un diseño en sucio.
