Immagine affettare è il processo di assunzione di una grande immagine e tagliando le parti più piccole dell'immagine originale per l'uso online. Il processo è in realtà piuttosto antiquato ora che quasi ogni sito Web supporta CSS-P e Flash, ma alcuni sviluppatori Web comunque utilizzano per ridurre le dimensioni del file di immagine, riducendo così i tempi di download di una pagina Web. Immagine affettare per consentire agli utenti di rotolare e fare clic su alcune parti di un'immagine, ad esempio alcuni pulsanti o le parole utilizzate da altri siti.
Istruzioni
1
Suddividere l'immagine in sezioni utilizzando una programma di editing delle immagini. Windows non è un'immagine avanzata programma di editing per impostazione predefinita, quindi fare uso di pagamento per programmi come Photoshop e Corel Paint Shop Pro o utilizzare programmi freeware come GIMP. Tagliare l'immagine in posti rilevanti e sensibile, ad esempio intorno a parole di menu (Home, su, argomenti) e intorno i pulsanti di condivisione come Twitter, Facebook e altri siti di social media. Dopo il taglio, l'immagine dovrebbe essere simile un sacco di scatole e separazioni sopra l'immagine originale.
2
Salvare ed esportare l'immagine come codice HTML. Avanzate di programmi come Photoshop e GIMP sono in grado di esportare l'immagine di affettato-up come codice HTML non elaborato collegati tra loro..--questo rende molto più facile per incollare l'immagine sezionata al tuo sito.
Farlo selezionando il programma "Save for Web" o "Salva per dispositivi" opzione. Seguire le istruzioni del programma e verifica che l'affettatrice sembra corretto in anteprima..--garantire anche se il formato dell'immagine è impostato su un file "HTML e immagini", che ha un'estensione di file HTML.
3
Salva ed Esporta l'immagine sezionata manualmente se il tuo programma di editing non può generare alcun codice HTML. Iniziare salvando le fette di singole immagini in una cartella e il nome loro in ordine così che iniziano dall'alto-sinistra e spostare lungo la parte superiore a destra, spostare attraverso qualsiasi mezzo linee e finire lungo la linea di fondo da sinistra a destra.
Ad esempio, salvare la porzione d'immagine superiore sinistro come "image01.jpg" e poi lavorare a destra con "image02.jpg" e "image03.jpg." Finire la riga superiore e salvare la porzione d'immagine che è quello successivo verso il basso a sinistra come "image04.jpg." Continuare lungo quella linea nello stesso modo fino a quando non finisci nell'intervallo di basso a destra.
4
Caricare tutte le sezioni di immagine in un Web editing programma come Microsoft FrontPage o attraverso un sistema di gestione dei contenuti come WordPress. Questa è una buona idea se le sezioni di immagine su ogni riga sono della stessa altezza, perché essa li organizzerà insieme senza alcun disallineamento. Utilizzare il seguente codice per disporre le fette di immagine in ordine (Nota che i valori "x" verranno automaticamente compilati con la dimensione effettiva delle sezioni immagine caricata):
< img src="image01.jpg" width = "x" altezza = "x" / >
< img src="image02.jpg" width = "x" altezza = "x" / >
< img src="image03.jpg" width = "x" altezza = "x" / >
< img src="image04.jpg" width = "x" altezza = "x" / >
Si noti che nel codice si presuppone che image03.jpg ha un
rompere il codice HTML dopo esso, che significa che la riga successiva di immagini inizierà il image04.jpg. Accertarsi di inserire una pausa
codice dopo ogni linea completa di immagini affettati è stato caricato.
5
Aggiungere tag HTML URL per rendere un'immagine cliccabile. Questa è una buona idea per i progettisti che hanno affettato la loro immagine a punti per i pulsanti link, post e pagine. Inserire il codice di collegamento HTML all'interno del codice immagine esistente per creare il collegamento a reindirizzare altrove. Utilizzare la seguente riga di codice come esempio per una fetta di immagine individuale..--si tratta di un'aggiunta al codice di cui sopra, così tutte le altre sezioni non collegato dovrebbero rimanere come prima e dopo la fetta collegata.
(sezioni di immagine precedente vanno qui) < a href = "http://anotherpage.com & quot; / >< img src="image01.jpg" width = "x" altezza = "x" / >< /a > (sezioni di immagine successiva vanno qui)