Разработка интерактивных сайтов с помощью Microsoft Visual Web Developer

Начало работы с Microsoft Visual Web Developer

Разбить на страницы
Показывать лекцию целиком

Изучив материал этого модуля, вы сможете:

  • использовать начальную страницу для открытия новых и существующих проектов, получения последних сведений о программных продуктах;
  • использовать различные типы окон VWD 2005 EE и освобождать на экране максимум места для редактирования документов при помощи функции Auto Hide;
  • редактировать Web-формы и HTML-страницы в графическом режиме или в виде HTML-текста;
  • автоматизировать написание кода при помощи возможностей Code Editor;
  • запускать и отлаживать web-приложения в VWD 2005 EE;
  • пользоваться встроенной справочной системой и устанавливать в ней нужные фильтры.
    •

    Тема1. Элементы интерфейса Visual Web Developer 2005

    Начальная страница (рис.3.1) - первое, что вы видите после запуска Visual Web Developer 2005 Express Edition (VWD 2005 EE). Она содержит ряд панелей, которые облегчают поиск нужной информации, а также исполнение некоторых общих задач.

    (рис 3.1) Начальная страница Visual Web Developer 2005 Express Edition

    Панель Recent Projects, содержит ссылки на четыре последних проекта, сохраненных в VWD 2005 EE. Любой из них можно открыть, щелкнув ссылку с именем нужного проекта. Кроме того, здесь предусмотрены средства для создания нового проекта или открытия существующего, но отсутствующего в списке последних проектов. Для этого нужно щелкнуть соответствующую кнопку на панели Recent Projects.

    Справа на начальной странице располагается панель Visual Web Developer News, которая содержит последние сведения о VWD 2005 EE, сопутствующих программных продуктах Microsoft, а также другие полезные материалы. Эти сведения отображаются, если вы установили подключение к сети Интернет.

    В VWD 2005 EE два типа окон: окна документов и инструментальные окна. Первые отображают содержимое приложения: формы, Web-страницы и код. Одновременно можно открыть несколько окон документов; для переключения между ними достаточно щелкнуть ярлычки, расположенные вверху экрана.

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

    Чтобы инструментальное окно находилось на экране постоянно, выключите кнопку Auto Hide (она располагается в правом верхнем углу окна и похожа на маленькую канцелярскую кнопку), а если щелкнуть ее еще раз, инструментальное окно снова будет скрываться, оставляя на виду лишь ярлычок. В этом режиме неиспользуемые инструментальные окна скрываются, освобождая место для редактирования документа.

    Настроить внешний вид VWD 2005 EE можно с помощью параметров доступных в окне Options (рис.3.2), которое отображается при выборе в главном меню элемента Tools\Options.

    (рис 3.2) Настройка личных предпочтений в окне Options

    В VWD 2005 EE окно Toolbox отображает элементы управления и компоненты, которые можно перетаскивать в окно документа. Содержимое Toolbox зависит от типа редактируемого документа. Например, при редактировании Web-формы Toolbox содержит серверные элементы управления, HTML-элементы управления, элементы управления, связанные с данными, и другие компоненты, которые можно размешать на поверхности Web-форм (рис.3.3).

    (рис 3.3) Окно Toolbox

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

    В VWD 2005 EE имеется объединенная справочная система, включающая сведения по среде разработки, языкам программирования и .NET Framework, а также информацию технической поддержки и статьи из MSDN. В зависимости от параметров, установленных на начальной странице в диалоговом окне Options, содержимое справочной системы отображается в окне документа либо в отдельном окне вне VWD 2005 EE.

    В справочной системе предусмотрены три поисковых окна: Contents, Index и Search. Они работают подобно инструментальным окнам VWD 2005 EE; их можно "пристыковывать" к другим окнам, а также прятать и открывать, щелкая их ярлычки

    В каждом поисковом окне есть раскрывающийся список Filter, в котором выбирают нужный язык программирования или раздел для поиска. Эта возможность особенно полезна при работе с окнами Search и Index, поскольку объединенная справочная система содержит немало информации.

    В разделах с примерами операторов и кода на каждой странице установлен фильтр языка. Он имеет вид кнопки с изображением воронки и расположен в левом верхнем углу страницы. Щелкнув значок фильтра, вы выведете примеры к этому разделу на другом языке программирования либо заставите справочную систему показать примеры на всех языках. (рис.3.4)

    (рис 3.4) Справочная система

    VWD 2005 EE упорядочивает приложения при помощи проектов. Файл проекта имеет расширение .sln и содержит сведения о всех файлах, входящих в проект. По умолчанию он размещается в папке "Мои документы\Visual Studio 2005\ Projects". Файлы, составляющие проект, можно просматривать в окне Solution Explorer, показанном на рис.3.5.

    (рис 3.5) Окно Solution Explorer

    Тема 2. Создание нового и открытие уже существующего сайта

    В VWD 2005 EE Web-сайт можно создать тремя способами (см. рис.3.6):

  • непосредственно в файловой системе компьютера, т.е. в любой папке на жестком диске или общедоступной сетевой папке. (File system)
  • на локальном или удаленном сервере Internet Information Server, используя http-протокол
  • на локальном или удаленном сервере Internet Information Server, используя ftp-протокол.
    •  (рис 3.6) Создание нового сайта

    Чтобы создать Web-сайт в файловой системе нужно выполнить следующие действия

  • Выберите пункт NewWeb Site из меню File.
  • Когда появится диалоговое окно New Web Site, выберите подходящий шаблон. Например, ASP.NET Web Site.
  • В области Location выберите File System из раскрывающегося списка и укажите папку, где будет размещаться сайт.
  • В области Language выберите язык программирования. Например, C#.
  • Нажмите OK.
    •

    VWD 2005 EE создаст сайт, откроет в редакторе кода страницу Default.aspx, и отобразит папку Solution Explorer.

    Если путь, который Вы определили для размещения сайта, уже содержит файлы, то VWD 2005 EE, предупредит об этом и попросит вас его изменить. Если вы продолжите создавать новый Web-сайт, не изменив путь, то существующие файлы будут заменены файлами шаблона выбранного вами сайта

    Чтобы создать локальный Web-сайт на Internet Information Server (IIS) нужно сначала выполнить эти требования:

  • Зарегистрироваться на компьютере с привилегиями администратора. Только администратор может изменить необходимые параметры настройки IIS.
  • Установить и запустить на компьютере IIS.
  • Установить на компьютере ASP.NET 2.0 и сделать его доступным в IIS.
    •

    Файлы локального Web-сайта IIS могут быть расположены физически в разных местах. Например:

  • Вы можете создать новый сайт в корне IIS (типично C:\lnetPub\wwwroot) и пометить его как приложение IIS.
  • Вы можете создать новый сайт в любой папке, а затем пометить ее как виртуальный каталог IIS и приложение IIS.
  • Вы можете создать Web-сайт, который указывает на существующее приложение IIS, и затем редактировать файлы этого приложения
    •

    Для создания локального Web-сайта IIS проделайте следующие шаги

  • Выберите пункт New Web Site из меню File
  • Когда диалоговое окно New Web Site появится, выберите любой шаблон, перечисленный в поле Templates
  • Выберите HTTP в раскрывающемся списке Location.
  • Если Вы хотите вручную задать URL нового сайта, то продолжите следующим образом:
  • Напечатайте новый URL в текстовое поле Location. Например, можно напечатать http://localhost/horoscope.
  • Переходите к шагу 9.

    Иначе, сделайте так:

  • Щелкните на кнопку Browse. Появится диалоговое окно (см.рис.3.7).(рис 3.7) Выбор местоположения сайта
  • Щелкните значок Local IIS, чтобы отобразить список локальных Web-серверов
    •
  • Если Вы хотите, чтобы новый Web-сайт использовал файлы от существующего приложения IIS, выберите папку, где это приложение находится, щелкните кнопкой Open, и затем переходите к шагу 9.
  • В окне Select The Web Site you want to Open выберите Web-сервер и затем, в случае необходимости, родительскую папку сайта, который Вы хотите создать.
  • Если Вы хотите, чтобы файлы нового Web-сайта находились в пределах директории Web-сервера, то выполните следующие действия:
  • щелкните кнопкой Create New Web Application. Она первая из трех кнопок, которые находятся в верхнем правом углу диалогового окна;
  • новая папка WebSite появится в окне Select The Web Site you want to Open. Переименуйте эту папку так, как вам нужно.

    • Если Вы хотите, чтобы файлы нового Web-сайта находились в другом месте, то выполните следующие действия:

  • Щелкните кнопкой Create New Virtual Directory. Это средняя кнопка, из тех, что находятся в верхнем правом углу диалогового окна. Щелчок отобразит диалоговое окно New Virtual Directory, которое показано на рис.3.8.(рис 3.8) Новая виртуальная директория
  • В поле Alias Name, напечатайте путь URL, где должен находиться новый сайт.
  • В поле Folder, напечатайте или выберите физическое местоположение файлов Web-сайта.
  • Нажмите OK, чтобы создать виртуальный каталог.
    •
  • Щелкните кнопкой Open, чтобы создать сайт в IIS.
  • Выберите язык программирования по умолчанию для Web-сайта.
  • Нажимите OK, чтобы создать сайт и открыть его в VWD 2005 EE.

    • Удаленный Web-сайт использует IIS, установленный на другом компьютере, к которому Вы можете подключиться по сети. Файлы вашего Web-сайта будут постоянно находиться на удаленном компьютере, и VWD 2005 EE будет взаимодействовать с Web-сайтом через Серверные расширения FrontPage.

    Создание удаленного Web-сайта IIS требует следующих условий:

  • ASP.NET 2.0 должен быть установлен на удаленном компьютере и доступен в IIS
  • IIS должен быть установлен и запущен на удаленном компьютере.
  • Серверные расширения FrontPage должны быть установлены и доступны на удаленном компьютере.
  • Вы должны иметь право на администрирование серверных расширений FrontPage и право на создание новых папок и файлов на удаленном компьютере.
    •

    Для создания удаленного Web-сайта IIS нужно выполнить следующие действия

  • Выбрать пункт New Web Site из меню File.
  • Когда диалоговое окно New Web Site появится, выбрать нужный шаблон, из поля Templates.
  • В области Location из раскрывающегося списка выбрать HTTP.
  • Затем можно выбрать один из вариантов.
  • Напечатать URL нового сайта в поле Location. Например, напечатать http://www.example.com/horoscope ;
  • Щелкнуть кнопкой Browse, выбрать Remote Site, затем напечатать нужный URL в поле Web Site Location
  • Щелкнуть кнопкой Browse, выбрать Remote Site, щелкнуть кнопкой New Web Site, и затем печатать нужный URL в поле Web URL.
    •
  • Выбрать язык программирования по умолчанию для Web-сайта.
  • Нажать OK, чтобы создать сайт и открыть его в VWD 2005 EE.

    • Для некоторых Web-серверов, единственный способ обновить файлы заключается в использовании протокола передачи файлов (FTP). VWD 2005 EE поддерживает и эту среду. Чтобы использовать этот подход, сайт, который Вы хотите открыть, должен быть доступным на FTP-сервере, и Вы должны получить следующую информацию от администратора FTP-сервера.

  • Название FTP-сервера, где Вы хотите создать Web-сайт.
  • Название папки FTP-сервера, где Вы имеете разрешение создавать свои папки и файлы.
  • Имя пользователя и пароль для доступа к FTP-серверу.
  • Номер порта, который используется FTP-сервером. Обычно это 21 порт.
    •

    Создание Web-сайта доступного по FTP протоколу

  • Выбрать New Web Site из меню File.
  • Когда диалоговое окно New Web Site появится, выбрать нужный шаблон, из поля Templates.
  • В области Location из раскрывающегося списка выбрать FTP.
  • Укажите путь к FTP сайту, например, 3.ftp://ftp.example.com/horoscope(рис 3.9) Подключение к ftp серверу
  • Server: введите название сервера, например ftp://ftp.example.com.
  • Port: если FTP-сервер работает на порту отличным от 21, изменение это значение.
  • Directory: укажите название папки FTP, где Вы хотите разместить файлы Web-сайта.
  • Passive Mode: поставьте здесь галочку, если имеются проблемы с подключением по протоколу FTP из-за системы сетевой защиты
  • Anonymous Login поставьте здесь галочку, если FTP-сервер разрешает анонимный доступ. Очистите это поле, если Вы имеете для доступа имя пользователя и пароль, кторые нужно указать в полях Username и Password
    •

    Затем щелкните кнопкой Open.

  • Выберите язык программирования по умолчанию для Web-сайта.
  • Нажмите OK, чтобы создать сайт и открыть его в VWD 2005 EE

    • VWD 2005 EE соединяется с FTP-сервером и копирует на него файлы шаблона Web-сайта. Не забывайте, что для Web-сайтов, созданных таким образом, вы или администратор удаленного сервера должны запустить оснастку IIS и отметить новый Web-сайт как приложение IIS.

    Желательно иметь две копии Web-сайта, который вы поддерживаете. "Рабочая" копия, расположена на локальном компьютере отлаживается под управлением ASP.NET Development Server и "оперативная" версия, расположенная на удаленном компьютере и работающая под управлением IIS и обновляемая по http или ftp проколу

    Открытие недавно используемого Web-сайта.

    Когда VWD 2005 EE запускается, то отображается начальная страница, на которой имеется поле Recent Projects. Это поле содержит список Web-сайтов, которые недавно редактировались. Чтобы открыть один из этих сайтов снова, просто нажмите на его название в списке.

    Тот же самый список сайтов появляется в меню File. Чтобы открыть сайт этим способом, выберите пункт Recent Projects из меню File, а затем нажмите на нужный сайт.

    По умолчанию, VWD 2005 EE помнит последние 10 сайтов, которые открывались. Если это число нужно увеличить или уменьшить, то нужно изменить соответствующий параметр через панель Options (см. рис.3.2) .

  • Выбрать пункт Open Web Site из меню File.
  • Когда диалоговое окно Open Web Site, откроется, выберете значок в левой части окна, который соответствует местоположению вашего сайта
  • В зависимости от местоположения сайта дальнейшие действия выполняйте по одному из четырех вариантов
    •

    Во-первых, если нужно открыть Web-сайт расположенный в файловой системе, то щелкните на значок File System в диалоговом окне Open Web Site, (рис.3.10)

    (рис 3.10) Окно Open Web Site, вкладка File System
  • Выберите папку, которая содержит корень вашего web-сайта.
  • Щелкните на кнопке Open.

    Будьте внимательны при выполнении команды! Не открывайте папку, которая не является корнем Web-сайта. Такая ошибка часто случается если:

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

    При выполнении команды Open Web Site, VWD 2005 EE предполагает, что открываемая папка является корнем Web-сайта и будет содержать файлы конфигурации и специальные подпапки. Если вы ошиблись, то сайт работать не будет.

    (рис 3.11) Окно Open Web Site, вкладка Local IISОбратите внимание, что на рис.3.11, некоторые значки папок, изображаются с иконкой земного шара. Если папка имеет такой значок, то это - корневая папка приложения IIS которую можно открыть в VWD 2005 EE.

    Во-вторых, если нужно открыть локальный Web-сайт

    Щелкнете иконку Local IIS в диалоговом окне Open Web Site, и появится форма показанная на рис.3.11. Затем выполните следующие действия:

  • Определите местонахождение папки, которая содержит корень вашего Web-сайта. Чтобы сделать это, откройте или закройте любые узлы по мере необходимости.
  • Выберите папку и щелкните кнопкой Open.
    •

    В-третьих, если нужно открыть Web-сайт доступный по FTP

    Работая с Web-сайтом через FTP будете уверены в том, что папка куда вы помещаете файлы соответствует корневой папке приложения IIS на Web-сервере.

    Щелкнете на иконку FTP Site в диалоговом окне Open Web Site, появится форма, показанная на рис.3.9. Затем выполните следующие действия:

  • Заполните области Server, Port, Directory, Username и Password также как это делалось при создании сайта.
  • Щелкните на кнопку Open.
    •

    В-четвертых, если нужно открыть удаленный Web-сайт.

    (рис 3.12) Открытие удаленного Web-сайта

    Щелкните на иконку Remote Site в диалоговом окне Open Web Site (см. рис.3.12). Затем выполните следующие действия:

  • Напечатайте полный URL Web-сайта в поле Web Site Location.
  • Щелкните на кнопку Open.
    •

    Тема 3. Редактирование документов сайта

    При создании Web-сайта VWD 2005 EE генерирует несколько документов, назначение основных из них описано в табл.3.1.

    Файлы Web-сайта
    Имя Содержимое
    StyleSheet.css Определение стилей оформления элементов управления, Web-форм и т.д., генерируемых для проекта
    web.config Параметры Web-cepвepa при обслуживании этого проекта; определяют способ сообщения об ошибках, используемый тип аутентификации пользователей и т. п. В проекте может быть только один такой файл, он размещается в корневом каталоге проекта
    Default.aspx Описание визуального представления Web-формы. Здесь приведено имя файла создаваемого по умолчанию
    Default.aspx.cs Код, обрабатывающий события Web-формы. Расширение .cs указывает что в нем содержится код написанный на С#
    Web.sitemap Карта сайта. Позволяет использовать описанные в ней страницы для навигации по сайту.
    MasterPage.master Шаблон для отображения других страниц

    Web-формы и HTML-документы можно редактировать в графическом режиме с использованием технологии drag-and-drop, либо в текстовом виде. Для переключения между режимами достаточно щелкнуть ярлычки Design и Source , расположенные внизу окна документа (рис.3.13).

    (рис 3.13) Web-документ в режиме конструирования Design

    Некоторые задачи невозможно решить в графическом режиме, поэтому приходится редактировать Web-документы в текстовом виде. Если вы знаете HTML, то этот способ может оказаться даже удобнее использования графических инструментов. Поддерживаемая VWD 2005 EE технология IntelliSense помогает завершать элементы HTML, как показано на рис.3.14

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

    С каждой страницей Web Forms связан файл, содержащий код этой страницы, Эти файлы автоматически генерируются при создании новой Web-формы. Имя файла с кодом составляется из имени Web-формы и расширения .cs (.vb). ()

    В каждом файле кода VWD 2005 EE генерирует определение класса, инициализирующие процедуры и обработчик события Page_Load. Чтобы скрыть сгенерированный код, следует щелкнуть знак "минус" (рис.3.14)

    (рис 3.14) Технология IntelliSense в действии при редактировании HTML-текста

    При этом область сворачивается, а знак "минус" меняется на "плюс" (+), щелкнув который, вы снова раскроете эту область. Аналогичным образом сворачивают и раскрывают и другие блоки кода, например определения классов и процедуры. Инструмент VWD 2005 EE под названием Code Editor также поддерживает функцию autocomplete, автоматически завершающую ключевые слова и члены классов при помощи технологии IntelliSense (рис.3.15). Если вы пишете на Visual Basic, то после завершения ввода каждой строки функция autocomplete будет делать первые буквы ключевых слов и имен членов заглавными. Однако в программе, написанной на Visual С#, Visual Studio .NET не распознает ключевое слово или имя члена, если при его вводе использован неверный регистр. Дело в том, что Visual C#, в отличие от Visual Basic .NET. чувствителен к регистру символов.

    (рис 3.15) Файл кода Web-формы (на Visual C#). Функция autocomplete

    Большинство автоматизирующих возможностей Code Editor можно включать и отключать, изменяя параметры в диалоговом окне Options (рис.3.2). Кроме того, в нем предусмотрена корректировка автоматических абзацных отступов, завершения блоков кода и других параметров, определяющих работу с языком.

    Страницы:

    Изучив материал этого модуля, вы сможете:

  • использовать начальную страницу для открытия новых и существующих проектов, получения последних сведений о программных продуктах;
  • использовать различные типы окон VWD 2005 EE и освобождать на экране максимум места для редактирования документов при помощи функции Auto Hide;
  • редактировать Web-формы и HTML-страницы в графическом режиме или в виде HTML-текста;
  • автоматизировать написание кода при помощи возможностей Code Editor;
  • запускать и отлаживать web-приложения в VWD 2005 EE;
  • пользоваться встроенной справочной системой и устанавливать в ней нужные фильтры.
    •

    Тема1. Элементы интерфейса Visual Web Developer 2005

    Начальная страница (рис.3.1) - первое, что вы видите после запуска Visual Web Developer 2005 Express Edition (VWD 2005 EE). Она содержит ряд панелей, которые облегчают поиск нужной информации, а также исполнение некоторых общих задач.

    (рис 3.1) Начальная страница Visual Web Developer 2005 Express Edition

    Панель Recent Projects, содержит ссылки на четыре последних проекта, сохраненных в VWD 2005 EE. Любой из них можно открыть, щелкнув ссылку с именем нужного проекта. Кроме того, здесь предусмотрены средства для создания нового проекта или открытия существующего, но отсутствующего в списке последних проектов. Для этого нужно щелкнуть соответствующую кнопку на панели Recent Projects.

    Справа на начальной странице располагается панель Visual Web Developer News, которая содержит последние сведения о VWD 2005 EE, сопутствующих программных продуктах Microsoft, а также другие полезные материалы. Эти сведения отображаются, если вы установили подключение к сети Интернет.

    В VWD 2005 EE два типа окон: окна документов и инструментальные окна. Первые отображают содержимое приложения: формы, Web-страницы и код. Одновременно можно открыть несколько окон документов; для переключения между ними достаточно щелкнуть ярлычки, расположенные вверху экрана.

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

    Чтобы инструментальное окно находилось на экране постоянно, выключите кнопку Auto Hide (она располагается в правом верхнем углу окна и похожа на маленькую канцелярскую кнопку), а если щелкнуть ее еще раз, инструментальное окно снова будет скрываться, оставляя на виду лишь ярлычок. В этом режиме неиспользуемые инструментальные окна скрываются, освобождая место для редактирования документа.

    Настроить внешний вид VWD 2005 EE можно с помощью параметров доступных в окне Options (рис.3.2), которое отображается при выборе в главном меню элемента Tools\Options.

    (рис 3.2) Настройка личных предпочтений в окне Options

    В VWD 2005 EE окно Toolbox отображает элементы управления и компоненты, которые можно перетаскивать в окно документа. Содержимое Toolbox зависит от типа редактируемого документа. Например, при редактировании Web-формы Toolbox содержит серверные элементы управления, HTML-элементы управления, элементы управления, связанные с данными, и другие компоненты, которые можно размешать на поверхности Web-форм (рис.3.3).

    (рис 3.3) Окно Toolbox

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

    В VWD 2005 EE имеется объединенная справочная система, включающая сведения по среде разработки, языкам программирования и .NET Framework, а также информацию технической поддержки и статьи из MSDN. В зависимости от параметров, установленных на начальной странице в диалоговом окне Options, содержимое справочной системы отображается в окне документа либо в отдельном окне вне VWD 2005 EE.

    В справочной системе предусмотрены три поисковых окна: Contents, Index и Search. Они работают подобно инструментальным окнам VWD 2005 EE; их можно "пристыковывать" к другим окнам, а также прятать и открывать, щелкая их ярлычки

    В каждом поисковом окне есть раскрывающийся список Filter, в котором выбирают нужный язык программирования или раздел для поиска. Эта возможность особенно полезна при работе с окнами Search и Index, поскольку объединенная справочная система содержит немало информации.

    В разделах с примерами операторов и кода на каждой странице установлен фильтр языка. Он имеет вид кнопки с изображением воронки и расположен в левом верхнем углу страницы. Щелкнув значок фильтра, вы выведете примеры к этому разделу на другом языке программирования либо заставите справочную систему показать примеры на всех языках. (рис.3.4)

    (рис 3.4) Справочная система

    VWD 2005 EE упорядочивает приложения при помощи проектов. Файл проекта имеет расширение .sln и содержит сведения о всех файлах, входящих в проект. По умолчанию он размещается в папке "Мои документы\Visual Studio 2005\ Projects". Файлы, составляющие проект, можно просматривать в окне Solution Explorer, показанном на рис.3.5.

    (рис 3.5) Окно Solution Explorer

    Тема 2. Создание нового и открытие уже существующего сайта

    В VWD 2005 EE Web-сайт можно создать тремя способами (см. рис.3.6):

  • непосредственно в файловой системе компьютера, т.е. в любой папке на жестком диске или общедоступной сетевой папке. (File system)
  • на локальном или удаленном сервере Internet Information Server, используя http-протокол
  • на локальном или удаленном сервере Internet Information Server, используя ftp-протокол.
    •  (рис 3.6) Создание нового сайта

    Чтобы создать Web-сайт в файловой системе нужно выполнить следующие действия

  • Выберите пункт NewWeb Site из меню File.
  • Когда появится диалоговое окно New Web Site, выберите подходящий шаблон. Например, ASP.NET Web Site.
  • В области Location выберите File System из раскрывающегося списка и укажите папку, где будет размещаться сайт.
  • В области Language выберите язык программирования. Например, C#.
  • Нажмите OK.
    •

    VWD 2005 EE создаст сайт, откроет в редакторе кода страницу Default.aspx, и отобразит папку Solution Explorer.

    Если путь, который Вы определили для размещения сайта, уже содержит файлы, то VWD 2005 EE, предупредит об этом и попросит вас его изменить. Если вы продолжите создавать новый Web-сайт, не изменив путь, то существующие файлы будут заменены файлами шаблона выбранного вами сайта

    Чтобы создать локальный Web-сайт на Internet Information Server (IIS) нужно сначала выполнить эти требования:

  • Зарегистрироваться на компьютере с привилегиями администратора. Только администратор может изменить необходимые параметры настройки IIS.
  • Установить и запустить на компьютере IIS.
  • Установить на компьютере ASP.NET 2.0 и сделать его доступным в IIS.
    •

    Файлы локального Web-сайта IIS могут быть расположены физически в разных местах. Например:

  • Вы можете создать новый сайт в корне IIS (типично C:\lnetPub\wwwroot) и пометить его как приложение IIS.
  • Вы можете создать новый сайт в любой папке, а затем пометить ее как виртуальный каталог IIS и приложение IIS.
  • Вы можете создать Web-сайт, который указывает на существующее приложение IIS, и затем редактировать файлы этого приложения
    •

    Для создания локального Web-сайта IIS проделайте следующие шаги

  • Выберите пункт New Web Site из меню File
  • Когда диалоговое окно New Web Site появится, выберите любой шаблон, перечисленный в поле Templates
  • Выберите HTTP в раскрывающемся списке Location.
  • Если Вы хотите вручную задать URL нового сайта, то продолжите следующим образом:
  • Напечатайте новый URL в текстовое поле Location. Например, можно напечатать http://localhost/horoscope.
  • Переходите к шагу 9.

    Иначе, сделайте так:

  • Щелкните на кнопку Browse. Появится диалоговое окно (см.рис.3.7).(рис 3.7) Выбор местоположения сайта
  • Щелкните значок Local IIS, чтобы отобразить список локальных Web-серверов
    •
  • Если Вы хотите, чтобы новый Web-сайт использовал файлы от существующего приложения IIS, выберите папку, где это приложение находится, щелкните кнопкой Open, и затем переходите к шагу 9.
  • В окне Select The Web Site you want to Open выберите Web-сервер и затем, в случае необходимости, родительскую папку сайта, который Вы хотите создать.
  • Если Вы хотите, чтобы файлы нового Web-сайта находились в пределах директории Web-сервера, то выполните следующие действия:
  • щелкните кнопкой Create New Web Application. Она первая из трех кнопок, которые находятся в верхнем правом углу диалогового окна;
  • новая папка WebSite появится в окне Select The Web Site you want to Open. Переименуйте эту папку так, как вам нужно.

    • Если Вы хотите, чтобы файлы нового Web-сайта находились в другом месте, то выполните следующие действия:

  • Щелкните кнопкой Create New Virtual Directory. Это средняя кнопка, из тех, что находятся в верхнем правом углу диалогового окна. Щелчок отобразит диалоговое окно New Virtual Directory, которое показано на рис.3.8.(рис 3.8) Новая виртуальная директория
  • В поле Alias Name, напечатайте путь URL, где должен находиться новый сайт.
  • В поле Folder, напечатайте или выберите физическое местоположение файлов Web-сайта.
  • Нажмите OK, чтобы создать виртуальный каталог.
    •
  • Щелкните кнопкой Open, чтобы создать сайт в IIS.
  • Выберите язык программирования по умолчанию для Web-сайта.
  • Нажимите OK, чтобы создать сайт и открыть его в VWD 2005 EE.

    • Удаленный Web-сайт использует IIS, установленный на другом компьютере, к которому Вы можете подключиться по сети. Файлы вашего Web-сайта будут постоянно находиться на удаленном компьютере, и VWD 2005 EE будет взаимодействовать с Web-сайтом через Серверные расширения FrontPage.

    Создание удаленного Web-сайта IIS требует следующих условий:

  • ASP.NET 2.0 должен быть установлен на удаленном компьютере и доступен в IIS
  • IIS должен быть установлен и запущен на удаленном компьютере.
  • Серверные расширения FrontPage должны быть установлены и доступны на удаленном компьютере.
  • Вы должны иметь право на администрирование серверных расширений FrontPage и право на создание новых папок и файлов на удаленном компьютере.
    •

    Для создания удаленного Web-сайта IIS нужно выполнить следующие действия

  • Выбрать пункт New Web Site из меню File.
  • Когда диалоговое окно New Web Site появится, выбрать нужный шаблон, из поля Templates.
  • В области Location из раскрывающегося списка выбрать HTTP.
  • Затем можно выбрать один из вариантов.
  • Напечатать URL нового сайта в поле Location. Например, напечатать http://www.example.com/horoscope ;
  • Щелкнуть кнопкой Browse, выбрать Remote Site, затем напечатать нужный URL в поле Web Site Location
  • Щелкнуть кнопкой Browse, выбрать Remote Site, щелкнуть кнопкой New Web Site, и затем печатать нужный URL в поле Web URL.
    •
  • Выбрать язык программирования по умолчанию для Web-сайта.
  • Нажать OK, чтобы создать сайт и открыть его в VWD 2005 EE.

    • Для некоторых Web-серверов, единственный способ обновить файлы заключается в использовании протокола передачи файлов (FTP). VWD 2005 EE поддерживает и эту среду. Чтобы использовать этот подход, сайт, который Вы хотите открыть, должен быть доступным на FTP-сервере, и Вы должны получить следующую информацию от администратора FTP-сервера.

  • Название FTP-сервера, где Вы хотите создать Web-сайт.
  • Название папки FTP-сервера, где Вы имеете разрешение создавать свои папки и файлы.
  • Имя пользователя и пароль для доступа к FTP-серверу.
  • Номер порта, который используется FTP-сервером. Обычно это 21 порт.
    •

    Создание Web-сайта доступного по FTP протоколу

  • Выбрать New Web Site из меню File.
  • Когда диалоговое окно New Web Site появится, выбрать нужный шаблон, из поля Templates.
  • В области Location из раскрывающегося списка выбрать FTP.
  • Укажите путь к FTP сайту, например, 3.ftp://ftp.example.com/horoscope(рис 3.9) Подключение к ftp серверу
  • Server: введите название сервера, например ftp://ftp.example.com.
  • Port: если FTP-сервер работает на порту отличным от 21, изменение это значение.
  • Directory: укажите название папки FTP, где Вы хотите разместить файлы Web-сайта.
  • Passive Mode: поставьте здесь галочку, если имеются проблемы с подключением по протоколу FTP из-за системы сетевой защиты
  • Anonymous Login поставьте здесь галочку, если FTP-сервер разрешает анонимный доступ. Очистите это поле, если Вы имеете для доступа имя пользователя и пароль, кторые нужно указать в полях Username и Password
    •

    Затем щелкните кнопкой Open.

  • Выберите язык программирования по умолчанию для Web-сайта.
  • Нажмите OK, чтобы создать сайт и открыть его в VWD 2005 EE

    • VWD 2005 EE соединяется с FTP-сервером и копирует на него файлы шаблона Web-сайта. Не забывайте, что для Web-сайтов, созданных таким образом, вы или администратор удаленного сервера должны запустить оснастку IIS и отметить новый Web-сайт как приложение IIS.

    Желательно иметь две копии Web-сайта, который вы поддерживаете. "Рабочая" копия, расположена на локальном компьютере отлаживается под управлением ASP.NET Development Server и "оперативная" версия, расположенная на удаленном компьютере и работающая под управлением IIS и обновляемая по http или ftp проколу

    Открытие недавно используемого Web-сайта.

    Когда VWD 2005 EE запускается, то отображается начальная страница, на которой имеется поле Recent Projects. Это поле содержит список Web-сайтов, которые недавно редактировались. Чтобы открыть один из этих сайтов снова, просто нажмите на его название в списке.

    Тот же самый список сайтов появляется в меню File. Чтобы открыть сайт этим способом, выберите пункт Recent Projects из меню File, а затем нажмите на нужный сайт.

    По умолчанию, VWD 2005 EE помнит последние 10 сайтов, которые открывались. Если это число нужно увеличить или уменьшить, то нужно изменить соответствующий параметр через панель Options (см. рис.3.2) .

  • Выбрать пункт Open Web Site из меню File.
  • Когда диалоговое окно Open Web Site, откроется, выберете значок в левой части окна, который соответствует местоположению вашего сайта
  • В зависимости от местоположения сайта дальнейшие действия выполняйте по одному из четырех вариантов
    •

    Во-первых, если нужно открыть Web-сайт расположенный в файловой системе, то щелкните на значок File System в диалоговом окне Open Web Site, (рис.3.10)

    (рис 3.10) Окно Open Web Site, вкладка File System
  • Выберите папку, которая содержит корень вашего web-сайта.
  • Щелкните на кнопке Open.

    Будьте внимательны при выполнении команды! Не открывайте папку, которая не является корнем Web-сайта. Такая ошибка часто случается если:

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

    При выполнении команды Open Web Site, VWD 2005 EE предполагает, что открываемая папка является корнем Web-сайта и будет содержать файлы конфигурации и специальные подпапки. Если вы ошиблись, то сайт работать не будет.

    (рис 3.11) Окно Open Web Site, вкладка Local IISОбратите внимание, что на рис.3.11, некоторые значки папок, изображаются с иконкой земного шара. Если папка имеет такой значок, то это - корневая папка приложения IIS которую можно открыть в VWD 2005 EE.

    Во-вторых, если нужно открыть локальный Web-сайт

    Щелкнете иконку Local IIS в диалоговом окне Open Web Site, и появится форма показанная на рис.3.11. Затем выполните следующие действия:

  • Определите местонахождение папки, которая содержит корень вашего Web-сайта. Чтобы сделать это, откройте или закройте любые узлы по мере необходимости.
  • Выберите папку и щелкните кнопкой Open.
    •

    В-третьих, если нужно открыть Web-сайт доступный по FTP

    Работая с Web-сайтом через FTP будете уверены в том, что папка куда вы помещаете файлы соответствует корневой папке приложения IIS на Web-сервере.

    Щелкнете на иконку FTP Site в диалоговом окне Open Web Site, появится форма, показанная на рис.3.9. Затем выполните следующие действия:

  • Заполните области Server, Port, Directory, Username и Password также как это делалось при создании сайта.
  • Щелкните на кнопку Open.
    •

    В-четвертых, если нужно открыть удаленный Web-сайт.

    (рис 3.12) Открытие удаленного Web-сайта

    Щелкните на иконку Remote Site в диалоговом окне Open Web Site (см. рис.3.12). Затем выполните следующие действия:

  • Напечатайте полный URL Web-сайта в поле Web Site Location.
  • Щелкните на кнопку Open.
    •

    Тема 3. Редактирование документов сайта

    При создании Web-сайта VWD 2005 EE генерирует несколько документов, назначение основных из них описано в табл.3.1.

    Файлы Web-сайта
    Имя Содержимое
    StyleSheet.css Определение стилей оформления элементов управления, Web-форм и т.д., генерируемых для проекта
    web.config Параметры Web-cepвepa при обслуживании этого проекта; определяют способ сообщения об ошибках, используемый тип аутентификации пользователей и т. п. В проекте может быть только один такой файл, он размещается в корневом каталоге проекта
    Default.aspx Описание визуального представления Web-формы. Здесь приведено имя файла создаваемого по умолчанию
    Default.aspx.cs Код, обрабатывающий события Web-формы. Расширение .cs указывает что в нем содержится код написанный на С#
    Web.sitemap Карта сайта. Позволяет использовать описанные в ней страницы для навигации по сайту.
    MasterPage.master Шаблон для отображения других страниц

    Web-формы и HTML-документы можно редактировать в графическом режиме с использованием технологии drag-and-drop, либо в текстовом виде. Для переключения между режимами достаточно щелкнуть ярлычки Design и Source , расположенные внизу окна документа (рис.3.13).

    (рис 3.13) Web-документ в режиме конструирования Design

    Некоторые задачи невозможно решить в графическом режиме, поэтому приходится редактировать Web-документы в текстовом виде. Если вы знаете HTML, то этот способ может оказаться даже удобнее использования графических инструментов. Поддерживаемая VWD 2005 EE технология IntelliSense помогает завершать элементы HTML, как показано на рис.3.14

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

    С каждой страницей Web Forms связан файл, содержащий код этой страницы, Эти файлы автоматически генерируются при создании новой Web-формы. Имя файла с кодом составляется из имени Web-формы и расширения .cs (.vb). ()

    В каждом файле кода VWD 2005 EE генерирует определение класса, инициализирующие процедуры и обработчик события Page_Load. Чтобы скрыть сгенерированный код, следует щелкнуть знак "минус" (рис.3.14)

    (рис 3.14) Технология IntelliSense в действии при редактировании HTML-текста

    При этом область сворачивается, а знак "минус" меняется на "плюс" (+), щелкнув который, вы снова раскроете эту область. Аналогичным образом сворачивают и раскрывают и другие блоки кода, например определения классов и процедуры. Инструмент VWD 2005 EE под названием Code Editor также поддерживает функцию autocomplete, автоматически завершающую ключевые слова и члены классов при помощи технологии IntelliSense (рис.3.15). Если вы пишете на Visual Basic, то после завершения ввода каждой строки функция autocomplete будет делать первые буквы ключевых слов и имен членов заглавными. Однако в программе, написанной на Visual С#, Visual Studio .NET не распознает ключевое слово или имя члена, если при его вводе использован неверный регистр. Дело в том, что Visual C#, в отличие от Visual Basic .NET. чувствителен к регистру символов.

    (рис 3.15) Файл кода Web-формы (на Visual C#). Функция autocomplete

    Большинство автоматизирующих возможностей Code Editor можно включать и отключать, изменяя параметры в диалоговом окне Options (рис.3.2). Кроме того, в нем предусмотрена корректировка автоматических абзацных отступов, завершения блоков кода и других параметров, определяющих работу с языком.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^