1. Defina o site
1. Crie uma pasta em qualquer diretório raiz (presumimos que seja a unidade E aqui), por exemplo, nomeie-a como MyWeb.
***Nota: Todos os arquivos usados no site devem ter nomes em inglês.
2. Abra o Dreamweaver, selecione "Site - Novo Site" para abrir a caixa de diálogo. Insira o nome do site em Nome do site (chinês disponível) e selecione a pasta que você acabou de criar (E:web) na pasta raiz local. Então confirme.
***Observação: Ao abrir o Dreamweaver novamente, você encontrará automaticamente o site que acabou de criar. Se houver vários sites, você poderá selecioná-los no menu “Site - Abrir Site”.
2. Crie uma página
1. No espaço em branco na pasta local E:MyWeb, clique com o botão direito e selecione "Novo Arquivo" para criar uma página. O nome de arquivo padrão é untitled.htm. htm significa que este arquivo de página da web é um arquivo HTML estático. Renomeie-o como index.htm.
***O nome da primeira página do site geralmente é index.htm ou index.html. Você mesmo pode escolher os nomes de outras páginas.
2. Clique duas vezes em index.htm para entrar no estado de edição da página. Digite o nome da página da web na caixa de título, clique com o botão direito e selecione Propriedades da página para abrir a janela “Propriedades da página”. Aqui você pode definir o título, a cor de fundo ou a imagem traseira do site e a cor do hiperlink (geralmente o padrão é suficiente) e manter todo o resto como padrão.
3. Neste momento, o cursor está no canto superior esquerdo e você pode inserir uma frase, como “Bem-vindo à minha página inicial”. Selecione o texto, use o menu "Janela/Propriedades" para abrir o painel de propriedades, selecione o tamanho do texto como 6, centralize o texto e use alguns retornos de carro na frente do texto para posicioná-lo no meio do texto. página.
4. Para selecionar uma fonte, selecione o último item em Fonte: Editar lista de fontes. Em seguida, selecione o sinal + na caixa de diálogo, selecione uma fonte que precisa ser adicionada à lista de fontes na coluna "Fontes disponíveis" e clique no botão do meio para adicioná-la.
***Os caracteres chineses mais comumente usados em páginas da web são as fontes Song. Não adicione fontes especiais à lista para uso, pois outras pessoas não poderão vê-las se não estiverem instaladas em seus computadores. Se precisar usá-lo, transforme-o em uma imagem antes de usá-lo.
***A maneira de inserir espaços em uma página da web é ajustar o método de entrada para largura total.
***A maneira de quebrar linhas em uma página da web é: shift+Enter. Basta pressionar Enter para alterar os parágrafos.
3. Adicione imagens à página
1. No espaço em branco na pasta local E:MyWeb, clique com o botão direito e selecione "Nova Pasta". Isso cria uma pasta e a utiliza para colocar imagens. ou As imagens estão OK.
2. Utilize o menu “Janela/Objeto” para abrir o painel de objetos, clique em “Inserir Imagem”, e selecione a imagem a ser inserida na caixa de diálogo. Se aparecer uma caixa de diálogo: "Deseja copiar este arquivo para a pasta raiz?", você deve selecionar "Sim" e salvá-lo na pasta que acabou de criar.
3. Selecione a imagem e abra o painel de propriedades, onde você pode nomear a imagem, redefinir a altura e largura da imagem e arrastar os pontos nos cantos da imagem para alterar o tamanho. Mantenha pressionada a tecla Shift e arraste os pontos dos cantos para esticar a imagem enquanto mantém a proporção. Para restaurar o tamanho original, clique no botão “Redimensionar” no canto inferior direito.
4. "Link" pode inserir diretamente o endereço aqui. “Substituição” é a descrição da imagem, ou seja, o texto exibido quando o mouse aponta para a imagem; “Borda” é a largura da borda da imagem e “Alinhamento” é o método de alinhamento.
4. Adicione um hiperlink
1. Adicione um link ao texto.
Por exemplo, digite “Meu Artigo” na página, selecione-o, abra o painel de propriedades e, na caixa “Link”, selecione a página à qual deseja vincular. Na próxima caixa de “destino”, geralmente usamos self para abrir uma nova janela em vez da janela atualmente aberta ou selecionamos em branco para abrir uma nova janela;
2. Adicione um link à imagem da mesma forma que o link ao texto acima. Insira a imagem e selecione-a na caixa de link no painel de propriedades.
****As imagens podem criar vários links diferentes. Veja como:
Existem alguns gráficos no item "Mapa" no painel de propriedades. Por exemplo, clique no quadrado, o cursor muda para uma cruz e desenhe uma zona quente retangular azul na imagem. Neste momento, você pode definir o link. endereço para esta zona ativa no painel de propriedades, o ponteiro do mouse será exibido. Da mesma forma, ao configurar um ponto de acesso usando um círculo, você pode definir outros links para a imagem.
3. Adicione um link de e-mail Selecione o texto ou imagem ao qual deseja adicionar um link de e-mail, abra o painel de propriedades e insira o endereço de e-mail na caixa "Link". O formato é o seguinte: mailto: endereço de e-mail. Observe que não há espaços entre eles.
4. Se o link for para um arquivo que não pode ser aberto pelo navegador, como exe, Zip, etc., quando o visualizador clicar no link, o download do arquivo ou a função de reprodução online será realizada.
5. Uso de tabelas
1. Clique em Inserir/Tabela para abrir o painel de tabelas para configurações. O número de linhas, colunas, largura, bordas, etc., "preenchimento de células" é a distância entre o interior da célula e o conteúdo; "espaçamento de células" é a distância entre as células e a unidade é pixels;
2. Após inserir a tabela, clique na borda da tabela para selecionar a tabela inteira. Então você pode fazer várias configurações no painel de propriedades abaixo.
3. Mova o cursor para uma das células e o painel de propriedades que você vê agora é o painel de propriedades da célula. Você também pode realizar diversas operações nas células. Como cor de fundo, imagem de fundo, borda, mesclagem, divisão, etc.
6. Outras operações em tabelas
- Princípio de confecção de tabelas de linhas finas:
1. Selecione a tabela inteira e defina seu fundo como preto (esta cor é a cor das linhas da tabela).
2. Selecione todas as células e defina seu fundo como branco.
2. Formatar tabelas automaticamente 1. Primeiro crie uma tabela e depois selecione-a.
2. Selecione Comando/Formatar tabela no menu. Ou seja, você pode escolher alguns estilos de tabela predefinidos.
Sany Pixel Divider 1. Insira uma tabela com 1 linha e 1 coluna, largura de 200 pixels e borda e margem de 0.
2. Selecione a tabela, defina a altura da tabela para 1 pixel e defina uma cor de fundo (ou seja, a cor de linha desejada).
3. Mude para a janela de código e design e exclua o código.
7. Use tabelas para construir uma página completa
– o topo da página web (geralmente incluindo ícones, anúncios, menus de navegação)
1. Crie uma tabela com 1 linha e 2 colunas, largura de 760 pixels e borda e margem de 0.
2. Selecione a mesa, defina a disposição para alinhamento central e a cor de fundo para #3366CC.
3. Posicione o cursor na célula esquerda, defina sua disposição horizontal para alinhamento à esquerda e sua disposição vertical para alinhamento superior e, a seguir, insira uma imagem. Geralmente, o ícone do site, ou seja, o logotipo é inserido aqui.
4. Posicione o cursor na célula à direita, defina sua largura para 500, alinhe o arranjo horizontal ao centro e o arranjo vertical ao meio e, a seguir, insira uma imagem, geralmente um anúncio de página da web, ou seja, um bandeira.
5. Posicione o cursor após a tabela que você acabou de preencher e clique em Inserir/Tabela para criar uma tabela com 1 linha e 1 coluna, largura de 760 pixels e borda e margem de 0.
6. Selecione a tabela que você acabou de criar, defina a disposição para alinhamento central e a cor de fundo para #005173.
7. Insira várias imagens na tabela, uma após a outra, como menus da barra de navegação.
2. A parte central da página da web (lista de colunas à esquerda, notícias do site no meio, lista de colunas à direita)
1. Após a tabela da barra de navegação, clique em Inserir/Tabela para criar uma tabela com 1 linha e 3 colunas, largura de 760 pixels e borda e margem de 0. E defina o modo de organização para alinhamento central e a cor de fundo para #FFFFFFFF.
2. Posicione o cursor na célula esquerda, defina sua largura para 18%, alinhe-o horizontalmente ao centro e alinhe-o verticalmente ao topo, a seguir insira uma imagem e uma barra de navegação.
3. Posicione o cursor após a imagem que acabou de inserir, clique em Inserir/Tabela e insira uma tabela com 12 linhas e 1 coluna e largura de 90%. Defina o espaçamento das células como 1 e a cor de fundo como #CCCCCC.
4. Coloque o cursor na primeira célula da tabela, defina sua altura como 20 e sua cor de fundo como #FFFFFF. Inserir/Imagem, insere um pequeno ponto na frente do texto de navegação. Defina as outras 11 células de forma semelhante, para que a lista de classificação das colunas à esquerda seja concluída.
5. Coloque o cursor na célula do meio da tabela principal, defina sua largura para 66%, alinhe-o horizontalmente ao centro e alinhe-o verticalmente ao topo e insira /image para inserir uma barra de navegação.
6. Posicione o cursor após a imagem, clique em Inserir/Tabela e insira uma tabela com 4 linhas e 1 coluna e largura de 95%. Defina o espaçamento das células como 1 e a cor de fundo como #CCCCCC.
7. Coloque o cursor na primeira célula da tabela, arraste o mouse para selecionar todas as 4 células, defina a altura como 60 e a cor de fundo como #FFFFFF.
8. Posicione o cursor na célula do lado direito da tabela principal, defina sua largura para 16%, alinhe horizontalmente ao centro e alinhe verticalmente ao topo, use Inserir/Imagem e insira uma barra de navegação.
9. Posicione o cursor após a imagem, clique em Inserir/Tabela e insira uma tabela com 7 linhas e 1 coluna e largura de 90%. Defina o espaçamento como 1 e a cor de fundo como #CCCCCC.
10. Mantenha pressionada a tecla Ctrl, use o mouse para clicar nas células 1, 3, 5 e 7 da tabela que você acabou de inserir e defina sua altura para 55 e sua cor de fundo para #FFFFFF.
11. Selecione as células 2, 4 e 6, defina sua altura como 6 e sua cor de fundo como #FFFFFF.
12. Mude para a janela do código-fonte e exclua os símbolos de espaço " " nas células 2, 4 e 6.
A parte inferior de três páginas da web (geralmente incluindo informações sobre direitos autorais e outros conteúdos relacionados)
1. Coloque o cursor na tabela principal e clique em Inserir/Tabela para criar uma tabela com 2 linhas e 2 colunas, largura de 760 pixels e borda e margem de 0.
2. Selecione a mesa, defina a disposição para alinhamento central e a cor de fundo para #3366CC.
3. Coloque o cursor na célula esquerda da linha 1 da tabela, defina sua largura para 50%, arranjo horizontal para padrão, arranjo vertical para linha de base, cor de fundo para #FFFFFF e insira as informações de direitos autorais. o que você quiser.
4. Coloque o cursor na célula direita da linha 1 da tabela, clique em Inserir/Imagem, insira uma imagem arredondada, digite a palavra Email depois dela e defina seu tamanho e cor para 1 e #FFFFFF.
5. Inserir/Formulário Objeto/Campo de Texto, insira um campo de texto, a largura pode ser arbitrária.
6. Inserir/Imagem, insira uma imagem GO.
7. Defina as propriedades da página. Clique no menu Editar/Propriedades da página, insira um título na coluna Título, selecione a imagem de fundo e defina a borda superior como 0.
*** Colocar a página inteira da web em partes diferentes e combiná-las em tabelas diferentes também pode acelerar o tempo que o navegador leva para ler a página. ; Como o navegador exibe o conteúdo depois de ler a tabela inteira, é melhor não enquadrar a tabela inteira.
8. Use a tabela de layout para construir uma página completa
1. Clique em Inserir/Layout e o botão de visualização de layout interno mudará para o estado de visualização de layout (o padrão é visualização padrão). Você também pode usar View/Table View/Layout View no menu para entrar.
2. Primeiro clique no botão Desenhar tabela de layout e, em seguida, crie uma tabela de layout na página como um desenho.
3. Assim como no exemplo anterior, desenhe a mesa grande na parte superior, depois no meio e depois na parte inferior da página da web.
4. Clique no botão Desenhar célula de layout novamente e desenhe a célula de layout na tabela de layout já desenhada.
5. Retorne à visualização padrão, insira pequenas tabelas aninhadas nas tabelas divididas, refine a página e complete o design da página inteira.
****Tenha cuidado ao colocar a página inteira em uma tabela de layout grande, pois a velocidade de navegação dessa página da web será muito lenta. Várias tabelas de layout devem ser divididas de acordo com o layout e conteúdo da página e, em seguida, células de layout devem ser inseridas nelas.
9. Utilização de camadas
1. Clique em Inserir/Camada. Você também pode clicar no ícone e arrastar o mouse para criar uma camada.
3. Selecione a camada criada e observe o painel de propriedades. Basta usar o "Número da camada" e o "Rótulo" padrão. O "número da camada" é necessário para programação, mas geralmente não o usamos agora. “Topo” é a distância da borda superior da página; “Esquerda” é a distância da borda esquerda. O “eixo z” é a ordem das camadas, com números maiores empilhados sobre números menores.
****Se nenhuma cor for definida, a camada será transparente.
4. Clique na pequena caixa no canto superior esquerdo da camada intermediária para arrastar a camada e o tamanho também pode ser ajustado.
5. Na coluna "estouro", quando o texto ultrapassa o tamanho da camada, visível (o excesso ainda é exibido), oculto (o excesso fica oculto), rolagem (a barra de rolagem é exibida independentemente de ser excedido), automático (há A barra de rolagem só aparece quando é excedido).
6. Clique no menu Janela/Outros/Camada e a janela de gerenciamento de camadas aparecerá. Lá você pode modificar o nome da camada e o valor do eixo Z ou clicar no ícone do olho para tornar a camada visível ou invisível. Também existe uma opção para evitar sobreposições.
7. Alinhamento de camadas. Mantenha pressionada a tecla Shift e selecione várias camadas ao mesmo tempo. Em seguida, use Modificar/Alinhar, usando as opções aqui.
8. Camada de aninhamento. ⑴Primeiro insira uma camada no documento. ⑵ Coloque o cursor dentro da camada e continue a inserir uma camada para obter uma camada aninhada. ⑶A parte interna é chamada de camada filha e a parte externa é a camada pai. A ordem do eixo Z é a mesma. Quando você arrasta a camada pai, as camadas filhas também se movem umas em relação às outras. Quando você move uma camada secundária, a camada principal não se move com ela.
10. Entenda a linha do tempo
1. Clique em Inserir/Camada no menu para inserir uma camada.
2. Insira uma imagem na camada, como a imagem de um avião. (A imagem aqui também pode ser uma pequena imagem .gif animada)
3. Clique em Janela/Outros/Linha do tempo no menu para abrir a janela Linha do tempo.
4. Selecione a camada criada na página, pressione e segure o ícone da pequena caixa no canto superior esquerdo da camada com o mouse e arraste a camada para o primeiro quadro da linha do tempo. Neste momento, uma linha do tempo com 15 quadros é criada automaticamente.
5. Selecione o quadro 1 na linha do tempo, arraste a camada da página para o canto superior esquerdo da página, onde a animação começa.
6. Selecione o quadro 15 na linha do tempo e arraste o quadro para qualquer comprimento, como 30 quadros.
7. Selecione o 30º quadro e arraste a camada para o canto inferior direito da página. Neste momento, a janela exibe a trajetória do movimento da camada do 1º ao 30º quadro. (O movimento é uma linha reta neste momento)
8. Você pode clicar no 15º quadro, clicar com o botão direito e selecionar “Adicionar quadro-chave”. Com o 15º quadro selecionado, arraste a camada para a parte central e inferior da página.
9. Verifique o item "Reprodução automática".
11. Faça um quadro de avisos
1. Insira uma camada na página e defina um plano de fundo para a camada como a moldura do quadro de avisos.
2. Em seguida, insira uma camada aninhada na camada criada e mova a camada aninhada abaixo da camada pai.
3. Insira o texto na camada aninhada e centralize-o.
4. Abra o painel Timeline e adicione a subcamada como um objeto ao painel.
5. Crie um caminho ascendente para a camada filha e mova-o acima da camada pai.
6. Arraste o último quadro-chave para aumentar o tempo de animação e marque "Autoplay" e "Loop".
7. Selecione a camada pai e defina a propriedade "overflow" como "oculta" em seu painel de propriedades.
12. Use animação flash na página
1. Clique no botão Flash em Inserir para inserir uma animação na página. Você também pode selecionar o menu Inserir/Mídia/Flash para concluir esta etapa.
2. Selecione a animação inserida e observe o painel de propriedades. Aqui você pode definir sua largura e altura ou alterar o tamanho arrastando.
3. Você pode clicar em “Play” aqui para visualizar a animação.
13. Torne a animação em flash inserida transparente
1. Quando já existe um plano de fundo na página da web, ou você deseja inserir uma animação em flash em uma imagem, e a própria animação em flash também tem uma cor de fundo, isso afetará a aparência , então precisamos torná-lo uma animação transparente.
2. Por exemplo, insira uma imagem na página.
3. Insira uma camada na imagem e insira a animação em flash necessária na camada.
4. Selecione a animação em flash e clique no botão "Parâmetros" no painel de propriedades.
5. Digite "wmode" na caixa esquerda de "Parâmetros". Digite “transparente” na caixa “Valor” à direita.
14. Reproduzir som na página
1. Depois de completar a página inteira, se você quiser adicionar música de fundo à página, observe que a música de fundo geralmente é um arquivo *.midi. Esses arquivos de som são muito pequenos e fáceis de baixar. rapidamente. Outros formatos não são adequados como música de fundo.
2. Além de todas as tabelas da página, (observe que apenas este item é exibido na barra de seleção de rótulos no canto inferior esquerdo da janela de edição neste momento, ou clique no canto inferior esquerdo para garantir que este comportamento seja adicionado para a página inteira). Clique no botão "+" na janela de comportamento (ou use o menu Janela/Comportamento para abrir a janela de comportamento).
3. Selecione “Reproduzir som” no menu pop-up. Abre uma caixa de diálogo.
4. Use “Browse” nesta caixa de diálogo para selecionar o som que deseja reproduzir e confirme.
5. Neste momento, o painel de comportamento exibe automaticamente o evento como onload e a ação como reprodução de som. Clique nesta linha e um botão aparecerá no meio. Clique no botão para definir o evento sob o qual este som será reproduzido. Você pode escolher "Mostrar Eventos"/"IE5.0.
6. Geralmente usamos Onload (quando a página é carregada), OnClick (clique com o mouse), OnMouseOver (mova o mouse sobre o objeto), OnUnload (quando a página é fechada), etc.
7. Este comportamento também pode ser definido em imagens e links de texto. Antes de reproduzir o som no link de texto, primeiro adicione um link vazio ao texto, ou seja, selecione o texto e insira o símbolo “#” na caixa do link.
15. Janela pop-up
1. Primeiro crie uma página (como a.htm) para ser exibida em uma janela pequena. Como a janela pop-up não pode ser muito grande, o conteúdo deve ser menor.
2. Abra uma página criada, mova o cursor para fora de todas as minhas tabelas na página, clique no botão "+" na janela de comportamento e selecione "Abrir janela do navegador" no menu pop-up.
3. Insira as configurações correspondentes na caixa de diálogo. A URL a ser exibida é a.htm. A largura e a altura da janela são determinadas por você, em pixels. Verifique todos os parâmetros nas propriedades conforme necessário.
4. Após concluir as configurações, clique em “OK”. Neste momento, o comportamento de abertura da janela de navegação será exibido na janela de comportamento. A condição de disparo é Onload. Se isso não for necessário, defina você mesmo.
5. Este comportamento também pode ser definido em imagens e links de texto. .
6. Você pode usar este método para expressar boas-vindas ao visitante na abertura, anúncio do site, despedida na saída, etc.
16. Controle as informações da barra de status
1. Abra a página e selecione uma imagem.
2. Clique no botão "+" na janela de comportamento e selecione Definir texto/Definir texto da barra de status.
3. Na coluna "Mensagem" da caixa de diálogo, insira as palavras que precisam ser exibidas, como uma introdução a esta imagem.
4. Você pode definir a condição de disparo do comportamento para OnMouseOver (o mouse se move sobre o objeto), para que quando o mouse passar sobre esta imagem, informações relevantes apareçam na barra de status.
5. Se você precisar que esta mensagem desapareça após a remoção do mouse, use esse comportamento novamente, não escreva nada na coluna "Mensagem" e altere a condição de acionamento para OnMouseOut (mouse removido).
6. Este comportamento também pode ser definido em um trecho de texto. Ou você pode configurá-lo na página inteira.
17. Informações pop-up
1. Abra uma página criada e clique no item no canto inferior esquerdo. Clique no botão “+” na janela de comportamento e selecione o item “Informações pop-up” no menu pop-up.
2. Digite a mensagem que deseja exibir na coluna "Mensagem" da janela de configurações.
3. Se a condição de disparo estiver definida como Onload (quando a página for carregada), ela poderá ser usada como uma mensagem de boas-vindas para abrir a página. Se definido como OnUnload (quando a página for fechada), poderá ser usado como uma mensagem de despedida quando o usuário fechar a página.
4. Você também pode definir uma mensagem pop-up em um determinado parágrafo do texto. Por exemplo, se você não quiser que outras pessoas copiem um trecho de texto, selecione o texto inteiro. Observe que <P> é exibido no canto inferior esquerdo, que é um parágrafo.
5. Em seguida, faça o mesmo e insira declarações como direitos autorais na mensagem. Basta definir a condição de acionamento como OnBeforeCopy (acionado quando o botão direito é pressionado) ou OnCopy (acionado quando o botão direito é pressionado para copiar).
18. Botão de imagem dinâmica
1. Prepare duas imagens do mesmo tamanho O método comum é usar uma como foto em escala de cinza e outra como foto colorida. Ou um com botões côncavos e outro com botões em relevo.
2. Exemplo: Insira uma tabela com 3 linhas e 1 coluna e defina a largura para 180 pixels.
3. Coloque o cursor na primeira linha e insira uma imagem em tons de cinza.
4. Insira o endereço a ser vinculado na coluna “Link” do painel de propriedades e adicione um nome à imagem, como tu1.
5. Clique no botão “+” na janela de comportamento e selecione “Trocar imagem” no menu pop-up.
6. Neste momento, a imagem a ser trocada é exibida na coluna “Imagem”, e a seguir a imagem trocada é selecionada na coluna “O arquivo original do templo é”.
7. Existem dois parâmetros abaixo, "Pré-carregar imagem" e "Restaurar imagem quando o mouse deslizar", ambos devem ser selecionados.
8. Crie dois outros botões dinâmicos da mesma maneira.
19. Layout de páginas com molduras
As molduras consistem em duas partes principais - conjuntos de molduras e molduras individuais.
1. Clique na moldura inserida para exibir os 13 estilos de moldura definidos. Tomemos como exemplo a estrutura superior-médio-inferior.
2. Clique no ícone da estrutura de quadros “Top-Middle-Bottom”. Neste momento, dois frames, superior e inferior, são inseridos na página, dividindo a página inteira em três partes. Inserimos "superior" em cima, "médio" no meio e "inferior" em baixo.
3. Salve-o primeiro. Clique em Arquivo/Salvar tudo no menu. Neste momento, primeiro salve o arquivo do conjunto de quadros e você mesmo poderá modificar o nome, como kuangjia.htm. As outras páginas do conjunto de molduras serão salvas separadamente. Ao salvar a página correspondente, esta parte será enquadrada com uma linha pontilhada, para que a parte acima possa ser salva como shang.htm. A parte inferior é salva como xia.htm. A parte do meio é salva como zhong.htm.
4. Até agora, salvamos quatro páginas, ou seja, o conjunto de molduras e as páginas superior, intermediária e inferior que compõem o conjunto de molduras. Portanto, na verdade, esse frame é composto por quatro páginas, portanto o uso do frame diminuirá a velocidade de navegação do usuário.
5. Clique em Janela/Outros/Molduras para abrir o painel de molduras. Clique em um quadro aqui para selecioná-lo. Quando um quadro é selecionado, uma linha pontilhada aparece no quadro correspondente na janela de edição.
6. Por exemplo: selecione o quadro superior acima e as propriedades do quadro acima serão exibidas no painel de propriedades. Selecione também o quadro intermediário e o quadro inferior, e você também pode definir suas propriedades separadamente.
7. Na janela de edição, coloque o mouse na borda entre os dois quadros. O cursor mudará para uma seta para cima e para baixo. Neste momento, clique na borda para selecionar todo o conjunto de quadros.
8. Neste momento, as propriedades de todo o grupo de quadros aparecem no painel de propriedades. Aqui você pode definir se o conjunto de molduras possui bordas, largura e cor, etc. Mas o mais importante é que você pode definir o tamanho de cada quadro no quadro definido aqui.
9. Selecione o quadro superior no ícone direito do painel de propriedades, defina seu comportamento para 80 pixels e sua borda para 0.
10. Selecione o quadro abaixo e defina a altura da linha para 30 pixels e a borda para 0.
11. Selecione o quadro intermediário, defina a altura da linha como 1 e a unidade como relativa. (Relativo significa: a proporção da linha atual em relação a outras linhas. Definir como 1 significa ocupar todo o espaço restante da janela de navegação, exceto a parte superior e inferior.
12. Exemplo: Coloque o cursor em topFrame, clique com o botão direito e selecione Propriedades da página e defina a cor de fundo para #FF6600. Em seguida, insira/tabela, insira uma tabela com 1 linha e 2 colunas e a margem da borda é 0. Defina a largura da primeira célula para 116 pixels e insira uma imagem. Defina o alinhamento horizontal da segunda célula para o centro e o alinhamento vertical para baixo e, a seguir, insira as palavras “Leão”, “Capricórnio” e “Gêmeos” em sequência.
13. Coloque o cursor no quadro central mainFrame, clique com o botão direito e selecione Propriedades da página e defina a cor de fundo como #FFFFCC. Em seguida, insira uma imagem grande.
14. Coloque o cursor no bottomFrame, clique com o botão direito e selecione Propriedades da página para definir uma imagem de fundo.
15. Faça três páginas adicionais como as páginas a serem vinculadas por “Leão”, “Capricórnio” e “Gêmeos”.
16. Selecione “Leo”, defina a página a ser vinculada nas propriedades, e a seguir selecione “mainframe” em “Target”, ou seja, o conteúdo será exibido no frame intermediário.
17. Defina também os links para “Capricórnio” e “Gêmeos”.
20. Menu de salto
1. Clique em Inserir/Objeto de formulário/Menu de salto no menu principal. Você também pode usar o ícone do menu de salto em Inserir/Formulário para abrir a janela de configuração do menu de salto.
2. Primeiro, insira as palavras “Selecione o site relevante” na coluna “Texto”. Em seguida, clique no botão "+" na janela. Neste momento, existe uma opção adicional no menu. Esta opção não possui link e é usada apenas como texto descritivo para o menu de salto.
3. Insira o site desejado na coluna de texto, como "Sina" e, a seguir, insira o endereço do link do site http://www.sina.com.cn na coluna "Ao selecionar, vá para URL" neste momento. , o item de menu Existe outra opção na coluna, esta opção corresponde ao endereço do link de uma rede.
4. Use o mesmo método para adicionar outras opções e links correspondentes ao menu. Você também pode usar os botões “para cima” e “para baixo” para ajustar sua ordem.
5. Não selecione a opção "Inserir botão Go após menu" na janela de configurações. Selecione o item “Selecionar o primeiro item após alterar o URL”, para que após usar o menu de salto para ir para uma determinada página, se você retornar à página do menu de salto, o menu de salto da página ainda exibirá o primeiro item por conteúdo padrão.
6. Clique em “OK” após concluir as configurações.
****Como o menu de salto é um formulário, o formulário (área pontilhada em vermelho) é inserido primeiro e, em seguida, o menu suspenso é inserido no formulário.
7. Se desejar modificar as opções, você pode selecionar o menu suspenso na página. Neste momento, clique em "Listar valor" no painel de propriedades para modificar vários conteúdos.
8. Quando o menu de salto é selecionado, o comportamento também aparece na janela de comportamento. Clique duas vezes no comportamento para entrar na janela de configurações e redefini-lo.
9. Se o primeiro item em “Itens de menu” for um link em vez de um prompt conforme mencionado acima, selecione “Inserir botão Ir após menu” em “Opções”. Adicione um botão "Ir".
21. Usando plug-ins (extensão de função do Dreamweaver)
1. Primeiro baixe os plug-ins necessários. O exemplo aqui é o Animate Browser Window. Este é um plug-in que altera dinamicamente o tamanho da janela. Abra o Dreamweaver Extension Manager e instale o plug-in baixado.
2. Inicie o Dreamweaver, na página criada, clique com o botão direito no canto inferior esquerdo <body>, clique no botão "+" na janela de comportamento, selecione "Animate Browser Window" e faça as configurações correspondentes. Aqui, a altura e a largura são definidas como 0 antes da janela ser aberta e para preencher a tela após a abertura. A condição de disparo é onLoad.
22. Legendas contínuas
1. Posicione o ponto de inserção do cursor onde deseja inserir legendas contínuas.
2. Clique no “Seletor de tags” no painel de inserção.
3. Selecione a marca de seleção e clique no botão "Inserir". Em seguida, feche o "Seletor de tags".
4. Mude para visualização de código. Coloque o ponto de inserção do cursor entre as duas marcas de seleção.
5. Selecione "Janela"/"Inspetor de tags". Vários usos de tags podem ser definidos no Tag Inspector.
6. Clique na seta suspensa no lado direito do item de configuração de comportamento e selecione o método de movimento do conteúdo da legenda de rolagem. Os significados das três opções são: Alternativo: o conteúdo rola em direções opostas. Rolar: o conteúdo rola na mesma direção. Slide: o conteúdo para de rolar quando toca a borda da legenda.
7. O atributo de direção define a direção de rolagem do conteúdo da legenda. As quatro opções significam: para baixo: movimento descendente. Esquerda: mova para a esquerda. Direita: Mova para a direita. Para cima: movimento ascendente.
8. O atributo scrollamount define a velocidade de rolagem das legendas. Geralmente definido como 1.
9. O atributo scrolldelay define o tempo de pausa quando o conteúdo da legenda é rolado, em milissegundos. Se quiser que a rolagem pareça suave, o valor deve ser o menor possível. No exemplo, está definido como 1 milissegundo.
10. O atributo width define a largura das legendas contínuas. Isso é arbitrário, por exemplo, definido como 300.
11. O evento onMouseOver define a ação quando o mouse se move para rolar as legendas e geralmente é definido para interromper a rolagem. O evento onMouseOut define a ação quando o mouse sai da rolagem das legendas e geralmente é definido para iniciar a rolagem. Esses dois itens não podem ser selecionados e só podem ser inseridos manualmente. Digite "this.stop();" depois de onMouseOver e digite "this.start();" depois de onMouseOut.
12. O atributo style define o estilo do conteúdo da legenda. No exemplo, para definir o tamanho do texto da legenda, você também precisa inserir manualmente "font:12px;".
13. O atributo loop define o número de vezes que o conteúdo da legenda é rolado. O valor padrão é ilimitado. "-1" também é infinito.
14. Todos os códigos: conteúdo de legenda contínua
23. Crie uma folha de estilo CSS
1. Insira algum texto na página da web.
2. Abra o painel "Estilo CSS" ou use "Janela/Estilo CSS" para abri-lo.
3. Existem quatro botões na parte inferior do painel, nomeadamente Adicionar Estilo, Novo Estilo, Editar Estilo e Excluir Estilo.
4. Clique em “Novo estilo” para abrir a caixa de diálogo. Insira um nome e observe que há um ponto final antes do nome. Por exemplo, nomeie-o como .zi (nomes chineses não são aceitáveis). Tipo: Crie um estilo personalizado, definido em: Somente neste documento.
5. Neste momento, abra outra caixa de diálogo, selecione "Tipo" na categoria à esquerda e defina a fonte para Song Dynasty à direita, o tamanho para 14 pixels e qualquer cor. Então tudo bem.
6. Selecione o texto na página e clique em Style.zi na janela. Neste momento, o estilo CSS é aplicado a este texto.
7. Se desejar modificar o estilo CSS que acabamos de definir, você pode clicar nele e depois clicar no botão Editar estilo abaixo.
24. Crie uma folha de estilo de link dinâmico
1. Clique na caixa de diálogo "Novo estilo CSS", selecione "Somente para este documento" na coluna "Definido em" e selecione "Usar seletor CSS" na coluna "Tipo".
2. Quando o tipo de folha de estilo seleciona "Use seletor de CSS", o nome do menu suspenso muda para "Seletor", indicando que o conteúdo de entrada é um seletor CSS. o link dinâmico.
A: Link - o estado normal do hiperlink;
A: Passe o mouse - o estado quando o cursor se move para o hiperlink;
3. Defina esses estados separadamente. (laranja).
4. Use o mesmo método para definir a: visitado, defina -o como sublinhado e defina a cor como #ffff00 (amarelo).
5. Próximo conjunto A: Passe o mouse, defina -o para ser sublinhado e defina a cor como #ff6600 (laranja).
6. Não há necessidade de definir A: ativo, ele dependerá automaticamente de A: Passe o Mirse.
7. Digite uma frase na página da web e defina seu link para "#" no painel Propriedades. É isso.
**** NOTA: Deve ser definido na ordem de A: Link, A: Visitado, A: Passe o Murachado e A: Ativo, caso contrário, o efeito esperado não ocorrerá.
Se precisarmos de dois ou mais efeitos de link em uma página, podemos usar o seguinte método:
1. Clique no botão Novo Estilo, selecione "Use o seletor CSS" para o tipo de estilo, digite diretamente A.Link2: Link na coluna "Seletor" e defina A.link2: Link como vermelho sem sublinhado.
2. Continue definindo os dois estilos a seguir. Digite os nomes diretamente e defina -os como A.Link2: visitado, sem sublinhado no roxo. A.Link2: Passe o mouse, azul e sublinhado.
3. Nesse momento, existe um estilo personalizado chamado Link2 na opção "CSS Style".
4. Digite um parágrafo na página, adicione um link #, selecione o link e clique em Style Link2 na janela da folha de estilo para aplicar esse estilo ao link.
5. O mesmo método pode ser usado para criar diferentes formatos de link na mesma página.
**** Para manter um certo estilo, não é aconselhável criar muitos estilos de link na mesma página.
25. Folha de estilo externo
*** Aplique a mesma folha de estilo em páginas diferentes.
1. Crie uma nova folha de estilo, dê um nome e selecione "Criar estilo personalizado" para o tipo e selecione "Novo arquivo de lençol de estilo" para definição.
2. Após a confirmação, abra a janela para salvar a folha de estilo externo. Em seguida, basta salvá -lo no site local.
3. Nesse momento, você pode ver que um novo arquivo de folha de estilo foi adicionado na janela da folha de estilo e o sufixo do arquivo é CSS.
4. Se uma folha de estilo interna na página atual quiser ser exportada para um arquivo de folha de estilo externo para uso por outras páginas, você poderá clicar no ícone cinza no canto superior direito da janela da folha de estilo e selecionar "Folha de estilo de exportação" Neste momento, você pode selecionar o nome da folha de estilo e salvar como um arquivo externo.
5. Quando outras páginas precisam usar folhas de estilo externo, você pode clicar no primeiro botão "Anexar folha de estilo" na janela da folha de estilo para abrir a janela e selecionar o arquivo de folha de estilo externo, selecione "link" add como e confirmar.
26. Outros CSs
**** O plano de fundo no CSS é definir o fundo de texto, a imagem de fundo da tabela, etc.
**** Os blocos nos CSs referem -se à definição do espaçamento, alinhamento, subscrito, superescrito, arranjo, etc. do texto.
**** A caixa no CSS refere -se a definir a distância em branco entre imagens e conteúdo de texto e o método de misturar imagens e texto.
**** A fronteira no CSS refere -se ao embelezamento da área de texto da tabela, botões, etc.
**** Lista no CSS refere -se a definir o estilo de itens da lista. Isto é, um parágrafo de esboço.
**** Posicionamento no CSS refere -se a definir o posicionamento relativo e absoluto das imagens na página.
**** Extensão no CSS, o cursor pode ser definido como o estilo do cursor, que pode ser definido como manualmente (tipo manual), mira (tipo cruzado), texto ("i", espera (tipo de espera), padrão (Tipo padrão), ajuda (tipo de ajuda) e tipos de seta em várias direções.
**** Extensões no CSS, os filtros nele podem ser usados para criar efeitos de filtro CSS, ou seja, para processar a transparência, brilho etc. de imagens. No entanto, o efeito não é muito óbvio.
27. Crie um álbum de fotos on -line
1. Primeiro, instale o software Fireworksmx.
2. Processe as fotos que você precisa colocar na Internet, processar -as no mesmo tamanho e coloque -as em uma pasta.
3. Clique em Comando/Crie álbum do site no menu para abrir a janela Configurações.
4. Digite o título do álbum, as informações da legenda e outras informações (você também pode modificar -as posteriormente). "Pasta de imagem de origem", selecione a pasta onde você acabou de salvar a foto.
5. "Pasta de destino", clique no botão "navegar" para selecionar o diretório do site atual. (Salve todas as fotos no site)
6. Você pode selecionar o item "Miniatura" de acordo com suas necessidades e o item "Mostrar nome do arquivo".
7. A célula "coluna" é o número de imagens exibidas em cada linha.
8. Geralmente, escolha "maior qualidade" para os dois "formatos" a seguir.
9. Selecione a opção "Crie uma página de navegação para cada imagem". OK.
28. Função de transição da página da web personalizada
**** A transição da página da web refere -se aos diferentes efeitos de atualização que a página apresenta quando o espectador entra ou sai da página da web, como rolagem, persianas etc. A página da web parecerá mais dinâmica, mas você também deve prestar atenção com moderação, caso contrário, mudanças muito sofisticadas podem despertar facilmente o desgosto dos espectadores. etapa:
1. Abra uma página, clique em Inserir/tag/meta no menu e a caixa de diálogo Meta será exibida.
2. Selecione a opção equivalente a HTTP na lista suspensa das opções de propriedade na caixa de diálogo e digite a página-entrada na caixa de valor para indicar que haverá um efeito de transição da página da web ao entrar na página da web.
3. encolhimento.
4. Após a entrada, clique em OK para salvar. Dessa forma, quando clicamos em um hiperlink para entrar nesta página, podemos ver o efeito.
efeitos
para você escolher.
Encolher Caixa 0 Dissolver 12
Expansão em forma de caixa 1 Encolher para a esquerda e para a direita em direção ao meio 13
O círculo encolhe 2 e o meio se expande para a esquerda e para a direita 14
Expanda o círculo 3 e diminua para cima e para baixo em direção ao meio 15
Apagar para cima 4 Expanda o meio para cima e para baixo 16
Apague 5 expanda para o canto inferior esquerdo nas etapas 17
Apague 6 para a esquerda Expanda 18 para o canto superior esquerdo em etapas
Apagar para a direita 7 Expanda para o canto inferior direito nas etapas 19
Persianas verticais 8 expansão em forma de escada para o canto superior direito 20
Persianas horizontais 9 linhas horizontais aleatórias 21
Tabuleiro de xadrez horizontal 10 Linhas verticais aleatórias 22
Estilo vertical do quadro de xadrez 11 aleatório 23
vinte e nove, aplicativo de biblioteca
**** algum conteúdo do site precisa ser usado repetidamente, como um ícone do site feito por você, etc. No momento, esse componente é salvo na biblioteca e pode ser chamado a qualquer momento.
1. Abra uma página e selecione o componente que precisa ser salvo, como um ícone.
2. Clique na janela/recursos do menu para abrir a janela de recursos. Em seguida, selecione o botão da amostra do livro inferior para abrir o painel da biblioteca.
3. Clique no novo botão abaixo para salvar o ícone que acabou de ser selecionado na biblioteca.
4. Quando você deseja aplicar o conteúdo na biblioteca em uma nova página, abra o painel da biblioteca, selecione o ícone que deseja usar e clique em "Inserir" abaixo.
30. Use modelos para concluir rapidamente o site (página inicial ou uma página interna)
1. Primeiro, planeje o site que você deseja fazer e projetar o conteúdo de cada link. Como meu site:
Os links na página inicial são: versão da web, versão animada, deixe uma mensagem, sobre mim, entre em contato comigo, desejando a garrafa. A sala de aula ...… Curso de Curso ...
Os links na versão animada são os mesmos da versão da web.
Abaixo estão os links para vários artigos ou páginas de louça. Por exemplo, "Pesquisando a verdade na sala de aula" links para uma página cheia de títulos de plano de aula e, em seguida, a partir de cada título do plano de aula, ele vincula à página em que o plano de aula é colocado. O mesmo se aplica a outros.
2. Faça o download do modelo da página da web que é mais adequado para o seu próprio planejamento e favorito. Outro é que geralmente é uma pasta denominada imagens, que é o que chamamos de local onde as imagens são colocadas.
3. Defina o site e copie esses dois arquivos (pastas) para a pasta do site.
4. Clique duas vezes no arquivo index.htm para inserir o estado de edição da página inicial. Você pode modificar a página para atender às suas necessidades. Isso completa a página inicial.
31. Salve as páginas da web existentes como modelos
**** usados quando houver um grande número de páginas recorrentes em um site. (Certifique -se de definir o site antes de criar um novo modelo e usá -lo)
1. Selecione uma página e clique em Arquivo/Salvar como modelo para salvar a página atual como um modelo. A janela "Salvar modelo" abre, dê um nome ao modelo e salve -o.
2. Nesse momento, você pode descobrir que uma pasta nomeada modelos é criada automaticamente no site e os modelos que salvamos são armazenados neste diretório. Sua extensão é .dwt
3. Este modelo não pode ser modificado enquanto está sendo usado atualmente. Então você precisa definir a área editável do modelo.
4. Por exemplo, na página atual do modelo, você precisa fazer a parte do meio da página editável, para que você possa adicionar conteúdo ao usar o modelo. Selecione a célula da tabela no meio da página (mantenha pressionada a tecla Ctrl e clique na célula) e clique em Inserir/modelo de objeto/área editável no menu principal. Uma caixa de diálogo é aberta, onde você pode dar um nome ao modelo e clicar em OK.
5. A área editável definida neste momento é enquadrada por uma linha azul clara e há o nome da área no canto superior esquerdo. Salve e feche o arquivo de modelo.
6. Clique em Arquivo/Novo no menu principal e clique na opção "Modelo" acima na janela da nova página.
7. Nesse momento, os sites atualmente definidos estão listados na coluna "Modelo para". Selecione um modelo e você pode visualizá -lo na coluna "Visualizar". Em seguida, clique no botão "Criar" para criar uma nova página.
8. Na nova página que aparece, exceto pela área editável, outras peças não podem ser modificadas.
32. Carregue seu próprio site
1. Aplique o espaço do site e faça o upload para a Internet. Atualmente, basicamente não há espaço livre.
2. Depois de clicar em Aplicar, aparecerá um formulário solicitando registro, que geralmente inclui nome de usuário, senha, email, número de contato, província, nome da página inicial, categoria da página inicial, introdução à página inicial etc.
3. Depois de preencher tudo, você receberá os seguintes itens: ① Nome de usuário (apenas preenchido) ② Senha (apenas preenchida) ③ Endereço de upload FTP ④ Endereço da página inicial (às vezes os itens acima são enviados para o endereço de e -mail preenchido)
4. Faça o download e instale o software FTP Upload, você pode usar o foteftp (a janela/software Kunshan pode ser baixada, grátis)
5. Abra o software foteftp e clique em File/Site Manager no menu principal.
6. Preencha o endereço de upload FTP, o nome de usuário do site FTP e a senha do site FTP na caixa de diálogo que é aberta e clique em Connectar para conectar -se ao servidor do site. (Ele conectará automaticamente na segunda vez que você o abrir, não é necessário preenchê -lo novamente)
7. Após a conclusão da conexão, um quadro aparecerá na página. ) à direita por um, e o upload é concluído.
33. Para promover seu site,
como informar aos outros o endereço do site?
1. Use o software especial para registrar seu site nos principais mecanismos de pesquisa.
2. Login manual. Por exemplo, o Open Baidu ( www.baidu.com ) e há um link "Login do site" abaixo. Incluído no mecanismo de pesquisa do Baidu, para que outros possam pesquisar no seu site. O mesmo se aplica ao login em outros sites.