PSD til HTML i Drupal

June 16

Drupal er et open-source content management system som lar utviklere å enkelt lage og skabb innholdet på en nettside. PSD henvise til Photoshop design-filer. Ditt nettsted utvikling starter fra Photoshop design. Når du har PSD design, kan du konvertere den til HTML, Joomla, Wordpress og Drupal nettsted. For å konvertere PSD til HTML i Drupal, må du forstå HTML-koder, CSS og Drupal temaer og innhold og noder.

Slicing PSD fil

Gå til Photoshop og åpne design fil. Klikk på verktøylinjen og velg "Slice Tool." Skjær opp bildet du ønsker å beholde. Klikk "Lagre" for å lagre skiver. Disse filene skal lagres under yourwebsite / theme_files mappe. Hvis Slice verktøyet er skjult, kan du gjøre det opp ved å klikke på "Vis", "Show" og "skiver." Unngå å ha klippet blokker med tekst fordi de ikke er søkbare i Google. Men du vanligvis ønsker å beholde logoen teksten i logoen bildet.

Opprette en hjemmeside

I en tekst editor, lage en ny home.html fil og skriv inn følgende kode:

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

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

<Body>

<! - INNHOLD ->

</ Body>

</ Html>

Inkluder css filen før </ head> tag.

Opprette DIV tagger

Lag DIV områder i henhold til den opprinnelige design i PSD. Hver del av oppsettet ditt bør inkluderes i en DIV tag og gis et klassenavn som topp- og bunntekst. Legg DIV-koder i kroppen delen: <div class = "right_content"> </ div>. På samme måte legge til så mange DIV-koder som du trenger for hver enkelt del av oppsettet ditt.

Opprette en CSS-fil

I tekst editor, lage en ny fil og lagre den som "style.css". Style klassene opprettet tidligere. Plasser delene av layout ved hjelp av flytende, padding og marginer.

/ Toppinnhold /

.topcontent {

margin-top: 71px;

margin-left: 29px;

height: 91px;

}

Konvertering til en Drupal tema

Gå til Drupal nettsted og finne tema-mappen. Opprett en ny undermappe med navnet på temaet. Gå tilbake til HTML-fil. Tilsett <? Php print?> Tag før <body> -taggen. Drupal bruker denne utskrifts tag for å skrive ut bestemte deler på websiden. Koden er som følger:

<Head>

<?php print $head ?>

& Lt;? Php print $ stiler>?

& Lt;? Php print $ skript>?

Lagre denne filen som en ny fil: page.tpl.php under den nye tema katalogen. Dra style.css fil der.

Slå §§ inn Drupal Blocks

Drupal har forhåndsdefinerte blokkene, inkludert $ header, $ venstre-header, $ innhold og $ footer_message. Disse blokkene vil bli kalt inn ditt page.tpl.php fil av Tage <? Php print $ header?>. Endre dynamisk innhold seksjonene i blokker ved å legge til blokker koder.