Como muitos amigos perguntaram sobre como cortar fotos, e como esse problema pode ser grande ou pequeno, é absolutamente impossível explicá-lo claramente em uma ou duas frases, então darei um exemplo simples para ilustrar esse problema quando tiver tempo livre. tempo em casa hoje! OK, vamos começar:
passo 1: Abra o rascunho do design no PhotoShop, conforme mostrado abaixo
Selecione a ferramenta de corte no quadro de ferramentas e faça um corte ousado primeiro. Dicas: Corte uma grande área do bloco colorido em uma peça separadamente e mantenha-a o mais organizada possível na linha horizontal (você aprenderá mais sobre isso! questão na página de produção posterior) Sentimento) A imagem cortada é a seguinte:
passo 2: Selecione salvar arquivo para web... no PhotoShop para saída. Preste atenção na seleção de alguns parâmetros aqui:
Vamos dar uma olhada nas partes 1, 2 e 3 marcadas pela linha vermelha. Selecione a ferramenta de corte mostrada em 1, clique na imagem mostrada em 2 e selecione o valor da cor no local mostrado em 3. a cor é única, você pode escolher o menor valor possível. (Por que isso??) Resposta: Isso reduzirá bastante o tamanho do arquivo e, ao mesmo tempo, manterá melhor a cor da imagem; nele, clique em OK para gerar o arquivo. O arquivo aqui inclui uma pasta htm e imagens, conforme mostrado na figura:
Sua página está apenas pela metade neste ponto. Em seguida, crie o site no Dreamweaver:
etapa 3: Defina o site:
Dê um nome ao site no nome do site no lado esquerdo da imagem, como exemplo
Em seguida, selecione todas as pastas do site que acabamos de exportar na pasta raiz local abaixo após a construção do site, veremos no mapa do site:
(Por que construir um site?) Construir um site nos permite desenvolver um bom hábito, que é reunir os arquivos e pastas contidos em um site de maneira ordenada. Ao mesmo tempo, podemos facilmente mover o site para outros locais. . place sem reescrever o caminho do arquivo (claro, se você realmente não quiser construir um site, ninguém irá forçá-lo. Encontrei colegas assim em meu trabalho. Eles não estão acostumados a construir sites para páginas! . Claro, as consequências serão muitos problemas.)
Passo 4: Recriar a tabela de páginas (por quê?) Normalmente, o arquivo htm exportado diretamente no Photoshop não pode ser usado diretamente, porque alguns lugares precisam ser ajustados durante o uso real, como locais com texto dinâmico, precisamos adicioná-los à página. Se a página de entrada não usar imagens, as imagens deverão ser removidas. Se você remover as imagens indesejadas e adicionar o que deseja no htm gerado diretamente. , você descobrirá que a página ficará terrível e a página inteira poderá ser um caos total!
Ok, vamos primeiro analisar o arquivo htm exportado:
De acordo com a tabela desta página, criamos uma tabela com três linhas e uma coluna na nova página:
Observe que é muito importante definir os valores de cellpadding, cellpacing e border como 0 porque não queremos ver lacunas e desalinhamentos na imagem e depois inserir uma tabela com três linhas e duas colunas na primeira linha; e mescle a tabela de três colunas esquerda, conforme mostrado na figura:
Ao inserir uma tabela, você deve prestar atenção ao comparar o conteúdo do arquivo htm original e pensar por que está fazendo isso;
Em seguida, insira uma tabela com duas linhas e duas colunas na segunda linha, mescle a grade esquerda como acima e insira uma tabela de uma linha e cinco colunas na primeira linha da grade direita, conforme mostrado:
Por fim, insira uma tabela com três linhas e duas colunas na linha inferior e mescle os itens 1 e 2 da imagem:
Pronto, agora nossa tarefa é adicionar fotos e conteúdo à mesa. Não vou entrar em detalhes aqui (na verdade, já foi dito o suficiente!)
Também quero lembrar a todos que ao adicionar fotos e conteúdo, a mesa! unidade Os dois atributos de alinhar e valignar são muito importantes. Você não deve poupar esforços para usá-los para ajudá-lo a fazer as coisas. OK, pratique você mesmo!