PSD in HTML in Drupal

July 7

Drupal è un sistema di gestione dei contenuti open-source che permette agli sviluppatori di creare e amministrare gli elementi del contenuto di un sito web facilmente. PSD si riferiscono a file di progettazione di Photoshop. Il vostro sviluppo di siti web parte dalla progettazione di Photoshop. Una volta che il disegno PSD, è possibile convertirlo in HTML, Joomla, Wordpress e Drupal sito. Per convertire il PSD in HTML in Drupal, è necessario comprendere i tag HTML, CSS e temi Drupal, e contenuti e nodi.

Affettare il file PSD

Vai al tuo Photoshop e aprire il file di disegno. Fare clic sulla barra degli strumenti e selezionare "Slice Tool." Tagliate l'immagine che si desidera conservare. Fai clic su "Salva" per salvare le fette. Questi file devono essere salvati nella cartella yourwebsite / theme_files. Se strumento sezione è nascosta, si può rendere compare facendo clic su "Visualizza", "Show" e "fette". Evitare di tagliare blocchi di testo, perché non sono ricercabili in Google. Tuttavia, di solito si vuole mantenere il testo logo l'immagine del logo in.

Creazione di una Homepage

In qualsiasi editor di testo, creare un nuovo file home.html e immettere il codice seguente:

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

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

<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "it-IT">

<Head> <title> <--- TITOLO -!> </ Title> </ head>

<Body>

<! - Contenuto ->

</ Body>

</ Html>

Includere il file CSS prima del </ head> tag.

Creazione di tag div

Creare aree DIV secondo il disegno originale in PSD. Ogni sezione del layout dovrebbe essere incluso all'interno di un tag DIV e dato un nome di classe come intestazione e piè di pagina. Aggiungere tag DIV nella sezione corpo: <div class = "right_content"> </ div>. Allo stesso modo, aggiungere il numero di tag DIV di cui hai bisogno per ogni singola sezione del layout.

Creazione di un file CSS

Nel editor di testo, creare un nuovo file e salvarlo come "style.css". Lo stile classi create in precedenza. Posizionare le sezioni del layout utilizzando galleggiante, padding e margini.

/ Contenuti principali /

.topcontent {

margin-top: 71px;

margin-left: 29px;

Altezza: 91px;

}

Conversione in un tema Drupal

Vai al tuo sito Drupal e trovare la cartella del tema. Creare una nuova sottocartella con il nome del vostro tema. Torna al tuo file HTML. Aggiungere il <? Php print?> Tag prima tag <body>. Drupal utilizza questo tag stampa per stampare le sezioni specifiche della pagina web. Il codice è il seguente:

<Head>

<Title> <? Php print $ head_title?> </ Title>

&lt;?php print $head ?>

& Lt;? Php print $ stili>?

& Lt;? Php print $ script>?

Salvare il file come un nuovo file: page.tpl.php sotto la nuova cartella del tema. Trascinare il file style.css lì.

Passando Sezioni in Drupal blocchi

Drupal ha predefinito blocchi, di cui $ intestazione, $ sinistra-header, il contenuto $ e $ footer_message. Questi blocchi saranno chiamati nel file page.tpl.php dal tage <? Php print $ intestazione?>. Modificare le sezioni contenuti dinamici in blocchi aggiungendo i blocchi tag.