2. Задания к практическому занятию
Задание 1. Изучите и проанализируйте материалы раздела 1. Теоретическая часть. Ответьте на следующие вопросы:
- основные принципы, которые должны соблюдаться при создании макета страниц сайта;
- процедура отладки CSS с помощью инструментов разработчика в IE8;
- возможности отладки CSS с помощью инструментов разработчика в IE8.
Задание 2. При помощи материалов данного занятия изучите приведенный пример макета интернет-магазина. Проанализируйте соответствие макета интернет-магазина основным принципам разработки структуры сайта.
Задание 3. Изучите и проанализируйте Листинг 1. HTML-код, отвечающий за отображение таблицы продуктов. В тексте найдите теги, отображающие таблицу, и используемые при этом CSS-классы. Как они влияют на вид таблицы продуктов? Измените вид таблицы с помощью CSS-классов.
Задания 1-2 относятся к базовому уровню, задание 3 – повышенному.
Сайт, главная страница которого представлена на рис. 15, состоит из 6 страниц и 2 файлов, содержащих CSS-классы. Для удобства хранения и навигации файлы распределены по каталогам, которые определяют структуру сайта.
Примечание – Некоторые страницы содержат текст на английском языке. Это связано с тем, что отображаемая на них информация взята напрямую из БД AdventureWorks. В дальнейшем многие из страниц будут заменены на страницы aspx, которые будут брать данные из БД напрямую.
Скачать базу данных AdventureWorks можно по адресу: http://www.codeplex.com/Wikipage?ProjectName=SqlServerSamples,
а ознакомиться с ее структурой – на
http://msdn.microsoft.com/ru-ru/library/ms124438.aspx.
Рисунок 15 – Страница сайта продуктов магазина AdventureWorks
Часть HTML-кода, отвечающего за отображение таблицы продуктов, а также некоторые из используемых CSS-классов, приведены в листинге 1.
Листинг 1. HTML-код, отвечающий за отображение таблицы продуктов
<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%">
Количество на складе
</th>
<th scope="col" style="width: 70%">
Название продукта
</th>
</tr>
<tr id="tr2">
<td>
191
</td>
<td>
Mountain Tire Tube
</td>
</tr>
<tr id="tr3">
<td>
184
</td>
<td>
Patch Kit/8 Patches
</td>
</tr>
<tr id="tr4">
<td>
175
</td>
<td>
Water Bottle — 30 oz.
</td>
</tr>
<tr id="tr5">
<td>
161
</td>
<td>
Road Tire Tube
</td>
</tr>
<tr id="tr6">
<td>
110
</td>
<td>
Fender Set — 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;
}