Разработка макета Интернет-магазина

Цель практического занятия: Основная цель данного занятия – создать статический макет сайта на примере Интернет-магазина, т.е. задать структуру сайта, задать разметку основным страницам и шаблонам, а также определить необходимые CSS -классы, а также рассмотреть использование для этих целей Microsoft Expression Web 3 и Microsoft Visual Studio 2008 Expression Web.

Файлы к практическому занятию Вы можете скачать здесь.

4.1. Описание структуры сайта

Структура разрабатываемого сайта представлена на рис. 4.1.

Сайт состоит из следующих страниц:

Помимо страниц, в сайт включен файл, с описанием динамического веб-шаблона ( master.dwt ), папка " images ", содержащая изображения, используемые на сайте (в некоторых других папках также присутствуют подпапки " images " с картинками, например, в products располагаются все картинки продуктов), а также папка " styles ", содержащая используемые в сайте CSS файлы.

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

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

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

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

В качестве технологии для разработки шаблона можно использовать Dynamic Web Templates (DWT), о которой будет рассказано ниже. Также в следующих занятиях будет рассматриваться технология Master Page. Конечно, можно поддерживать шаблон руками, копируя код из него в каждую страницу, однако это неудобно.

Перейдем к созданию внешнего вида Веб-страниц.

Начнем с главной страницы. Традиция оформления главной страницы пришла из полиграфического дизайна. В книге или журнале есть функциональная необходимость присутствия обложки. Обложка – "лицо" книги. Главную страницу сайта также можно сравнить с "лицом" интерактивной мультимедийной книги – она определяет образ всего сайта.

Существует два основных вида домашних страниц: презентационная и информационная. Презентационная страница создается для не очень больших узлов, она красиво оформляется, часто почти целиком состоит из графики и имеет малое количество ссылок. Такая страница, как правило, должна помещаться на экране. Информационная страница, наоборот, создается с использованием минимума графики и содержит большое количество информации. Многие известные Веб-узлы не стесняются "раздувать" ее до 3-х и более экранов. Ее главная задача – продемонстрировать посетителю обилие информации на узле и предоставить все самое актуальное.

Независимо от вида домашней страницы существует несколько основных правил ее организации:

Страница-шаблон, обычно содержит следующие элементы (см. рис. 4.2):

Для того чтобы разработать шаблон и страницы достаточно использовать HTML. Однако при создании сложного сайта, потребуется привлечение дополнительных технологий и языков.

4.3. Обзор HTML

4.3.1. Структура HTML-документа

HTML – это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br> ). В этом случае обычно не указывается закрывающий тег, хотя лучше использовать <br/>. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font> ). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML -документа:

<p>Текст между двумя тегами – открывающим и закрывающим.</p>
<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
А вот пример пустого элемента: <br>

Каждый HTML -документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка ( <head></head> ) и тела ( <body></body> ) документа.

4.3.2. Основные элементы

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://msdn.com"> и <a href="http://msdn.com"> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров – обычно не меньше 15.

4.3.2.1. Гиперссылки

<A HREF="filename" target="_self">текст ссылки</A>

4.3.2.2. Текстовые блоки

4.3.2.3. Форматирование текста

Так, например:

Сигналом к началу атаки являются
 <U>три</U> 
 <FONT SIZE="+2">больших</FONT> 
 <FONT COLOR="green">зеленых</FONT> 
 свистка.

Создаст приблизительно следующий текст:

Сигналом к началу атаки являются три больших зеленых свистка.

4.3.2.4. Списки

<UL>
   <LI> первый элемент </LI>
   <LI> второй элемент </LI>
   <LI> третий элемент </LI>
</UL>

создает список:

Если вместо <UL> (ненумерованный список) поставить <OL> (нумерованный список), список получится нумерованным:

4.3.2.6. Объекты

4.3.2.7. Изображения

Пример:

<IMG SRC=url ALT="текст" TITLE="текст" 
WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

4.3.2.8. Таблицы

Так, например:

<table border="0" cellpadding="4" cellspacing="0">
    <tr >
        <th scope="col" style="width: 30%">
            Количество наnbsp;складе
        </th>
        <th scope="col" style="width: 70%">
            Название продукта
        </th>
    </tr>
    <tr >
        <td>
            191
        </td>
        <td>
            Mountain Tire Tube
        </td>
    </tr>
    <tr >
        <td>
            184
        </td>
        <td>
            Patch Kit/8 Patches
        </td>
    </tr>
    <tr >
        <td>
            175
        </td>
        <td>
            Water Bottlenbsp;mdash; 30nbsp;oz.
        </td>
    </tr>
    <tr >
        <td>
            161
        </td>
        <td>
            Road Tire Tube
        </td>
    </tr>
    <tr >
        <td>
            110
        </td>
        <td>
            Fender Setnbsp;mdash; Mountain
        </td>
    </tr>
