13137

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

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

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

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

Русский

2013-05-08

453.93 KB

4 чел.

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

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


 

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

63116. Материки Землі 31.01 KB
  Обладнання: тести; прапорці; реферати про материки; фізична карта півкуль; мікрофон; презентація Материки Землі. Як ви гадаєте що таке материки Скільки їх на планеті Як вони називаються Чому їм дали таку назву...
63117. Екологічна гра «Дивосвіт природи» 7.33 MB
  В умовах сьогодення потрібно формувати в учнів цілісність свідомості, структури мислення, що обумовлюють здатність до сприйняття сучасних наукових ідей та підходів до пояснення дійсності, формування системи знань про природу, вмінь і навичок природодослідника.
63118. ПОЕТИЧНІ РЯДКИ НА УРОКАХ ГЕОГРАФІЇ 27.4 KB
  Важливе місце в системі навчально-виховного процесу відіграють засоби художнього слова. Вони сприяють формуванню уяви, баченню географічних обєктів та процесів у специфічних художніх фарбах...