10 HTML w HTML 4 0 HTML Netscape
- Slides: 79
10장 동적 HTML w HTML 4. 0 • 최신 HTML 표준 • Netscape Navigator와 Internet Explorer의 서로 다른 동적 HTML에 대한 해법 • 1997년 12월 18일 W 3 C Recommendation http: //www. w 3. org/TR/REC-html 40 -971218 • 1998년 4월 28일 W 3 C Revision http: //www. w 3. org/TR/REC-html 40/ 4
10장 동적 HTML w 태그에 스타일 지정 결과 Internet Explorer에서 읽은 문서 Netscape Navigator에서 읽은 문서 22
10장 동적 HTML Internet Explorer의 경계 종류와 모양 36
10장 동적 HTML w 리스트의 불릿 스타일 변경 결과 Netscape Navigator의 경우 Internet Explore의 경우 44
10장 동적 HTML w 레이어 정의의 예 소스코드 <html> <head><title>레이어 정의</title> <style> #place {position: absolute; left: 40; top: 20; width: 320; background-color: rgb(255, 220); border-color: white; border-width: 1; } </style></head> <body> <div id="place"> <h 3>스위스의 루가노</h 3> <p><img src="images/lugano. jpg" width="160" height="110" ALIGN="left"> 스위스 남부의 조그만 도시로 ………. . </p> </div> </body></html> 50
10장 동적 HTML w 절대적 위치와 상대적 위치 비교 소스코드 <html> <head><title>절대적 위치와 상대적 위치</title> <style> #name 0 { position : absolute; left : 40 px; top: 152 px; } #name 1 { position : absolute; left : 185 px; top: 152 px; } #name 2 { position : relative; left : 178 px; top: -194 px; } </style> </head> <body> <! 절대적 위치 지정 : 문서의 왼쪽 위 점을 기준 (0, 0)으로 > <div id="name 0"><p>스위스 -- </p></div> <div id="name 1"><p>-- 오스트리아 </p></div> <p><img src="images/map. gif" width="250" height="258" alt="유럽지도" border="3"></p> <! 상대적 위치 지정> <div id="name 2"><p>체코 /</p> </div> </body> </html> 52
10장 동적 HTML w 레이어 감추기/보이기 함수 작성 • Netscape Navigator의 경우 function show. Layer(layer. ID) { document. layers[layer. ID]. visibility = "show" } function hide. Layer(layer. ID) { document. layers[layer. ID]. visibility = "hide" } • Internet Explorer의 경우 function show. Layer(layer. ID) { document. all[layer. ID]. style. visibility = "visible" } function hide. Layer(layer. ID) { document. all[layer. ID]. style. visibility = "hidden" } 57
10장 동적 HTML • 두 브라우저에서 모두 동작하게 하려면 function show. Layer(layer. ID) { if (n) document. layers[layer. ID]. visibility = "show" else if (e) document. all[layer. ID]. style. visibility = "visible" } function hide. Layer(layer. ID) { if (n) document. layers[layer. ID]. visibility = "hide" else if (e) document. all[layer. ID]. style. visibility = "hidden" } 58
10장 동적 HTML w 클릭하면 나타나는 메뉴 소스코드 <html> <head><title> 클릭하면 나타나는 메뉴 </title> <style> #title {position: absolute; left: 30; top: 30; } /* 메뉴의 제목에 해당하는 레이어 정의 */ #menu { position: absolute; left: 40; top: 110; visibility: hidden } /* 메뉴에 해당하는 레이어 정의 */ </style> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 sw=0 // 메뉴가 열려 있으면 1, 닫혀 있으면 0 59
10장 동적 HTML function show. Layer(layer. ID) { // 레이어 보이기 if (n) document. layers[layer. ID]. visibility = "show" else if (e) document. all[layer. ID]. style. visibility = "visible" } function hide. Layer(layer. ID) { // 레이어 감추기 if (n) document. layers[layer. ID]. visibility = "hide" else if (e) document. all[layer. ID]. style. visibility = "hidden" } function change. Menu(menu. ID) { // sw 값에 따라 메뉴 레이어 감추기/ 보이기 if (sw) { hide. Layer(menu. ID); sw=0; } else { show. Layer(menu. ID); sw=1 } } </script> </head> 60
10장 동적 HTML <body> <div id="title"> <a href="javascript: change. Menu('menu')"> <img src="title. jpg" border="0"></a> </div> <div id="menu"> <img src="subtitle. jpg" width="250" height="250"> </div> </body> </html> 61
10장 동적 HTML 10. 4. 3 레이어의 위치 옮기기 w 위치 옮기기 • 레이어의 위치를 지정하는 'left', 'top' 속성값을 변경 w 레이어의 위치 바꾸기 소스코드 <html> <head><title>레이어의 위치 바꾸기 </title> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 function init() { if (n) block = document. bus else if (e) block=bus. style } function move 1() { block. left = 110; block. top = 40 } // 다윈 function move 2() { block. left = 35; block. top = 160 } // 퍼스 function move 3() { block. left = 150; block. top = 150 } // 애들레이드 </script></head> 63
10장 동적 HTML <body onload="init()"> <p><img src="ausm. jpg"></p> <!-- 인라인스타일로 bus 레이어 정의 --> <div id="bus" style="position: absolute; top: 150; left: 150; > <p><img src="bus. gif"></p> </div> <form> <p><input type="button" value="다윈으로" onclick="move 1(); "> <input type="button" value="퍼스로" onclick="move 2(); "> <input type="button" value="애들레이드로" onclick="move 3(); "> </p> </form> </body> </html> 64
10장 동적 HTML w 팝아웃 메뉴 소스코드 <html> <head><title> Pop Out Menu </title> <style> #tab { position: absolute; left: 0; top: 30; } #menu { position: absolute; left: 0; top: 30; width: 263; visibility: hidden; } </style> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 sw=0 66
10장 동적 HTML function hide. Menu() { if (n) { document. menu. visibility="hide"; document. tab. left=0; } else if (e) { menu. style. visibility="hidden"; tab. style. left=0; } } function show. Menu() { if (n) { document. menu. visibility="show"; document. tab. left=263; } else if (e) { menu. style. visibility="visible"; tab. style. left=263; } } 67
10장 동적 HTML function change. Menu() { if (sw) { hide. Menu(); sw=0; } else { show. Menu(); sw=1 } } </script></head> <body> <div id="tab"> <p><a href="javascript: change. Menu()"> <img src="tab. jpg" width="14" height="328" border="0"> </a></p></div> <div id="menu"> <p><img src="popmenu. jpg" width="263" height="328"> </p></div> </body> </html> 68
10장 동적 HTML w 왼쪽에서 미끄러져 나오는 메뉴 소스코드 <html> <head><title> Slide Menu </title> <style> #tab { position: absolute; left: 0; top: 30; } #menu { position: absolute; left: -263; top: 30; } </style> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 sw=0 function init () { if (e) { menu. style. left=-263; } // 초기값 지정 71 tab. style. left=0; }
10장 동적 HTML function slide. In() { if (n) { document. menu. left+=5; document. tab. left+=5; if (document. tab. left<263) set. Timeout("slide. In()", 15) } else if (e) { menu. style. left = parse. Int(menu. style. left)+5; tab. style. left = parse. Int(tab. style. left)+5; if (parse. Int(tab. style. left)<263) set. Timeout("slide. In()", 15); } } 72
10장 동적 HTML function slide. Out() { if (n) { document. menu. left-=5; document. tab. left-=5; if (document. tab. left>0) set. Timeout("slide. Out()", 15) } else if (e) { menu. style. left = parse. Int(menu. style. left)-5; tab. style. left = parse. Int(tab. style. left)-5; if (parse. Int(tab. style. left)>0) set. Timeout("slide. Out()", 15); } } 73
10장 동적 HTML function change. Menu() { if (sw) { slide. Out(); sw=0; } else { slide. In(); sw=1 } } </script></head> <body> <div id="tab"> <p><a href="javascript: change. Menu()"> <img src="tab. jpg" width="14" height="328" border="0"></a></p></div> <div id="menu"> <p><img src="popmenu. jpg" width="263" height="328"></p></div> </body> </html> 74
10장 동적 HTML 10. 5 Netscape와 Explorer의 동적 HTML 비교 76
- Navigator internet
- Netscape communicator
- 1994 netscape navigator
- Gerald urquhart
- Netscape
- Step by step communicator
- Netscape plugin api
- Html
- Doctype html html head
- Bhtml?title=
- Doctype html html head
- Doctype html html head
- Html
- Html tags
- Vertical space in html
- 02.html?page=
- @arya ia:http://work4unity.in/haicantik.html
- Editoare html
- Https://kidshealth.org/en/kids/digestive-system.html
- Hspace in html
- Code doctype html
- Visualizing environmental science (doc or html) file
- Html form assignment
- Case mysteries in pathophysiology (doc or html) file
- ?????? ??? http work4unity in haicantik html
- Structure of html
- Xuanhien.wordpress
- Html tags 1991
- Dissecting a cow eye
- 다운로드 링크 만들기
- Pajączek html
- 01.html?page=
- Html body css
- Membuat garis html
- Slidetodoc
- Hp 12c
- Listas ordenadas en html
- Html relative vs absolute
- Html
- Ecs csus
- Bare bones html
- 01.html?site=
- Wildfleischuntersuchungsprotokoll
- Source code in html
- Singkatan css html
- Http://metrocosm.com/global-migration-map.html
- Html
- Structural markup html
- Slidetodoc
- Html select
- Pg 169
- Html
- Html 5 demo
- Galen.metapath
- Html que es
- Xuelemoe
- Swing xml
- How many protons are in o
- Html css
- Html
- Tabelle n
- Slidetodoc.com
- Varndeanplus
- How to make question tag
- Ics to html
- Groundwork css
- Digestion 5 steps
- Html ders notları
- Http ://stsp.creteil.iufm.fr/article89.html
- Html teksta noformēšana
- Bmi html
- @kuanlyna fatma:http://m.2265.com/down/132284.html
- Html jezik
- Css html
- Language
- Powerbi html viewer
- Html head profile
- Formulario html php
- History of html
- Index.php?str=