Интернет технологии. Методика и практика создания web-страниц и web-сайтов

В.Л. Гренков

 

ИНТЕРНЕТ ТЕХНОЛОГИИ. МЕТОДИКА И ПРАКТИКА СОЗДАНИЯ WEB-СТРАНИЦ И WEB-САЙТОВ

 

 

Учебное пособие

 

 

Москва 2014

УДК 004.55

ББК 32

 

Рекомендовано к изданию в качестве учебного пособия

редакционно-издательским советом МГУПИ

Рецензенты:

к.т.н., доцент Т.А. Степанова

 

Гренков В.Л.

Интернет технологии. Методика и практика создания web-страниц и web-сайтов: учебное пособие.– М.: МГУПИ, 2014.– 110 с.

 

Учебное пособие разработано в соответствии с программой дисциплины «Информационные технологии», являющейся одной из базовых в подго­товке бакалавра по направ­лению 201000 «Биотехнические системы и технологии», согласно Государст­венному образовательному стандарту.

Пособие включает в себя цикл практических заданий, предназ­наченных для поэтапного освоения студентами элементов языка гипер­текстовой разметки, инструментария и методики создания web-страниц по ключевым темам.

К каждой теме приведено краткое теоретическое введение и допол­ни­тельные сведения, необходимые для решения поставленных задач. Все практические задания подкрепляется примерами реализации в виде гото­вых текстов, которые предоставляются студентам в электрон­ном виде для подготовки ими web-страниц и их просмотра в браузере. Предлагаемый учебный материал дает возможность каждому студен­ту получить твердые практические навыки использования интернет-технологий при работе в компьютерных сетях.

Материал также может быть полезен студентам других инженерных направлений бакалавриата.

Табл. 2. Ил. 24. Библиограф.:16 назв.

 

УДК 004.55

ББК 32.

 

ã Гренков В.Л., 2014

ã МГУПИ, 2014

 

ОГЛАВЛЕНИЕ

 

ВВЕДЕНИЕ ………………………………………………………………………………… 5

 

1. Освоение основных правил записи гипертекста при создании

простых веб-страниц……………………………………………………………………….. 5

1.1. Документы html и основные теги…………………………………………………….. 5

1.2. Практические задания по теме: задания 1-1…1-10………………………………….. 9

2. Освоение правил и приемов вставки рисунков и видеороликов в веб-документы………………………………………………………………………………....15

2.1. Атрибуты оформления текста и графики…………………………………………….15

2.2. Практические задания по теме: задания 2-1…2-9………………………………….. 16

3. Практические приемы создания списков в веб-страницах………………………… ….23

3.1. Виды списков, теги и атрибуты их оформления ……………………………………23

3.2. Практические задания по теме: задания 3-1…3-11…………………………… …... 24

4. Практические приемы создания таблиц в веб-страницах...……………………… ….27

4.1. Применение и оформление таблиц…………………………………………………...27

4.2. Практические задания по теме: задания 4-1…4-9……………………………………29

5. Создание гиперссылок и связывание веб-страниц………………………………. …...34

5.1. Оформление внешних и внутренних гиперссылок………………………………… 34

5.2. Практические задания по теме: задания 5-1…5-1…………………………………....35

6. Практические приемы создания форм в веб-страницах……………………………… 41

6.1. Назначение и структура форм. Теги и атрибуты формы…………………………… 41

6.2. Практические задания по теме: задания 6-1…6-5……………………………………43

7. Применение таблиц каскадных стилей CSS…………………………………..............47

7.1. Стили, их определение и применение. Теги и атрибуты CSS…………………… 47

7.2. Практические задания по теме: задания 7-1…7-8……………………………………51

8. Обработка форм …………………………………………………………………... …….60

8.1. Средства обработки форм. Подготовки файла обработки………………………….60

8.2. Практическое задания по теме: задание 8-1……………………………………….….61

9. Практика создания сайта…………………………………………..…………….............62

9.1. Постановка задачи……………………………………………………………………...62

9.2. Практические задания по теме: задания 9-1…9-4……………………………………64

10. Публикация сайта. Требования к сайту и его поддержка ……………………...........66

10.1. Особенности регистрации и поддержки сайта…………………………………… 66

10.2. Практическое задание по теме: задание 10-1………………………………………..69

Приложение П1. Исходные тексты заданий и решения: тексты html-документов……. 69

П1.1. Тексты к теме 1 (bmt1.txt и bmt1-10) ………………………………………………. 69

П1.2. Тексты к теме 2 (bmt2.txt и bmt2-10). …………………………………………........ 71

П1.3. Тексты к теме 3 (bmt3.txt и bmt3-10). …………………………………………........ 75

