MatEvil

Photoshop Web Photo Gallery

25 posts in this topic

Ciao a tutti,

Torno in questa sezione con un tutorial per la realizzazione semplice di una gallery di presentazione fotografica/immagini con Photoshop, ho scoperto da poco questa funzione e credo che possa essere utile a tutti per avere anche una visione più ampia del prodotto Adobe Bridge che solitamente viene utilizzato raramente o è quasi sconosciuto. Per prima cosa andiamo a vedere chi è Adobe Bridge.

Dal sito ufficiale di Adobe ci viene presentato così:

Gestione visiva delle risorse

Adobe® Bridge CS3 è uno strumento di gestione avanzato e intuitivo che consente di organizzare, sfogliare, individuare e visualizzare con facilità risorse multimediali. Disponibile in tutte e sei le versioni di Adobe Creative Suite® 3 e in tutte le applicazioni creative professionali di Adobe, Bridge consente di accedere in modo centralizzato ai file di progetto, applicazioni e impostazioni e offre funzionalità di assegnazione di tag e ricerca basate su metadati XMP.

LINK

Shoot_01.jpg

Detto in parole povere Bridge è un sistema avanzato del vecchio Browse... che si trovava nelle versioni precedenti alla Creative Suite (CS) che permette di visualizzare e gestire anche i file proprietari di Adobe, ma non solo. Permette anche di avviare determinate operazioni automatiche senza dover aprire in Photoshop le immagini o i file desiderati, come faremo in questo breve tutorial.

Aprimo Adobe Bridge o dalla lista dei programmi oppure da Photoshop con File...->Browse... a questo punto possiamo selezionare delle immagini a piacere collocate in qualsiasi cartella.

Shoot_02.jpg

Dal menù a discesa scegliamo Tools->Photoshop...->Web Photo Gallery... ( =Strumenti->Photoshop...->Galleria di foto per Web...). La stessa operazione possiamo farla aprendo le varie immagini in Photoshop e poi da File->Automate->Web Photo Gallery... (File->Automatizza->Galleria d foto per Web...).

Shoot_03.jpg

Nella finestra di dialogo possiamo effettuare varie scelte tra cui la tipologia di template/styles per la visualizzazione di immagini e andare a settare le varie parti.

Shoot_04.jpg

Vediamo alcuni esempi qui sotto

Shoot_05.jpg

Shoot_06.jpg

Shoot_07.jpg

Shoot_08.jpg

Nel tutorial utilizerò la stessa tipologia che ho usato per nel mio sito web con l'aggiunta di un sottofondo audio, infatti notiamo che se selezioniamo lo stile Flash – Gallery 2 sotto l'anteprima troviamo una piccola descrizione che ci permette di inserire una traccia audio se la rinominiamo con il nome di “useraudio.mp3â€... Per visualizzare questa tipologia di galleria è necessaria la plug-in gratuita per la visualizzazione di file in formato Flash, potete scaricarla qui

Alla voce Source Image ( =Immagini sorgente) lasciamo pure Use: Selected images from Bridge ( =Usa: Immagini selezionate da Bridge) mentre dobbiamo assegnare una cartella di destinazione dove salvare il nostro lavoro (per questo tutorial io ho creato una cartella sul desktop e ho assegnato il percorso).

Shoot_09.jpg

Possiamo anche personalizzare i vari colori del testo, sfondo, immagini selezionate, banner, grandezza delle immagini di anteprima e di visualizzazione ecco come le ho settate per questo tutorial e a seguire un rapido schema che spiega le varie parti che verranno personalizzate.

Shoot_10.jpg

Shoot_11.jpg

Shoot_12.jpg

Shoot_Extra.jpg

Una volta finito Photoshop crearà nella cartella selezionata una serie di file e cartelle contenenti tutte le informazioni che saranno visualizzate nel browse di internet (notiamo che appena ha finito avremo un anteprima della nostra realizzazione). Per assegnare una traccia audio possiamo copiare il nostro file audio e rinominarlo come “useraudio.mp3â€.

Shoot_15.jpg

Nota bene: Per avere le descrizioni, il titolo e altre tipologie di informazioni della nostra immagine prima di eseguire questa operazione dobbiamo aprire le immagini e dal menù a discesa scegliere File...->Info... Si aprirà una finestra di dialogo dove possiao andare a riempire i vari campi come preferiamo e salvare il tutto.

