13137

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

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

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

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

Русский

2013-05-08

453.93 KB

7 чел.

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

«Тема 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


 

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

360. Экономика предприятия. Понятия предприятия 625 KB
  Понятие предприятия, цели и направления деятельности. Классификация и структура персонала предприятия. Классификация, структура и оценка основных производственных фондов. Основные принципы организации и регулирования оплаты труда.
361. Выполнение работ по профессии Контролер (Сберегательного банка) 660.5 KB
  Порядок совершения операций по приему денежной наличности в кассу кредитной организации от юридических и физических лиц. Выполнение и оформление кассовых операций. Операции с поврежденными и сомнительными денежными знаками иностранных государств.
362. Особенности развития гибкости при занятиях гимнастикой у девочек 7-8 лет 303.5 KB
  Художественная гимнастика как вид спорта. Гибкость как физическое качество. Возрастные особенности развития девочек 7-8 лет. Тренировочный процесс на занятиях по художественной гимнастике в СДЮСШОР №1 Калининского района.
363. Модель промислового верстата з ЧПУ 1.84 MB
  Промисловий верстат з ЧПУ використовується для обробки різного роду матеріалів, нанесення зображень на різні види поверхонь, отримання різного роду фігурних елементів, фрезерних робіт.
364. Экономический расчет работы предприятия 473.5 KB
  Расчет численности младшего обслуживающего персонала. Определение средней тарифной ставки по видам воздействий. Расчет сдельного расценка за 1 автомобиле-день работы автомобиля. Затраты на расходные материалы и запасные части для ремонтной.
365. Основы программирования 110 KB
  Описание процесса компиляции и запуска программы. Программа для вычислений над матрицами. Microsoft Visual Studio Express. Стандартная библиотека шаблонов (STL). Создание динамического класса для работы с матрицами.
366. Создание транспортной сети SDH в городе Темиртау. 517.5 KB
  Разработка схемы включения станций в проектируемую сеть SDH города Темиртау. Выбор топологии включения станций проектируемой сети. Возможность интеграции с каналами PDH. Развитие магистральных телекоммуникаций казахстанских операторов связи.
367. Трансформация образа трикстера в современной культуре 843 KB
  Основные характеристики трикстера как мифологического персонажа в архаической традиции. Исходная парадигма образа героя-трикстера: этиологические мифы. Трикстериада и ее взаимоотношения с институтом шаманизма и волшебной сказкой.
368. Смарт-карты известных мировых производителей 139.5 KB
  Основные сведения о смарт-картах. Чтение/запись смарт-карты через параллельный порт. Основные управляющие команды карты. Назначение областей данных. Принципиальная схема источника питания.