П1.4. Тексты к теме 4 (bmt4.txt и bmt4-6). ……………………………………………….. 78

П1.5. Тексты к теме 5 (bmt5.txt и bmt5-8). ………………………………………………. 79

П1.6. Тексты к теме 6 (bmt6.txt и bmt6-6). ………………………………………………. 85

П1.7. Тексты к теме 7 (bmt7.txt и bmt7-4, bmt7-5, bmt7-6, bmt7-7, bmt7-8)………….… 87

П1.8. Тексты к теме 8 (blank_z.html и otvet.html). ……………………………………… 101

П1.9. Текст к теме 9 (default.html). ……………………………………………………… 103

Литература. …………………………………………………….…………………………. 106

 

 

ВВЕДЕНИЕ

Современная система обучения в сфере высшего образования под­разу­мевает широкое использование студентами интернет-технологий, то есть различных средств доступа к информационным ресурсам через гло­баль­ную сеть интернет.

В отличие от обычного пользователя современному специалисту полезно иметь осмысленное и несколько более глубокое знание методики подготовки информации для передачи в сети интернет, а также механиз­мов и средств (аппаратных и программных), необходимых для приема, переда­чи, преобразования и интерпретации информации.

В первом приближении для этого необходимо получить представле­ние о компьютерных сетях, о сетевых технологиях, о протоколах передачи дан­ных, о службах и сервисах интернета. В настоящее время любая науч­но-производственная деятельность и бизнес любого рода немыслимы без рекламы в интернете, что требует создания собственного сайта и регистра­ции его в сети интернет.

Первым шагом на пути создания сайтов является приобретение навы­ков создания простейших веб-страниц. Для этого необходимо освоить язык гипертекстовой разметки HTML. Чтобы создать сайт средней сложности, содержащий встроенную базу данных следует дополнительно освоить язы­ки программирования JAVA и PHP и научиться использовать системы управления базами данных СУБД для создания собственных баз данных. Имеется достаточно обширная литература, посвященная перечисленным вопросам, в том числе большое число учебников по изучению языка HTML и созданию сайтов.

Подготовку текстов Web-страниц и сайтов можно выполнить путем набора текстов на HTML- языке в блокноте. Специальные редакторы, например, редактор Dreamweaver, позволяют создавать сайты за чрезвы­чайно короткое время. Тем не менее автор считает, что сначала следует научиться создавать Web-страницы в блокноте,только так можно лучше освоить все элементы языка HTML и особенности его применения. В даль­нейшем можно пользоваться редактором Dreamweaver, в котором боль­шин­ство функций по созданию сайтов автоматизировано. В то же время результат может оказаться далеким от оптимального. Полученные ранее знания и практика работы в блокноте позволят внести соответствую­щие коррективы и довести содержание и оформление сайта до желаемого.

Несмотря на обилие литературы, в частности учебников по созданию Web-страниц и сайтов, ощущается существенный дефицит простого и понят­ного учебного пособия, которое, с одной стороны, доступно для применения, и, с другой – дает полное методичное и поэтапное изложение процесса создания сайта на простых примерах. Данное пособие должно в определенной мере восполнить этот пробел.

В нем имеется набор практических заданий для поэтапного усвоения теории в процессе их выполнения. Помимо заданий к каждому из них име­ется краткое теоретическое введение, а в приложении П1 – тексты HTML-документов как в виде заготовок для дальнейшей доработки, так и в виде готовых решений.

Рекомендуется выполнять задания самостоятельно, а к готовым реше­ниям прибегать дозированно, в основном, для проверки своих резуль­татов. Корректировка HTML- текста при выполнении задания должна сопровож­даться просмотром ее действия в браузере, пока не будет полу­чено прием­лемое решение.

Весь цикл заданий может быть выполнен в форме самостоятельной домашней работы студента. Он состоит из десяти разделов, охватывающих необходимый минимум материала, освоение которого даст каждому сту­ден­­ту умение создавать собственные Web- сайты. Отдельные задания разделов могут отрабатываться на аудиторных практических занятиях. В завершение освоения материала, на последнем этапе, ставится задача со­зда­ния полноценного сайта.

При написании настоящего учебного пособия автор использовал опыт работы со студентами направления бакалаврской подготовки в обла­сти приборостроения. Тематика сайта содержит сведения по современ­ным меди­цинским диагностическим приборам как отечественных, так и зару­бежных производителей.

К данному учебному пособию прилагаются все необходимые файлы, в том числе и файлы всего сайта, которые предоставляются в распоря­же­ние студентов.

 

1. Освоение основных правил записи гипертекста при создании простых веб-страниц.

 

Оформление внешних и внутренних гиперссылок.

