Спонсор: Microsoft
Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5827 / 513 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 13:

Стили элементов управления. Темы и шкурки

< Лекция 12 || Лекция 13: 1234 || Лекция 14 >
Аннотация: Стили элементов управления. Внешние файлы стиля. Темы и шкурки.

"Во всех пустяковых делах важен стиль.

Во всех серьезных делах — тоже."

Оскар Уайльд

Внешний вид сайта очень важен. А он состоит из внешнего вида отдельных элементов. Но нам пришлось бы тяжело, если бы не было иного способа добиться единого оформления страниц, кроме как назначая свойства, связанные с внешним видом, для всех элементов по отдельности. Но, к счастью, создатели ASP .NET позаботились об этом, создав функционал тем.

Стили элементов управления

По умолчанию стиль элементов ASP .NET очень простой — черные буквы на белом фоне. Чтобы добиться красивых дизайнерских эффектов, можно использовать те же способы, что и при дизайне HTML-страниц. Например, форматировать текст с помощью тегов <i>, <b> и так далее. Но так будет трудно сохранить единое стилевое решение на всех страницах большого сайта. Настройка шрифтов с помощью тега <font> тоже считается устаревшей. Повсеместно применяются CSS (каскадные таблицы стилей).

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам web-страницы для управления их видом и положением.

CSS — важная составная часть тем, которые мы рассмотрим далее.

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Если определить класс в заголовке через тег <style> или внешний файл, то стиль элемента управления легко можно поменять через свойство CssClass.

В Visual Studio 2005 есть Style Builder, с помощью которого можно легко создать желаемый стиль. С ним удобно работать даже новичкам.

Стили можно разрабатывать как для конкретного элемента, так и создавать для последующего использования. В режиме Design выберите элемент управления и из контекстного меню выберите Style.


Рис. 13.1.

Перейдите в режим исходного текста и увидите, что все изменения зафиксированы в атрибуте style. Например:

style="color: navy; font-style: italic; cursor: crosshair;"

Тут определено не только, как выглядит элемент управления, но и форма курсора мыши, которое он принимает, когда находится над элементом. Это свойство можно изменить на вкладке Others.

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

<asp:BulletedList ID="BulletedList1" runat="server" 
DataSourceID="SiteMapDataSource1"
        DataTextField="Title" DataValueField="Url" Style="back-
ground-color:Cornsilk ; text-align: right;" 
DisplayMode="HyperLink" CssClass="bulletedlist" 
BackColor="Fuchsia" ForeColor="#804040">
      </asp:BulletedList>

Цвет фона списка — Cornsilk, а цвет текста определяется свойством ForeColor, так как в стиле он не определен.

Но если настраивать все элементы индивидуально и все по-разному, может получиться стилевой разнобой, похожий на сайт Васи Пупкина. Правильнее всего разработать единый стиль, а индивидуальные настройки применять в отдельных случаях.

< Лекция 12 || Лекция 13: 1234 || Лекция 14 >
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319

Анна Малова
Анна Малова
Азербайджан, Баку
Дмитрий Крюков
Дмитрий Крюков
Россия, Москва