Recensione del libro: da Photoshop a HTML
Se sei nuovo nella creazione di progetti di siti web con Photoshop, imparare a trasformare quei file .PSD in file CSS e HTML semantici e conformi agli standard può essere un po 'intimidatorio.
Dopo tutto, ci sono un sacco di ottimi servizi là fuori che possono tagliare e codificare i file per te. Ma ci sono quei casi in cui potresti preferire suddividere quei disegni da solo.
Ecco dove Da Photoshop a HTML: come tagliare i tuoi disegni come un professionista da Jeffrey Way, direttore di Nettuts +, entra.
In questo libro di 145 pagine, l'intero processo di conversione di un file .PSD in una progettazione di un sito web funzionante è trattato, in dettaglio, con esempi di codice.
Un sito modello viene utilizzato per accompagnare i lettori attraverso l'intero processo, passo dopo passo, con un solo esempio. Tutto dalla codifica di base per rendere compatibili i tuoi progetti cross-browser.
Ogni giorno, se ascoltate attentamente, le urla possono essere ascoltate in tutto il mondo da programmatori che tentano senza successo di forzare un progetto in posizione. Non è solo questione di imparare la lingua; la memorizzazione è un compito facile. I punti che inducono urlo si verificano quando visualizzi il tuo sito in dieci diversi browser, ognuno dei quali rende il tuo sito a diversi livelli di coerenza.
Il libro presuppone che tu abbia una conoscenza di base del CSS e dell'HTML, così come un design già creato in Photoshop. Il design utilizzato nel libro è semplice, ma i concetti utilizzati per creare il design possono essere applicati facilmente a progetti più complessi.
Il libro inizia con una sezione su come osservare un disegno prima di immergerti nel processo di creazione del codice HTML.
Mentre potrebbe sembrare naturale iniziare immediatamente a lavorare sulla grafica del nostro sito Web, questo in realtà non potrebbe essere più lontano dalla verità. Invece, dobbiamo prima costruire la nostra base, o il mark-up, e solo una volta che è stato completato possiamo passare alla grafica.
Selezionando le tre sezioni di base che la maggior parte dei siti Web contengono: un'intestazione, l'area del contenuto principale e un piè di pagina, sono coperti, quindi il libro salta a destra nel processo di impostazione del file HTML di base. Ancora una volta, chiunque abbia una conoscenza di base dell'HTML non avrà problemi con questa parte.
Una volta completato il codice HTML di base, da Photoshop a HTML viene illustrato come suddividere i file .PSD.
Prenditi un momento per esaminare il design in Photoshop. Cerca di individuare ogni immagine che sarà necessaria. Ricorda, le funzionalità possono essere ricreate con CSS; quindi sii creativo.
Mentre vengono menzionati entrambi i metodi per affettare i file, il libro utilizza una combinazione di ritaglio e taglio e incolla per catturare le immagini di cui hai bisogno, piuttosto che utilizzare lo strumento sezione.
Entrambi i metodi sono perfettamente validi. Vi raccomando di provare entrambi e scegliere quale mai si rivela il più veloce ... per voi.
Le scorciatoie da tastiera per accelerare questo processo sono trattate in modo approfondito. Salviamo queste immagini per il web, incluse tutte le impostazioni che dovresti usare e il tipo di file immagine da usare per i tipi di immagini, è anche ampiamente discusso, così come gli sprite CSS. Ultimo ma non meno importante in questa sezione, ci sono alcune note sulle regolazioni che dovranno poi essere apportate al file HTML in base alle immagini di sfondo utilizzate.
Una volta che l'HTML e le immagini sono pronte, è ora di tuffarsi nel CSS per il tuo sito. Le reimpostazioni del browser sono sottolineate e trattate in modo approfondito, oltre a come ricostruire un file CSS predefinito standardizzato.
Ogni browser utilizza un po 'di "CSS predefinito" per applicare automaticamente lo stile al markup. A prima vista, si potrebbe pensare che questo sia estremamente utile ... Se ogni browser li implementasse in modo identico, questo non sarebbe un problema. Purtroppo, questo non è il caso.
Esistono numerosi principi CSS, tra cui posizionamento relativo rispetto assoluto e forme CSS, trattati in modo pratico e utilizzabile. Per coloro che non sono esperti di CSS, queste sezioni saranno particolarmente informative, mentre coloro che sono potrebbero voler saltare queste parti. Un altro bel po 'di codice CSS coperto è come creare footer sticky, qualcosa che può essere frustrante per i nuovi designer CSS.
La codifica di pagine aggiuntive oltre la nostra home page è coperta, incluso come apportare piccole modifiche al layout e al contenuto e cosa sarà necessario aggiungere ai file CSS. Quando avrai finito con questa sezione, avrai a disposizione tutti i modelli di pagina necessari per un sito web completo del portfolio.
L'ultimo capitolo regolare del libro spiega come rendere il tuo design compatibile con browser diversi, in particolare quando si tratta di browser più vecchi come Internet Explorer 6 e 7. Uno dei problemi più importanti è la mancanza di gestione della trasparenza nelle immagini in IE6 , con una varietà di soluzioni per superarlo.
La visualizzazione del tuo sito Web in Internet Explorer 7 e versioni successive per la prima volta ti farà rabbrividire. Potresti essere fortunato, ma la maggior parte delle volte troverai numerosi problemi che devono essere risolti.
Un capitolo bonus alla fine mostra come creare effetti di transizione jQuery, che sono incorporati nella progettazione del sito. Per chi è nuovo a JavaScript e jQuery, è un progetto interessante che insegna alcune tecniche di base.
Nel complesso, se hai esternalizzato la conversione dei tuoi file .PSD in HTML, o se volevi provare a progettare siti web in Photoshop, questo libro merita sicuramente una lettura.
Con istruzioni complete e dettagliate che possono essere facilmente applicate a molti progetti e tonnellate di codice di esempio, Da Photoshop a HTML è sicuro di iniziare a convertire i tuoi disegni. Con un po 'di pratica, i concetti trattati potrebbero essere utilizzati praticamente su qualsiasi progetto!
Il libro viene fornito anche con i file di origine per il sito creato, che puoi utilizzare nei tuoi progetti come preferisci.
Scarica il capitolo di esempio
Scritto esclusivamente per WDD da Cameron Chapman .
Cosa ne pensi di questo libro? Per favore fateci sapere nell'area commenti ...