Когда мы говорили о дизайне, то не раз упоминали шаблоны страниц как мощное средство, помогающее быстро и качественно оформить внешний вид сайта, а также впоследствии легко изменять его. VWD-2005 EE предоставляет в распоряжение web разработчика мастер-страницы, таблицы стилей и темы. Их использование позволяет быстро создать заготовку типового сайта.
Разработчики WEB-сайтов, используя мастер-страницы, таблицы стилей и темы конструируют собственные шаблоны для придания своим сайтам "фирменного" вида.
Как правило, при построении шаблонов активно используются таблицы, потому, что с их помощью легко выполнить:
Изучив данный модуль, вы сможете:
Мастер-страницы, служат шаблоном для отображения, других страниц. Для этого на мастер-странице выделяются области, не подлежащие изменению, и области где будет отображаться информация связанных страниц (страниц контента)
Контент-страница - любая страница, которая использует мастер страницу. Каждый раз, когда посетитель запрашивает контент-страницу, ASP.NET загружает мастер-страницу, производит слияние с контент-страницей и посылает объединенный результат пользователю. Слияние мастер-страницы и контент-страницы на лету имеет два важных последствия.
Чтобы создать сайт, использующий мастер страницы нужно выполнить следующие действия:
MasterPage .master.
(рис 9.1) Новая мастер страница содержит только один элемент: управление ContentPlaceHolderСозданная мастер-страница, доступна для редактирования за исключением одного элемента управления ContentPlaceHolder, который создается на ней по умолчанию. Этот элемент резервирует пространство для содержимого контент-страницы (см. рис.9.1). Редактирование мастер-страницы такое же, как и редактирование обычной ASP страницы. Поэтому к ней можно применить все элементы управления, рассмотренные ранее. Рис. 9.2 показывает отредактированную мастер-страницу.
(рис 9.2) Отредактированная мастер страницаСамый удобный способ использования мастер-страницы состоит в том, чтобы привязать ее, к новой странице во время ее создания, что может быть выполнено следующим образом.
Когда Вы видите контент-страницу в режиме конструктора, части, которые добавились из мастер страницы, будут недоступны для редактирования. Чтобы изменить что-нибудь в них, вам придется открыть и отредактировать мастер-страницу (см. рис.9.4)
(рис 9.4) Контент-страница с присоединенным шаблоном.Рис.4 показывает контент-страницу, которая использует присоединенную мастер страницу. Кроме того, контент-страница отображает некоторое собственное содержание. Чтобы создать такую страницу выполните следующие действия:
Бык.aspx. На этапе создания подключите мастер-страницу ( MasterPage .master ), так как это было описано выше.Контент-страницы, которые используют мастер-страницы первоначально, содержат очень небольшой исходный текст. Вот типичный пример:
<%@ 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 в мастер-странице.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-страниц. Посетители не просматривают их непосредственно. Вместо этого они просматривают контент-страницы, прикрепленные к ним. Это делает сайт более однородным и более простым в сопровождении.
Чтобы определить стиль для определенного элемента страницы, сначала выделите его в Режиме конструктора и затем выполните следующие действия:
После того, как Вы выполните любое из этих действий, VWD2005 EE отобразит диалоговое окно Style Builder, которое показано на рис.9.6.
(рис 9.6) Это диалоговое окно применяет CSS свойства к элементам страницы или к правилам таблицы стилейСвойства CSS сгруппированы в восемь категорий, которые расположены по левому краю диалогового окна. Правая часть диалогового окна меняется в зависимости от выбранной категории. Большинство параметров CSS можно определить интуитивно. Если Вы найдете неизвестный параметр, то можете проконсультироваться со встроенной системой помощи или просмотреть официальную
Применение свойств CSS к индивидуальным элементам страницы обеспечивает большую гибкость в оформлении, но не большую однородность. Чем большее количество страниц содержит сайт, тем тяжелее задача сохранения шрифтов и цветов. К счастью, можно создать общедоступный файл таблицы стилей, который решит эту проблему.
Процедура создания нового файла таблицы стилей состоит в следующем.
| Консорциум WWW | VWD 2005 EE | Применяется к |
|---|---|---|
|
Element Name |
Все элементы HTML соответствующего типа. Например, правило стиля, названное |
Class Selector |
Class Name |
Все элементы, относящиеся к соответствующему классу. Например, правило стиля, названное error, применялось бы к любым тэгам, которые вы поместили в класс error. |
ID selector |
Element ID |
Все элементы, имеющие соответствующее имя. Например, правило стиля по имени |
В файле таблицы стилей содержатся правила, каждое правило состоит из названия, сопровождаемого списком свойств CSS и значений. Табл.1 показывает типы названий стиля. Есть два способа добавить новое правило стиля к файлу таблицы стилей. Вот они:
{} ).
(рис 9.7) Это диалоговое окно создает новые правила стиля.Если Вы хотите использовать диалоговое окно Add Style Rule, то продолжите следующим образом:
Element, Class Name, или Element ID.TABLE.test применялось бы только к тэгам, закодированным как <TABLE class = "test">. Чтобы использовать эту особенность:Если Вы добавите несколько названий стиля к полю Style Rule
Как только вы создали правило стиля можно добавить к нему свойства, по одному из трех вариантов:
Рис. 8 показывает, как VWD2005 EE отображает файл таблицы стилей. Слева отображается окно Outline CSS, которое облегчает нахождение и выбор стилей, объявленных в файле.
(рис 9.8) Таблица стилейЧтобы использовать созданный файл стилей нужно связать его с WEB-страницей с помощью следующих действий
Как только файл таблицы стилей будет связан со страницей, правила, заданные в нем будут применены к странице и вступят в силу немедленно.
Работая с таблицами стилей (CSS), вы можете задавать правила, которые изменяют свойства элементов на Web-страницах. VWD2005 EE позволяет сформулировать эти правила графически (используя диалоговые окна) или в текстовом режиме (используя IntelliSense ).
Как и таблица стилей, тема не имеет графического представления, поэтому работа с ней ведется в редакторе текста. Чтобы создать новую тему необходимо выполнить следующие действия:
Theme1, которую вы можете переименовать как считаете нужным.Theme1. Название, которое получит папка, станет названием темыКонечно, пустая папка темы не будет оказывать никакого влияния на ваш сайт. Чтобы задействовать тему, вы должны сначала добавить . или .css файлы. (см. рис.9.9)
(рис 9.9) Для сайта "Зодиак" создано четыре стиля: "Земля", "Вода", "Воздух", "Огонь"В ASP.NET 2.0 файл определяет визуальные свойства для одного или более видов элементов управления расположенных на страницах вашего сайта. Подпапка темы может содержать как один, так и несколько файлов. Если вы разметили в ней несколько файлов, ASP.NET будет читать их все, как будто это один файл. Для создания файлов нужно выполнить следующие действия:
skin файл в редакторе кода.<asp:RadioButtonList runat = "server"/>
<asp:DropDownList runat = "server"/>
<asp:TextBox runat = "server"/>
Эти теги очень напоминают те, что появляются, когда вы добавляете соответствующий элемент управления к Web-странице. Самый простой способ создать файл состоит в том, что вы просто копируете нужные теги с Web-страницы и редактируете их.
skin файл.skin файл, выбрав Save из меню File.Учтите, что файл может только изменить отображение элементов Web-страницы, имеющие визуальные свойства, и не может управлять ими.
Теперь, когда у вас появились папки с темами, файлы таблицы стилей можно хранить не отдельно, а в подпапках соответствующих тем. Тогда темы автоматически будут связывать хранимые в своих подпапках таблицы стилей с любыми страницами, которые используют данную тему. В нашем примере есть тема "земля" и тема "вода", которые располагаются в соответствующих папках:
App_Themes/вода, содержит файл вода.css.App_Themes/земля, содержит файл земля.cssРезультат применения темы "земля" показан на рис.9.10, а темы "вода" на рис.9.11
(рис 9.10) Эта страница посвящена знаку зодиака "Телец" и использует тему "Земля"
(рис 9.11) Эта страница посвящена знаку зодиака "Рак" и использует тему "Вода"Вы можете применить темы к индивидуальным Web-страницам или ко всему сайту, Чтобы применить тему к единственной web-странице, сделайте следующее:
DOCUMENT в окне PropertiesTheme, а затем выберите нужную тему из раскрывающегося списка.Чтобы определить тему, которая обращается ко всему 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 показывают одну и ту же страницу сайта "Зодиак". Но она выглядит по-разному, так как во втором случае в файл темы "земля" была добавлена строка следующего вида:
<asp:Image runat="server" ImageUrl="~/img/телец01.jpg" BorderColor="Red" BorderStyle="Dotted" BorderWidth="2px" />.
Каждый Web-сайт нуждается в системе навигации, которая позволяет посетителям получать быстрый доступ к информации, которую они ищут. При разработке большого сайта важно сохранить ясность и понятность системы навигации, поскольку с течением времени сайт будет изменяться и обновляться. С этой задачей помогут справиться следующие четыре компонента:
Web.sitemap, который задает логическую структуру сайта.Menu, который читает файл Web.sitemap и отображает структуру сайта в виде раскрывающегося меню.TreeView, который читает файл Web.sitemap и отображает структуру в виде древовидного списка.SiteMapDataSource , который связывает файл карты сайта ( Web.sitemap ) и элементы управления для ее отображения ( TreeView или Menu ).Совместное применение этих компонент позволяет быстро и просто организовать систему навигации на сайте и поддерживать ее в постоянном актуальном состоянии.
Построение системы навигации сайта проще всего начать с создания файла карты сайта, для этого сделайте следующее:
Web.sitemap. В противном случае задайте свое.По умолчанию, эта процедура создает файл по имени 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 карту сайта можно использовать для создания выпадающего или раскрывающегося меню, следующим способом:
SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4.Menu на открытую страницу, в нужное вам место.
(рис 9.16) Пример раскрывающегося менюЧтобы настроить конфигурацию меню, выделите его, а затем определите нужные значения в окне Properties. Покажем, как установить свойство Orientation. Мы можем выбрать между значениями Horizontal и Vertical:
Horizontal. Горизонтальные пункты меню Top-level появятся слева направо. Результат - система раскрывающегося меню.Vertical. Вертикальные пункты меню Top-level появятся сверху вниз. Результат - выпадающая система меню.Файл карты сайта можно также использовать для создания навигации аналогичной Windows Explorer, для этого нужно воспользоваться элементом TreeView из группы Navigation. Тогда посетители сайта смогут использовать значки плюс (+) и минус (-), чтобы развернуть или свернуть любые группы элементов меню. Чтобы создать меню-список нужно выполнить следующие действия:
SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4.TreeView на открытую страницу, в нужное вам место.SiteMapDataSource1, которое было добавлено на шаге 2.
(рис 9.17) Пример меню-спискаНаконец, файл карты сайта можно использовать для создания панели, которая показывает путь от главной страницы к текущей странице с помощью элемента управления SiteMapPath. На рис.9.18 элемент управления SiteMapPath появляется в низу страницы. Вы можете добавить элемент SiteMapPath к любой .aspx Web-странице, или мастер странице. Для этого достаточно в панели Toolbox открыть группу Navigation и перетащить элемент SiteMapPath на нужную страницу, открытую в режиме конструктора
(рис 9.18) Пример использования SiteMapPathВ отличие от элементов управления Menu и TreeView, элемент управления SiteMapPath не получает данные от , а всегда использует файл карты сайта по умолчанию: Web.sitemap. Это может служить серьезным основанием, чтобы не изменять имя файла карты сайта данное по умолчанию.
Таким образом, мы рассмотрели четыре элемента управления, которые помогают организовывать гиперссылки в пределах сайта. Первый, , обеспечивает доступ к иерархическому списку связей, который закодирован в файле web.sitemap. Этот элемент не виден в режиме просмотра и обеспечивает данными элементы управления Menu и TreeView.
Элемент управления Menu отображает в зависимости от настроек раскрывающееся или выпадающее меню, а TreeView отображает те же самые данные в виде иерархического списка.
Четвертый элемент управления, SiteMapPath, находит текущую страницу в файле web.sitemap и затем отображает путь от текущей страницы к домашней странице сайта.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.