ASP NET Технология создание веб-сайтов. Анимация на сайте tutorial 01

asp-net

1. Создать новый веб-сайт на основе файловой системы

а) Запустить Visual Studio.

б) Если будет предложено выбрать настройки окружающей среды по умолчанию, кликните GeneralDevelopment Settings, а затем нажмите кнопку Пуск Visual Studio.

в) Создать новый веб-сайт, используя следующую информацию:

  • использовать ASP.NETшаблон веб-сайта;
  • выберать в качестве месторасположения Файловая системаи введите адрес персональной области локального жесткого диска, например:C:\Documents and Settings\O.O.Syniavska\Мои документы\Adventure-Works или C:\Users\O.O.Syniavska \Documents\Visual Studio 20хх\WebSites\Adventure-Works(можно использовать кнопку Обзор);

• выберать Visual C # в качестве языка для нового веб-приложения.

2. Сделать дизайн веб-страницы Default.aspx.

а) Добавить к созданному приложению Adventure-Works папку Images и скопировать в нее  с сетевого ресурса \\2-213-s2\Хранилище\Программы\Microsoft\MSLearning\2543\Unit01\Labfiles\Starter\Imagesследующие файлы:

  • AdvWorksLogo.gif;
  • AdvWorksSideBar.gif;
  • BlueBike.gif;
  • RedBike.gif.

б) Для страницы Default.aspx переключиться в режим конструктора.

в) Добавить на страницу HTML-таблицу. Важно убедится, что используется элемент управления  Table из раздела HTML на панели инструментов, а не Table из раздела Standard. Использование HTML-таблицы обеспечит дизайн макета страницы. HTML-таблица  не будут нуждаться в обработке ASP.NET.

г) Форматируйте таблицу в соответствии со следующим описанием:

  • таблица развернута по всей ширине страницы: в окне Properties установите свойство Widthтаблицы в 100%;

• таблица должна иметь 4 строки: для вставки необходимого количества строк кликните существующую строку, затем выберите пункт главного меню Макет, далее пункт Вставить и укажите Срока ниже;

  • первая строка таблицы состоит только из одной ячейки, которая выровнена правому краю: выберите все три ячейки в первой строке таблицы, в меню Макет выберите Объединить ячейки, в окне Propertiesустановите свойство Alignв right;
  • вторая строка таблицы состоит из трех ячеек, ширина левой и крайней правой ячейки составляют 10%: в окне Properties установите свойство Position раздела Styleв значение WIDTH10%.
  • третья строка таблицы состоит из трех ячеек, ширина левой и крайней правой ячейки составляют 10%: в окне Properties установите Styleв значение WIDTH10%.
  • четвертая строка таблицы состоит только из одной ячейки, которая выровнена правому краю.

г) Добавить элемент управления  Image в ячейку на первой строке таблицы, а затем установить его свойство ImageUrl в AdvWorksLogo.gif. Важно убедится, что используется элемент управления  Image из раздела Standard на панели инструментов, а не Image из раздела HTML. Причиной использования именно этого элемента управления  Image является то, что позже будет добавляться код для изменения на стороне сервера его свойства ImageUrl в ответ на изменения  во время работы приложения.

д) Добавить элемент управления Label в левую ячейку на второй строке таблицы, а затем установить его свойство Text в Главная. Установите ему шрифт Verdana: после добавления элемента управления Label, выделите его, а затем в окне Properties, в разделе Font, установить свойство Name в Verdana.

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

  • Установить свойство Textв Наши контакты.
  • Установите NavigateUrlв Contact.aspx.
  • Установите шрифт Verdana.

ж) Добавить элемент управления  Image в левую ячейку на третьей строке таблицы, а затем установить его свойство ImageUrl в AdvWorksSideBar.gif.

з) В окне Properties установите свойство VAlign в top для второй ячейки в третьей строке таблицы.

и) Ввести текст  Добро пожаловать на Adventure-Works.com во второй ячейке на третьей строке таблицы. Выделите текст, применяя стиль Heading 4 <H4>, а затем установить шрифт Verdana. Самый простой способ сделать это состоит в использовании списка Block Format на панели инструментовгде применить стильHeading 4 <H4>, а затем с помощью списка Font Name применить шрифт Verdana.

к) Добавить элемент управления  Image в правую ячейку на третьей строке таблицы, не устанавливая егоImageUrl. Установить его свойство (ID) в BikeImage.

л) Добавить элемент управления Label в ячейке на четвертой строке таблицы, а

затем установить его свойства Text в Adventure Works Copyright 2012.

3. Добавить и сделать дизайн новой веб-страницы Contact.aspx.

а) Добавить новую  веб-страницу –  элемент Web Form, используя следующую информацию:

  • Имя новой веб-страницы Contact.aspx.
  • Удалить флажок Place code in separate file(Размещать код в отдельном файле).

б) Скопировать таблицу из Default.aspx, а затем вставьте ее в режиме конструктора в Contact.aspx.

в) Удалить текст Добро пожаловать на Adventure-Works.com из таблицы в Contact.aspx.

г) Добавить элемент управления Label во второй ячейке на третьей строке таблицы, а затем установить его свойство (ID) в ContactDetails.

д) Установить свойство Text элемента управдения  ContactDetails в: <a href=’mailto:info@Adventure-Works.com’> info@Adventure-Works.com</a>.

е) Заменить гиперссылку Наши контакты во второй строке таблицы элементом управления Label с текстомНаши контакты, а затем установить его шрифт в Verdana.

ж) Замените элемент управления Label Главная на Hyperlink, который отображает текст Главная.

з) Установить свойство NavigateUrl элемента управления Hyperlink в Default.aspx, а затем установить его шрифт в Verdana.

и) Удалить элемент управления lmage Bikelmage из крайней правой ячейки в третьей строке таблицы.

к) Добавить элемент управления Button в крайнюю правую ячейку на третьей строке таблицы, а затем установить его свойства Текст в Показать больше контактных данных.

4. Реализовать обработку событий по умолчанию.

а) Дважды кликнуть на кнопке Показать больше контактных данных на Contact.aspx страницу веб-форм.Visual Studio создаст процедуру обработки события для событя по умолчанию – Click для этой кнопки.

Поскольку при создании веб-формы Contact.aspx был удален флажок Place code in separate file(Размещать код в отдельном файле), программный код хранится в том же файле, что и кода HTML. Такая модель кода страницы называется однофайловая модель.

б) В процедуре обработки события Click для кнопки, добавить код из Приложения 1

в) Переключится на страницу Default.aspx, а затем дважды кликнуть фон страницы (кликнуть за пределами таблицы). Visual Studio создает процедуру обработки события для события по умолчанию – Page_Load для этой страницы.

В отличие от страницы Contact.aspx, страница Default.aspx использует модель кода страницы с выделенным кодом, в которой программный код отделен от HTML-кода в файле Contact.aspx.cs.

г) В процедуре — обработчике события Page_Load для страницы, добавить код из Приложения 2.

Этот код просто загружает либо образ красного велосипеда, либо образ синего велосипеда на основе генератора случайных чисел.

Исходники к уроку