1 Introdução
Com a contínua popularização e desenvolvimento da Internet/Intranet, cada vez mais empresas, empresas e indivíduos estão começando a construir seus próprios sites, escrever páginas da Web e publicar informações para o mundo exterior de uma nova maneira para as pessoas navegarem. , leitura e aplicação. Por isso, a produção de páginas web tem atraído a atenção de cada vez mais profissionais.
As páginas da Web referem-se a alguns arquivos de documentos que fornecem informações ao mundo através da Internet, incluindo informações pessoais, comerciais, de entretenimento e outros conteúdos. As páginas da Web são escritas usando HyperText Markup Language (HTML) e armazenadas em servidores da Web na Internet/Intranet para que os visitantes possam ler usando um navegador. As páginas da Web escritas em linguagem HTML também são chamadas de hipertexto, ou seja, as páginas da Web contêm informações multimídia como texto, gráficos, sons, imagens e hiperlinks (HyperLink).
2 DHTML Simples
Posso acessar um grande número de páginas da web escritas em HTML e linguagens de script no navegador. Para facilitar a navegação, vários fabricantes de computadores lançaram seus próprios navegadores. Esses navegadores ainda não possuem um padrão unificado de suporte a HTML, o que obviamente não favorece o desenvolvimento da Internet. Portanto, o World Wide Web Consortium (W3C) desenvolveu uma especificação independente de plataforma e linguagem, o Document Object Model (DOM).
DOM combina HTML, CSS (folhas de estilo em cascata) e linguagens de script para formar um modelo de interoperabilidade que uma ou mais pessoas podem implementar. Tanto a Netscape quanto a Microsoft fizeram sugestões ao W3C para implementar o DOM: usar HTML dinâmico, ou seja, DHTML (Dynamic HTML) para resolver o problema.
DHTML é um termo geral para diversas novas funções que foram estendidas, mantendo a compatibilidade com o HTML existente. Esses novos recursos referem-se principalmente a recursos dinâmicos, recursos de posicionamento e capacidade de utilizar CSS.
Há duas razões para usar DHTML: primeiro, o DHTML divide cada elemento da página web em muitos objetos independentes, e as propriedades desses objetos são especificadas por meio de CSS. Em segundo lugar, o DHTML abre cada objeto para uma estrutura de linguagem de programação e script. A linguagem de programação C++ pode ser usada para manipular objetos na página da web, e script Java e VBscript também podem ser usados para manipular objetos na página da web. Isso significa que a página da Web e tudo o que ela contém são programáveis, o que traz novos recursos à página da Web. Encontraremos a diferença quando executarmos o aplicativo: quando executávamos o programa na Web, tínhamos que esperar que a página da Web fosse baixada novamente após um único elemento se uma página da Web contivesse um número grande. de objetos ocultos, seria necessário até uma tela inteira. Uma página totalmente nova passará pelo processo de acessar o servidor novamente com DHTML, você pode clicar em uma imagem na parte superior da tela para fazer os parágrafos na parte inferior da tela. a tela muda imediatamente sem precisar acessar o servidor novamente. Todas as tabelas se tornarão bancos de dados ativos e os usuários poderão filtrar e classificar os dados de forma dinâmica. Isso reduz o número de solicitações ao servidor, reduzindo assim a carga no servidor e melhorando o desempenho geral do cliente e do servidor.
3 Usando folhas de estilo CSS
A base do DHTML são as folhas de estilo em cascata (Cascading Style Sheets refere-se a um conjunto de atributos de exibição e posicionamento definidos pelo autor da página da Web). A maior característica do CSS é o web design orientado a objetos, ou seja, cada página, cada parágrafo, cada imagem e tabela é considerada um objeto. Em seguida, declare cada instância desse objeto. Cada instância possui um estilo, que é um conjunto de atributos ou instruções de exibição. Desde que sejam declaradas uma vez, essas propriedades serão utilizadas em toda a página web ou mesmo em todo o site. Cada estilo pode receber um nome, como H1, Li. Se o nome do estilo for igual ao nome de um elemento (ou tag) DHTML válido, o estilo será aplicado automaticamente a cada instância do elemento, se fornecido; Se um estilo for nomeado sem uma tag DHTML correspondente, o estilo deverá ser aplicado manualmente onde você deseja que ele apareça.
3.1 Definir e usar estilos básicos Existem dois estilos no seguinte segmento do programa: H1 e favorito H1 é um elemento DHTML válido. A parte marcada por 〈H1〉〈／H1〉 herdará todos os atributos do estilo H1. ; Favor é um elemento não-DHTML. Ao defini-lo, você deve adicionar um ponto na frente dele. Ao referenciá-lo, você deve usar
〈HTML〉
〈CABEÇA〉〈TÍTULO〉teste〈／TÍTULO〉
〈TIPO DE ESTILO=”texto／css〉
〈!--
H1{estilo da fonte:normal;
peso da fonte: negrito;
cor: verde;
line-height:20pt} ／Definir estilo H1／
.favor{estilo da fonte:normal;
tamanho da fonte: 15pt;
imagem de fundo:url(back.imag.gif);
textalign:center} ／Definir estilo favorito／
--〉
〈H1〉ISSO É UM TESTE!〈／H1〉／Estilo de uso H1／
〈P CLASS=”favor”〉VOCÊ GOSTA DISSO?〈／P〉／Use style favor／
3.2 Usando estilos externos As folhas de estilo também podem ser armazenadas em arquivos externos. A conexão entre este arquivo e a página pode ser através de IMPORT ou LINK. , por exemplo, a folha de estilos é armazenada no arquivo mysite.css. Você pode inserir o seguinte código no documento para chamar a folha de estilos externa:
〈LINK REL=FOLHA DE ESTILO
HREF=”meusite.css”
TIPO=”texto/css”
Title=”Test Style”〉
4 Realizar a função interativa
O próprio CSS não possui função interativa. Para realizar a interação, é necessário combinar o objeto definido pelo CSS com o modelo de documento (DOM) e converter o documento da Web em um documento DHTML. O DOM fornece uma maneira para as linguagens de script acessarem os elementos da página. Os modelos de objetos suportados pela Microsoft e Netscape são um pouco diferentes.
No modelo da Microsoft, as linguagens de script têm acesso a todos os elementos de uma página HTML e todos os elementos são refletidos como objetos em document.all. O seguinte trecho de programa é usado para escrever todos os elementos da página:
para (I=0;I
document.write(document.all［I］.tagName+”＼n” );
}
No modelo do Netscape, uma linguagem de script pode acessar um conjunto específico de elementos em uma página HTML, como o conteúdo da tag
para (I=0;I
document.write(document.layers［I］.nome+”＼n”);
}
5 O uso da tecnologia de posicionamento
Em HTML, a posição de qualquer objeto é sempre relativa a outras partes da estrutura da página web. Quando compilamos páginas web, muitas vezes extraímos uma imagem da página adicionando um pedaço de texto. Agora, usando a tecnologia de posicionamento DHTML, os objetos podem ser fixados e empilhados, ou seja, várias imagens são colocadas na mesma posição na página, e então o objeto colocado no topo é continuamente designado para obter efeitos de animação.
exemplo:
*minhasvoltas{cor de fundo:transparente}
*meu ponto
posição:absoluta;
superior: 5 pol.;
direita: 5 pol.;
largura: 10 pol.}
BODY{imagem de fundo:url(／imagem／back.gif);}
〈class=.mypoint〉Img(src=”／imagem／a.gif)
〈DIV CLASS=”pilha” ID=”image1” estilo=”z-index:4”〉
〈DIV CLASS=”pilha” ID=”image2” estilo=”z-index:3”〉
〈DIV CLASS=”pine” ID=”image3” style=”z-index:2”〉
〈DIV CLASS=”pine” ID=”image4” style=”z-index:1”〉
No segmento do programa acima, o plano de fundo é definido para permitir que a luz passe através do mapa base. No passado, esse efeito só poderia ser obtido usando ferramentas de desenho especiais. Há também 4 imagens empilhadas na página e os efeitos de animação que elas produzem também são muito bons.
6 Conclusão
O texto acima fez algumas pesquisas sobre como usar DHTML para compilar páginas da web. Ainda há muitas questões técnicas aguardando que os produtores de páginas da web se aprofundem juntos.
Wei Xiaotan é estudante de mestrado na Escola de Transportes da Northern Jiaotong University, 100044, Pequim.