Гипертекст в отличие от обычного текста в html-документе содержит ссылки на объекты (другие страницы, документы, рисунки и т.п.), находя­щиеся вне данного текста. Гипертекстовые ссылки могут быть представ­лены как отдельными словами и фразами, так и изображениями. Те и дру­гие могут быть выделены на веб-страницах, для текста – это подчерки­ва­ние и выделение цветом (обычно – синим), для рисунков – это выделение рамками.

Обнаружить наличие гиперссылки можно подведением к ней мыши, в ответ на это действие появля­ется характерный указатель в виде кисти ру­ки с вытянутым пальцем. (Для рисунков рамка может отсутствовать да­же при наличии гиперссылки, ее и так несложно идентифици­ро­вать). Щелчок мыши по гиперссылке приводит к перходу по адресу гипер­ссылки. В html- документе гиперссылка оформляется парным тегом <a>. Гиперссылки бывают внешние и внутренние.

Для внешних гиперссылок используется адресный атрибут href, например: <a href =http: // www.microchip.com/ pic.html> </a>. Открытие документов по внешним ссылкам может быть разным в зависимости от значения атрибута taget тега <a>. По умолчанию действует значение taget= _blank и тогда документ открывается в новом окне. Если taget= _self, то документ открывается в том же окне.

Внутренние ссылки на определенную позицию в текстовом докумен­те оформляются с применением «якоря». Это удобно, когда документ обширный и в нем бывает трудно отыскать нужный абзац, термин или просто нужную позицию. Якорь – это метка в гипертексте html-документа, которая задается в теге <a> с его атрибутом name.

Пусть эта метка (якорь) имеет имя «M10». Тогда внутренняя ссылка в тексте документа оформляется как <a href=”#М10”> </a>, а в позицию текста документа (точку входа), куда должен осуществляться переход по ссылке, вставляется тег: <a name=М10> </a>.

 

5.2. Практические задания по теме: задания 5-1…5-11.

Задание 5-1.

1). В папке Prakt5 открыть файл bmt.txt и добавить в абзацы: КАРДИОГРАФЫ, ЭНЦЕФАЛОГРАФЫ, СПИРОГРАФЫ, РЕОГРАФЫ ссылки на пока не существующие документы – источники с техническими данными на каждый прибор. Предполагается, что файлы-источники лежат в той же папке Prakt5 и имеют имена: kar1.html, kar2. html, kar3. html, kar4. html (для абзаца КАРДИОГРАФЫ); enc1.html, enc2.html, enc3.html, enc 4. html (для абзаца; spi1. html, spi2. html, spi3. html, spi4. html (для абзаца СПИРОГРАФЫ); reo1. html, reo2. html, reo3. html, reo4. html (для абзаца РЕОГРАФЫ) и сохранить документ как файл bmt5-1.html.

(Ссылки оформляются по образцу <a href = “адрес файла-источни­ка>. Вставлять их следует после тега параграфа <p align=”center”>, перед тегом <img>).

2). Создать в той же папке файл-источник kar1.html сначала как пус­той до­кумент. Скопировать в него из документа Opis3.html, находя­щегося в папке Praktika, заголо­вочную часть со стилем h1. Сохранить результат и просмотреть в браузере.

3). Аналогично подготовить остальные документы-источни­ки и про­ве­рить в браузере действие ссылок в документе bmt5-1.html.

Задание 5-2.

1). Доработать документы-источники, вставив в них содержательную часть из файлов, соответственно: k1.txt, k2.txt, k3.txt, k4.txt (Кардиографы); e1.txt, e2.txt, e3.txt, e4.txt (Энцефалографы); s1.txt, s2.txt, s3.txt, s4.txt (Спирографы); r1.txt, r2.txt, r3.txt, r4.txt (Реографы). Сохранить результа­ты и просмотреть в браузере доработанные веб-страницы с техническими данными приборов.

(Файлы: kar1.html, kar2.html, kar3.html, kar4.html; enc1.html, enc2.html, enc3.html, enc 4.html; reo1.html, reo 2.html, reo.html, reo4.html).

2). Открыть документ bmt5-1.html и вновь проверить в нем дейст­вие ссылок на документы-источники.

Задание 5-3.

1). Начать подготовку сайта с создания главной страницы: скопиро­вать файл bmt5-1.html в папку Praktika и переименовать его в index.html.

2). Ознакомиться с рисунками jmp_gl.png, jmp_to.png, jmp_back.png из папки BAZA, вложенной в папку Praktika.

3). Скопировать документы: Kont1.html, Dost2.html, Opis3.html, Zakaz4.html, – в папку BAZA (дополнительные страницы создаваемого сайта).

