Qual è il modo migliore per passare da un mockup di Photoshop a HTML e CSS semantici?

Question

Generalmente utilizzo un processo manuale:

1. Guarda la pagina, individua gli elementi semantici e costruisci l'HTML
2. Taglia le immagini che penso mi serviranno
3. Inizia a scrivere CSS
4. Modifica e ripeti diversi passaggi secondo necessità

Hai un approccio migliore o uno strumento?

Answer 1

Ho un modo abbastanza naturale di programmare.La chiave è trattare la pagina come un documento o un articolo.Se la pensiamo in questo modo diventa logicamente chiaro quanto segue:

1. Il titolo della pagina è un'intestazione di livello superiore

   • Sia che tu crei il titolo del sito o il titolo della pagina vera e propria, l'h1 dipende da te: personalmente sceglierei Chi siamo h1 anziché Stack Overflow.

2. La navigazione è un sommario e quindi un file lista ordinata - puoi anche usare ol invece di ul.

3. Le intestazioni delle sezioni sono h2, le sezioni all'interno di tali sezioni sono h3 ecc.Impilarli.

4. Usa virgolette e virgolette ove possibile.Non circondarlo semplicemente di ".

5. Non usare b e i.Usa forte ed em.Questo perché l'HTML è un markup strutturale piuttosto che presentazionale. Forte E emI tag phasis dovrebbero essere usati dove metteresti l'accento sulla parola.

6. <label> gli elementi del tuo modulo.

7. Utilizzo <acronym>sabbia <abbr>Sì, ove possibile, ma solo in prima istanza.

8. Il più facile:Sempre, Sempre dai alle tue immagini un testo alternativo.

9. Ci sono molti tag HTML che potresti usare e che probabilmente non hai: indirizzo per indirizzi postali, output del codice sullo schermo.Dai un'occhiata a Cane HTML per alcuni è il mio riferimento preferito.

Questi sono solo alcuni suggerimenti, sono sicuro che potrei pensarne di più.

Oh, e se vuoi una sfida scrivi prima il tuo XHTML, poi scrivi il CSS.Durante l'utilizzo dei CSS non è consentito toccare l'HTML.In realtà è più difficile di quanto pensi (ma ho scoperto che mi ha reso più veloce).

Answer 2

Bene, quando creo un sito web tendo a cercare di dimenticare completamente il design mentre scrivo l'HTML.Lo faccio in modo da non ritrovarmi con alcun markup specifico del design e così posso concentrarmi sul significato semantico degli elementi.

Alcuni suggerimenti su come contrassegnare le cose:

• menu - usa l'elemento UL (elenco non ordinato), poiché questo è esattamente ciò che è un menu.un elenco non ordinato di scelte.esempio:

  <ul id="menu">
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
      <li id="about"><a href="/about" title="More about us">About</a></li>
  </ul>
  

  se desideri un menu orizzontale potresti fare questo:

  #menu li {
      display: block;
      float: left;
  }
  

• Logo: utilizza un elemento H1 (intestazione) per il logo anziché un'immagine. Esempio:

  <div id="header">
      <h1>My website</h1>
  </div>
  

  E il CSS (la stessa tecnica può essere applicata al menu sopra se desideri un menu con elementi grafici):

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }
  

• ID e classi: utilizza gli ID per identificare gli elementi di cui hai una sola istanza.Usa la classe per identificare gli elementi di cui hai diverse istanze.

• Utilizza un browser testuale (ad esempio lynx).Se ha senso navigare in questo modo, hai fatto del bene in termini di accessibilità.

Spero che aiuti :)

Answer 3

Essenzialmente faccio la stessa cosa che fa Jon, ma ecco alcune altre idee:

1. Usa le guide in Photoshop (e bloccale).Determina in anticipo tutte le dimensioni per ogni scatola/regione.

2. Raccogli tutte le dimensioni e i valori esadecimali dei colori in un file informativo (io utilizzo un file txt) a cui puoi facilmente fare riferimento.Ciò ridurrà la tassa sull'alt-tab e la selezione dei colori in Photoshop più volte.