</table>

Создаст таблицу, изображенную на рис. 4.3.

У тега TABLE есть еще параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и ее содержимым. Другой параметр тегов TABLE, TR, TH, TD – ALIGN. Он определяет выравнивание. Возможные значения – center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR – для содержимого всех ячеек строки, TABLE – для самой таблицы на страничке. Для каждой ячейки берется выравнивание из TD или TH, если оно не задано – из TR, если и оно не задано – по центру для TH или по левому краю для TD.

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.

4.3.2.9. Формы

4.4. Общее описание Dynamic Web Templates

Dynamic Web Templates (динамические веб-шаблоны) представляют собой эталонную веб-страницу на базе HTML, которая может содержать настройки, параметры форматирования, а также элементы страницы, в том числе текст, изображения, разметку, стили и неизменяемые области веб-страницы. Динамический веб-шаблон можно присоединять к страницам веб-узла для определения параметров их разметки.

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

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

Редактируемыми регионами являются те области, которые указаны в динамическом веб-шаблоне следующим образом:

<!-- #BeginEditable "Region1" -->
<p>(Region1)</p><!-- #EndEditable -->

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

…
<!-- #BeginTemplate "master.dwt" -->
<!--далее идет сам шаблон и изменения, сделанные в редактируемых регионах -->
…
<!-- #EndTemplate -->

Таким образом, указанная часть страницы соответствует шаблону master.dwt.

4.5. Общее описание CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS ). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счет этого нововведения стало возможным легкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Основными преимуществами использования CSS являются:

Недостатками использования CSS являются:

CSS при отображении страницы может быть взята из различных источников:

Пример таблицы стилей:

h2 {
	font-size: 1.75em;
	color: #469;
}
#container {
	padding: 0;
}
#column_r_content, #column_l_content {
	margin: 10px;
}
p#paragraph1 {
  margin: 0;
}
#masthead img {
	float: left;
	margin: 0;
	padding: 0;
}
#navigation a:hover {
	color: #000;
	text-decoration: none;
	border: 1px solid #ed9;
	background-color: #ed9;
}
.style_italic {
	font-style: italic;
}

Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #masthead img, #navigation a:hover, .style_italic.

В первом правиле HTML -элементу h2 (заголовку второго уровня) назначаются стиль, согласно которому, заголовок второго уровня будет отображаться темно-синим цветом увеличенным кеглем.

Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов ( margin ).

Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).

Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.

Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:

<p class="style_italic">Этот абзац будет выведен курсивом.</p>

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

Средства разработчика в Internet Explorer 8 позволяют проверить внутреннее представление веб-страницы с точки зрения браузера. С помощью этих средств разработки можно решать целый ряд задач, в том числе просмотр отдельных атрибутов, выяснение, почему к конкретному элементу применено определенное правило CSS, а также предварительный просмотр различных режимов совместимости документов. Определяя способ интерпретации веб-страницы браузером, средства разработчика предоставляют множество возможностей для поиска и решения проблем и делают это гораздо быстрее, чем это было возможно в предыдущих версиях Internet Explorer.

4.6.1. Открытие и закрытие средств разработчика

Чтобы открыть средства разработчика, нажмите клавишу F12 либо нажмите кнопку "Средства разработчика" в меню "Сервис" на панели инструментов Internet Explorer 8. На рис. 4.4 показано окно средств разработчика.

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

Закрыть средства разработчика можно одним из следующих способов: нажать клавишу F12, нажать кнопку "Средства разработчика" в меню "Сервис", нажать кнопку "Закрыть" в правом верхнем углу окна средств разработчика или закрыть окно Internet Explorer или вкладку, на которой они были открыты.

4.6.2. Выбор объектов на веб-странице

Многие средства разработчика HTML и CSS работают с отдельными элементами веб-страницы. Чтобы выбрать элемент, выделите его на вкладке HTML или нажмите кнопку "Выбрать элемент щелчком" в меню "Найти" средств разработчика. После нажатия этой кнопки вы сможете с помощью мыши выбрать элемент на веб-странице. Переместите курсор на элемент; когда контур элемента выделится синей рамкой, щелкните, чтобы выбрать элемент. На рис. 4.5 показаны результаты выбора элемента.

Когда вы выделите и щелкнете элемент HTML, на вкладке HTML появятся атрибуты выбранного элемента, а также их расположение во внутреннем представлении, которое используется для отображения веб-страницы в Internet Explorer 8. Можно просматривать текущие значения атрибутов элемента и экспериментировать с новыми значениями, изменяя их на вкладке HTML. Чтобы восстановить первоначальный вид веб-страницы, обновите страницу.