1 이전
인터넷/인트라넷의 지속적인 인기와 발전에 따라 점점 더 많은 회사, 기업 및 개인이 자체 웹 사이트를 구축하고 웹 페이지를 작성하여 사람들이 검색, 읽기 및 적용할 수 있는 새로운 방식으로 외부 세계에 정보를 배포하기 시작했습니다. 그 결과 웹 페이지 제작은 전문가들의 관심을 점점 더 많이 받고 있습니다.
웹 페이지는 개인 정보, 비즈니스, 엔터테인먼트 및 기타 콘텐츠를 포함하여 인터넷을 통해 전 세계에 정보를 제공하는 여러 문서와 파일입니다. 웹 페이지는 HTML(하이퍼텍스트 마크업 언어(HTML))을 사용하여 작성되고 인터넷/인트라넷의 웹 서버에 저장되어 방문자가 브라우저로 읽을 수 있도록 합니다. HTML 언어로 작성된 웹 페이지는 하이퍼텍스트라고도 하며, 웹 페이지에는 텍스트, 그래픽, 사운드, 이미지 및 하이퍼링크와 같은 멀티미디어 정보가 포함되어 있습니다.
2 DHTML 요약
내 브라우저에서 HTML 및 스크립팅 언어로 작성된 수많은 웹 페이지에 액세스할 수 있습니다. 브라우징을 용이하게 하기 위해 다양한 컴퓨터 제조업체에서 자체 브라우저를 도입했지만 이러한 브라우저에서 HTML 지원에 대한 통일된 표준이 없어 인터넷 발전에 도움이 되지 않는 것이 분명합니다. 따라서 W3C(월드 와이드 웹 컨소시엄)는 플랫폼과 언어에 독립적인 사양인 DOM(문서 객체 모델)을 개발했습니다.
DOM은 HTML, CSS(캐스케이딩 스타일 시트), 스크립팅 언어를 결합하여 한 명 이상의 사람이 구현할 수 있는 상호 운용 가능한 모델을 형성합니다. 넷스케이프와 마이크로소프트는 DOM을 구현하기 위해 W3C에 동적 HTML, 즉 DHTML(동적 HTML)을 사용하자는 제안을 했습니다.
DHTML은 기존 HTML과 호환성을 유지하면서 확장하는 몇 가지 새로운 기능을 포괄적으로 일컫는 용어입니다. 이러한 새로운 기능은 주로 동적 기능, 위치 지정 기능 및 CSS 사용을 의미합니다.
두 가지 이유로 DHTML을 사용하는데, 첫째, DHTML은 웹 페이지의 각 요소를 CSS를 통해 속성이 지정된 여러 개의 개별 개체로 나눕니다. 둘째, DHTML은 각 객체를 프로그래밍 및 스크립팅 언어의 프레임워크에 개방합니다. 프로그래밍 언어 C++를 사용하여 웹 페이지의 객체를 조작할 수 있고, 자바 스크립트 및 VB스크립트를 사용하여 웹 페이지의 객체를 조작할 수 있습니다. 즉, 웹 페이지와 웹 페이지에 있는 모든 것을 프로그래밍할 수 있으며, 이를 통해 웹 페이지에 새로운 기능을 추가할 수 있습니다. 웹에서 프로그램을 실행할 때 예전에는 하나의 요소를 실행할 때마다 웹 페이지가 다시 다운로드될 때까지 기다려야 했습니다. 웹 페이지에 숨겨진 개체가 많거나 완전히 새로운 페이지가 포함된 경우 서버를 다시 방문하는 과정을 거쳤지만, DHTML을 사용하면 화면 상단의 이미지를 클릭하면 서버에 방문할 필요 없이 화면 하단의 단락을 즉시 변경할 수 있습니다. 모든 테이블은 라이브 데이터베이스가 되며 사용자는 동적 및 순차적으로 테이블의 데이터를 필터링할 수 있습니다. 이렇게 하면 서버에 대한 요청 횟수가 줄어들어 서버의 부하가 줄어들고 클라이언트와 서버의 전반적인 성능이 향상됩니다.
3스타일 시트 CSS 사용
DHTML은 웹 페이지 작성자가 정의한 표시 및 위치 지정 속성 집합인 CSS(Cascading Style Sheet)를 기반으로 하며, CSS의 가장 중요한 특징은 객체 지향 웹 디자인으로 모든 페이지, 단락, 이미지 및 표를 객체로 간주합니다. 그런 다음 객체의 각 인스턴스가 선언됩니다. 각 인스턴스에는 스타일, 속성 집합 또는 표시 지침이 있습니다. 일단 선언되면 이러한 속성은 페이지 전체 또는 사이트 전체에서 사용됩니다. 각 스타일에는 H1, Li와 같은 이름을 지정할 수 있습니다. 스타일 이름이 유효한 DHTML 요소(또는 태그)의 이름과 동일한 경우 스타일은 요소의 각 인스턴스에 자동으로 적용되며, 스타일에 지정된 이름에 해당하는 DHTML 마크업이 없는 경우 스타일이 표시될 위치에 수동으로 적용해야 합니다.
3.1 기본 스타일 정의 및 사용
다음 단락에는 H1과 favour의 두 가지 스타일이 있습니다. H1은 유효한 DHTML 요소이며 < H1 >으로 마크업된 프로그램의 일부는 H1 스타일의 모든 속성을 상속받게 되고, favour는 비 DHTML 요소입니다. 정의할 때는 그 앞에 점을 붙여야 합니다. 참조할 때는 < < 클래스 >로 선언해야 합니다. 프로그램에서 < 즐겨 찾기 >로 표시된 섹션은 즐겨 찾기 스타일의 모든 속성을 상속합니다.
〈HTML〉
←标题\8592;测试\8592;/标题\8592;
〈STYLE TYPE="text/css〉
〈 ! -
h 1 { font-style:normal;
font-weight:bold;
colour:green;
line-height:20pt}/ define style H1/
. favour{ font-style:normal;
font size:15pt;
background-image:URL(back . imag . gif);
Textalign:center}/스타일 기본 설정 정의/
- 〉
〉/STYLE \
﹔/Header﹔
〈h 1〉이것은 테스트입니다! /사용 스타일 H1/
P CLASS = " 선호"-이것이 마음에 드십니까? /스타일 기본 설정 사용/
3.2 외부 스타일 사용
스타일시트를 외부 파일에 저장할 수도 있으며, 이 파일과 페이지를 가져오기 또는 링크로 연결할 수 있습니다. 예를 들어 스타일시트는 mysite.css 파일에 저장되며 다음 코드를 문서에 삽입하여 외부 스타일시트를 호출할 수 있습니다.
LINK REL = 스타일시트
HREF="mysite.css"
TYPE="text/css"
Title="테스트 스타일"
4. 인터랙션 기능 구현하기
CSS 자체에는 인터랙션 기능이 없습니다. 상호 작용을 구현하려면 CSS로 정의된 객체를 DOM(문서 모델)과 결합하여 웹 문서를 DHTML 문서로 변환해야 하며, DOM은 스크립팅 언어가 페이지 요소에 액세스할 수 있는 방법을 제공합니다. Microsoft와 Netscape는 서로 다른 객체 모델을 지원합니다.
Microsoft의 모델에서는 스크립팅 언어가 HTML 페이지의 모든 요소에 액세스할 수 있으며, 이 모든 요소는 document.all에서 객체로 표현됩니다. 다음 스니펫은 페이지의 모든 요소를 출력하는 데 사용됩니다.
for(I = 0; I〈document . all . length; I++)
{
document.write(document.all[I]). 태그 이름 + " \ n ");
}
넷스케이프의 모델에서 스크립팅 언어는 <〈레이어〉 태그의 콘텐츠와 같은 HTML 페이지의 특정 요소 집합에 액세스할 수 있습니다. 다음 스니펫은 페이지의 모든 레이어 이름을 작성하는 데 사용됩니다.
for(I = 0; I〈document . layers . length; I++)
{
{
document . write(document . layers[I]). name+" \ n ");
}
5 위치 지정 기법 사용
HTML에서 모든 객체의 위치는 항상 나머지 웹 페이지 구조에 상대적입니다. 웹 페이지를 편집할 때 텍스트 단락을 추가하여 페이지에서 이미지를 돌출시키는 경우가 많습니다. 이제 DHTML 위치 지정 기술을 사용하면 객체를 고정적으로 스택할 수 있습니다. 즉, 페이지의 동일한 위치에 여러 이미지를 배치한 다음 위에 배치된 객체를 지속적으로 지정하여 애니메이션 효과를 적용할 수 있습니다.
예시:
* my back { background-color:투명 }
*mypoit
Position:절대;
Top:5in
Right:5in
Width:10in}
BODY { background-image:URL(/image/back . gif);}
class =. 내 포인트 \u Img(src = "/image/a . gif)
"DIV CLASS = " 파일 " ID = " 이미지 1 " 스타일 = " z-index:4 ""
"DIV CLASS = " 파일" ID = " 이미지2 " style = " z-index:3 ""
"DIV CLASS = " pine " ID = " image3 " style = " z-index:2 ""
"DIV CLASS = " pine " ID = " image4 " style = " z-index:1 ""
〉/BODY \
위 코드 조각에서는 특수 매핑 도구를 사용하여 빛이 기본 이미지를 통과할 수 있도록 배경을 설정했으며, 이는 이전에 달성한 것입니다. 또한 페이지에 4개의 이미지를 겹쳐서 멋진 애니메이션을 만들었습니다.