13137

Введение в разработку Web-приложений

Лабораторная работа

Информатика, кибернетика и программирование

Лабораторная работа по теме Тема 5.7. Введение в разработку Webприложений Цель данной работы состоит в получении навыков в создании Webприложений средствами языка HTML. 5.7.1. Вопросы подлежащие изучению Общие сведения о компьютерных сетях и основные определе...

Русский

2013-05-08

453.93 KB

6 чел.

Лабораторная  работа по теме

«Тема 5.7. Введение в разработку Web-приложений»

Цель данной работы состоит в получении навыков в создании Web-приложений средствами языка HTML.

5.7.1. Вопросы, подлежащие изучению

  1.  Общие сведения о компьютерных сетях и основные определения.
  2.  Web-страницы, Web-сайты, Web-сервисы  и  Web-приложений.
  3. Этапы создания сайтов.
  4. Средства создания Web-сайтов.
  5. Средства языка HTML.
  6. Приемы создания простых Web-сайтов средствами языка HTML в среде MS VS .NET.

5.7.2. Задание

Создать простой Web-сайт из нескольких Web-страниц  средствами языка HTML в среде VS .NET

Выбранную тему согласовать с преподавателем.

5.7.3. Варианты задания

 В соответствии с пунктами задания студенты самостоятельно выбирают вариант и согласовывают его с преподавателем.

5.7.4. Содержание отчета

Тема и название работы.

Задание на разработку Web-сайта  и вариант задания.

Уточнение задания.

Разработка Web-сайта:

  1. Разработка структуры, дизайна и навигации.
  2. Создание файловой структуры сайта.
  3. Разработка стилей.
  4. Разработка исходного кода страниц сайта.

5.7.5. Пример разработки электронного учебника
по  дисциплине «Информатика»

  1.  Тема и название работы

Введение в разработку Web-приложений – Разработка электронного учебника
по  дисциплине «Информатика».

  1.  Задание на разработку электронного учебника по  дисциплине «Информатика»

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

  1.  Уточнение задания


  1.  Разработка Web-сайта
  2.  Разработка структуры, дизайна и навигации.

Сайт имеет древовидную структуру (рис. 5.5-1) .

Рис. 5.7-1

Для данного сайта был выбран табличный дизайн, как соответствующий структуре и назначению сайта (рис. 5.5-2). Навигация расположена слева. Для удобства пользователя внизу каждой  страницы имеется ссылка «Вверх страницы», возвращающая указатель в начало страницы.

Рис. 5.7-2

  1.  Создание файловой структуры сайта

Так как при разработке 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.7-3), в котором можно увидеть Web-страницы.

Рис. 5.7-3

Аналогичным образом создаются и другие html-файлы, а также файлы таблиц стилей (css-файлы) и другие файлы и папки.

В результате Обозреватель решений будет иметь вид как на рис. 5.7-4.

Рис. 5.7-4

  1.  Разработка стилей

