У вас вопросы?
У нас ответы:) SamZan.net

Лабораторная работа 2 Создание Webсайта и Webстраницы Цель ~ освоение техникой создания Webсайта основанн

Работа добавлена на сайт samzan.net: 2015-07-05

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 27.4.2025

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

Создание Web-сайта и Web-страницы

Цель – освоение техникой создания Web-сайта, основанного на файловой системе; получение навыков работы в среде Visual Web Developer в процессе создания однофайловой страницы ASP.NET, добавления на страницу элементов управления, добавления обработчиков событий и выполнения страниц с Web Servers.

Постановка задачи

  1.  Создать Web-сайт, основанный на файловой системе (file system Web site).
  2.  Создать однофайловую Web-страницу ASP.NET в среде Visual Web Developer.
  3.  Добавить на страницу элементы управления (controls) для ввода и вывода своих данных.
  4.  Добавить обработчик событий (event handler).
  5.  Добавить текст HTML на страницу.
  6.  Выполнить страницу в Web-браузере.
  7.  Вычислить корни уравнения с точностью =10-5 на предварительно найденном интервале изоляции [a, b] методом хорд.

Теоретические сведения

Файловый Web-сайт (file system Web site) не требует работы с сервером IIS (Microsoft Internet Information Services). Сайт такого типа хранит страницы и другие файлы в папке на локальном компьютере. Другие типы сайтов включают: локальный IIS Web-сайт, который хранит файлы в корневом подкаталоге локального сервера IIS (обычно, \Inetpub\Wwwroot\); сайт FTP, хранящий файлы на удаленном сервере, доступ к которому Вы получете через Интернет, используя протокол FTP (File Transfer Protocol); удаленный сайт (remote site), который хранит файлы на удаленном сервере, доступ к которому Вы получете в локальной сети.