3. Dopo che tutte le mie guide sono a posto, suddivido l'intero sito Web nella cartella delle immagini, iniziando con le foto e gli elementi raggruppati e terminando con i vari riquadri/immagini di sfondo, qualora esistano.(Mancia:Utilizzo Ctrl-fai clic sull'anteprima del livello per selezionare il contenuto di quel livello).

Note sull'utilizzo di Photoshop:

• Utilizza le guide o la griglia.
• Utilizzare la funzione Note per qualsiasi informazione pertinente
• Utilizza sempre i gruppi di livelli per elementi simili.Dobbiamo poter spegnere intere regioni con un clic.Inserisci tutto il contenuto dell'"intestazione" in un gruppo di livelli.
• Dai sempre un nome ai tuoi livelli.
• Puoi inserire ciascun modello di pagina in un file PSD e utilizzare gruppi di livelli nidificati per organizzarli.In questo modo non dobbiamo impostare tutte le nostre guide e note per ciascun modello di pagina su un sito.

Answer 4

Nessuna scorciatoia :) ma tutti lavorano in modo leggermente diverso.

Questo tutorial quello apparso ieri nel mio feedreader mostra il processo dall'inizio alla fine e potrebbe aiutare le persone che non l'hanno mai fatto prima, ma dato che sei un esperto, si tratta solo di ottimizzare i tuoi metodi.

MODIFICARE:Il collegamento listapart è certamente più automatizzato per i progetti 'piatti' in cui sia imageready che fireworks hanno avuto un supporto abbastanza buono fin dal primo giorno ed è migliorato e più semantico con ogni versione, ma se hai un design più complesso sono i pezzetti confusi che rendono il progetta quello che è e questi devono essere fatti a mano.

Answer 5

Ho solo pensato che valesse la pena sottolineare che, oltre agli ottimi consigli che hai ricevuto finora, ti consiglio di procurarti una versione stampata del disegno, utilizzando una penna rossa per contrassegnare tutti gli elementi del blocco sul disegno che ritieni di avere possono individuare e sedersi con il progettista per mezz'ora e parlare di come hanno immaginato che il loro progetto funzionasse per i casi d'uso che non si adattano al design statico.

• Cosa succede quando viene inserito più testo nella navigazione?
• Questa larghezza è fissa o fluida?
• Questo riquadro del contenuto è all'altezza fissa corretta o è fluido?Se è fluido perché ci hai messo sopra uno sfondo che non può essere ripetuto?
• Hai un bordo che si estende lungo la pagina che spezza due elementi altrimenti connessi.Visivamente ha senso, ma semanticamente non posso semplicemente usare un li per ospitare entrambi gli elementi.Cosa pensi sia più importante?

Ti aiuterà anche a individuare potenziali problemi che altrimenti non avresti realizzato che sarebbero stati problemi fino a quando non ti sarai immerso nei CSS.

Non solo rende il tuo lavoro più semplice: dopo averlo fatto alcune volte, il tuo designer avrà un'idea molto più chiara di ciò che è coinvolto nel contrassegnare il proprio lavoro, ma alcuni designer hanno davvero difficoltà a comprendere perché qualcosa che pensano sembri visivamente molto semplice richiederà un po' di tempo giorni di modifiche CSS per far funzionare.

Answer 6

Alcuni dei designer che conosco, di solito usano Illustrator per realizzare gli elementi di design.

Answer 7

Questa pagina mostra come farlo in modo un po' più automatizzato.

Answer 8

Inoltre, scopri la funzione "Layer Comps".Lo uso per modificare gli stati dei pulsanti.

1. Crea composizioni di livelli per normale, al passaggio del mouse e attivo.
2. In ognuno di questi, imposta gli effetti/le sovrapposizioni di colore e i livelli visibili che appartengono a quello stato.
3. Salva per il Web:vai in una cartella diversa per ogni stato, a meno che non sia più semplice rinominare ciascuna sezione (altrimenti le sezioni del pulsante al passaggio del mouse sovrascriveranno le sezioni normali).