Задача 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;
}
