Построение интерфейса пользователя с элементами управления HTML tutorial 06

asp

Вступительное слово. В рамках текущего этапа развития системы B2C предприятия Adventure-Works нужно провести изменения следующих веб-страниц:

Survey.aspx,  для которой спроектировать графический интерфейс, позволяющий проводить онлайновый опрос пользователя и, также, добавить на этой странице ​​ элемент управления SiteMapPath, чтобы помочь пользователю в навигации по сайту.

SurveyReceipt.aspx, на которой обеспечить получение информации, передаваемой пользователем на страницу Survey.aspx.

FeedbackForm.aspx., на которой обеспечить получение информации, передаваемой пользователем на страницу Feedback.aspx.

Default.aspx, на которой добавить элемент управления  Menu, чтобы помочь пользователю в навигации.

Также необходимо добавить и преобразовать файл Web.sitemap, который будет использоваться, чтобы расширить функции навигации по веб-приложению. Кроме того, нужно добавить и преобразовать файл расписания, который будет использоваться, чтобы добавить динамические возможности показа изображений в веб-приложении.

Построение интерфейса пользователя с элементами управления HTML

В этом задании нужно  начать построение в веб-приложении Adventure Works форму онлайнового опроса. Нужно разработать макет страницы Survey.aspx, и добавить элементы управления HTML, чтобы обеспечить расширенный графический пользовательский интерфейс.

1. Установить и открыть проект веб-сайта предприятия Adventure-Works

а) Установить заготовку веб-сайта предприятия Adventure-Works:

  • с помощью проводника Windows открыть папку Adventure-Works, содержащую  файлы веб-сайта,  созданного на предыдущих лабораторных работах (расположена на личном ресурсе согласно пути, указанном при создании проекта).
  • Удалить содержимое папки, сделав копию ее содержимого (желательно – может пригодится).
  • скопировав в папку файлы с сетевого ресурса \\2-213-s2\Хранилище\Программы\Microsoft\MSLearning\2543\Unit03\Labfiles\Starter

б) С помощью проводника Windows перейти в папку \Projects\Adventure-Works, созданную Visual Studio для проектов на личном ресурсеи дважды кликнуть файл Adventure-Works.sln.

2. Создать макет страницы Survey.aspx, применяя элементы управления HTML в режиме конструктора.

а) Открыть Survey.aspx в режиме конструктора и проссмотреть предлагаемый дизайн страницы.

б) Перетащить элемент управления Div из группы HTML на панели инструментов в пустую ячейку таблицы посередине веб-страницы.

в) Убедиться, что добавленный элемент управления Div находится в фокусу, и в окне свойств кликнуть свойство Style.

г) В свойстве Style кликнуть кнопку с многоточием (…) в, а затем использовать  Style Builder установить следующие свойства:

  • Font Family: Impact (Используйте вкладку Font)
  • Font Color: #FFFFFF (Белый)
  • Font Style: Italic
  • Font Size: 36pt
  • Background Color: Maroon (Используйте вкладку Background)
  • Width: 100% (Используйте вкладку Position)

д) В конструкторе страницы кликнуть объект Div так, чтобы сделать его активным (поместить на него фокус), а затем введите Опрос

3. Откорректировать макет страницы Survey.aspx, изменив HTML-разметку в режиме исходного кода

а) Переключиться в режим просмотра исходного кода.

б) Непосредственно под HTML-кодом для элемента Div (Опрос</div>), который был только что добавлен, введите HTML-разметку для таблицы, которая имеет следующие характеристики:

  • Стиль: width: 100%; color: #0E0E6C.
  • Содержит шесть строк.
  • Первая строка имеет одну ячейку.
  • Остальные пять строк имеют по две ячейки:

<table style=»width: 100%; color: #0E0E6C»>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

в) Установить атрибуты ячейки в первой строке таблицы:

<td align=»left» valign=»top» colspan=»2″ style=»background-color: Maroon; color: White;»>

При вводе атрибутов HTML-элементов и тегов субэлементов функции Visual Studio IntelliSense обеспечивает помощь для разработчика.

г) В первую ячейку таблицы, добавить HTML-разметку для элемента SPAN:

<span style=»font-size:18pt; font-family:Verdana; font-style:normal;»>&nbsp; Помогите нам помочь вам!</span>

<br /> Персональные данные &nbsp;

д) Для первой ячейки в каждой из остальных строк в таблице, установите  атрибут align в значение right  и атрибут valign в top.Существует возможность добавить эти атрибуты, введя HTML-разметку в режиме исходного кода:

<td align=»right» valign=»top»>

или поместить курсор внутри  открывающего тега для элемента, а затем использовать окно Свойства для  установки необходимых значений.

е) Для второй ячейки каждой из строк в таблице (кроме первой  строки), установите атрибут valign в значение top.

ж) В первой ячейке второй строки таблицы введите текст: Имя:.

з) В первой ячейке третьей строки таблицы введите текст: Пол:.

и) В первой ячейке четвертой строки таблицы введите текст: Горный велосипед?

к) В первой ячейке пятой строки таблицы введите текст: Дорожный велосипед?

л) В первой ячейке шестой строки таблицы введите текст: Любимые трассы от: &nbsp;<br /> Пройденные трассы:

4. Добавить элементы управления HTML для ввода текста на веб-странице.

а) Добавить элемент управления HTML – Input (Text) во вторую ячейку второй строки таблицы. Указате следующие значения перечисленным атрибутам:

  • id=»txtName»
  • type=»text»
  • name=»txtName»
  • runat=»server»
  • enableviewstate=»true»

Несмотря на то, что можно использовать окно Свойств для настройки большинства атрибутов элементов управления HTML, его нельзя использовать в режиме конструктора для установки атрибута runat. Вместо этого, можно использовать любой из следующих методов:

  • Изменить HTML-разметку в режиме исходного кода.
  • Кликнуть правой кнопкой мыши элемент управления в режиме конструктора, а затем выбрать из контекстного меню Run as Server Control (Выполнять как серверный элемент управления)..

б) Во вторую ячейку третьей строки таблицы, добавить HTML-разметку для элемента управления RADIO:

<input id=»Radio1″ name=»optGender» type=»radio» value=»Female» runat=»server» enableviewstate=»true»/>Женский<br />

<input id=»Radio2″ name=»optGender» type=»radio» value=»Male» runat=»server» enableviewstate=»true»/>Мужской

в) Во вторую ячейку четвертой строки таблицы, добавить HTML-разметку для элемента управления CHECKBOX:

<input id=»chkMBR» checked=»checked» name=»chkMBR» type=»checkbox» runat=»server» enableviewstate=»true»/>

г) Во вторую ячейку пятой строки таблицы, добавить HTML-разметку для элемента управления CHECKBOX:

<input id=»chkRR» checked=»checked» name=»chkRR» type=»checkbox» runat=»server» enableviewstate=»true»/>

д) Во вторую ячейку шестой строки таблицы, добавить HTML-разметку для элемента управления TextArea:

<textarea id=»txtTrails» cols=»50″ name=»txtTrails» rows=»3″ runat=»server» enableviewstate=»true»></textarea>

е) Добавить элемент управления Horizontal Rule (<hr/>) непосредственно под HTML-таблицей.

ж) Если в настоящее время включен режим исходного кода, переключиться в режим конструктора для обзора макета страницы.