Como todos sabemos, a produção de sites envolve vários aspectos de conhecimento, incluindo design gráfico, produção de páginas HTML, definição de estilo CSS, scripts do lado do cliente (JavaScrfipt/VBScript), scripts do lado do servidor (Asp/Asp.Net/PHP/JSP) , etc. conteúdo. Nesta edição, o autor parte do mais básico, focando em como fazer um site HTML simples, e inicialmente experimenta a diversão.
1. A ferramenta de criação de páginas web usada pelo autor aqui é o Dreamweaver. Primeiro execute o Dreamweaver, selecione o menu "Arquivo" → "Novo" e a janela mostrada na Figura 1 aparecerá.
2. Existem sete opções na aba “Página Básica” nesta janela. Após selecionar o item “HTML” e clicar no botão “Criar”, a área de trabalho de criação ficará em branco, o que significa que a página HTML foi criada com sucesso. . Clique na visualização do código e o conteúdo mostrado na Figura 2 aparecerá.
3. Ignore o significado específico desses códigos de página HTML exibidos. Primeiro alteramos "Título do documento sem título" para "Estreia da página da Web" e, em seguida, selecionamos a visualização do design. Clique em “Menu” → “Inserir” → “HTML” → “Moldura” → “Acima” para inserir uma moldura no topo da página web. Neste momento, a página web está dividida em dois frames, nomeadamente o frame superior e o frame inferior. Após selecionarmos o quadro, selecione o comando “Menu” → “Inserir” → “HTML” → “Moldura” → “Esquerda”, que insere um quadro no lado esquerdo da página web.
4. Clique em "Ctrl+S" para salvar cada quadro (top.htm, left.htm, right.htm). Em seguida, selecione o quadro esquerdo e clique no comando “Menu” → “Inserir” → “Hyperlink”, e a caixa de diálogo mostrada na Figura 3 aparecerá. Insira vários itens nesta caixa de diálogo, onde “texto” é o texto exibido no link, “link” é o endereço da página para onde você clica após clicar e “destino” é o quadro no qual ele é exibido. Aqui selecionamos o “destino” como mainFrame (ou seja, o quadro esquerdo) e seguimos este passo para continuar inserindo hiperlinks. Em seguida, insira a visualização de código do quadro direito (right.htm) e digite <marquee direction=left align=middle>Bem-vindo ao meu site!!!</marquee> em <body></body>. Os efeitos especiais podem fazer o texto se mover para a esquerda, para a direita, para cima e para baixo. Alterar a direção para (PARA CIMA, PARA BAIXO, Esquerda, Direita) pode alterar a direção do movimento do texto.
5. Agora que criamos uma página HTML com moldura, adicionaremos um Banner ao quadro superior (top.htm). O banner pode fazer alguns efeitos dinâmicos de JavaScript. O código específico para efeitos de troca dinâmica pode ser visualizado no código-fonte da página Top.Htm. O autor fornece apenas o código-chave aqui:
bannerAD[0]=pic173.gif;
bannerADlink[0]=http://www.sina.com;
bannerAD[1]=pic1732.gif;
bannerADlink[1]=http://www.sohu.com;
Explicação do código: O acima é um array JavaScript que armazena imagens e bannerADlink armazena links após clicar na imagem. Você pode adicionar ou subtrair imagens de acordo com suas necessidades.
6. Continue a criar páginas para os hiperlinks no quadro direito. O conteúdo específico pode ser personalizado por você. Selecione o menu “Arquivo”, clique em “Novo”, selecione HTML para criar uma série de páginas, e os nomes das páginas devem ser consistentes com os nomes escritos ao inserir o link. O autor fez dois exemplos (últimas notícias e celebridades populares) no documento original, e os leitores podem tentar adicionar mais conteúdo por conta própria. Desta forma, é criado o protótipo de um site HTML, conforme mostra a Figura 4 é o efeito final da página.
O efeito dinâmico não é refletido na captura de tela. Os leitores podem abrir Index.htm diretamente no arquivo de origem no IE. Após a abertura, aparecerá um prompt ao clicar com o botão direito do mouse. (Figura 5).
Resumo: Nesta edição, apresentamos como usar o Dreamweaver para criar um site HTML simples, que utiliza JavaScript, framework HTML, hiperlink e outras tecnologias. Além disso, a solicitação de bloqueio de conteúdo que vimos acima ocorre porque a página da web não foi publicada no site. Na próxima edição, o autor trará conteúdos mais interessantes.