
- •4. Практическое занятие: Разработка макета Интернет-магазина
- •4.1. Описание структуры сайта
- •4.2. Основные принципы создания макета страниц
- •4.3. Обзор html
- •4.3.1. Структура html-документа
- •4.3.2. Основные элементы
- •4.3.2.1. Гиперссылки
- •4.3.2.2. Текстовые блоки
- •4.3.2.3. Форматирование текста
- •4.3.2.4. Списки
- •4.3.2.6. Объекты
- •4.3.2.7. Изображения
- •4.3.2.8. Таблицы
- •4.3.2.9. Формы
- •4.4. Общее описание Dynamic Web Templates
- •4.5. Общее описание css
- •4.6. Отладка css с помощью инструментов разработчика в ie8
- •4.6.1. Открытие и закрытие средств разработчика
- •4.6.2. Выбор объектов на веб-странице
- •4.6.3. Проверка элементов html
- •4.6.4. Использование средств "Стиль" и "Отслеживать стили"
- •4.6.5. Использование средства "Раскладка"
- •4.6.6. Использование средства "Атрибуты"
- •4.6.7. Проверка правил css
- •4.7. Создание сайта из шаблона в Expression Studio
- •4.8. Создание сайта в Visual Studio
- •4.8.1. Работа со стилями в Microsoft Visual Studio 2008
- •4.9. Результат
- •4.10. Ключевые термины
- •4.11. Краткие итоги
4.7. Создание сайта из шаблона в Expression Studio
Теперь, когда все необходимые технологии изучены, можно приступить к разработке сайта.
Проще всего это сделать в Microsoft Expression Web 3.
Microsoft Expression Web – это визуальный HTML-редактор и инструмент для веб-дизайна, пришедший на замену Microsoft FrontPage и являющийся частью пакета Microsoft Expression Studio.
Expression Web позволяет создавать страницы с интеграцией XML, CSS 2.1, ASP.NET 3.5, XHTML, XSLT, JavaScript, PHP и Silverlight непосредственно в сайты. Expression Web использует свой, основанный на стандартах, движок рендеринга, отличающийся от движка Trident, на котором основан Internet Explorer.
Для того чтобы не разрабатывать сайт с нуля, можно создать его на основе шаблона. Для этого в меню нужно выбрать раздел "Site" и в нем выбрать "New Site".
Откроется диалоговое окно, изображенное на рис. 4.11.
Рис. 4.11. Окно создания нового сайта на основе Шаблона в Microsoft Expression Web
В этом окне можно открыть раздел "Templates", в котором можно выбрать любой понравившийся шаблон. Предварительный вид сайта демонстрируется в правой части окна "Site". Внизу можно указать имя сайта, и место, где он будет храниться. Когда все действия будут произведены, достаточно нажать на кнопку "OK" для создания сайта.
Откроется окно проекта, которое выглядит примерно таким образом, как показано на рис. 4.12.
Рис. 4.12. Основное окно Microsoft Expression Web с открытым в нем шаблоном сайта
В Microsoft Expression Studio при выборе создания сайта по шаблону, будет сразу создан файл "master.dwt", а все созданные страницы будут использовать этот шаблон. Особое удобство здесь заключается в том, что при измени шаблона будут автоматически меняться все созданные страницы, а при попытке изменить какую-либо страницу, причем ту ее часть, которая повторяет шаблон, т.е. не является редактируемым регионом, Expression Studio выдаст предупреждение.
Начиная с этого момента можно приступить к изменению шаблона для создания собственного сайта с использованием CSS и HTML.
Подробно узнать о функциональных возможностях Microsoft Expression Studio можно по ссылке: http://connect.microsoft.com/expression.
4.8. Создание сайта в Visual Studio
Другой способ создания сайта – воспользоваться средой разработки Microsoft Visual Studio 2008 Web Express (MVS 2008) (рис. 4.13).
Рис. 4.13. Основное окно Microsoft Visual Studio 2008 с открытой главной страницей сайта
Стоит при этом отметить следующие моменты:
MVS 2008 не поддерживает формат "dwt", что означает отсутствие подсветки синтаксиса в файлах шаблонов и автоматических подсказок, и, что более важно, она не будет обновлять шаблон во всех связанных с шаблоном страницах. Для решения тех задач, для которых применяется DWT в MVS, используется подход Master Page, который будет подробно рассмотрен в следующих семинарах.
В MVS 2008 по умолчанию нет возможности создать сайт на основе шаблона, все файлы страниц и стилей необходимо добавить в проект сайта и написать их код самостоятельно.
Однако именно MVS позволяет создавать действительно сложные интернет-приложения, применяя технологию ASP.NET.