Ход выполнения работы

  1.  Создание файловой системы Web-сайта.
  2.  Откройте среду Visual Web Developer (фактически, Microsoft Visual Studio).
  3.  Выполните команду меню File \ New \ Web site. Появляется диалог New Web Site.

  1.  В списке установленных шаблонов Visual Studio installed templates, выберите шаблон ASP.NET Web Site. Данный шаблон создаст определенные файлы и папки.
  2.  В окне Location, выберите тип сайта File System и введите имя папки хранения страниц сайта, включив в него Ваше фамилия (например, D:\Projects C#\SkobWebSite).
  3.  В списке Language, выберите язык программирования сайта Visual C# (можно использовать и другие .NET-языки в том же Web-приложении при создании страниц и компонентов).
  4.  Подтвердите выбранные опции диалога нажатием кнопки OK. Мастер Visual Web Developer создаст папку и новую страницу с именем Default.aspx, которая по умолчанию открывается в окне редактора текста элементов управления HTML.

  1.  Прежде чем продолжить работу над страницей полезно вспомнить основные окна и инструменты мастера Web designer среды разработки Visual Web Developer.
  2.  Панели инструментов Toolbars предоставляют команды для форматирования текста, поиска и др. Некоторые панели инструментов доступны только при работе в режиме Design.
  3.  Менеджер файлов Solution Explorer показывает файлы и папки Web-сайта.
  4.  Окна Document windows показывают вкладки документов.
  5.  Окно Properties позволяет менять установки страницы, элементов HTML, элементов управления и др. объектов.
  6.  Вкладки View tabs предоставляют разные виды одного документа. Окно Design позволяет редактировать интерфейс в стиле WYSIWYG (What You See Is What You Get). Окно Source предоставляет HTML-редактор страницы.
  7.  Окно Toolbox предоставляет элементы управления и HTML-элементы для перетаскивания на страницу. Элементы Toolbox сгруппированы функционально.
  8.  Окно Server Explorer показывает соединения с базами данных. Если Server Explorer невидимый, то его можно вывести командой View \ Other Windows \ Server Explorer.

  1.  Создание новой страницы сайта (Web Forms Page).
  2.  Закройте страницу по умолчанию Default.aspx с помощью команды Close контекстного меню на вкладке с именем файла.

  1.  В окне Solution Explorer с помощью команды Add New Item контекстного меню на имени сайта вызовите мастер добавления нового элемента.

  1.  В окне шаблонов Visual Studio installed templates выберите Web Form.
  2.  В окне Name наберите имя страницы SkobWebPage.
  3.  В списке Language выберите язык программирования Visual C#.
  4.  Уберите пометку создания отдельного файла Place code in separate file. В данной работе Вы создадите однофайловую страницу с кодом и HTML (код ASP.NET может помещаться в отдельные файлы страницы и классов).

  1.  Нажмите кнопку Add. Мастер Visual Web Developer создаст новую страницу и откроет ее в окне Source.
  2.  Добавление статического текста HTML на страницу.
  3.  Внизу окна документа перейдите на вкладку Design для перехода в режим конструирования. Пока страница пуста и не содержит ни текста, ни элементов управления.
  4.  Наберите на странице текст, включающие Ваши данные (например, Скоб Ю.А., добро пожаловать в Visual Web Developer!!!).

  1.  Переключитесь в окно текста Source. Вы видите изменение текста HTML в соответствии с редактированием в окне Design.

  1.  Выполнение страницы.

Перед добавлением элементов управления на страницу Вы можете запустить ее на выполнение. Для выполнения необходим Web-сервер. В реальном Web-сайте Вы используете IIS-сервер в качестве Web-сервера. Однако, для тестовой страницы Вы можете использовать встроенный сервер ASP.NET Development Server, который выполняется локально и не требует IIS-сервер. Для сайтов типа file system Web sites Web-сервером по умолчанию в среде Visual Web Developer является ASP.NET Development Server.

  1.  Нажмите комбинацию клавиш CTRL+F5 для выполнения страницы.

  1.  Среда Visual Web Developer стартует в качестве сервера ASP.NET Development Server. Браузер отображает страницу. Хотя страница имеет тип.aspx, она в данном случае выполняется как любая страница HTML (если браузер показывает ошибку 502 или ошибку невозможности отобразить страницу, Вам необходимо сконфигурировать браузер для обхода proxy-серверов для локальных запросов).

  1.  Закройте браузер.
  2.  Добавление и программирование элементов управления.
    В этом разделе Вы добавите кнопку     Button, окно редактирования TextBox и метку Label на страницу и напишите код для обработки события Click кнопки Button. Серверные элементы управления, которые включают кнопки, метки, окна редактирования текста и другие знакомые элементы предоставляют типичные возможности работы форм для Web-страниц ASP.NET. Однако Вы можете программировать элементы управления с помощью кода, который выполняется на сервере, а не на клиенте.
  3.  Перейдите на вкладку Design для работы в режиме конструирования.
  4.  Нажмите SHIFT+ENTER несколько раз для создания нескольких пустых строк.

  1.  В окне инструментов окне Toolbox из группы Standard перетащите три элемента управления на страницу: окно редактирования TextBox, кнопку Button и метку Label.
  2.  Поместите указатель мыши над окном редактирования TextBox и наберите статический текст HTML заголовка «Введите Ваше имя:». Вы можете смешивать статический текст HTML и элементы управления сервера на одной странице.

  1.  Установка свойств элементов управления.

Visual Web Developer предлагает различние способы установки свойств элементов управления на странице. В данном разделе Вы установите свойства как в режиме Design, так и в режиме Source.

  1.  Выделите кнопку Button и в окне свойств Properties установите свойство Text на значение Вывести имя.

  1.  Перейдите в режим Source. В данном режиме в окне редактора отображается код HTML страницы, включая элементы, которые Visual Web Developer создал для элементов сервера. Элементы объявлены с помощью синтаксиса HTML, за исключением того что ярлыки (tags) используют префикс «asp:» и включают аттрибут «runat="server"».Свойства элементов объявлены как атрибуты.

  1.  Установите указатель ввода внутри ярлыка <asp:label> и нажмите SPACEBAR. Выпадающий список показывает свойства, которые Вы можете установить для метки Label. Этот инструмент среды, который называется IntelliSense помогает в режиме Source редактировать синтаксис серверных элементов управления, HTML-элементов и других элементов на странице.

  1.  Выберите свойство ForeColor и затем нажмите клавишу знака равенства (=). IntelliSense покажет список доступных цветов. Вы можете выводить выпадающий список IntelliSense, нажимая CTRL+J.

  1.  Выберите цвет текста метки Label. Атрибут ForeColor дополняется цветом, который Вы выбрали.

  1.  Программирование кнопки Button (добавление обработчика по умолчанию).
    В этом разделе Вы напишите код чтения имени, которое пользователь вводит в окно редактирования Text box и показывает это имя с помощью метки Label.
  2.  Переключитесь в режим Design.
  3.  Выполните двойной щелчок мыши по кнопке Button. Visual Web Developer переключится в режим Source и создаст каркас обработчика события для кнопки Button, которым является событие Click .
  4.  Внутри обработчика наберите следующее: «Label1.». Visual Web Developer покажет список доступных свойств метки Label. Выберите свойство Text.

  1.  Завершите текст обработчика события Click для кнопки Button (рис.).

  1.  Перейдите к тексту <asp:Button>. Заметьте, что элемент <asp:Button> теперь имеет атрибут OnClick="Button1_Click". Этот атрибут связывает обработчик события Click кнопки с методом обработчика пункта 4. Методы обработчиков событий могут иметь любые имена; имя Button1_Click является именем по умолчанию, которое создает Visual Web Developer. Важно, чтобы имя атрибута OnClick, совпадало с именем метода на странице.

  1.  Выполнение страницы.
  2.  Нажмите CTRL+F5 для запуска страницы в браузере. Страница опять выполнится с помощью ASP.NET Development Server.
  3.  Введите Ваше имя в окно редактирования и нажмите на кнопку. Имя, которое Вы ввели отображается меткой Label. Заметьте, что когда Вы нажимаете на кнопку, страница отсылается на Web-сервер. Затем ASP.NET воссоздает страницу, выполняет Ваш код (в данном случае выполняется обработчик события Click кнопки Button) и потом отсылает новую страницу на браузер.

  1.  В браузере просмотрите код страницы, который выполняется. Вы видите только обычный HTML; Вы не видите элементы <asp:>, с которыми Вы работаете в окне Source. Когда страница выполняется, ASP.NET выполняет серверные элементы и передает HTML-элементы странице, которая выполняет функции, представляющие элемент управления. Например, элемент управления <asp:Button> представлен как HTML-элемент <input type="submit">.

  1.  Завершите работу браузера.
  2.  Дополнительные элементы управления (добавление элемента Calendar).
    В данном разделе Вы поработаете с элементом управления Calendar, который показывает дату и время. Элемент управления Calendar является более сложным элементом управления, чем кнопка, текстовое окно или метка и иллюстрирует некоторые другие возможности серверных элементов управления. Вы добавите элемент управления Calendar на страницу и отформатируете его.
  3.  В среде Visual Web Developer переключитесь в режим Design. Из группы Standard инструнтов окна Toolbox перетащите элемент управления Calendar на страницу. Отображается интеллектуальная панель клендаря, которая предоставляет команды, облегчающие выполнение большинства задач для выбранного элемента управления.

  1.  Используя интеллектуальную панель, выберите Auto Format. Выводится диалог Auto Format, который позволяет выбрать схему форматирования календаря.

  1.  Из списка Select a scheme выберите Simple и подтвердите выбор нажатием OK.
  2.  Переключитесь в режим Source. Вы можете видеть элемент <asp:Calendar>, который значительно длиннее простых элементов и включает подэлементы (такие, как <WeekendDayStyle>) и который представляет различные форматирующие установки.

  1.  Программирование элемента управления Calendar.
  2.  Из левого выпадающего списка, показывающего все объекты, для которых Вы можете писать код, выберите Calendar1.

  1.  Из правого выпадающего списка выберите событие SelectionChanged. Visual Web Developer создает каркас обработчика события SelectionChanged для элемента управления Calendar. Вы теперь знаете два пути создания обработчика события для элемента управления. Первый путь использует двойной щелчок мыши на элементе управления в режиме Design. Второй путь использует выпадающие списки в режиме Source (выберите объект и событие, которое надо обработать).

  1.  Завершите код обработчика события SelectionChanged.

  1.  Выполнение страницы.
  2.  Нажмите CTRL+F5 для выполнения страницы в браузере.
  3.  Выберите дату на календаре. Выбранная дата выводится элементом управления Label.

  1.  Проанализируйте код страницы в браузере. Заметьте, что элемент управления Calendar представлен для страницы как таблица <table> с каждым днем – элементом <td>, содержащим элемент <a>.

  1.  Завершите работу браузера.
  2.  Вставьте в сайт новую страницу SkobChord без разделения кода и отредактируйте ее с применением изученного материала для использования при расчете с заданной точностью корня заданного уравнения методом хорд на предварительно найденном интервале.
  3.  Предусмотрите окна редактирования для ввода исходных данных и вывода результата и кнопку для запуска расчета. Снабдите все эти элементы вспомогательным статическим текстом. Подготовьте предварительно рисунок с отображением Вашего варианта уравнения. Используйте элемент управления Image (свойство ImageURL) для вывода на странице рисунка.

  1.  Создайте обработчик события Click кнопки и используйте его код для расчета одного из корней уравнения методом хорд на интервале [a, b].

  1.  Запрограммируйте метод для вычисления заданной функции F(x).

  1.  Выполните страницу в браузере и проанализируйте результаты расчета.

УСЛОВИЯ ВАРИАНТОВ

№ варианта

Уравнение

№ варианта

Уравнение

1

16

2

17

3

18

4

19

5

20

6

21

7

22

8

23

9

24

10

25

11

26

12

27

13

28

14

29

15

30

Точность =10-5 для всех вариантов.

 Контрольные вопросы:

  1.  Какие Вы можете перечислить составляющие части Visual Studio?
  2.  Для каких платформ Visual Studio позволяет создавать приложения?
  3.  Какой интерфейс используется в Visual Studio при кодировке?
  4.  Какая область содержит ссылки на наиболее часто возникающие у пользователя задачи в Visual Studio?
  5.  Какие способы отображения окон в Visual Studio 2005?
  6.  Какие приложения следует отнести к типам базовых приложений ASP.NET?
  7.  Какие из приведенных ниже записей представляют собой названия кнопок, служащих для получения доступа к различным типам месторасположений?
  8.  О чем говорит наличие у файла расширения .aspx?  
  9.  Что следует отнести к важным элементам файла с расширением .aspx?
  10.  Что содержит содержимое файла Default.aspx.cs?
  11.  Что определяет программист в процессе создания Web-приложения, оперируя классами?
  12.  Какой каталог содержит классы исходного кода, динамически скомпилированные для использования в рамках приложения?

ЛР №2Страница 18




1.  Что такое визуальное моделирование Визуальным моделированием visul modeling называется способ представлен
2. Теория бухгалтерского учета 1
3. РЕФЕРАТ дисертації на здобуття наукового ступеня кандидата географічних наук Одеса ~ Д
4. Насильственное преступное поведение включающее в себя- а физическое насилие убийство и причинение вреда
5. опінія тобто такий рівень політичного знання який притаманний сусву масам
6. і В Україні всі функції з реалізації державної політики в туристичній галузі та відповідальність за її
7. Англосаксонская система права
8. части языка; подсистемы общей системы языковой каждая из которых характеризуется совокупностью относител
9. Какаду аккомпанируя себе па органоле банджо и бокалах последовательно
10. Тема 14 Мировая валютная система Понятие валютной системы и ее структура Эволюция мировой валютн

Материалы собраны группой SamZan и находятся в свободном доступе