Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ejemplo Examen Formularios

    Cargado por

    Alberto Gonzalez Nuñez
    25 vistas5 páginas
    ok

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    ok

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    25 vistas5 páginas

    Ejemplo Examen Formularios

    Cargado por

    Alberto Gonzalez Nuñez
    ok

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    Según el ejemplo de código HTML crea un sitio web en Dreamweaver.

    Trabaja donde
    tienes palabras en negrita y añade imágenes y formato para darle un diseño atractivo.
    En la siguiente página tienes un ejemplo del css que puedes utilizar.
    Una vez realizada la página principal (que será la de personal), conviértela en plantilla
    con regiones editables que consideres convenientes.
    A partir de la plantilla crea el resto de las páginas, excepto la de contacto.

    <html> <head>
    <title>Portafolio Profesional</title>
    <link type="text/css" rel="stylesheet" href="estilos.css" />
    </head>
    <body>

    <div class="principal">
    <div class="encabezado1">
    <img src="imagen de cabecera">
    </div>

    <div class="contenido">
    <div class="menu">
    <img src="imagen del menú>
    <ul> <li><a href="persona.html">Formacion</a></li>
    <li><a href="formacion.html">Experiencia</a></li>
    <li><a href="experiencia.html">Experiencia</a></li>
    <ul> <li><a href="contacto.html">Curriculo</a></li>
    </div>

    <div class="encabezado2">
    <h1>TITULO DE LA PAGINA DE CONTENIDO</h1>
    </div>

    <div class="pagina">
    <h1>MI CONTENIDO</h1>
    </div>
    </div>

    <div class="piepagina">
    <h1>Autor: mi nombre con un enlace a mi correo electrónico</h1>
    </div>
    </div>
    </body>
    </html>
    Código CSS del Ejemplo(estilos.css).

    body{ .contenido{
    padding:20px; width: 96%;
    margin:20px 60px; height: 600px;
    font-family:Arial; background-color: white;
    font-size: 18px; margin: 20px 20px 20px 20px ;
    background-color:silver; border:4px inset purple;
    } }
    .principal{ .menu{
    width: 95%; width: 20%;
    height: 900px; height: 550px;
    background-color: white; background-color: D0FA58;
    margin: 20px 20px 20px 20px ; margin: 20px 20px 20px 20px ;
    border:4px inset purple; float: left;
    } border:4px inset purple;
    .encabezado1{ text-align:left;
    width: 96%; }
    height: 100px; .pagina{
    background-color: D0FA58; width: 70%;
    margin: 20px 20px 20px 20px ; height: 400px;
    border:4px inset purple; background-color: D0FA58;
    } margin: 20px 20px 20px 20px ;
    .encabezado2{ float: right;
    width: 70%; border:4px inset purple;
    height: 100px; text-align:center;
    float: right; }
    background-color: D0FA58; .piepagina{
    margin: 20px 20px 20px 20px ; width: 96%;
    border:4px inset purple; height: 100px;
    } background-color: D0FA58;
    margin: 20px 20px 20px 20px ;
    border-color: black;
    border:2px;
    border:4px inset purple;
    font-family:Arial;
    font-size: 10px;
    }
    Crea un formulario en la página de contacto.
    La página de contacto se creará a partir de un nuevo documento en blanco y tendrá un
    archivo de estilo css propio

    Créala a partir del siguiente ejemplo:

    <html>
    <head>
    <title>Contacto</title>
    <link rel='stylesheet' href='estilos.css'>
    </head>
    <body>
    <form class='contacto'>
    <div><label>Tu Nombre:</label><input type='text' value=''></div>
    <div><label>Tu Email:</label><input type='text' value=''></div>
    <div><label>Asunto:</label><input type='text' value=''></div>
    <div><label>Mensaje:</label><textarea rows='6'></textarea></div>
    <div><input type='submit' value='Envia Mensaje'></div>
    </form>
    </body>
    </html>
    Empezamos con el siguiente código que define las propiedades de fuente, color de
    fondo y longitud del body para esta página:

    Fuente: Sans-serif
    Tamaño: 12px
    Color: #798e94
    Ancho: 400px
    Margen: automatico
    Color de fondo: #e2ecee

    Formulario
    Hacemos un selector para el formulario (.contacto) y le definimos border, border-
    radius, padding, margin y color de fondo:

    Borde de grosor 1px de estilo sólido y color #ced5d7


    Borde de radio: 6px
    Relleno de 45px superior, 45px derecha y 20px abajo e izquierda.
    Color de fondo: Blanco
    /*para completar:
    box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
    Se definiendo dos sombras: una externa y otra interna que da la apariencia de un
    borde interior*/

    Luego hacemos selectores para label y div (utiliza .contacto label y .contacto div)

    Para label utiliza un display block /* esto es para que el label se sobreponga a la caja
    de texto */
    Estilo: Negrita

    Para div:
    Margen inferior de 15px

    Cajas de texto
    Para las cajas de textos usamos selectores múltiples, para los input y para el textarea:

    .contacto input[type='text'], .contacto textarea{


    padding: 7px 6px;
    width: 294px; /* una longitud definida */
    border: 1px solid #CED5D7;
    resize: none; /* esta propiedad es para que el textarea no sea redimensionable */
    box-shadow:0 0 0 3px #EEF5F7;
    margin: 5px 0;
    }
    .contacto input[type='text']:focus, .contacto textarea:focus{
    outline: none; /* reset especifico para Chrome/Safari */
    box-shadow:0 0 0 3px #dde9ec;
    }

    Se usa el selector input[type=’text’](selector de atributo) esto es para que no se mezcle


    con el otro input[type=’submit’] (el botón de envío).

    Boton de Envio
    Por ultimo para el boton de envio usaremos estilos similares a los de las cajas de
    textos, pero ademas va a tener bordes redondeados, sombra al texto y para el
    background le pondremos degradados CSS3:

    .contacto input[type='submit']{
    border: 1px solid #CED5D7;
    box-shadow:0 0 0 3px #EEF5F7;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 0px white;

    background: #e4f1f6; /* fallback para navegadores que no soporten degradados */


    background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
    background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
    }
    .contacto input[type='submit']:hover{
    background: #edfcff;
    background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
    background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
    }
    .contacto input[type='submit']:active{
    background: #cfe6ef;
    background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
    background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
    }

    También podría gustarte