Принципы веб-дизайна. Знакомство с Microsoft Expression Web

Веб-дизайн ( web page design ) – это процесс проектирования, планирования, моделирования и реализации доставки электронного содержимого через сеть Веб с использованием технологий (на основе языков разметки), подходящих для интерпретации и визуализации веб-браузером или другим графическим веб-интерфейсом пользователя.

Очень важным является приведение веб-ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств, а также кроссплатформенность кода разметки ресурса.

Основными аспектами веб-дизайна (в первую очередь для коммерческих веб-сайтов) являются следующие:

• Содержимое. Информационное наполнение должно быть релевантным тематике сайта и ориентированным на целевую аудиторию сайта.
• Удобство в использовании ( usability ). Сайт должен иметь дружественный пользовательский интерфейс с простой и надежной навигацией.
• Внешний вид. Графика и текст должны быть выполнены в одном стиле и согласованы на всех страницах сайта. Стиль оформления должен демонстрировать профессионализм, привлекательность и релевантность.
• Видимость. Сайт должен легко находиться с помощью большинства поисковых систем и рекламных площадок.

По-сути, веб-сайт - это информационная система, которая содержит две основные компоненты:

• Компоненту представления ( front-end ). Видимое содержимое (разметка страниц, графика, аудио и текст).
• Компоненту реализации ( back-end ). Связана с организацией и эффективной реализацией исходных кодов. Включает в себя неотображаемые сценарии, серверные компоненты, являющиеся основой для компоненты представления.

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

Этапы проектирования веб-сайта зависят от объема сайта, его функциональности и многого другого.

Разработка веб-сайта включает в себя следующие этапы:

• Дизайн главной и типовых страниц сайта. (выполняется обычно в графическом редакторе).
• HTML-кодирование, в результате которого создаётся код, который можно просматривать с помощью браузера.
• Программирование сайта. Может осуществляться как "с чистого листа", так и с помощью специального высокоуровнего пакета - системы управления сайтом (CMS).
• Размещение сайта в Веб, наполнение контентом и публикация.
• Оптимизация веб-сайта с целью повышения его видимости в Веб.
• Сдача сайта заказчику.

Для дизайна веб-сайта и разработки веб-приложений имеется широкий спектр инструментальных средств. Компания Майкрософт имеет уже давнюю традицию создания WYSIWYG-инструментов такого рода. Среди таких инструментов можно назвать, в частности Microsoft Visual Studio. NET и Microsoft Expression Web.

Microsoft Expression Web

Microsoft Expression Web является составной частью пакета Microsoft Expression Studio.

Microsoft Expression Studio - пакет графических программ компании Майкрософт, предназначенных для разработчиков и дизайнеров. Использует программный интерфейс WinFX.

WinFX (теперь NET Framework 3.0 ) — интерфейс программирования приложений, входящий в состав операционных систем Windows Vista и Windows Server 2008.

В состав Microsoft Expression Studio входят следующие инструменты:

• Microsoft Expression Blend — WYSIWYG-инструмент для проектирования пользовательского интерфейса приложений, создаваемых на основе Windows Presentation Foundation.
• Microsoft Expression Web — WYSIWYG-инструмент для дизайна веб-сайтов и редактор HTML.
• Microsoft Expression Media — векторно/растровый графический редактор.
• Microsoft Expression Design — профессиональный инструмент для графического дизайна и подготовки иллюстраций для настольных и web-приложений.
• Microsoft Expression Encoder – профессиональный мультимедиа-кодек для содержимого в формате VC-1 для Microsoft Silverlight.

Microsoft Expression Web 2 позволяет разрабатывать веб-страницы, интегрирующие в рамках веб-сайта такие технологии как XML, CSS 2.1, ASP.NET 2.0, XHTML, XSLT и JavaScript., а также внедрять в страницы управляющие элементы ASP.NET, Microsoft Silverlight и AJAX. Для работы с этим инструментом требуется наличие установленной компоненты .NET Framework 2.0.

На странице http://www.microsoft.com/expression/products/overview.aspx?key=web имеется ссылка на обучающее руководство, демонстрирующее основы работы с этой средой разработки. В частности там демонстрируется создание пустого веб-сайта, мастер-страницы, стилевого оформления, создание *.asp страницы. Также показывается каким образом можно добавить поддержку RSS на сайте и как создать страницу содержащую элемент управления Silverlight для просмотра видео. Одно из упражнений посвящено внедрению элемента управления .NET для отображения данных из источника на основе XML. Показано также, как вставить AJAX элемент на страницу для асинхронного вызова функции и обновления индикатора времени.

Необходимо уделить особенное внимание созданию мастер-страниц.

Поскольку страницы веб-приложения составляют некое единое целое, объединенное едиными требованиями к оформлению, содержанию, расположению элементов управления, то создаваемые веб-страницы сегодня очень редко разрабатываются "с нуля". Обычно при создании страниц используются готовые шаблоны, либо они создаются в процессе разработки веб-страниц приложения. Одним из средств решения подобных задач являются мастер-страницы (master pages). Они реализуют простую модель создания шаблонов форм с возможностью их повторного использования.

Для реализации данного механизма существуют такие типы страниц, как мастер-страницы (master pages) и страницы содержимого (content pages).

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

Мастер-страница должна содержать элемент управления ContentPlaceHolder, который предназначен для определения области, куда страница содержимого может вставлять содержимое. При создании новой мастер-страницы элемент ContentPlaceHolder создается по умолчанию. Для того чтобы превратить обычную страницу в страницу содержимого, необходимо в качестве значения свойства MasterPageFile страницы указать имя мастер-страницы, а также добавить на страницу нужный элемент управления.