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


 

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

74360. ОБЩИЕ СВЕДЕНИЯ О РАСЧЁТЕ ЛЭП БОЛЬШОЙ ПРОТЯЖЕННОСТИ 686.5 KB
  Ток и напряжение в линии непрерывно изменяются по ее длине: ток из-за наличия поперечной проводимости Yo а напряжение за счет падения напряжения в сопротивлении Zo. Изменение напряжения и тока при волновом характере передачи энергии по линии наиболее точно описываются уравнениями длинной линии...
74363. Метод Z-матрицы для решения УУН 160 KB
  Метод Zматрицы для решения УУН. Обращение матрицы Y осуществляется численными методами что по своей трудоемкости эквивалентно решению систем линейных уравнений. Метод Zматрицы может оказаться эффективным в расчетах режимов ЭС с неизменными или малоизменяющимися конфигурацией и параметрами сети и при изменении нагрузок в узлах. Метод Зейделя ГауссаЗейделя.
74364. Метод Ньютона (Ньотона-Рафсона) первого порядка для решении УУН (применительно к действительным УУН в форме баланса токов и баланса мощностей) 80 KB
  Существует большое количество реализаций метода Ньютона и его модификаций, образующих класс ньютоновских методов. Большинство программно-вычислительных комплексов (ПВК) расчета и анализа установившихся режимов ЭЭС и систем передачи электроэнергии, разработанных в последние годы, базируются на методе Ньютона.
74365. Модификация метода ньютона первого порядка для расчета установившихся режимов ЭС 394.5 KB
  Основу алгоритмов ряда программных комплексов представляет как правило полный метод Ньютона в соответствии с которым решение систем нелинейных уравнений. заменяется решением последовательности систем линейных уравнений СЛУ.
74366. Метод ньютона второго порядка для решения УУН 424.5 KB
  Метод ньютона второго порядка для решения УУН. По методу Ньютона второго порядка нелинейное уравнение заменяется кривой второго порядка 2 квадратичная аппроксимация и решением квадратичного уравнения. а назовем приращением второго порядка. Основная трудность метода второго порядка заключается в решении системы.
74368. УУН в полярной системе координат 80 KB
  Данные математические модели применимы для описания ЭС, не содержащих в своем составе генерирующих источников, кроме балансирующего по активной и реактивной мощности (станция, ведущая по частоте, узел типа U,δ). Во всех других п узлах нагрузки учтены, как правило, значениями требуемой активной и реактивной мощности, принимаемых либо постоянными