T.O.C
Obtener e instalar la extensión Dreamweaver
Obtener e instalar MSAS
Añadir el código de la plantilla (template) Mambo en el < HEAD >
Copiar/Pegar el código del "head" en la plantilla de Mambo 4.5.1a
Crear tablas de estilo (layout) para la plantilla
Añadir el código de Mambo 'main content'
Añadir el modulo de Mambo 'positions code'
Añadir fecha, banners, pathway, busqueda (search), y footer
La estructura del Directorio de la plantilla Mambo
Crear el fichero 'template.xml'
Crear el fichero 'template_css.css'
Añadir una imágen de encabezamiento 'header image'
Visualizar nuestra plantilla en local con MSAS

Lo que necesitareis para usar este manual:

• Dreamweaver MX 2004: descargar versión de prueba (trial)
• Mambo Stand Alone Server [MSAS]4.5.1a: descargar gratis
• Mambo 4.5.1a Dreamweaver Template builder extension: descargar gratis
• Un cierto tiempo. quizás 1 hora, quizás mas, o quizás menos
• Quizás, una buena taza de café
• Windows 2000 o XP, o Mac OS X o LinUx.
• De hecho, he añadido un copiar/pegar de unos snippets de código para Mac/Linux/y usuarios que no usan Windows :) Por favor leedlos....

• Abrid Dreamweaver. En el menú de arriba (top menu), buscad 'Commands' y después 'manage Extensions'. Esto os abrirá el "extension manager".
• En el "extension manager", elegid 'File' y 'Install Extension'. Navegad a este sitio donde esta mambosolutions451a2.mxp e instaladlo.
• Después de la instalación, salid de la aplicación Dreamweaver.
• Ahora re-inicializáis Dreamweaver. Deberíais ver una nueva barra de herramientas (toolbar) con el nombre ' MamboOS'

Bueno si habéis llegado hasta aquí, entonces poneos cómodos, tomaos una taza de café, o una bebida refrescante, y preparaos para la segunda fase, que consiste en configurar la plantilla que estáis desarrollando en vuestro ambiente local: MSAS !

• Si aun no lo habéis hecho, bajaos descarga MSAS -salvadlo en vuestro escritorio, y read un directorio llamado ' msas' en el escritorio, descargad las 7 .rar partes
• necesitareis 'winrar' para extraer los ficheros comprimidos, entonces descargad winrar aqui
• instalad winrar (es realmente muy simple de instalar)
• localizad msas451a-part1.rar en vuestro directorio y pulsad el botón derecho del ratón y seleccionad en el menú 'extract files'
• abrid el nuevo directorio que se llama msas451a en vuestro escritorio
• localizad el fichero msas.exe (dentro del directorio Distribution) entonces hacéis doble click
• Ahora podéis ver la ventana de la interface MSAS en vuestro escritorio
• Login/Password para el administrador de mambo: admin/admin

CODIGO DE ENCABEZAMIENTO (HEAD CODE) DE LA PLANTILLA DE MAMBO 4.5.1 (copiar/pegar de aqui abajo)

• Click en cualquier sitio en el área blanca para activar el cursor
• Vamos a crear 3 tablas separadas con el valor 100% en la variable width 'auto-stretch' de la plantilla. La parte de arriba de la tablas será para el encabezamiento (header area); el medio será para las columnas de la izquierda y la derecha ; y la parte de abajo será para el área del footer (footer area).
• Dede el menu de arriba (top menu), ir a Insert>Table (Ctrl+Alt+T) Esto os abre la ventana de para crear tablas
• Entrad los siguientes valores:

• Repetid el proceso un total de tres veces - hasta que tengais 3 tablas empiladas verticalmente con 100% width en cada una
• Consejo: Localizad el 'Layout' tab, y seleccionad vista 'Expanded' -esto es opcional pero a veces ayuda a ver lo que estamos haciendo

