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


 

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

48151. РИНОК: СУТНІСТЬ, ФУНКЦІЇ ТА МОДЕЛІ 199.5 KB
  Еластичність попиту і пропонування на індивідуальних ринках 4. Сутнісну основу цього обміну становить ціна що визначається співвідношенням попиту та пропонування. Величина попиту залежить від таких нецінових чинників: 1 грошові доходи споживачів; 2 кількість споживачів на ринку; 3 ціни на суміжні товари; 4 смаки та уподобання споживачів тощо. Зменшення дії одного або кількох названих чинників веде до зменшення попиту як показано на рис.
48152. СУТЬ І СТРУКТУРА ГОСПОДАРСЬКОГО МЕХАНІЗМУ. РИНОК ЯК ФОРМА ОРГАНІЗАЦІЇ СУСПІЛЬНОГО ВИРОБНИЦТВА 113 KB
  Отже причини існування ринку криються у причинах товарного виробництва. Наведені визначення розкривають суть ринку як специфічного економічного явища. Більш повно суть ринку розкривают його функції: Ринок виступає важливою фазою суспільного відтворення що забезпечує його безперервність та опосередковує зв`язок між виробництвом та споживанням. Цю функцію ринку розкриває відома формула економічних відносин за умов товарного виробництва: виробництво – обмін – розподіл – споживання .
48153. ІНФРАСТРУКТУРА РИНКУ І КАПІТАЛ СФЕРИ ОБІГУ 57 KB
  Позичковий капітал і процент. Капітал у сфері торгівлі. Цінні папери як фіктивний капітал сфери обігу.
48154. ПІДПРИЄМСТВО ТА ПІДПРИЄМНИЦТВО 56.5 KB
  Мета та принципи діяльності підприємства. Малі підприємства та підприємництво. Як самостійна господарська одиниця підприємство користується правами юридичної особи тобто має право розпоряжатися майном одержувати кредит та укладати договори з іншими підприємствами. Оптимальними підприємствами вважаються такі які мають розміри за яких створються найбільш сприятливі умови для використання досягнень НТП та досягається ефективне виробництво високоякісної продукції при мінімальних затратах.
48155. КАПІТАЛ. ВИРОБНИЧІ ФОНДИ ПІДПРИЄМСТВА І ЇХ ОБОРОТ. ЗАТРАТИ, ЦІНИ І ПРИБУТОК ПІДПРИЄМСТВА 55.5 KB
  Затрати виробництва. Капітал – це не просто засоби виробництва гроші а виробниче відношення при якому знаряддя праці певні матеріальні блага мінові вартості служать знаряддям експлуатації привласнення частини чужої праці. Затрати капіталіста на придбання засобів виробництва повністю переносяться на новостворений продукт. Постійний капітал бере участь у процесі праці своїм речовим змістом виступає при цьому фактором виробництва споживання вартостей але не бере участі у процесі збільшення вартостей а відповідно не створює додаткової...
48156. ПІДПРИЄМНИЦТВО В АГРАРНІЙ СФЕРІ 58.5 KB
  Аграрне виробництво особлива сфера вкладення капіталу Сільське господарство одна з найважливіших галузей матеріального виробництва в якій створюються матеріальні блага рослинного і тваринного походження для забезпечення населення продуктами харчування а промисловості сировиною. До особливостей сільського господарства належить і надзвичайна роль землі як фактора виробництва. У сільському ж господарстві земля виступає як засіб виробництва оскільки верхній шар ґрунту служить для розміщення рослин у процесі їх відтворення містить воду...
48157. ДЕРЖАВА ТА ЇЇ ЕКОНОМІЧНІ ФУНКЦІЇ 52.5 KB
  Необхідність цілеспрямованого втручання держави в економіку 2. Еволюція економічної діяльності держави 3. Економічні функції держави 4. Необхідність цілеспрямованого втручання держави в економіку Сучасна ринкова економіка неможлива без ефективного механізму її взаємодії з державою органами законодавчої і виконавчої влади.
48158. ФОРМИ СУСПІЛЬНОГО ПРОДУКТУ В ПРОЦЕСІ ВІДТВОРЕННЯ 147 KB
  Суспільне економічне відтворення основане на органічній єдності всіх частин що його утворюють: виробництва розподілу обміну споживання; домогосподарств підприємств галузей економічних регіонів і всього виробництва; продуктивних сил складових його частин і економічних відносин; суспільного виробництва і суспільного споживання. Економічне відтворення суспільства включає в себе такі найважливіші моменти: відтворення суспільного продукту та його конкретних форм; відтворення людського ресурсу як особистісного фактора виробництва та...
48159. РОЗПОДІЛ НАЦІОНАЛЬНОГО ДОХОДУ. СПОЖИВАННЯ І ЗАОЩАДЖЕННЯ 178.5 KB
  Розподіл національного доходу і обєктивні основи формування доходів населення 3. Перерозподіл національного доходу і споживання 4. Сутність місце та роль розподілу в процесі відтворення В економічній літературі розподільні відносини розглядаються в основному через призму розподілу національного доходу.