PSD a HTML en Drupal

November 15

Drupal es un sistema de gestión de contenidos de código abierto que permite a los desarrolladores crear y mange el contenido de un sitio web fácilmente. PSD se refieren a los archivos de diseño de Photoshop. Su sitio web comienza el desarrollo del diseño de Photoshop. Una vez que tenga el diseño PSD, puede convertirlo en HTML, Joomla, Wordpress y Drupal sitio. Para convertir los PSD a HTML en Drupal, es necesario entender las etiquetas de HTML, CSS y temas de Drupal, y contenidos y nodos.

Cortando el PSD

Vaya a su Photoshop y abrir el archivo de diseño. Haga clic en la barra de herramientas y seleccione "herramienta de corte". El tramo hasta la imagen que desea conservar. Haga clic en "Guardar" para guardar las rebanadas. Estos archivos deben ser guardados en la carpeta yourwebsite / theme_files. Si herramienta División está oculta, puede hacer que se muestre haciendo clic en "Ver", "Show" y "cortes". Evitar el corte de bloques de texto, ya que no se pueden buscar en Google. Sin embargo, normalmente se desea mantener el texto del logotipo la imagen del logotipo en.

Creación de una Página de inicio

En cualquier editor de texto, cree un nuevo archivo home.html e introduzca el código siguiente:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Body>

<! - Contenido ->

</ Body>

</ Html>

Incluir el archivo css antes de la etiqueta </ head>.

Creación de etiquetas div

Crear áreas DIV acuerdo con el diseño original en PSD. Cada sección de su diseño debe ser incluido dentro de una etiqueta DIV y se le dará un nombre de clase como cabecera y el pie. Añadir etiquetas DIV en la sección del cuerpo: <div class = "right_content"> </ div>. Del mismo modo, añadir tantas etiquetas DIV como sea necesario para cada sección individual de su diseño.

Creación de un archivo CSS

En el editor de texto, cree un nuevo archivo y guardarlo como "style.css". Estilo las clases creadas previamente. Coloque las secciones del diseño utilizando flotante, el acolchado y los márgenes.

/ Contenido destacado /

.topcontent {

margin-top: 71px;

margin-left: 29px;

altura: 91px;

}

La conversión a un tema Drupal

Ir a su sitio Drupal y encontrar la carpeta de temas. Crear una nueva subcarpeta con el nombre de su tema. Volver a su archivo HTML. Agregar el <? Php print?> Etiqueta antes de la etiqueta <body>. Drupal usa esta etiqueta de impresión para imprimir las secciones específicas de la página web. El código es el siguiente:

<Head>

<?php print $head ?>

& Lt;? Php estilos de impresión $>?

& Lt;? Php guiones de impresión $>?

Guarde este archivo como un archivo nuevo: page.tpl.php bajo su nuevo directorio del tema. Arrastra el archivo style.css allí.

Volviendo secciones en Drupal Bloques

Drupal ha predefinido bloques, incluyendo la cabecera $, $-izquierda encabezado, contenido y $ $ footer_message. Estos bloques serán llamados en su archivo page.tpl.php por la ven- <? Php print $ cabecera?>. Cambiar las secciones de contenido dinámico en bloques mediante la adición de las etiquetas de bloques.

Tecnología