• Click una vez en el medio de la tabla para seleccionarla
• Después, váis a ' Insert' >'Table' (CTRL+ALT+T) y creáis una tabla de 3 columnas y 100% width

• Ahora deberíais ver algo así:

• Podéis ver como funciona la plantilla? Vamos a redimensionar las celdas de la derecha y de la izquierda de esta tabla - estas serán nuestras columnas izquierda y derecha en la plantilla - el área del medio será para el contenido principal de la página
• poned el cursor en la celda izquierda y pulsad el ratón para seleccionarla
• en las Propiedades entrad 18% para el width (yo eleji 18% para el width, pero podeis ajustarlo al valor que queráis )
• Inicializad el alineamiento vertical a 'Top'
• Click en la columna de la derecha, y repetid la operación con los mismos valores
• mirad aqui abajo:

• Localizad el botón del código Insert Main Body en la barra de herramientas Mambosolutions451a en Dreamweaver
• Click una vez en la columna del medio. Seleccionad 'Main Content Area' - entonces seleccionáis el botón 'Insert Main Body'
• para los que tengáis Macs o Linux el código 'Main Body' a insertar es::


Seleccionad y Copiad (Click para seleccionar el contenido y copiarlo en el clipboard)
<?php mosMainBody(); ?>



Abajo esta el código del layout de la tabla con el código Mambo 'Main Body' (con comentarios que he añadido)

• Pulsad una vez en la columna de la izquierda y seleccionadla. Después pulsad en el botón de inserción 'Insert Left Modules' para añadir el código siguiente:

• Genial? Os gusto? Prosigamos y añadamos el modulo 'user1' posicionado directamente debajo de la posición izquierda
• Aseguraos de que el código de la etiqueta placeholder no este seleccionado mientras estéis en modo wysiwyg pulsando en el área blanca de la celda izquierda.
• Localizad el botón del modulo 'Insert User1 Modules' y pulsadlo para insertar el siguiente código en la columna de la izquierda:

• Ahora vayamos a la columna de la derecha, pulsad en la columna de la derecha para seleccionarla
• Localizad el botón que posiciona el modulo 'Insert Right Modules' y al pulsarlo añadirá el código:

• Ahora añadamos la posición del User2 debajo a la derecha ('Right'), aseguraos que el código de la etiqueta placeholder no este seleccionado mientras en el modo wysiwyg hacéis click con el ratón en cualquier zona en el área blanca de la celda de la derecha.
• Localizad in haced clik en el botón 'Insert User2 ' para añadir el código PHP del User2:

Nuestras tablas en 'code view' deberían verse así:

• Añadamos el código de la función búsqueda 'search code', (nota: el modulo de búsqueda , esta incluido en Mambo 4.5.1- este ejemplo es opcional, por si os apetece codificarlo)
• Vamos a poner el campo de búsqueda 'search field' en el tope de la columna de la derecha, con el objeto de explicar como funciona; el objetivo de este ejemplo es puramente pedagógico
• En la columna de la derecha, donde añadisteis el código para las posiciones 'Derecha' y 'Usuario2' ('Right' and 'User2'), pulsad el ratón a la izquierda de la primera etiqueta placeholder de código php

• Pulsad en el botón 'Insert Search' para añadir el código de Busqueda (Search code)
• Debería parecerse a esto:

• Moviéndonos hacia la derecha, añadamos el área de banners.
• Pulsad con el ratón en cualquier sitio en la parte de abajo de la tabla la llamada 'footer table' para seleccionarla.
• Centrad el alineamiento de los banners seleccionando 'Center Align' en el panel de propiedades

• Pulsad con el ratón el botón 'Insert Banners' para añadir el código de los banners:

• Añadamos el código del 'Footer' también:
• Aseguraos que el código de la etiqueta placeholder no esta seleccionado en estáis en modo wysiwyg pulsando el ratón en cualquier sitio dentro del área blanca en la parte de abajo de la tabla. De hecho para poner el footer debajo de los banners, solo tenéis que posicionar el cursor a la derecha del código de la etiqueta placeholder.
• Añadid el código del footer pulsando el botón 'Insert Footer '