3). Создать графические кнопки для реализации взаимных переходов между веб-страницами Kont1.html, Dost2.html, Opis3.html, Zakaz4.html и главной веб-страницей index.html.

Для этого в каждом из документов создать таблицу из строк с вло­жен­ными рисунками jmp_gl.png, jmp_to.png, jmp_back.png, которые встроены в гипер­ссылки на указанные веб-страницы. При этом следует предусмо­треть переходы между страницами в порядке расположения пунктов меню, на главной странице. Так, например, страница «Доставка», вызываемая из 2-го по порядку пункта меню на главной странице, должна иметь переходы к предыдущей странице «Контакты» и к следующей для нее странице – «Описание». Переход на главную страницу должен выпол­няться только из страниц «Контакты» и «Заказ» (соответ­ствующих крайним пунктам меню). Схема переходов показана на рис. 5.1.

Главная

Контактыты

Доставка

Описание

Главная

Заказ

 

Рис 5.1. Схема переходов между веб-страницами сайта.

 

Сохранить документы в папке BAZA и проверить действие переходов.

(Пример строки таблицы:

<td> <p align="center" > <a href="D:/Praktika/index.html"> <img src="jmp_gl.png" width="120" height="40" border="0" /></a></p></td>)

 

Задание 5-4.

1). В html-документы (веб-страницы) с техническими данными приборов (всего 16 доку­мен­тов) ввести графическую кнопку «Оформить заказ» табличным методом (по аналогии с заданием 5-3). Для оформ­ле­ния заказа на соответствующий прибор в таблице предусмотреть гипер­ссылку на документ D:/ Praktika/ blank_z.html) из рисунка (графической кнопки) D:/ Praktika/oform_z.png. Сохранить результаты как файлы с теми же именами, но в папке Praktika.

(Шаблон для оформления графической кнопки:

<table width="200" height="70" border="0" align="left" cellpadding="2">

<tr > <td> <p align="center" > <a href="blank_z.html"> <img src="oform_z.png" width="200" height="70" border="0" > </ a> </p> </td> </tr> </table>

 

Задание 5-5.

1). Открыть главную страницу (файл index.html в папке Praktika), скорректировать адреса ссылок на документы-источники, сохранить изме­не­ния и проверить действие всех ссылок, начиная с вызова документов из меню. (Последние версии файлов-источников хранятся в папке Praktika).

 

Задание 5-6.

1). Добавить в конец документа bmt5-1.html заголовок и первые два абза­ца из файла Opis3.html и сохранить документ как файл bmt5-2.html.

2). В заголовочную часть документа bmt5-2.html из файла Opis3.html вставить определение стилей tip1 и tip2 и сохранить документ.

3). Заголовок добавленных абзацев изменить на «НАША ПРОДУК­ЦИЯ» с выравниванием по центру. В определение стилей ввести параметр margin-left =200px, сохранить результат и проверить в браузере.

 

Задание 5-7.

1). Для слова «продукция» в новом тексте последнего документа ввести гиперссылку на файл Opis3.html (в том числе и в заголовке «НАША ПРОДУКЦИЯ»).

Сохранить результат как файл bmt5-3.html.

2). Открыть документ bmt5-3.html, обратить внимание на то, что слово «продукция» оказалось подчеркнутым, что указывает на гипер­ссылку. Проверить действие гиперссылки по щелчку мыши.

 

Задание 5-8.

1). Создать внутреннюю ссылку из заголовка «МЕДИ­ЦИН­СКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ» в конец документа, на той же странице.

Сохранить документ как файл bmt5-4.html и проверить действие ссылки в браузере.

 

Рис. 5.2. Веб-страница документа bmt5-8.html (начало).

Рис. 5.2. Веб-страница документа bmt5-8.html (продолжение).

 

Рис. 5.2. Веб-страница документа bmt5-8.html (окончание).

Задание 5-9.

1). В документе bmt5-4.html изъять предыдущую ссылку для заго­ло­в­ка «МЕДИ­ЦИН­СКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ». Изменить адрес ссылки на <a href=http://www.mail.ru> для слова «про­дук­ция» в тексте до­ку­мента (после заголовка «НАША ПРОДУКЦИЯ»). Сохранить резуль­тат как файл bmt5-5.html и проверить действие ссылок.

Задание 5-10.

1). Добавить атрибут taget=_self к ссылке в слове «ПРОДУКЦИЯ» в документе bmt5-4.html. Сохранить результат как файл bmt5-5.html и про­верить действие ссылки в браузере. Убедиться, что вызываемый документ-источник открывается в том же окне, что и исходный документ. В панели вкладок браузера должен присутствовать только один ярлычок документа.

Задание 5-11.

