Построение навигационной системы на основе фреймов
Особенно часто фреймы используются для формирования статических изображений рекламы и создания фиксированных систем навигации. Общая планировка фреймов показана на рис. 6.6.
Разработку Web-сайтов с применением фреймов следует начинать с построения оболочки, представленной их множеством. Нам нужно создать вложенные фреймы, следовательно, требуются два документа.
Пример. Разделим все пространство на две части: рекламный фрейм с фиксированными размерами и нижнюю область для демонстрации данных. Размеры рекламного блока по высоте должны составлять 100 пикселов, их нельзя изменять, так как элемент прокрутки отсутствует. Все остальное пространство просмотра предполагается отвести под вторую строку фрейма:
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Navarro Family Recipes</title> </head>
<frameset rows="100, *">
<frame src="banner.html" name="banner" noresize="noresize" scrolling="no" />
<frame src="main.html" name="main" /> </frameset>
Помните, что первый документ с множеством фреймов должен включать не только определения frameset и frame, но и параметр nof rames, с помощью которого обеспечивается дополнительный доступ к браузерам, не поддерживающим фреймы. Итак, нужно вписать данные, посредством которых инициализируется содержимое каждого из трех фреймов, в одной секции nof rames:
<noframes> <body>
<div align="center"ximg src ="banner.gif" height="90" width="500"
alt="Navarro Family Recipes" />
</div>
<hl>Welcome!</hl>
<p>This Web site was created as convenient way to share my family's favorite recipes. They have been arranged by category in the list below. Feel free to use as many as you wish, but if you send them along, please do give the original author (noted in each file) attribution.</p> <p>Bon Appetit!</p> <ul>
<lixa href = <lixa href = <lixa <lixa
<lixa href =" soups, html" >Soups</ax/li> "bread . html" >Bread</ax/li>
'veggies .html" >Vegetables</ax/li>
a href = "beef .html">Beef</ax/li> a href =
"poultry.html">Poultry</ax/1i> <lixa href =" desserts, html ">Desserts</ах/li> </ul> </body> </noframes> </html>
В содержательной части документа автор сообщает, что эта Web-страница -удобный способ познакомить пользователей с рецептами блюд, которым отдается предпочтение в его семье. Все рецепты разбиты на категории, указанные в перечне. Пользователь свободен в выборе рецепта, однако если он в дальнейшем намерен поделиться с кем-то полученной информацией, то автор просит придерживаться оригинального названия продукта и желает приятного аппетита. Далее указаны описания продуктов (листинг 6.1).
Листинг 6.1. Программа создания Web-страницы, посвященной кулинарным рецептам
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtmll-frameset.dtd"> <html xmlns = "ht tp://www,w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Navarro Family Recipes</title> </head>
<frameset rows="100, *">
<frame src="banner.html" name="banner" noresize="noresize" scrolling="no" />
<frame src="main.html" name="main" />
</frameset> <noframes>
<body>
<div align="center"ximg src="banner.gif " height="90" width=" 500 " alt ="Navarro Family Recipes" />
</div>
<hl>Welcome!</hl>
<p>This Web site was created as convenient way to share my family's favorite recipes. They have been arranged by category in the list below. Feel free to use as many as you wish, but if you send them along, please do give the original author (noted in each file) attribution.</p> <p>Bon Appetit!</p> <ul>
<lixa href="soups.html">Soups</ax/li>
л j. i "bread. html" >Bread</ax/li>
veggies
html" >Vegetables</ax/li>
, html" >Beef </ax/li>
<lixa href = <lixa href = <lixa href="beef
<lixa href= "poultry .html">Poultry</ax/li> <lixa href =" desserts, html ">Desserts</ax /li> </ul> </body> </noframes> </html>
Теперь нужно разделить нижнюю часть экрана, на которую в первом файле указывает запись main. html, на две колонки: слева - панель для навигации по остальным страницам сайта, справа - содержание. Соответственно нижнее поле будет разбито на области, размеры которых составляют 20% и 80% от этого пространства (листинг 6.2).
Листинг 6.2. Программа main.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns ="ht tp://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Navigation and Content: Navarro Family Recipes</title> </head>
<frameset cols="20%, 80%">
<frame src="nav.html" name="nav" />
<frame src="content.html" name="content" />
</frameset>
</html>
Построение оболочки завершено. Приступим к созданию содержательной части исходных фреймов. Необходимы следующие файлы: banner.html, nav.html, content.html.
Файл banner.html состоит из единственного графического изображения в центре страницы (листинг 6.3).
Совет Страницы с содержательной частью на сайте, структура которо -
го основана на фреймах, создаются при помощи типов документов Strict либо Transitional, но не Frameset.
ЛИСТИНГ 6.3. Код документа banner.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Navarro Family Recipes</title>
</head>
<body>
<div align="center"ximg src="banner.gif " height="90" width="500"
alt="Navarro Family Recipes" /></div>
</body>
</html>
Ссылки во фрейме навигации указывают на документы во фреймах для отображения содержательной информации. Следовательно, значение атрибута target должно указывать на этот фрейм (листинг 6.4).
ЛИСТИНГ 6.4. Документ nav.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3С//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns ="ht tp://www,w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Navarro Family Recipes</title>
</head>
<body>
<pxb>Recipe Categories</bx/p> <ul>
<lixa href = <lixa href:
<lixa href ="beef .html" target= " content" >Beef</ах/li>
<lixa 1 - n 1 1 ' n'
<lixa href ="soups.html" target= " content" >Soups</ax/li>
1 "bread.html" target= " content" >Bread</ax/li>
"veggies.html" target="content">Vegetables</ax/li>
a href: "poultry.html" target="content">Poultry</ax/li> <lixa href =" desserts .html" target =" content ">Desserts</ax/li> </ul> </body> </html>
Чтобы завершить работу, осталось только написать начальную страницу для фрейма с содержательной информацией (листинг 6.5).
Листинг 6.5. Файл content.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Navarro Family Recipes</title>
</head>
<body>
<h2>Welcome!</h2>
<p>This Web site was created as convenient way to share my family's favorite recipes. They have been arranged by category in the list below. Feel free to use as many as you wish, but if you send them along, please do give the original author (noted in each file) attribution.</p> <p>Bon Appetit!</p> </body> </html>
Итак, первая Web-страница готова для демонстрации в браузере (рис. 6.7).
Каждый из документов, обращение к которым осуществляется из навигационной панели nav.html, создается аналогичным способом с применением типа документа XHTML 1.0 Transitional (листинги 6.6-6.11).
Листинг 6.6. Документ soups.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns = "ht tp://www,w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Soup Recipes</title>
</head>
<body>
<h2 align="center">Soups</h2>
<ulxlixa href="ccchowder . html" >Chicken Corn Chowder</ax/li>
<lixa href="pea.html">Split Pea</ax/li>
<lixa href="cnoodle.html">Mom's Chicken Noodle</ax/li>
</ul>
</body>
</html>
Листинг 6.7. Документ bread.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3С//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns = "ht tp://www,w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Bread Recipes</title>
</head>
<body>
<h2 align="center">Bread</h2>
<ulxlixa href = " sour .html" >Sourdough</ax/li>
<lixa href = " 7grain . html" >Hearty Seven Grain</ax/li>
<lixa href="rye.html">Jewish Rye</ax/li>
</ul>
</body>
</html>
Листинг 6.8. Документ veggies.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3С//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns = "ht tp://www,w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Vegetable Recipes</title>
</head>
<body>
<h2 align="center">Vegetables</h2>
alxlixa href ="creamedcorn .html">Creamed Corn</ax/li>
<lixa href ="glazedcarrots . html" >Glazed Carrots</ax/li>
<lixa href="asianbeans .html">Asian Roasted Green Beans</ax/li>
</ul>
</body>
</html>
Листинг 6.9. Документ beef.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Beef Recipes</title>
</head>
<body>
<h2 align="center">Beef</h2>
<ulxlixa href="tritip.html">Monterey Tri-Tip</ax/li>
<lixa href="fajitas.html">Steak Faj itas</ax/li>
<lixa href="ribroast . html" >Standing Rib Roast</ax/li>
</ul>
</body>
</html>
Листинг 6.10. Документ poultry.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Poultry Recipes</title>
</head>
<body>
<h2 align="center">Poultry</h2>
<ulxlixa href ="hmchicken.html ">Ann's Honey Mustard Chicken</ ax/li>
<lixa href="tchicken.html">Teriyaki Chicken</ax/li>
<lixa href="picatta.html">Chicken Picatta</ax/li>
</ul>
</body>
</html>
Листинг 6.11. Программа desserts.html
<?xml version="l.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"> <head>
<title>Desserts Recipes</title>
</head>
<body>
<h2 align="center">Desserts</h2>
<ulxlixa href ="chocmouse. html ">Chocolate Mousse</ax/li>
<lixa href = "peanutpie . html" >Peanut Butter Pie</ax/li>
<lixa href ="peaches . html" >Peaches and Cream</ax/li>
</ul>
</body>
</html>
Примечание В целях экономии места в книге не приводятся сами рецепты. Функциональное назначение сайта - разместить во фреймах для информации содержимое документа, выбранного в навигационной панели.
Написанием всех перечисленных файлов создание сайта заканчивается. На следующем этапе необходимо его протестировать: вызвать отображение каждой страницы во фрейме для демонстрации содержательной информации (в правом углу экрана), щелкнув мышью по соответствующей категории в панели навигации по сайту (рис. 6.8).
Опубликовал vovan666
April 08 2013 14:54:59 ·
0 Комментариев ·
2797 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
