This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Разработка интерактивных сайтов с помощью Microsoft Visual Web Developer Учебный курс Бельчусов Анатолий Александрович
2007
Москва
Модуль 4. Дизайн страниц..............................................................................1 Тема 1. Создание и использование мастер страниц................................1
Оглавление Предисловие ................................................................................................... 1 Модуль 1. Планирование сайта..................................................................... 1 Тема 1. Этапы создания сайта ................................................................ 1 Тема 2. Эскизы страниц ............................................................................ 1 Тема 3. Ошибки в web-дизайне.................................................................. 1 Лабораторная №01.................................................................................... 1 Модуль 2. Начало работы с Microsoft Visual Web Developer....................... 1 Тема1. Элементы интерфейса Visual Studio.Net ................................... 1 Тема 2. Создание нового и открытие уже существующего сайта........... 1 Тема 3. Редактирование документов сайта.............................................. 1 Лабораторная №02.................................................................................... 1 Модуль 3. Создание и редактирование страниц ......................................... 1 Тема 1. Элементы управления и их свойства .......................................... 1 Лабораторная №03.................................................................................... 1 Тема 2.Работа с кодом C Sharp. ................................................................ 1 Лабораторная №04.................................................................................... 1 Тема 3. Запуск и отладка проекта ............................................................. 1 Лабораторная №05.................................................................................... 1
Лабораторная №06 ....................................................................................1 Тема 2. Использование CSS.......................................................................1 Тема 3. Использование тем.......................................................................1 Лабораторная №07 ....................................................................................1 Тема 4. Создание карты сайта.................................................................1 Лабораторная №08 ....................................................................................1 Модуль 5. Работа с базами данных...............................................................1 Тема 1. Создание базы данных и подключения .......................................1 Лабораторная №09 ....................................................................................1 Тема 2. Отображение информации из базы данных...............................1 Тема 3. Управление базой данных ............................................................1 Лабораторная №10 ....................................................................................1
Предисловие Прежде чем приниматься за какое-либо дело нужно хорошо подумать, а для чего и для кого я это делаю? А ответив на эти вопросы тщательно подготовиться к выполнению задуманного, чтобы не испытывать трудностей и задержек в процессе работы. Так же и в создании сайтов. Программных продуктов ориентированных на их создание имеется много: больше всего известны Microsoft SharePoint Designer (Microsoft Front Page) и Macromedia Dreamweaver. Однако сегодня все больше фирм и частных лиц хотят иметь не просто сайт, а разместить в сети некий сервис, который мог бы осуществлять интерактивное взаимодействие с посетителем сайта. Часто, этот сервис является развитием программного продукта, которым занимается фирма. Например, это может быть переводчик с одного языка на другой. То есть windows приложение уже имеется, а хотелось бы получить аналогичное web приложение. Тут обычные web редакторы не помогут! Нужна среда разработки, одновременно поддерживающая и стандартный web интерфейс, и позволяющая работать на современном языке программирования. Microsoft Visual Web Developer претендует на то чтобы занять эту нишу.
Модуль 1. Планирование сайта Планирование сайта это сложный организаций процесс, от него зависит и скорость разработки, и качество готового продукта и самое главное - стоимость сайта. Поэтому нужно тщательно продумывать каждый этап, обсуждать его с коллегами и приглашенными экспертами. Ведь над сайтом, как правило, работает целая группа, состоящая из следующих специалистов: ■ разработчик контента; ■ web-маркетолог; ■ web-дизайнер; ■ web-мастер; ■ web-программист; ■ web-администратор.
При разработке сайта в Microsoft Visual Web Developer вы сможете выполнить работу за последних трех специалистов самостоятельно. Однако, при планировании сайта все же лучше привлечь к этой работе всю команду. В итоге, после завершения всех этапов вы должны получить следующие документы: ■ общая концепция сайта; ■ график работы над проектом; ■ эскизы основной страницы и страниц более низкого уровня; ■ критерии, по которым будет оцениваться готовый проект.
Тема 1. Этапы создания сайта Избегайте
пространных
и
двусмысленных формулировок. Будьте
объективны
используйте
и
разностороннюю
входную информацию. Все это поможет
вам
сгенерировать
опорную идею своего сайта и подойти
вплотную
определению его названия
Если вы хотите предугадать, какие эмоции вызовет название у потенциальных посетителей, то можете воспользоваться программой ВААЛ-мини. В ней реализованы алгоритмы оценки
к
Работу над сайтом лучше всего разбивать на этапы, после каждого этапа желательно письменно фиксировать полученные результаты и принятые решения, так как они будут служить отправной точкой для работы по следующему этапу. Как правило, в разработке сайтов выделяют около семи этапов. 1. Обзор имеющихся решений. Не может быть, Таблица 1. SWOT анализ web сайта чтобы до вас никто не делал чего-нибудь Сильные стороны Слабые стороны подобного, ну хотя бы Сильные и слабые стороны — это характеристики оформления и частично. Поэтому содержания сайта, а, следовательно, вам подконтрольные, вы их стоит запастись можете изменить. терпением и провести Сильные и слабые стороны могут считаться таковыми лишь в один день в поисках том случае, если так их воспринимают посетители аналогичных аналогичных сайтов проектов в сети Возможности Угрозы Интернет. Я думаю, что полдюжины Возможности и угрозы связаны с характеристиками аудитории интересных находок и неподвластны вашему непосредственному влиянию вам гарантировано. Ознакомившись с ними, вы должны произвести их SWOT анализ, т.е. анализ сильных и слабых сторон, основных идей и используемых технических приемов. После этого вам легко будет определить, чем вы станете отличаться от уже существующих проектов, а что захотите позаимствовать. Такой анализ лучше выполнять в форме, представленной в Таблица 1 2. Концепция сайта
фонетического воздействия на
■ Название сайта
человека слов и текстов
Название сайта должно отражать не только общую тематическую направленность, но и конкретные отличительные особенности вашего сайта. Оно должно быть лаконичным, запоминающимся очень хорошо, если оно будет как-то связано с интернет адресом вашего
русского языка.
ресурса и будет способствовать его запоминанию. Помните: «Как вы яхту назовете так она и поплывет». ■ Назначение и предполагаемая аудитория
Вы не можете взять человека за руку и привести на свой сайт, но вы можете разместить на сайте материалы, которые будут интересны многим людям, или выбрать свою узкую специфическую аудиторию, предпочтения которой вы хорошо знаете. Вы должны составить себе портрет потенциального посетителя вашего ресурса: какого он возраста, какое имеет образование, чем он занимается профессионально, как проводит свободное время. Стоит также подумать над тем, сколько времени он предположительно проведет на вашем сайте и что может привлечь его повторно посетить ваш сайт. В связи с этим стоит обратиться к социологии, так в ряде исследований в общих чертах представлен обобщенный портрет интернет пользователя. По данным исследования ROMIR Monitoring Рунет пока остается преимущественно "мужской территорией": в русскоязычной Сети все еще преобладают представители сильной половины человечества (56%). Мужчины ориентированы на получения новостей, и конечно, они более частые гости сайтов по программированию и компьютерным технологиям. Представительницы прекрасной половины в основном используют интернет как средство общения (через почтовые службы), также среди них более популярны сайты, посвященные образованию и Рисунок 1. Процентное посещение сайтов разной тематики интернеттуризму. Более подробная информация представлена на Рисунок 1 пользователями (по данным холдинга ROMIR Monitoring). Лучше всего возможности мировой паутины освоили молодые люди: средний возраст пользователя в 2005 году - 30 лет. Группа молодых рунетчиков - от 18 до 24 лет наиболее многочисленна (35% россиян в этом возрасте заходят в интернет). Вопреки ожиданиям, подростков в Интернете оказалось не много: 2,6% опрошенных в возрасте до 16 лет и 5,6% - в возрасте 16-17 лет (по данным исследования "Онлайн Монитор", агентство МАСМИ).
Прежде чем решить, какую структуру и систему навигации должен иметь сайт, вам необходимо не только детально разобраться, что будет на нем после создания, но и рассмотреть все возможные сценарии его развития на несколько лет вперед.
Для молодой аудитории Рунета Сеть - это в основном средство развлечения. Наиболее популярны у молодежи сайты, посвященные компьютерам и программированию, музыке, а также сайты о кино и видео. Пользователи средней и старшей возрастной групп чаще, чем более молодые интернетчики, посещают новостные сайты, сайты интернет-магазинов, а также сайты, посвященные бизнесу и финансам. Уровень дохода россиян, периодически заглядывающих в Сеть, в основном средний. Хотя, конечно, самый высокий процент (29%) пользователей интернета оказался в группе респондентов с высоким уровнем дохода. Соотношение социальных групп в Рунете выглядит следующим образом: преобладает высокообразованная аудитория - 46,9% пользователей имеют высшее образование и 25,8% - незаконченное высшее. Люди, назвавшиеся рабочими, редко используют широкие возможности всемирной паутины - всего 4,8% из опрошенных. Немало в Рунете также студентов (21%). Наиболее активно в интернете работают руководители высшего и среднего звена, а также предприниматели. Интернет-пользователи из этих социальных групп заходят в сеть, как правило, каждый день. ■ Информационное наполнение сайта
Кроме этого также надо подумать над обновлением информации: какие именно из страниц сайта должны обновляться, как часто это должно происходить, кто это будет делать, будут ли в этом процессе участвовать пользователи сайта?
Составление контента, или содержания, сайта, является одним из важнейших этапов разработки. Если на сайте нет полезной информации, способной заинтересовать определенный круг людей, можно ставить вопрос о необходимости существования сайта как такового. Надо учитывать, что для Web-страничек характерен свой способ представления информации: в основной статье излагаются общие вопросы, а более подробное их освещение выносится на отдельные странички, переход к которым осуществляется по ссылкам. Если же предполагается, что текст будут распечатывать, то стоит подумать о создании специальных «страничек для печати», которые должны содержать полные тексты статей. 3. Логическая структура сайта и построение системы навигации ■ Логическая структура сайта
Логическая структура сайта показывает, каким образом информация распределяется по страницам сайта и как она может быть получена пользователем. Хорошая структурированность сайта обеспечивает половину успеха при его создании. Ошибки на этом этапе впоследствии приведут к большим затратам сил на их исправление. Подавляющее большинство крупных узлов, будь то каталог, корпоративный узел или информационный узел, имеют структуру следующего вида. На верхнем уровне организуется плоская структура документов. В нее входит домашняя страница, а также, в зависимости от
направленности узла, группа вспомогательных документов и/или индексы разделов. Очень часто все они полностью или частично взаимосвязаны друг с другом. Из этих разделов или же прямо из домашней страницы вырастают документы древовидных структур. «Листьями» этих «деревьев» могут быть отдельные документы, плоские или линейные структуры. Для представления логической структуры сайта древовидными можно воспользоваться организационными диаграммами, которые удобно составлять в программе ConceptDraw MINDMAP Professional (Рисунок 2) ■ Построение системы навигации Навигация по сайту - это тот механизм, который позволяет посетителю найти интересующую его информацию. Он опирается на логическую структуру сайта и помогает пользователю быстро по ней перемещаться. Эффективность навигации можно оценить правилом «трех кликов», которое состоит в том, что к любому документу, находящему на сайте, можно попасть с главной страницы, не более чем по трем ссылкам. перейдя Рисунок 2. Структура сайта, выполненная в программе ConceptDraw MINDMAP Professional Система навигации не должна отягощать страницу и отвлекать от ее содержимого. Если у вас большие документы, то целесообразно помещать ее внизу, что позволит посетителю по окончании чтения или просмотра перейти в следующее интересующее его место, не проматывая весь документ обратно в начало. Элементы локальной навигации лучше всего визуально отделять от элементов глобальной, но так, чтобы они, в тоже время, выглядели как единое целое. Всегда оставляйте для посетителя возможность перехода на главную страничку публикации, поскольку многие люди будут попадать на страницы вашего сайта через поисковые системы, а не сразу заходить на первую страницу. На этот случай дублируйте навигационную систему на всех страничках или сделайте так, чтобы они имели переход на
основную страницу. Если вы выполняете навигационную панель графическими средствами, обязательно сделайте текстовую копию и поместите ее где-нибудь снизу (текст в любом случае загружается быстрее графики). 4. Разработка визуальной составляющей сайта. Для Web-сайта, как, впрочем, и для других дизайнерских проектов, очень важен стиль, придающий сайту собственное лицо и узнаваемость. Можно выделить следующие элементы, участвующие в создании стиля:
Кроме того, для полноценной работы необходима раскрутка Web-сайта, которая включает в себя не только его регистрацию во всех возможных поисковых системах, но и размещение информации в СМИ, а также упоминание о вашем сайте на визитках, рекламках, в газетных и журнальных статьях и т. д.
■ шрифт - в пределах публикации он должен иметь одинаковые характеристики (начертание, высоту, цвет); ■ абзац - желательно, чтобы преобладал какой-нибудь один из видов выравнивания текста на страничке; ■ цветовая схема Web-сайта - выбор тех трех цветов страницы, которые будут использоваться для представления обычного текста, ссылок и посещенных ссылок. Цветовая схема должна повторяться на всех страничках публикации, это создаст у посетителя ощущение связности сайта. Цвета ссылок выбирают таким образом, чтобы они были заметны и в то же время не мешали читать основной текст; ■ графическое оформление сайта - должно укладываться в общую цветовую схему.
Результатом этого этапа должен быть окончательный эскиз Web-странички. 5. Написание кода. Работа включает в себя написание кода для обработки тех или иных действий пользователя, более подробно рассматривается в остальных модулях. 6. Публикация и тестирование Публикация заключается в размещении сайта на сервере организации, предоставляющей такие услуги. Перед публикацией вы должны определиться, стоит ли иметь свой платный домен второго уровня в сети или воспользоваться бесплатным местом на другом домене (третьего или даже четвертого уровня); во втором случае вы должны убедиться, что вы получите доступ к Internet Information Service с поддержкой ASP.NET 2.0. На этом этапе проверяется удобство навигации, целостность данных, корректность ссылок и орфография.
Тема 2. Эскизы страниц Профессиональный сайт отличается от любительского прежде всего тем, что все страницы сайта выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы. Шаблоны удобны тем, что большинство страниц верстают по подобию одной страницы почти автоматически. Структура шаблона состоит из элементов, которые должны присутствовать на всех страницах сайта. Например, меню навигации, название темы, поле ввода информации, форма поиска, контактная информация. (см. Рисунок 3). Меню навигации удобнее расположить в верхней или в левой части страницы. Обычно разрабатывают один или в случае, когда хотят особо выделить домашнюю страницу сайта - два шаблона. Рисунок 3. Пример структуры информации главной страницы Теперь перейдем к созданию внешнего вида Web-страниц. Начнем с главной страницы. Традиция оформления главной страницы пришла из полиграфического дизайна. В книге или журнале есть функциональная необходимость присутствия обложки. Обложка - "лицо" книги. Главную страницу сайта также можно сравнить с "лицом" интерактивной мультимедийной книги - она определяет образ всего сайта. Существует два основных вида домашних страниц: презентационная и информационная. Презентационная страница создается для не очень больших узлов, она красиво оформляется, часто почти целиком состоит из графики и имеет малое количество ссылок. Такая страница, как правило, должна помещаться на экране. Информационная страница, наоборот, создается с использованием минимума графики и содержит большое количество информации. Многие известные Web-узлы не стесняются
«раздувать» ее до 3-х и более экранов. Ее главная задача - продемонстрировать посетителю обилие информации на узле и предоставить все самое актуальное. Независимо от вида домашней страницы существует несколько основных правил ее организации: ■ самая актуальная информация по возможности должна быть видна в первом экране; ■ элементы навигации (меню) должны быть очевидны и заметны, так как посетителю, зашедшему на сайт в первый раз, незнаком ваш стиль; ■ домашняя страница должна пояснять, чему посвящен этот узел, или же как-то привлекать внимание посетителя; Рисунок 4. Пример структуры информации второстепенной страницы
Второстепенная страница-шаблон, обычно содержит следующие элементы (см. Рисунок 4): ■ меню навигации по темам;
■ логотип; ■ тематическая графика; ■ название страницы; ■ поле ввода информации; ■ e-mail Web-дизайнера.
В отношении каждой порции информации, каждой картинки и каждой детали спросите себя, как отреагирует на это ваша аудитория.
Рисунок 5. Получилась тепло-холодная гамма цветов
Пока мы разработали только структуру страниц, состоящую из отдельных элементов. Теперь важно определить основные цвета пространства Web-страниц. Лучше не использовать больше трех цветов на одной странице, так как цвета активно влияют друг на друга. Желтый цвет "звучит" по-разному рядом с синим и серым: в первом случае он становится более ярким и насыщенным, а во втором выглядит более спокойно. (Рисунок 5) Если светло-серый цвет - фон страницы, тогда основной цвет элементов дизайна и шрифтов - синий. Желтый цвет будет работать как дополнительный к синему. Важно
определить соотношение количества желтого цвета и синего - серого. Необходимо определить количество каждого цвета так, чтобы "картинки" не терялись в пространстве Web-страницы. Воспользуемся "хорошим приемом", который поможет определить соотношение синего и желтого в пространстве серого цвета. Запустите графический редактор. Выберите светло-серый фон рисунка. Поместите на серый фон сначала два одинаковых квадратика разного цвета. Вы увидите, что желтый цвет очень активен. Он будет мешать восприятию картин: Уберите желтый цвет. Обратите внимание, что желтый цвет был нужен. Возникла проблема: желтый цвет мешает, но без него плохо. В чем дело? Дело в количественных отношениях цвета. Двигайте и меняйте количество и размер цветовых фигур до тех пор, пока не определите примерное количество каждого цвета в пространстве серого: Это не эскиз дизайна сайта, а "хороший прием", который помог определить количество синего и желтого цветов в пространстве серого. Теперь мы ясно видим, что желтый цвет нужен в небольшом количестве, чтобы оживить общий серо-синий колорит пространства. Таким образом, мы нашли цветовое решение нашего сайта. Если у Вас нет художественного опыта, не расстраивайтесь, есть проверенный временем математический способ найти гармонию в композиции при помощи закона золотого сечения. Этот закон часто используют профессиональные художники и дизайнеры. По закону золотого сечения пропорциональное соотношение двух отрезков должно быть 21/34 или наоборот. Воспользуйтесь разработанной схемой структуры информации, как основой для композиции элементов страницы. Чтобы определить точные размеры элементов, используйте структуру сетки или матрицы. (Рисунок 6) Сетку необходимо Рисунок 6. Сетка "золотого сечения" построить по закону золотого сечения. Пропорциональное соотношение размеров высоты и ширины прямоугольных ячеек сетки должны быть 21/34.
Расположите элементы страницы на сетке. Найдите размеры основных элементов, используя закон золотого сечения. Все размеры элементов композиции на Рисунок 7 были найдены при помощи законов золотого сечения.
Рисунок 7. Один из вариантов эскиза композиции элементов главной страницы
Тема 3. Ошибки в webдизайне Веб-критика, как и разработка сайтов, не являются точной наукой. Интернет развивается слишком быстро: ежечасно появляются новые мощные идеи и приложения, преобразующие старые представления или опровергающие их. Относительная значимость каждого из критериев меняется в зависимости от направленности сайта. Очевидно, например, что для новостного сайта информационное наполнение имеет большее значение, чем визуальное оформление, а для сайта, посвященного искусству, ситуация обратная. Ниже приведен список критериев с типичными ошибками, снижающими оценку сайта. Содержание. Содержание - это вся информация, представленная на сайте. Информационное наполнение сайта должно привлекать внимание посетителя и отвечать теме сайта. Кроме того, его форма должна соответствовать аудитории - Веб-материалы должны быть ясны, кратки и действенны в среде Интернет. Ошибки Устаревшая информация Чем дальше, тем хуже, так как множество сайтов сходной тематики продолжают постоянно обновляться и развиваться. Сейчас же, с развитием электронной торговли особенно важно не потерять доверия посетителей, а показать им устаревшую информацию – верный способ дать понять, чего стоит ваш сайт и ваши услуги. Отсутствие архивов
Старая информация – не значит плохая. Обратите внимание, что архивы и информация о старом товаре или продукте – как раз достоинство сайта, а не недостаток, и они очень сильно отличаются от устаревшей информации. Читателям она может оказаться полезной. Даже если новая информация оказывается гораздо полезней, у старой информации тоже найдется свой потребитель. Поддержка архивных данных на сервере увеличивает расходы по поддержке сервера приблизительно на 10%, а полезность и посещаемость ресурса возрастает при этом на все 50%. Архивы помогают также избежать появления на сервере ошибки 404, дают преимущество при создании ссылок на ваш ресурс на других серверах. Заголовки, не связанные с контекстом Заголовки и прочие смысловые элементы текста для web должны быть написаны по-другому, нежели для прочих средств массовой информации. В Интернете заголовки – это часть пользовательского интерфейса и навигационный элемент сервера. Заголовки часто вырезают из контекста для составления оглавлений, кратких обозрений сервера и т.п. Кроме того, именно заголовки в первую очередь считываются роботами поисковых машин. В любом случае, писать заголовки текстов для web нужно, имея перед собой две цели: ■ дать понять пользователю, какая информация ждет его за этой ссылкой так, чтобы ему не приходилось строить догадок; ■ не дать пользователю обмануться привлекательным заголовком
(никаких обманов – это может дать сиюминутный результат и поднять трафик сервера на короткий срок, но после вы можете никогда не суметь завлечь их на свой сайт снова, так как доверие к вам будет подорвано).
Структура и навигационные функции. Структура и навигационные функции характеризуют организацию информации на сайте и возможности перемещения между его разделами. Хорошая структура и навигация - это признаки эффективности и организованности сайта. Они позволяют пользователю сформировать мысленную модель представленной информации, определить, где находятся необходимые сведения и чего можно еще ожидать. Хорошие навигационные возможности дают возможность быстро добраться до нужного места и легко охватить содержание сайта как вглубь, так и вширь. Ошибки Малопонятная навигация по сайту Встречается это не так уж часто, но если есть, становится серьезной проблемой. Люди уже привыкли к определенным канонам в дизайне и навигации: логотип, он же ссылка на начальную страницу, слева вверху; ясное указание на то, к какой части сайта относится данная страница, и наличие ссылки на главную страницу этого раздела, т.д. Если такие базовые элементы навигации отсутствуют, пользователь может просто «заблудиться». Сложные адреса (URL) Сегодня люди уделяют Интернет-адресам меньше внимания, нежели раньше. Большинство сайтов сейчас имеют хорошую навигационную поддержку, и пользователи полагаются при определении тематики сайта именно на нее, а не на адрес. Тем не менее, все
каталоги (directories) и названия страниц должны быть связаны с тематикой и понятно названы, чтобы пользователь мог рассматривать сам URL как дополнительную помощь в навигации. Исчезнувшие ( ошибка 404) страницы Скорее всего, посетители сайта не застрянут на такой странице, так как большинство уже знает, что нужно просто «отсечь» конец адреса – и попадешь на главную страницу сервера. Правда, этот способ не всегда известен неопытным пользователям и раздражает опытных. Дизайн. Дизайн - это характеристика внешнего вида сайта. Сайт не должен быть просто симпатичной домашней страничкой, хотя и не обязан быть ультрасовременным или суперстильным. Критерии оценки визуального оформления высокое качество, уместность и соответствие той аудитории и задаче, на которые ориентирован сайт. Оформление должно производить впечатление на посетителя - или даже поражать его. Ошибки Прокрутка текста и усложненная анимация Пользователи отождествляют такой дизайн с рекламой, которую они уже научились автоматически игнорировать. Очень важно делать любые элементы навигации и содержания непохожими на тот рекламный дизайн, который преобладает сейчас в Интернете. Пользователи прекрасно распознают все, что не связано напрямую с темой ресурса, и заставить их прийти на ваш сайт вторично будет уже гораздо сложнее. Нестандартные цвета ссылок Продолжает оставаться проблемой, поскольку пользователи полагаются на цвета ссылок, чтобы
понять, какие страницы сайта они уже посетили. Опять же, когда игнорируются стандартные цвета ссылок, пользователь начинает автоматически щелкать мышкой на всех подчеркнутых словах в тексте, которые далеко не всегда являются ссылками Функциональность. Этот критерий характеризует технологическую сторону сайта. Хорошая функциональность означает, что сайт быстро загружается, что все его ссылки "живые", а технологии применяются к месту и отвечают предполагаемой аудитории. Возможны решения, когда в случае необходимости сайт самостоятельно обеспечивает переход на альтернативные страницы. Хорошая функциональность - это технология, которая не бросается в глаза. Ошибки Нестандартное использование графических элементов управления В настоящий момент больше всего закон постоянства любят нарушать в использовании графических элементов управления – например, кнопок-селекторов и флажков (radio buttons и checkboxes). Например, по правилам действия кнопок-селекторов (radio-buttons), нужно выбрать одну из нескольких предложенных опций, однако никаких изменений не происходит, пока пользователь не нажмет кнопку ОК, подтверждая свой выбор. К сожалению, нередко встречаются сайты, на которых это базовое правило нарушалось – действие происходило сразу после выбора опции. Не работающие фрагменты кода Пользователь, столкнувшись с примитивной ошибкой, покинет ваш сайт немедленно. Стоит ли ему ломать
голову над тем, как это работает, если есть еще 5 миллионов других сайтов? Интерактивность. Интерактивность характеризует возможности, которые сайт предоставляет пользователю. Благодаря интерактивным элементам пользователь должен постоянно ощущать отличие Сети от журнала или телевизора. Сейчас широко распространены следующие интерактивные элементы: регистрация посетителей, проведение опросов и голосований, форумы и гостевые книги, новостная лента, FAQ, возвратная форма, каталог, интернет-магазин, кабинет клиента (закрытая зона), целевые почтовые рассылки. Ошибки Отсутствие единой регистрации в различных интерактивных элементах. Например, при регистрации на сайте пользователю выдается имя и пароль, но при работе на форуме от него требуют новой регистрации уже средствами самого форума, а не сайта. При регистрации пользователя часто просят ввести свой электронный адрес, а затем его используют при целевых почтовых рассылках (как правило, об этом честно предупреждают). Однако, если пользователь передумал, то отписаться от таких рассылок бывает крайне сложно.
Лабораторная №01 Просмотрите сайты посвященные гороскопам и заполните Таблицу 2
2 3
Таблица 2 Анализ сайтов схожей тематики № Адрес Название Сильные и Возможности п/п сайта сайта слабые и угрозы стороны 1 2 3
■ Придумайте макет страниц сайта.
■ Подумайте, какие разделы может содержать сайт «Гороскоп», перечислите их списком: 1. 2. 3.
■ Определитесь, где вы разместить сайт. Укажите адрес ресурса.
■ Создайте логическую структуру сайта и представьте ее в виде диаграммы ■ Отберите необходимый материал: изображения знаков, описания их характеристик и т.д.
Таблица 3. Перечень материалов для сайта № Название Формат В какой раздел сайта п/п материала документа предполагается поместить 1 (doc, rtf, txt, jpg, gif, html, pdf, swf, avi, mpg)
■ Подберите цветовое оформление страниц
Таблица 4. Цветовое оформление сайта № п/п Название элемента цвет 1 Фон 2 Текст 3 …
Модуль 2. Начало работы с Microsoft Visual Web Developer Изучив материал этого модуля, вы сможете: ■ использовать начальную страницу для открытия новых и существующих проектов, получения последних сведений о программных продуктах; ■ использовать различные типы окон VWD 2005 EE и освобождать на экране максимум места для редактирования документов при помощи функции Auto Hide; ■ редактировать Web-формы и HTML-страницы в графическом режиме или в виде HTML-текста; ■ автоматизировать написание кода при помощи возможностей Code Editor; ■ запускать и отлаживать web-приложения в VWD 2005 EE; ■ пользоваться встроенной справочной системой и устанавливать в ней нужные фильтры.
Тема1. Элементы интерфейса Visual Web Developer 2005 Начальная страница (Рисунок 8Ошибка! Источник ссылки не найден.) - первое, что вы видите после запуска Visual Web Developer 2005 Express Edition (VWD 2005 EE). Она содержит ряд панелей, которые облегчают поиск нужной информации, а также исполнение некоторых общих задач. Панель Recent Projects, содержит ссылки на четыре последних проекта, сохраненных в VWD 2005 EE. Любой из них можно открыть, щелкнув ссылку с именем нужного проекта. Кроме того, здесь предусмотрены средства для создания нового проекта или открытия существующего, но отсутствующего в списке последних проектов. Для этого нужно щелкнуть соответствующую кнопку на панели Recent Projects. Справа на начальной странице располагается панель Visual Web Developer News, которая содержит последние сведения о VWD 2005 EE, сопутствующих программных продуктах Microsoft, а также другие полезные материалы. Эти сведения отображаются, если вы установили подключение к сети Интернет. Рисунок 8. Начальная страница Visual Web Developer 2005 Express Edition В VWD 2005 EE два типа окон: окна документов и инструментальные окна. Первые отображают содержимое приложения: формы, Web-страницы и код. Одновременно можно открыть несколько окон документов; для переключения между ними достаточно щелкнуть ярлычки, расположенные вверху экрана. В инструментальных окнах отображаются компоненты приложений: элементы управления, соединения с базами данных, а также классы и свойства, используемые в проектах. Инструментальные окна располагаются слева и справа от окна документа. Их разрешается настроить так, чтобы можно было прятать и снова открывать их, щелкая вкладки окон. Чтобы инструментальное окно находилось на экране постоянно, выключите кнопку Auto Hide (она располагается в правом верхнем углу окна и похожа на маленькую канцелярскую
Рисунок 9. Окно Toolbox
кнопку), а если щелкнуть ее еще раз, инструментальное окно снова будет скрываться, оставляя на виду лишь ярлычок. В этом режиме неиспользуемые инструментальные окна скрываются, освобождая место для редактирования документа. Настроить внешний вид VWD 2005 EE можно с помощью параметров доступных в окне Options (Рисунок 10Ошибка! Источник ссылки не найден.), которое отображается при выборе в главном меню элемента Tools\Options. В VWD 2005 EE окно Toolbox отображает элементы управления и компоненты, которые можно перетаскивать в окно документа. Содержимое Toolbox зависит от типа редактируемого документа. Например, при редактировании Web-формы Toolbox содержит серверные элементы управления, HTML-элементы управления, элементы управления, связанные с данными, и другие компоненты, которые можно размешать на поверхности Web-форм (Рисунок 9Ошибка! Источник ссылки не найден.). Компоненты в окне Toolbox упорядочены по категориям. Щелкнув категорию, вы отобразите элементы из этой категории. Содержимое окна Toolbox можно прокручивать, щелкая стрелки, расположенные сверху и снизу списка компонентов. В VWD 2005 EE имеется объединенная справочная система, включающая сведения по среде разработки, языкам программирования и .NET Framework, а также информацию технической поддержки и статьи из MSDN. В зависимости от параметров, установленных на начальной странице в диалоговом окне Options, содержимое справочной системы отображается в окне документа либо в отдельном окне вне VWD 2005 EE. В справочной системе предусмотрены три поисковых окна: Contents, Index и Search. Они работают подобно инструментальным Рисунок 10. Настройка личных предпочтений в окне Options
Рисунок 11. Справочная система
окнам VWD 2005 EE; их можно «пристыковывать» к другим окнам, а также прятать и открывать, щелкая их ярлычки В каждом поисковом окне есть раскрывающийся список Filter, в котором выбирают нужный язык программирования или раздел для поиска. Эта возможность особенно полезна при работе с окнами Search и Index, поскольку объединенная справочная система содержит немало информации. В разделах с примерами операторов и кода на каждой странице установлен фильтр языка. Он имеет вид кнопки с изображением воронки и расположен в левом верхнем углу страницы. Щелкнув значок фильтра, вы выведете примеры к этому разделу на другом языке программирования либо заставите справочную систему показать примеры на всех языках. (Рисунок 11) VWD 2005 EE упорядочивает приложения при помощи проектов. Файл проекта имеет расширение .sln и содержит сведения о всех файлах, входящих в проект. По умолчанию он размещается в папке “Мои документы\Visual Studio 2005\ Projects”. Файлы, составляющие проект, можно просматривать в окне Solution Explorer, показанном на Рисунок 12.
Рисунок 12. Окно Solution Explorer
Тема 2. Создание нового и открытие уже существующего сайта В VWD 2005 EE Web-сайт можно создать три способами (см. Рисунок 13): ■ непосредственно в файловой системе компьютера, т.е. в любой папке на жестком диске или общедоступной сетевой папке. (File system) ■ на локальном или удаленном сервере Internet Information Server, используя http-протокол ■ на локальном или удаленном сервере Internet Information Server, используя ftp-протокол.
Рисунок 13. Создание нового сайта
Чтобы создать Web-сайт в файловой системе нужно выполнить следующие действия 1. Выберите пункт NewWeb Site из меню File. 2. Когда появится диалоговое окно New Web Site, выберите подходящий шаблон. Например, ASP.NET Web Site. 3. В области Location выберите File System из раскрывающегося списка и укажите папку, где будет размещаться сайт. 4. В области Language выберите язык программирования. Например, C#. 5. Нажмите OK. VWD 2005 EE создаст сайт, откроет в редакторе кода страницу Default.aspx, и отобразит папку Solution Exeplorer. Чтобы создать локальный Web-сайт на Internet Information Server (IIS) нужно сначала выполнить эти требования: ■ Зарегистрироваться на компьютере с привилегиями администратора. Только администратор может изменить необходимые параметры настройки IIS.
Если путь, который Вы определили для размещения сайта, уже содержит файлы, то VWD 2005 EE, предупредит об этом и попросит вас его изменить. Если вы продолжите создавать новый Web-сайт, не изменив путь, то существующие файлы будут заменены
■ Установить и запустить на компьютере IIS. ■ Установить на компьютере ASP.NET 2.0 и сделать его доступным в IIS.
Файлы локального Web-сайта IIS могут быть расположены физически в разных местах. Например: ■ Вы можете создать новый сайт в корне IIS (типично C:\lnetPub\wwwroot) и пометить его как приложение IIS. ■ Вы можете создать новый сайт в любой папке, а затем пометить ее как виртуальный каталог IIS и приложение IIS. ■ Вы можете создать Web-сайт, который указывает на существующее приложение IIS, и затем редактировать файлы этого приложения
файлами шаблона выбранного вами сайта
Для создания локального Web-сайта IIS проделайте следующие шаги 1. Выберите пункт New Web Site из меню File 2. Когда диалоговое окно New Web Site появится, выберите любой шаблон, перечисленный в поле Templates 3. Выберите HTTP в раскрывающемся списке Location. 4. Если Вы хотите вручную задать URL нового сайта, то продолжите следующим образом: ■ Напечатайте новый URL в текстовое поле Location. Например, можно напечатать http://localhost/horoscope. ■ Переходите к шагу 9.
Иначе, сделайте так: ■ Щелкните на кнопку Browse. Появится диалоговое окно (см.Рисунок 14). ■ Щелкните значок Local IIS, чтобы отобразить список локальных Web-серверов
Рисунок 14. Выбор местоположения сайта
5. Если Вы хотите, чтобы новый Web-сайт использовал файлы от существующего приложения IIS, выберите папку, где это приложение находится, щелкните кнопкой Open, и затем переходите к шагу 9. 6. В окне Select The Web Site you want to Open выберите Web-сервер и затем, в случае необходимости, родительскую папку сайта, который Вы хотите создать.
7. Если Вы хотите, чтобы файлы нового Web-сайта находились в пределах директории Web-сервера, то выполните следующие действия:
■ щелкните кнопкой Create New Web Application. Она первая из трех кнопок, которые находятся в верхнем правом углу диалогового окна; ■ новая папка WebSite появится в окне Select The Web Site you want to Open. Переименуйте эту папку так, как вам нужно.
Если Вы хотите, чтобы файлы нового Web-сайта находились в другом месте, то выполните следующие действия: ■ Щелкните кнопкой Create New Virtual Directory. Это средняя кнопка, из тех, что находятся в верхнем правом углу диалогового окна. Щелчок отобразит диалоговое Рисунок 15. Новая виртуальная директория окно New Virtual Directory, которое показано на Рисунок 15. ■ В поле Alias Name, напечатайте путь URL, где должен находиться новый сайт. ■ В поле Folder, напечатайте или выберите физическое местоположение файлов Web-сайта. ■ Нажмите OK, чтобы создать виртуальный каталог.
8. Щелкните кнопкой Open, чтобы создать сайт в IIS. 9. Выберите язык программирования по умолчанию для Web-сайта. 10. Нажимите OK, чтобы создать сайт и открыть его в VWD 2005 EE. Удаленный Web-сайт использует IIS, установленный на другом компьютере, к которому Вы можете подключиться по сети. Файлы вашего Web-сайта будут постоянно находиться на удаленном компьютере, и VWD 2005 EE будет взаимодействовать с Web-сайтом через Серверные расширения FrontPage. Создание удаленного Web-сайта IIS требует следующих условий: ■ ASP.NET 2.0 должен быть установлен на удаленном компьютере и доступен в IIS ■ IIS должен быть установлен и запущен на удаленном компьютере. ■ Серверные расширения FrontPage должны быть установлены и доступны на удаленном компьютере. ■ Вы должны иметь право на администрирование серверных расширений FrontPage и право на создание новых папок и файлов на удаленном компьютере.
Для создания удаленного Web-сайта IIS нужно выполнить следующие действия 1. Выбрать пункт New Web Site из меню File.
2. Когда диалоговое окно New Web Site появится, выбрать нужный шаблон, из поля Templates. 3. В области Location из раскрывающегося списка выбрать HTTP. 4. Затем можно выбрать один из вариантов.
■ Напечатать URL нового сайта в поле Location. Например, напечатать http://www.example.com/horoscope ; ■ Щелкнуть кнопкой Browse, выбрать Remote Site, затем напечатать нужный URL в поле Web Site Location ■ Щелкнуть кнопкой Browse, выбрать Remote Site, щелкнуть кнопкой New Web Site, и затем печатать нужный URL в поле Web URL.
5. Выбрать язык программирования по умолчанию для Web-сайта. 6. Нажать OK, чтобы создать сайт и открыть его в VWD 2005 EE. Для некоторых Web-серверов, единственный способ обновить файлы заключается в использовании протокола передачи файлов (FTP). VWD 2005 EE поддерживает и эту среду. Чтобы использовать этот подход, сайт, который Вы хотите открыть, должен быть доступным на FTP-сервере, и Вы должны получить следующую информацию от администратора FTPсервера. ■ Название FTP-сервера, где Вы хотите создать Web-сайт. ■ Название папки FTP-сервера, где Вы имеете разрешение создавать свои папки и файлы. ■ Имя пользователя и пароль для доступа к FTP-серверу. ■ Номер порта, который используется FTP-сервером. Обычно это 21 порт.
Создание Web-сайта доступного по FTP протоколу 1. Выбрать New Web Site из меню File. 2. Когда диалоговое окно New Web Site появится, выбрать нужный шаблон, из поля Templates. 3. В области Location из раскрывающегося списка выбрать FTP.
4. Укажите путь к FTP сайту, например, ftp://ftp.example.com/horoscope. Путь можно указать, щелкнув кнопкой Browse, выбрав значок Site FTP и заполнив следующие области в появившейся форме см. Рисунок 16. ■ Server: введите название сервера, например ftp://ftp.example.com. ■ Port: если FTP-сервер работает на порту отличным от 21, изменение это значение. ■ Directory: укажите название папки FTP, где Вы хотите разместить файлы Webсайта. ■ Passive Mode: поставьте здесь галочку, если имеются проблемы с подключением по протоколу FTP из-за системы сетевой защиты ■ Anonymous Login поставьте здесь галочку, если FTP-сервер разрешает анонимный доступ. Очистите это поле, если Вы имеете для доступа имя пользователя и пароль, кторые нужно указать в полях Username и Password
Рисунок 16. Подключение к ftp серверу
Желательно иметь две копии Web-сайта,
который
поддерживаете. копия,
"Рабочая"
расположена
локальном
вы на
компьютере
отлаживается под управлением
ASP.NET Development Server и
"оперативная"
версия,
расположенная на удаленном компьютере и работающая под управлением IIS и обновляемая по http или ftp проколу
Затем щелкните кнопкой Open. 5. Выберите язык программирования по умолчанию для Web-сайта. 6. Нажмите OK, чтобы создать сайт и открыть его в VWD 2005 EE. VWD 2005 EE соединяется с FTP-сервером и копирует на него файлы шаблона Web-сайта. Не забывайте, что для Web-сайтов, созданных таким образом, вы или администратор удаленного сервера должны запустить оснастку IIS и отметить новый Web-сайт как приложение IIS. Открытие недавно используемого Web-сайта. Когда VWD 2005 EE запускается, то отображается начальная страница, на которой имеется поле Recent Projects. Это поле содержит список Web-сайтов, которые недавно редактировались. Чтобы открыть один из этих сайтов снова, просто нажмите на его название в списке. Тот же самый список сайтов появляется в меню File. Чтобы открыть сайт этим способом, выберите пункт Recent Projects из меню File, а затем нажмите на нужный сайт. По умолчанию, VWD 2005 EE помнит последние 10 сайтов, которые открывались. Если это число нужно увеличить или уменьшить, то нужно изменить соответствующий параметр через панель Options (см. Рисунок 10) . 1. Выбрать пункт Open Web Site из меню File.
2. Когда диалоговое окно Open Web Site, откроется, выберете значок в левой части окна, который соответствует местоположению вашего сайта 3. В зависимости от местоположения сайта дальнейшие действия выполняйте по одному из четырех вариантов
Во-первых, если нужно открыть Web-сайт расположенный в файловой системе, то щелкните на значок File System в диалоговом окне Open Web Site, (Рисунок 17) 1. Выберите папку, которая содержит корень вашего web-сайта. 2. Щелкните на кнопке Open. Будьте внимательны при выполнении команды! Не открывайте папку, которая не является корнем Web-сайта. Такая ошибка часто случается если: Рисунок 17. Окно Open Web Site, вкладка File System
■ Сайт содержит много вложенных папок, и вы случайно выбрали одну из них. ■ Сайт находится в глубине файловой системы, и вы выбрали папку соседнюю с папкой сайта.
При выполнении команды Open Web Site, VWD 2005 EE предполагает, что открываемая папка является корнем Web-сайта и будет содержать файлы конфигурации и специальные подпапки. Если вы ошиблись, то сайт работать не будет.
Рисунок 18. Окно Open Web Site, вкладка Local IIS
Во-вторых, если нужно открыть локальный Web-сайт Щелкнете иконку Local IIS в диалоговом окне Open Web Site, и появится форма показанная на Рисунок 18. Затем выполните следующие действия: 1. Определите местонахождение папки, которая содержит корень вашего Webсайта. Чтобы сделать это, откройте или закройте любые узлы по мере необходимости.
Обратите
внимание,
что
на
Рисунок 18, некоторые значки папок, изображаются с иконкой земного шара. Если папка имеет такой значок, то это - корневая папка приложения IIS которую можно открыть в VWD 2005 EE.
2. Выберите папку и щелкните кнопкой Open. В-третьих, если нужно открыть Web-сайт доступный по FTP Щелкнете на иконку FTP Site в диалоговом окне Open Web Site, появится Работая с Web-сайтом через форма, показанная на Рисунок 16. Затем FTP будете уверены в том, что выполните следующие действия: папка куда вы помещаете 1. Заполните области Server, Port, файлы соответствует корневой Directory, Username и Password также как папке приложения IIS на Webэто делалось при создании сайта. сервере. 2. Щелкните на кнопку Open.
Рисунок 19. Открытие удаленного Web-сайта
В-четвертых, если нужно открыть удаленный Web-сайт. Щелкните на иконку Remote Site в диалоговом окне Open Web Site (см. Рисунок 19). Затем выполните следующие действия: 1. Напечатайте полный URL Web-сайта в поле Web Site Location. 2. Щелкните на кнопку Open.
Тема 3. Редактирование документов сайта
Таблица 5. Файлы Web-сайта
При создании Web-сайта VWD 2005 EE генерирует несколько документов, назначение основных из них описано в Таблица 5. Файлы Web-сайта Web-формы и HTML-документы можно редактировать в графическом режиме с использованием технологии drag-and-drop, либо в текстовом виде. Для переключения между режимами достаточно щелкнуть ярлычки Design и Source , расположенные внизу окна документа (Рисунок 20). Некоторые задачи невозможно решить в графическом режиме, поэтому приходится редактировать Web-документы в текстовом
Имя StyleSheet.css
Содержимое Определение стилей оформления элементов управления, Webформ и т.д., генерируемых для проекта web.config Параметры Web-cepвepa при обслуживании этого проекта; определяют способ сообщения об ошибках, используемый тип аутентификации пользователей и т. п. В проекте может быть только один такой файл, он размещается в корневом каталоге проекта Default.aspx Описание визуального представления Web-формы. Здесь приведено имя файла создаваемого по умолчанию Default.aspx.cs Код, обрабатывающий события Web-формы. Расширение .cs указывает что в нем содержится код написанный на С# Web.sitemap Карта сайта. Позволяет использовать описанные в ней страницы для навигации по сайту. MasterPage.master Шаблон для отображения других страниц
виде. Если вы знаете HTML, то этот способ может оказаться даже удобнее использования Рисунок 20. . Web-документ в режиме графических инструментов. Поддерживаемая конструирования Design VWD 2005 EE технология IntelliSense помогает завершать элементы HTML, как показано на Рисунок 21
Для просмотра результатов изменений, внесенных в режиме HTML, стоит переключиться обратно в режим Design; для этого достаточно щелкнуть ярлычок Design, расположенный внизу окна документа. С каждой страницей Web Forms связан файл, содержащий код этой страницы, Эти файлы автоматически генерируются при создании новой Web-формы. Имя файла с кодом составляется из имени Web-формы и расширения .cs (.vb). () В каждом файле кода VWD 2005 EE генерирует определение класса, инициализирующие процедуры и обработчик события Page_Load. Чтобы скрыть сгенерированный код, следует щелкнуть знак «минус» (Рисунок 21) При этом область сворачивается, а знак «минус» меняется на «плюс» (+), щелкнув который, вы снова раскроете эту область. Аналогичным образом сворачивают и раскрывают и другие блоки кода, например определения классов и процедуры. Инструмент VWD 2005 EE под названием Code Editor также поддерживает функцию autocomplete, автоматически завершающую ключевые слова и члены классов при помощи технологии IntelliSense (Рисунок 22). Если вы пишете на Visual Basic, то после завершения ввода каждой строки функция autocomplete будет делать первые буквы ключевых слов и имен членов заглавными. Однако в программе, написанной на Visual С#, Visual Studio .NET не распознает ключевое слово или имя члена, если при его вводе использован неверный регистр. Дело в том, что Visual C#, в отличие от Visual Basic .NET. чувствителен к регистру символов. Большинство автоматизирующих возможностей Code Editor можно включать и Рисунок 21. Технология IntelliSense в действии отключать, изменяя параметры в диалоговом окне Options (Рисунок 10). Кроме при редактировании HTML-текста того, в нем предусмотрена корректировка автоматических абзацных отступов, завершения блоков кода и других параметров, определяющих работу с языком.
Рисунок 22. Файл кода Web-формы (на Visual C#). Функция autocomplete
Лабораторная №02 Создайте сайт в файловой системе своего компьютера, выбрав шаблон Asp.net Web Site. После того VWD 2005 EE создаст сайт посмотрите, какие файлы появились в окне Solution Explorer, запишите их названия и расширения в таблицу. Затем запустите проект на выполнение. Какой запрос выдает VWD 2005 EE, что происходит после вашего ответа, какой новый файл появляется в окне Solution Explorer. Имя и расширение появившегося файла также запишете в таблицу. № п/п
Имя файла
Расширение
Доступные режимы редактирования
Поочередно откройте каждый из файлов, отображающихся в окне Solution Explorer в редакторе. Какие из них можно просмотреть в режиме Design, а какие в режиме Source. Дополните описание файлов в таблице указав возможные режимы редактирования для каждого файла Закройте окна Solution Explorer, Properties и ToolBox, Восстановите эти окна, воспользовавшись пунктов меню View. Переведите те же окна в режим Auto Hide Запишите полный путь к файлу, описывающему ваш проект (должен быть в директории мои документы) ___________________________________________________
Создайте сайт на локальном IIS, выбрав шаблон Asp.net Web Site.
Запишите полный путь к директории, где создалась корневая папка вашего сайта (должна быть в директории с:\Inetpub\) Затем запустите проект на выполнение Запишите, какие отличия вы заметили когда запускали проект, созданный в файловой системе и на IIS сервере __________________________________________________ Закройте VWD 2005 EE. Переместите папку содержащую ваш сайт в другое место (например, на flashдиск) запустите VWD 2005 EE и откройте сайт Запустите справку VWD 2005 EE Если у вас имеется подключение к прочитайте последние новости о VWD 2005 EE Проект, пустой,
который поэтому
Интернет
вы
создали
и
пустая
страничка, без сообщений об ошибках, появляющаяся в окне Internet Explorer, как раз говорит о том, что вы все сделали правильно.
Модуль 3. Создание и редактирование страниц С Web-формами применяются как HTML-элементы управления, так и серверные элементы управления. В чем разница между ними? В сущности, серверные элементы управления — это надмножество HTML-элементов управления, обладающее более широкими возможностями. Даже для создания небольших приложений требуется использование нескольких элементов управления, поэтому важно понимать, как работает каждый из них. Кроме того, для многих элементов управления можно задать различную форму, цвет, положение на странице и другие свойства. Таким образом, они становятся элементами дизайна интерфейса Web приложения. Изучив материал этого модуля, вы сможете: ■ размещать на WEB-страницах различные элементы управления, менять их свойства заданные по умолчанию. ■ Использовать методы и события, которые связаны с элементами управления. ■ Понимать программы, написанные на языке C Sharp ■ Обрабатывать значения, возвращаемые некоторыми элементами управления ■ Запускать приложения на выполнение и отлаживать их с помощью точек прерывания и пошагового выполнения. ■ Создавать собственные небольшие Web - приложения.
Тема 1. Элементы управления и их свойства Простые элементы управления
Простые элементы управления называются так потому, что большинство из них генерирует лишь несколько строк HTML кода. Некоторые из них возвращают также и клиентские сценарии, но только в особых случаях. Элементы управления TextBox
Назначение элемента управления TextBox состоит в создании на Web-форме полей ввода текста. Оператор:
создает на Web-форме поле ввода текста и назначает ему программный идентификатор «Name». Свойство Text можно использовать для декларативного добавления текста в TextBox, а также для чтения и изменения этого текста из
серверного сценария. Следующий оператор создает TextBox, первоначально содержащий строку «Анатолий»:
А вот этот серверный сценарий считывает содержимое элемента управления TextBox: string name = Name.Text;
Text —- это лишь одно из нескольких открытых свойств класса TextBox. Среди других — Rows и Columns, устанавливающие размеры TextBox, задавая число строк и столбцов, которые в нем могут отображаться; MaxLength, ограничивающее максимальное число символов, которые могут быть введены; Readonly, значение true которого запрещает изменение текста пользователем; Wrap, управляющее активизацией режима переноса строк в
многострочном TextBox; и TextMode, которое может быть равно SingleLine (по умолчанию) для создания однострочных полей, MultiLine для создания многострочных или Password для создания полей ввода пароля, которые вместо вводимых пользователем символов отображают звездочки или иной символ. Следующий оператор создает поле ввода пароля с именем «Password»:
Чтобы создать многострочное поле, установите TextMode в MultiLine, a Rows в число строк равное 10:
Атрибут Rows игнорируется, если TextMode явно не установлено в MultiLine. События TextChanged и свойство AutoPostBack
Если текст в поле TextBox изменился, то после возврата формы элемент управления генерирует событие TextChanged. Обработчик события задается атрибутом OnTextChanged тэга : protected void Name_TextChanged(object sender, EventArgs e) { // Имя изменилось, считать его из TextBox. string name = Name.Text; }
События TextChanged генерируются только при возврате формы на сервер. По умолчанию элементы управления TextBox сами не инициируют возвраты формы и, таким образом, генерируют событие TextChanged, только если возврат формы был вызван другим элементом управления.
Если же установить свойство AutoPost-Back элемента управления TextBox в true, то возвраты формы будут происходить (и событие TextChanged генерироваться) в момент изменения текста в поле ввода:
В ответ на каждый символ, вводимый пользователем, элементы управления TextBox в режиме AutoPostBack
генерируют события TextChanged только при потере фокуса ввода (т. е. в тот момент, когда пользователь переходит к
другому элементу управления формы), происшедшей после изменения текста. И это правильно, так как страница,
выполняющая возврат формы при вводе каждого символа, работала бы очень медленно
Элементы управления Label
Label — один из простейших, если не самый простой Web-элемент управления, — позволяет создавать на Webформах программно управляемые надписи. Текст элемента
управления доступен через свойство Text. Следующий оператор добавляет на Web-страницу строку «Привет»:
Часто элементы управления Label применяют, чтобы зарезервировать место для информации, выводимой серверными сценариями. Следующий оператор объявляет
пустой элемент управления идентификатором «Output»:
Label
с
программным
А этот оператор серверного сценария помещает строку «Привет» в то место Web- страницы, где расположен элемент управления Label: Output.Text = "Привет";
Используйте элемент управления Label, если нужно изменять текст на Web- странице из серверного сценария. Элементы управления HyperLink
Добавляют к Web-формам гиперссылки и бывают двух типов: текстовые гиперссылки и гиперссылки-изображения. Следующий оператор создает гиперссылку, которая представляется на Web-странице в виде текстовой строки и ссылается на www.mail.ru
Небольшое изменение превращает ее в гиперссылку-изображение:
Обычно в тэге указывается либо атрибут Text, либо атрибут ImageUrl. Если же вы все-таки укажете оба, элемент управления будет использовать текст при отображении всплывающей подсказки. Класс Hyperlink
предоставляет свойство Target, позволяющее управлять тем, как будет отображаться целевая Web-страница. Так, оператор:
открывает страницу в новом окне браузера. Другим применением атрибута Target является открытие страниц в заданных окнах или фреймах. Как и Label, элементы управления HyperLink следует использовать, только когда вы
собираетесь изменять свойства элемента управления динамически. Следующий код инициализирует целевой адрес гиперссылки во время загрузки страницы:
Одной из причин подобной инициализации элемента управления Hyperlink может быть выборка целевого URL из БД. Элементы управления Image
Добавляют к Web-формам картинки, генерируя тэги . Самые популярные свойства Image — ImageUrl (определяет URL картинки, которая будет отображаться), ImageAlign (управляет выравниванием картинки) AtternateText (задает альтернативный текст для картинки).
Альтернативный текст отображается вместо картинки в браузерах, которые работают в текстовом режиме. Следующий оператор объявляет элемент управления Image на Web-форме:
Элементы управления Image прекрасно подойдут для отображения картинок, чьи URL определяются во время выполнения, возможно, по результатам пользовательского ввода. Элементы управления CheckBox
Создают на Web-формах поля флажков. Свойство Checked определяет, установлен ли флажок (true) или сброшен (false), a Text определяет текст, отображаемый
рядом. Следующий оператор объявляет элемент управления CheckBox на Web-форме:
А этот серверный сценарий определяет состояние флажка, когда форма возвращается на сервер: if (Confirm.Checked) { // Флажок установлен. } else { // Флажок сброшен. }
В нестандартном случае, когда нужно поменять местами флажок и текст, обычно отображаемый правее, используйте атрибут TextAlign=«Left» в тэге элемента управления. При установке и сбросе флажка элементы управления CbeckBox генерируют события CbeckedCbanged. По умолчанию событие
CheckedChanged не генерируется сразу же при щелчке флажка, но откладывается до возврата формы. Чтобы реагировать на изменения состояния флажка сразу, установите в true свойство AutoPostBack для принудительного возврата формы:
// Флажок только что установлен или сброшен. // Выполнить нужные действия. }
Не устанавливайте AutoPostBack в true в отсутствие реальной необходимости немедленно обрабатывать события CheckedChanged. Одним из случаев, когда это действительно
нужно, является динамическое изменение содержимого страницы при всяком изменении состояния флажка
Элементы управления RadioButton
Создают на Web-формах кнопки-переключатели, которые отображают список взаимоисключающих вариантов. Щелчок такой кнопки включает ее, одновременно отключая остальные кнопки в группе. RadioButton является производным от CheckBox и, таким образом, поддерживает те же свойства и события. Кроме того, он имеет дополнительное
свойство GroupName для указания группы, к которой относится переключатель. В следующем примере объявляется пять элементов управления RadioButton, разделенных на две группы: из 3 и из 2 кнопок. Свойство RadioButton.Checked включает первую кнопку каждой группы:
Группирование элементов управления данного типа с помощью атрибута GroupName важно, так как сообщает браузеру о том, какие переключатели нужно отключить при включении данного переключателя, Чтобы в серверном сценарии определить, какой переключатель из группы был включен, нужно проверить Элементы управления Table
значение свойства Checked у каждой кнопки группы. Удобнее для добавления переключателей к Web-странице использовать RadioButtonList. Его свойство Selectedlndex соответствует включенной кнопке. RadioButtonList также упрощает задачу выравнивания кнопок-переключателей на странице.
Код для задания элемента управления Table Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2
Элементы управления Table полезны, когда содержимое таблицы нужно изменять динамически. Например, в следующем серверном сценарии изменяется текст во всех ячейках таблицы: MyTable.Rows[0].Cells[0].Text = "Cell 1"; MyTable.Rows[0].Cells[1].Text = "Cell 2"; MyTable.Rows[1].Cells[0].Text = "Cell 3"; MyTable.Rows[1].Cells[1].Text = "Cell 4";
А этот сценарий создает во время исполнения всю таблицу: for (int i = 0; i < 2; i++) { TableRow row = new TableRow(); for (int j = 0; j < 2; j++) { TableCell cell = new TableCell(); cell.Text = String.Format("Row {0}, Column {1}", i + 1, j + 1); row.Cells.Add(cell); } My_Table.Rows.Add(row);
}
Эти сценарии работают благодаря тому, что строки, содержащиеся в объекте Table, доступны через свойство Rows. Каждая строка набора Rows — это экземпляр класса TableRow. Внутри строки каждая ячейка представлена объектом TableCell, доступ к которому осуществляется посредством набора Cells объекта-строки. Вызов Add для набора Rows или Cells позволяет программно добавить строку к таблице или ячейку к строке.
По умолчанию рамки элементов управления Table невидимы. Изменить это можно, установив свойство GridLines в Horizontal, Vertical или Both. Другие свойства Table — CellPadding и Cellspacing — как и одноименные HTML-атрибуты, управляют промежутками внутри ячеек, a BacklmageUrl задает фоновую картинку. Таблицы часто используются Web-страницами для отображения цветного фона. Изменить цвет фона для Table позволяет его свойство BackColor, унаследованное от WebControl.
Элементы управления Panel
Служат контейнерами для других элементов управления. Одно из применений элементов управления Panel — управление видимостью группы элементов управления. Следующая Web-форма то отображает, то скрывает 4
элемента управления Label, устанавливая свойство Visible элемента управления Panel в true или false при всяком щелчке флажка. Обратите внимание на атрибут AutoPostBack=«True» в тэге
Семейство Web-элементов управления включает три типа кнопок: Button, LinkButton и ImageButton. Все три имеют
общее функциональное назначение: возврат содержащей их формы на сервер. Отличия: Button выглядит как командная
кнопка, LinkButton — как гиперссылка, a ImageButton отображает заданную картинку. Практически на любой Webформе есть одна или несколько кнопок, с помощью которых
пользователь может отправить форму на сервер. Ниже приведены примеры объявления экземпляров кнопок каждого типа:
Свойство Text задает текст, отображаемый поверх элемента управления Button или LinkButton. ImageUrl задает картинку, отображаемую элементом управления LinkButton. Все типы кнопок генерируют по щелчку два вида событий:
Click и Command. Атрибут OnClick в тэге элемента управления связывает с кнопкой обработчик Click. Обработчики Click для Button и LinkButton имеют такой прототип:
А прототип обработчиков Click для элементов ImageButton отличается: protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { // Получить координаты щелчка, int x = e.X; int у = e.Y; }
Объект ImageClickEventArgs, передаваемый обработчику Click объекта ImageButton, содержит открытые поля X и Y, указывающие положение указателя мыши в момент щелчка. Списки
Х и Y измеряются в пикселах и соответствуют расстоянию от левого верхнего угла картинки.
В семейство элементов управления со списками входят 4 члена: ListBox, DropDownList, CbeckBoxList и RadioButtonList. У них две общие характеристики: все они произведены от System.Web.UIWebControlsListControl и предназначены для отображения списков. Элементы управления ListBox и DropDownList содержат текстовые строки, которые могут быть выбраны пользователем. Оба преобразуются в HTML- теги <select>. CbeckBoxList и RadioButtonList отображают массивы флажков и переключателей и преобразуются в тэги и соответственно. Тэги
могут содержаться в HTML-таблице для выравнивания. Элементы списков представляются экземплярами класса Listltem, которые объявляются тэгами . Listltem содержит текстовые свойства Text и Value. Text — это текст элемента списка; Value — произвольная строка, связанная с этим пунктом списка. Listltem также имеет свойство Selected булевого типа указывающее, выбран ли данный пункт. Следующие операторы объявляют ListBox, содержащий 4 элемента, и выбирают второй элемент:
Небольшое изменение кода создает вместо ListBox элемент управления DropDownList:
В ListBox или DropDownList свойство Selected объекта Listltem определяет, выбран ли данный элемент (true) или нет (false). В CheckBoxList или RadioButtonList то же свойство определяет, включен ли данный элемент. После возврата
формы серверному сценарию не надо проверять каждый элемент списка, чтобы определить выбранный. Элементы управления со списками наследуют от базового класса ListControl свойства Selectedlndex и Selectedltem. Таким
образом, сценарий может определить, какая кнопкапереключатель выбрана, считывая ее индекс (индексы
начинаются с 0):
int Index = MyRadioButtonList.SelectedIndex;
Для элементов управления CheckBoxList свойства Selectedlndex и Selectedltem не столь интересны, так как может быть установлено более одного флажка из списка, но для других списков они крайне полезны. При изменении выбора, т. е. при выборе нового элемента ListBox и DropDownList или по щелчку кнопки в CheckBoxList и RadioButtonList элементы управления со списками
генерируют событие SelectedlndexChanged. По умолчанию событие не генерируется, пока какое-либо иное событие не вызовет возврат формы. Однако все списки наследуют от ListControl свойство AutoPostBack, которое можно установить в true, чтобы события SelectedlndexChanged генерировались немедленно.
Элементы управления DropDownList
Отображают элементы в выпадающем списке, напоминающем поле со списком в Windows. Классический пример применения элемента управления DropDoumList -
отображение списка семи базовых цветов. Следующий код создает такой список и отображает выбор пользователя на Web-странице:
Похожи на элементы управления DropDownList, но отображают свои элементы в статичном, а не в выпадающем списке. Вот как создается элемент управления ListBox с
перечнем семи базовых цветов, а выбор пользователя отображается на Web- странице:
По умолчанию размеры ListBox устанавливаются так, что одновременно видны только 4 пункта списка. Атрибут Rows в показанном выше тэге увеличивает высоту списка до 7 элементов.
Единственным функциональным различием между ListBox и DropDownList является поддержка множественного выбора первым из них. Атрибут SelectionMode=«Multiple» в тэге элемента управления создает ListBox с множественным выбором:
К сожалению, в классе ListBox нет открытого метода или свойства для получения индексов элементов, выбранных в
списке с множественным выбором. Чтобы определить, какие элементы были выбраны, вам придется перебрать все
элементы списка по одному, проверяя значение свойства Selected. Следующий метод принимает ссылку на ListBox как входной параметр и возвращает массив целых чисел,
содержащий индексы всех выбранных элементов, начиная с нуля;
int[] GetSelectedlndices(ListBox lb) { ArrayList a = new ArrayList(); for (int i=0; i (d*e) // отношение В C Sharp имеются следующие типы операторов: ■ составные операторы; ■ операторы выбора; ■ операторы циклов; ■ операторы перехода.
Оператор "выражение" это любое выражение, заканчивающееся точкой с запятой. Оно рассматривается как оператор, выполнение которого заключается в вычислении этого выражения. i++; a += 2; x = a+b; К составным операторам относят собственно составные операторы и блоки. В обоих случаях это последовательность операторов, заключенная в фигурные скобки. Блок отличается от составного оператора наличием определений в теле блока. { n++; summa += n; } { int n = 0; n++; summa += n; } Условный оператор имеет полную и сокращенную форму. if (выражение-условие) оператор1; // сокращенная форма if (выражение-условие) оператор1; else оператор2; // полная форма Если значение выражения-условия истинно, то выполняется оператор1, иначе выполняется оператор2
Оператор выбора позволяет сделать множественный выбор. switch (выражение) { case константа1: оператор1;break; case константа2: оператор2; break; ........... [default: операторы;] } При выполнении оператора switch, вычисляется выражение, записанное после switch, оно может быть числовым или строковым. Полученное значение последовательно сравнивается с константами, которые записаны следом за case. При первом же совпадении выполняются операторы, помеченные данной меткой, а остальные игнорируются. Если значение выражения, записанного после switch, не совпало ни с одной константой, то выполняются операторы, которые следуют за меткой default. Цикл с предусловием while (выражение-условие) оператор; Если выражение-условие истинно, то тело цикла выполняется до тех пор, пока выражениеусловие не станет ложным. while (a!=0) { a= Convert.ToInt16(Console.ReadLine()); s+=a; } Цикл с постусловием do оператор; while (выражение-условие); Тело цикла выполняется до тех пор, пока выражение-условие истинно. do { a= Convert.ToInt16(Console.ReadLine());
s+=a; } while(a!=0); Цикл с параметром for (выражение_1;выражение-условие;выражение_3) оператор; Выражение_1 – задает начальные условия для цикла (инициализация). Выражение-условие определяет условие выполнения цикла, если оно не равно 0, цикл выполняется, а затем вычисляется значение выражения_3. Выражение_3 – задает изменение параметра цикла или других переменных (коррекция). Выражение_1 и выражение_3 могут состоять из нескольких выражений, разделенных запятыми. Любое выражение может отсутствовать, но разделяющие их " ; " должны быть обязательно.
Лабораторная №04 1. Создайте
страничку с использованием элементов управления DropDownList и Label, которая предлагает пользователю выбрать из раскрывающегося списка свой пол (мужчина, женщина, оно) и выводит следующие сообщения:
■ Мужчина - Я думаю что вы - это он ■ Женщина – Я думаю что вы - это она ■ Оно - "Ой, кто вы?"
Для написания функции обработки выбранного значения в элементе DropDownList предлагается использовать операторы If или Switch Запишите ниже код получившейся у вас функции обработки выбранного значения в элементе DropDownList ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________
2. Создайте страничку с использованием элементов управления Textbox, Button и Label, которая предлагает пользователю ввести свое имя и по окончанию имени пытается угадать его пол. При выполнении работы учесть, что должны вводится полные имена, такте же: ■ Мужские имена как правило имеют окончание й, р, н ■ Женские имена как правило имеют окончание а,я
Для получения последней буквы имени используйте функции работы со строками Запишите ниже код получившейся у вас функции обработки выбранного значения в поле Textbox ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________
3. Создайте страничку с использованием элементов управления Textbox, Button и Label, которая предлагает пользователю ввести свое имя и возраст, а затем подсчитывает количество прожитых дней. При выполнении работы считать, что: ■ в году 365 дней ■ високосные года не учитывать ■ учитывать только число полных прожитых лет
Для перевода значения строковой переменной (тип string), опредялющей число лет в числовое представление (тип int) рекомендуется использловать функцию Convert.ToInt16 Запишите ниже код получившейся у вас функции обработки количества прожитых лет в поле Textbox
4. Создайте страничку с использованием элемента управления CheckBoxList и Label, которая выводит слова «Привет» или «Hello» или оба слова вместе в зависимости от того, напротив какого языка установлен флажок: ■ Установлено Russian – вывести «Привет»; ■ Установлено English – вывести «Hello»; ■ Установлено Russian и English – вывести «Hello Привет»
Для проверки установки флажка воспользуйтесь свойством CheckBoxList1.Items[j].Selected, принимающем значения trueпри установленном флажке и false в противном случае. Запишите ниже код получившейся у вас функции обработки установленных флажков элемента управления CheckBoxList. ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________
5. Создайте
страничку с использованием элементов управления DropDownList и Image, которая выводит изображение соответствующее выбранному знака зодиака: Изображения знаков зодиака можно взять с любого сайта гороскопов (например http://www.goroskop.ru/); Для проверки выбранного значения в элементе DropDownList рекомендуется использовать свойство DropDownList1.SelectedItem, а для осуществления последующих действий рекомендуется использовать оператор switch. Запишите ниже код получившейся у вас функции обработки выбранного значения в элементе DropDownList и вывода изображения. ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________
Тема 3. Запуск и отладка проекта Запустить проект в VWD 2005 EE можно одним из следующих способов; щелкнуть кнопку Start на панели инструментов, выбрать из меню Debug команду Start или нажать клавишу F5. После запуска проекта VWD 2005 EE компонует его файлы, показывая в окне Error List сообщения об ошибках, если таковые возникнут (Рисунок 23). Дважды щелкнув описание ошибки в окне Error List, вы быстро найдете строку с ошибкой, чтобы исправить ее. Если во время компоновки ошибки не обнаружены, VWD 2005 EE запускает Internet Explorer и открывает в нем начальную страницу Web-приложения. Если при исполнении приложения в режиме отладки возникает ошибка. VWD 2005 EE показывает в браузере соответствующее сообщение. (Рисунок 24). Дальше можно выполнить одно из следующих действий: если причина ошибки Рисунок 23. Сообщения об ошибках, возникших при известна, стоит остановить компоновке проекта приложение, закрыв окно браузера и вернуться в VWD 2005 EE, чтобы исправить ошибку; если причина ошибки неизвестна, следует щелкнуть кнопку Back (Назад) в браузере и переключиться в VWD 2005 EE, чтобы установить в коде точку прерывания перед предполагаемым местом возникновения ошибки. Затем, переключившись обратно в браузер, попробуйте еще раз выполнить Рисунок 24. Сообщение об ошибке, возникшей при выполнении проекта
действие, вызывавшее ошибку. Встретив точку прерывания, VWD 2005 EE остановит исполнение приложения. Далее путем пошагового исполнения вы локализуете ошибку. Установка точки прерывания позволяет остановить исполнение проекта перед некоторой строкой кода. Встретив при исполнении проекта строку с точкой прерывания, VWD 2005 EE остановит приложение перед этой строкой и откроет ее в окне Code Editor, выделив, как показано на Рисунок 25. Чтобы установить точку прерывания, щелкните мышкой по серому полю слева от строки, перед которой нужно остановить исполнение программы, либо выделите эту строку и нажмите F9. После останова приложения перед точкой прерывания стоит просмотреть значения активных переменных, наводя на них указатель мыши или воспользоваться вкладкой Local. Для отслеживания и просмотра значений переменных сложного типа, следует добавить эти переменные в окно Watch, показанное на Рисунок 26 Чтобы сделать это, выделите переменную Рисунок 25. Проект, остановленный перед точкой (объект) и перетащите ее в прерывания окно Watch. Для просмотра значений вложенных элементов (например, элементов массива или свойств объекта) щелкните знак «+» справа от сложного элемента в окне Watch. Чтобы возобновить исполнение приложения, остановленного перед точкой прерывания, щелкните кнопку Continue на панели инструментов либо нажмите F5. Можно также исполнять приложение построчно, нажимая F10 или F11. F10 заставляет при вызове процедуры исполнить ее как одну команду. Другими Рисунок 26. Окно Watch
словами, процедура исполняется без захода в нее (step over), после чего исполнение останавливается на следующей после вызова этой процедуры строке. Нажатие клавиши F11 вызывает исполнение процедуры с заходом в нее (step in), при этом исполнение останавливается на первой строке вызванной процедуры
Лабораторная №05 1. Откройте созданный в ходе выполнения лабораторной работы №4 проект «Сколько
дней ты прожил?» (задание №3). Установите точки прерывания в каждой строке. Запустите проект на выполнение. Запишите в приведенной ниже таблице запишите, какие значения принимают переменные, когда выполняется первая строка кода, вторая строка кода и т.д. Номер строки fio 1 2 3 4
god
Переменные dni
Label1
2. Откройте проект, созданный в ходе выполнения задание №5 лабораторной работы №4.
Запишите каждую строчку кода в соответствующую строку таблицы. Установите точки прерывания так, чтобы по ним проходило выполнение программы при выборе в элементе управления DropDownList знака зодиака «Телец» Точка Номер Код прерывания строки
Сколько таких точек прерывания вы установили?
Модуль 4. Дизайн страниц Когда мы говорили о дизайне, то не раз упоминали шаблоны страниц как мощное средство, помогающее быстро и качественно оформить внешний вид сайта, а также впоследствии легко изменять его. VWD-2005 EE предоставляет в распоряжение web разработчика мастерстраницы, таблицы стилей и темы. Их использование позволяет быстро создать заготовку типового сайта. Разработчики WEB-сайтов, используя мастер-страницы, таблицы стилей и темы конструируют собственные шаблоны для придания своим сайтам «фирменного» вида. Как правило, при построении шаблонов активно используются таблицы, потому, что с их помощью легко выполнить: ■ выравнивание данных путем вставки в ячейки таблицы; ■ распределение текста и графики по разным колонкам; ■ создание обрамления вокруг текста или графических изображений; расположение текста по контуру графического изображения; ■ создание цветного фона для текстового фрагмента или отдельного изображения;
Изучив данный модуль, вы сможете: ■ создавать мастер-страницы и контент-страницы; ■ создавать таблицы стилей и применять их к web страницам ■ создавать темы, добавлять в них стили и шкурки ■ применять темы к web страницам
Тема 1. Создание и использование мастер страниц Мастер-страницы, служат шаблоном для отображения, других страниц. Для этого на мастер-странице выделяются области, не подлежащие изменению, и области где будет отображаться информация связанных страниц (страниц контента) Контент-страница - любая страница, которая использует мастер страницу. Каждый раз, когда посетитель запрашивает контент-страницу, ASP.NET загружает мастер-страницу, производит слияние с контент-страницей и посылает объединенный результат пользователю. Слияние мастер-страницы и контент-страницы на лету имеет два важных последствия. ■ посетитель всегда получает текущие версии шаблона и его содержания. ■ полученная после слияния страница обладает всеми возможностями обычной ASP.NET страницы. Например, мастер-страница, как и контентстраница может содержать любые элементы управления, или фрагменты кода. Лучше всего разрабатывать мастер страницу на этапе планирования сайта.
Чтобы создать сайт, использующий мастер страницы нужно выполнить следующие действия: 1. Создайте новый сайт 2. Удалите любые Web-страницы, которые содержит сайт. Например, удалите страницу default.aspx, которая создается по умолчанию 3. В окне Solution Explorer, щелкните правой кнопкой мыши по папке сайта и выберите Add New Item из контекстного меню 4. Когда диалоговое окно Add New Item появится, выполните следующие действия
Рисунок 27. Новая мастер страница содержит только один элемент: управление ContentPlaceHolder
■ Выберите из всех элементов списка Master Page ■ Оставьте название страницы по умолчанию MasterPage.master. ■ Выберите язык программирования (по умолчанию C#). ■ Поставьте галочку напротив Place code in separate file.
5. Нажмите Add, чтобы создать мастер-страницу
Рисунок 28. Отредактированная мастер страница
Созданная мастер-страница, доступна для редактирования за исключением одного элемента управления ContentPlaceHolder, который создается на ней по умолчанию. Этот элемент резервирует пространство для содержимого контент-страницы (см. Рисунок 27). Редактирование мастер-страницы такое же, как и редактирование обычной ASP страницы. Поэтому к ней можно применить все элементы управления, рассмотренные ранее. Рисунок 28 показывает отредактированную мастер-страницу. Самый удобный способ использования мастер-страницы состоит в том, чтобы привязать ее, к новой странице во время ее создания, что может быть выполнено следующим образом. 1. Откройте сайт, который содержит мастер-страницу. 2. В окне Solution Explorer, щелкните правой кнопкой мыши по папке, где Вы хотите разместить новую контент-страницу, затем выберите Add New Item из контекстного меню. 3. Когда диалоговое окно Add New Item появится, не забудьте сделать следующее: ■ Выбрать шаблон документа: Web Form. ■ Поставить галочку напротив Select Master Page.
4. Щелкните на кнопку Add. Тогда появится диалоговое окно
Рисунок 29. Выбор мастер страницы
Master Page, тогда вы сможете выбрать мастер-страницу. Рисунок 29 5. Чтобы создать страницу, щелкните кнопкой OK. Когда Вы видите контент-страницу в режиме конструктора, части, которые добавились из мастер страницы, будут недоступны для редактирования. Чтобы изменить что-нибудь в них, вам придется открыть и отредактировать мастер-страницу (см. Рисунок 30.) Рисунок 30 показывает контент-страницу, которая использует присоединенную мастер страницу. Кроме того, контент-страница отображает некоторое собственное содержание. Чтобы создать
такую страницу выполните следующие действия: Создайте ASP страницу, в нашем примере она называется Бык.aspx. На этапе создания подключите мастер-страницу (MasterPage.master), так как это было описано выше. 1. Задайте содержание страницы внутри элемента ContentPlaceHolder. Вы можете напечатать текст или вставить его и изображения. Затем сохраните страницу. 2. Щелкните правой кнопкой мыши по странице в Solution Explorer и выберите View In Browser из контекстного меню Контент-страницы, которые используют мастер-страницы первоначально, содержат очень небольшой исходный текст. Вот типичный пример: Директива @Page определяет язык программирования для любого кода, добавленного к странице, название файла мастер-страницы, и заголовок страницы. Тэг определяет имя элемента управления ContentPlaceHolder на главной странице, и атрибут Runat="Server". Данные теги позволяют понять принцип работы мастер-страниц:
Рисунок 30. . Контент-страница с присоединенным шаблоном.
■ Мастер-страница содержит один или более элементов управления ContentPlaceHolder, каждый с собственным индивидуальным именем. ■ Когда контент-страница использует мастер-страницу, она должна содержать один или несколько тегов для каждого элемента управления ContentPlaceHolder в мастер-странице. ■ Когда посетитель запрашивает контент-страницу, ASP.NET сливает ее содержание с каждым элементом управления ContentPlaceHolder в мастер-странице, затем показывает результаты.
Заметьте, что контент-страница, которая использует мастер-страницу, не содержит никаких тегов типа , раздела , тега и тега . Все они заимствуются с мастер-страницы.
К сожалению VWD 2005 EE не имеет никакой команды или мастера, который применяет главную страницу к существующей Web-странице. Однако, это можно сделать вручную, выполнив следующую процедуру: 1. Создайте новую контент-страницу, которая использует нужную вам мастер-страницу 2. Скопируйте содержимое со старой страницы в буфер обмена 3. Вставьте содержание из буфера обмена в новую страницу. 4. Удалите старую контент-страницу, затем переименуйте новую. Если Вы обнаружили, что этот подход не принес желаемого результата, то откройте страницу в редакторе, переключитесь в режим Source и попробуйте другую процедуру: 1. Удалите все строки от тега до начала содержания, которое Вы хотите сохранить. Вы должны удалить по крайней мере тэги , , и . 2. Удалите все строки, что идут после содержания, которое нужно сохранить. То есть, по крайней мере теги , и . 3. Вставьте сохраненное содержание между тегами Рисунок 31. . В браузере, контент-страницы и мастер-страницы отображаются слитно и , удостоверьтесь, что в теге есть код ID=, ContentPlaceHolderlD=, Runat="Server", а значение ContentPlaceHolderlD в контент-странице совпадает с названием элемента управления ContentPlaceHolder в мастер-странице. 4. Убедитесь, что значение MasterPageFile соответствует названию нужной вам мастер-страницы. 5. Проверьте работоспособность полученной страницы. Мастер страницы по существу шаблоны для Web-страниц. Посетители не просматривают их непосредственно. Вместо этого они просматривают контент-страницы, прикрепленные к ним. Это делает сайт более однородным и более простым в сопровождении.
Лабораторная №06 Начиная с этой лабораторной работы, мы будем работать над проектом сайта «Зодиак», конечной целью которого будет создание сайта посвященного западному и восточному гороскопам. (Вы уже, наверное, обратили внимание что примеры и задания, так или иначе, связанные с этой темой встречались и ранее) Существует два вида гороскопов: восточный и западный. Западный гороскоп основан на 12 знаках зодиака, которые сменяют друг друга в течение года и подразделяются на четыре группы, так называемые стихии: вода, земля, огонь и воздух. Китайский гороскоп, также основан на 12 знаках зодиака, но сменяют они друг друга в течение 12 лет. Стихий в китайском гороскопе всего пять: железо, вода, дерево, огонь, земля и они также сменяют друг друга через год. Таким образом, в китайском гороскопе полный цикл осуществляется за 60 лет Вам нужно создать две мастер страницы: ■ для отображении информации западного гороскопа ■ для отображения информации восточного гороскопа
оставлено место, для последующего размещения карты сайта ■ Должна быть ссылка перехода на домашнюю страницу для тех пользователей кто пришел на сайт через поисковую систему ■ На каждой мастер-странице разместите тематический рисунок, отражающий сущность западного и восточного гороскопов. ■ На каждой мастер странице разместите фрагмент текста, описывающий характеристики западного и восточного гороскопов.
При размещении текстовых и графических элементов на мастер-странице учитывайте метод золотого сечения, изложенный выше. Чтобы определить степень соответствия вашей страницы методу золотого сечения заполните следующую таблицу: № Элемент мастер страницы
длинна ширина Золотое сечение
Теперь запишите среднее значение золотого сечения для всех элементов мастер страницы _________ если оно близко к 21/34, то вы можете отметить это событие!
Тема 2. Использование CSS Чтобы определить стиль для определенного элемента страницы, сначала выделите его в Режиме конструктора и затем выполните следующие действия: ■ Выберите пункт Style из меню Format или ■ Выберите признак Style в окне Properties, а затем щелкните на появившейся в той же строке кнопке.
После того, как Вы выполните любое из этих действий, VWD2005 EE отобразит диалоговое окно Style Builder, которое показано на Рисунок 32. Свойства CSS сгруппированы в восемь категорий, которые расположены по левому краю диалогового окна. Правая часть диалогового окна меняется в зависимости от выбранной категории. Большинство параметров CSS можно определить интуитивно. Если Вы найдете неизвестный параметр, то можете проконсультироваться со встроенной системой помощи или просмотреть официальную спецификацию CSS на сайте http://www.w3.org/Style/CSS. Применение свойств CSS к индивидуальным элементам страницы обеспечивает большую гибкость в оформлении, но не большую однородность. Чем большее количество страниц содержит сайт, тем тяжелее задача сохранения Рисунок 32. Это диалоговое окно применяет CSS шрифтов и цветов. К счастью, можно создать общедоступный файл таблицы свойства к элементам страницы или к правилам стилей, который решит эту проблему. таблицы стилей Процедура создания нового файла таблицы стилей состоит в следующем. 1. Выберите New File из меню File или щелкните правой кнопкой мыши по папке в Solution Explorer, и выберите пункт Add New Item. 2. Когда диалоговое окно Add New Item появляется, выберите шаблон Style Sheet, если желаете, измените название файла, которое дается по умолчанию, и затем щелкаете кнопкой Add. В файле таблицы стилей содержатся правила, каждое правило состоит из названия, сопровождаемого списком свойств CSS и значений. Ошибка! Источник ссылки не найден. показывает типы названий стиля Есть два способа добавить новое правило стиля к файлу таблицы стилей. Вот они: ■ Напечатать название правила, и пару изогнутых фигурных скобок ({}).
■ Выбрать пункт Add Style Rule из меню Styles, что приведет к появлению диалогового окна Add Style Rule, которое показано на Рисунок 33
Таблица 6. Типы Названий Стиля CSS Консорциум WWW Tape Selector
VWD 2005 EE
Применяется к
Element Name
Все элементы HTML соответствующего типа. Например, правило стиля, названное td применяется к тегам
.
Class Selector
Class Name
Все элементы, относящиеся к соответствующему классу. Например, правило стиля, названное error, применялось бы к любым тэгам, которые вы поместили в класс error.
ID selector
Element ID
Все элементы, имеющие соответствующее имя. Например, правило стиля по имени #test будет применяться ко всем элементам, для которых ID= "test".
Если Вы хотите использовать диалоговое окно Add Style Rule, то продолжите следующим образом: 1. Выберите тип названия стиля, которое вам нужно: Element, Class Name, или Element ID. 2. Выберите или напечатайте название 3. Если Вы создаете правило класса, то можете ограничить его применение определенным названием тэга. Например, правило стиля по имени TABLE.test применялось бы только к тэгам, закодированным как
. Чтобы использовать эту особенность:
■ Определите имя класса. ■ Выберите флажок Optional Element. ■ Выберите название тэга из раскрывающегося списка.
4. Щелкните кнопкой, на которой изображена стрелка вправо (>). Это
действие добавит новое название тэга к полю Style Rule Hierarchy. 5. Щелкните кнопкой OK, чтобы создать новое правило стиля. Если Вы добавите несколько названий стиля к полю Style Rule Hierarchy, не нажимая кнопку OK, то VWD2005 EE создаст правило, которое будет применяться, только к тем тегам, которые удовлетворяют все этим условиям Как только вы создали правило стиля можно добавить к нему свойства, по одному из трех вариантов:
Рисунок 33. Это диалоговое окно создает новые правила стиля.
■ печатая их самостоятельно или с помощью IntelliSense. ■ выбрав правило стиля и выбирав Build Style из меню Styles. ■ щелкнув правой кнопкой мыши по стилю и выбирав Build Style из контекстного меню.
Рисунок 34 показывает, как VWD2005 EE отображает файл таблицы стилей. Слева отображается окно Outline CSS, которое облегчает нахождение и выбор стилей, объявленных в файле. Чтобы использовать созданный файл стилей нужно связать его с WEB-страницей с помощью следующих действий 1. Откройте Web-страницу, которая будет использовать файл таблицы стилей 2. Затем выполните любое из этих действий:
■ Откройте страницу в режиме Design, затем захватите файл таблицы стилей из окна Solution Explorer и поместите его на вашу страницу. ■ Выберите пункт DOCUMENT в окне Properties, выберите свойство StyleSheet, щелкните на кнопку, появившуюся в строке. Отобразится диалоговое окно, в котором вы сможете выбрать файл таблицы стилей, затем нажимаете OK.
Рисунок 34. Таблица стилей
Как только файл таблицы стилей будет связан со страницей, правила, заданные в нем будут применены к странице и вступят в силу немедленно. Работая с таблицами стилей (CSS), вы можете задавать Используя таблицы стилей, вы правила, которые изменяют свойства элементов на Webпредадите сайту более страницах. VWD2005 EE позволяет сформулировать эти правила графически (используя диалоговые окна) или в однородное и профессиональное оформление текстовом режиме (используя IntelliSense).
Тема 3. Использование тем Как и таблица стилей, тема не имеет графического представления, поэтому работа с ней ведется в редакторе текста. Чтобы создать новую тему необходимо выполнить следующие действия: 1. Откройте Web сайт, для которого хотите создать тему. 2. Щелкните правой кнопкой мыши по папке сайта, выберите Add Folder из контекстного меню, а затем выберите папку Темы из выпадающего подменю. В этом случае: ■ Если сайт еще не содержит папку App_Themes, то VWD2005 EE создаст ее. ■ VWD2005 EE всегда будет создавать подпапку с названием Theme1, которую вы можете переименовать как считаете нужным.
3. Переименуйте подпапку Theme1. Название, которое получит папка, станет названием
Рисунок 35. Для сайта «Зодиак» создано четыре стиля: «Земля», «Вода», «Воздух», «Огонь»
темы Конечно, пустая папка темы не будет оказывать никакого влияния на ваш сайт. Чтобы задействовать тему, вы должны сначала добавить .skin или .css файлы. (см. Рисунок 35) В ASP.NET 2.0 skin файл определяет визуальные свойства для одного или более видов элементов управления расположенных на страницах вашего сайта. Подпапка темы может содержать как один, так и несколько skin файлов. Если вы разметили в ней несколько файлов, ASP.NET будет читать их все, как будто это один файл. Для создания skin файлов нужно выполнить следующие действия: 1. Щелкните правой кнопкой мыши по подпапке нужной темы, затем выберите Add New Item из контекстного меню. 2. Когда диалоговое окно Add New Item появляется, выберите шаблон Skin File, здесь вы также можете изменить имя файла данное по умолчанию, а затем щелкните кнопкой Add. 3. VWD2005 EE отобразит новый skin файл в редакторе кода. 4. Создайте тэг для каждого элемента управления, к которому вы хотите применить тему, ниже приведены примеры:
Рисунок 36. Эта страница посвящена знаку зодиака «Телец» и использует тему «Земля»
Эти теги очень напоминают те, что появляются, когда вы добавляете соответствующий элемент управления к Web-странице. Самый простой способ создать skin файл состоит в том, что вы просто копируете нужные теги с Web-страницы и редактируете их. 5. В пределах каждого тэга, добавьте параметры элементов управления и задайте их значения. Если вы забыли, как записать параметр или его значение, откройте WEB страницу в режиме дизайнера, измените соответствующие параметры, а затем переключитесь в режим редактирования кода и скопируйте получившийся код из WEB страницы в skin файл. 6. Когда все сделано, сохраните skin файл, выбрав Save из меню File. Учтите, что skin файл может только изменить отображение элементов Web-страницы, имеющие визуальные свойства, и не может управлять ими. Теперь, когда у вас появились папки с темами, файлы таблицы стилей можно хранить не отдельно, а в подпапках соответствующих тем. Тогда темы автоматически будут связывать хранимые в своих подпапках таблицы стилей с любыми страницами, которые используют данную тему. В нашем примере есть тема «земля» и тема «вода», которые располагаются в соответствующих папках: ■ папка App_Themes/вода, содержит файл вода.css. ■ папка App_Themes/земля, содержит файл земля.css
Результат применения темы «земля» показан на Рисунок 36, а темы «вода» на Рисунок 37 Вы можете применить темы к индивидуальным Web-страницам или ко всему сайту, Чтобы применить тему к единственной webстранице, сделайте следующее:
Рисунок 37. Эта страница посвящена знаку зодиака «Рак» и использует тему «Вода»
1. Откройте страницу в VWD2005 EE 2. Выберите DOCUMENT в окне Properties 3. Найдите свойство Theme, а затем выберите нужную тему из
Рисунок 38. . Эта страница посвящена знаку зодиака «Телец» и использует тему «Земля», с помощью которой произведена замена рисунка.
раскрывающегося списка. Чтобы определить тему, которая обращается ко всему Webсайту, Вы должны изменить файл конфигурации сайта (web.config): 1. Откройте файл web.config в VWD2005 EE. 2. Найдите пару тегов <system.web> и . Если ваш файл web.config не содержит этих тегов, то создайте их. 3. Теперь добавьте тег, задающий тему (он выделен зеленым цветом), как показано ниже. <system.web> <pages theme = "земля"/> Рисунок 36 и Рисунок 38 показывают одну и ту же страницу сайта «Зодиак». Но она выглядит по-разному, так как во втором случае в skin файл темы «земля» была добавлена строка
следующего вида: .
Лабораторная №07 Создайте шесть тем, которые могут быть использованы для оформления страниц западного и восточного гороскопов. В таблице ниже показано соответствие стихий и гороскопов Восточный Стихия Западный гороскоп гороскоп Вода Присутствует Присутствует Земля Присутствует Присутствует Огонь Присутствует Присутствует Воздух Присутствует Дерево Присутствует Железо Присутствует При создании темы используйте CSS и Skin файлы. В CSS файле для каждой темы выберите различающийся шрифт (его цвет, размер и начертание), а также цвет фона в соответствии с выбранной стихией. В Skin файле определите изображение для каждой стихии. Цветовое сочетание для каждой темы выбирайте в соответствии с методом, рассмотренным в Теме 2 (Модуль 1). Запишите содержимое CSS файлов для каждой из стихий Вода ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ Земля ______________________________________________ ______________________________________________
Тема 4. Создание карты сайта Каждый Web-сайт нуждается в системе навигации, которая позволяет посетителям получать быстрый доступ к информации, которую они ищут. При разработке большого сайта важно сохранить ясность и понятность системы навигации, поскольку с течением времени сайт будет изменяться и обновляться. С этой задачей помогут справиться следующие четыре компонента: ■ Файл Web.sitemap, который задает логическую структуру сайта. ■ Элемент управления Menu, который читает файл Web.sitemap и отображает структуру сайта в виде раскрывающегося меню. ■ Элемент управления TreeView, который читает файл Web.sitemap и отображает структуру в виде древовидного списка. ■ Элемент управления SiteMapDataSource, который связывает файл карты сайта (Web.sitemap) и элементы управления для ее отображения (TreeView или Menu).
Рисунок 39. Карта сайта «Зодиак».
Совместное применение этих компонент позволяет быстро и просто организовать систему навигации на сайте и поддерживать ее в постоянном актуальном состоянии. Построение системы навигации сайта проще всего начать с создания файла карты сайта, для этого сделайте следующее: 1. Откройте сайт, и щелкните правой кнопкой мыши по папке сайта, в появившемся меню выберите пункт Add New Item. 2. Когда диалоговое окно Add New Item появится, выберите шаблон Site Map. 3. Если это первый файл содержащий карту сайта, лучше согласитесь с его именем по умолчанию Web.sitemap. В противном случае задайте свое. 4. Щелкните кнопкой Add. По умолчанию, эта процедура создает файл по имени Web.sitemap, расположенный в папке сайта. Файл карты сайта представляет собой XML файл, поэтому VWD2005 EE отображает его в текстовом режиме. Только что созданный файл Web.sitemap выглядит следующим образом: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" /> Формат этого файла достаточно прост: ■ Тэг в первой строке, определяет используемую версию XML, и его менять не нужно. ■ Тэг <siteMap> во второй строке и его окончание в седьмой строке отмечает начало и конец XML документа, также не изменяйте эти тэги. ■ Каждый тэг <siteMap> должен содержать один и только один тэг верхнего уровня <siteMapNode>. Он обычно определяет стартовую страницу в карте сайта. В примере, это - тэг <siteMapNode> в третьей строке, а его окончание в шестой строке. ■ Между тегами верхнего уровня <siteMapNode> и можно добавить любое число дополнительных тегов <siteMapNode>. Каждый из них станет подуровнем в раскрывающемся меню или древовидном списке. Эти теги расположены в строках четыре и пять. ■ В пределах тегов второго уровня <siteMapNode> можно добавить любое число тегов <siteMapNode> третьего уровня и т.д.
Например, для сайта «Зодиак» предлагается следующая схема навигации см. Рисунок 39, чтобы ее задать нужно в файле Web.sitemap создать структуру, представленную на Рисунок 40 У тега <siteMapNode> есть три признака, которые можно менять: ■ URL - абсолютная или относительная ссылка на страницу, куда будет совершен переход при выборе ссылки в меню или древовидном списке. Не определяйте то же самое Рисунок 40. Код задающий карту сайта «Зодиак» значение URL дважды в одном файле карты сайта, иначе получите сообщение об ошибке. Чтобы создавать <siteMapNode>, который не связан со страницей, оставьте пробел в качестве значения URL. Это полезно для пунктов меню, которые представляют группу страниц, но сами ни на какие страницы не ссылаются.
■ TITLE название ссылки, которое появится как видимый текст в меню, или древовидном списке. ■ DESCRIPTION более длинное название ссылки, которое появится как текст подсказки, когда мышь будет находиться на ссылке. Этот признак является дополнительным, и заполнять его не обязательно.
Рисунок 41. Связывание меню и карты сайта
Описанную в файле Web.sitemap карту сайта можно использовать для создания выпадающего или раскрывающегося меню, следующим способом: 1. Откройте мастер страницу или любую другую страницу, которая будет отображать меню. 2. В панели Toolbox откройте группу Data и перетащите элемент SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4. 3. В панели Toolbox, откройте группу Navigation и перетащите элемент Menu на открытую страницу, в нужное вам место. 4. VWD2005 EE отобразит меню задач как показано на Рисунок 41. Откройте список Choose Data Source и выберите название SiteMapDataSource1, которое было добавлено на шаге 2. 5. Сохраните страницу, затем можете просмотреть ее.( Рисунок 42) Чтобы настроить конфигурацию меню, выделите его, а затем определите нужные значения в окне Properties. Покажем, как установить свойство Orientation. Мы можем выбрать между значениями Horizontal и Vertical:
Рисунок 42. Пример раскрывающегося меню
■ Horizontal. Горизонтальные пункты меню Top-level появятся слева направо. Результат система раскрывающегося меню. ■ Vertical. Вертикальные пункты меню Top-level появятся сверху вниз. Результат - выпадающая система меню.
Рисунок 43. Пример меню-списка
Файл карты сайта можно также использовать для создания навигации аналогичной Windows Explorer, для этого нужно воспользоваться элементом TreeView из группы Navigation. Тогда посетители сайта смогут использовать значки плюс (+) и минус (-), чтобы развернуть или свернуть любые группы элементов меню. Чтобы создать меню-список нужно выполнить следующие действия: 1. Откройте мастер страницу или любую другую страницу, которая будет отображать меню-список. 2. В панели Toolbox откройте группу Data и перетащите элемент SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4. 3. В панели Toolbox, откройте группу Navigation и перетащите элемент TreeView на открытую страницу, в нужное вам место. 4. VWD2005 EE отобразит меню задач, в котором нужно открыть список Choose Data Source и выбрать название SiteMapDataSource1, которое было добавлено на шаге 2. 5. Сохраните страницу, затем можете просмотреть ее (Рисунок 43). Наконец, файл карты сайта можно использовать для создания панели, которая показывает путь от главной страницы к текущей странице с помощью элемента управления SiteMapPath. На Рисунок 44 элемент управления SiteMapPath появляется в низу страницы. Вы можете добавить элемент SiteMapPath к любой .aspx Web-странице, или мастер странице. Для этого
достаточно в панели Toolbox открыть группу Navigation и перетащить элемент SiteMapPath на нужную страницу, открытую в режиме конструктора В отличие от элементов управления |Menu и TreeView, элемент управления SiteMapPath не получает данные от SiteMapDataSource, а всегда использует файл карты сайта по умолчанию: Web.sitemap. Это может служить серьезным основанием, чтобы не изменять имя файла карты сайта данное по умолчанию. Таким образом, мы рассмотрели четыре элемента управления, которые помогают организовывать гиперссылки в пределах сайта. Первый, SiteMapDataSource, обеспечивает доступ к иерархическому списку связей, который закодирован в файле web.sitemap. Этот элемент не виден в режиме просмотра и обеспечивает данными элементы управления Menu и TreeView. Элемент управления Menu отображает в зависимости от настроек раскрывающееся или выпадающее меню, а TreeView отображает те же самые данные в виде иерархического списка. Четвертый элемент управления, SiteMapPath, находит текущую страницу в файле web.sitemap и затем отображает путь от текущей страницы к домашней странице сайта. Рисунок 44. Пример использования SiteMapPath
Лабораторная №08 Сделайте три файла карты сайта. В каждом из файлов разместите ссылки на следующие Web-страницы 1. Общая карта сайта
■ западный гороскоп ■ восточный гороскоп ■ информация о разработчиках ■ страница заполнения анкеты ■ страница получения прогноза
■ Стихия земли • Телец • Дева • Козерог ■ Стихия воды • Рак • Рыбы • Скорпион
■ Стихия воздуха • Близнецы • Весы • Водолей ■ Стихия огня • Овен • Лев • Стрелец
В каждом файле карты сайта заполните поля DESCRIPTION развернутыми описаниями ссылок Общую карту сайта используйте для заполнения элемента управления Menu на домашней странице сайта Файл карты сайта «Восточный гороскоп» используйте для заполнения элемента управления TreeView, который разместите на мастер-странице «Восточный гороскоп» Файл карты сайта «Западный гороскоп» используйте для заполнения элемента управления TreeView, который разместите на мастер-странице «Западный» На обоих мастер-страницах замените ссылку на домашнюю страницу элементом управления SiteMapPath.
Модуль 5. Работа с базами данных. Любой сайт только выиграет, если будет предоставлять возможность сохранения информации нужной для взаимодействия с пользователем. Как правило, такая информация хранится в базе данных и показывается на Web-странице по соответствующему запросу. Этот механизм позволяет создать поисковые системы, системы электронной коммерции, различные социальные сервисы. Такими образом, когда базы данных и Интернет используются вместе, получается больший эффект нежели при их отдельном использовании. VWD2005 EE позволяет очень просто создавать Webсайты, которые работают с базами данных. Во многих случаях от вас не потребуется написать даже строчку кода, потому что VWD включает мощные, интегрированные, и удобные в работе инструменты для взаимодействия с Microsoft SQL Server.
Тема 1. Создание базы данных и подключения
Рисунок 45. Окно Database Explorer
Чтобы использовать базу данных совместно с VWD2005 EE, нужно сначала cконфигурировать подключение, в Database Explorer, которое указывает на необходимую базу данных. Каждое подключение соответствует только одной базе, но это не является ограничением, так как можно сконфигурировать столько подключений, сколько баз необходимо использовать. Создание, изменение и удаление подключений баз данных производится через Database Explorer. Это - окно Visual Web Developer, которое обычно используется совместно с Solution Explorer. (см. Рисунок 45) Чтобы переключиться между Solution Explorer и Database Explorer, нужно щелкнуть по одной из вкладок вдоль нижнего края окна. Если ни окно Database Explorer, ни вкладка Database Explorer не видимы, то нужно выбрать Database Explorer из меню View. Соединение с Существующей Базой данных 1. Запустите VWD2005 EE, откройте Web-сайт и активизируйте окно Database Explorer. 2. В окне Database Explorer щелкните правой кнопкой мыши по надписи Data Connections и выберите Add Connection из контекстного меню 3. Появится диалоговое окно Add Connection, как показано на Рисунок 46. Из списка Data Source выберите тот пункт, что описывает вашу базу данных. Рисунок 46. Ддиалоговое окно Add Чтобы изменить Data provider, установленный по Connection умолчанию для данного типа базы данных, щелкните по кнопке Change. Появится диалоговое окно Change Data Source (Рисунок 47). Теперь выберите источник данных, а затем выберите Data provider, и, наконец, поставьте флажок напротив
Always use this selection. Чтобы сохранить изменения и закрыть диалоговое окно Change Data Source, щелкните на кнопку OK. 4. Когда управление перейдет к диалоговому окну Add Connection, проверьте поле Data Source. ■ Если поле Data Source ссылается на нужный вам тип базы данных, переходите к следующему шагу. ■ Иначе, щелкните на кнопку Change и вернитесь к шагу 3. Рисунок 47. Окно Change Data Source
Вид диалогового окна Add Connection изменяется в зависимости от типа базы данных. Однако, область Data Source всегда на нем присутствует в его верхней части. 5. Задайте необходимые параметры подключения в диалоговом окне Add Connection и щелкните кнопкой OK. VWD2005 EE может подключаться и управлять базами данных Microsoft SQL Server. Кроме того, VWD2005 EE может подключаться и управлять следующими базами данных: ■ базы данных Microsoft Access. ■ базы данных Oracle (если и Oracle и драйверы базы данных Microsoft установлены). ■ любые базы данных, для которых есть ODBC или OLE-DB драйверы.
Далее рассмотрим стандартные действия для подключения к SQL серверу, которые нужно выполнить с помощью диалогового окна Add Connection: 1. В поле Server Name, введите имя сервера и, в случае необходимости, название раздела, где SQL сервер хранит базу данных. Имя сервера также можно задать, щелкнув по стрелке раскрывающегося меню поля Server Name. В меню будут перечислены имена компьютеров, на которых имеются SQL серверы. Выберите название соответствующее экспресс версии SQL сервера, установленного на вашем компьютере. В этом случае имя сервера, скорее всего, будет совпадать с именем вашего компьютера (например, STORM), а имя раздела будет называться SQLEXPRESS. Таким образом, в поле Server Name появится STORM\SQLEXPRESS 2. Выберите тип аутентификации для SQL сервера, воспользовавшись одним из двух доступных методов: ■ Use Windows Authentification. Использует ваш текущий логин и пароль, которые вы вводили для входа в операционную систему Microsoft Windows, для соединения с SQL сервером. Этот метод рекомендуется использовать, если SQL сервер установлен на локальном компьютере. ■ Use SQL Server Authentification. Для подключения к SQL серверу используются имя пользователя и
пароль, определенные на самом SQL сервере. Если выбран этот метод, то нужно ввести имя пользователя SQL сервера и пароль, которые имеют необходимые привилегии для работы базами данных. Как правило, получить имена и пароли можно у администратора базы данных, который управляет именами и паролями для доступа к SQL серверу.
3. Определите, какую базу данных будет использовать ваше подключение.
Если база данных уже присоединена к SQL серверу, введите ее имя или выберите ее из списка в поле Select or enter a database name. 4. Если база данных находится в .mdf файле и еще не присоединена к SQL серверу
■ Определите имя .mdf файла в поле Attach a database file. Для этого можно просто напечатать путь и имя файла или щелкнуть на кнопку Browse, определить местонахождение файла, и затем щелкнуть на кнопку Open. ■ В поле Logical Name, напечатайте краткое название, которое описывает присоединяемую базу данных. Это название будет использоваться в командах SQL и коде вашей программы.
5. Чтобы проверить правильность всех настроек, щелкните на кнопку Test Connection в
нижнем левом углу диалогового окна. Если ваши настройки правильны, VWD2005 EE отобразит сообщение "Test connection succeesed”, в противном случае вернитесь к началу и отредактируйте настройки. 6. Щелкните на кнопку OK, чтобы создать подключение. Новое подключение должно появиться немедленно в окне Database Explorer. Теперь вы можете работать с содержимом базы данных, вот некоторые приемы такой работы: ■ Щелкнув на значке Плюс (+), предшествующем названию созданного подключения, вы отобразите список типов объектов, которые содержит база данных: Tables, Views, Stored Procedures и другие. ■ Щелкнув на значке Плюс (+), который предшествует типу объекта, вы отобразите список объектов этого типа. Например, щелкнув на значок Плюс (+) перед пунктом Tables, вы отобразите список таблиц. ■ Щелкнув на значок Плюс (+), который предшествует таблице, вы отобразите список ее полей и т.д..
Если Вы не получаете результаты, описанные выше, то ваша база данных или ваше подключение вероятно созданы с ошибкой. Физически, базы данных SQL сервера находятся в двух файлах: главный файл имеет расширение .mdf, а файл журнала расширение .ldf. Эти файлы могут находиться в любом месте файловой системы компьютера, на котором выполняется SQL сервер, но есть стандартные места их расположения:
■ Для базы данных, которую будет использовать ваш Web сайт, самое удобное место это папка App_Data в каталоге самого сайта. Этот подход существенно упрощает публикацию базы данных. ■ Для базы данных, которую будут использовать несколько приложений или Web сайтов, лучше выбрать стандартное хранилище данных SQL сервера. Как правило, это папка называется C:\Program Files\Microsoft SQL Server\MSSQL.l\MSSQL\Data
В дальнейшем будем использовать базу данных SQL сервера по имени Зодиак.mdf, которая будет находиться в стандартной папке App_Data. Чтобы создать новую базу данных для вашего сайта проделайте следующие действия: 1. Откройте Web сайт. 2. Выберите пункт New File из меню File. 3. Когда диалоговое окно Add New Item появится, выберите шаблон SQL Database 4. В поле Name, напечатайте Зодиак.mdf Рисунок 48. Предложение разместить, создаваемую базу данных в стандартном каталоге App_Data 5. Щелкните на кнопку Add. Если появится следующее сообщение (см. Рисунок 48), то щелкните на кнопку Yes. VWD2005 EE создаст базу Когда база данных создана, вы можете с помощью VWD2005 EE создавать, изменять, и удалять в ней таблицы. Например, чтобы создать Таблицу "Анкета" в базе данных “Зодиак”, нужно выполнить следующие действия: 1. В окне Database Explorer, нажмите значок Плюс (+) рядом с подключением базы данных Зодиак, которое было создано ранее. Щелкните правой кнопкой мыши по разделу Tables, и выберите пункт Add New Table из контекстного меню. 2. VWD2005 EE отобразит таблицу со стандартным именем Table1 в режиме конструктора. Теперь вы можете задать для новой таблицы поля и их описания. Чтобы задать первое поле, выполните следующие действия: ■ Установите курсор в первой строке окна Table Designer в поле, расположенное прямо под надписью Column Name.
■ Введите название id_анкета и нажмите клавишу Tab. ■ В столбце Data Type, выберите Int из всплывающего списка и нажмите клавишу Tab. ■ Уберите флажок в столбце Allow Nulls. ■ Во вкладке Column Properties внизу окна, найдите раздел Identity Specification, нажмите значок Плюс (+), чтобы раскрыть этот раздел, и установите значение Yes для свойства Is Identity см. Рисунок 49. ■ Щелкните правой кнопкой мыши по строке id_анкета и выберите пункт Set Primary Key из контекстного меню
Установка значение Yes для свойства Is Identity для поля id_анкета сообщает SQL серверу, что каждый раз при добавлении новой записи в таблицу это поле должно принимать уникальное значение. Если вы выделили одно или несколько полей таблицы, щелкнули по выделению правой кнопкой мыши, а затем выбрали Set Primary Key из контекстного меню, то SQL сервер будет обрабатывать эти поля для идентификации записей таблицы. 3. Когда вы зададите все свойства текущего поля, обратите внимание на то, что снизу появилась пустая Рисунок 49. Определение полей базы данных строка, в которой вы можете создать новое поле. Таким образом, переходя от строки к строке, вы можете задать все поля и их свойства (см. Таблица 7) Таблица 7. Перечень полей таблицы "Анкета"
Column name
Data Type
Allow Nulls
id_анкета ФИО
int Unchecked nvarchar(60) Checked
[дата рождения]
smalldatetime Unchecked
Identity
Primary Key
Да
Да
телефон [электронный доход знак
nvarchar(15) nvarchar(50) smallmoney int
Checked Checked Checked Unchecked
4. Выберите пункт Save Tablen из меню File, где n – целое число, которое VWD2005 EE
Рисунок 50. Окно сохранения новой таблицы
назначает каждой вновь создаваемой таблице. Когда появится диалоговое окно Choose Name см. Рисунок 50 , введите название таблицы, например, «Анкета», а затем щелкните на кнопку OK. Чтобы добавить, изменить или удалить поля в существующей таблице, щелкните правой кнопкой мыши по таблице в окне Database Explorer и затем выберите пункт Open Table Definition из выпадающего меню. Это действие отобразит перечень полей выбранной таблицы (см. Рисунок 49). Чтобы удалить таблицу, щелкните по ней правой кнопкой мыши в окне Database Explorer и выберите пункт Delete. Это действие удалит и определение таблицы, и все данные, которые она содержит. Чтобы просмотреть данные, содержащиеся в таблице, щелкните правой кнопкой мыши по названию таблицы в Database Explorer и выберите пункт Show Table Data в выпадающем меню. В результате отобразится окно Query Designer, и вы увидите свои данные. Как показано на Рисунок 51. Окно Query Designer содержит четыре области: Results, SQL, Criteria, Diagram При запуске Query Designer выполняет очень простой запрос, результаты которого походят на электронную таблицу и отображаются в области Results. Вы можете использовать ее для изменения, добавления, или удаления данных: ■ Чтобы изменить значение любой ячейки, выберите ее и напечатайте новое значение. ■ Чтобы добавить запись, напечатайте значения ее полей в пустую строку в конце таблицы. ■ Чтобы удалить запись, выберите ее и нажмите клавишу Del.
VWD2005 EE немедленно вставляет, обновляет или удаляет текущую запись всякий раз, когда вы нажимаете ENTER, Del или переходите к другой записи. Поэтому нет никакой надобности в дополнительном сохранении внесенных изменений. Если вы просто хотите быстро просмотреть свои данные и, возможно сделать несколько исправлений, то рассмотренной выше области Results вполне достаточно для этого. Однако,
если вы хотите выполнить более сложные операции нужно задействовать другие области окна Query Designer. Чтобы отобразить любую из этих областей, нужно сделать следующее: 1. Щелкните правой кнопкой мыши по окну Query Designer. 2. Выберите Pane из контекстного меню. 3. Выберите область окна, которую Вы хотите отобразить или скрывать. Каждая область выполняет свои задачи, вот краткое описание каждой из них:
Рисунок 51. Просмотр содержимого таблицы
■ Diagram. Отображает маленькое окно для каждой таблицы, включенной в запрос. Флажки указывают области, предназначенные для вывода, и значки AZ указывают порядок сортировки. o Чтобы добавить таблицу к диаграмме (и следовательно к запросу) перетащите ее из окна Database Explorer и поместите ее на область Diagram. o Чтобы соединить пару таблиц (то есть, получить отчеты, основанные на значениях данных из обеих таблиц) перетащите нужное поле из одной таблицы и поместите его на соответствующее поле в другой таблице. o Чтобы изменить свойства объединения таблиц, щелкните правой кнопкой мыши по линии, соединяющей эти две таблицы и выберите тип объединения, который вам нужен. ■ Criteria. Отображает в табличном и доступном для редактирования виде представление полей из всех таблиц, включенных в запрос. ■ SQL Отображает SQL команды, которые автоматически генерируются в соответствии с запросом.
Всякий раз, когда Вы обновляете одну из областей окна Query Designer: SQL, Criteria или Diagram, VWD2005 EE обновит и две другие области окна. Если, например, Вы измените область окна SQL, то VWD2005 EE обновит область Diagram и область окна Criteria соответственно. ■ Results. Отображает результаты выполнения запроса. Запрос, который выполняется по умолчанию, когда вы выбираете команду Show Table Data имеет вид: SELECT * FROM
Если Вы будете использовать области Diagram, Criteria или SQL, чтобы изменить этот запрос, то область окна Results не отобразит ваших изменений до тех пор, пока вы не выполните одно из двух действий: ■ Выберите пункт Execute SQL из меню Query Designer, или ■ Щелкнув правой кнопкой мыши по окну Query Designer, выберите пункт Execute SQL из контекстного меню.
VWD2005 EE может соединить ваш Web-сайт с существующими базами данных. Он позволяет также создать новую базу данных и соединиться с ней. Обычно базы данных размещаются в папке App_Data вашего Web-сайта. VWD2005 EE может также создать, изменять и обновлять таблицы базы данных.
Лабораторная №09 Создать базу данных "Зодиак" со следующими таблицами
id_прогноз
1. Анкета (содержит личные данные о пользователе
знак
сайта) 2. Описание знаков (содержит краткую характеристику знака зодиака) 3. Прогноз (содержит прогноз для каждого знака зодиака на конкретную дату)
дата содержание
■ Анкета Имя поля
Тип данных
Допускается NULL
Тип данных
Допускается NULL
id_анкета
анкета
ФИО
id_анкета
описание_ знаков id_знаки название характеристика
ФИО
Дата_Рождения
Дата_Рождения
Телефон
Телефон
Электронный_Адрес
Электронный_Адрес доход
доход знак
знак
■ Описание знаков Имя поля id_знаки
Прогноз id_прогноз знак
название характеристика
дата содержание
■ Прогноз Имя поля
Тип данных
Допускается NULL
Во всех таблицах для каждого поля укажите тип данных и допущение значения NULL
Тема 2. Отображение информации из базы данных Для отображения содержимого из базы данных на Web странице VWD2005 EE использует три вида компонентов: ■ Data Connection, обеспечивает доступ к базам данных. ■ Data Source использует Data Connection для того чтобы искать, вставлять, обновлять и удалять записи в базе данных, ничего не показывая пользователю. ■ Data Bound Controls показывает информацию из базы данных, используя Data Source.
Чтобы оценить легкость работы по созданию приложений баз данных с использованием VWD2005 EE, выполним следующую процедуру: В окне Database Explorer, раскройте любое существующее подключение Data Connection и найдите таблицу или запрос, который нужно отобразить в Web-странице. Откройте Web-страницу в Режиме конструктора. Перетащите таблицу или запрос из Database Explorer и поместите его на открытую страницу (см. Рисунок 52), это действие добавляет два элемента управления к Web-странице: SqIDataSource - управляет Рисунок 52. Использование элемента управления GridView. источником данных и GridView - отображает в табличном виде информацию из базы данных. GridView – один из самых популярных и полезных элементов управления данными. VWD2005 ЕЕ автоматически связывает элемент GridView и источник данных. Вы также можете создать источник данных, перетаскивая значок SqlDataSource из группы Toolbox's Data и помещая его на страницу. Таблица 8 описывает некоторые элементы управления данными.
Таблица 8. Элементы управления данными
Управление SqIDataSource
Описание Производит поиск и обновление информации в базах данных Microsoft SQL сервера. AccessDataSource Производит поиск и обновление информации в базах данных Microsoft Access. ObjectDataSource Производит поиск и обновление информации через бизнес объекты. XmlDataSource Служит для работы с информацией, содержащейся в XML файлах. SiteMapDataSource Обрабатывает информацию, содержащуюся в файле карты сайта.
Когда источник данных создается путем перетаскивания таблицы или запроса из Database Explorer, то формируемый отчет показывает записи без сортировки. Чтобы изменить настройки отчета, созданные по умолчанию, нужно выполнить следующие действия: 1. Выделите элемент SqIDataSource, щелкните по нему правой кнопкой мыши и из выпадающего меню выберите пункт Configure Data Source. 2. Когда диалоговое окно Choose Your Data Connection (см. Рисунок 53), появится, вы должны: ■ использовать раскрывающийся список, чтобы выбрать нужную строку подключения, или ■ щелкнуть на кнопку New Connection, чтобы создать новую строку подключения данных.
Рисунок 53. Выбор подключения
Чтобы отобразить содержимое строки подключения источника данных нужно нажать на значок Плюс (+), который предшествует надписи Connection String 3. Нажмите кнопку Next, чтобы перейти к окну Configure The Select Statement (см. Рисунок 54). Для составления простых запросов выберите пункт Specify columns from a table or view задайте следующие параметры настройки: ■ Name. Определяет таблицу или запрос, с которым вы хотите работать. Раскрывающееся меню позволяет выбрать любую таблицу, доступную при этой строке подключения данных. ■ Columns. Отметьте флажком, те поля которые нужно включить в отчет. Чтобы отметить все поля, пометьте флажком поле звездочка (*).
■ Return Only Unique Rows. Этот флажок нужен, если две или более записей имеют одинаковые значения полей, а нужно показать только одну из них. ■ WHERE. Нажав эту кнопку вы откроете окно Add WHERE, где можете задать условия для отобора записей. ■ ORDER BY. Нажав эту кнопку вы откроете окно Add ORDER BY, где можете определить поля участвующие в сортировке данных ■ Advanced. Нажав эту кнопку вы откроете окно Advansed SQL Generation Options. Если хотите использовать источник данных для обновления записей установите этот флажок напротив опции Generate INSERT, UPDATE and DELETE statements. В результате будут сгенерированы операторы для вставки, обновления и удаления записей (INSERT, UPDATE, DELETE). Другая опция называется Use optimistic concurrency. Используйте ее, если ожидается высокая нагрузка на создаваемый вами ресрус.
Рисунок 54. Выбор полей из таблицы
Если эти опции не удовлетворили ваши запросы, то можно выбрать пункт Specify a custom SQL statement or stored procedure в том же диалоговом окне (см. Рисунок 54)
4. Если вы выбрали пункт Specify a custom SQL statement or stored
Рисунок 55. Составление собственных SQL операторов
procedure на предыдущем шаге, то нажмите кнопку Next. В результате отобразится диалоговое окно Define Custom Statements or Stored Procedures (см. Рисунок 55). Чтобы определить собственные операторы SELECT, UPDATE, INSERT или DELETE, выберите вкладку соответствующую нужному оператору и затем нажмите на кнопку Query Builder. В результате отобразится конструктор запросов (см. Рисунок 51), с помощью которого вы можете создать SQL запрос и даже проверить его работу, нажав на кнопку Execute Query. Если проверка прошла успешно, нажмите на кнопку OK. 5. Нажмите кнопку Next. Отобразится диалоговое окно Test Query (см. Рисунок 56), Нажмите кнопку Test Query и убедитесь, что на экране появились нужные вам данные. Если все правильно нажмите кнопку Finish. В противном случае нажмите кнопку Previous и внесите нужные изменения.
Многие элементы управления, размещаемые на Web-страницах, могут связываться с источниками данных. Например, чтобы заполнить элемент DropDownList значениями полей таблицы базы данных, задайте у него следующие три свойства: ■ DataSourceID. Имя источника данных, которое указывает на таблицу или запрос с необходимой информацией ■ DataTextField. Имя поля, значения которого будут отображаться при работе пользователя с элементом DropDownList. Обычно эти значения относятся к строковому типу. ■ DataValueField. Имя поля, значения которого будут возвращаться элементом DropDownList. Обычно эти значения относятся к целому типу.
Часто бывает необходимо отобразить несколько полей для каждой записи таблицы в одном элементе управления с возможностью их непосредственного обновления. Таким требованиям удовлетворяют элементы, перечисленные в Таблица 9. Рисунок 56. Тестирование запроса
Таблица 9. СВЯЗАННЫЕ УСТРОЙСТВА ОТОБРАЖЕНИЯ ДАННЫХ
Элемент Описание управления GridView Отображает данные в табличном виде DetailsView Отображает поля записи из источника данных в виде HTML таблицы, каждая строка корой соответствует полю записи FormView Отображает отдельные записи из источника данных, но вместо отдельных ячеек строк он использует заданные пользователем шаблоны Repeater Предоставляет гибкий и удобный механизм отображения повторяющихся списков элементов. DataList Похожи на элементы управления Repeater, но обладают дополнительными возможностями: они поддерживают форматирование по колонкам, а также выбор и редактирование элементов
Поддержка способ Присутствует в обновления данных версии ASP Update, Delete 2.0 Insert, Update, Delete 2.0 Insert, Update, Delete
2.0
Дополнительный код 1.0 Дополнительный код 1.0
Из перечисленных в таблице элементов управления, связанных с отображением данных, элементы GridView, DetailsView и FormView наиболее удобны в использовании. Процесс конфигурации этих элементов почти одинаков для каждого из них. Покажем его на примере конфигурирования элемента управления GridView.
Будем использовать элемент управления GridView для создания страницы Анкетных данных пользователей сайта «Зодиак» (Рисунок 57). На рисунке вы видите страницу, которая оформлена с использованием уже известных вам элементов: меню; темы; и строки перемещения. Обратите внимание на таблицу содержащую сведения о пользователях из таблицы «Анкета» - это и есть элемент управления GridView. Чтобы создать Web-станицу, содержащую действия:
GridView, проделайте следующие
1. Откройте новую пустую страницу. Вы можете
применить к ней мастер страницу или другие способы форматирования, которые необходимы для ее оформления. 2. Добавьте элемент управления GridView и SqIDataSource к странице, для этого вы можете использовать любой из вариантов: Рисунок 57. С ЭТИМ ДИАЛОГОВЫМ
■ Перетащите таблицу "Анкета" из окна Database Explorer и поместите ее на вашу страницу. ■ Перетащите элемент управления GridView и SqIDataSource из группы Data панели Toolbox на открытую Web-страницу.
3. Откройте меню задач элемента управления SqIDataSource и выберите в нем пункт
Configure Data Source. 4. Когда появится диалоговое окно Choose Your Data Connection, выберите или создайте подключение к базе данных “Зодиак”, а затем нажмите кнопку Next. 5. Когда появится диалоговое окно Configure The Select Statement, выберите таблицу "Анкета", а в ней поля ФИО, дата рождения, телефон, электронный адрес, доход. 6. Нажмите кнопку WHERE, когда появится диалоговое окно Add WHERE, определите значения следующих полей: ■ Column (доход) ■ Operator (>= )
Рисунок 58. Задание условия на отбор записей
■ Source (none) ■ Value (10000)
а затем нажмите кнопку Add (см. Рисунок 58). В результате мы получим запрос, показывающий только записи, в которых доход больше или равен 10.000 7. Нажмите кнопку OK, чтобы закрыть окно Add WHERE, затем нажмите кнопку ORDER BY в окне Configure The Select Statement. 8. Когда появится диалоговое окно Add ORDER BY, определите значение поля Sort by равное ФИО, а затем нажмите кнопку OK. В результате будет установлена сортировка ваших записей по полю ФИО. 9. Нажмите последовательно кнопки Next, Test Query и Finish, чтобы закончить работу мастера. Конфигурирование элемента управления SqIDataSource завершено, теперь нужно закончить конфигурирование элемента управления GridView, для этого выполните следующие действия: 1. Откройте меню задач элемента управления GridView и удостоверьтесь, что поле Choose Data Source указывает на тот источник данных, который вы только что сконфигурировали. 2. Поставьте флажки напротив следующих опций: ■ Enable Paging. Разбивает весь отчет на страницы, содержащие заданное число записей. Внизу отчета появляются номера страниц, которые можно использовать для простмотра записей (см. Рисунок 57). ■ Enable Sorting. Позволяет сортировать записи, показанные на Web странице, для этого достаточно щелкнуть по оглавлению нужного столбца.
Рисунок 59. Определение полей и их порядка следования в отчете
3. Из меню задач выберите пункт Edit Columns. Появится диалоговое окно Fields (см. Рисунок 59). Используйте область Selected Fields и связанные с ним кнопки-стрелки "вверх" и "вниз", чтобы задать порядок следования полей в отчете: ФИО, дата_рождения, телефон, электронный_адрес, доход. 4. Выберите поле ФИО в области Selected Fields, а затем, используя область BoundField Properties, задайте свойства, перечисленные в Таблица 10. Повторите эту процедуру для остальных полей
Таблица 10. СПИСОК ПРОДУКТОВ В НЕДАВНО-ОТОБРАННОЙ КАТЕГОРИИ
Свойство DataField HeaderText Element Style: HorizontalAlign
ФИО Фамилия Имя Отчество Left
Поле Дата_рождения телефон Дата рождения Контактный телефон Right Right
Электронный_адрес доход Электронный адрес Годовой доход Right Right
5. Нажмите на кнопку OK, чтобы закрыть диалоговое окно Fields 6. Сохраните страницу и просмотрите ее в вашем браузере.
Мы убедились, что с помощью VWD2005 EE можно создавать привлекательные Web страницы, которые отображают информацию из базы данных различными способами. Все это можно сделать, не написав ни строчки кода, а только используя компоненты: Data Connection, Data Source и Data Bound Controls.
Тема 3. Управление базой данных Чтобы мы имели возможность просматривать информацию, хранящуюся в базе данных ее туда должен кто-то ввести. Ввод информации в базу данных можно осуществлять с помощью уже известных элементов управления GridView и DetailsView, в которых нужно включить соответствующие опции. Тогда элемент GridView позволяет обновлять или удалять записи, а элемент управления DetailsView можно использовать для записей. Обратите добавления внимание, на Рисунок 60, где показан элемент управления GridView, в котором для каждой записи имеются две ссылки: «правка» и «удалить». ■ Правка. Использует формы HTML для отображения каждого поля записи, значения которых можно менять, а затем, щелкнув по кнопке «Обновить» сохранить изменения или нажав кнопку «Отменить» отказаться от них. Рисунок 60. Использование элемента управления GridView для обновления данных ■ Удалить. Немедленно удаляет соответствующую запись. ■ Выбор. Отмечает соответствующую запись как текущую.
Покажем, как настроить элемент управления GridView для обновления и удаления записей:
Рисунок 61. Проверяем наличие первичного ключа
1. Проверьте, имеет ли таблица базы данных первичный ключ. Для этого, щелкните правой кнопкой мыши по таблице в Database Explorer, и выберите пункт Open Table Definition. Убедитесь в том, что хотя бы одно поле объявлено первичным ключом (см. Рисунок 61), если это не так, то выберите поле, которое может служить первичным ключом, щелкните по нему правой кнопкой мыши и выберите пункт Set Primary Key из контекстного меню. 2. Сконфигурируйте элементы управления Data Source и GridView для отображения нужных записей. Просмотрите страницу, чтобы убедиться в правильности всех настроек. 3. Проверьте, что у элемента управления Data Source заданы операторы INSERT, UPDATE и DELETE. Это можно сделать следующим образом:
■ Выберите пункт Configure Data Source из меню задач элемента управления SqlDataSource. ■ Нажмите на кнопку Next, чтобы перейти к окну Configure the Select Statement. ■ Нажмите на кнопку Advanced, когда появится диалоговое окно Advanced SQL Generation Options, убедитесь, что флажком помечена опция Generate INSERT, UPDATE and DELETE statements (см. Рисунок 62).
Если кнопка Advanced или опция Generate INSERT, UPDATE and DELETE statements недоступны, то закройте окно Advanced SQL Generation Options, если оно было открыто. В окне Configure the Select Statement выполните любое из следующих действий:
Рисунок 62. Включаем опцию вставки, обновления и удаления записей
■ Выберите опцию Specify a custom SQL Statement Or Stored Procedure и нажмите кнопку Next, чтобы отобразить диалоговое окно Define Custom Statements Or Stored Procedures. Убедитесь, что во всех вкладках SELECT, UPDATE, INSERT, DELETE присутствуют правильные SQL команды. ■ Пометьте необходимые поля вашей таблицы, затем нажмите кнопку Advanced и выберите опцию Generate INSERT, UPDATE and DELETE statements.
4. Отобразите меню задач элемента управления GridView и выберите любую комбинацию
следующих опций:
■ Enable Editing. Установите этот флажок, чтобы элемент управления GridView мог изменять записи таблицы базы данных. ■ Enable Deleting. Установите этот флажок, чтобы элемент управления GridView мог удалять записи таблицы базы данных. ■ Enable Selection. Установите этот флажок, чтобы элемент управления GridView мог назначать выбранную запись текущей.
5. Сохраните страницу и просмотрите ее в браузере.
Теперь перейдем к созданию элемента управления DetailsView, с помощью которого можно будет добавлять записи в таблицу базы данных, для этого нужно выполнить следующие действия: 1. Создайте новую пустую страницу. Отредактируйте эту страницу так, как вы считаете нужным. Например, можете применить мастер-страницу или другие способы форматирования. 2. Добавьте элемент управления SqlDataSource к странице, перетащив его из группы Data панели Toolbox. Сконфигурируйте элемент SqlDataSource так, чтобы можно было обратиться к таблице "Анкета" в базе данных «Зодиак». Когда вы перейдете ко второй странице настроек, нажмите кнопку Advanced и удостоверьтесь, что выбрана опция Generate INSERT, UPDATE and DELETE statements. 3. Добавьте элемент управления DetailsView к редактируемой странице, перетащив его из группы Data панели Toolbox. 4. Сконфигурируйте следующие параметры с помощью меню задач для созданного элемента управления DetailsView. ■ В качестве значения поля Choose Data Source укажите тот источник данных, который был создан на шаге 2. ■ Поставьте флажок напротив опции Enable Inserting, тем самым вы разрешите элементу правления добавлять записи.
5. Перейдите к окну Properties и проверьте настройки элемента управления
Рисунок 63. Просмотр элемента управления DetailsView, сконфигурированного для добавления записей
DetailsView. Приведите их в соответствие с теми, что указаны в Таблица 11. 6. Сохраните страницу и просмотрите ее в браузере. Добавленные вами записи должны появляться, после того как вы обновите соответствующую Webстраницу.
Таблица 11. Свойства элемента управления DetailsView
Свойство Значение AutoGeneratelnsertButton True AutoGenerateRows
False
Описание Показывает внизу элемента управления DetailsView ссылку «Вставить» (Insert) для добавления записи в таблицу базы данных. Отменяет автоматическую подстановку полей записи таблицы в DetailsView.
Определяет список областей, которые служат первичным ключом таблицы базы данных. SqIDataSource1 Определяет название источника данных, посредством которого будет происходить добавление записи. Insert Задает для элемента управления DetailsView режим вставки записей по умолчанию. Center Размещает элемент управления DetailsView посередине страницы.
Рисунок 63 показывает, как выглядит созданная страница в браузере. Чтобы добавить запись, содержащую новую анкету, посетитель должен заполнить поля: ФИО, дата рождения, телефон, электронный адрес, доход, а затем нажать кнопку Вставка
Лабораторная №10 Сделать следующие формы для каждой таблицы базы данных: Таблица Назначение форм DetailsView GridView Анкета Добавление анкеты Форма не требуется пользователем Описание Просмотр подробной Просмотр кратких характеристики того характеристик по знаков или иного знака каждому из знаков Прогноз Просмотр прогноза на Просмотр прогнозов конкретную дату за определенный период Какие поля каждой из таблиц не нужно отображать на формах: Таблица Перечень полей Анкета Описание знаков
Форма
Перечень полей
таблица Анкета, форма DetailsView таблица Описание знаков, форма DetailsView таблица Описание знаков, форма GridView таблица Прогноз, форма DetailsView таблица Прогноз, форма GridView Какие свойства формы заданные по умолчанию вы изменили? Запишите их в таблицу, представленную ниже, в качестве образца используйте Таблица 11 Свойство
Значение
Описание
таблица Анкета, форма DetailsView таблица Описание знаков, форма DetailsView таблица Описание знаков, форма GridView
Прогноз Отметьте, для каких из следующих форм желательно задать разбиение на страницы: ■ таблица Анкета, форма DetailsView; ■ таблица Описание знаков, форма DetailsView; ■ таблица Описание знаков, форма GridView; ■ таблица Прогноз, форма DetailsView; ■ таблица Прогноз, форма GridView;
Отметьте, по каким полям каждой из форм стоит разрешить сортировку значений:
таблица Прогноз, форма DetailsView таблица Прогноз, форма GridView После создания форм введите с помощью них несколько записей во все таблицы базы данных.