1). Удалить из документа bmt5-5.html атрибут taget (по умолчанию taget= _blank). Сохранить документ как файл bmt5-6.html и проверить дей­ст­вие ссылки в слове «ПРОДУКЦИЯ» в браузере. Убедиться, что вызыва­емый документ-источник открывается в новом окне.

В панели вкладок браузера должны присутствовать два ярлычка доку­мента. Если изменить размер открытого документа, то различие в действии атрибутов taget=_self и taget=_blank проявляется очевидным образом.

 

Обработка форм

Средства обработки форм. Подготовки файла обработки.

Как отмечалось ранее, в подразделе 6.1, формы нужны для ввода данных клиентом, пользователем сайта, и последующего их использования сайтодержателем по назначению. Обработка формы осуществляется на сер­вере, на котором загружен и зарегистрирован сайт, в результате выпол­нения серверной программы. Обычно серверные программы пишут на язы­ке программирования php. Язык php требует серьезного изучения, однако для написания простых программ, где не требуется сложная обра­ботка, достаточно знать небольшое количество команд и функций этого языка.

В простых случаях отдельные функции обработки можно ввести в обычный html-документ с php-вставками. Их использование удобно про­следить на примере файла otvet­­_z.html. Часть его html-текста c php-встав­кой представлена ниже, на рис. 8.1.

<body>

<?php

echo "Уважаемый "; echo $Fio; echo "!"; print "<br>";

echo "Ваш заказ принят"; print "<br>";

echo "Ваш телефон "; echo $Tel; print "<br>";

echo "Ваш адрес "; echo $Adr; print "<br>";

echo "Ваша электронная почта "; echo $Epo; print "<br>";

echo "Ваш вид доставки "; echo $Dost; print "<br>";

echo "Ваши дополнения: "; echo $Pri;

?>

<h2>Благодарим за удачный выбор.</h2> </body>

 

Рис. 8.1. Пример html-документа с php-вставкой.

Из приведенного примера видно, что для вставки php-программы в текст html- документа используются теги <?php …?>. Далее, в тексте программы используются переменные $Fio, $Tel, $Adr, $Epo, $Dost, $Pri. Эти же имена переменных используются в документе blank_z.html (бланке заказа) для ввода клиентом соответствующих данных на сайте в браузере.

В результате обработки сервером php-кода рис. 8.1 данные пере­дают­ся в файл otvet_z.html из формы документа blank_z.html вместе с пере­мен­ными и отобража­ют­ся в браузере, благодаря выполнению команды echo. Аналогично действует и команда print. Существует множество дру­гих php-команд, предназначен­ных для выполнения различных дейст­вий с пе­ременными. В целом, коман­ды и функции, выполняемые php- програм­ма­ми, во многом заимствованы из языка программирования C++.

 

8.2. Практическое задание по теме.

Рис. 8.2. Результат исполнения файла otvet_z.html (без серверной обработки)

 

Задание 8-1.

1). Открыть в блокноте документ blank_z.html, обратить внимание на переменные и их содержимое, предназначенное для отправки на сервер.

2). Открыть в блокноте файл otvet_z. php и обратить внимание на син­таксис записи команд и переменных в php-коде.

3) Запустить тот же файл, но с расширением.html. Сравнить содер­жи­мое файлов otvet_z. php и otvet_z.html. Обратить внимание на то, что со­де­р­­жимое обоих файлов одинаковое и на то, что в html-файле php-вставка не рабо­тает, хотя отображаются результаты интерпре­тации html-текста. Результат исполнения файла otvet_z.html показан на рис.8.2.

Так как после заполнения формы (в файле blank_z.html) в данном слу­чае не ис­по­льзуются серверные средства для обработки php –команд, то на экран выводится исходный текст php-программы. При серверной обра­бот­ке пере­менные $Tel, $Adr, $Dost, $Epo, $Pri заменяются данными, кото­рые вво­ди­лись в форму клиентом (заказчиком). В данном случае кли­ент по­лучит сообщение, в котором указываются его идентификаци­он­ные дан­ные и подтвержается, что заказ принят.

Для исполнения файла otvet_z. php (равно как и php-вставки в html-файле) необходимо иметь доступ к серверу, а сайт должен быть загружен на этом сервере. Для этого сайт должен быть на нем зарегистрирован.

Более подробно эти вопросы будут рассмотрены в разделе 10.

 

Тема 10. Публикация сайта. Требования к сайту и его поддержка.

 

Приложение П1. Исходные тексты заданий и решения: тексты html-документов.

Документ bmt1.txt

<body>

<html>

Кафедра

«Биомедицинские приборы и компьютерные технологии»

Кафедра готовит специалистов по биомедицинской технике.

Специальность «Биотехнические аппараты и системы»

 

