Файл: Способы оформления web-страниц приложения (CSS, темы) (CSS в решении проблем оформления web-страниц).pdf

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

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

На сегодняшний день к системам управления контентом можно подобрать очень качественные и довольно цельные готовые темы для оформления сайта. Разработчики позаботились о том, чтобы каждая из тем могла быть модифицирована заказчиком под собственное видение, тем более привлекательными эти темы становятся. На рисунке 7 приведен один из десятков тысяч образцов тем WordPress, который может быть модифицирован, вплоть до полного изменения внешнего вида.

Рис.7. Предлагаемый образец готовой темы для WordPress

Для установки темы для сайта необходимо установить локальный web-сервер, после чего в папку директории wp-content > themes с установленным WordPress переписать нужную тему для использования ее на странице создаваемого сайта (рисунок 8). В дальнейшем файл темы можно модифицировать с помощью редактирования основных файлов: index.php, style.css, header.php, footer.php и sidebar.php.

Рис.8. Путь к папке с темой в WordPress

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

2. CSS в решении проблем оформления web-страниц

2.1.Отличительные признаки между свойствами CSS и HTML

Первоначальный html применялся исключительно для разметки содержимого html-документа, то есть с его помощью определялось местоположение изображения, таблицы, заголовок и т.д. В связи с возрастающими потребностями пользователей интернета возникли новые требования к оформлению интерфейса сайтов. Появившиеся теги не всегда срабатывали нужным образом, поскольку не были гибкими. Решение этой проблемы взял на себя CSS (Cascading Style Sheets), который поддерживаемого всеми браузерами.

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

Таким образом, неоспоримыми преимуществами CSS являются [4]:

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

Итак, после создания CSS значительно облегчился процесс реализации концепции сайтов: стал возможет хороший дизайн. Упростилась работа с таблицами , шрифтами, изображениями, также значительно увеличилась скорость создания сайтов. Действительно, например, для внесения изменений ко всему сайту достаточно внести корректировку для тэга <h1> и он применится везде, где встречается. То есть для этого достаточно один раз изменить параметр в отличии от html, в котором модифицировать приходилось все теги.

2.2.Оформление фона и ссылок

В CSS существует возможность назначения цвета фона для надписей, ячеек таблиц или страницы целиком. Синтаксис {background: значение}задается теми же методами, что и цвет текста.

В CSS существует группа свойств для оформления фона HTML элементов [5]:

background-color;
background-attachment;
background-image;
background-position;
background-repeat.

Рассмотрим примеры. На рисунке 9 приведен пример использования свойства background-color, позволяющего установить цвет фона для выбранного элемента.

Рис.9. Отображение в браузере свойства background-color

По свойству background-attachment фоновые изображения прикрепляется к определенным местам, оставаясь в одном месте даже при прокрутке страницы. В следующем примере это свойство применяется.

<html>

<head>

body

{background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:right top;}

</style>

</head>

<body>

<p> Изображение остается на месте при прокрутке. </p>

<br />

<p> Изображение остается на месте при прокрутке. </p>

<br />

<p> Изображение остается на месте при прокрутке. </p>

</body>

</html>

Свойство background-image обеспечивает вставку произвольного изображения в качестве фона, которое будет повторяться, пока не заполнит все содержимое элемента.

Это CSS-свойство позволяет определить стиль повторения фонового изображения при вставке [3]:

background-repeat:repeat-x - повторы только по горизонтали;
background-repeat:repeat-y - повторы только по вертикали;
background-repeat:no-repeat - изображение без повторов.

Свойство background-position определяет местоположение фонового изображения, где первое значение данного свойства задает величину смещения изображения по горизонтали, а второе - величину смещения по вертикали.

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

a:link - определение обычной не посещенной ссылки;
a:visited - определение посещенной пользователем ссылки.
а:hover – определение ссылки, маркированной курсором мыши.
a:active - определение ссылки, маркированной щелчком мыши.

Использование свойств CSS для ссылок может продемонстрировать пример использования ссылок-блоков (рисунок 10), у которых активной областью будет текст вместе с зоной вокруг него[9]:

<title>Пример создания ссылок-блоков</title>

a { display: block; /* делаем ссылки блоками */

width: 180px; /* ширина ссылок */

color: #fff; /* цвет текста */

background: #900; /* фон */

text-decoration: none; /* убираем подчеркивание */

text-align: center; /* текст по центру */

border: 2px #000 solid; /* стили рамки вокруг ссылок */

margin: 5px 0; /* внешние поля */

padding: 5px; /* внутренние отступы */ }