Esto es todo para el footer, vayamos ahora al encabezamiento o header, de acuerdo?
Crearemos una nueva tabla incrustada (nested) en la parte de arriba de la tabla, para indicar la ruta o ' pathway' y visualizar la fecha

• Pulsad con el ratón en cualquier sitio en la parte superior (top) de la tabla para seleccionarlo
• Desde el menú superior (top menú) de Dreamweaver. Añadid una nueva tabla con 2 columnas de 100% width seleccionado la opcion Insert>Table
• Pulsad con el ratón en la celda derecha de la nueva tabla, id a Properties Inspector y manualmente inicializad el width a 30%

• Con vuestro cursor en la columna de la derecha de la tabla superior (top table), pulsad el botón Insert Date
Seleccionad y Copiad (Click para seleccionar y copiar los contenidos en el clipboard)
<span class="small"><?php echo (strftime (_DATE_FORMAT_LC)); ?></span>
• Ahora añadamos nuestro 'breadcrumb trail', o Pathway
• Pulsad en cualquier sitio en la columna de la izquierda de la tabla superior para seleccionar la celda
• Buscad y seleccionad el botón 'Insert Pathway '

Una plantilla de Mambo esta estructurada de la forma siguiente.

• Arrancad MSAS.exe si no esta corriendo
• Navegad al folder de plantilla 'templates' de Mambo en MSAS
• W:\www\mambo45\templates
• Cread un nuevo directorio con el nombre de 'ms_dwtutorial'
• Abrid el directorio llamado 'ms_dwtutorial', y cread 2 directorios - uno llamado 'CSS' y otro llamado 'images'
• Salvad el fichero en el que habeis estado trabajando en Dreamweaver con el nombre index.php en el directorio 'ms_dwtutorial'
• ahora necesitamos crear el fichero 'templateDetails.xml'. Cread un nuevo fichero xml (consiste en un fichero texto con la extensión .xml en windows o macinthosh), copiad el código que sigue y ponedlo en el directorio 'ms_dwtutorial' - salvadlo como un 'templateDetails.xml'

• Ahora ya es el mmento de crear el stylesheet que controlara cosas como tipo de fuente, colores, link rollovers, bordes alrededor del contenido, etc....todo ello esta en el template_css.css
• Abrid el directorio CSS y cread un nuevo fichero css llamado 'template_css.css'
• Copiad/pegad el siguiente código css dentro del fichero 'template_css.css' y salvadlo.
• Para obteber una lista de todos los estilos CSS usados in Mambo 4.5 mirad esta gran lista que Visualdensity recompilo

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="780" HEIGHT="100" id="ms_flash_playonce_demo" ALIGN="">
 <PARAM NAME=movie VALUE="templates/ms_dwtutorial/images/ms_flash_playonce_demo.swf">
<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="templates/ms_dwtutorial/images/ms_flash_playonce_demo.swf" quality=high bgcolor=#FFFFFF
WIDTH="780" HEIGHT="100" NAME="ms_flash_playonce_demo" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>


Para codificar vuestro flash de forma que solo aparezca una vez, añadid este código en la primera frame de vuestra pelicula flash:


function checkSO()
{
// If a shared object called siteSO already exists this will retrieve it otherwise it
// creates a new shared object called siteSO
var SO = SharedObject.getLocal("siteSO");
if(SO.data.visitedAlready)
{
gotoAndPlay("end");
}
else
{
SO.data.visitedAlready = true;
SO.flush();
}
}
// Put that and this in the first keyframe of your movie, before the intro
checkSO();




entonces la ultima frame de vuestra pelicula, cread un frame llamada: end


Ya esta. Esto es todo!!!!

Top