| Autor |
Mensaje |
-
m-mya
Destacado
|
 11-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
|
|
|
↑
|
|
 |
-
radioflash24
Semi-Experto
Ubicación: En la WEB
|
|
|
↑
|
|
|
-
m-mya
Destacado
|
11-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.
-.-'' ______________ |
|
|
↑
|
|
|
-
anime-gloss
Junior
|
11-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 ______________  |
|
|
↑
|
|
|
-
m-mya
Destacado
|
11-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. ______________ |
|
|
↑
|
|
|
-
aidzone
Junior
|
11-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 |
|
|
↑
|
|
|
-
m-mya
Destacado
|
11-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. ______________ |
|
|
↑
|
|
|
-
ipahuechuraba
Junior
Ubicación: Santiago - Chile
|
12-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 |
|
|
↑
|
|
|
-
anime-gloss
Junior
|
12-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 ______________ |
|
|
↑
|
|
|
-
m-mya
Destacado
|
12-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
|
|
|
↑
|
|
|
-
radioflash24
Semi-Experto
Ubicación: En la WEB
|
|
|
↑
|
|
|
-
anime-gloss
Junior
|
12-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 ______________ |
|
|
↑
|
|
|
-
m-mya
Destacado
|
12-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. ______________ |
|
|
↑
|
|
|
-
radioflash24
Semi-Experto
Ubicación: En la WEB
|
|
|
↑
|
|
|
-
m-mya
Destacado
|
12-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 ______________ |
|
|
↑
|
|
|
|
M-MYA le diste un giro al tuto de team webmaster !!!!