DHTML : 동적 웹 코딩

• 할 수있다 19, 2024

DHTML의 약자 디역동적 H이퍼티내선 미디엄방주 엘HTML과 자바 스크립트 및 CSS (Cascading Style Sheets)를 결합하여 HTML 웹 페이지를 동적으로 만드는 기술로 정의 할 수 있습니다. 이 시리즈의 이전 4 개 기사에서 연구 한 다른 4 가지 HTML 변형과 달리 DHTML은 W3 컨소시엄에서 정의한 표준이 아닙니다. "넷스케이프와 마이크로 소프트는 4.x 세대 브라우저가 지원할 새로운 기술을 설명하기 위해 사용 된 마케팅 용어"(W3 컨소시엄)입니다. HTML 4.0은 먼저 DHTML 구조에 고유 한 두 가지 중요한 구성 요소를 도입했습니다.

• 캐스 케이 딩 스타일 시트 (CSS)
• DOM (문서 개체 모델)

코드를 동적으로 만들기

CSS는 스타일 및 레이아웃 모델을 제공하고 DOM은 HTML 문서에 대한 문서 컨텐츠 모델을 제공합니다. JavaScript 및 VBScript는 HTML 요소를 제어하기위한 스크립팅 코드 작성 기능을 추가합니다. 이 세 가지 구성 요소를 종합하면 동적 HTML 페이지가 추가됩니다. Netscape와 Microsoft는 여전히 브라우저 내에서 구현할 것에 동의하지 않았으므로 두 브라우저에서 모두 잘 작동하는 DHTML 페이지를 작성하는 것은 까다로울 수 있습니다. 직접 확인하려면 온라인으로 Microsoft 및 Netscape 표준에 액세스하십시오.

• MSDN 라이브러리 Microsoft에서
• 동적 HTML Netscape Communicator에서

"DHTML은 웹 페이지의 기능을 향상시키는 저 대역폭 효과를 만드는 데 탁월합니다. 애니메이션, 게임, 응용 프로그램을 만들고 웹 사이트를 탐색하는 새로운 방법을 제공하며 단순히 그렇지 않은 외부 페이지 레이아웃을 만드는 데 사용할 수 있습니다. HTML만으로는 불가능합니다. DHTML의 많은 기능을 Flash 나 Java로 복제 할 수 있지만 DHTML은 플러그인을 요구하지 않고 웹 페이지에 매끄럽게 임베드 할 수있는 대안을 제공합니다. "(Dan Steinman, 1998).

DHTML의 복잡성을 이해하려면 해당 구성 요소를보다 자세히 검사하는 것이 좋습니다.

캐스 케이 딩 스타일 시트

CSS는 스타일, 위치, 색상, 글꼴 등 웹 컨텐츠와 웹 컨텐츠를 구분하는 정교한 코드입니다. CSSP 또는 CSS 위치 지정을 사용하면 HTML 요소 위치를 픽셀 수준으로 제어 할 수 있습니다. CSS2 (CSS 레벨 2)를 사용하여 컨텐츠에서 웹 문서의 프리젠 테이션 스타일을 분리하면 웹 작성 및 사이트 유지 보수가 간단 해집니다. "CSS2는 미디어 별 스타일 시트를 지원하므로 작성자가 시각적 브라우저, 청각 장치, 프린터, 점자 장치, 핸드 헬드 장치 등에 문서를 표시 할 수 있습니다.이 사양은 콘텐츠 위치 지정, 다운로드 가능한 글꼴, 표 레이아웃, 기능 등을 지원합니다. 국제화, 자동 카운터 및 번호 매기기 및 사용자 인터페이스와 관련된 일부 속성 "(W3 컨소시엄). W3C는 CSS2를 배우는 훌륭한 튜토리얼을 제공합니다. CSS2 사양.

자바 스크립트

JavaScript는 HTML 요소를 제어하고 양식, 프레임, 창, 이미지 롤오버, 오디오-비디오 컨트롤 및 DHTML 조작에 기능을 추가하는 데 사용되는 특수 스크립팅 브라우저 기반 언어입니다. Netscape는 먼저이 스크립팅 JavaScript를 호출하므로 Microsoft는 특정 스크립팅 브랜드로 JScript라는 용어를 사용했습니다. 결과? 귀찮게 호환되지 않는 두 가지 버전의 JavaScript. 이 문제를 더 탐색하려면 Netscape 's를 방문하십시오. 자바 스크립트 센트럴 그리고 마이크로 소프트 JScript 자원 페이지. JavaScript 컨텐트의 동적 효과의 비결은 레이어 객체를 사용하는 것입니다. 마우스로 스크롤 할 때 레이어 개체는 텍스트를 변경합니다. 이미지 나 텍스트가 웹 페이지 주위를 이동하도록합니다. 또한 드롭 다운 메뉴를 드롭 다운합니다. 레이어 개체는 색상, 위치 및 가시성과 같은 특성을 정의하여 div 태그로 정렬됩니다.

함께 모으기

DHTML은 일반적으로 세 가지 작업을 수행하기 위해 적용됩니다.

• 위치 페이지에 콘텐츠 블록을 배치하고 이동
• 스타일 수정 페이지의 모양과 느낌을 바꾸는
• 이벤트 처리 또는 사용자 이벤트를 위치 변경 또는 다른 스타일 수정의 변경과 관련

최신 버전의 Internet Explorer 및 Netscape (버전 5, 6 이상)에서 DOM은 대부분의 DHTML 코딩에 선택되는 코드가되었습니다. DOM을 마스터하면 웹 디자이너가 페이지의 모든 스타일, 속성 (예 : href) 및 요소 (예 : html 태그)와 관련된 문서 코딩을 조작, 추가, 삭제 및 편집 할 수 있습니다. 즉, HTML 문서에 공통적 인 모든 태그와 속성은 DOM을 통해 액세스 할 수 있습니다. 현재 W3C는 문서 개체 모델 수준 0 및 1을 권장합니다. 레벨 2도 작업 중이지만 아직 DHTML 코딩의 표준으로 승격되지 않았습니다.

HTML Goodies를 통해 유용한 자습서 그룹을 사용할 수 있습니다. DHTML 및 레이어 자습서.

이 기사에 포함 된 링크는 html 코딩에서이 최신 개발을 마스터하는 여정을 시작하기위한 소개 및 방법을 제공합니다.Google에서 빠른 검색을하면 훨씬 더 많은 리소스를 이용할 수 있으며 쉽게 이용할 수 있습니다. 브라우저 제조업체가 비 호환성 문제를 해결하고 더 높은 버전의 브라우저를 사용하는 것이 일반화되면서 DHTML은 모든 전문 디자이너 일정의 필수 요소가 될 것입니다.

HTML 하이라이트 기사 시리즈

1 부: 신뢰할 수있는 디자이너가 HTML을 알아야합니까?
2 부: HTML 3.2-Wilbur의 탄생
3 부 : HTML 4.0 AND 4.01-더 좋은 것!
제 4 부 : XHTML : 세련된 디자인을위한 웹 코딩
5 부 : DHTML : 동적 웹 코딩