Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Практические аспекты разработки веб-ресурсов. Учебное пособие

.pdf
Скачиваний:
0
Добавлен:
08.09.2026
Размер:
2 Мб
Скачать
<!--далее следуют строки с данными (первая ячейка каждой строки название филиала-->
<TR><TD>Филиал 1<TD>123123<TD>323233<TD>323453<TD>231423 <TD>323212<TD>243673
<TR><TD>Филиал 2<TD>223523<TD>225243<TD>314423<TD>212445 <TD>373812<TD>274673
<TR><TD>Филиал 3<TD>183123<TD>186834<TD>323453<TD>231423 <TD>323212<TD>243673
<TR><TD>Филиал 4<TD>125163<TD>334343<TD>123553<TD>167423 <TD>254412<TD>132367
<TBODY align = right>
<!--Строка с итоговыми данными-->
<TR><TD>Всего:<TD>654932<TD>1069653<TD>1084882<TD>842714<TD>127
4648<TD>894386
</TABLE>
Тема 7. Пример 7.11
<HTML>
<HEAD>
<TITLE>Страница, построенная на таблицах</TITLE>
</HEAD>
<BODY>
<TABLE width = «100%»>
<COL width = 100 align = left valign = top bgcolor = yellow> <!--Столбец с гиперссылками-->
<COL width = «*» align = justify valign = top> <!--Столбец с основной информацией-->
<TR>
<TD bgcolor = white>
<TD>
<TABLE width = «100%»>
<COL width = «*» align = center>
<COL width = 57> <!--Столбец растягивается по ширине изображения-->
<TR>
<TD bgcolor = yellow><H1>7. Таблицы</H1>
31
<TD><IMG src = «7.11.html.files/logo.jpg»>
</TABLE>
<TR>
<TD> <!--В первом столбце помещаются гиперссылки примеры-->
<P><A href = «7.1.html»>Пример 7.1</A>
<P><A href = «7.2.html»>Пример 7.2</A>
<P><A href = «7.3.html»>Пример 7.3</A>
<P><A href = «7.4.html»>Пример 7.4</A>
<P><A href = «7.5.html»>Пример 7.5</A>
<P><A href = «7.6.html»>Пример 7.6</A>
<P><A href = «7.7.html»>Пример 7.7</A>
<P><A href = «7.8.html»>Пример 7.8</A>
<P><A href = «7.9.html»>Пример 7.9</A>
<P><A href = «7.10.html»>Пример 7.10</A>
<TD> <!--Весь текст помещается в одной ячейке таблицы-->
<P>Таблицы в том виде, в котором они реализованы в HTML, яв- ляются замечательным
средством упорядочивания данных. Кроме группировки информа- ции, таблицы являются
чрезвычайно полезными при разработке дизайна HTML-документа. В данном разделе
рассмотрены оба способа использования таблиц. Но для начала раз- беремся с тем,
как добавлять таблицы в HTML-документ, а также рассмотрим воз- можности,
предоставляемые HTML для работы с таблицами.
<H2>Структура простейшей таблицы</H2>
<P>Таблица в HTML представляется множеством ячеек, которые заключены в строки.
Совокупность же всех строк и образует целую таблицу. Для обозна- чения таблицы
используется HTML-элемент TABLE, который задается парными обязательными
тегами <TABLE> и </TABLE>.
<P>Строки таблицы задаются HTML-элементом TR (парные теги <TR> и </TR>,
32
закрывающий тег не обязателен). Ячейки в простейшем случае за- даются
HTML-элементом TD (парные теги <TD> и </TD>, за- крывающий тег не обязателен).
</TABLE>
</BODY>
</HTML>
Тема 8. Пример 8.1
Файл Index.html
<HTML>
<HEAD>
<TITLE>Сайт с фреймами</TITLE>
Тема 8
</HEAD>
<FRAMESET cols = «200, *»>
<FRAMESET rows = «70%, *»>
<FRAME src = «page1.html»>
<FRAME src = «page2.html»>
</FRAMESET>
<FRAME src = «page3.html»>
</FRAMESET>
</HTML>
Файл page1.html
<BODY>
<H1>Содержимое первой страницы</H1>
</BODY>
Файл page2.html
<BODY>
<H2>Содержимое второй страницы</H2>
</BODY>
Файл page3.html
33
<BODY>
<H3>Содержимое третьей страницы</H3>
</BODY>
Тема 8. Пример 8.2.1
Файл Index.html
<HTML>
<HEAD>
<TITLE>Новый сайт с фреймами</TITLE>
</HEAD>
<FRAMESET cols = «130, *»>
<FRAME src = «links.html» frameborder = 0>
<FRAMESET rows = «65, *»>
<FRAME src = «title.html» scrolling = no marginwidth = 0 marginheight = 0 frameborder = 0>
<FRAME src = «start.html» name = textframe frameborder = 0>
</FRAMESET>
</FRAMESET>
</HTML>
Тема 8. Пример 8.2.2
Файл title.html
<HTML>
<TITLE>Заголовок сайта</TITLE>
<BODY bgcolor = yellow>
<TABLE width = «100%»>
<COL width = «*»>
<COL width = 57>
<TR height = 57>
<TD align = center><H1>7. Таблицы</H1>
<TD><IMG src = «logo.jpg»>
</TABLE>
</BODY>
<HTML>
34
Тема 8. Пример 8.2.3
Файл start.html
<BODY>
<P>Таблицы в том виде, в котором они реализованы в HTML, явля- ются замечательным
средством упорядочивания данных. Кроме группировки информа- ции, таблицы являются
чрезвычайно полезными при разработке дизайна HTML-документа. В данном разделе
рассмотрены оба способа использования таблиц. Но для начала раз- беремся с тем,
как добавлять таблицы в HTML-документ, а также рассмотрим воз- можности,
предоставляемые HTML для работы с таблицами.
<H2>Структура простейшей таблицы</H2>
<P>Таблица в HTML представляется множеством ячеек, которые заключены в строки.
Совокупность же всех строк и образует целую таблицу. Для обозна- чения таблицы
используется HTML-элемент TABLE, который задается парными обязательными
тегами <TABLE> и </TABLE>.
<P>Строки таблицы задаются HTML-элементом TR (парные теги <TR> и </TR>,
закрывающие тег не обязательный). Ячейки в простейшем случае задаются
HTML-элементом TD (парные теги <TD> и </TD>, за- крывающий тег не обязателен).
</BODY>
Тема 8. Пример 8.2.4
Файл links.html
Примечание: файлы типа 7.1.html и т.д должны быть размещены в паке
Examples
<HTML>
<TITLE>Ссылкы на примеры</TITLE>
<BODY bgcolor = yellow>
35
<P><A href = «start.html» target = textframe>Текст главы</A>
<HR>
<P><A href = «examples/7.1.html» target = textframe>Пример 7.1</A>
<P><A href = «examples/7.2.html» target = textframe>Пример 7.2</A>
<P><A href = «examples/7.3.html» target = textframe>Пример 7.3</A>
<P><A href = «examples/7.4.html» target = textframe>Пример 7.4</A>
<P><A href = «examples/7.5.html» target = textframe>Пример 7.5</A>
<P><A href = «examples/7.6.html» target = textframe>Пример 7.6</A>
<P><A href = «examples/7.7.html» target = textframe>Пример 7.7</A>
<P><A href = «examples/7.8.html» target = textframe>Пример 7.8</A>
<P><A href = «examples/7.9.html» target = textframe>Пример 7.9</A>
<P><A href = «examples/7.10.html» target = textframe>Пример 7.10</A>
</BODY>
</HTML>
Тема 8. Пример 8.3.1
Файл Index.html
<HTML>
<HEAD>
<TITLE>Новый сайт с фреймами</TITLE>
</HEAD>
<FRAMESET cols = «130, *»>
<FRAME src = «links.html» frameborder = 0>
<FRAMESET rows = «65, *»>
<FRAME src = «title.html» scrolling = no marginwidth = 0 marginheight = 0 frameborder = 0>
<FRAME src = «start.html» name = textframe frameborder = 0>
</FRAMESET>
</FRAMESET>
</HTML>
Тема 8. Пример 8.3.2
Файл title.html
<HTML>
<TITLE>Заголовок сайта</TITLE>
<BODY bgcolor = yellow>
<TABLE width = «100%»>
<COL width = «*»>
36
<COL width = 57>
<TR height = 57>
<TD align = center><H1>7. Таблицы</H1>
<TD><IMG src = «logo.jpg»>
</TABLE>
</BODY>
<HTML>
Тема 8. Пример 8.3.3
Файл start.html
<BODY>
<P>Таблицы в том виде, в котором они реализованы в HTML, явля- ются замечательным
средством упорядочивания данных. Кроме группировки информа- ции, таблицы являются
чрезвычайно полезными при разработке дизайна HTML-документа. В данном разделе
рассмотрены оба способа использования таблиц. Но для начала раз- беремся с тем,
как добавлять таблицы в HTML-документ, а также рассмотрим воз- можности,
предоставляемые HTML для работы с таблицами.
<H2>Структура простейшей таблицы</H2>
<P>Таблица в HTML представляется множеством ячеек, которые заключены в строки.
Совокупность же всех строк и образует целую таблицу. Для обозна- чения таблицы
используется HTML-элемент TABLE, который задается парными обязательными
тегами <TABLE> и </TABLE>.
<P>Строки таблицы задаются HTML-элементом TR (парные теги <TR> и </TR>,
закрывающие тег не обязательный). Ячейки в простейшем случае задаются
HTML-элементом TD (парные теги <TD> и </TD>, за- крывающий тег не обязателен).
</BODY>
37
Тема 8. Пример 8.3.4
Файл links.html
Примечание: файлы типа 7.1.html и т.д должны быть размещены в паке
Examples
<HTML>
<HEAD>
<TITLE>Ссылки на примеры</TITLE>
<BASE target = textframe>
</HEAD>
<BODY bgcolor = yellow>
<P><A href = «start.html»>Текст главы</A>
<HR>
<P><A href = «examples/7.1.html»>Пример 7.1</A>
<P><A href = «examples/7.2.html»>Пример 7.2</A>
<P><A href = «examples/7.3.html»>Пример 7.3</A>
<P><A href = «examples/7.4.html»>Пример 7.4</A>
<P><A href = «examples/7.5.html»>Пример 7.5</A>
<P><A href = «examples/7.6.html»>Пример 7.6</A>
<P><A href = «examples/7.7.html»>Пример 7.7</A>
<P><A href = «examples/7.8.html»>Пример 7.8</A>
<P><A href = «examples/7.9.html»>Пример 7.9</A>
<P><A href = «examples/7.10.html»>Пример 7.10</A>
</BODY>
</HTML>
Тема 8. Пример 8.4.1
Файл index.html
<HTML>
<HEAD>
<TITLE>Новый сайт с фреймами</TITLE>
</HEAD>
<FRAMESET cols = «130, *»>
<FRAME src = «links.html» frameborder = 0>
<FRAMESET rows = «65, *»>
<FRAME src = «title.html» scrolling = no marginwidth = 0
marginheight = 0 frameborder = 0>
<FRAME src = «start.html» name = textframe frameborder = 0>
38
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<STRONG>Внимание!</STRONG> Ваш браузер не поддерживает фрей- мы. Для
открытия версии сайта, не использующей фреймы, жмите
<A href = «...»>сюда</A>.
</NOFRAMES>
</HTML>
Тема 8. Пример 8.4.2
Файл title.html
<HTML>
<TITLE>Заголовок сайта</TITLE>
<BODY bgcolor = yellow>
<TABLE width = «100%»>
<COL width = «*»>
<COL width = 57>
<TR height = 57>
<TD align = center><H1>7. Таблицы</H1>
<TD><IMG src = «logo.jpg»>
</TABLE>
</BODY>
<HTML>
Тема 8. Пример 8.4.3
Файл start.html
<BODY>
<P>Таблицы в том виде, в котором они реализованы в HTML, явля- ются замечательным
средством упорядочивания данных. Кроме группировки информа- ции, таблицы являются
чрезвычайно полезными при разработке дизайна HTML-документа. В данном разделе
рассмотрены оба способа использования таблиц. Но для начала раз- беремся с тем,
как добавлять таблицы в HTML-документ, а также рассмотрим воз- можности,
39
предоставляемые HTML для работы с таблицами.
<H2>Структура простейшей таблицы</H2>
<P>Таблица в HTML представляется множеством ячеек, которые заключены в строки.
Совокупность же всех строк и образует целую таблицу. Для обозна- чения таблицы
используется HTML-элемент TABLE, который задается парными обязательными
тегами <TABLE> и </TABLE>.
<P>Строки таблицы задаются HTML-элементом TR (парные теги <TR> и </TR>,
закрывающие тег не обязательный). Ячейки в простейшем случае задаются
HTML-элементом TD (парные теги <TD> и </TD>, за- крывающий тег не обязателен).
</BODY>
Тема 8. Пример 8.4.4
Файл links.html
Примечание: файлы типа 7.1.html и т.д должны быть размещены в паке
Examples
<HTML>
<TITLE>Ссылкы на примеры</TITLE>
<BODY bgcolor = yellow>
<P><A href = «start.html» target = textframe>Текст главы</A>
<HR>
<P><A href = «examples/7.1.html» target = textframe>Пример 7.1</A>
<P><A href = «examples/7.2.html» target = textframe>Пример 7.2</A>
<P><A href = «examples/7.3.html» target = textframe>Пример 7.3</A>
<P><A href = «examples/7.4.html» target = textframe>Пример 7.4</A>
<P><A href = «examples/7.5.html» target = textframe>Пример 7.5</A>
<P><A href = «examples/7.6.html» target = textframe>Пример 7.6</A>
<P><A href = «examples/7.7.html» target = textframe>Пример 7.7</A>
<P><A href = «examples/7.8.html» target = textframe>Пример 7.8</A>
<P><A href = «examples/7.9.html» target = textframe>Пример 7.9</A>
<P><A href = «examples/7.10.html» target = textframe>Пример 7.10</A>
</BODY>
</HTML>
40
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]