Общий формат тега

Листинг 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 с двумя столбцами (фреймами)

Закрыть окно

Листинг 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/>

Закрыть окно

Листинг 10.5. Предварительная загрузка фреймов страницами Web

Закрыть окно

Листинг 10.6. Фреймы с именами

Закрыть окно

Листинг 10.7. Запрет перемещения границ

Закрыть окно

Листинг 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. Код для направления ссылок в именованный фрейм

Закрыть окно

Листинг 10.11. Код страницы заголовка приложения

Закрыть окно

Листинг 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. Направление страницы в новое окно браузера

Закрыть окно

Листинг 10.15. Общая форма тега <iframe>

Закрыть окно

Листинг 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. Код ссылок для замены изображений и текста

Закрыть окно

Содержание раздела