Задача 10. Створити веб сторінкуз використанням таблиці стилів
До завдання 10
| Веб-дизайн – это графическое оформление сайта, которое включает в себя разработку структуры сайта, разработку логики сайта с учетом удобства пользования (юзабилити). Причем оформление должно быть таковым, чтобы не отпугивать посетителей, а создавать им удобства для пользования сайтом. | Роль привлечения посетителей на сайт выполняет графическое оформление, а удобство и неприкрытая простота позволяет удерживать посетителя и заставляет его возвращаться на сайт еще раз. Прослеживая развитие сайтов в Runete, удивляешься разнообразию и в некотором роде несовершенству многих сайтов, так как они созданы любителями. Хотя это не мешает этим сайтам быть популярными. | ||
| Минимализм Информационный дизайн Бизнес-стиль Дизайн в стиле минимализма | Дизайн в стиле Веб-2 Промостиль Дизайн в стиле флеш | ||
Простота и логичность - вот основа минимализма. Что определяет данное направление:
| Информационный дизайн Информационный дизайн – это минимализм в высшей точке его проявления. Взяв от минимализма простоту и легкость подачи информации и соединив ее с минимальным графическим оформлением, получили достаточно удобное направление в дизайне. В основном данное направление нашло себя в средствах массовой информации. Бизнес-стиль служит для продажи какого-либо товара или услуги. Основные черты бизнес-стиля:
| ||
| Столица | Страна | Часть света |
| Абу-Даби | ОАЭ | Азия |
| Абуджа | Нигерия | Африка |
| Аддис-Абеба | Эфиопия | Африка |
| Аккра | Гана | Африка |
| Алжир | Алжир | Африка |
| Амман | Иордания | Азия |
| Амстердам | Нидерланды | Европа |
| Андорра-ла-Велья | Андорра | Европа |
| Анкаpа | Турция | Азия |
| Антананариву | Мадагаскар | Африка |
| Апиа | Самоа | Австралия и Океания |
| Асмэра | Эритрея | Африка |
| Астана | Казахстан | Азия |
| Асунсьон | Парагвай | Южная Америка |
| Афины | Греция | Европа |
| Ашхабад | Туркмения | Азия |
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style10.css">
</head>
<body>
<table>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td>
<td class="back1"><b>веб-дизайн</b> – <i>это графическое оформление сайта, которое включает в себя разработку структуры сайта, разработку логики сайта с учетом удобства пользования (юзабилити). причем оформление должно быть таковым, чтобы не отпугивать посетителей, а создавать им удобства для пользования сайтом.</i> <br></td>
<td class="back2"><p>роль привлечения посетителей на сайт выполняет графическое оформление, а удобство и неприкрытая простота позволяет удерживать посетителя и заставляет его возвращаться на сайт еще раз.</p>
<p>прослеживая развитие сайтов в runete, удивляешься разнообразию и в некотором роде несовершенству многих сайтов, так как они созданы любителями. хотя это не мешает этим сайтам быть популярными.</p></td>
<td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td>
<td class="back3">минимализм<br>информационный дизайн<br>бизнес-стиль<br>дизайн в стиле минимализма<br><br></td>
<td class="back4">дизайн в стиле веб-2<br>промостиль<br>дизайн в стиле флеш<br><br></td>
<td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td>
<td class="back5"><b>простота и логичность - вот основа минимализма.</b><br>что определяет данное направление:<br>
<ol>
<li>белый фон, черный текст.</li>
<li>отказ от графики.</li>
<li>присутствие ограниченного количества шрифтов (максимум 2).</li>
<li>минимальное оформление: пиксельные значки, тонкие линии.</li>
<li>текстовая навигация.</li>
<li>тщательная работа над контентом, так как количество информации на сайте огромное.</li>
</ol>
четкая модульная сетка (каждый из блоков размещен с учетом юзабилити).</td>
<td class="back6">Информационный дизайн<br>Информационный дизайн – это минимализм в высшей точке его проявления. взяв от минимализма простоту и легкость подачи информации и соединив ее с минимальным графическим оформлением, получили достаточно удобное направление в дизайне. в основном данное направление нашло себя в средствах массовой информации.<br>бизнес-стиль служит для продажи какого-либо товара или услуги.<br>основные черты бизнес-стиля:<br>1. фиксированная ширина сайта<br>2. стандартное расположение элементов сайта.<br>3. привычные образы, позволяющие сразу определить стиль сайта.<br>4. применение баннерной рекламы.</td>
<td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
CSS
table {
background-color: #800080;
border-collapse: collapse;
}
td{
border: 1px dotted #fff;
padding: 0;
}
.back1 {
background-color: #ff7;
}
.back2 {
background-color: #7ff;
color: #00f;
}
.back3 {
background-color: #f0f;
text-align: center;
font-weight: bold;
}
.back4 {
background-color: #ff9000;
color: #fff;
text-align: right;
font-weight: bold;
}
.back5 {
background-color: #0f0;
}
.back6 {
background-color: #008000;
color: #fff;
}
