Разработка логической структуры страниц Web-приложений в Microsoft Visual Studio 2005. Шаблоны страниц
Цель работы: изучить особенности построения дизайна страниц WEB-приложения в Microsoft Visual Studio 2005 и получить практические навыки создания:
– Мастер-страницы и Контент-страницы;
– Таблиц стилей и применения их к Web-страницам;
– Тем и добавления в них стилей;
– применения Тем к Web-страницам.
Постановка задания: создать в Microsoft Visual Studio 2005 Web-приложение «Проект Гороскоп», посвященное западному и восточному гороскопам, используя пошаговую инструкцию по созданию такой системы, приведенную в теоретической части к данной лабораторной работе.
Теоретические сведения:
Шаблоны страниц – это мощное средство, помогающее быстро и качественно оформить внешний вид Интернет-системы, которое впоследствии возможно легко изменять.
Microsoft Visual Studio 2005 предоставляет в распоряжение разработчика Web-систем такие средства как:
– Мастер-страницы;
– Таблицы стилей;
– Темы.
Их использование позволяет быстро создать макет разрабатываемых Web-страниц в рамках создания любой Интернет-системы.
Как правило, при построении шаблонов активно используются таблицы, потому, что с их помощью легко выполнить: выравнивание данных, путем вставки в ячейки таблицы; распределение текста и графики по разным колонкам; создание обрамления вокруг текста или графических изображений; расположение текста по контуру графического изображения; создание цветного фона для текстового фрагмента или отдельного изображения;
Создание и использование Мастер-страниц
Мастер-страницы, служат шаблоном для отображения, других страниц. Для этого на Мастер-странице выделяются области, не подлежащие изменению, и области где будет отображаться информация связанных страниц (страниц Контента).
Контент-страница – любая страница, которая использует мастер страницу. Каждый раз, когда пользователь запрашивает Контент-страницу, ASP.NET загружает Мастер-страницу, производит слияние с Контент-страницей и посылает объединенный результат пользователю. Такой механизм слияния Мастер-страницы и Контент-страницы имеет два важных преимущества:
– пользователь всегда получает текущие версии шаблона и его содержания;
– полученная после слияния страница обладает всеми возможностями обычной ASP.NET страницы.
Например, Мастер-страница, как и Контент-страница может содержать любые элементы управления, или фрагменты кода. Целесообразно разрабатывать Мастер-страницу на этапе проектирования Web-приложения.
Приступая к созданию Web-приложения, использующего Мастер-страницу, нужно выполнить следующие действия:
– создать новый Web-site;
Рисунок 1 – Диалоговое окно создания нового Web-сайта ASP.NET
– Удалить любые Web-страницы, которые содержит сайт. Например, удалите страницу default.aspx, которая создается по умолчанию;
– В окне Solution Explorer, щелкните правой кнопкой мыши по папке сайта и выберите Add New Item из контекстного меню. Когда диалоговое окно Add New Item появится, выполните следующие действия:
– выберите из всех элементов списка Master Page;
– оставьте название страницы по умолчанию MasterPage.master;
– выберите язык программирования (по умолчанию C#).
– выберите пункт Place code in separate file;
– нажмите Add, чтобы создать Мастер-страницу.
Рисунок 2. – Новая мастер страница содержит только один элемент управления ContentPlaceHolder
Созданная Мастер-страница, доступна для редактирования за исключением одного элемента управления ContentPlaceHolder, который создается на ней по умолчанию. Этот элемент резервирует пространство для содержимого Контент-страницы (рис.2). Редактирование Мастер-страницы такое же, как и редактирование обычной ASP-страницы. Поэтому к ней можно применить все элементы управления, рассмотренные ранее. На рисунке 3 представлена отредактированная Мастер-страница.
Рисунок 3 – Отредактированная Мастер-страница
Удобство и преимущество использования Мастер-страницы состоит в том, чтобы привязать ее, к новой странице во время ее создания, что может быть выполнено следующим образом:
– откройте Web-site, который содержит Мастер-страницу.
– в окне Solution Explorer, щелкните правой кнопкой мыши по папке, где необходимо разместить новую Контент-страницу, затем выберите Add New Item из контекстного меню.
Когда диалоговое окно Add New Item появится, необходимо выполнить следующие действия:
– выбрать шаблон документа: Web Form.
– выбрать пункт Select Master Page.
– щелкнуть на кнопку Add, в диалоговом окне Master Page, выбрать Мастер-страницу (рис.4). Чтобы создать страницу, щелкните кнопкой OK.
Рисунок 4 – Диалоговое окно выбора Мастер-страницы
При просмотре Контент-страницы в режиме конструктора, части, которые добавились из Мастер-страницы, будут недоступны для редактирования. Чтобы изменить что-нибудь в них, необходимо открыть и отредактировать Мастер-страницу (см. рис.5)
Рисунок 5 – Контент-страница с присоединенным шаблоном
На Рисунке 5 отображена Контент-страница, которая использует присоединенную Мастер-страницу. Кроме того, Контент-страница отображает некоторое собственное содержание. Чтобы создать такую страницу необходимо выполнить следующие действия:
– создать 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 в Мастер-странице, затем отображает результаты.
Рисунок 6 – В браузере, Контент-страницы и Мастер-страницы отображаются слитно
Заметьте, что Контент-страница, которая использует Мастер-страницу, не содержит никаких тегов типа <html> </html>, раздела <head>, тега <body> </body> и тега <form> </form>. Все они заимствуются с Мастер-страницы.
К сожалению Microsoft Visual Studio 2005 не имеет никакой команды или мастера, который применяет главную страницу к существующей Web-странице. Однако, это можно сделать, выполнив следующие действия:
– создать новую Контент-страницу, которая использует необходимую Мастер-страницу;
– скопировать содержимое со старой страницы в буфер обмена;
– вставить содержание из буфера обмена в новую страницу.
– удалить старую Контент-страницу, затем переименовав новую.
Если этот подход не принес желаемого результата, то возможен второй способ, для этого необходимо открыть страницу в редакторе, переключиться в режим Source и выполнить следующие действия:
– удалить все строки от тега <html> до начала содержания и после содержания , которое необходимо сохранить. (тэги <html></html>, <head>, <body> </body> и <form> </form>).
– вставить сохраненное содержание между тегами <asp:Content> и </asp:Content>, проверив, что в теге есть код ID=, ContentPlaceHolderlD=, Runat="Server", а значение ContentPlaceHolderlD в Контент-странице совпадает с названием элемента управления ContentPlaceHolder в Мастер-странице.
Значение MasterPageFile должно соответствовать названию нужной Мастер-страницы.
Мастер-страницы по существу является шаблоном для Web-страниц. Пользователи не просматривают их непосредственно. Вместо этого они просматривают Контент-страницы, прикрепленные к ним. Это делает Web-приложения более однородными и более простыми в сопровождении.
Использование CSS
Чтобы определить Стиль для определенного элемента страницы, сначала необходимо выделить его в Режиме конструктора и затем выполните следующие действия:
– выбрать пункт Style из меню Format или выбрать признак Style в окне Properties;
– щелкнуть на появившейся в той же строке кнопке. После чего Microsoft Visual Studio 2005 отобразит диалоговое окно Style Builder, которое показано на рисунке 7.
Свойства CSS сгруппированы в восемь категорий, которые расположены по левому краю диалогового окна. Правая часть диалогового окна меняется в зависимости от выбранной категории. Большинство параметров CSS можно определить интуитивно. Кроме того реализована возможность обращения к встроенной системе помощи или просмотреть официальную спецификацию CSS на сайте http://www.w3.org/Style/CSS.
Применение свойств CSS к индивидуальным элементам страницы обеспечивает большую гибкость в оформлении, но не большую однородность. Чем большее количество страниц содержит Web-приложение, тем тяжелее задача сохранения шрифтов и цветов. К счастью, можно создать общедоступный файл таблицы стилей, который решит эту проблему.
Рисунок 7 – Диалоговое окно Style Builder применяет CSS свойства к элементам страницы или к правилам таблицы стилей
Процедура создания нового файла таблицы стилей состоит в следующем:
– выбрать New File из меню File или щелкнуть правой кнопкой мыши по папке в Solution Explorer, выбрать пункт Add New Item.
– в диалоговом окне Add New Item выбрать шаблон Style Sheet, если необходимо, то возможно изменить название файла, которое дается по умолчанию, и затем щелкнуть кнопкой Add.
Таблица №1– Типы Названий Стиля CSS
| Консорциум WWW | VS 2005 | Применяется к |
| Tape Selector | Element Name | Все элементы HTML соответствующего типа. Например, правило стиля, названное td применяется к тегам <td>. |
| Class Selector | Class Name | Все элементы, относящиеся к соответствующему классу. Например, правило стиля, названное error, применялось бы к любым тэгам, которые вы поместили в класс error. |
| ID selector | Element ID | Все элементы, имеющие соответствующее имя. Например, правило стиля по имени #test будет применяться ко всем элементам, для которых ID= "test". |
В файле таблицы стилей содержатся правила, каждое правило состоит из названия, сопровождаемого списком свойств CSS и значений (табл.1). В таблице 1 приведены типы названий стиля.
Есть два способа добавить новое правило стиля к файлу таблицы стилей. Вот они:
– напечатать название правила, и пару изогнутых фигурных скобок ({}).
– выбрать пункт Add Style Rule из меню Styles, что приведет к появлению диалогового окна Add Style Rule, которое показано на рисунке 8
Рисунок 8 – Диалоговое окно Add Style Rule создает новые правила стиля
В диалоговом окне Add Style Rule, необходимо выбрать тип названия стиля, которое нужно применить: Element, Class Name, или Element ID. Выберите или напечатайте название.
Если нужно создать правило класса, то можно ограничить его применение определенным названием тэга. Например, правило стиля по имени TABLE.test применялось бы только к тэгам, закодированным как <TABLE class = "test">. Чтобы использовать эту особенность:
Для определения имени класса необходимо выполнить следующие действия:
– выбрать пункт Optional Element;
– выбрать название тэга из раскрывающегося списка;
– щелкнуть кнопкой, на которой изображена стрелка вправо (>). Это действие добавит новое название тэга к полю Style Rule Hierarchy.
– щелкнуть кнопкой OK, чтобы создать новое правило стиля.
Если необходимо добавить несколько названий стиля к полю Style Rule Hierarchy, не нажимая кнопку OK, то Microsoft Visual Studio 2005 создаст правило, которое будет применяться, только к тем тегам, которые удовлетворяют все этим условиям.
Когда создано правило стиля можно добавить к нему свойства, по одному из трех вариантов:
– печатая их самостоятельно или с помощью IntelliSense.
– выбрав правило стиля и пункт Build Style из меню Styles.
– щелкнув правой кнопкой мыши по стилю и выбрав Build Style из контекстного меню.
На рисунке 9 представлено, как Microsoft Visual Studio 2005 отображает файл таблицы стилей. Слева отображается окно Outline CSS, которое облегчает нахождение и выбор стилей, объявленных в файле.
Чтобы использовать созданный файл стилей нужно связать его с WEB-страницей с помощью следующих действий:
– открыть Web-страницу, которая будет использовать файл таблицы стилей, затем выполнить любое из этих действий:
– открыть страницу в режиме Design, затем переместить файл таблицы стилей из окна Solution Explorer в выбранную Web-страницу.
– выбрать пункт DOCUMENT в окне Properties, выбрать свойство StyleSheet. Отобразится диалоговое окно, в котором нужно выбрать файл таблицы стилей.
Рисунок 9 – Таблица стилей
Как только файл таблицы стилей будет связан со страницей, правила, заданные в нем будут применены к странице и вступят в силу немедленно.
Используя таблицы стилей, Web-приложение приобретает более однородное и профессиональное оформление.
Работая с таблицами стилей (CSS), возможно создавать правила, которые изменяют свойства элементов на Web-страницах. Microsoft Visual Studio 2005 позволяет сформулировать эти правила графически (используя диалоговые окна) или в текстовом режиме (используя IntelliSense).
Использование тем
Как и таблица стилей, Тема не имеет графического представления, поэтому работа с ней ведется в редакторе текста. Чтобы создать новую Тему необходимо выполнить следующие действия:
– открыть Web Site, для которого необходимо создать тему.
– щелкнуть правой кнопкой мыши по папке Web Site, выбрав Add Folder из контекстного меню, затем выберите папку Темы из выпадающего подменю. В этом случае, если Site еще не содержит папку App_Themes, то Microsoft Visual Studio 2005 создаст ее, будет создана подпапка с названием Theme1, которую можно переименовать.
Переименуйте подпапку Theme1. Название, которое получит папка, станет названием Темы. Конечно, пустая папка темы не будет оказывать никакого влияния на дизайн Web-приложения. Чтобы задействовать Тему, необходимо сначала добавить .skin или .css файлы. (рис.10)
Рисунок 10 – Для сайта "Зодиак" создано четыре стиля: "Земля", "Вода", "Воздух", "Огонь"
В ASP.NET 2.0 .skin файл определяет визуальные свойства для одного или более видов элементов управления расположенных на страницах вашего приложения. Подпапка Темы может содержать как один, так и несколько .skin файлов. Если размечено несколько файлов, то ASP.NET будет читать их все, как будто это один файл. Для создания .skin файлов нужно выполнить следующие действия:
– щелкнуть правой кнопкой мыши по подпапке нужной Темы, затем выберите Add New Item из контекстного меню.
– в диалоговом окне Add New Item выбрать шаблон Skin File, здесь также можно изменить имя файла данное по умолчанию, а затем щелкнуть кнопкой Add. Microsoft Visual Studio 2005 отобразит новый skin файл в редакторе кода.
– создать тэг для каждого элемента управления, к которому необходимо применить Тему.
Например:
<asp:RadioButtonList runat = "server"/>
<asp:DropDownList runat = "server"/>
<asp:TextBox runat = "server"/>
Эти теги очень напоминают те, что появляются, когда добавляется соответствующий элемент управления к Web-странице. Самый простой способ создать skin файл состоит в том, что произвести копирование нужных тегов с Web-страницы и редактировать их.
В пределах каждого тэга, возможно добавление параметров элементов управления и задавать их значения. Когда редактирование окончено, необходимо сохранить skin файл, выбрав Save из меню File.
Skin файл может только изменить отображение элементов Web-страницы, имеющие визуальные свойства, и не может управлять ими.
Теперь, когда появились папки с Темами, файлы таблицы стилей можно хранить не отдельно, а в подпапках соответствующих Тем. Тогда темы автоматически будут связывать хранимые в своих подпапках таблицы стилей с любыми страницами, которые используют данную тему. Например, есть Тема "Земля" и Тема "Вода", которые располагаются в соответствующих папках:
папка App_Themes/вода, содержит файл вода.css.
папка App_Themes/земля, содержит файл земля.css
Результат применения темы "вода" показан на рисунке 11.
Рисунок 11 – Эта страница посвящена знаку зодиака "Рыбы" и использует тему "Вода"
Возможно применение Темы как к индивидуальным Web-страницам так и ко всему Web-приложению. Чтобы применить тему к единственной Web-странице, необходимо:
– открыть Web-страницу в Microsoft Visual Studio 2005;
– выбрать DOCUMENT в окне Properties;
– найти свойство Theme, а затем выбать нужную Тему из раскрывающегося списка.
Чтобы определить Тему, которая обращается ко всему Web-приложению, нужно изменить файл конфигурации сайта web.config произведя следующие действия:
– открыть файл web.config;
– выбрать пару тегов <system.web> и </system.web>. Если файл web.config не содержит этих тегов, то необходимо создать их.
– добавить тег, задающий тему (он выделен зеленым цветом), как показано ниже.
<system.web>
<pages theme = "вода"/>
</system.web>
Создание карты сайта
Каждое Web-приложение нуждается в системе навигации, которая позволяет пользователям получать быстрый доступ к информации, которую они ищут. При разработке достаточно большого Web-приложения важно сохранить ясность и понятность системы навигации, поскольку с течением времени приложение будет изменяться и обновляться. С этой задачей помогут справиться следующие четыре компонента:
1. Файл Web.sitemap, который задает логическую структуру Web-приложения .
2. Элемент управления Menu, который читает файл Web.sitemap и отображает структуру приложения в виде раскрывающегося меню.
3. Элемент управления TreeView, который читает файл Web.sitemap и отображает структуру в виде древовидного списка.
4. Элемент управления SiteMapDataSource, который связывает файл карты сайта (Web.sitemap) и элементы управления для ее отображения (TreeView или Menu).
Совместное применение этих компонент позволяет быстро и просто организовать систему навигации Web-приложения и поддерживать ее в постоянном актуальном состоянии.
Построение системы навигации Web-приложения проще всего начать с создания файла карты сайта, выполнив следующие шаги:
– открыть Web-приложение, и щелкнуть правой кнопкой мыши по папке, в появившемся меню выберите пункт Add New Item.
– в диалоговом окне Add New Item выбрать шаблон Site Map.
– по умолчанию будет предложено имя файла, содержащего карту сайта Web.sitemap, или выбрать другое имя. Щелкнуть кнопкой Add.
Эта процедура создает файл по имени Web.sitemap, расположенный в папке Web-приложения. Файл карты сайта представляет собой XML файл, поэтому Microsoft Visual Studio 2005 отображает его в текстовом режиме. Только что созданный файл 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> третьего уровня и т.д.
Например, для Web-приложения "Проект-Гороскоп" предлагается следующая схема навигации (рис.12), чтобы ее задать нужно в файле Web.sitemap создать структуру, представленную на Рисунке 13.
Рисунок 12 – Карта сайта Web-приложения "Проект-Гороскоп"
Рисунок 13 – Код задающий карту сайта Web-приложения "Проект-Гороскоп"
У тега <siteMapNode> есть три признака, которые можно менять:
1. URL – абсолютная или относительная ссылка на страницу, куда будет совершен переход при выборе ссылки в меню или древовидном списке. Не определяйте то же самое значение URL дважды в одном файле карты сайта, иначе получите сообщение об ошибке. Чтобы создавать <siteMapNode>, который не связан со страницей, оставьте пробел в качестве значения URL. Это полезно для пунктов меню, которые представляют группу страниц, но сами ни на какие страницы не ссылаются.
2. TITLE название ссылки, которое появится как видимый текст в меню, или древовидном списке.
3. DESCRIPTION более длинное название ссылки, которое появится как текст подсказки, когда мышь будет находиться на ссылке. Этот признак является дополнительным, и заполнять его не обязательно.
Описанную в файле Web.sitemap карту сайта можно использовать для создания выпадающего или раскрывающегося меню, следующим способом:
1. Открыть Мастер-страницу или любую другую страницу, которая будет отображать меню.
2. В панели Toolbox открыть группу Data и перетащить элемент SiteMapDataSource на открытую страницу. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе.
3. В панели Toolbox, открыть группу Navigation, перетащив элемент Menu на открытую страницу, в нужное место.
4. Microsoft Visual Studio 2005 отобразит меню задач как показано на рисунке 14, для этого необходимо открыть список Choose Data Source и выбрать название SiteMapDataSource1, которое было добавлено на шаге2. Сохраните страницу, затем просмотрите ее.
Рисунок 14 – Связывание меню и карты сайта
Чтобы настроить конфигурацию меню, выделите его, а затем определите нужные значения в окне Properties. Необходимо установить свойство Orientation, выбрав между значениями Horizontal и Vertical.
Horizontal – горизонтальные пункты меню Top-level появятся слева направо. Результат – система раскрывающегося меню.
Vertica – вертикальные пункты меню Top-level появятся сверху вниз. Результат – выпадающая система меню.
Файл карты сайта можно также использовать для создания навигации аналогичной Windows Explorer, для этого нужно воспользоваться элементом TreeView из группы Navigation. Тогда посетители сайта смогут использовать значки плюс (+) и минус (-), чтобы развернуть или свернуть любые группы элементов меню.
Чтобы создать меню–список нужно выполнить следующие действия:
– открыть Мастер–страницу или любую другую страницу, которая будет отображать меню–список.
– в панели Toolbox открыть группу Data и перетащите элемент SiteMapDataSource на открытую страницу. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе.
– в панели Toolbox, откройте группу Navigation и перетащите элемент TreeView на открытую страницу, в нужное место.
– Microsoft Visual Studio 2005 отобразит меню задач, в котором нужно открыть список Choose Data Source и выбрать название SiteMapDataSource1. Сохранить страницу, затем можно просмотреть ее (рис.15).
Рисунок 15 – Пример меню-списка
Файл карты сайта можно так же использовать для создания панели, которая показывает путь от главной страницы к текущей странице с помощью элемента управления SiteMapPath. Элемент управления SiteMapPath появляется в низу страницы. Вы можете добавить элемент SiteMapPath к любой .aspx Web-странице, или Мастер-странице. Для этого достаточно в панели Toolbox открыть группу Navigation и перетащить элемент SiteMapPath на нужную страницу, открытую в режиме конструктора.
В отличие от элементов управления Menu и TreeView, элемент управления SiteMapPath не получает данные от SiteMapDataSource, а всегда использует файл карты сайта по умолчанию Web.sitemap. Это может служить серьезным основанием, чтобы не изменять имя файла карты сайта данное по умолчанию.
Таким образом, рассмотрены четыре элемента управления, которые помогают организовывать гиперссылки в пределах Web-приложения:
1. Элемент управления SiteMapDataSource – обеспечивает доступ к иерархическому списку связей, который закодирован в файле web.sitemap. Этот элемент не виден в режиме просмотра и обеспечивает данными элементы управления Menu и TreeView.
2. Элемент управления Menu – отображает в зависимости от настроек раскрывающееся или выпадающее меню,
3. Элемент управления TreeView – отображает те же самые данные в виде иерархического списка.
4. Элемент управления SiteMapPath – находит текущую страницу в файле web.sitemap и затем отображает путь от текущей страницы к домашней странице сайта.
Задания к лабораторной работе
ЗАДАНИЕ 1
Разработать Web-приложение "Проект-Гороскоп", конечной целью которого является создание сайта, посвященного западному и восточному гороскопам.
Существует два вида гороскопов: восточный и западный. Западный гороскоп основан на 12 знаках зодиака, которые сменяют друг друга в течение года и подразделяются на четыре группы, так называемые стихии: вода, земля, огонь и воздух. Китайский гороскоп, также основан на 12 знаках зодиака, но сменяют они друг друга в течение 12 лет. Стихий в китайском гороскопе всего пять: железо, вода, дерево, огонь, земля и они также сменяют друг друга через год. Таким образом, в китайском гороскопе полный цикл осуществляется за 60 лет.
Необходимо создать две Мастер-страницы:
– для отображения информации западного гороскопа;
– для отображения информации восточного гороскопа.
При разработке Мастер-страниц учитывайте следующие рекомендации:
– каждая Мастер-страница должна содержать заголовок «Проект-Гороскоп»
– вверху каждой Мастер-страницы должен быть соответствующий подзаголовок: "Восточный гороскоп" или "Западный гороскоп"
– внизу Мастер-страницы должен стоять знак копирайта разработчика, например: © Иванов Иван Иванович, ОДЭКУ, Одесса, 2011г. E-mail ivanov@mail.ru
– слева от элемента управления ContentPlaceHolder должно быть оставлено место, для последующего размещения карты сайта
– реализована ссылка перехода на домашнюю страницу для тех пользователей, кто пришел на сайт через поисковую систему
– на каждой Мастер-странице разместить тематический рисунок, отражающий сущность западного и восточного гороскопов.
– на каждой Мастер-странице разместить фрагмент текста, описывающий характеристики западного и восточного гороскопов.
При размещении текстовых и графических элементов на Мастер-странице учитывайте метод золотого сечения.
ЗАДАНИЕ 2
Создать шесть Тем, которые могут быть использованы для оформления страниц западного и восточного гороскопов. В таблице ниже показано соответствие стихий и гороскопов
| Стихия | Западный гороскоп | Восточный гороскоп |
| Вода | Присутствует | Присутствует |
| Земля | Присутствует | Присутствует |
| Огонь | Присутствует | Присутствует |
| Воздух | Присутствует | |
| Дерево | Присутствует | |
| Железо | Присутствует |
При создании Темы используйте CSS и Skin файлы. В CSS файле для каждой Темы выберите различающийся шрифт (его цвет, размер и начертание), а также цвет фона в соответствии с выбранной стихией. В Skin файле определите изображение для каждой стихии.
Запишите содержимое CSS файлов для каждой из стихий:
Вода___________________________________________
Земля______________________________________________
Огонь______________________________________________
Воздух ______________________________________________
Дерево______________________________________________
Железо ______________________________________________
ЗАДАНИЕ 3
Создать три файла карты сайта. В каждом из файлов разместите ссылки на следующие Web-страницы:
- Общая карта сайта
– западный гороскоп
– восточный гороскоп
– информация о разработчиках
–страница заполнения анкеты
– страница получения прогноза
- Восточный гороскоп
– Крыса
– Бык
– Тигр
– Кролик
– Дракон
– Змея
– Лошадь
– Овца
– Обезьяна
– Петух
– Собака
– Свинья
- Западный гороскоп
– Стихия земли
- Телец
- Дева
- Козерог
– Стихия воды
- Рак
- Рыбы
- Скорпион
– Стихия воздуха
- Близнецы
- Весы
- Водолей
– Стихия огня
- Овен
- Лев
- Стрелец
В каждом файле карты сайта заполните поля DESCRIPTION развернутыми описаниями ссылок.
Общую карту сайта используйте для заполнения элемента управления Menu на домашней странице сайта.
Файл карты сайта "Восточный гороскоп" используйте для заполнения элемента управления TreeView, который разместите на Мастер-странице "Восточный гороскоп"
Файл карты сайта "Западный гороскоп" используйте для заполнения элемента управления TreeView, который разместите на Мастер-странице "Западный гороскоп"
На обоих Мастер-страницах замените ссылку на домашнюю страницу элементом управления SiteMapPath.
Контрольные вопросы:
1. Назначение и функции Шаблонов. Преимущества использования Мастер-страниц, Контент-страниц?
2. Как определить Стиль для определенного элемента страницы? Как задать Правило для Стиля?
3. Использование Тем. Назначение и функции .Skin файлов?
4. Разработка логической структуры Web-приложения?
5. Применение элементов управления Menu, TreeView, SiteMapDataSource для организации системы навигации при создании Карты сайта Web-приложения?
Лабораторная работа №6