Shoot_13.jpg

Shoot_14.jpg

Spero che il tutorial sia utile a tutti, vi ringrazio per l'attenzione, per le critiche, consigli e commenti che lascerete...

Matteo Migliorini

:hello:

post-11448-1201317353.jpg

Edited by Macphisto

Share this post


Link to post
Share on other sites

Critiche??? Come al solito ottimo lavoro, lo avevo appena guardato in questi giorni che ho comprato i cd dal giornalaio sui tutorial di photoshop e devo dire che mi hanno stupito (molto ben fatti ma non faccio nomi per la pubblicità). Grazie per condividere sempre tutto e a presto!!!

P.S. spero ti vada sempre tutto bene!!! :rolleyes:

Share this post


Link to post
Share on other sites

Grazie Luca,

mi sono messo a spulciare tutte le piccole parti di Photoshop che non conoscevo e come sempre appena apprendo qualcosa di nuovo la voglia di condivideral è sempre forte... mi scuso con gli utenti che usano Photoshop in italiano se le traduzioni non sono perfette, ma sapendolo e usandolo solo in inglese mi trovo un attimo spiazzato se devo passare a una versione italiana (anche se per primo sarei per unificare tutti i software in una sola versione e sola lingua come è stato per 3D Studio Viz/Max)... Al momento sto tenendo un corso di PS, quindi molte piccole lezioni saranno scritte e messe on-line ;) ....

Mat

:hello:

Share this post


Link to post
Share on other sites

fantastico!!!!!!!!!!! Mi hai levato 1 peso incredibile!!!!!! Dovevo fare 1 gallery e mi toccava creare tutto a mano, fatto così invece... fantastico!!! :D

Complimentissimi anche per la chiarezza!!!!!! e Grazie

Share this post


Link to post
Share on other sites
fantastico!!!!!!!!!!! Mi hai levato 1 peso incredibile!!!!!! Dovevo fare 1 gallery e mi toccava creare tutto a mano, fatto così invece... fantastico!!! :D

Complimentissimi anche per la chiarezza!!!!!! e Grazie

Se sei pratico di Flash e Dreamweaver puoi modificare i file che i crea.. come vedi:

Shoot_15.jpg

nelle tre cartelle ci sono le immagini, le relative pagine e le anteprime...

Un file Index.htm che puoi rinominare per non fare casini con la messa on-line (lo riconosce tranquillamente)...

Un file di anteprime (che non ho testato se si può rinominare)...

I codici di dreamweaver...

Un file *.swl che credo sia di Flash (non lo uso quindi non sono sicuro)...

Nel caso di molte immagini lui ti crea più di un file Index.Htm (Index_1...Index_2... ecc...) in questo caso la rinomina va eseguita mantenendo l'ordine e il numero con l'under score davanti...

Ecco un esempio...

33905742bc5.jpg

Interessante sarebbe vedere, chi ha nozioni di Flash o Dreamweaver più elevate delle mie, cosa si può tirare fuori e se magari venisse fuori la creazione di un tutorial continuativo...

Mat

:hello:

Share this post


Link to post
Share on other sites

Ciao MatEvil

ho appena seguito il tuo tutorial....mi hai aperto letteralmente un mondo

grandioso!!!!!

Avevo proprio un problema legato alla realizzazione delle preview del mio sito web e l'aggiornamento dei miei lavori!!!!

figataaaa

ho solo un dubbio (legato al fatto che nn me ne intendo di htlm....il sito me lo aggiorna mio cognato...quando può)

il dubbio è questo...

Io nel mio sito vorrei creare uno schema simile a questo:

LAVORI FINITI (al suo interno delle sottocartelle es. UFFICI, PUB, NEGOZIO ecc)

GRAFICA 2D (AL suo interno delle sottocartelle es. SCHIZZI, DIPINTI DIGITALI ecc)

col metodo da te illustrato nel tutorial...posso creare degli indici associati ai singoli lavori (UFFICI, PUB ecc)

e poi associarli ad una cartella superiore in questo caso LAVORI FINITI?

spero di essere stato minimamente chiaro!

in ogni caso grazie per il tut!!!

Share this post


Link to post
Share on other sites

Ciao,

Si, si può modificare tutto... ma devi usare Flash per andare a modificare il risultato di questa tipologia di galleria, se ne usi altre devi per foza usare un sistema Htm... Ora sono di fretta se posso cerco una cosa e la posto...