Направления и цели подготовки.

В рамках специальности «Биотехнические аппараты и системы» кафедра ведет подготовку по следующим трем направлениям.

Схемотехническое направление:

- разработка, эксплуатация и ремонт биомедицинской техники.

Информационно-программистское направление:

- обработка и анализ биомедицинских данных, работа с биомедицинскими базами данных

Исследовательское направление:

- исследование биомедицинских процессов и сигналов, создание методов и первичных преобразователей для биомедицины.

Содержание направлений подготовки.

 

Схемотехническое направление.

Цикл дисциплин схемотехнического направления:

Основы электротехники.

1. Аналоговая и цифровая электроника.

2. Узлы и элементы медицинской техники.

3. Интерфейс биомедицинских устройств.

4. Биомедицинские измерения.

5. Медицинские приборы, аппараты, системы и комплексы.

6. Электронные вычислительные медицинские системы.

 

Информационно-программистское направление.

Цикл дисциплин информационно-программистского направления:

1. Управление в биологических и медицинских системах.

2. Технические методы диагностических исследований и лечебных воздействий.

3. Методы обработки биологических процессов и сигналов.

4. Управление в биологических и медицинских системах.

5. Компьютерные технологии в медико-биологических исследованиях.

6. Базы данных и экспертные системы.

 

Исследовательское направление.

1. Основы взаимодействия физических полей с биообъектами.

2. Измерительные преобразователи и электроды.

3. Физические основы применения медицинских лазерных приборов.

4. Физические основы применения медицинских ультразвуковых приборов.

5. Методы и аппаратура биомедицинской телеметрии.

6. Методы и аппаратура компьютерной томографии.

</body>

</html>

 

Документ bmt1-10.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

 

<head >

<title> Кафедра ПР-3 </title>

<style type="text/css">

p#ramka{

font-size:24pt;

color:indigo;

text-indent:6em;

border:2px solid red;

padding:10px;

Width:900px;

height:320px;

margin-left:250px;

margin-bottom:100px;

}

</style>

<u><h2 align=center >КАФЕДРА</h2></u>

<b><h1 align=center text=red>«Биомедицинские приборы и компьютерные технологии»</h1></b>

</head>

 

Документ bmt2.txt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<body>

МИОСТИМУЛЯТОР ШЕСТИКАНАЛЬНЫЙ

Технические характеристики

1.Количество каналов - 6

2.Количество программ - 8

3.Диапазон установки длительности импульса - 100мкс – 25 мс

4.Шаг установки длительности импульса - 100мкс

5.Диапазон установки частоты - 1-150 Гц

6.Диапазон установки тока стимуляции - 0-100 мА

7.Диапазон установки напряжения стимуляции - 0-150 В

8.Средний потребляемый ток - 25 мА

9.Максимальный потребляемый ток - 50 мА

10.Время непрерывной работы не менее - 10 час

11.Габаритные размеры - 120*65*25 мм

12.Вес с аккумуляторной батареей - 200 г

 

Краткое описание

 

Миостимулятор предназначен для автономной работы с предварительно установленными программами. Программы задаются на ПК и по ИФК каналу записываются в прибор либо считываются из него. Миостимулятор может работать в режим амплитудной или частотной модуляции.Все каналы независимы.

При амплитудной модуляции параметры импульсов устанавливаются для программы в целом, но могут быть установлены индивидуально для каждого канала. Уровни каналов, огибающие амплитуд и время начала работы каждого канала устанавливаются при помощи удобного графического интерфейса.

При частотной модуляции устанавливается скважность импульсов для программы в целом, а частота импульсов задается графически. Амплитуда импульсов автоматически корректируется в зависимости от частоты.

В приборе может задаваться либо ток стимуляции либо напряжение. Система управления прибором поддерживает величину тока (напряжения) на заданном уровне.

Автономно прибор позволяет выбрать одну из восьми ранее записанных программ, включить программу одиночным циклом или непрерывным, оперативно регулировать уровни всех каналов и период цикла программы.

Миостимулятор комплектуется электродами различной формы.

Конструкция электродов обеспечивает наилучший контакт с поверхностью тела, что является обязательным условием для получения желаемого результата. Корпус прибора имеет специальную скобу для закрепления на одежде пациента. Это особенно важно при реабилитации опорно-двигательного аппарата, когда больной используя специальную поддерживающую тележку

может автономно проводить лечебные-тренировочные сеансы.

</body>

</html>

 

Документ bmt2-10.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<head >

<style type="text/css">

body

{background-image:url("Ris_mio/oboi.gif");

}

p#ramka{

font-size:24pt;

color:indigo;

text-indent:10em;

border:4px solid red;

padding-left:100px;

margin-left:50px;

}