* {   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.7-5

  1.  Разработка исходного кода страниц сайта

Web-страница index.htm в окне  Конструктора изображена на стр. 5.7-6, а в окне Исходного кода  на стр. 5.7-7.

Рис. 5.7-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>Кафедра ВМиП предполагает, что содержание дисциплины «Информатика» должно состоять из введения и восьми разделов, которые рассмотрены в разделе &lt;&lt;<a href="book.htm">Учебник</a>&gt;&gt;.</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.7-7

Web-страница book.htm в окне  Конструктора изображена на стр. 5.7-8, а в окне Исходного кода  на стр. 5.7-9.

Рис. 5.7-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.7-9

Web-страница chapter1.htm в окне  Конструктора изображена на стр. 5.5-10, а в окне Исходного кода  на стр. 5.5-11.

Рис. 5.7-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.7-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.7-12


 

А также другие работы, которые могут Вас заинтересовать

32190. Тактические особенности производства обыска помещений 30 KB
  Тактические особенности производства обыска помещений. При производстве обыска основное тактическое правило внезапность. На подготовительном этапе следователь должен принять все необходимые меры для обеспечения внезапности обыска исключить возможности утечки информации о предполагаемом обыске. Исходя из соображений внезапности и конфиденциальности данный вопрос решается следователем как правило уже по прибытии на место обыска.
32191. Тактические особенности допроса несовершеннолетнего обвиняемого 27.5 KB
  Тактика допроса несовершеннолетних в значительной степени обусловлена особенностями их психики повышенной внушаемостью и самовнушаемостью склонностью к фантазированию высокой эмоциональностью неустойчивостью поведения и др. Наоборот на несовершеннолетних в возрасте 15 17 лет официальная обстановка места допроса оказывает положительное влияние: проникаясь чувством ответственности они скорее скажут правду. Ложные показания несовершеннолетних в возрасте до 14 лет помимо сознательного отказа говорить правду могут объясняться самовнушением...
32192. Понятие предъявления для опознания. Его виды 27 KB
  Понятие предъявления для опознания. Предъявление для опознания – следственное действие осуществляемое в регламентируемом уголовнопроцессуальным законом порядке и состоящее в том что свидетель потерпевший подозреваемый или обвиняемый обозревает предъявленные ему сходные объекты мысленно сопоставляет их признаки с запечатленным в его памяти образом и решает вопрос о наличии или отсутствии тождества либо групповой принадлежности. Суть опознания объекта состоит в его идентификации по чувственноконкретному отображению сохранившемуся в...
32193. Тактические особенности допроса несовершеннолетнего свидетеля 28.5 KB
  Тактические особенности допроса несовершеннолетнего свидетеля. Тактика допроса несовершеннолетнего строится с учетом его возрастных особенностей. При подготовке к допросу необходимо получить сведения об уровне развития несовершеннолетнего его интересах склонностях привычках своеобразии семейной микросреды взаимоотношениях с лицом в отношении которого будет проводиться допрос. Эти лица должны быть предупреждены о недопустимости какихлибо подсказок наводящих вопросов назидательного тона раздражения в отношении несовершеннолетнего.
32194. Тактические основы проверки показаний на месте 30.5 KB
  Тактические основы проверки показаний на месте. Проверка показаний на месте должна быть организована проведена а ее результаты зафиксированы так чтобы впоследствии не возникло сомнений в объективности производства этого следственного действия. При проверке показаний нескольких лиц проверка производится с каждым из них по отдельности и так чтобы они не могли общаться друг с другом и особенно с лицами чьи показания на месте уже проверены. Понятым нужно разъяснить сущность следственного действия и объяснить что они должны не просто...
32195. Тактика задержания и личного обыска 33 KB
  Тактика задержания и личного обыска Задержание это неотложное следственное действие с целью захватить лицо подозреваемое в совершении преступления доставить и водворить в изолятор временного содержания. Подготовка к задержанию и аресту включает в себя: 1 изучение лица подлежащего задержанию и аресту; 2 определение времени и места задержания; 3 решение вопроса о количественном и персональном составе группы задержания; 4 определение обязанностей участников задержания какие действия и в какой последовательности им надлежит совершать до...
32196. Особенности предъявления для опознания трупов 28.5 KB
  Особенности предъявления для опознания трупов Трупы предъявляются для опознания в тех случаях когда нет возможности установить личность умершего по документам либо когда внешность трупа значительно изменена. При обнаружении такого трупа прежде всего устанавливают кто из жителей данной местности региона города поселка деревни пропал без вести. Раздельное предъявление трупа и предметов находившихся при нем одежда очки дипломат трость часы и т. позволяют точнее соблюсти норму закона о порядке предъявления каждого из объектов...
32197. Понятие следственной ситуации. Классификация следственных ситуаций и их роль в раскрытии и расследовании преступлений 34.5 KB
  Понятие следственной ситуации. Характеристика следственной ситуации носит по отношению к процессу расследования преимущественно внешний характер: это характеристика условий в которых протекает данный процесс. Объективные факторы это те не зависящие от участников расследования причины которые вызывают изменения ситуации; субъективные факторы причины порождаемые действиями и поведением участников расследования и иных лиц оказавшихся в той или иной степени втянутыми в сферу судопроизводства. Сочетание всех этих компонентов обусловливает...
32198. Соотношение следственного действия, тактического приема и нормы права 23.5 KB
  Соотношение следственного действия тактического приема и нормы права. Следственные действия действия по собиранию и проверке доказательств осуществляемые следователем органом дознания прокурором судом в установленном законом порядке. Следственными действиями являются: допрос очная ставка обыск и выемка арест имущества осмотр и освидетельствование предъявление для опознания людей и предметов следственный эксперимент. Тактический прием адекватный ситуации способ воздействия на объект документ предмет человека способствующий...