Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Тема 5.5. Лабораторная работа
Цель данной работы состоит в получении навыков в создании Web-приложений средствами языка HTML.
5.5.1. Вопросы, подлежащие изучению
5.5.2. Задание
Создать простой Web-сайт из нескольких Web-страниц средствами языка HTML в среде VS .NET 2005.
Выбранную тему согласовать с преподавателем.
5.5.3. Варианты задания
В соответствии с пунктами задания студенты самостоятельно выбирают вариант и согласовывают его с преподавателем.
5.5.4. Содержание отчета
5.5.5. Пример разработки электронного учебника
по дисциплине «Информатика»
Введение в разработку Web-приложений – Разработка электронного учебника
по дисциплине «Информатика».
Разработать электронное пособие в соответствии с программой дисциплины «Информатика», которая состоит из 8 разделов, а каждый раздел - соответствующие темы. В свою очередь темы разбиваются на понятия.
Сайт имеет древовидную структуру (рис. 5.5-1) .
Рис. 5.5-1
Для данного сайта был выбран табличный дизайн, как соответствующий структуре и назначению сайта (рис. 5.5-2). Навигация расположена слева. Для удобства пользователя внизу каждой страницы имеется ссылка «Вверх страницы», возвращающая указатель в начало страницы.
Рис. 5.5-2
Так как при разработке Web-страницы в лабораторном практикуме предполагается использовать VS .NET 2005, то для создания нового сайта необходимо выполнить команду Создать Web-сайт... элемента главного меню Файл.
В открывшемся окне New Web-Cite указать шаблон Empty Web-Cite и его расположения, а затем нажать кнопку <OK>.
В результате этих действий откроется пустой Web-Cite.
Выполнить команду Add New Item … (Добавить новый элемент…) элемента главного меню Web-Cite.
В результате откроется окно Add New Item (Добавит новый элемент) – путь расположения Web-сайта, в котором необходимо указать шаблон HTML-страница и имя этой страницы, например, index.htm.
В результате откроется окно Web-страницы с именем index.htm
(рис. 5.5-3), в котором можно увидеть Web-страницы.
Рис. 5.4-3
Аналогичным образом создаются и другие html-файлы, а также файлы таблиц стилей (css-файлы) и другие файлы и папки.
В результате Обозреватель решений будет иметь вид как на рис. 5.5-4.
Рис. 5.5-4
|
* { margin: 0; padding: 0; border: 0; } body {background-color: #DDDDDD; background-image: url("../images/font.jpg"); font-family:"Courier New", Verdana, sans-serif, Arial, elvetica,;} a:link {text-decoration:none; color: Black; font-weight: bold; } a:visited { text-decoration:none;color: Black;font-weight: bold; } #work_area { width: 100%;margin-left: auto;margin-right: auto; background-color: White; } #head { width: 100%; height: 100pt; text-align:center; } #header {height: 110px;width: 840px;margin-left:auto;margin-right:auto; } #body { width: 100%; height: 100%;text-align: left; } #content {width: 1000px;height: 100%;margin-left:auto;margin-right:auto;} #gran {width: 100%;height: 20px;background-color: #B3D7D9; border-top: 1pt solid #233D54; } #footer {width:100%;height: 50px;clear: both;border-top:1px solid black;} span.book {font-size:small; } span.tema {font-size:small;} ul.stg1 {margin:3px 3px 3px 25px;} ul.stg2 {margin:3px 3px 3px 40px;} ul.stg3 {margin:3px 3px 3px 55px;} |
Рис. 5.5-5
Web-страница index.htm в окне Конструктора изображена на стр. 5.5-6, а в окне Исходного кода на стр. 5.5-7.
Рис. 5.5-6
|
<!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"> <head > <title>Электронное пособие по информатике</title> <link rel="stylesheet" href="style/main.css" type="text/css" /> <meta name="Copyright" content="copyright (c) 2009 by tigra"/> </head> <body> <p> <br /> </p> <div id="work_area" > <div id="head"><table id="header" align="left"> <tr><td width="120px"><a href="index.htm"><img src="images/logo.jpg" align="right" alt="переход на главную"/></a></td><td><h1>Электронное пособие по информатике</h1><br/>для подготовки дипломированного специалиста по направлению <br />210400 - "Телекоммуникации"</h5> </center><br/></td></tr> </table></div> <div id="menu"><br/><ul type="square"> <li><a href="book.htm">Учебник</a></li> <li><a href="glos.htm">Глосарий</a></li> <li><a href="tests.htm">Тесты и задания</a></li> <li><a href="labwork.htm">Лабораторные работы</a></li> <li><a href="map/map.htm">Карта сайта</a></li> </ul><br/></div> <div id="content"> <center><br /> <h3>МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ СВЯЗИ И ИНФОРМАТИКИ</h3> </center><br/> <br/><b>Основными целями преподавания дисциплины «Информатика» являются:</b> <br/><p>Изучение средств алгоритмизации и программирования научно-технических и инженерных задач, современных методов и средств конструирования программ;</p> <br/><p>Изучение и использование пакетов прикладных программ при решении научно-технических и инженерных задач, современных средств информационных технологий с применением современных персональных компьютеров (ПК);</p> <br/><p>Изучение моделей решения вычислительных задач, алгоритмизация и программирование численных и оптимизационных методов при решении научно-технических и инженерных задач;</p> <br/><p>Привитие практических навыков формализации инженерных задач, их алгоритмизация и программирование с использованием численных методов, проектирования и конструирования программ на алгоритмическом языке и в среде пакетов прикладных программ.</p> <br/><p>Совокупность тестовых заданий по всем темам позволяет проводить тестирование знаний студентов для различных целей: <br/>1.Тестирование с целью выявления уровня начальной подготовки студента; <br/>2.Тестирование с целью проверки усвоения изученной темы; <br/>3.Тестирование с целью проверки усвоения материала изученного раздела; <br/>4.Итоговое тестирование по курсу «Информатика»; <br/>5.Тестирование с целью проверки остаточных знания по курсу «Информатика».</p> <br/><p>Использование электронных пособий и практикума также позволяет активизировать процесс обучения за счет увеличения часов самостоятельной работы.</p> <br/><p>Кафедра ВМиП предполагает, что содержание дисциплины «Информатика» должно состоять из введения и восьми разделов, которые рассмотрены в разделе <<<a href="book.htm">Учебник</a>>>.</p> </div> <div id="footer"> <a href="#" onClick="scroll(0,0); return false" title="наверх">Вверх страницы</a> <br /><table id="foot"><tr><td>Москва 2008 г.</td></tr></table> </div> </div> </body> </html> |
Рис. 5.4-7
Web-страница book.htm в окне Конструктора изображена на стр. 5.5-8, а в окне Исходного кода на стр. 5.5-9.
Рис. 5.5-8
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head > <title>Содержание учебника | Электронное пособие</title> <link rel="stylesheet" href="style/main.css" type="text/css" /> <meta name="Copyright" content="copyright (c) 2009 by tigra"/> </head> <body> <div id="work_area"> <div id="head"><table id="header" align="left"> <tr><td width="120px"><a href="index.htm"><img src="images/logo.jpg" align="right" alt="переход на главную"/></a></td><td><h1>Электронное пособие по информатике</h1><br/>Содержание</td></tr> </table></div> <div id="menu"><br/><ul type="square"> <li><a href="book.htm">Учебник</a></li> <li><a href="glos.htm">Глосарий</a></li> <li><a href="tests.htm">Тесты и задания</a></li> <li><a href="labwork.htm">Лабораторные работы</a></li> <li><a href="map/map.htm">Карта сайта</a></li> </ul><br/></div> <div id="content"><br/> <a href="sub/vved.htm">Введение</a><br /><span class="book">Введение в дисциплину</span><br /> <br /><a href="sub/chapter1.htm">Раздел 1</a><br /><span class="book"> Арифметические и логические основы ЭВМ</span><br /> <br /><a href="sub/chapter2.htm">Раздел 2</a><br /><span class="book"> Аппаратные и программные средства ЭВМ</span><br /> <br /><a href="sub/chapter3.htm">Раздел 3</a><br /><span class="book"> Основы алгоритмизации, введение в программирование и основы работы с математическими пакетами</span><br /> <br /><a href="sub/chapter4.htm">Раздел 4</a><br /><span class="book"> Базовые средства программирования на примере алгоритмического языка высокого уровня в среде Visual Studio .NET</span><br /> <br /><a href="sub/chapter5.htm">Раздел 5</a><br /><span class="book"> Объектно-ориентированное программирование и создания приложений средствами алгоритмического языка высокого уровня в среде Visual Studio .NET</span><br /> <br /><a href="sub/chapter6.htm">Раздел 6</a><br /><span class="book"> Модели решения задач численных методов и оптимизации </span><br /> <br /><a href="sub/chapter7.htm">Раздел 7</a><br /><span class="book"> Использование пакетов для решения вычислительных задач </span><br /> <br /><a href="sub/chapter8.htm">Раздел 8</a><br /><span class="book"> Практическое решение инженерных и научных задач на ПК с использованием математических пакетов</span><br /> <br/> </div> <div id="footer"> <a href="#" onClick="scroll(0,0); return false" title="наверх">Вверх страницы</a> <br /><br /><table id="foot"><tr><td>Москва 2008 г.</td></tr></table> </div> </div> </body> </html> |
Рис. 5.5-9
Web-страница chapter1.htm в окне Конструктора изображена на стр. 5.5-10, а в окне Исходного кода на стр. 5.5-11.
Рис. 5.5-10
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head > <title>Раздел 1 | Электронное пособие по информатике</title> <link rel="stylesheet" href="chapter.css" type="text/css" /> <meta name="Copyright" content="copyright (c) 2009 by tigra"/> </head> <body> <div id="work_area"> <div id="head"><table id="header" align="left"> <tr><td width="120px"><a href="../index.htm"><img src="../images/logo.jpg" align="right" alt="переход на главную"/></a></td><td><h1>Электронное пособие по информатике</h1><br/>Арифметические и логические основы ЭВМ.</td></tr> </table></div> <div id="menu"><br/><ul type="square"> <li><a href="../book.htm">Учебник</a></li> <li><a href="../glos.htm">Глосарий</a></li> <li><a href="../tests.htm">Тесты и задания</a></li> <li><a href="../labwork.htm">Лабораторные работы</a></li> <li><a href="../map/map.htm">Карта сайта</a></li></ul><br/> <ul type="square"> <li><a href="vved.htm">Введение</a><br/><span class="book">Введение в дисциплину</span></li> <li><a href="chapter1.htm">Раздел 1</a><br /><span class="book"></span></li> <li><a href="chapter2.htm">Раздел 2</a><br /><span class="book"></span></li> <li><a href="chapter3.htm">Раздел 3</a><br /><span class="book"></span></li> <li><a href="chapter4.htm">Раздел 4</a><br /><span class="book"></span></li> <li><a href="chapter5.htm">Раздел 5</a><br /><span class="book"></span></li> <li><a href="chapter6.htm">Раздел 6</a><br /><span class="book"></span></li> <li><a href="chapter7.htm">Раздел 7</a><br /><span class="book"></span></li> <li><a href="chapter8.htm">Раздел 8</a><br /><span class="book"></span></li> </ul><br/></div> <div id="content"><br /> <p>Раздел 1. АРИФМЕТИЧЕСКИЕ И ЛОГИЧЕСКИЕ ОСНОВЫ РАБОТЫ КОМПЬЮТЕРА является первым разделом учебной дисциплины «ИНФОРМАТИКА. Материал данного учебного пособия соответствует в той или иной степени учебным планам дисциплины «Информатика» средней школы.</p> <br/><p>ЭВМ являются арифметическими машинами, реализующими алгоритмы путем выполнения арифметических и логических действий. Арифметиче¬ские действия производятся над числами, представленными в принятой для ЭВМ системе счисления, в заданных формах и форматах с использованием специальных машинных кодов.</p> <br/><p>Для математического описания работы вычислительных устройств и их проектирования широко используется алгебра логики (булевская алгебра).</p> <br/><p>Алгебра в широком смысле этого слова – это наука об общих операциях, аналогичных сложению и умножению, которые могут выполняться не только над числами, но и над другими математическими объектами.</p> <br/> <p><a href="chapter1/tema1_1.htm">Тема 1.1.</a> Системы счисления</p> <p><a href="chapter1/tema1_2.htm">Тема 1.2.</a> Перевод чисел из одной системы счисления в другие</p> <p><a href="chapter1/tema1_3.htm">Тема 1.3.</a> Действия над числами</p> <p><a href="chapter1/tema1_4.htm">Тема 1.4.</a> Организация данных в ЭВМ</p> <p><a href="chapter1/tema1_5.htm">Тема 1.5.</a> Основные понятия алгебры логики</p> <p><a href="chapter1/tema1_6.htm">Тема 1.6.</a> Законы и правила упрощения логических функций</p> <p><a href="chapter1/tema1_7.htm">Тема 1.7.</a> Типовые задачи по преобразованию логических функций</p> <br/><p>Принимая во внимание различную степень подготовленности студентов, с целью ликвидации пробелов в знаниях школьной программы и получения необходимых начальных знаний о предмете, материал 1-го блока студенты должны проработать самостоятельно, используя часы, предназначенные для самостоятельной работы. Оценку подготовленности студентов при изучении материала раздела 1 можно проводить с использованием соответствующих тестов.</p> <br/></div> <div id="footer"> <a href="#" onClick="scroll(0,0); return false" title="наверх">Вверх страницы</a> <br /><br /><table id="foot"><tr><td>Москва 2008 г.</td></tr></table> </div> </div> </body> </html > |
Рис. 5.5-11
|
* { margin:0; padding:0; border:0; } body { background-color:#DDDDDD; background-image:url("../images/font.jpg"); font-family:"Courier New", Verdana,sans-serif,Arial,Helvetica,; } #work_area { width:900px; background-color:#ffffcc; margin-left:auto; margin-right:auto; font-size:10pt; } #head { width: 900px; height: 110px; text-align: center; border-bottom: 1px solid black; font-size: 12pt; } #header { height:110px; width:900px; } #menu { width:132px; padding-left:25px; float:left; padding-right:6px; padding-top:3px; padding-bottom:3px; } a:link { text-decoration:none; color: Black; font-weight: bold; } a:visited { text-decoration:none; color: Black; font-weight: bold; } #content { width: 730px; padding: 3px 3px 7px 3px; float :right; } #footer { width: 894px; height: 50px; clear:both; border-top: 1px solid black; padding: 3px 3px 3px 3px; } #foot { width: 900px; text-align:center; } span.book { font-size: 8pt; } #text { text-align: justify; font-size: 10pt; } div.spis { margin: 0px 30px 0px 30px; } |
Рис. 5.5-12
PAGE 1