Scribd Logo
Importer

Bienvenue sur Scribd !

  • Maquetando Nuestra Página Web

    Transféré par

    Dario Martin Caceres
    12 vues3 pages

    Titre original

    Maquetando nuestra página web

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    12 vues3 pages

    Maquetando Nuestra Página Web

    Transféré par

    Dario Martin Caceres

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Crea tu pgina web ya!

    Ttulo de tu pgina web : Tu e-mail :


    T u e- mail es obligatorio pues nos permitir enviarte tu c ontras ea.

    Buscar

    Inicio > Maque tando nue stra pgina we b

    Anuncios Google

    Hacer pagina web Crear una web Plantillas web

    Maquetando nuestra pgina web


    Por: Lucas Muoz
    Recomendar leccin:
    Me gusta 4 Tw ittear 1 0

    CURSOS RELACIONADOS

    Warning: mysql_fetch_array() expects parameter 1 to Que no te asuste el titulo, no es ms que organizar el contenido en bloques para lograr un be resource, boolean diseo limpio y ordenado. Lo haremos con la ayuda de estilos CSS y trataremos de given in separar el diseo del contenido para redisear nuestra pagina web las veces que sea /home/admin/domains/comocrearunsi necesario sin modificar todas las paginas de nuestro sitio. on line 236

    Diagramando nuestro diseo


    El primer paso es diagramar la estructura, el esqueleto de nuestra pagina por as decirlo, nosotros lo haremos as: Encabezado (donde ir el logo) Barra lateral (ac pondremos los enlaces y dems chiches que queramos) Contenido (texto, imgenes, videos, etc) Pie de pgina (crditos, copyrigth) teniendo la idea de la estructura podemos comenzar a escribir nuestro cdigo.

    Primero lo primero: creamos la hoja de estilos CSS


    Lo primero que debemos hacer es crear la hoja de estilos estilos.css y guardarla en el directorio principal de nuestra pgina web. Ahora comenzaremos a crear el cdigo para estructurar los bloques. Primero definimos el color, tamao y tipo de fuente que usar nuestra pgina web: body{ color: black; font-size: 12px; font-family: verdana, sans-serif; } ahora deberemos crear el bloque contenedor donde asignaremos el ancho, los mrgenes y dems atributos de nuestra pgina web: #contenedor { width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } y ahora si comenzamos a crear los bloques de nuestro diagrama, primero el encabezado: #encabezado { padding: 5px;

    Crear una Pagina Web

    margin-bottom: ; background-color: rgb(213, 219, 225); } es el turno del bloque que contendr lo mas importante, el contenido: #contenido { padding: 5px; margin-left: ; background-color: gray; } Lo que sigue es crear la barra lateral: #barra-lateral { float: left; width: ; margin: 0; margin-right: ; padding: 5px; background-color: rgb(235, 235, 235); } y por ltimo el pie de pgina: #pie{ clear: both; padding: 5px; margin-top: ; background-color: rgb(213, 219, 225); } Bien, con esto ya tenemos los bloques creados, ahora viene lo ms importante, la maquetacin.

    Maquetando los bloques CSS


    Ya tenemos nuestra hoja de estilos creada, ahora deberemos vincularla con nuestro cdigo HTML, para eso insertamos la etiqueta <link> dentro de <head></head> con la ubicacin de nuestro archivo css: <link href="estilos.css" rel="stylesheet" type="text/css"> El orden en que debemos llamar a los bloques es importante para que quede como queremos, sera as: <html> <head> <title>Maquetando con estilos CSS</title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <div id="contenedor"> <div id="encabezado">ENCABEZADO</div>

    <div id="barra-lateral">BARRA LATERAL</div>

    <div id="contenido">CONTENIDO</div> <div id="pie">PIE DE PGINA</div> </div> </body> </html>

    Pueden ver como queda este ejemplo haciendo clic ac.

    Quinta Leccin: Subir una pgina Web Te quedaron dudas de esta leccin? Unete a la Comunidad de Webmasters y haz tu pregunta, entre todos te ayudaremos.
    Escribe el ttulo de tu pregunta aqu... Enviar pregunta

    Pasajes en Oferta
    Despegar.com.ar/Pasajes_Ofertas Vuelos Econmicos a Todo el Mundo Mejor Precio Garantizado. Reserve!

    Imprimir

    Enviar por email

    Favoritos

    T amao de fuente

    LECCIONES RELACIONADAS
    Conceptos bsicos de estilos css Creando nuestro primer div Tutorial dreamweaver Buscar y reemplazar en dreamweaver

    Cursos de HTML5 y CSS3


    EducacionIT.com.ar/Curso-de-HT Domina lo ltimo en desarrollo Web! Cursos de Diseo y Programacin

    Politica de privacidad | Publicidad | Contacto | Mapa web

    Vous aimerez peut-être aussi