• Página 1 de 1
  • 1
Moderador del foro: ZorG  
Foro uCoz » Información General » Para los principiantes » Banner de cabecera
Banner de cabecera
Miguel
Mensajes: 8
Reputación: 0
Mensaje Nº 1 | 2:31 PM 2015-01-29
Hola.

He creado una cabecera, en Illustrator, para la web que estamos creando. Al guardar la imagen para web, el programa te descompone la imagen por sectores (tu puedes especificarlos también con la herraminta Sector) y te permite incrustarle enlaces a las imágenes. Más, el programa te permite visualizar el código HTML. Hasta aquí todo bien, pero tenemos problemas para agregar el código a la Hoja de Estilos. Mi compañero dice que como es HTML es complejo interpretarlo como CCS aunque no se si creerlo. Bueno, aquí os dejo el código que me genera Illustrator; en teoria es este código, lo que cambiaría sería los enlaces o vínculos de las imágenes:
Código
<html>
<head>
<title>Imprimir</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:absolute; left:0px; top:0px; width:938px; height:81px;">
   <div style="background-image:url(Banner_01.png); position:absolute; left:0px; top:0px; width:938px; height:15px;" title="">
   </div>
   <div style="background-image:url(Banner_02.png); position:absolute; left:0px; top:15px; width:15px; height:66px;" title="">
   </div>
   <div style="background-image:url(Banner_03.png); position:absolute; left:15px; top:15px; width:254px; height:54px;" title="">
   </div>
   <div style="background-image:url(Banner_04.png); position:absolute; left:269px; top:15px; width:14px; height:66px;" title="">
   </div>
   <a href="http://fwc.ucoz.net" style="cursor:hand">
    <div style="background-image:url(Banner_05.png); position:absolute; left:283px; top:15px; width:161px; height:28px;" title="">
    </div></a>
   <a href="http://fwc.ucoz/publ" style="cursor:hand">
    <div style="background-image:url(Banner_06.png); position:absolute; left:444px; top:15px; width:160px; height:28px;" title="">
    </div></a>
   <a href="http://fwc.ucoz.net/forum" style="cursor:hand">
    <div style="background-image:url(Banner_07.png); position:absolute; left:604px; top:15px; width:160px; height:28px;" title="">
    </div></a>
   <div style="background-image:url(Banner_08.png); position:absolute; left:764px; top:15px; width:160px; height:28px;" title="">
   </div>
   <div style="background-image:url(Banner_09.png); position:absolute; left:924px; top:15px; width:14px; height:66px;" title="">
   </div>
   <div style="background-image:url(Banner_10.png); position:absolute; left:283px; top:43px; width:641px; height:38px;" title="">
   </div>
   <div style="background-image:url(Banner_11.png); position:absolute; left:15px; top:69px; width:254px; height:12px;" title="">
   </div>
</div>
</body>
</html>
Post editado por Miguel - Jueves, 2015-01-29, 2:34 PM
bigblog
Mensajes: 25
Reputación: 0
Mensaje Nº 2 | 5:09 PM 2015-01-29
Código
<html>  
<head>  
<title>Imprimir</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
</head>  
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  
<div style="position:absolute; left:0px; top:0px; width:938px; height:81px;">  
    <div style="background-image:url(/Banner_01.png); position:absolute; left:0px; top:0px; width:938px; height:15px;" title="">  
    </div>  
    <div style="background-image:url(/Banner_02.png); position:absolute; left:0px; top:15px; width:15px; height:66px;" title="">  
    </div>  
    <div style="background-image:url(/Banner_03.png); position:absolute; left:15px; top:15px; width:254px; height:54px;" title="">  
    </div>  
    <div style="background-image:url(/Banner_04.png); position:absolute; left:269px; top:15px; width:14px; height:66px;" title="">  
    </div>  
    <a href="http://fwc.ucoz.net" style="cursor:hand">  
     <div style="background-image:url(/Banner_05.png); position:absolute; left:283px; top:15px; width:161px; height:28px;" title="">  
     </div></a>  
    <a href="http://fwc.ucoz/publ" style="cursor:hand">  
     <div style="background-image:url(/Banner_06.png); position:absolute; left:444px; top:15px; width:160px; height:28px;" title="">  
     </div></a>  
    <a href="http://fwc.ucoz.net/forum" style="cursor:hand">  
     <div style="background-image:url(/Banner_07.png); position:absolute; left:604px; top:15px; width:160px; height:28px;" title="">  
     </div></a>  
    <div style="background-image:url(/Banner_08.png); position:absolute; left:764px; top:15px; width:160px; height:28px;" title="">  
    </div>  
    <div style="background-image:url(/Banner_09.png); position:absolute; left:924px; top:15px; width:14px; height:66px;" title="">  
    </div>  
    <div style="background-image:url(/Banner_10.png); position:absolute; left:283px; top:43px; width:641px; height:38px;" title="">  
    </div>  
    <div style="background-image:url(/Banner_11.png); position:absolute; left:15px; top:69px; width:254px; height:12px;" title="">  
    </div>  
</div>  
</body>  
</html>
József,
uCoz Web-Services.
josemanuel3800
Mensajes: 389
Reputación: 10
Mensaje Nº 3 | 8:14 PM 2015-01-29
Miguel mira, eso te complicara mucho, ya que estas metiendo el css en el mismo html y despues se ara demasiado codigo en un solo archivo.

Hay 3 formas de ponerle estilos a los elementos.

Una es con las etiquetas
Código
<style></style>


Otra es por elemento ejemplo
Código
<div class="tuetiqueta" style="whidth:100px; height;100px; background:#000;">Contendo del div</div>


Y la ultima y mas recomendada es llamar la hoja de estilos desde tu html
Código
<link rel="stylesheet" href="tuhojadeestilos.css" />


Ese código se mete dentro de las etiquetas head de tu pagina web, lo que editas es el archivo tuhojadeestilos.css.

Este es un documento html5

Cita
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width:device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="./style.css" media="all" />
</head>
<body>
<header>
<nav>
</nav
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>


Para editar los estilos de la plantilla seria mas o menos así:

Código
body {
     margin:0;
     padding:0;
     background: url(aqui-la-urlu.jpg);    o    si quieres un color seria un codigo #fff;   
}

header{
     whidth: 100%; así ocuparía todo el ancho de la cabecera
     height:200px;
     background:url(imagendefondodecabecera.jpg) no-repeat;
}


Y ya ditas todo desde el css, es mas practico y mas organizado, lo entenderás mas!

Saludos!
Si lo intentas, puedes perder; si no lo intentas, ya has perdido.
Post editado por josemanuel3800 - Jueves, 2015-01-29, 8:15 PM
Miguel
Mensajes: 8
Reputación: 0
Mensaje Nº 4 | 3:38 PM 2015-01-30
Lo que queremos conseguir es lo que aparece en la imagen adherida a este comentario.
Adherido: 3394430.jpg (219.3 Kb)
Post editado por Miguel - Viernes, 2015-01-30, 3:56 PM
josemanuel3800
Mensajes: 389
Reputación: 10
Mensaje Nº 5 | 2:57 AM 2015-01-31
Miguel, Revisa este enlace, pero revisalo jaja http://codepen.io/cheitt0/pen/YPxbRd

Saludos! wink
Si lo intentas, puedes perder; si no lo intentas, ya has perdido.
Foro uCoz » Información General » Para los principiantes » Banner de cabecera
  • Página 1 de 1
  • 1
Búscar: