Come costruire un Picture Show Galleria di immagini in Dreamweaver CS3

June 29

Come costruire un Picture Show Galleria di immagini in Dreamweaver CS3


A "esposizione", o "galleria di immagini," presenta fotografie in una pagina web portafoglio-like. Mentre gallerie di immagini possono avere molte configurazioni, un popolare display formato miniaturizzato le immagini lungo il lato, superiore o inferiore della pagina. Come l'utente fa clic ogni miniatura, un corrispondente versione full-size della fotografia display al centro della pagina. Dreamweaver CS3 supporta diversi modi per creare gallerie di immagini. Uno dei metodi più semplici e più comuni è usare un "frame". Un frame è un contenitore pagina web HTML composto da due o più "frames". Ogni frame viene visualizzata una singola pagina o un URL.

istruzione

Preparare le tue foto

1 Ridimensionare le foto nel software di elaborazione delle immagini. Avrete bisogno di due versioni di ogni immagine --- una versione full-size (per esempio, 400 per 300 pixel, o qualsiasi altra cosa funziona meglio per la forma e le dimensioni delle foto) e una versione di anteprima (ad esempio, 100 per 75 pixel) .

2 Impostare la risoluzione per ciascuna immagine per punti "72" (o pixel) per pollice (o "96" per i monitor ad alta definizione).

3 Salva ogni immagine in una sottodirectory della directory in cui si prevede di creare il tuo sito web galleria di immagini. Nome sotto-directory "immagini". Salvare le immagini come JPEG. Nome loro "foto1", "Foto2", e così via; nominare le miniature corrispondenti "thumb1," "thumb2", ecc

Creazione di Galleria di immagini in Dreamweaver

4 Aprire Dreamweaver, e quindi fare clic su "File" nella barra dei menu. Scegliere "Nuovo" per visualizzare la finestra di dialogo Nuovo documento.

5 Fai clic su "Pagina da campione" nella colonna di sinistra della finestra di dialogo, e quindi fare clic su "frame" nella colonna "Folder campione". Questo visualizza un elenco di frame di esempio nella terza colonna della finestra di dialogo. Ha scelto "Fixed sinistra."

6 Fai clic su "Crea". Dreamweaver visualizza il "tag Frame Attributi di accessibilità" finestra di dialogo. Fai clic su "OK". I telai sono denominati in base alla loro collocazione nella pagina. Il frame di sinistra si chiama "leftFrame," e il telaio principale si chiama "mainframe."

7 Fai clic su "File" sulla barra dei menu e scegliere "Salva tutto." Dreamweaver verrà chiesto di nominare tre file, uno dopo l'altro: ". Galleria" In primo luogo, il set di frame in sé --- il nome In secondo luogo, il telaio principale --- denominarla "Foto1." In terzo luogo, la sinistra cornice --- il nome "miniature".

8 Inserire "photo1.jpg" nel telaio principale (a destra), e quindi fare clic su "File" sulla barra dei menu e scegliere "Salva Frame."

9 Creare un nuovo file HTML nel frame principale per ogni foto e salvarla, in questo modo: Elimina "photo1.jpg" dal telaio principale. Inserisci "photo2.jpg" nel telaio principale. Fai clic su "File" sulla barra dei menu e scegliere "Salva frame con nome." Nome del file "Foto2" e salvarlo. Ripetere questa procedura per ciascuna delle vostre foto, nominando ogni file HTML con il nome di foto corrispondente.

10 Inserire le immagini in miniatura nel frame di sinistra. Posizionare le immagini in verticale nel telaio nell'ordine in cui li denominato --- "foto1" prima, "Foto2" seconda, etc.

11 Selezionare la prima miniatura. Vai al pannello Proprietà e digitare il nome del file e il percorso per la prima pagina di foto HTML full-size nel campo "Link", in questo modo: "images / photo1.html" (senza virgolette).

12 Fare clic su "Target" discesa nel pannello Proprietà e scegliere "mainframe." Questo dice il browser dell'utente per caricare photo1.html nel frame principale quando si fa clic sulla miniatura.

13 Ripetere i due passaggi precedenti per ciascuna della vostra miniatura e set di immagini full-size.

14 Fai clic su "File" sulla barra dei menu e scegliere "Salva Frame" per salvare "thumbnails.html."

15 Apri "gallery.html" in un browser per testare la vostra galleria di immagini.

Consigli e avvertenze

  • Se si preferisce inserire le miniature in tutta la parte inferiore o superiore della pagina, scegliere il frame appropriata dalla finestra di dialogo Nuovo documento, come ad esempio "fondo fisso" per la cornice delle miniature nella parte inferiore.
  • Quando si carica la galleria di immagini a un server web, assicurarsi di includere tutti i file HTML e il "immagini" sub-directory.