Sunday, August 25, 2013

Dreamweaver Template


Este metodo es bien poderoso

Para crear el main.dwt

Construyes la pagina como main. html con todo el style css y los jscript que quieras, banner, slideshow, etc
Este lo salvas como un template main.dwt (dreamweaver template)
En Design view select y highliter el contenido que va a cambiar.
Go to Insert>Template Objects > Editable Region

Para crear las paginas del html

Go to Files Window
Right Click en el site > new file> index.html
Aparece una pagina en blanco
Go to Modify > Templates > Aply template to page
Aparece un window (donde te dice si lo vincula con el main.dwt) Select dwt y Pones select.
Asi sucesivamente con todas las paginas que tenga el menú.

Crear otro template dentro del proyecto porque se necesita el contenido sin sideright.

Open el main.html, creas el style.css una nueva clase
#(esto es para div en el html) content-fullwidth {width:100%’}
Vas al code html, cambias en div content por <div id=content-fullwidht>  y lo salvas como template y le pones para diferenciarlo
mainfullwidth.dwt
Seleccionas el editable región en el view design Go to Insert>Template Objects > Editable Region y lo nombras.


Como vincular este dwt a una pagina ya vinculada al main.dwt

Metodo 1 Puede corromper el codigo

Esto es necesario porque necesitas que una de las paginas creadas quieres cambiar el content por ejemplo products.html necesitas una galería y por eso necesitas el fullwidth.
Abres product.html Modify>Template y aparece el window con los dos templates el main.dwt y el mainfullwidth.dwt, seleccionas el mainfullwidht.dwt y press select.

Metodo 2

Abres la pagina que quieres vincular al segundo template.
Go to modify > Templates> Detach the template
Go to code view Select all y delete
Go to design view (esta en blanco) Go to Modify>Template>Aply template to page>

En el window seleccionas el template y click select