|
   |
| Moderador del foro: ZorG |
| Foro uCoz Información General Para los principiantes Banner de cabecera |
| Banner de cabecera |
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
|
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. |
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
|
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
|
Miguel, Revisa este enlace, pero revisalo jaja http://codepen.io/cheitt0/pen/YPxbRd
Saludos! 
Si lo intentas, puedes perder; si no lo intentas, ya has perdido.
|
| |||
| |||