A poi...

Mat

:hello:

Share this post


Link to post
Share on other sites

Grazie Mat ;)

Effettivamente permette di risparmiare molto tempo...

Proprio in questi giorni dovevo fare una gallery per un sito web e ho provato questo metodo.

Devo dire che è molto veloce e le gallery sono molto carine, però dal punto di vista del codice html generato :eek:

meglio non parlarne... :huh:

Quindi nel mio caso, mi è servita soltanto come ispirazione, poi l'ho rifatta totalmente per poterla modificare a piacimento con i css.

Però devo dire che è una gran cosa se bisogna fare una gallery di foto al volo e non bisogna più modificarla o personalizzarla più di tanto.

Io nel mio sito vorrei creare uno schema simile a questo:

LAVORI FINITI (al suo interno delle sottocartelle es. UFFICI, PUB, NEGOZIO ecc)

GRAFICA 2D (AL suo interno delle sottocartelle es. SCHIZZI, DIPINTI DIGITALI ecc)

col metodo da te illustrato nel tutorial...posso creare degli indici associati ai singoli lavori (UFFICI, PUB ecc)

e poi associarli ad una cartella superiore in questo caso LAVORI FINITI?

spero di essere stato minimamente chiaro!

in ogni caso grazie per il tut!!!

Ciao SISARS, ho fatto una gallery prova qui, dimmi se è ciò che intendevi fare (penso di sì :P).

Io ho scelto una gallery a caso, si può fare con ogni tipologia di gallery in html, poiché si modifica facilmente.

Per quelle in flash sinceramente non ho guardato, potrebbe modificarsi tramite xml, però solo per aggiungere foto (parere mio).

Se è quello che intendevi poi posso fare un tutorial per descrivere come ho fatto, è semplicissimo ;)

In realtà mancano alcune cose, quella principale è un link che permetta di tornare indietro dalla sotto-gallery alla galleria precedente... Volendo (si dovrebbe in effetti :P) si può inserire, ma ho momentaneamente risolto facendo aprire le sotto-gallery in una nuova pagina :D

Ciaoooo

Anteros :)

Share this post


Link to post
Share on other sites
Grazie Mat ;)

Effettivamente permette di risparmiare molto tempo...

Proprio in questi giorni dovevo fare una gallery per un sito web e ho provato questo metodo.

Devo dire che è molto veloce e le gallery sono molto carine, però dal punto di vista del codice html generato :eek:

meglio non parlarne... :huh:

Quindi nel mio caso, mi è servita soltanto come ispirazione, poi l'ho rifatta totalmente per poterla modificare a piacimento con i css.

Però devo dire che è una gran cosa se bisogna fare una gallery di foto al volo e non bisogna più modificarla o personalizzarla più di tanto.

Ciao SISARS, ho fatto una gallery prova qui, dimmi se è ciò che intendevi fare (penso di sì :P).

Io ho scelto una gallery a caso, si può fare con ogni tipologia di gallery in html, poiché si modifica facilmente.

Per quelle in flash sinceramente non ho guardato, potrebbe modificarsi tramite xml, però solo per aggiungere foto (parere mio).

Grazie di che? Figurati ;)...

Non conosco bene il settore del web design quindi mi fido di quello che dite voi... io la vedo come alternativa (al momento) per la presentazione di progetti universitari al posto del classico Power Point che odio profondamente... le poche volte che mi è stata richiesa una presentazione in sede di esame sono andato sempre alla ricerca di altro come ad esempio una piccola presentazione in html basilare oppure nel caso di video ho usato Encore Dvd realizzando un dvd interattivo (anche li per quel poco che so ;) )... tutte alternative valide e meno fastidiose delle slide del prodotto Microsoft (niente contro Bill Gates, ma quel programma lo trovo veramente stupido e squallido)..

Poi si... carina come utilità, ma se si deve andare a vedere nel dettaglio, a quanto ho capito, non è proprio il massimo... è più per un utilizzo user friendly ;)

Se scrivi il tutorial sarebbe na gran cosa, si possono collegare anche i due tutorial come filo logico e a quel punto non ci sono più articoli solo per questo, ma è come se si creasse un filo logico su tutto...

Ciao e grazie a te...

Matteo

:hello:

Share this post


Link to post
Share on other sites
Grazie Mat ;)