p#block1,p#block2,p#block3,p#block4,p#block5,p#block6{

font-family:colibri;

font-style:bolder;

font-size:16pt;

text-indent:2em;

}

p#block1{color:Darkcyan;

margin-left:350px;

}

p#block2{color:fuchsia;

margin-left:400px;

}

p#block3{

color:olive;

margin-left:350px;

}

p#block4{

color:orange;

margin-left:400px;

}

p#block5{

color:forestgreen;

margin-left:350px;

}

p#block6{

color:goldenrod;

margin-left:400px;

}

</style>

<b><h1 style="color:red; text-align:center"> Миостимуляторы</h1></b><nobr>

<u><h2 style="color:green; text-align:center" >«Технические данные и описание миостимуляторов»</h2></u>

</head>

<body>

<img src="Ris_mio/dnk.gif" hspace=500>

<p id="block1"><a href="Ris_mio/Sputnik.swf">МИОСТИМУЛЯТОР ШЕСТИКАНАЛЬНЫЙ</a><br/>

Технические характеристики <br/>

1.Количество каналов - 6 <br/>

2.Количество программ - 8 <br/>

3.Диапазон установки длительности импульса - 100мкс – 25 мс <br/>

4.Шаг установки длительности импульса - 100мкс <br/>

 

<img src="Ris_mio/ris2-1.jpg" width="300" align=left hspace=30 vspace=20> <br/>

 

5.Диапазон установки частоты - 1-150 Гц <br/>

6.Диапазон установки тока стимуляции - 0-100 мА <br/>

7.Диапазон установки напряжения стимуляции - 0-150 В <br/>

8.Средний потребляемый ток - 25 мА <br/>

9.Максимальный потребляемый ток - 50 мА <br/>

10.Время непрерывной работы не менее - 10 час <br/>

11.Габаритные размеры - 120*65*25 мм <br/>

12.Вес с аккумуляторной батареей - 200 г <br/> </p> <br/>

<p id="ramka">Краткое описание<br/>

Миостимулятор предназначен для автономной работы с предварительно<br/>

установленными программами. Программы задаются на ПК и по ИФК каналу<br/>

записываются в прибор либо считываются из него.<br/>

Миостимулятор может работать в режим амплитудной или частотной<br/>

модуляции.Все каналы независимы.<br/> </p> <br/>

 

<p id="block2"><img src="Ris_mio/ris2-3.jpg" width="300" align=right hspace=10 ><br/>

При амплитудной модуляции параметры импульсов устанавливаются для<br/>

программы в целом, но могут быть установлены индивидуально для каждого<br/>

канала. Уровни каналов, огибающие амплитуд и время начала работы<br/>

каждого канала устанавливаются при помощи удобного графического<br/>

интерфейса.<br/>

 

<p id="block3"> <img src="Ris_mio/ris2-6.jpg" width="350" align=middle vspace=20><br/>

При частотной модуляции устанавливается скважность импульсов для<br/>

программы в целом, а частота импульсов задается графически. Амплитуда<br/>

импульсов автоматически корректируется в зависимости от частоты.<br/>

В приборе может задаваться либо ток стимуляции либо напряжение. Система<br/>

управления прибором поддерживает величину тока (напряжения) на заданном<br/>

уровне.<br/>

 

<p id="block4"> <img src="Ris_mio/ris2-7.jpg" width="400" align=top vspace=20><br/>

Автономно прибор позволяет выбрать одну из восьми ранее записанных<br/>

программ, включить программу одиночным циклом или непрерывным,<br/>

оперативно регулировать уровни всех каналов и период цикла программы.<br/>

 

<p id="block5"> <img src="Ris_mio/ris2-9.jpg" width="450" align=bottom hspace=20><br/>

Миостимулятор комплектуется электродами различной формы.<br/>

Конструкция электродов обеспечивает наилучший контакт с поверхностью<br/>

тела, что является обязательным условием для получения желаемого<br/>

результата. Корпус прибора имеет специальную скобу для закрепления на одежде<br/>

пациента. Это особенно важно при реабилитации опорно-двигательного<br/>

аппарата, когда больной используя специальную поддерживающую тележку<br/>

может автономно проводить лечебные-тренировочные сеансы.<br/>

 

<p id="block6"> <img src="Ris_mio/ris2-4.jpg" width="500" align=absbottom vspace=20><br/>

Внешний вид шестиканального миостимулятора и электродов представлен<br/>

На рис. Фрагменты пользовательского интерфейса программы<br/> </p>

</body>

</html>

 

Документ bmt3.txt

ПРИБОРЫ ФУНКЦИОНАЛЬНОЙ ДИАГНОСТИКИ

Электрокардиограф ЭК1Т-04

