Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Практические аспекты разработки веб-ресурсов. Учебное пособие
.pdf
<!--далее следуют строки с данными (первая ячейка каждой строки -название филиала-->
<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
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