Effettivamente permette di risparmiare molto tempo...

Proprio in questi giorni dovevo fare una gallery per un sito web e ho provato questo metodo.

Devo dire che è molto veloce e le gallery sono molto carine, però dal punto di vista del codice html generato :eek:

meglio non parlarne... :huh:

Quindi nel mio caso, mi è servita soltanto come ispirazione, poi l'ho rifatta totalmente per poterla modificare a piacimento con i css.

Però devo dire che è una gran cosa se bisogna fare una gallery di foto al volo e non bisogna più modificarla o personalizzarla più di tanto.

Ciao SISARS, ho fatto una gallery prova qui, dimmi se è ciò che intendevi fare (penso di sì :P).

Io ho scelto una gallery a caso, si può fare con ogni tipologia di gallery in html, poiché si modifica facilmente.

Per quelle in flash sinceramente non ho guardato, potrebbe modificarsi tramite xml, però solo per aggiungere foto (parere mio).

Se è quello che intendevi poi posso fare un tutorial per descrivere come ho fatto, è semplicissimo ;)

In realtà mancano alcune cose, quella principale è un link che permetta di tornare indietro dalla sotto-gallery alla galleria precedente... Volendo (si dovrebbe in effetti :P) si può inserire, ma ho momentaneamente risolto facendo aprire le sotto-gallery in una nuova pagina :D

Ciaoooo

Anteros :)

Fighissimo

cmq si è quello che intendevo con l'unica differenza ancora piu semplice di nn mettere la foto...come hai fatto tu ma mi bastava anche solo la scritta

dove hai messo l'aereo a me andrebbe bene mettere anche solo la scritta "aerei" per la categaria associata

tra l'altro a me intressa piu che altro per far un porfolio di lavor da mostrare on-line e basta

cmq grazie ancora

Share this post


Link to post
Share on other sites

Bene dai, allora nei prossimi giorni preparo un tutorial (il mio primo :P)...

Su questo posso farlo, sul 3d ancora no :unsure:

Ora leggo un po' il topic come scrivere un tutorial... Ma lo allego a questa discussione oppure ne apro una nuova mettendo un riferimento?

Ciaoooo

Anteros :)

Share this post


Link to post
Share on other sites
Ora leggo un po' il topic come scrivere un tutorial... Ma lo allego a questa discussione oppure ne apro una nuova mettendo un riferimento?

Scrivi un nuovo tutorial e se vuoi puoi mettere il link di riferimento a questa....

Mat

:hello:

Share this post


Link to post
Share on other sites
Scrivi un nuovo tutorial e se vuoi puoi mettere il link di riferimento a questa....

Qualcuno mi ha suggerito di continuare qui...

In effetti non è sbagliata come idea, alla fine sarebbe un tutorial sulla stessa cosa più o meno...

Poi non c'è bisogno di fare proprio un tutorial, spiego il procedimento nella risposta...

Cmq se poi non andrà bene ci penseranno i moderatori dai...

Ciaoooo

Anteros :)

Share this post


Link to post
Share on other sites
Qualcuno mi ha suggerito di continuare qui...

In effetti non è sbagliata come idea, alla fine sarebbe un tutorial sulla stessa cosa più o meno...

Poi non c'è bisogno di fare proprio un tutorial, spiego il procedimento nella risposta...

Cmq se poi non andrà bene ci penseranno i moderatori dai...

Ciaoooo

Anteros :)

Vai tranquillo... ;)

Mat

:hello:

Share this post


Link to post
Share on other sites

Allora... Comincio... <_<

_Passo 1 : organizzare le foto

La creazione della struttura è molto semplice, se si predispongono già le foto ordinate secondo la posizione che occuperanno nella gallery, per capirci meglio riporto lo schema delle cartelle di
:

risorse

<DIR>
alianti
  • ALIANT10.jpg

  • ALIANT11.gif

  • ALIANT12.JPG

  • ALIANT13.jpg

  • ALIANT17.jpg

  • ALIANT18.jpg

<DIR>
castelli
  • CASTL084.jpg

  • CASTMNT.JPG

  • CASTTRA.JPG

  • DRENA.JPG

  • FONTA.JPG

<DIR>
egizi
  • EGI1.JPG

  • EGI12.JPG

  • EGI14.GIF

  • EGI2.JPG

  • EGI4.JPG

  • EGI6.JPG