Трех/шестиканальный электрокардиограф ЭК3Т-01 «БИОС»

Электрокардиограф «Диамант-К»

12-канальный компьютерный кардиограф Кардиоанализатор «АНКАР-131»

12-канальный компьютерный электрокардиограф «Карди»

Миниатюрный компьютерный электрокардиограф Поли-Спектр-12

ЭЭГА"21/26 «Энцефалан"131"03 “Классический” 19"канальный компь"

ютерный электроэнцефалограф Нейрон-Спектр-3

- 24-канальный электроэнцефалограф «Нейровизор-24»

19-канальный компьютерный электроэнцефалограф Нейрон-Спектр-3

Эхоэнцефалоскоп переносный ЭЭС-12

Краниоскоп"3М – портативный медицинский прибор для ультразвуковой

Компьютерный эхоэнцефалограф «Ангиодин-Эхо»

Компьютерный эхоэнцефалограф в стационарном исполнении

Сономед"315/М многооконный ультразвуковой эхоэнцефалограф

Сономед"315/П портативный ультразвуковой эхоэнцефалограф

Стационарный ультразвуковой доплеровский комплекс «АНГИОДИН-Классик»

Сономед"300/A стационарный многооконный прибор для исследования

маточно-плацентарного кровотока и кровообращения плода

Спироанализатор «Диамант С»

Спирограф (спироанализатор) СП01-М

Полианализатор для комплексного исследования параметров

кровообращения РГПА-6/12 РЕАН-ПОЛИ

Реоанализатор «Диамант-Р»

Программно-аппаратный комплекс для объективного контроля и оценки

состояния центральной, периферической, органной гемодинамики и

соотношения жидкостных секторов организма человека

Многофункциональный компьютерный peoграф «Рео-Спектр-3»

Нейромиоанализатор НМА-4-01 «НЕЙРОМИАН»

 

Документ bmt3-10.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>

 

<head > <style type="text/css">

body {background-image:url("Ris_mio/oboi.gif"); }

h2{color:darkcyan;

text-align:center;

font-family:Arial Black;

font-style:italic; }

</head > </style>

<body>

<!-- <p> <a href="Ris_mio/Sputnik.swf">МИОСТИМУЛЯТОР ШЕСТИКАНАЛЬНЫЙ </a>

-->

 

<h1 style="color:orange; text-align:center">ПРИБОРЫ ФУНКЦИОНАЛЬНОЙ ДИАГНОСТИКИ</h1>

 

<h2>Кардиографы</h2>

<ul style="color:darkred; margin-left:300px; font-size:150%">

<li>Электрокардиограф ЭК1Т-04

<li>Трех/шестиканальный электрокардиограф ЭК3Т-01 «БИОС»

<li>Электрокардиограф «Диамант-К»

<li>12-канальный компьютерный кардиограф Кардиоанализатор «АНКАР-131»

<li>12-канальный компьютерный электрокардиограф «Карди»<br/>

<li>Миниатюрный компьютерный электрокардиограф Поли-Спектр-12<br/>

</ul>

 

<h2>Энцефалографы</h2>

<ul type=circle style="color:blue; margin-left:300px; font-size:140%">

<li>ЭЭГА"21/26 «Энцефалан"131"03

<li>“Классический” 19"канальный компьютерный электроэнцефалограф<br/>

Нейрон-Спектр-3

<li>24-канальный электроэнцефалограф «Нейровизор-24»

<li>19-канальный компьютерный электроэнцефалограф Нейрон-Спектр-3

</ul>

 

<h2>Ультразвуковые приборы</h2>

<ul type=square style="color:green;margin-left:300px; font-size:130%">

<li>Эхоэнцефалоскоп переносный ЭЭС-12

<li>Краниоскоп"3М – портативный медицинский прибор для ультразвуковой</br>

диагностики

<li>Компьютерный эхоэнцефалограф «Ангиодин-Эхо»

<li>Компьютерный эхоэнцефалограф в стационарном исполнении

<li>Сономед"315/М многооконный ультразвуковой эхоэнцефалограф

<li>Сономед"315/П портативный ультразвуковой эхоэнцефалограф

<li>Стационарный ультразвуковой доплеровский комплекс «АНГИОДИН-Классик»

<li>Сономед"300/A стационарный многооконный прибор для исследования<br/>

маточно-плацентарного кровотока и кровообращения плода

</ul>

 

<!--

<h2>Приборы для спирометрии</h2>

<ul style="color:brown; margin-left:300px; font-size:120%">

<li>Спироанализатор «Диамант С»

<li>Спирограф (спироанализатор) СП01-М

</ul>

 

<h2>Приборы для реографии и миографии</h2>