Создание сайта в Visual Studio

Другой способ создания сайта – воспользоваться средой разработки Microsoft Visual Studio 2008 Web Express (MVS 2008) (Рис. 0.13).

Рис. 0.13. Основное окно Microsoft Visual Studio 2008 с открытой главной страницей сайта

Стоит при этом отметить следующие моменты:

· MVS 2008 не поддерживает формат «dwt», что означает отсутствие подсветки синтаксиса в файлах шаблонов и автоматических подсказок, и, что более важно, она не будет обновлять шаблон во всех связанных с шаблоном страницах. Для решения тех задач, для которых применяется DWT в MVS, используется подход Master Page, который будет подробно рассмотрен в следующих семинарах.

· В MVS 2008 по умолчанию нет возможности создать сайт на основе шаблона, все файлы страниц и стилей необходимо добавить в проект сайта и написать их код самостоятельно.

Однако именно MVS позволяет создавать действительно сложные интернет-приложения, применяя технологию ASP.NET.

Работа со стилями в Microsoft Visual Studio 2008

В заключении рассмотрим одну из возможностей, предоставляемых MVS для разработки CSS классов. При редактировании CSS файлов (в нашем случае, например, layout.css) можно кликнуть правой клавишей мыши по любому CSS-классу, и в контекстном меню выбрать Build Style. Откроется окно, изображенное на Рис. 0.14.

Рис. 0.14. Окно редактирования CSS-класса в Microsoft Visual Studio 2008

В нем можно задать различные свойства, и сразу же увидеть, как будет выглядеть элемент, к которому будет применяться этот стиль. Это очень удобно на первых шагах, однако встроенным редактором поддерживаются не все свойства, к тому же к одному HTML элементу может применяться сразу несколько стилей, что приведет к тому, что он может выглядеть совсем не так, как отображается в окне Preview.

Результат

При помощи материалов данного занятия, можно разработать макет интернет-магазина. Для примера разработан сайт, представленный на Рис. 0.15, состоящий из 6 страниц и 2 файлов, содержащих CSS-классы. Для удобства хранения и навигации файлы распределены по каталогам, которые определяют структуру сайта.

Примечание. Некоторые страницы содержат текст на английском языке. Это связано с тем, что отображаемая на них информация взята напрямую из БД AdventureWorks. В дальнейшем многие из страниц будут заменены на страницы aspx, которые будут брать данные из БД на прямую. Скачать базу данных AdventureWorks можно по адресу: http://www.codeplex.com/Wikipage?ProjectName=SqlServerSamples, а ознакомиться с ее структурой на http://msdn.microsoft.com/ru-ru/library/ms124438.aspx. Во всех примерах будет использоваться именно эта БД.

Рис. 0.15. Страница сайта продуктов магазина AdventureWorks

Ниже приведена часть HTML кода, отвечающего за отображение таблицы продуктов, а также некоторые из используемых CSS-классов:

<div id="Div1">

<!-- Begin Left Column -->

<div id="Div2">

<div id="Div3">

<!-- #BeginEditable "content" -->

<table id="Table1" border="0" cellpadding="4" cellspacing="0">

<tr id="tr1">

<th scope="col" style="width: 30%">

Количество на&nbsp;складе

</th>

<th scope="col" style="width: 70%">

Название продукта

</th>

</tr>

<tr id="tr2">

<td>

</td>

<td>

Mountain Tire Tube

</td>

</tr>

<tr id="tr3">

<td>

</td>

<td>

Patch Kit/8 Patches

</td>

</tr>

<tr id="tr4">

<td>

</td>

<td>

Water Bottle&nbsp;&mdash; 30&nbsp;oz.

</td>

</tr>

<tr id="tr5">

<td>

</td>

<td>

Road Tire Tube

</td>

</tr>

<tr id="tr6">

<td>

</td>

<td>

Fender Set&nbsp;&mdash; Mountain

</td>

</tr>

</table>

<!-- #EndEditable -->

</div>

</div>

<!-- End Left Column -->

CSS-классы:

#GridView1 {

WIDTH: 100%;

BORDER-COLLAPSE: collapse;

COLOR: #333333;

border: 0;

}

#tr_main {

BACKGROUND-COLOR: #bdad9d;

COLOR: white;

FONT-WEIGHT: bold;

}

#tr_nechet {

BACKGROUND-COLOR: #f5ebc2;

COLOR: #333333;

}

#tr_chet {

BACKGROUND-COLOR: #ffffff;

COLOR: #333333;

}

 

Ключевые термины

Структура Веб-сайта, HTML, CSS, Dynamic Web Templates, Master Page, Отладка, Microsoft Expression Web, Visual Studio 2008 Web Express.

Краткие итоги

Данное практическое занятие рассматривает следующие темы:

· Основные принципы создания макета страниц;

· Обзор структуры HTML-документа и основных элементов HTML;

· Общее описание Dynamic Web Templates;

· Общее описание CSS;

· Отладка CSS с помощью инструментов разработчика в IE8;

· Создание сайта из шаблона в Microsoft Expression Web;

· Создание сайта в Microsoft Visual Studio 2008 Web Express;

· Работа со стилями в Microsoft Visual Studio 2008;

· Приводится пример макета Интернет-магазина.

Литература

1. Tina Clarke. Dynamic Web Templates, http://www.outfront.net/tutorials_02/fp_techniques/dwt-1.htm
2. Microsoft. Create a Dynamic Web Template, http://office.microsoft.com/en-us/frontpage/HA010775891033.aspx
3. MSDN. Dynamic web templates overview, http://msdn.microsoft.com/en-us/library/cc295515.aspx
4. Dynamic Web Template Interchange Guidelines, http://dwtig.com/general_standards.htm
5. Microsoft.Создание эталонного макета веб-страницы с помощью динамических веб-шаблонов, http://office.microsoft.com/ru-ru/frontpage/HA010775891049.aspx?pid=CH010504771049
6. Microsoft.Изменение разметки страницы-шаблона с помощью динамических веб-шаблонов, http://office.microsoft.com/ru-ru/frontpage/HA010830191049.aspx?pid=CH010504771049
7. Wikipedia. CSS, http://ru.wikipedia.org/wiki/CSS
8. Евгений Скрипец. Каскадные Таблицы Стилей, http://www.dp76.com/Style/CSS/
9. Wikipedia. HTML, http://ru.wikipedia.org/wiki/HTML
10. MSDN. Отладка сценариев HTML и CSS помощью средств разработчика, http://msdn.microsoft.com/ru-ru/library/dd565627%28VS.85%29.aspx
11. Чак Муссиано, Билл Кеннеди, HTML и XHTML. Подробное руководство – СПб.: Символ-Плюс, 2008. – с. 752.
12. Энди Бадд, Камерон Молл, Саймон Коллизон, CSS. Профессиональное применение Web-стандартов – М.: Вильямс, 2009. – с. 272.