Comunidad PHPeros

Lenguajes => PHP => Tutoriales PHP => Mensaje iniciado por: Habbolippo en 09 de Agosto de 2011, 16:28:48 pm

Título: [Tutorial] Crear una plantilla para Cutenews paso a paso.
Publicado por: Habbolippo en 09 de Agosto de 2011, 16:28:48 pm
Hola a todos, este es mi segundo aporte. Esta vez, te voy a enseñar a hacer tu plantilla de Cutenews desde 0%. Para ello, necesitaras instalar o tener instalado CuteNews.
[Si no tienes CuteNews, puedes descargarlo haciendo clic aqui] (http://cutephp.com/)
¡Una vez que tengas CuteNews, empezemos!
Paso 1:
Creamos una imagen similar a esta (Lo he hecho con paint):
(http://elmatii.es/galeria/tuto1.PNG)
Paso 2:
La recortamos en tres partes (Yo lo he hecho con paint):
p1
(http://elmatii.es/galeria/box_1.png)
p2
(http://elmatii.es/galeria/box_2.png)
p3
(http://elmatii.es/galeria/box_3.png)

Paso 3:
- Abrimos Adobe Dreamweaber (o Marcromedia Dreamweaber)
- Creamos una tabla con las dimensiones filas 3, columnas 1.
- Ahora le damos clic derecho a la etiqueta <td> (que esta situada entre <tr> y </tr>) elejimos "editar etiqueta <td>" y nos aparecera una ventana, en esa ventana, en la pestaña de "General" elejimos el ancho de la imagen de la parte (1,2 o 3) y en "Especifico navegador", ponemos la URL de la imagen.
(Hacemos lo mismo con las demas partes).
- Una vez la tengamos codeada, nos quedara algo parecido a esto:
Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plantilla Cutenews</title>
</head>

<body>
<table width="564" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="41" background="box_1.png">&nbsp;</td>
  </tr>
  <tr>
    <td background="box_2.png">&nbsp;</td>
  </tr>
  <tr>
    <td><img src="box_3.png" width="564" height="25" /></td>
  </tr>
</table>
</body>
</html>
Porcierto, se me olvidaba. Si la imagen de abajo, es muy pequeña (menos de 7px), en vez de ponerla como fondo en el <td> ponlo como imagen.

Paso 4:
Ya tenemos nuestra plantilla hecha, ahora faltara ponerle el titulo, para ello, tenemos que saber una sarie de codigos.
{title} - Muestra el titulo de la noticia{avatar} - Muestra la imagen/avatar del usuario que escribe la noticia{short-story} - Noticia corta{full-story} - Noticia completa{author} - Nombre del que escribio la noticia + email del escritor.{author-name} - Nombre del que escribio la noticia.[mail] and [/mail] - Muestra el email (En forma de link){date} - Fecha en la que se escribio la noticia[link] and [/link] - Genera un enlace de la noticia[full-link] and [/full-link] - Genera un enlace hacia la noticia completa[com-link] and [/com-link] - Nunca lo que usado :/{comments-num} - Muestra el numero de comentarios{category} - Muestra la categoria de la noticia (ejemplo: NOTICIAS, WEB, MUSICA, etc){category-icon} - Muestra el icono de la categoria

Paso 4:
Ponemos esos codigos donde nosotros queramos que salgan los textos, y listo. Quedara una cosa asi:
(http://elmatii.es/galeria/tuto2.PNG)
Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plantilla Cutenews</title>
<style type="text/css">
<!--
.verdana12 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
}
.negrita {
    font-weight: bold;
}
.fecha {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
}
-->
</style>
</head>

<body>
<table width="564" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="41" background="box_1.png"><table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="456" class="verdana12">{title}</td>
        <td width="86" class="fecha">{date}</td>
        <td width="18">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td background="box_2.png"><table width="555" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="555" style="font-family: Verdana, Geneva, sans-serif; font-size: 11px;">{full-story}</td>
      </tr>
      <tr>
        <td style="font-family: Verdana, Geneva, sans-serif; font-size: 10px;">Escrito por: <span class="negrita">{author-name}</span> en <span class="negrita">{category}</span></td>
      </tr>
    </table></td>
  </tr>
  <tr><img src="box_3.png" width="564" height="25" />
    <td></td>
  </tr>
</table>
</body>
</html>


Espero que les haya gustado, y porfavor si tienen alguna duda, COMENTALA :D
[/b]
Título: Re:[Tutorial] Crear una plantilla para Cutenews paso a paso.
Publicado por: Katuz en 09 de Agosto de 2011, 18:24:11 pm
J-i-s-t-o-lo que buscaba amigooo =D y por dreamweaver graax +1  :star:
Título: Re:[Tutorial] Crear una plantilla para Cutenews paso a paso.
Publicado por: Habbolippo en 09 de Agosto de 2011, 21:00:11 pm
J-i-s-t-o-lo que buscaba amigooo =D y por dreamweaver graax +1  :star:
De nada amigo ;)
Título: Re:[Tutorial] Crear una plantilla para Cutenews paso a paso.
Publicado por: Katuz en 10 de Agosto de 2011, 03:53:40 am
acabo de hacer unos diseño mira como me quedaron =D gracias a tu tutorial amigo

http://www.habbathe.com.nu/cute/vip.html

http://www.habbathe.com.nu/cute/vip2.html

Nose porque se salio mas la imagen tengo que acomodarlo pero luego Grax y saludos