a:hover { background: #c33; /* фон ссылки под курсором */ }

</style> </head> <body> <div>

<a href="#">BUTTON 1</a>

<a href="#">BUTTON 2</a>

</div> </body> </html>

Рис.10. Создание ссылок-блоков свойством display: block

2.3.Оформление таблиц

С помощью CSS свойства можно формировать свойства таблиц : например, устанавливать ширину и высоту ячеек, горизонтальное и вертикальное выравнивание текста, определять заголовок и местоположения таблицы. Рассмотрим некоторые из этих свойств. Для формирования простой таблицы с выделенными заголовками опишем свойства стиля этих заголовков тегами <th>.

<html> <head>
<title>Примеры заголовков</title>
</head> <body>
<table border="1" cellspacing="0" cellpadding="10">
<tr> <th>Заголовок</th> <th>Заголовок</th> <th>Заголовок</th>
</tr><tr><td>Текст</td><td>Текст</td><td>Текст</td></tr><tr>
<td>Текст</td><td>Текст</td><td>Текст</td></tr></table>
</body></html>

В результате обработки кода в браузере получим таблицу следующего вида (рисунок 11).

Рис.11. Применение CSS для формирования заголовка таблицы

Следует дополнить, что свойство width отвечает за ширину ячейки таблицы, height за высоту, align ("right","center","justify") – за горизонтальное выравнивание, valig"n ("bottom","middle","baseline") – за вертикальное выравнивание, align ("left","right","center") – местоположение таблицы в целом[8].

2.4.Трансформирование

Свойством CSS transform можно трансформировать элементы, свойство translate(x,y) можно указывать характер смещения элемента (количество пикселей по горизонтали и вертикали).Значением этого свойства определяется одна из функций трансформирования. Приведем пример.

<html>

<head>

#el1,#el2 {position:absolute;top:10px;left:10px;background-color:#7A005C;

color:white;width:300px;height:150px;font-size:1.5em;

border:1px #000 solid;

}#el2 {transform: translate(160px,180px);}

</style></head>

<body><div id='el1'>Изначальная позиция</div>

<div id='el2'>После применения translate(50px,180px)</div>

</body></html></head><body><div id='el1'>Изначальная позиция</div>

<div id='el2'>После применения translate(50px,180px)

</div>

</body>

</html>

Результатом применения стиля станет изображение (рисунок 12):

Рис.12. Пример применения свойства CSS трансформирования объекта

2.5. Цвета перехода

Ранние версии CSS не содержали встроенных возможности построения градиентов: взамен этого использовались фоновые рисунки. В более поздних версиях каскадных библиотек уже появились возможность отрисовки браузером любого градиента, сэкономленное время значительно повысило скорость загрузки страниц[10].

За создание линейных градиентов отвечает метода linear-gradient, который всегда указан в значение свойства background. При создании линейного градиента указывается его направление и цвета переход (рисунок 13).

Рис.13. Пример применения свойства CSS linear-gradient

<html>

<head>

#wrap1,#wrap2,#wrap3,#wrap4 {

float:left;margin:5px;

width:300px;height:150px;

padding:10px;border:1px #000 solid;

text-decoration:underline;

}

#wrap1 {background:linear-gradient(top,white,black);

background:-webkit-linear-gradient(top,white,black); /* для Safari */}

#wrap2 {background:linear-gradient(left,white,black);

background:-webkit-linear-gradient(left,white,black); /* для Safari */}

#wrap3 {background:linear-gradient(0deg,white,black);

background:-webkit-linear-gradient(0deg,white,black); /* для Safari */}

#wrap4 {background:linear-gradient(270deg,white,black);

background:-webkit-linear-gradient(270deg,white,black); /* для Safari */}

</style>

</head>

<body>

<p>1. Примеры задания направлений градиентов с помощью ключевых слов: </p><div id="wrap1">linear-gradient(top,white,black)</div>

<div id="wrap2">linear-gradient(left,white,black)</div>

<p>2. Примеры задания направлений градиентов с помощью градусов: </p>

<div id="wrap3">linear-gradient(0deg,white,black)</div>

<div id="wrap4">linear-gradient(270deg,white,black)</div>

</body>

</html>

Следует отметить, что метод radial-gradient позволяет создавать сферические градиенты. Синтаксис определения сферических градиентов очень похож на синтаксис линейных, но требует дополнительно задания формы градиента (сферической или эллипсоидной).

Повторяющиеся градиенты задаются с помощью CSS3 методов repeating-linear-gradient (повторяющийся линейный градиент) и repeating-radial-gradient (повторяющийся сферический градиент).

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