<DIR>
natura

<DIR>
fiori
  • FIORI15.JPG

  • FIORI17.JPG

  • FIORI20.JPG

  • FIORI21.JPG

  • FIORI25.JPG

<DIR>
fulmini
  • LAMPO.JPG

  • NATURA070.jpg

  • NATURA087.jpg

  • NATURA088.jpg

  • NATURA089.jpg

  • fiori.JPG
  • fulmini.jpg

  • alianti.JPG
  • cast.jpg
  • egizi.jpg
  • natura.jpg

Come si può notare, dentro la cartella risorse vi sono le 4 immagini che servono come anteprima per le sotto-gallery (Alianti, Castelli, Egizi, Natura). Le immagini delle sotto-gallery sono contenute rispettivamente in 4 cartelle dello stesso nome.

Volendo si può iterare la struttura, come per esempio in Natura, dove vi sono due immagini per le categorie Fiori e Fulmini, con altrettante cartelle contenenti appunto le immagini delle due sotto-gallery.

Spero che fin qui sia abbastanza chiaro...
:rolleyes:
Quindi passiamo alla fase 2...
:P

_Passo 2 : creazione gallery

Prima di tutto creiamo una cartella chiamata
webgallery
(molto originale lo so
:lol:
).

Dopodiché possiamo finalmente aprire
Photoshop
.

Come già spiegato egregiamente da Mat, andiamo su
File -> Automate -> Web Photo Gallery...

Si apre la finestra di dialogo, dove possiamo settare le varie impostazioni per la nostra gallery.

img1.jpg

Rifacendomi sempre alla
di esempio, utilizzeremo lo stile
Simple - Thumbnail Table
, per creare la gallery principale ed anche per i livelli successivi di navigazione.

Per questo utilizzeremo una gallery in html che sarà facile da modificare.

Per le gallery vere e proprie, che si trovano alla fine, dove verranno mostrate le foto di una certa categoria, potremo anche utilizzare le gallerie in flash, che potranno essere personalizzate come già spiegato da Mat
;)
.

Ora analizziamo le impostazioni da dare nella finestra di dialogo.

img2.jpg

La differenza sostanziale con il tutorial precedente è che seguiremo la struttura creata in precedenza, quindi selezioniamo

Use: Folder
e diamo il percorso della nostra cartella
risorse
, dove si trovano le anteprime per le sotto-gallery.

A questo punto una cosa importante è quella di assicurarci di
non
aver messo la spunta su
Include All Subfolders
, altrimenti PS includerà tutte le immagini presenti in
risorse
, mentre noi vogliamo solo le anteprime.

Come cartella di destinazione scegliamo la cartella
webgallery
creata in precedenza.

Ora passiamo alla sezione
Options
:

img3.jpg

Le categorie che ci interessano per ora sono soltanto
Banner
e
Thumbnails
.

img4.jpg

In
Banner
scriviamo semplicemente il nome della galleria, in questo caso
Web gallery
ed eventualmente le altre informazioni, che io personalmente ho tralasciato.

img5.jpg

In
Thumbnails
impostiamo la dimensione delle immagini di anteprima delle categorie, su quante colonne e righe si devono disporre ed eventualmente la dimensione del bordo.

Direi che non ci resta che cliccare su
OK
.

Attendiamo che PS faccia il suo lavoro, dopodiché dovrebbe aprire nel browser una galleria simile a questa:

img6.jpg

Ci sono almeno due cose da rivedere: la prima è che se impostiamo le dimensioni a 200px per le anteprime, il titolo della gallery risulta troppo piccolo a confronto... Poi magari vorremmo avere la possibilità di cambiare il colore del bordo e di aggiungere un commento sotto la foto (che nel nostro caso sarebbe il titolo della sotto gallery).

Tutto questo lo vedremo dopo quando ci addentreremo nel codice html
:P

Ora che abbiamo creato il primo livello, creiamo le sottogallery.

Partiamo dalla gallery
Alianti
. Lo stesso procedimento si applica invariato per
Castelli
ed
Egizi
.

Entriamo nella cartella
webgallery
. Osserviamo il contenuto:

webgallery

<DIR>
images

<DIR>
pages
  • alianti.html

  • cast.html

  • egizi.html

  • natura.html

<DIR>
thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

Le cartelle images e thumbnails le ho tralasciate perchè non ci interessano.

