Inicio Tutoriales Lecciones Cambiar el "header" de tu template - 2
Sep
12
2008
Cambiar el "header" de tu template - 2 Imprimir E-mail
Usar puntuación: / 8
MaloBueno 
Escrito por Administrator   

CURSO JOOMLA PARA APRENDER A CAMBIAR LA CABECERA DE TU WEB. TU PROPIO "HEADER"

- © copyright 'joomlatuto.com' - 2008 // Todos los derechos reservados. Se puede publicar cualquier artículo de 'joomlatuto.com' siempre que no se realice modificación alguna en él, y se indique de forma clara la autoría del mismo mediante un enlace (link) visible donde ubiques el artículo en tu web.No se podrá comerciar con ellos en modo alguno, debiendo ofrecerse en forma totalmente gratuíta.

-- Ya hemos visto en la lección anterior la forma de buscar las imágenes que componen la cabecera de nuestro Template Joomla (versión 1.5) y que son las que veremos al publicar nuestra web.
-- Una vez localizadas dichas imágenes, la tarea consistirá en modificarla(s) a nuestro gusto y poniendo además un título descriptivo de nuestro sitio.
-- En el caso del ejemplo que estamos estudiando, comenzamos con la imagen de fondo que vimos era esta:


esta es la imagen del


-- En mi caso la gestionaré con Adobe Photoshop (aunque puedes usar cualquier otro programa similar). La abro:


abro la imagen con Adobe Photoshop


-- Me fijo en el tamaño de la imagen original, y veo que tiene 600x80 pixel.
-- En este punto, puedes optar por modificar la imagen original, por ejemplo añadiéndole más hojas de las que tiene, eliminando alguna, o incluso añadiendo otro(s) motivo(s) a la imagen. Eso queda a tu gusto.
-- Yo lo que voy a hacer es crear una imagen nueva; para ello creo una con los 600x80 que vimos:


creo una nueva imagen con 600x80 pixel, similar a la original


-- Ahora procuro que tenga el fondo con el mismo tono anaranjado que el original; para ello con el cuentagotas lo tomo de la imagen original (vemos que el color es el cb8c57 que aplico:


aplico un color similar al original


-- Aplico el color usando la opción de Degradado para lo que elegí además del original que tomé, otro más oscuro (como puedes ver en la imagen), y aplico el degradado de forma muy suave.
-- Una vez listo, procedo a guardarla:


guardo la imagen con un nombre distinto al original


-- La guardo con un nombre distinto a la original (en mi caso la llamo header3_Mio.jpg).
-- El siguiente paso lógico será el de subir la imagen mediante FTP a mi servidor:


habrá que subir la imagen al servidor por FTP


-- Así que me conecto con mi aplicación FTP (en mi caso el CuteFTP) y lógicamente debo dirigirme al lugar donde se encuentra la imagen original, recuerda: ../templates/ja_purity/images/header
-- Entro en la carpeta header/ y como vés ahí aparecen las tres imágenes. Se tratará de sustituir header3.jpg por la que acabo de crear yo en Photoshop, así que la busco en la parte izquierda en mi ordenador (la que llamé header3_Mio.jpg) y la arrastro a la parte derecha, es decir, la subo al servidor:


arrastro la imagen creada y la subo al servidor


-- Ahora le cambio el nombre a la original (y le pongo header3ANTIGUO.jpg), mientras que la imagen mía (header3_Mio.jpg) la dejo con el nombre original de header3.jpg:


ya están los nombres de las imágenes cambiados

-- Ya lo tenemos todo listo. Si ahora vamos a nuestra web, ya deberíamos ver el cambio que realizamos:


en nuestra web ya vemos la cabecera cambiada

-- El cambio se realizó sin problemas y la cabecera aparece con la nueva imagen de fondo que habíamos creado.
-- Al tratarse como dije al principio de un template que dispone de 3 imágenes que aparecerán aleatoriamente, estas operaciones que he explicado deberíamos realizarlas con las otras dos imágenes (header1.jpg y header2.jpg). Esto te queda como ejercicio para que tú puedas practicar lo aprendido.
-- Con esto finalizamos la presente lección. En la próxima vamos a ver como cambiamos también el título de la web, con lo cual ya habremos completado todo el trabajo para cambiar la apariencia completamente en la cabecera o header.
-- Lectura recomendada: manejo de Adobe Photoshop.


Lecciones del tutorial:   << Inicio < Anterior lección 1 - lección 2 - lección 3 - lección 4 Siguiente >   Fin >>    

<< Ir al índice con todas las lecciones Subir al principio de esta página >>

-

 

Contenido web

  ○ Inicio
  ○ Tutoriales
     - Instalación Joomla 1.5
     - Instalar con navegador
     - Indice de lecciones
  ○ Videotutoriales
  ○ Descargas
     - Extensiones
     - Templates
     - Joomla 1.5
  ○ Taller práctico
  ○ Aprende practicando
  ○ Seguridad - SEO
     - Seguridad web
     - SEO
  ○ Quiero ser webmaster
  ○ Juegos flash
  ○ Galerías 
     - Libro
  ○ Glosario
  ○ Enlaces
  ○ Libro de invitados
  ○ Mapa del sitio
  ○ Demos
  ○ Privacidad
  ○ Joomla 1.0
  ○ Blog
  ○ Sitemap 
  ○ FAQs

Juega gratis

- © Copyright 2008 - joomlatuto.com - web creada con Joomla! 1.5 - Ver licencia (texto,imagenes y videotutoriales): >> Licencia Creative Commons <<< Licencia Creative Commons