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

Дизайн страниц

Показывать лекцию целиком

Когда мы говорили о дизайне, то не раз упоминали шаблоны страниц как мощное средство, помогающее быстро и качественно оформить внешний вид сайта, а также впоследствии легко изменять его. VWD-2005 EE предоставляет в распоряжение web разработчика мастер-страницы, таблицы стилей и темы. Их использование позволяет быстро создать заготовку типового сайта.

Разработчики WEB-сайтов, используя мастер-страницы, таблицы стилей и темы конструируют собственные шаблоны для придания своим сайтам "фирменного" вида.

Как правило, при построении шаблонов активно используются таблицы, потому, что с их помощью легко выполнить:

  • выравнивание данных путем вставки в ячейки таблицы;
  • распределение текста и графики по разным колонкам;
  • создание обрамления вокруг текста или графических изображений; расположение текста по контуру графического изображения;
  • создание цветного фона для текстового фрагмента или отдельного изображения;
  • Изучив данный модуль, вы сможете:

  • создавать мастер-страницы и контент-страницы;
  • создавать таблицы стилей и применять их к web страницам
  • создавать темы, добавлять в них стили и шкурки
  • применять темы к web страницам
  • Тема 1. Создание и использование мастер страниц

    Мастер-страницы, служат шаблоном для отображения, других страниц. Для этого на мастер-странице выделяются области, не подлежащие изменению, и области где будет отображаться информация связанных страниц (страниц контента)

    Контент-страница - любая страница, которая использует мастер страницу. Каждый раз, когда посетитель запрашивает контент-страницу, ASP.NET загружает мастер-страницу, производит слияние с контент-страницей и посылает объединенный результат пользователю. Слияние мастер-страницы и контент-страницы на лету имеет два важных последствия.

  • посетитель всегда получает текущие версии шаблона и его содержания.
  • полученная после слияния страница обладает всеми возможностями обычной ASP.NET страницы. Например, мастер-страница, как и контент-страница может содержать любые элементы управления, или фрагменты кода. Лучше всего разрабатывать мастер страницу на этапе планирования сайта.
  • Чтобы создать сайт, использующий мастер страницы нужно выполнить следующие действия:

  • Создайте новый сайт
  • Удалите любые Web-страницы, которые содержит сайт. Например, удалите страницу default.aspx, которая создается по умолчанию
  • В окне Solution Explorer, щелкните правой кнопкой мыши по папке сайта и выберите Add New Item из контекстного меню
  • Когда диалоговое окно Add New Item появится, выполните следующие действия
  • Выберите из всех элементов списка Master Page
  • Оставьте название страницы по умолчанию MasterPage.master.
  • Выберите язык программирования (по умолчанию C#).
  • Поставьте галочку напротив Place code in separate file.
  • Нажмите Add, чтобы создать мастер-страницу
  • (рис 9.1) Новая мастер страница содержит только один элемент: управление ContentPlaceHolder

    Созданная мастер-страница, доступна для редактирования за исключением одного элемента управления ContentPlaceHolder, который создается на ней по умолчанию. Этот элемент резервирует пространство для содержимого контент-страницы (см. рис.9.1). Редактирование мастер-страницы такое же, как и редактирование обычной ASP страницы. Поэтому к ней можно применить все элементы управления, рассмотренные ранее. Рис. 9.2 показывает отредактированную мастер-страницу.

    (рис 9.2) Отредактированная мастер страница

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

  • Откройте сайт, который содержит мастер-страницу.
  • В окне Solution Explorer, щелкните правой кнопкой мыши по папке, где Вы хотите разместить новую контент-страницу, затем выберите Add New Item из контекстного меню.
  • Когда диалоговое окно Add New Item появится, не забудьте сделать следующее:
  • Выбрать шаблон документа: Web Form.
  • Поставить галочку напротив Select Master Page.
  • Щелкните на кнопку Add. Тогда появится диалоговое окно Master Page, тогда вы сможете выбрать мастер-страницу рис 9.3(рис 9.3) Выбор мастер страницы
  • Чтобы создать страницу, щелкните кнопкой OK.

    Когда Вы видите контент-страницу в режиме конструктора, части, которые добавились из мастер страницы, будут недоступны для редактирования. Чтобы изменить что-нибудь в них, вам придется открыть и отредактировать мастер-страницу (см. рис.9.4)

  • (рис 9.4) Контент-страница с присоединенным шаблоном.

    Рис.4 показывает контент-страницу, которая использует присоединенную мастер страницу. Кроме того, контент-страница отображает некоторое собственное содержание. Чтобы создать такую страницу выполните следующие действия:

  • Создайте ASP страницу, в нашем примере она называется Бык.aspx. На этапе создания подключите мастер-страницу ( MasterPage.master ), так как это было описано выше.
  • Задайте содержание страницы внутри элемента ContentPlaceHolder. Вы можете напечатать текст или вставить его и изображения. Затем сохраните страницу.
  • Щелкните правой кнопкой мыши по странице в Solution Explorer и выберите View In Browser из контекстного меню
  • Контент-страницы, которые используют мастер-страницы первоначально, содержат очень небольшой исходный текст. Вот типичный пример:

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
     CodeFile="бык.aspx.cs" Inherits="бык" Title="Untitled Page" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    </asp:Content>

    Директива @Page определяет язык программирования для любого кода, добавленного к странице, название файла мастер-страницы, и заголовок страницы.

    Тэг <asp:Content> определяет имя элемента управления ContentPlaceHolder на главной странице, и атрибут Runat="Server". Данные теги позволяют понять принцип работы мастер-страниц:

  • Мастер-страница содержит один или более элементов управления ContentPlaceHolder, каждый с собственным индивидуальным именем.
  • Когда контент-страница использует мастер-страницу, она должна содержать один или несколько тегов <asp:Content> для каждого элемента управления ContentPlaceHolder в мастер-странице.
  • Когда посетитель запрашивает контент-страницу, ASP.NET сливает ее содержание с каждым элементом управления ContentPlaceHolder в мастер-странице, затем показывает результаты.
  • (рис 9.5) В браузере, контент-страницы и мастер-страницы отображаются слитно

    Заметьте, что контент-страница, которая использует мастер-страницу, не содержит никаких тегов типа <html> </html>, раздела <head>, тега <body> </body> и тега <form> </form>. Все они заимствуются с мастер-страницы.

    К сожалению VWD 2005 EE не имеет никакой команды или мастера, который применяет главную страницу к существующей Web-странице. Однако, это можно сделать вручную, выполнив следующую процедуру:

  • Создайте новую контент-страницу, которая использует нужную вам мастер-страницу
  • Скопируйте содержимое со старой страницы в буфер обмена
  • Вставьте содержание из буфера обмена в новую страницу.
  • Удалите старую контент-страницу, затем переименуйте новую.
  • Если Вы обнаружили, что этот подход не принес желаемого результата, то откройте страницу в редакторе, переключитесь в режим Source и попробуйте другую процедуру:

  • Удалите все строки от тега <html> до начала содержания, которое Вы хотите сохранить. Вы должны удалить по крайней мере тэги <html>, <head>, <body> и <form>.
  • Удалите все строки, что идут после содержания, которое нужно сохранить. То есть, по крайней мере теги <form>, </body> и </html>.
  • Вставьте сохраненное содержание между тегами <asp:Content> и </asp:Content>, удостоверьтесь, что в теге есть код ID=, ContentPlaceHolderlD=, Runat="Server", а значение ContentPlaceHolderlD в контент-странице совпадает с названием элемента управления ContentPlaceHolder в мастер-странице.
  • Убедитесь, что значение MasterPageFile соответствует названию нужной вам мастер-страницы.
  • Проверьте работоспособность полученной страницы.
  • Мастер страницы по существу шаблоны для Web-страниц. Посетители не просматривают их непосредственно. Вместо этого они просматривают контент-страницы, прикрепленные к ним. Это делает сайт более однородным и более простым в сопровождении.

    Тема 2. Использование CSS

    Чтобы определить стиль для определенного элемента страницы, сначала выделите его в Режиме конструктора и затем выполните следующие действия:

  • Выберите пункт Style из меню Format или
  • Выберите признак Style в окне Properties, а затем щелкните на появившейся в той же строке кнопке.
  • После того, как Вы выполните любое из этих действий, VWD2005 EE отобразит диалоговое окно Style Builder, которое показано на рис.9.6.

    (рис 9.6) Это диалоговое окно применяет CSS свойства к элементам страницы или к правилам таблицы стилей

    Свойства CSS сгруппированы в восемь категорий, которые расположены по левому краю диалогового окна. Правая часть диалогового окна меняется в зависимости от выбранной категории. Большинство параметров CSS можно определить интуитивно. Если Вы найдете неизвестный параметр, то можете проконсультироваться со встроенной системой помощи или просмотреть официальную спецификацию CSS на сайте http://www.w3.org/Style/CSS.

    Применение свойств CSS к индивидуальным элементам страницы обеспечивает большую гибкость в оформлении, но не большую однородность. Чем большее количество страниц содержит сайт, тем тяжелее задача сохранения шрифтов и цветов. К счастью, можно создать общедоступный файл таблицы стилей, который решит эту проблему.

    Процедура создания нового файла таблицы стилей состоит в следующем.

  • Выберите New File из меню File или щелкните правой кнопкой мыши по папке в Solution Explorer, и выберите пункт Add New Item.
  • Когда диалоговое окно Add New Item появляется, выберите шаблон Style Sheet, если желаете, измените название файла, которое дается по умолчанию, и затем щелкаете кнопкой Add.
  • Типы Названий Стиля CSS
    Консорциум WWW VWD 2005 EE Применяется к
    Tape Selector Element Name

    Все элементы HTML соответствующего типа. Например, правило стиля, названное td применяется к тегам <td>.

    Class Selector Class Name

    Все элементы, относящиеся к соответствующему классу. Например, правило стиля, названное error, применялось бы к любым тэгам, которые вы поместили в класс error.

    ID selector Element ID

    Все элементы, имеющие соответствующее имя. Например, правило стиля по имени #test будет применяться ко всем элементам, для которых ID= "test".

    В файле таблицы стилей содержатся правила, каждое правило состоит из названия, сопровождаемого списком свойств CSS и значений. Табл.1 показывает типы названий стиля. Есть два способа добавить новое правило стиля к файлу таблицы стилей. Вот они:

  • Напечатать название правила, и пару изогнутых фигурных скобок ( {} ).
  • Выбрать пункт Add Style Rule из меню Styles, что приведет к появлению диалогового окна Add Style Rule, которое показано на рис.9.7
  • (рис 9.7) Это диалоговое окно создает новые правила стиля.

    Если Вы хотите использовать диалоговое окно Add Style Rule, то продолжите следующим образом:

  • Выберите тип названия стиля, которое вам нужно: Element, Class Name, или Element ID.
  • Выберите или напечатайте название
  • Если Вы создаете правило класса, то можете ограничить его применение определенным названием тэга. Например, правило стиля по имени TABLE.test применялось бы только к тэгам, закодированным как <TABLE class = "test">. Чтобы использовать эту особенность:
  • Определите имя класса.
  • Выберите флажок Optional Element.
  • Выберите название тэга из раскрывающегося списка.
  • Щелкните кнопкой, на которой изображена стрелка вправо (>). Это действие добавит новое название тэга к полю Style Rule Hierarchy.
  • Щелкните кнопкой OK, чтобы создать новое правило стиля.
  • Если Вы добавите несколько названий стиля к полю Style Rule Hierarchy, не нажимая кнопку OK, то VWD2005 EE создаст правило, которое будет применяться, только к тем тегам, которые удовлетворяют все этим условиям

    Как только вы создали правило стиля можно добавить к нему свойства, по одному из трех вариантов:

  • печатая их самостоятельно или с помощью IntelliSense.
  • выбрав правило стиля и выбирав Build Style из меню Styles.
  • щелкнув правой кнопкой мыши по стилю и выбирав Build Style из контекстного меню.
  • Рис. 8 показывает, как VWD2005 EE отображает файл таблицы стилей. Слева отображается окно Outline CSS, которое облегчает нахождение и выбор стилей, объявленных в файле.

    (рис 9.8) Таблица стилей

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

  • Откройте Web-страницу, которая будет использовать файл таблицы стилей
  • Затем выполните любое из этих действий:
  • Откройте страницу в режиме Design, затем захватите файл таблицы стилей из окна Solution Explorer и поместите его на вашу страницу.
  • Выберите пункт DOCUMENT в окне Properties, выберите свойство StyleSheet, щелкните на кнопку, появившуюся в строке. Отобразится диалоговое окно, в котором вы сможете выбрать файл таблицы стилей, затем нажимаете OK.
  • Как только файл таблицы стилей будет связан со страницей, правила, заданные в нем будут применены к странице и вступят в силу немедленно.

    Используя таблицы стилей, вы предадите сайту более однородное и профессиональное оформление

    Работая с таблицами стилей (CSS), вы можете задавать правила, которые изменяют свойства элементов на Web-страницах. VWD2005 EE позволяет сформулировать эти правила графически (используя диалоговые окна) или в текстовом режиме (используя IntelliSense ).

    Тема 3. Использование тем

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

  • Откройте Web сайт, для которого хотите создать тему.
  • Щелкните правой кнопкой мыши по папке сайта, выберите Add Folder из контекстного меню, а затем выберите папку Темы из выпадающего подменю. В этом случае:
  • Если сайт еще не содержит папку App_Themes, то VWD2005 EE создаст ее.
  • VWD2005 EE всегда будет создавать подпапку с названием Theme1, которую вы можете переименовать как считаете нужным.
  • Переименуйте подпапку Theme1. Название, которое получит папка, станет названием темы
  • Конечно, пустая папка темы не будет оказывать никакого влияния на ваш сайт. Чтобы задействовать тему, вы должны сначала добавить .skin или .css файлы. (см. рис.9.9)

    (рис 9.9) Для сайта "Зодиак" создано четыре стиля: "Земля", "Вода", "Воздух", "Огонь"

    В ASP.NET 2.0 skin файл определяет визуальные свойства для одного или более видов элементов управления расположенных на страницах вашего сайта. Подпапка темы может содержать как один, так и несколько skin файлов. Если вы разметили в ней несколько файлов, ASP.NET будет читать их все, как будто это один файл. Для создания skin файлов нужно выполнить следующие действия:

  • Щелкните правой кнопкой мыши по подпапке нужной темы, затем выберите Add New Item из контекстного меню.
  • Когда диалоговое окно Add New Item появляется, выберите шаблон Skin File, здесь вы также можете изменить имя файла данное по умолчанию, а затем щелкните кнопкой Add.
  • VWD2005 EE отобразит новый skin файл в редакторе кода.
  • Создайте тэг для каждого элемента управления, к которому вы хотите применить тему, ниже приведены примеры:
    <asp:RadioButtonList runat = "server"/> 
        <asp:DropDownList runat = "server"/> 
        <asp:TextBox runat = "server"/>
  • Эти теги очень напоминают те, что появляются, когда вы добавляете соответствующий элемент управления к Web-странице. Самый простой способ создать skin файл состоит в том, что вы просто копируете нужные теги с Web-страницы и редактируете их.

  • В пределах каждого тэга, добавьте параметры элементов управления и задайте их значения. Если вы забыли, как записать параметр или его значение, откройте WEB страницу в режиме дизайнера, измените соответствующие параметры, а затем переключитесь в режим редактирования кода и скопируйте получившийся код из WEB страницы в skin файл.
  • Когда все сделано, сохраните skin файл, выбрав Save из меню File.
  • Учтите, что skin файл может только изменить отображение элементов Web-страницы, имеющие визуальные свойства, и не может управлять ими.

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

  • папка App_Themes/вода, содержит файл вода.css.
  • папка App_Themes/земля, содержит файл земля.css
  • Результат применения темы "земля" показан на рис.9.10, а темы "вода" на рис.9.11

    (рис 9.10) Эта страница посвящена знаку зодиака "Телец" и использует тему "Земля"(рис 9.11) Эта страница посвящена знаку зодиака "Рак" и использует тему "Вода"

    Вы можете применить темы к индивидуальным Web-страницам или ко всему сайту, Чтобы применить тему к единственной web-странице, сделайте следующее:

  • Откройте страницу в VWD2005 EE
  • Выберите DOCUMENT в окне Properties
  • Найдите свойство Theme, а затем выберите нужную тему из раскрывающегося списка.
  • Чтобы определить тему, которая обращается ко всему Web-сайту, Вы должны изменить файл конфигурации сайта ( web.config ):

  • Откройте файл web.config в VWD2005 EE.
  • Найдите пару тегов <system.web> и </system.web>. Если ваш файл web.config не содержит этих тегов, то создайте их.
  • Теперь добавьте тег, задающий тему (он выделен зеленым цветом), как показано ниже.
    <system.web>
        <pages theme = "земля"/>
    </system.web>
  • (рис 9.12) Эта страница посвящена знаку зодиака "Телец" и использует тему "Земля", с помощью которой произведена замена рисунка.

    Рис. 9.10 и рис.9.12 показывают одну и ту же страницу сайта "Зодиак". Но она выглядит по-разному, так как во втором случае в skin файл темы "земля" была добавлена строка следующего вида:

    <asp:Image runat="server" ImageUrl="~/img/телец01.jpg" BorderColor="Red" BorderStyle="Dotted" BorderWidth="2px" />.

    Тема 4. Создание карты сайта

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

  • Файл Web.sitemap, который задает логическую структуру сайта.
  • Элемент управления Menu, который читает файл Web.sitemap и отображает структуру сайта в виде раскрывающегося меню.
  • Элемент управления TreeView, который читает файл Web.sitemap и отображает структуру в виде древовидного списка.
  • Элемент управления SiteMapDataSource, который связывает файл карты сайта ( Web.sitemap ) и элементы управления для ее отображения ( TreeView или Menu ).
  • Совместное применение этих компонент позволяет быстро и просто организовать систему навигации на сайте и поддерживать ее в постоянном актуальном состоянии.

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

  • Откройте сайт, и щелкните правой кнопкой мыши по папке сайта, в появившемся меню выберите пункт Add New Item.
  • Когда диалоговое окно Add New Item появится, выберите шаблон Site Map.
  • Если это первый файл содержащий карту сайта, лучше согласитесь с его именем по умолчанию Web.sitemap. В противном случае задайте свое.
  • Щелкните кнопкой Add.
  • По умолчанию, эта процедура создает файл по имени Web.sitemap, расположенный в папке сайта. Файл карты сайта представляет собой XML файл, поэтому VWD2005 EE отображает его в текстовом режиме. Только что созданный файл Web.sitemap выглядит следующим образом:

    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
       <siteMapNode url="" title=""  description="">
          <siteMapNode url="" title=""  description="" />
          <siteMapNode url="" title=""  description="" />
       </siteMapNode>
    </siteMap>

    Формат этого файла достаточно прост:

  • Тэг <?xml> в первой строке, определяет используемую версию XML, и его менять не нужно.
  • Тэг <siteMap> во второй строке и его окончание </siteMap> в седьмой строке отмечает начало и конец XML документа, также не изменяйте эти тэги.
  • Каждый тэг <siteMap> должен содержать один и только один тэг верхнего уровня <siteMapNode>. Он обычно определяет стартовую страницу в карте сайта. В примере, это - тэг <siteMapNode> в третьей строке, а его окончание </siteMapNode> в шестой строке.
  • Между тегами верхнего уровня <siteMapNode> и </siteMapNode> можно добавить любое число дополнительных тегов <siteMapNode>. Каждый из них станет подуровнем в раскрывающемся меню или древовидном списке. Эти теги расположены в строках четыре и пять.
  • В пределах тегов второго уровня <siteMapNode> можно добавить любое число тегов <siteMapNode> третьего уровня и т.д.
  • Например, для сайта "Зодиак" предлагается следующая схема навигации см. рис.9.13, чтобы ее задать нужно в файле Web.sitemap создать структуру, представленную на рис.9.14

    (рис 9.13) Карта сайта "Зодиак".(рис 9.14) Код задающий карту сайта "Зодиак"

    У тега <siteMapNode> есть три признака, которые можно менять:

  • URL - абсолютная или относительная ссылка на страницу, куда будет совершен переход при выборе ссылки в меню или древовидном списке. Не определяйте то же самое значение URL дважды в одном файле карты сайта, иначе получите сообщение об ошибке. Чтобы создавать <siteMapNode>, который не связан со страницей, оставьте пробел в качестве значения URL. Это полезно для пунктов меню, которые представляют группу страниц, но сами ни на какие страницы не ссылаются.
  • TITLE название ссылки, которое появится как видимый текст в меню, или древовидном списке.
  • DESCRIPTION более длинное название ссылки, которое появится как текст подсказки, когда мышь будет находиться на ссылке. Этот признак является дополнительным, и заполнять его не обязательно.
  • Описанную в файле Web.sitemap карту сайта можно использовать для создания выпадающего или раскрывающегося меню, следующим способом:

  • Откройте мастер страницу или любую другую страницу, которая будет отображать меню.
  • В панели Toolbox откройте группу Data и перетащите элемент SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4.
  • В панели Toolbox, откройте группу Navigation и перетащите элемент Menu на открытую страницу, в нужное вам место.
  • VWD2005 EE отобразит меню задач как показано на рис.9.15. Откройте список Choose Data Source и выберите название (рис 9.15) Связывание меню и карты сайта
  • Сохраните страницу, затем можете просмотреть ее.(рис.9.16)
  • (рис 9.16) Пример раскрывающегося меню

    Чтобы настроить конфигурацию меню, выделите его, а затем определите нужные значения в окне Properties. Покажем, как установить свойство Orientation. Мы можем выбрать между значениями Horizontal и Vertical:

  • Horizontal. Горизонтальные пункты меню Top-level появятся слева направо. Результат - система раскрывающегося меню.
  • Vertical. Вертикальные пункты меню Top-level появятся сверху вниз. Результат - выпадающая система меню.
  • Файл карты сайта можно также использовать для создания навигации аналогичной Windows Explorer, для этого нужно воспользоваться элементом TreeView из группы Navigation. Тогда посетители сайта смогут использовать значки плюс (+) и минус (-), чтобы развернуть или свернуть любые группы элементов меню. Чтобы создать меню-список нужно выполнить следующие действия:

  • Откройте мастер страницу или любую другую страницу, которая будет отображать меню-список.
  • В панели Toolbox откройте группу Data и перетащите элемент SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4.
  • В панели Toolbox, откройте группу Navigation и перетащите элемент TreeView на открытую страницу, в нужное вам место.
  • VWD2005 EE отобразит меню задач, в котором нужно открыть список Choose Data Source и выбрать название SiteMapDataSource1, которое было добавлено на шаге 2.
  • Сохраните страницу, затем можете просмотреть ее (рис.9.17).
  • (рис 9.17) Пример меню-списка

    Наконец, файл карты сайта можно использовать для создания панели, которая показывает путь от главной страницы к текущей странице с помощью элемента управления SiteMapPath. На рис.9.18 элемент управления SiteMapPath появляется в низу страницы. Вы можете добавить элемент SiteMapPath к любой .aspx Web-странице, или мастер странице. Для этого достаточно в панели Toolbox открыть группу Navigation и перетащить элемент SiteMapPath на нужную страницу, открытую в режиме конструктора

    (рис 9.18) Пример использования SiteMapPath

    В отличие от элементов управления Menu и TreeView, элемент управления SiteMapPath не получает данные от SiteMapDataSource, а всегда использует файл карты сайта по умолчанию: Web.sitemap. Это может служить серьезным основанием, чтобы не изменять имя файла карты сайта данное по умолчанию.

    Таким образом, мы рассмотрели четыре элемента управления, которые помогают организовывать гиперссылки в пределах сайта. Первый, SiteMapDataSource, обеспечивает доступ к иерархическому списку связей, который закодирован в файле web.sitemap. Этот элемент не виден в режиме просмотра и обеспечивает данными элементы управления Menu и TreeView.

    Элемент управления Menu отображает в зависимости от настроек раскрывающееся или выпадающее меню, а TreeView отображает те же самые данные в виде иерархического списка.

    Четвертый элемент управления, SiteMapPath, находит текущую страницу в файле web.sitemap и затем отображает путь от текущей страницы к домашней странице сайта.

    Вернуться к учебному плану