Entriamo nella cartella pages e cancelliamone il contenuto, dopodiché creiamo 4 cartelle con i nomi delle 4 sotto-gallery, alianti, castelli, egizi e natura (diamo i nomi minuscoli che è meglio ;)).

Ora riapriamo PS, andiamo sempre in File -> Automate -> Web Photo Gallery....

Per questa gallery, visto che non contiene altri livelli, possiamo scegliere lo stile che vogliamo, anche flash volendo...

Ora spostiamoci dentro la cartella risorse e selezioniamo come cartella di partenza alianti e come destinazione la cartella alianti appena creata dentro pages.

img7.jpg

Per quanto riguarda le Options, nella sezione Banner, diamo un titolo diverso, per esempio "Alianti".

Questa volta potremmo volere modificare le impostazioni delle immagini vere e proprie della galleria, per questo rimando al primo post di Mat ;).

Clicchiamo su OK ed osserviamo il risultato nel browser.

Se non ci piace, possiamo sempre portarci dentro la cartella pages/alianti e cancellarne interamente il contenuto, dopodiché ripetere l'operazione precedente, modificando a piacimento i diversi parametri.

Ora possiamo ripetere l'operazione per altre gallerie senza sotto-gallery, in questo esempio Castelli ed Egizi.

Vediamo ora come creare un ulteriore livello per la gallery Natura.

Per quanto riguarda questa gallery, sceglieremo di nuovo lo stile Simple - Thumbnail Table e valgono le stesse considerazioni della gallery principale.

Alla fine, per le gallery fiori e fulmini, visto che sono le ultime della struttura potremo crearle come le gallery Alianti, Castelli ed Egizi, quindi potremo applicare qualsiasi stile. Io per semplicità ho sempre tenuto lo stesso.

Alla fine dovremmo avere questa struttura:

webgallery

<DIR>
images

<DIR>
pages

<DIR>
alianti

<DIR>
images

<DIR>
pages

<DIR>
thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

<DIR> castelli

<DIR>
images

<DIR>
pages

<DIR>
thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

<DIR> egizi

<DIR>
images

<DIR>
pages

<DIR>
thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

<DIR> natura

<DIR>
images

<DIR>
pages

<DIR>
fiori

<DIR>
images

<DIR>
pages

<DIR>
thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

<DIR> fulmini

<DIR>
images

<DIR>
pages

<DIR>
thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

<DIR> thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

<DIR> thumbnails

  • index.html
  • photos.js
  • photos.xml
  • UserSelections.txt

Ecco siamo arrivati alla fine del lavoro con PS.

Ora la gallery è creata... o quasi... :P

In effetti per ora ha un enorme difetto, semplicemente non funziona! :wallbash:

Questo perché dobbiamo dare i collegamenti giusti modificando l'html, inoltre curiosando un po' nel codice scopriremo come personalizzare ulteriormente la nostra gallery secondo i nostri gusti, scherzo -_-

Visto che non è un corso di html (anche perché non saprei farlo... :lol:) vedremo solo come cambiare il colore del bordo, la grandezza del titolo ed aggiungeremo i titoli delle sezioni... Questo però alla prossima puntata, ora me ne vado a dormire :w00t:

Spero di non essere stato troppo pedante, di sicuro mi sono dilungato, ma mi piacciono i tutorial molto precisi, anche a costo di essere banali, quindi ho spiegato tutto nel dettaglio (almeno spero).

Cmq la parte divertente deve ancora arrivare :lol:

Ciaooooo

Anteros :)

Share this post


Link to post
Share on other sites

Ottimo

provo e ti faccio sapere

ti volevo chiedere solo un paio di cosette

posso aggingere anche il nome della cartella oltre alla foto nella web galley e poi ho notato che la web galllery che hai creato tu nn da problemi col l'internet explorer mentre le mie si.... i problemi a cui mi riferisco sono legati al fatto che mi compare una sciritta in alto che mi ice che il contenuto puo essere dannoso mentre il tuo sito di prova la "web gallery" nn li da!!!!!

grazie lo stesso

cmq è stato utilissimo

Share this post


Link to post
Share on other sites
posso aggingere anche il nome della cartella oltre alla foto nella web galley

Penso che ti riferisca al nome delle diverse categorie sotto le foto.

Come già detto è necessario modificare l'html, cosa che spiegherò appena ho due secondi di tempo ;)

