Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje11-10-2008, 21:30 (UTC)    
Título del mensaje: [CSS-Desing Tutorial] Tu Propio Diseño Simplificado

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: url();
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: url();
}

#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:url();
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:url();
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;}


Yo Ya se que Team-WebMaster hizo un Tutorial para hacer el CSS-Desing, pero yo lo he intentado simplificar lo más posible para los que no entendieron.

Si es necesario pondre más imagenes.
______________


Ultima edición por m-mya el Sab Oct 11, 2008 6:24 pm; editado 6 veces
Mensaje11-10-2008, 21:36 (UTC)    
Título del mensaje:

este tuto ya lo hizo team webmaster
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

Mensaje11-10-2008, 21:42 (UTC)    
Título del mensaje:

que acaso no lees??
dije que ya se que el hizo uno, peor yo lo intetente simplificar.
-.-''
______________
Mensaje11-10-2008, 22:06 (UTC)    
Título del mensaje:

Bueno es casi lo Mismo pero debo admitir que es mas identificable y facil de entender
______________
Mensaje11-10-2008, 22:08 (UTC)    
Título del mensaje:

anime-gloss escribió:
Bueno es casi lo Mismo pero debo admitir que es mas identificable y facil de entender


Gracais, ahora para que no paresca lo mismo le agregare más imagenes.
______________
Mensaje11-10-2008, 22:12 (UTC)    
Título del mensaje:

...pues es practicamente el mismo tuto, la plantilla esa solo tiene una imagen, tw especifica como cambiar los tamaños y es eso lo mismo que aqui

para agregar una imagen de fondo es asi

background-image: url()

y si por ejemplo quieres colocar una imagen de fondo al cabezal y en el html la celda del cabezal se llama "header" pues seria algo asi

#header {background-image: url(www.algo.com/ejemplo.png)}

asi es el estilo CSS, el nombre de lo que se quiere cambiar y luego por decirlo asi los datos separados por un ";" y entre llaves...

por eso se puede modificar solo algunas plantillas de PWG, las q no se pueden es porq los divs o tablas o lo q sea no estan indentificados por decirlo asi, para cambiarles las propiedades
Mensaje11-10-2008, 22:25 (UTC)    
Título del mensaje:

Ya edite el Tutorial y ahroa tiene algunas imagenes y le puse que se podia poner fondo con color y con imagen.
______________
Mensaje12-10-2008, 01:09 (UTC)    
Título del mensaje:

Sinceramente creo que esta mas entendible que el de Team-WebMaster

se agradece m-mya
gracias por ese aporte

saludos
Mensaje12-10-2008, 01:14 (UTC)    
Título del mensaje:

Yo Diria que es el Mismo solo que mas Facil de Entender !!!

Es El Mismo tuto pero solo que Expecificado
______________
Mensaje12-10-2008, 01:19 (UTC)    
Título del mensaje:

Este Tutorial lo hize para los que no entendieron el de Team-Webmaster ya que es algo dificil de entender ademas no tiene muchas imagenes -.-
______________


Ultima edición por m-mya el Sab Oct 11, 2008 9:41 pm; editado 1 vez
Mensaje12-10-2008, 01:33 (UTC)    
Título del mensaje:

ahora si digo que el tuto esta weno asi se entiende mas


salu2
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

Mensaje12-10-2008, 01:35 (UTC)    
Título del mensaje:

M-MYA le diste un giro al tuto de team webmaster !!!!

Espero que sigas asi aunque tu plantilla no me gusta mucho
______________
Mensaje12-10-2008, 01:42 (UTC)    
Título del mensaje:

anime-gloss escribió:
M-MYA le diste un giro al tuto de team webmaster !!!!

Espero que sigas asi aunque tu plantilla no me gusta mucho


Si, a mi tampoko me gusta
que no tengo Photoshop para hacerme una Col haci que solo edite la primera imagen que tenia Team-Webmaster en su Tutorial, que despues borro y cambio.
______________
Mensaje12-10-2008, 01:45 (UTC)    
Título del mensaje:

creo que tu plantilla esta echa con paint verdad??
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

Mensaje12-10-2008, 01:48 (UTC)    
Título del mensaje:

radioflash24 escribió:
creo que tu plantilla esta echa con paint verdad??



si, es el unico recuerzo que tengo
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group