En este tutorial enseñaremos a crear css desgin y a modificar css enchos por otros.
1. colores y fondo
Como agregar colores a las letras y al fondo
la propiedad 'color'
Ejemplo:
Los titulos de la web en color azul:
El elemento <h1> tiene que colocarse antes del texto que esta como titulo. El código siguiente se establece despues del texto que esta como titulo </h1>.
Luego colocar el siguiente codigo en tu css este codigo sirve para cambiar el color del titulo para modificar el color solo tienes que modificar lo que esta de color verde.
Cita:
h1 {
color: #6eacec;
}
Resultado:
1.2:La propiedad 'background-color'
La propiedad background-color es el color de fondo de los elementos.
Ejemplo:
En este ejemplo colocaremos color de fondo al titulo de la web:
Cita:
h1 {
color: #6eacec;
background-color: #cccccc;
}
Resultado:
1.3 Imágenes de fondo [background-image]
La propiedad CSS background-image se usa para insertar una imagen de fondo.
Ejemplo:
Para el ejemplo de la imagen de fondo, vamos a usar la imagen que ves más abajo. Tambien bien puedes usar otra imagen.
Para insertar la imagen como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body>.
Cita:
body {
background-color: #FFCC66;
background-image: url("http://www.fileden.com/files/2008/3/24/1833523/default.jpg");
}
Resultado:
2: como agregar un header(encabezado) al diseño:
Primero tenemos que pegar el codigo siguiente en nuestro css:
Cita:
#header {
width: 863px;
position: relative;
height: 142px;
background: #fff url(Url de la imagen) no-repeat center top;
padding: 0;
}
Luego tenemos que colocar el siguiente codigo en texto por encima de la pagina:
Cita:
<!--header -->
<div id="header">
</div>
otra forma mas facil para colocar un header es esta:
colocar este codigo en texto por encima de la pagina:
Cita:
<center> <img src="Url de la imagen" border="0"> </center>
Resultado:
3:Como crear un menu horizontal:
Primeros introduciremos en siguiente codigo en nuestro css:
Cita:
/* Menu */
#menu {
clear: both;
margin: 0 auto; padding: 0;
background: url(Url de la imagen de Fondo del menu) repeat-x 0 0;
font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
height: 32px;
width: 839px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #FFF;
text-decoration: none;
}
#menu ul li.last a {
padding-right: 20px;
}
#menu ul li a:hover {
color: #cccccc;
}
#menu ul li#current a {
color: #ccc;
}
Luego introduciremos el siguiente codigo en texto por encima de la web:
4: como crear una caja de texto rapido y funcional en html para css con fieldset.
Primero tienen que introducir estos codigos donde se les indican:
Texo por encima de la pagina
Cita:
<fieldset>
<img src="Imagen que comienza en la caja de texto" border="0" />
<table background=imagen de fondo de la caja de texto height=100 width= 733>
<tr>
<td>
Texto por debajo de la pagina
Cita:
</td>
</tr>
</table>
<img src="imagen de fin de la caja de texto " border="0" />
</fieldset>
Luego introducir el siguiente codigo css en tu css:
Esta exelente exelente con este tuto Talvelz volvamos a los tiepos en que pwg
era un mundo de Creaciones y no Adaptaciones
Espero Que Cambie eso ... Que ya nadie confia en su Toque grafico ?
Bueno Esta exelente este tutorial gracias por aportar :D
Realmente Exelente 10 / 10
Editado:
Puedo usar esta imagen para cosas de mi web ? [img]ttp://www.fileden.com/files/2008/3/24/1833523/titulotutorial.png[/img] Me ha gustado mucho jajaj
Ultima edición por designstudios el Vie Jun 19, 2009 1:41 pm; editado 1 vez
Esta exelente exelente con este tuto Talvelz volvamos a los tiepos en que pwg
era un mundo de Creaciones y no Adaptaciones
Espero Que Cambie eso ... Que ya nadie confia en su Toque grafico ?
Bueno Esta exelente este tutorial gracias por aportar :D
Realmente Exelente 10 / 10
Editado:
Puedo usar esta imagen para cosas de mi web ? [img]ttp://www.fileden.com/files/2008/3/24/1833523/titulotutorial.png[/img] Me ha gustado mucho jajaj
pues parece que no :S , en mi taller lo unico que me piden es
"haceme una imagen como la de este usuario " o haceme una plantilla como la de este otro usuario "
es que creo que no tienen ganas de trabajar , ven algo que les gusta y quieren que se los haga otro ,estan mal acostumbrados quedamos muy pocos webmaster verdaderos que creeamos 100% todo nuestro contenido nosotros mismos,
vale mil veces mas algo hecho por nosotros mismos aunque no este super diez que algo genialmente hecho por otro....
y TW eres uno de ellos pero a ti las cosas ademas de hacerlas tu te salen genialmente de diez jeje
buenisimo tutorial haber si se ponen manos a la obra y empezamos a crear otra vez en vez de recrear, como dices tu colega
saludos
100/100 y eso que aun te falta jaja ^^ ______________
Megustaria que los usuarios fueran originales y no copia ahora casi todos los usuarios piden que le creen cosas parecidas a otras web por ejemplo: quiero un encabezado como el de team-webmaster, las letras las quiero como el de ivanswebs ect...
los diseños echos por uno son mejores que echos por otros yo cuando comense pwg yo no sabia nada y mis diseños no eran buenos yo reconosco que mis primeros diseños no tenian ni 5pts de calificacion. pero a muchos usuarios le gustaban mis design. ______________
Si en el foro estuviera el sistema de puntajes te daría muchos :D
Saludos! ______________ ¡Último Momento!:
* Shinox Ayuda ya no brinda ayuda webmaster.
* Shinox Ayuda ya no adapta plantillas profesionales.
* Shinox Ayuda ofrece plantillas profesionales exclusivas para miembros.
Ir a Shinox Ayuda.
Megustaria que los usuarios fueran originales y no copia ahora casi todos los usuarios piden que le creen cosas parecidas a otras web por ejemplo: quiero un encabezado como el de team-webmaster, las letras las quiero como el de ivanswebs ect...
los diseños echos por uno son mejores que echos por otros yo cuando comense pwg yo no sabia nada y mis diseños no eran buenos yo reconosco que mis primeros diseños no tenian ni 5pts de calificacion. pero a muchos usuarios le gustaban mis design.
claro porque eran tuyos, eso cuenta al final de todo , hay tantos usuarios que adaptaron sus diseños y no son conocidos o pocos activos en el foro, muchos otros tienen diseños ICEBLUe como el bacan, didy etc y sin embargo les encanta a la gente . eso es lo que cuenta el esfuerzo
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
Entra en 