Anche perché se hai seguito passo passo il tutorial, ora come ora la gallery non funziona, cioè i link sono sbagliati...

ho notato che la web galllery che hai creato tu nn da problemi col l'internet explorer mentre le mie si.... i problemi a cui mi riferisco sono legati al fatto che mi compare una sciritta in alto che mi ice che il contenuto puo essere dannoso mentre il tuo sito di prova la "web gallery" nn li da!!!!!

Semplicemente perché la mia è online ;)

Prova a caricare i file sul server, non dovrebbe esserci più quell'avviso.

Ciaoooo

Anteros :)

Share this post


Link to post
Share on other sites
semplicemente......grazie!

di nulla ;)

Quando ho due secondi, continuo con la parte html, altrimenti la gallery così non funziona...

Ciaoooo

Anteros :)

Share this post


Link to post
Share on other sites

Allora... Ricomincio... <_<

_Passo 3 : correggere i links

Prima di tutto bisogna correggere i link presenti nella gallery, poichè come è adesso non funziona...

Per editare il codice html bisogna aprire i file con il blocco note, oppure con un editor html, io personalmente utilizzo Dreamweaver.

Apriamo quindi il file
index.html
che si trova dentro la cartella
webgallery
.

Ci posizioniamo alla riga
121
(in Blocco note selezionare
Modifica/Vai a...
), dove troviamo:
</tr></table>
.

Cancelliamo semplicemente il
</tr>
, lasciando quindi solo
</table>
. Questo è un errore presente nel codice generato automaticamente.

Ora passiamo ai link.

Alla linea
35
a
pages/alianti.html
sostituiamo
pages/alianti/index.html

Alla riga
52
al posto di
pages/cast.html
scriviamo
pages/castelli/index.html

Alla riga
74
al posto di
pages/egizi.html
scriviamo
pages/egizi/index.html

Alla riga
96
al posto di
pages/natura.html
scriviamo
pages/natura/index.html

Applicheremo lo stesso procedimento a tutte le sottogallery che presentano delle sezioni, in questo esempio vi è solo la gallery
natura
, che contiene al suo interno le categorie
fiori
e
fulmini
. Quindi, apriamo il file
index.html
all'interno della cartella
\webgallery\pages\natura
e

Alla riga
77
al posto di
</tr></table>
scriviamo
</table>

Alla riga
35
al posto di
pages/fiori.html
scriviamo
pages/fiori/index.html

Alla riga
57
al posto di
pages/fulmini.html
scriviamo
pages/fulmini/index.html

Volendo possiamo fare aprire tutte le sottogallery in una nuova pagina, aggiungendo l'attributo
target="_blank"
ad ogni link, in questo modo:

<A name=1 href="pages/alianti/index.html"
target="_blank"
>

Modificando tutti i link precedenti, otterremo il risultato cercato
;)

_Passo 4 : aggiungere i titoli delle sezioni

Volendo possiamo aggiungere per ogni link un attributo
title
, che farà spuntare il titolo della sezione sopra l'anteprima al passaggio del mouse, in questo modo:

<A name=1 href="pages/alianti/index.html" target="_blank"
title="Alianti"
>

Modificando tutti i link precedenti, otterremo il risultato cercato
;)

Altrimenti, in aggiunta oppure al posto di quest'ultima possibilità, si può aggiungere il titolo direttamente sotto l'anteprima. Vediamo in dettaglio.

Per ogni immagine di anteprima, si ripete la stessa struttura:

<td align=middle>

<table cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF" width="200">

<tr>

<td valign=top align=left><A href="pages/alianti/index.html" name=1 target="_blank" title="Alianti"><img src="thumbnails/alianti.jpg" height="138" width="200" border=1 style="border:1pt solid white" alt="alianti"></A><BR></td>

<td valign=top background="images/wh_rt.gif">

<img src="images/wh_top_rt.gif"><br></td>

</tr>

<tr>

<td width="200" background="images/wh_bot.gif">

<img src="images/wh_bot_lt.gif"><br></td>

<td valign=top>

<img src="images/wh_bot_corner.gif"><br></td>

</tr>

</table>

</td>

L'immagine è dentro ad una cella contenente a sua volta una tabella (segnate in
rosso
).

La prima riga (segnata col colore
verde
) è quella contenente l'immagine.

La seconda riga (segnata col colore
blu
), è quella contenente l'ombreggiatura inferiore.

