|

Crear Plantilla Css

Este Tutorial No Lo Hice Yo Pero Mucha Gente
Lo Busca Att: Vetax

Tutorial hecho por: M-MyA
Su Aporte de un tutorial de CSS, es el siguiente:

Hola, bueno aprendi ha hacer diseños para PWG con CSS-Desing y como en el Tutorial de
Team-Webmaster no se esplica mucho les ayudare lo más facil Posible.



Donde esta Con Rojo es para que sepan para que Sirve
Donde esta Con Azul es para Modificar
Donde esta Con Amarillo es para que sepan que es un Paso.

1- Hacer su Diseño: Hantes que nada demos hacer un Diseño para nuestra web de la siguiente forma:



2- Poner este Codigo Por Ensima de su Pagina:



Código:
<style type="text/css" media="screen">
<!--
body
{
font-family: Kristen ITC, Manga Temple, Times New Roman, Arial;
font-size: 00px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 163px;
left: 52%;
margin-left: 149px;
width: 100px;
}

.menu li
{
width: 95px;
float: left;
}

.menu a
{
border: 0px solid #ffffff;
background-color: #xxxxxx;
background-image: none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:67px;
color: #FFFFFF;
}

.menu a:hover
{
background-color: #transparent;
background-image: none;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 15px;
display: none;
width: 70px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="[color=blue]Url de la Web[/color]"></a> </li>
<li><a href="[color=blue]Url de la Web[/color]"></a> </li>
<li><a href="[color=blue]Url de la Web[/color]"></a> </li>   
<li><a href="[color=blue]Url de la Web[/color]"></a> </li> 
<li><a href="[color=blue]Url de la Web[/color]"></a> </li>

   
</div>

<div id="Designmystic">

<div id="text"><h1></h1>
</div>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


3- Editar el Contenido:



#content {
position: absolute;
left: 50%;
top: 230px; Aqui es donde podremos Modificar la Posicion del Contenido
margin-left:-285px;
width: 425px; Aqui es donde podremos Modificar el Ancho del Contenido
height: 362px; Aqui es donde podremos Modificar la Altura del Contenido
padding:10px;
color: #transparent;
font-size:13px; Aqui es donde podremos Modificar el Tamaño de las Letras
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

4- Editar el Color o la Imagen del Fondo

Este es para Ponerle un Color de Fondo
body {
background-color:#000000;} Aqui Modificamos el Color del Fondo

Este es para Ponerle una Imagen de Fondo
body{
background-image: url(URL DE LA IMAGEN DE FONDO)


5- Editar los Links:

a{
color:#FFFFFF; Aqui Cambiamos el Color de los Links
text-decoration: none;
font-size:13px;} con esto cambias el tamaño de las letras

a:hover {
color: #4A9AF6; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Tamaño de los Links
text-decoration: none;}

a:link {
color: #000000; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Tamaño de los Links
text-decoration: none;}

a:active {
color: #000000; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Tamaño de los Links
text-decoration: none;}

a:visited {
color: #cccccc; Aqui Cambiamos el Color de los Links
font-size: 13px; Aqui Cambiamos el Color de los Links
text-decoration: none;}

6- La Imagen del Diseño: Como ya tenemos Lista la imagen de Nuestro Diseño, solo devemos
poner la URL de la imagen aqui:

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 610px;
height:600px;
background-image:url(URL DE SU DISEÑO);}

7- Pegar este Codigo donde dice CSS-Code sin Style Tags:



Código:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#content {
position: absolute;
left: 50%;
top: 229px;
margin-left:-283px;
width: 380px;
height: 360px;
padding:10px;
color: #transparent;
font-size:13px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}


#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-color:#262626;}


*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 610px;
height:600px;
background-image:url(URL DE SU DISEÑO);}


 a{
color:#ffffff;
text-decoration: none;
font-size:13px;}

a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:active {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #cccccc;
font-size: 13px;
text-decoration: none;}



#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis