<frameset cols="n1[%],n2[%]" rows="n1[%],n2[%]" frameborder="1|0" bordercolor="color" framespacing="n" > ... </frameset> |
Листинг 10.1. Общий формат тега <frameset> |
Закрыть окно |
<?xml version="1.0" encoding="UTF-8"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Frameset Document</title> </head> <frameset cols="20%,80%"> ... </frameset> </html> |
Листинг 10.2. Определение frameset с двумя столбцами (фреймами) |
Закрыть окно |
<frameset rows="20%,80%"> ... </frameset> |
Листинг 10.3. Определение frameset с двумя строками (фреймами) |
Закрыть окно |
<frame src="url" name="framename" frameborder="1|n" bordercolor="color" scrolling="auto|yes|no" noresize Исключены: marginwidth="n" marginheight="n" /> |
Листинг 10.4. Общий формат тега <frame/> |
Закрыть окно |
<frameset cols="20%,80%"> <frame src="Menu.htm"/> <frame src="Home.htm"/> </frameset> |
Листинг 10.5. Предварительная загрузка фреймов страницами Web |
Закрыть окно |
<frameset cols="20%,80%"> <frame name="Frame1" src="Menu.htm"/> <frame name="Frame2" src="Home.htm"/> </frameset> |
Листинг 10.6. Фреймы с именами |
Закрыть окно |
<frameset cols="20%,80%"> <frame name="Frame1" src="Menu.htm" noresize/> <frame name="Frame2" src="Title.htm"/> </frameset> |
Листинг 10.7. Запрет перемещения границ |
Закрыть окно |
<frameset rows="15%,85%"> <frame name="Frame1" src="Banner.htm"/> <frameset cols="20%,80%"> <frame name="Frame2" src="Menu.htm"/> <frame name="Frame3" src="Document.htm"/> </frameset> </frameset> |
Листинг 10.8. Код вложенных фреймов |
Закрыть окно |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Seven Wonders of the World</title> </head> <frameset rows="20%,80%" frameborder="0" framespacing="0"> <frame src="Title.htm" scrolling="no"/> <frameset cols="20%,80%" frameborder="0" framespacing="0"> <frame src="Menu.htm"/> <frame src="Home.htm" name="Content"/> </frameset> </frameset> </html> |
Листинг 10.9. Код страницы множества фреймов |
Закрыть окно |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Menu Page</title> <style type="text/css"> body {background-color:#F0F0F0} h2 {text-align:center} </style> </head> <body> <h2>Menu</h2> <div> <a href="Artemis.htm" target="Content">Artemis</a><br/> <a href="Colossus.htm" target="Content">Colossus</a><br/> <a href="Gardens.htm" target="Content">Gardens</a><br/> <a href="Halicarnassus.htm" target="Content">Halicarnassus</a><br/> <a href="Lighthouse.htm" target="Content">Lighthouse</a><br/> <a href="Pyramid.htm" target="Content">Pyramid</a><br/> <a href="Zeus.htm" target="Content">Zeus</a><br/> </div> </body> </html> |
Листинг 10.10. Код для направления ссылок в именованный фрейм |
Закрыть окно |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Title Page</title> <style type="text/css"> body {background-color:#F0F0F0} h1 {text-align:center} </style> </head> <body> <h1> Seven Wonders of the World</h1> </body> </html> |
Листинг 10.11. Код страницы заголовка приложения |
Закрыть окно |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Artemis.htm Page</title> <style type="text/css"> body {background-color:black; color:white"} </style> </head> <body> <div> <img src="Artemis.gif" alt="Temple of Artemis at Ephesus"/><br/> The Temple of Artemis at Ephesus<br/> </div> </body> </html> |
Листинг 10.12. Код примера страницы приложения с контентом |
Закрыть окно |
<a href="Page.htm" target="_top"> Open Page in Full Window</a> |
Листинг 10.13. Направление страницы в полное окно браузера |
Закрыть окно |
<a href="Page.htm" target="_blank"> Open Page in New Window</a> |
Листинг 10.14. Направление страницы в новое окно браузера |
Закрыть окно |
<iframe src="url" name="framename" frameborder="1|0" scrolling="auto|yes|no" Исключены: width="n|n%" height="n|n%" align="left|right" align="top|middle|bottom" vspace="n" hspace="n" marginwidth="n" marginheight="n" /> </iframe> |
Листинг 10.15. Общая форма тега <iframe> |
Закрыть окно |
<iframe name="TheFrame" scrolling="no" style="width:225px; height:200px; float:right; margin-left:15px; border:ridge 5px"> </iframe> <div> <a href="Artemis.htm" target="TheFrame">Artemis</a> <a href="Colossus.htm" target="TheFrame">Colossus</a> <a href="Gardens.htm" target="TheFrame">Gardens</a> <a href="Halicarnassus.htm" target="TheFrame">Halicarnassus</a> <a href="Lighthouse.htm" target="TheFrame">Lighthouse</a> <a href="Pyramid.htm" target="TheFrame">Pyramid</a> <a href="Zeus.htm" target="TheFrame">Zeus</a> </div> |
Листинг 10.16. Код линейного фрейма |
Закрыть окно |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Seven Wonders of the World - Artemis Page</title> <style type="text/css"> body {margin:0px; background-color:#F0F0F0} h1 {text-align:center} table {border:outset 1px; width:100%; height:100%} table td {border:inset 2px; vertical-align:top; padding:5px} table td#TITLE {height:40px; font-size:18pt; font-weight:bold; text-align:center} table td#MENU {width:20%} </style> </head> <body> <table> <tr> <td id="TITLE" colspan="2"> Seven Wonders of the World </td> </tr> <tr> <td id="MENU"> <h3>Menu</h3> <div> <a href="Home.htm">Home</a><br/> <a href="Artemis.htm">Artemis</a><br/> <a href="Colossus.htm">Colossus</a><br/> <a href="Gardens.htm">Gardens</a><br/> <a href="Halicarnassus.htm">Halicarnassus</a><br/> <a href="Lighthouse.htm">Lighthouse</a><br/> <a href="Pyramid.htm">Pyramid</a><br/> <a href="Zeus.htm">Zeus</a><br/> </div> </td> <td> <img src="Artemis.gif" alt="Temple of Artemis"/><br/> The Temple of Artemis at Ephesus </td> </tr> </table> </body> </html> |
Листинг 10.17. Код структуры таблицы для эмуляции набора фреймов |
Закрыть окно |
<div style="width:350px; height:250px; float:left; padding:10px; margin-right:10px; background-color:black; color:white; border:ridge 5px"> <img id="Picture" src="Artemis.gif"/><br/> <span id="Text"> Temple of Artemis at Ephesus</span> </div> |
Листинг 10.18. Код раздела, содержащий теги <img/> и <span> |
Закрыть окно |
<a href="javascript:" onclick="Picture.src='Artemis.gif'; Picture.alt='Temple of Artemis at Ephesus'; Text.innerText='Temple of Artemis at Ephesus'">Artemis</a><br/> <a href="javascript:" onclick="Picture.src='Colossus.gif'; Picture.alt='Colossues of Rhodes'; Text.innerText='Colossus of Rhodes'">Colossus</a><br/> <a href="javascript:" onclick="Picture.src='Gardens.gif'; Picture.alt='Hanging Gardens of Babylon'; Text.innerText='Hanging Gardens of Babylon'">Gardens</a><br/> <a href="javascript:" onclick="Picture.src='Halicarnassus.gif'; Picture.alt='Mausoleum at Halicarnasus'; Text.innerText='Mausoleum at Halicarnasus'">Halicarnassus</a><br/> <a href="javascript:" onclick="Picture.src='Lighthouse.gif'; Picture.alt='Lighthouse of Alexandria'; Text.innerText='Lighthouse of Alexandria'">Lighthouse</a><br/> <a href="javascript:" onclick="Picture.src='Pyramid.gif'; Picture.alt='Great Pyramid of Giza'; Text.innerText='Great Pyramid of Giza'">Pyramid</a><br/> <a href="javascript:" onclick="Picture.src='Zeus.gif'; Picture.alt='Statue of Zeus at Olympia'; Text.innerText='Statue of Zeus at Olympia'">Zeus</a><br/> |
Листинг 10.19. Код ссылок для замены изображений и текста |
Закрыть окно |