Se scorriamo il codice della gallery principale troveremo 4 strutture di questo tipo, poiché vi sono 4 sottogallery.

Alla fine vi sarà un </tr> che chiuderà la riga della tabella nella quale sono contenute le anteprime.

Noi dovremo semplicemente aggiungere una riga a questa tabella.

Quindi dopo il </tr> (che dovrebbe essere alla riga 116) scriviamo:

<tr>
<td align="center" valign="top"><div class="content">Alianti</div></td>

<td align="center" valign="top"><div class="content">Castelli</div></td>

<td align="center" valign="top"><div class="content">Egizi</div></td>

<td align="center" valign="top"><div class="content">Natura</div></td>

</tr>

In questo modo, sotto ogni immagine aggiungiamo un'ulteriore cella contenente il titolo.

Volendo si può aggiungere anche una descrizione della categoria, basta aggiungere un campo "content", come in questo esempio (l'aggiunta è evidenziata in grassetto):

<tr>
<td align="center" valign="top"><div class="content">Alianti</div>
<div class="content">Alianti di tutti i tipi</div>
</td>

<td align="center" valign="top"><div class="content">Castelli</div>
<div class="content">Castelli sparsi per il mondo</div>
</td>

<td align="center" valign="top"><div class="content">Egizi</div>
<div class="content">Lo splendore dell'antico Egitto</div>
</td>

<td align="center" valign="top"><div class="content">Natura</div>
<div class="content">Meraviglie naturali</div>
</td>

</tr>

_Passo 5 : ulteriori personalizzazioni

Ovviamente vi sono infinite possibilità di personalizzare la galleria.

Per esempio si potrebbe voler cambiare la formattazione del testo oppure il colore del bordo delle anteprime.

Torniamo alla struttura vista in precedenza, che è fondamentale:

<td align=middle>

<table cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF" width="200">

<tr>

<td valign=top align=left><A href="pages/alianti/index.html" name=1 target="_blank" title="Alianti"><img src="thumbnails/alianti.jpg" height="138" width="200" border=1 style="
border:1pt solid white
" alt="alianti"></A><BR></td>

<td valign=top background="images/wh_rt.gif">

<img src="images/wh_top_rt.gif"><br></td>

</tr>

<tr>

<td width="200" background="images/wh_bot.gif">

<img src="images/wh_bot_lt.gif"><br></td>

<td valign=top>

<img src="images/wh_bot_corner.gif"><br></td>

</tr>

</table>

</td>

In grassetto è evidenziato il codice di nostro interesse.

Se vogliamo un bordo più grande, basterà cambiare la dimensione di 1pt in 2 o più pt (o px, meglio).

Se lo vogliamo di un altro colore, basterà scrivere al posto di
white
il codice esadecimale del colore scelto: per esempio
#0000FF
per il blu (un colore a caso...
:lol:
).

Un'ultima cosa
:P
, in fondo ad ogni file
index.html
si trova questo codice:

<div id="titleframe">

<div class="titleContent">

<div class="banner">

<div class="info"></div>

<div class="email"><a href="mailto:"></a></div>

</div>

</div>

</div>

Volendo lo si potrebbe utilizzare per fare un menu di navigazione, con il quale (al posto di aprire le gallery in nuove pagine) passare da una gallery all'altra.

Questo forse, nella prossima puntata...
:rolleyes:

_Conclusioni

Per il momento penso che basti così.

Si può vedere il risultato (e anche qualcosina in più
:P
) a
.

Spero di essere stato abbastanza chiaro ed esauriente, cmq se qualcuno ha dei problemi con l'html, chieda pure
;)

Ciaoooo

Anteros
:)

Share this post


Link to post
Share on other sites

grazie mat! ottimo tutorial!

ma poi come faccio ad uploadare la gallery ? ho cercato unpò ma ho visto che ti hanno lo stesso problema ...

conosci qualche free webhosting tanto per fare una prova ?

ciao

Share this post


Link to post
Share on other sites
ma poi come faccio ad uploadare la gallery ? ho cercato unpò ma ho visto che ti hanno lo stesso problema ...

conosci qualche free webhosting tanto per fare una prova ?

Di solito i provider danno la possibilità di fare un sito personale, mettendo quindi a disposizione uno spazio web gratuito, puoi provare con questo ;)

Ciaooo

Anteros :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.