1. INTALACION DEJOOMLA
1. INSTALARAPPSERV
a. Server: localhost
b. Puerto:8080
2. DESAMPAQUETARJOOMLA, con laopciónExtraeren Joomla,dentrode www
a. Cambiarde nombre por Joomladentrode www
3. En PHPAdmincrearbase de datos bdejemplo
4. Desde internetexplorerinstalarlohttp://localhost:8080/joomla
CUANDOSE CREAR DENTRO DE WWW EL NOMBRE DE UN PROYECTOCOMO CARPETA
1. DESAMPAQUETARJOOMLA, con laopciónExtraeren Joomla,dentrode
www/Empresaseguridad
a. Cambiarde nombre a Joomlapor www/empresaseguridad
2. En PHPAdmincrearbase de datos bdejemplo
3. Desde internetexplorerinstalarlo http://localhost:8080/empresaseguridad/
CUANDOSE CREAR DENTRO DE WWW EL NOMBRE DE UN PROYECTOCOMO CARPETA
4. Crear lacarpeta dentrode www Ejm.EmpresaSeguridad
5. DESAMPAQUETARJOOMLA, con laopciónExtraeren Joomla,dentrode
www/Empresaseguridad
2. a. Cambiarde nombre por Joomladentrode www/empresaseguridad
6. En PHPAdmincrearbase de datos bdejemplo
7. Desde internetexplorerinstalarlo http://localhost:8080/empresaseguridad/ o
8. Desde internetexplorerinstalarlo http://localhost:8080/empresaseguridad/joomla
9. Al final accedercon el usuarioadminycontraseñaadmin
DEFINIRPLANTILLA
ACTIVARVISTA PREVIA DELA PLANTILLA
1.Seleccionaropciones
2.Activarvistapreviade la plantilla
3. 3.Luegoclic envistapreviapara sabercomo se llamanlasposiciones
CAMBAIRMENU A HORIZONTAL
1. Seleccionargestode menú
2. Seleccionarmenúprincipal ycambiarde posición
3. SeleccionarplantillaBenz-20yseleccionarposición1para el menú
5. 2. Configurarcontenido
a. Agregarcontenido(primeraopcióndel menú) yañadirloal menú
3. Para agregar contenidopuede copiatextosde lapainade LoremIpsum
4. Si deseapuede cambiarel aspectode lostextos
ASOCIARARTICULOCREADOY MOSTRAR EN EL MENU PRINCIPAL
1. SeleccionarMenu/Gestorde menúyseleccionarmenúprincipal
2. Crear NuevoMenú
3. Seguirlasecuenciasiguiente asociándoloal articuloque desee Ejm. Nosotros
4. Peroactivar enla parte superioMenuprincipal comoindicael paso9.
CAMBIARPAINA DE INICIOA MOSTRAR
5. SeleccionarMenu/Gestorde menúyseleccionarmenúprincipal
6. Crear NuevoMenú
6. 7. Seleccionarentipode menu,porel momentomenúsimple ya qtenemossolounaopción
8. Luegoseleccionarlapaginaa mostraral inicio
9. Clicenal articulola paginainicio
10. Establecerpordefectopaginanuevade inicio
a. SeleccionarMenu/Gestorde menúyseleccionarmenúprincipal
b. Cliceniconopor defecto
11. Hacer clic enVerSitioyluegoeliminarhome
12. Para ocultarmodulode logueodesactivarengestode modulos,haciendoclicenicono
verde
7. 13. Repetirel procesoparacrear otro articuloque se asocia a la opciónNosotros(x ejemplo)
a. Crear articuloyasociarloal MenuPrincipal
b. Crear menúyasociarloal articuloNosotros
c. Al ver sitiosucede este error
d. Para solucionarsolohacerclicenel icono reconstruir.
8. CREAR PROYECTO
CREAR CATEORIA RAICES
PRESENTACION
VisionMision
PRODUCTOS
Ventas
SERVICIOS
Personales
NOTICIAS
Promociones
Agregarimagensdesde el botónimagende laparte inferiorde laventanadel articulo
El botónmas permite mostrarel botónsiuiente el laparte inferiordel articuloenvista
previa.
10. CREAR PAGINA TIPOBLOG
1. Crar categoría
a. Contenido/Gestorde categoría
b. Ponerle el nombre novedades
2. Crear articuloconnombre PARTE I :
a. Asociarloala categoría Novedades
b. Insertarimagen
c. Insertardentrode párrafos,LeerMas usandoicono
3. Crear articuloconnombre PARTE I :
a. Asociarloala categoría Novedades
b. Insertarimagen
c. Insertardentrode párrafos,LeerMas usandoicono
4. Dentrode menúprincipal crearmenútipoblo
a. Seleccionartipoblog
b. SeleccionarencategoriaNovedades
11. c. Se mostraría las dospaginasen unaventana,con suLeer mas
d. Para q la parte 2 se vea enuna sola columnahacereste cambio,donde
indicael Nro.De artículosa mostrary numerode columnas
DESACTIVARLINEASDE CREACION QUE SE MUESTRA POR DEFECTO
a. Se venlíneascomo categoría,publicaciónyotros,
b. Ubicar enContenido/Gestorde artículos
c. Seleccionarel iconoopcionesydeshabilitarlasopcionesque noquiere qse vean
Categoria,Visitar,Publicadoyotros
12. MOSTRAR PAGINASDESTACASALINICIODE LA PRESEN TACION DE LA WEB
NOTA:
1. Deberíateneractivala opciónpor defectoque esal articulo inicio
2. O deberíade crear en laopciónpresentación,comoarticulodestacado
3. O crear una nuevaopcióndesde el menúcomoarticulodestacado,ycambiarel orden
para que se veaprimero.
PROCEDIMIENTO
1. Desde gestorde artículos
2. Activardestacasde parte i y ii x ejemplo
3. Para que se veanordenadoslosartículosque se mostraríanpor defectoenlapagina
de inicio,activardesde el gestorde menúaopcióninicioycambiar el numerode
artículos principalesamostrara 2
13. CAMBIARORDEN DE OPCIONESPRINCIPALES
1. Editar opciónporejemplocliente
2. Luegoenordenar seleccione laopción,lacual se ubicardetrásde la elegida
3. También puede moveratravésde hacer clicen lasflechasde desplazamiento
CREAR BANNERPRINCIPALPARA SITIOWEB
BUSCAR EXTENSIONESJOOMLA
a. Buscar extensionesjoomlaengoogle esdecirenlaweb
14. b.
c. Descargar desde estapagina
Son modulorparaagregar a su web
1. Ingresara google
a. Buscar como extensionesjoomla
b. Buscar ari image slider
c. Descargar modulode galeríade imágenes
d. Instalareste zio desde Extensines/Gestode Extensiones
2. Crear enla imageslacarpetaslide
a. Copiaruna serirde imágenesconel anchode 1030 y 323 o el tamaño que desee
segúnel tamañodel espacioqlo contiene
16. COMO CAMBIARLOGO DE JOOMLA CON UN SLIDE DE IMÁGENES
Debe de crear una posiciónparapoderagregar el slide ycomono existe hayqdefinirla
modificandolossiguientesarchivosque se encuentranenlacarpeta
1. Crear divpara pisicion
a. Modificarel archivoindex.php
Línea 114
< div id ="header">
< div class ="logoheader">
añadir este div
<div class ="slideshow">
<jdoc:include type="modules" name="slideshow"
style="beezDivision" />
</div>
< h1 id="logo">
2. Crear posicion paraubicarel div
a. Editar TemplateDetails.xml
17. b. Y en linea44 mas o menosagregarposicion
<position>position-13</position>
<position>position-14</position>
<position>slideshow</position>
</positions>
3. Cambiarcaracteristicasdel banner
a. En carpeta CSS abrimosposition.css
b. Edita #header
#header
{
display:block!important;
position:relative;
padding:0px 0 0 0;
overflow:hidden;
width:100%;
height:300px;/*cambio*/
}
4. Crear clase slideshow,paradarlas caracteristicasdel lugardonde se muestranlas
imagenes
a. Copiarla clase #headery corregircon el nombre #slideshow
#slideshow
{
display:block!important;
position:relative;
z-index:1000;
padding:0px 10px 0 10px;
overflow:hidden;
width:100%;
height:300px;/*cambio*/
margin:0 0 0 0;
}
4. ActivarGestorde modulos
a. Extensiones/Gestorde Modulo
b. Seleccionarel posicióncreadallamadaslideshow sinoescribirla
18. c. Cambiarpropiedadesparamostrarimágenes
Cambiarel ancho a 1030 q es el anchode laplantilla,desdeseleccionarel modulo
de ariimageslider,esteanchoespara que cuadrocon el borde del menú
d. Establecerlacarpeta de donde se tomaranla imágenes
19. e. Seleccionarenlapaginasque deseamostrarel slide
DESACTIVARLA IMAGEN POR DEFECTO DE JOOLMA Q SE VECOMO FONDO
1. Abrirel archivopersonal.css
a. Ubicarse en laclase logoheaderycomentartodoeste código,paraque no cargue
la imagenpersonal2.png
20. Buscar 45 mejoresplantillasjoomla
CAMBIOSADICIONALES
1. Mostrar opcionesdel menúono
a. SeleccionarConfiguracionglobal
b. SeleccionarSi paraque se muestre el menú
c. SeleccionarNoparaque no se muestre el menú
MOSTRAR BOTONESINFERIORDE IMÁGENES, AL HACER CLIC Q SE MUESTRE LA IMAGEN
21. a. Botonde navegación
b. En CSS enarchivoposition.cssmodificarlapropiedad
c. Height: 270 px esdecir20 px mas de lonormal
ADICIONALES
MOSTRAR SUB MENU
a. Soloubicarle opciónque deseadentrode otra opcióny node laraíz
ELIMINAR ELEMENTOS ELIMINADOS
a. Cuandose borran loselementodel menú,yse vuelvenacrear con el mismonombre sale
un mensaje de errorqelementoyaexiste
b. Para eliminarlodesde lapapeleraydejarcrearelementoconel nombre anterior
22. c. Seleccione Gestosde Menu
d. Seleccionarestado“eliminado”yelimineloselementos
e. Volveracrear con el mismonombre
CREAR FORMULARIOCONTACTENOS
1. Desde gestorde menú
2. Seleccionarnuevo
3. Seleccionar“contactoúnico”
4. Cambiarpropiedades
En este videomuestracrearsliderdescargandolaplantilla
http://www.youtube.com/watch?v=IGJ7tVnZrmQ
23. AGREGAR ARTICULOSLA PARTE INFERIORDE LA PLANTILLA
1. Observarlaposiciónendonde quiere asociarunarticulo
2. Hacer vistapreviade plantilla
3. Crear Categorias
4. Crear contenidode artículosyasociarlosa cada una de las categoríascreadas
24. 5. Crear para lastres regiones
6. Crear modulos
a. Desde el gestorde móduloscrearnuevomodulo,eligiendolaopción
b.
Y
c.
d.
b. Asociarlaposiciónyel articulo
b. S i deseaque el articulomuestralaimagenque se ha insertadoactivarlaopción
mostrar imagen,dentrode configuraciónde modulo
25. INSERTARMODULO MENU EN UNA DE LAS PAGINASOTODAS
1. Insertardesde el Gestorde ModuloslaopciónMenu
2. SeleccionarMenuque deseaagregarsonsusrespectivassubopciones
26.
27. INSERTARMENU EN LA PLANTILLA BEEZ-20
Cuandose agregan menú,estasopcionesnose ven,debidoalaplantilla,porejemploagregardos
opcionesauna opciónprincipal del menú
1. Crear dos artículos ejemploParte IyParte II
2. Luegoinsertarmenúyasociar al articuloParte I peroubicarloenmenúpadre Ultima
3. Hacer lo mismoparaParte II,debe quedarasí
4. En vistapreviase dará cuentaque no aparece,estassubopcionesose muestran
distorcionadasenotrasposiciones.
DESCARGARDE JOOMLA EXTENSIONES
1. Descargar swmenufree
Web: extensions.joomla.org/extensions/structure-a-navigation/menu-
systems/menu-editors/168
28. 2. Instalareste modulodesde Extensiones/Gestorde extensiones
3. Desde Extensiones/Gestorde módulos,DespublicarMenuPrincipal
4. Desde Extensiones /Gestorde ModulosActivarmodulode Swmenufree
5. ActivarMenu principal de Swmenufree parahacerloscambiosrespectivos,desde opción
Componente /Swmenufree
29. 6. Cambiarmenúa horizontal,mediante el componente
7. Luegogurdar o hacer vistapreviasi deseauobserve enlaparte inferiorloscambiosque
ocurren.
8. Cambiarel ancho de cada opciónpara ajustar el anchodel menúal anchode laplantilla,
debe moversoloel botónde deslizamiento
9. Puede cambiartambiénlaalturao el espaciode laopcionesconrespectoa suposición
31. 12. Para mostrar subopcionesdelante de losbannercopiareste código
Añadir un código como el siguiente en el archivo
templates/beez_20/css/layout.css y compruebelo:
#outertable div.section, #outertable div.section a {
z-index: 10000 !important;
}
DESCARGARMODULO MENU DESDE
http://www.joomlack.fr/en/download-joomla-extensions/view_category/3-
maximenu-ck-joomla-2-5
VIDEO
http://www.youtube.com/watch?v=P2HDIX_6FDw