WEB-ТЕХНОЛОГИИ
.pdf<html>
<!-- Web-страница о технических характеристиках пластинчатых теплообменников --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ru">
<title>Технические характеристики (тип 3)</title> <!-- heat_plate.html --> </head>
<body>
<h3>Технические характеристики пластинчатых теплообменников</h3>
<table border=1 width=100% id=table1 frame=box cellSpacing=0 borderstyle=Solid bordercolor=#сссссс>
<thead align = center><tr> <td width=7%>Модель</td> <td width=9%>Высота, мм</td> <td width=9%>Ширина, мм</td>
<td width=12%>По вертикали, мм</td> <td width=12%>По горизонтали, мм</td> <td width=12%>Макс. расход, т/ч</td>
<td width=13%>Макс. температура, °С</td> <td width=13%>Макс. давление, бар</td>
<td width=13%>Диаметр соединения, мм</td> </tr></thead>
<tbody align = center> <tr>
<th align = left>T2</th> <td>380</td> <td>140</td> <td>298</td> <td>50</td> <td>5,4</td> <td>150</td> <td>16</td> <td>19</td>
</tr>
<tr>
<th align = left>M3</th> <td>480</td> <td>180</td> <td>357</td> <td>60</td> <td>3,9</td> <td>165</td> <td>16</td> <td>32</td>
</tr>
<tr>
<th align = left>M6</th> <td>920</td> <td>320</td> <td>640</td> <td>140</td> <td>15,0</td> <td>165</td> <td>25</td> <td>60</td>
</tr>
<tr>
<th align = left>M10</th> <td>1084</td> <td>470</td> <td>719</td> <td>225</td> <td>50,0</td> <td>160</td> <td>25</td> <td>100</td>
</tr>
<tr>
<th align = left>M15</th> <td>1885</td> <td>610</td> <td>1294</td> <td>298</td> <td>80,0</td> <td>160</td> <td>30</td> <td>140</td>
</tr>
<tr>
<th align = left>T20</th> <td>2100</td> <td>780</td> <td>1438</td> <td>353</td> <td>180,0</td> <td>160</td> <td>30</td> <td>210</td>
</tr>
<tr>
<th align = left>M30</th> <td>2882</td> <td>1150</td> <td>1842</td> <td>596</td> <td>450,0</td> <td>140</td> <td>25</td> <td>331</td>
</tr>
</tbody>
</table>
</body>
</html>
21
Контрольная работа 3
Цель:
Ознакомление с системой ссылок между html-страницами, ссылками внутри страницы, ссылками на внешние сайты, ссылками на внешние файлы,
ссылками на почту, вставкой графической информации.
Задание:
В html-страницы вставить ссылки на графические файлы, перекрёстные ссылки между html-страницами, разработанными в рамках информационной подсистемы, ссылки на внешние сайты и внешние файлы.
Требования:
Подготовить графические файлы об устройстве аппаратов выбранных типов. Добавить в информационную подсистему страницы: 9– описание аппаратов выбранных типов для проведения процесса с картинками, 10– сведения об авторе, 11– страницу оглавления.
На странице 9 вставить ссылки к графическим файлам, ссылки к страницам технических характеристик каждого типа аппарата, ссылки к странице сведений о процесса и к странице сведений о модели, ссылки-
закладки к описанию каждого типу аппарата внутри страницы.
На странице 10 вставить ФИО автора, информацию о группе, сведения о месте работы, ссылку на фотографию автора, ссылку на E-mail автора,
ссылку на отчёт по работе в формате Word (для скачивания) и в формате PDF (для просмотра). Использовать оригинальный дизайн.
На странице 11 вставить ссылки к ранее разработанным страницам информационной подсистемы и ссылки на внешние сайты, которые использовались для скачивания информации о процессе.
Во все страницы, кроме страницы 9, вставить ссылку на страницу 11 –
оглавление.
Оформление:
1.Графический материал о процессе
2.Скриншоты web-страниц
3.Распечатка содержания страниц в html-коде
4.Структура информационной подсистемы в виде графа
5.Выводы по работе
22
Пример выполнения контрольной работы 3
Графический материал:
Секционный |
Кожухотрубчатый |
Пластинчатый |
теплообменник |
теплообменник |
теплообменник |
Листинги html-кодов и скриншоты:
23
<html>
<!-- Web-страница о выбранных типах аппаратов для проведения процесса --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<meta http-equiv="Content-Language" content="ru"> |
|
<title>Выбранные типы аппаратов</title> |
<!-- heat_apparatus.html --> |
</head>
<body>
<h3>Выбранные типы теплообменных аппаратов</h3>
<p>Процессы теплообмена осуществляются в теплообменных аппаратах различных типов и конструкций. По способу передачи тепла теплообменные аппараты делят на <i>поверхностные</i> и <i>смесительные</i>. В <u>поверхностных аппаратах</u> рабочие среды обмениваются теплом через стенки из теплопроводного материала, а в <u>смесительных аппаратах</u> тепло передается при непосредственном перемешивании рабочих сред.</p>
<p>Основными конструктивными типами являются: <!-- Ссылки внутри страницы --> <a href="#Cекционные">секционные</a>,
<a href="#Кожухотрубчатые">кожухотрубчатые</a>,
<a href="#Пластинчатые">пластинчатые</a> теплообменники</p>
<hr> <h4><a name="Cекционные">Cекционные теплообменники</a></h4>
<p>Cекционные теплообменники состоят из последовательно соединенных элементов – секций. Сочетание нескольких элементов с малым числом труб соответствует принципу многоходового кожухотрубчатого аппарата, работающего на наиболее выгодной схеме – противоточной. Элементные теплообменники эффективны в случае, когда теплоносители движутся с соизмеримыми скоростями без изменения агрегатного состояния.</p>
24
<center><img border="0" src="heat_picture_section.gif" width="246" height="162"> </center>
<p>Отсутствие перегородок снижает гидравлические сопротивления и уменьшает степень загрязнения межтрубного пространства. Однако по сравнению с многоходовыми кожухотрубчатыми теплообменниками элементные теплообменники менее компактны и более дороги из-за увеличения числа дорогостоящих элементов аппарата: трубных решеток, фланцевых соединений, компенсаторов.</p>
<p><a href="heat_section.html">Технические характеристики секционных теплообменников</a></p>
<hr> <h4><a name="Кожухотрубчатые">Кожухотрубчатые теплообменники</a></h4>
<p>Основными элементами кожухотрубчатых теплообменников являются пучки труб, трубные решетки, корпус, крышки, патрубки. Концы труб крепятся в трубных решетках развальцовкой, сваркой и пайкой.Для увеличения скорости движения теплоносителей с целью интенсификации теплообмена нередко устанавливают перегородки как и трубном, так и межтрубном пространствах.</p>
<center><img border="0" src="heat_picture_shell_tube.gif" width="280" height="149"> </center>
<p>Кожухотрубчатые теплообменники могут быть вертикальными, горизонтальными и наклонными в соответствии с требованиями технологического процесса или удобства монтажа. В зависимости от неличины температурных удлинений трубок и корпуса применяют кожухотрубчатые теплообменники жесткий, полужесткой и нежесткой конструкции.</p>
<p><a href="heat_shell_tube.html">Технические характеристики кожухотрубчатых теплообменников</a></p>
<hr> <h4><a name="Пластинчатые">Пластинчатые теплообменники</a></h4>
<p>Пластинчатые теплообменники состоят из отдельных пластин, разделенных резиновыми прокладками, двух концевых камер, рамы и стяжных болтов<i>.</i> Пластины штампуют из тонколистовой стали (толщина 0,7 мм). Для увеличения поверхности теплообмена и турбулизации потока теплоносителя проточную часть пластин выполняют гофрированной или ребристой, причем гофры могут быть горизонтальными или расположены "в елку". К пластинам приклеивают резиновые прокладки круглой и специальной формы для герметизации конструкции; теплоноситель направляют либо вдоль пластины, либо через отверстие в следующий канал.</p>
<center><img border="0" src="heat_picture_plate.gif" width="235" height="138"> </center>
<p>Движение теплоносителей в пластинчатых теплообменниках может осуществляться прямотоком, противотоком и по смешанной схеме. Поверхность теплообмена одного аппарата может из-меняться от 1 до 160 м<sup>2</sup>. В пластинчатых теплообменниках температура теплоносителя ограничивается 150°С (с учетом свойств резиновой прокладки), давление не должно превышать 10 кгс/см<sup>2</sup>.</p>
<p><a href="heat_plate.html">Технические характеристики пластинчатых теплообменников</a></p>
<hr>
<!-- Ссылки на другие страницы информационной подсистемы --> <p>Смотри также:</p>
<p><a href="heat_model.html">Модели процесса теплообмена</a></p> <p><a href="heat_about.html">Сведения о процессе теплообмена</a></p>
<p><a href="heat_list.html">Список литературы по процессу теплообмена</a></p>
</body>
</html>
25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ru">
<title>Сведения об авторе</title> <!-- heat_author.html --> </head>
<body topmargin = 4 bottommargin = 4 leftmargin = 8 rightmargin = 8 background="author_ground.jpg" text = #663300>
<font face="Arial" size = 4>
<p>Информационная подсистема разработана:</p>
<p>Cтудент: <big><u>Сидоров Иван Петрович</u></big> (группа 9880)</p>
<p>Фирма: ОАО «Вымпел» (услуги связи)</p>
<p><img border="2" src="author_foto.jpg" width="162" height="156"></p>
<p>E-mail: <a href = "mailto:sidorov@mail.ru">sidorov@mail.ru</a></p>
<p>Полный отчёт: <a href = report_sidorov.doc>скачать документ Word (35 Кб)</a>
открыть в формате: <a href = report_sidorov.pdf><img border="1" src="PDF.jpg" width="40" height="40"></a></p>
<p><a href="heat.html">Вернуться в оглавление</a></p>
<!-- Эта ссылка вставляется во все страницы информационной подсистемы -->
</font>
<address>Copyright © Сидоров И.П.<address> </body>
</html>
При щелчке мышью по ссылке на E-mail, браузер автоматически открывает
окно Outlook Express для ввода и отправки сообщения адресату:
26
При щелчке мышью по ссылке на файл формата PDF – 
, браузер автома-
тически открывает окно для просмотра документа Acrobat, из которого можно вернуться обратно к окну сведений об авторе:
При щелчке мышью по ссылке на файл документа Word, браузер автома-
тически открывает окно для скачивания файла:
27
При щелчке мышью по ссылке на оглавление, браузер переходит к окну
оглавления:
<html>
<!-- Web-страница Оглавления --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ru"> <title>Оглавление</title> <!-- heat.html -->
</head>
<body>
<p><big>Информационный сайт по процессу теплообмена.</big></p>
<p><a href="heat_about.html">Сведения о процессе теплообмена</a></p> <p><a href="heat_model.html">Модели процесса теплообмена</a></p>
<p><a href="heat_types.html">Типы аппаратов для проведения теплообмена</a></p> <p><a href="heat_apparatus.html">Секционные, кожухотрубчатые, пластинчатые
аппараты</a></p>
<p><a href="heat_list.html">Список литературы по процессу теплообмена</a></p> <p><a href="heat_term.html">Основные понятия по процессу теплообмена</a></p> <p><a href="heat_author.html">Сведения об авторе</a></p>
<p>Смотри также сайты:</p>
<p><a href="http://www.xumuk.ru">Химическая энциклопедия</a></p> <p><a href="http://dic.academic.ru/">Акакдемик энциклопедия</a></p>
<p><a href="http://www.edudic.ru/hie/4964/">Электронный справочник</a></p> <p><a href="http://ru.wikipedia.org/wiki">Википедия</a></p>
28
</body>
</html>
Ссылка на оглавление <A href="heat.html">Вернуться в оглавление</A>
должна быть вставлена во все страницы информационной системы, кроме страницы heat_apparatus.html. В страницы heat_types.html, heat_section.html, heat_shell_tube.html, heat_plate.html должна быть вставлена ссылка на страницу описания выбранных типов аппаратов вида:
<A href="heat_apparatus.html">Описание выбранных типов аппаратов</A>
Тогда, страницы формируют следующую структуру информационной
подсистемы описания процесса теплообмена.
Структура информационной подсистемы:
heat.html
heat_author.html heat_about.html heat_model.html heat_list.html heat_term.html heat_types.html
heat_apparatus.html
heat_section.html
heat_shell_tube.html
двусторонняя ссылка
односторонняя ссылка |
heat_plate.html |
Рисунок 1 – Структура информационной подсистемы
Выводы по работе:
В конце работы должны быть сделаны выводы об информативности и
эффективности разработанной системы.
29
Контрольные вопросы
1.Что такое WEB? Какие технологии используются для работы с WEB? Как происходит доступ к информации в WEB?
2.Что такое HTML и для чего он используется? Какую структуру имеют страницы на языке HTML?
3. Для чего используются теги: <!– – … – –>, <HTML>, <HEAD>, <BODY>,
<META>, <BASE>, <TITLE>, <ADDRESS>? Как их следует применять?
Какие они могут иметь атрибуты?
4.Для чего используются теги: <B>, <I>, <U>, <S>, <SUB>, <SUP>, <BIG>, <SMALL>, <TT>? Как их следует применять? Какие они могут иметь атрибуты?
5.Для чего используются теги: <STRONG>, <SAMP>, <LISTING>, <EM>, <CODE>, <CENTER>, <PRE>, <NOBR>? Как их следует применять?
Какие они могут иметь атрибуты?
6.Для чего используются теги: <P>, <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <HR>, <BR>? Как их следует применять? Какие они могут иметь атрибуты?
7.Для чего используются теги: <UL>, <OL>, <LI>, <DL>, <DT>, <DD>? Как их следует применять? Какие они могут иметь атрибуты?
8.Для чего используются теги: <FONT>, <BASEFONT>, <STYLE>, <SPAN>? Как их следует применять? Какие они могут иметь атрибуты?
Как создается таблица стилей?
9.Для чего используются теги: <TABLE>, <THEAD>, <TFOOT>, <TBODY>, <TR>, <TD>, <TH>? Как их следует применять? Какие они могут иметь атрибуты?
10.Как применятся тег <IMG> для вставки ссылок на графику? Какие он может иметь атрибуты?
11.Как применятся тег <A> для создания ссылок? Какие он может иметь атрибуты? Виды ссылок.
30