A " Picture Show ", ou " galeria de imagens ", apresenta fotografias em uma página da web portfolio -like. Enquanto galerias de imagens pode ter muitas configurações, um formato popular exibe imagens em miniatura ao longo da lateral , superior ou inferior da página. À medida que o usuário clica em cada miniatura , uma versão em tamanho real correspondente da foto é exibida no centro da página . Dreamweaver CS3 suporta várias formas de criar galerias de imagens . Um dos métodos mais fáceis e mais comuns é a utilização de um " conjunto de quadros. " Um conjunto de quadros é um recipiente página HTML que consiste em duas ou mais "frames ". Cada quadro exibe uma página individual ou URL. Coisas que você precisa
Adobe Dreamweaver CS3 ou mais tarde
Adobe Photoshop , a Apple iPhoto, o Paint do Windows , ou algum outro editor de imagem
Show Mais instruções
Preparando suas fotos
< br > 1
redimensionar as fotos em seu software de edição de imagem . Você vai precisar de duas versões de cada imagem --- uma versão em tamanho normal (digamos, de 400 por 300 pixels , ou o que funciona melhor para a forma eo tamanho de suas fotos ) e uma versão em miniatura ( por exemplo, 100 por 75 pixels ) .
2
Defina a resolução para cada imagem para pontos " 72 " (ou pixels ) por polegada (ou "96" para monitores de alta definição) .
3
Salve cada imagem em um sub- diretório do diretório onde você planeja criar sua galeria de imagens do site. Nomeie as "imagens ". Sub- diretórios Salve as imagens como JPEGs . Nomeá-los " foto1 ", " foto2 ", e assim por diante ; citar as miniaturas correspondentes " Thumb1 ", " thumb2 ", etc
criação de sua imagem Gallery em Dreamweaver
4
Abrir Dreamweaver e , em seguida, clique em "Arquivo " na barra de menu. Escolha "Novo" para exibir a caixa de diálogo Novo documento.
5
Clique em " Página de Exemplo " na coluna da esquerda da caixa de diálogo e clique em " conjunto de quadros " na coluna "Folder Sample" . Isso exibe uma lista de conjuntos de quadros de amostra na terceira coluna da caixa de diálogo . Escolheu "Fixed Esquerda ".
6
Clique em " Criar". O Dreamweaver exibe a caixa de diálogo "Quadro Tag Atributos de acesso " . Clique em " OK". Os quadros são nomeados de acordo com a sua colocação na página. O quadro à esquerda é chamada de " leftFrame ", eo quadro principal é chamado de " mainframe. "
7
Clique em "Arquivo " na barra de menu e escolha " Salvar tudo. " Dreamweaver solicitará que você citar três arquivos, um após o outro : " . Galeria " Primeiro , o próprio conjunto de quadros --- nomeá-la Em segundo lugar, o quadro principal --- nome " foto1 ". Em terceiro lugar, o quadro à esquerda --- nome " miniaturas".
8
Inserir " photo1.jpg " no principal (à direita) de quadros, e , em seguida, clique em "Arquivo " na barra de menu e escolha "Salvar Frame. "
9
Crie um novo arquivo HTML no quadro principal de cada foto e guardá-lo , assim: Delete " photo1.jpg " a partir do quadro principal. Inserir " photo2.jpg " para o quadro principal. Clique em "Arquivo " na barra de menu e escolha " Salvar quadro como ". Nomeie o arquivo " photo2 " e salvá-lo. Repita esse procedimento para cada uma de suas fotos , nomeando cada arquivo HTML com o nome da foto correspondente .
10
Insira suas imagens em miniatura no quadro à esquerda. Coloque as imagens na vertical no quadro na ordem em que os nomeou --- " foto1 " primeiro ", photo2 " segundo, etc
11
Selecione a primeira miniatura. Ir para o painel Propriedades e digite o nome do arquivo eo caminho para a primeira página HTML foto no tamanho completo no campo " Link" , como este: " images/photo1.html " ( sem aspas ) no
12.
Clique no "Target" drop-down no painel Propriedades e escolha " mainframe. " Isto diz o navegador do usuário para carregar photo1.html no quadro principal quando ela clica na miniatura .
13
Repita as duas etapas anteriores para cada uma de suas miniaturas e conjuntos de imagens em tamanho real .
14
Clique em "Arquivo " na barra de menu e escolha "Salvar Quadro " para salvar " thumbnails.html ".
15
Abra " gallery.html " em um navegador para testar sua galeria de imagens .
